@import url('https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

:root{
    --font-roboto:'Roboto',sans-serif;
    --font-mulish:'Mulish',sans-serif;

    --bg-color:#ededed;

    --text-color:#484848;
    --text-color-light:#4c4c4c;
    --brown-color:#9D7C67;
    --brown-color-hover:#745744;
    --line-color:#D0D0D0;
}

/* =========================
RESET
========================= */

*,
*::before,
*::after{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
}

img{
    display:block;
    width:100%;
    max-width:100%;
}

a{
    color:inherit;
    text-decoration:none;
}

button{
    font:inherit;
}

/* =========================
HERO
========================= */

.hero{
    width:100%;
    display:grid;
    grid-template-columns:48% 52%;
    align-items:stretch;
    background:var(--bg-color);
    overflow:hidden;
}

.hero__content{
    min-width:0;
    height:100%;
    padding:18px clamp(24px,2.2vw,42px) 40px;
    display:flex;
    flex-direction:column;
    position:relative;
    z-index:2;
    overflow:hidden;
}

.hero__body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 120px 0 54px;
}

/* =========================
HERO NAV
========================= */

.hero__nav{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    gap:clamp(24px,2.6vw,46px);
    opacity:0;
    transform:translateY(-15px);
    animation:hero-fade-down .8s ease .15s forwards;
}

.hero__nav-link{
    position:relative;
    font-family:var(--font-roboto);
    font-size:14px;
    font-weight:300;
    line-height:1;
    letter-spacing:.04em;
    text-transform:uppercase;
    color:var(--text-color-light);
    transition:color .3s ease;
}

.hero__nav-link::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-7px;
    width:100%;
    height:1px;
    background:var(--brown-color);
    transform:scaleX(0);
    transform-origin:right center;
    transition:transform .35s ease;
}

.hero__nav-link:hover{
    color:var(--brown-color);
}

.hero__nav-link:hover::after{
    transform:scaleX(1);
    transform-origin:left center;
}

/* =========================
HERO TITLE
========================= */

.hero__title{
    margin:0;
    font-family:var(--font-mulish);
    font-size:clamp(72px,7.1vw,138px);
    font-weight:300;
    line-height:.93;
    letter-spacing:.035em;
    text-transform:uppercase;
    color:var(--text-color);
}

.hero__title span{
    display:block;
    opacity:0;
    transform:translateY(45px);
    animation:hero-fade-up .9s cubic-bezier(.22,1,.36,1) forwards;
}

.hero__title span:first-child{
    animation-delay:.25s;
}

.hero__title span:last-child{
    margin-top:.16em;
    animation-delay:.38s;
}

/* =========================
HERO TEXT
========================= */

.hero__text {
    max-width: 720px;
    margin: clamp(34px,5vh,58px) 0 0;
    font-family: var(--font-mulish);
    font-size: clamp(16px,1.3vw,22px);
    font-weight: 300;
    line-height: 1.35;
    letter-spacing: .035em;
    color: var(--text-color-light);
    opacity: 0;
    transform: translateY(30px);
    animation: hero-fade-up .9s cubic-bezier(.22,1,.36,1) .55s forwards;
}

/* =========================
HERO SIGNATURE
========================= */

.hero__signature{
    width:clamp(230px,25vw,390px);
    height:auto;
    margin-top:clamp(30px,5vh,55px);
    object-fit:contain;
    opacity:0;
    transform:translateY(25px) rotate(-2deg);
    animation:hero-signature .9s cubic-bezier(.22,1,.36,1) .72s forwards;
}

/* =========================
HERO IMAGE
========================= */

.hero__image-wrap{
    min-width:0;
    width:100%;
    position:relative;
    align-self:start;
    overflow:hidden;
}

.hero__image-wrap::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        90deg,
        rgba(237,237,237,.12) 0%,
        rgba(237,237,237,0) 18%
    );
    pointer-events:none;
}

.hero__image{
    width:100%;
    height:auto;
    display:block;
    object-fit:contain;
    object-position:left top;
    opacity:0;
    transform:translateX(20px);
    animation:hero-image-show 1.2s cubic-bezier(.22,1,.36,1) .1s forwards;
    transition:filter .4s ease;
}

.hero__image-wrap:hover .hero__image{
    filter:brightness(1.025);
}

/* =========================
ANIMATIONS
========================= */

@keyframes hero-fade-up{
    0%{
        opacity:0;
        transform:translateY(45px);
    }
    100%{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes hero-fade-down{
    0%{
        opacity:0;
        transform:translateY(-15px);
    }
    100%{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes hero-signature{
    0%{
        opacity:0;
        transform:translateY(25px) rotate(-2deg);
    }
    100%{
        opacity:1;
        transform:translateY(0) rotate(-2deg);
    }
}

@keyframes hero-image-show{
    0%{
        opacity:0;
        transform:translateX(20px);
    }
    100%{
        opacity:1;
        transform:translateX(0);
    }
}

/* =========================
ADAPTIVE 1400
========================= */

@media(max-width:1400px){
    .hero__title{
        font-size:clamp(68px,6.8vw,105px);
    }

    .hero__text{
        max-width:470px;
        margin-top:34px;
        font-size:18px;
    }

    .hero__signature{
        width:280px;
        margin-top:32px;
    }
    .hero__body {
        padding: 78px 0 54px;
    }
}

/* =========================
ADAPTIVE 1200
========================= */

@media(max-width:1200px){
    .hero{
        grid-template-columns:50% 50%;
    }

    .hero__content{
        padding:16px 28px 30px;
    }

    .hero__nav{
        gap:28px;
    }

    .hero__nav-link{
        font-size:12px;
    }

    .hero__body{
        padding-bottom:28px;
    }

    .hero__title{
        font-size:clamp(60px,6.6vw,82px);
    }

    .hero__title span:last-child{
        margin-top:.12em;
    }

    .hero__text{
        max-width:410px;
        margin-top:28px;
        font-size:16px;
        line-height:1.4;
    }

    .hero__signature{
        width:240px;
        margin-top:26px;
    }
}

/* =========================
ADAPTIVE 1000
========================= */

@media(max-width:1000px){
    .hero__content{
        padding:15px 22px 24px;
    }

    .hero__nav{
        gap:22px;
    }

    .hero__nav-link{
        font-size:11px;
    }

    .hero__body{
        padding-bottom:22px;
    }

    .hero__title{
        font-size:clamp(52px,6.3vw,68px);
    }

    .hero__text{
        max-width:360px;
        margin-top:24px;
        font-size:15px;
    }

    .hero__signature{
        width:210px;
        margin-top:22px;
    }
}

/* =========================
TABLET
========================= */

@media(max-width:900px){
    .hero{
        display:flex;
        flex-direction:column;
    }

    .hero__content{
        width:100%;
        height:auto;
        padding:20px 24px 54px;
        overflow:visible;
    }

    .hero__nav{
        gap:25px;
        overflow-x:auto;
        overflow-y:hidden;
        scrollbar-width:none;
        -webkit-overflow-scrolling:touch;
    }

    .hero__nav::-webkit-scrollbar{
        display:none;
    }

    .hero__nav-link{
        flex:0 0 auto;
        font-size:12px;
    }

    .hero__body{
        flex:none;
        padding:70px 0 20px;
        justify-content:flex-start;
    }

    .hero__title{
        font-size:clamp(64px,11vw,94px);
    }

    .hero__text{
        max-width:520px;
        margin-top:36px;
        font-size:20px;
    }

    .hero__signature{
        width:300px;
        margin-top:36px;
    }

    .hero__image-wrap{
        width:100%;
        align-self:auto;
        overflow:hidden;
    }

    .hero__image{
        width:100%;
        height:auto;
        object-fit:contain;
        object-position:center top;
    }

    .hero__image-wrap::after{
        background:linear-gradient(
            180deg,
            rgba(237,237,237,.1) 0%,
            rgba(237,237,237,0) 15%
        );
    }
}

/* =========================
MOBILE
========================= */

@media(max-width:600px){
    .hero__content{
        padding:18px 18px 42px;
    }

    .hero__nav{
        gap:20px;
    }

    .hero__nav-link{
        font-size:11px;
    }

    .hero__body{
        padding:55px 0 12px;
    }

    .hero__title{
        font-size:clamp(52px,17vw,78px);
        line-height:.96;
        letter-spacing:.02em;
    }

    .hero__title span:last-child{
        margin-top:.1em;
    }

    .hero__text{
        max-width:100%;
        margin-top:30px;
        font-size:17px;
        line-height:1.4;
    }

    .hero__signature{
        width:240px;
        margin-top:28px;
    }
}

/* =========================
SMALL MOBILE
========================= */

@media(max-width:390px){
    .hero__content{
        padding:16px 16px 36px;
    }

    .hero__nav{
        gap:18px;
    }

    .hero__body{
        padding-top:48px;
    }

    .hero__title{
        font-size:50px;
    }

    .hero__text{
        margin-top:26px;
        font-size:16px;
    }

    .hero__signature{
        width:215px;
        margin-top:26px;
    }
}

/* =========================
REDUCED MOTION
========================= */

@media(prefers-reduced-motion:reduce){
    .hero__nav,
    .hero__title span,
    .hero__text,
    .hero__signature,
    .hero__image{
        opacity:1;
        transform:none;
        animation:none;
    }
}

/* =========================
SERVICES
========================= */
.services{
    width:100%;
    padding:60px clamp(24px,2.2vw,42px) 70px;
    background:#fff;
    overflow:hidden;
}

.services__head{
    width:100%;
    margin-bottom:42px;
    display:grid;
    grid-template-columns:auto minmax(80px,1fr) auto;
    align-items:center;
    gap:18px;
}

.services__title{
    margin:0;
    font-family:var(--font-mulish);
    font-size:clamp(28px,2.15vw,42px);
    font-weight:300;
    line-height:1;
    letter-spacing:.05em;
    text-transform:uppercase;
    color:var(--text-color);
    white-space:nowrap;
}

.services__line{
    width:100%;
    height:1px;
    background:var(--line-color);
    transform:scaleX(0);
    transform-origin:left center;
    transition:transform 1s cubic-bezier(.22,1,.36,1) .2s;
}

.services__subtitle{
    margin:0;
    font-family:var(--font-mulish);
    font-size:clamp(16px,1.35vw,24px);
    font-weight:300;
    line-height:1.2;
    letter-spacing:.035em;
    color:var(--text-color-light);
    white-space:nowrap;
}

.services__head.is-visible .services__line{
    transform:scaleX(1);
}

.services__grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px;
}

.services__card{
    min-width:0;
    min-height:520px;
    padding:28px 26px 24px;
    display:flex;
    flex-direction:column;
    position:relative;
    background:#F5F5F5;
    border:1px solid transparent;
    overflow:hidden;
    transition:
        transform .45s cubic-bezier(.22,1,.36,1),
        box-shadow .45s ease,
        border-color .45s ease,
        background .45s ease;
}

.services__card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:3px;
    background:var(--brown-color);
    transform:scaleX(0);
    transform-origin:left center;
    transition:transform .45s cubic-bezier(.22,1,.36,1);
}

.services__card:hover{
    transform:translateY(-8px);
    background:#f8f7f6;
    border-color:rgba(157,124,103,.28);
    box-shadow:0 24px 50px rgba(72,72,72,.08);
}

.services__card:hover::before{
    transform:scaleX(1);
}

.services__card-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:18px;
}

.services__number{
    font-family:var(--font-mulish);
    font-size:clamp(48px,4vw,76px);
    font-weight:200;
    line-height:.9;
    letter-spacing:.04em;
    color:#B7B6B4;
    transition:
        color .35s ease,
        transform .45s cubic-bezier(.22,1,.36,1);
}

.services__card:hover .services__number{
    color:var(--brown-color);
    transform:translateY(-4px);
}

.services__tag{
    padding:8px 12px;
    border:1px solid rgba(157,124,103,.55);
    border-radius:100px;
    font-family:var(--font-roboto);
    font-size:12px;
    font-weight:400;
    line-height:1;
    letter-spacing:.04em;
    text-transform:uppercase;
    color:var(--brown-color);
    background:rgba(157,124,103,.08);
    transition:
        background .35s ease,
        color .35s ease,
        border-color .35s ease;
}

.services__card:hover .services__tag{
    color:#fff;
    background:var(--brown-color);
    border-color:var(--brown-color);
}

.services__card-title{
    margin:44px 0 0;
    font-family:var(--font-mulish);
    font-size:clamp(24px,1.8vw,34px);
    font-weight:400;
    line-height:1.08;
    color:var(--text-color);
}

.services__text{
    max-width:95%;
    margin:28px 0 36px;
    font-family:var(--font-mulish);
    font-size:clamp(16px,1.1vw,20px);
    font-weight:300;
    line-height:1.38;
    color:var(--text-color);
}

.services__link {
    width: max-content;
    max-width: 100%;
    margin-top: auto;
    padding-bottom: 9px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    position: relative;
    font-family: var(--font-roboto);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #a64508;
}


.services__link::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    height:1px;
    background:var(--brown-color);
    transform-origin:left center;
    transition:transform .35s ease;
}

.services__arrow{
    display:inline-block;
    font-size:18px;
    line-height:1;
    transition:transform .35s cubic-bezier(.22,1,.36,1);
}

.services__link:hover{
    color:var(--brown-color-hover);
}

.services__link:hover::after{
    transform:scaleX(.72);
}

.services__link:hover .services__arrow{
    transform:translateX(7px);
}

/* =========================
REVEAL ANIMATION
========================= */
.reveal{
    opacity:0;
    transform:translateY(40px);
    transition:
        opacity .8s cubic-bezier(.22,1,.36,1),
        transform .8s cubic-bezier(.22,1,.36,1);
}

.reveal.is-visible{
    opacity:1;
    transform:translateY(0);
}

.services__card:nth-child(1){
    transition-delay:.05s;
}

.services__card:nth-child(2){
    transition-delay:.12s;
}

.services__card:nth-child(3){
    transition-delay:.19s;
}

.services__card:nth-child(4){
    transition-delay:.26s;
}

/* =========================
ADAPTIVE
========================= */
@media(max-width:1300px){
    .services{
        padding-top:52px;
        padding-bottom:60px;
    }

    .services__grid{
        gap:14px;
    }

    .services__card{
        min-height:470px;
        padding:24px 20px 22px;
    }

    .services__card-title{
        margin-top:36px;
    }

    .services__text{
        margin-top:22px;
        font-size:16px;
    }

    .services__link{
        font-size:12px;
    }
}

@media(max-width:1000px){
    .services__head{
        grid-template-columns:auto 1fr;
        gap:16px;
    }

    .services__subtitle{
        grid-column:1/-1;
        white-space:normal;
    }

    .services__grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:16px;
    }

    .services__card{
        min-height:460px;
    }

    .services__card-title{
        font-size:28px;
    }

    .services__text{
        max-width:90%;
        font-size:17px;
    }
}

@media(max-width:700px){
    .services{
        padding:44px 18px 48px;
    }

    .services__head{
        margin-bottom:30px;
        grid-template-columns:auto 1fr;
        gap:12px;
    }

    .services__title{
        font-size:26px;
    }

    .services__subtitle{
        font-size:16px;
        line-height:1.35;
    }

    .services__grid{
        grid-template-columns:1fr;
        gap:12px;
    }

    .services__card{
        min-height:auto;
        padding:24px 20px 22px;
    }

    .services__number{
        font-size:54px;
    }

    .services__tag{
        padding:7px 10px;
        font-size:10px;
    }

    .services__card-title{
        margin-top:34px;
        font-size:28px;
    }

    .services__text{
        max-width:100%;
        margin:20px 0 42px;
        font-size:16px;
    }

    .services__link{
        font-size:12px;
    }
}

@media(max-width:390px){
    .services{
        padding-left:16px;
        padding-right:16px;
    }

    .services__head{
        grid-template-columns:1fr;
    }

    .services__line{
        display:none;
    }

    .services__card-title{
        font-size:26px;
    }
}

@media(prefers-reduced-motion:reduce){
    .reveal,
    .services__line{
        opacity:1;
        transform:none;
        transition:none;
    }

    .services__card,
    .services__number,
    .services__tag,
    .services__arrow{
        transition:none;
    }
}

/* =========================
ABOUT
========================= */
.about-section{
    width:100%;
    padding:70px clamp(24px,2.2vw,42px);
    display:grid;
    grid-template-columns:minmax(320px,38%) minmax(0,62%);
    gap:clamp(42px,4.2vw,80px);
    align-items:stretch;
    background:#fff;
    overflow:hidden;
}

/* =========================
ABOUT IMAGE
========================= */
.about-section__image-wrap{
    min-width:0;
    width:100%;
    height:100%;
    position:relative;
    overflow:hidden;
    opacity:0;
    transform:translateX(-45px);
    transition:
        opacity .9s cubic-bezier(.22,1,.36,1),
        transform .9s cubic-bezier(.22,1,.36,1),
        box-shadow .45s ease;
}

.about-section.is-visible .about-section__image-wrap{
    opacity:1;
    transform:translateX(0);
}

.about-section__image{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    object-position:center 15%;
    transition:
        transform .8s cubic-bezier(.22,1,.36,1),
        filter .45s ease;
}

.about-section__image-overlay{
    position:absolute;
    inset:0;
    z-index:2;
    pointer-events:none;
    background:linear-gradient(
        180deg,
        rgba(72,72,72,0) 55%,
        rgba(72,72,72,.05) 100%
    );
    opacity:0;
    transition:opacity .45s ease;
}

.about-section__image-wrap:hover{
    box-shadow:0 28px 60px rgba(72,72,72,.1);
}

.about-section__image-wrap:hover .about-section__image{
    transform:scale(1.018);
    filter:brightness(1.02);
}

.about-section__image-wrap:hover .about-section__image-overlay{
    opacity:1;
}

/* =========================
ABOUT CONTENT
========================= */
.about-section__content{
    min-width:0;
    height:100%;
    display:flex;
    flex-direction:column;
    opacity:0;
    transform:translateX(45px);
    transition:
        opacity .9s cubic-bezier(.22,1,.36,1) .12s,
        transform .9s cubic-bezier(.22,1,.36,1) .12s;
}

.about-section.is-visible .about-section__content{
    opacity:1;
    transform:translateX(0);
}

/* =========================
ABOUT HEAD
========================= */
.about-section__head{
    width:100%;
    margin-bottom:clamp(32px,3vw,48px);
    display:grid;
    grid-template-columns:auto 1fr;
    align-items:center;
    gap:20px;
}

.about-section__title{
    margin:0;
    font-family:var(--font-mulish);
    font-size:clamp(28px,2vw,40px);
    font-weight:300;
    line-height:1;
    letter-spacing:.045em;
    text-transform:uppercase;
    color:var(--text-color);
    white-space:nowrap;
}

.about-section__line{
    width:100%;
    height:1px;
    background:var(--line-color);
    transform:scaleX(0);
    transform-origin:left center;
    transition:transform 1.1s cubic-bezier(.22,1,.36,1) .35s;
}

.about-section.is-visible .about-section__line{
    transform:scaleX(1);
}

/* =========================
ABOUT TEXT
========================= */
.about-section__text{
    width:100%;
    max-width:100%;
    font-family:var(--font-mulish);
    font-size:clamp(16px,1.05vw,20px);
    font-weight:300;
    line-height:1.42;
    color:var(--text-color);
}

.about-section__text p{
    margin:0;
    opacity:0;
    transform:translateY(18px);
    transition:
        opacity .7s cubic-bezier(.22,1,.36,1),
        transform .7s cubic-bezier(.22,1,.36,1);
}

.about-section__text p + p{
    margin-top:20px;
}

.about-section.is-visible .about-section__text p{
    opacity:1;
    transform:translateY(0);
}

.about-section.is-visible .about-section__text p:nth-child(1){
    transition-delay:.25s;
}

.about-section.is-visible .about-section__text p:nth-child(2){
    transition-delay:.32s;
}

.about-section.is-visible .about-section__text p:nth-child(3){
    transition-delay:.39s;
}

.about-section.is-visible .about-section__text p:nth-child(4){
    transition-delay:.46s;
}

.about-section.is-visible .about-section__text p:nth-child(5){
    transition-delay:.53s;
}

.about-section.is-visible .about-section__text p:nth-child(6){
    transition-delay:.60s;
}

.about-section.is-visible .about-section__text p:nth-child(7){
    transition-delay:.67s;
}

/* =========================
ABOUT ADAPTIVE 1200
========================= */
@media(max-width:1200px){
    .about-section{
        padding-top:60px;
        padding-bottom:60px;
        grid-template-columns:minmax(300px,40%) minmax(0,60%);
        gap:38px;
    }

    .about-section__text{
        font-size:16px;
        line-height:1.4;
    }

    .about-section__text p + p{
        margin-top:17px;
    }
}

/* =========================
ABOUT ADAPTIVE 900
========================= */
@media(max-width:900px){
    .about-section{
        grid-template-columns:42% 58%;
        gap:28px;
        padding:52px 24px;
    }

    .about-section__head{
        margin-bottom:28px;
        gap:14px;
    }

    .about-section__title{
        font-size:28px;
    }

    .about-section__text{
        font-size:15px;
    }

    .about-section__text p + p{
        margin-top:14px;
    }

    .about-section__image{
        object-position:center top;
    }
}

/* =========================
ABOUT MOBILE
========================= */
@media(max-width:760px){
    .about-section{
        display:flex;
        flex-direction:column;
        gap:38px;
        padding:48px 18px;
    }

    .about-section__image-wrap{
        width:100%;
        height:auto;
        aspect-ratio:4/5;
    }

    .about-section__image{
        position:absolute;
        inset:0;
        width:100%;
        height:100%;
        object-fit:cover;
        object-position:center top;
    }

    .about-section__content{
        width:100%;
        height:auto;
    }

    .about-section__head{
        margin-bottom:30px;
    }

    .about-section__title{
        font-size:28px;
    }

    .about-section__text{
        max-width:100%;
        font-size:16px;
        line-height:1.5;
    }

    .about-section__text p + p{
        margin-top:18px;
    }
}

/* =========================
ABOUT SMALL MOBILE
========================= */
@media(max-width:390px){
    .about-section{
        padding:42px 16px;
        gap:32px;
    }

    .about-section__image-wrap{
        aspect-ratio:3/4;
    }

    .about-section__head{
        gap:12px;
        margin-bottom:26px;
    }

    .about-section__title{
        font-size:25px;
    }

    .about-section__text{
        font-size:15px;
    }
}

/* =========================
REDUCED MOTION
========================= */
@media(prefers-reduced-motion:reduce){
    .about-section__image-wrap,
    .about-section__content,
    .about-section__line,
    .about-section__text p{
        opacity:1;
        transform:none;
        transition:none;
    }

    .about-section__image{
        transform:none;
        transition:none;
    }
}

/* =========================
PROJECTS
========================= */
.projects{
    width:100%;
    padding:70px clamp(24px,2.2vw,42px);
    background:#fff;
    overflow:hidden;
}

/* =========================
PROJECTS HEAD
========================= */
.projects__head{
    width:100%;
    margin-bottom:42px;
    display:grid;
    grid-template-columns:auto minmax(80px,1fr) auto;
    align-items:center;
    gap:20px;
}

.projects__title{
    margin:0;
    font-family:var(--font-mulish);
    font-size:clamp(28px,2vw,40px);
    font-weight:300;
    line-height:1;
    letter-spacing:.045em;
    text-transform:uppercase;
    color:var(--text-color);
    white-space:nowrap;
}

.projects__line{
    width:100%;
    height:1px;
    background:var(--line-color);
    transform:scaleX(0);
    transform-origin:left center;
    transition:transform 1.1s cubic-bezier(.22,1,.36,1) .25s;
}

.projects__subtitle{
    margin:0;
    font-family:var(--font-mulish);
    font-size:clamp(16px,1.25vw,22px);
    font-weight:300;
    line-height:1.2;
    letter-spacing:.05em;
    color:var(--text-color-light);
    white-space:nowrap;
}

.projects__head.is-visible .projects__line{
    transform:scaleX(1);
}

/* =========================
PROJECTS GRID
========================= */
.projects__grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:24px;
}

/* =========================
PROJECT CARD
========================= */
.projects__card{
    min-width:0;
    min-height:150px;
    padding:28px 32px;
    display:grid;
    grid-template-columns:minmax(190px,36%) 1px minmax(0,1fr);
    align-items:center;
    gap:30px;
    position:relative;
    background:#F7F7F7;
    border:1px solid rgba(157,124,103,.18);
    overflow:hidden;
    cursor:pointer;
    transition:
        transform .45s cubic-bezier(.22,1,.36,1),
        border-color .4s ease,
        background .4s ease,
        box-shadow .45s ease;
}

.projects__card::before{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    height:2px;
    background:var(--brown-color);
    transform:scaleX(0);
    transform-origin:left center;
    transition:transform .5s cubic-bezier(.22,1,.36,1);
}

.projects__card:hover{
    transform:translateY(-7px);
    background:#fff;
    border-color:rgba(157,124,103,.45);
    box-shadow:0 24px 50px rgba(72,72,72,.08);
}

.projects__card:hover::before{
    transform:scaleX(1);
}

/* =========================
PROJECT LOGO
========================= */
.projects__logo-wrap{
    min-width:0;
    display:flex;
    align-items:center;
    justify-content:flex-start;
}

.projects__logo{
    width:100%;
    max-width:280px;
    height:70px;
    object-fit:contain;
    object-position:left center;
    filter:grayscale(1);
    opacity:.72;
    transition:
        filter .55s ease,
        opacity .45s ease,
        transform .55s cubic-bezier(.22,1,.36,1);
}

.projects__card:hover .projects__logo{
    filter:grayscale(0);
    opacity:1;
    transform:scale(1.025);
}

/* =========================
PROJECT DIVIDER
========================= */
.projects__divider{
    width:1px;
    height:76px;
    background:var(--line-color);
    transition:
        height .4s ease,
        background .4s ease;
}

.projects__card:hover .projects__divider{
    height:88px;
    background:rgba(157,124,103,.45);
}

/* =========================
PROJECT INFO
========================= */
.projects__info{
    min-width:0;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:16px;
}

.projects__card-title{
    margin:0;
    font-family:var(--font-mulish);
    font-size:clamp(20px,1.4vw,27px);
    font-weight:400;
    line-height:1.2;
    color:var(--text-color);
}

.projects__card-link{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    font-family:var(--font-mulish);
    font-size:clamp(15px,1vw,18px);
    font-weight:300;
    line-height:1.2;
    color:var(--brown-color);
    transition:color .3s ease;
}

.projects__arrow{
    flex:0 0 auto;
    font-family:var(--font-roboto);
    font-size:22px;
    font-weight:300;
    line-height:1;
    transition:transform .4s cubic-bezier(.22,1,.36,1);
}

.projects__card:hover .projects__card-link{
    color:var(--brown-color-hover);
}

.projects__card:hover .projects__arrow{
    transform:translateX(8px);
}

/* =========================
REVEAL
========================= */
.projects .reveal{
    opacity:0;
    transform:translateY(35px);
    transition:
        opacity .8s cubic-bezier(.22,1,.36,1),
        transform .8s cubic-bezier(.22,1,.36,1);
}

.projects .reveal.is-visible{
    opacity:1;
    transform:translateY(0);
}

.projects__card:nth-child(1){
    transition-delay:.08s;
}

.projects__card:nth-child(2){
    transition-delay:.18s;
}

/* =========================
ADAPTIVE 1200
========================= */
@media(max-width:1200px){
    .projects{
        padding-top:60px;
        padding-bottom:60px;
    }

    .projects__grid{
        gap:18px;
    }

    .projects__card{
        padding:24px;
        grid-template-columns:minmax(150px,34%) 1px minmax(0,1fr);
        gap:22px;
    }

    .projects__logo{
        height:60px;
    }

    .projects__divider{
        height:68px;
    }

    .projects__card-title{
        font-size:20px;
    }
}

/* =========================
ADAPTIVE 900
========================= */
@media(max-width:900px){
    .projects{
        padding:52px 24px;
    }

    .projects__head{
        margin-bottom:32px;
        grid-template-columns:auto 1fr;
        gap:14px;
    }

    .projects__subtitle{
        grid-column:1/-1;
        white-space:normal;
    }

    .projects__grid{
        grid-template-columns:1fr;
    }

    .projects__card{
        grid-template-columns:minmax(180px,30%) 1px minmax(0,1fr);
    }

    .projects__logo{
        max-width:240px;
    }
}

/* =========================
MOBILE
========================= */
@media(max-width:600px){
    .projects{
        padding:46px 18px;
    }

    .projects__head{
        margin-bottom:28px;
    }

    .projects__title{
        font-size:27px;
    }

    .projects__subtitle{
        font-size:16px;
        line-height:1.35;
    }

    .projects__card{
        min-height:auto;
        padding:24px 20px;
        grid-template-columns:1fr;
        gap:20px;
    }

    .projects__logo-wrap{
        min-height:60px;
    }

    .projects__logo{
        width:auto;
        max-width:230px;
        height:58px;
    }

    .projects__divider{
        width:100%;
        height:1px;
    }

    .projects__card:hover .projects__divider{
        width:100%;
        height:1px;
    }

    .projects__info{
        gap:14px;
    }

    .projects__card-title{
        font-size:21px;
    }

    .projects__card-link{
        font-size:15px;
    }

    .projects__card:hover{
        transform:translateY(-4px);
    }
}

/* =========================
SMALL MOBILE
========================= */
@media(max-width:390px){
    .projects{
        padding-left:16px;
        padding-right:16px;
    }

    .projects__head{
        grid-template-columns:1fr;
    }

    .projects__line{
        display:none;
    }

    .projects__card{
        padding:22px 18px;
    }

    .projects__logo{
        max-width:200px;
        height:54px;
    }
}

/* =========================
REDUCED MOTION
========================= */
@media(prefers-reduced-motion:reduce){
    .projects .reveal,
    .projects__line,
    .projects__card,
    .projects__logo,
    .projects__divider,
    .projects__arrow{
        opacity:1;
        transform:none;
        transition:none;
    }
}


/* =========================
CONTACTS
========================= */
.contacts{
    width:100%;
    padding:70px clamp(24px,2.2vw,42px);
    background:#fff;
    overflow:hidden;
}

/* =========================
CONTACTS HEAD
========================= */
.contacts__head{
    width:100%;
    margin-bottom:42px;
    display:grid;
    grid-template-columns:auto minmax(80px,1fr) auto;
    align-items:center;
    gap:20px;
}

.contacts__title{
    margin:0;
    font-family:var(--font-mulish);
    font-size:clamp(28px,2vw,40px);
    font-weight:300;
    line-height:1;
    letter-spacing:.045em;
    text-transform:uppercase;
    color:var(--text-color);
    white-space:nowrap;
}

.contacts__line{
    width:100%;
    height:1px;
    background:var(--line-color);
    transform:scaleX(0);
    transform-origin:left center;
    transition:transform 1.1s cubic-bezier(.22,1,.36,1) .25s;
}

.contacts__subtitle{
    margin:0;
    font-family:var(--font-mulish);
    font-size:clamp(16px,1.25vw,22px);
    font-weight:300;
    line-height:1.2;
    letter-spacing:.05em;
    color:var(--text-color-light);
    white-space:nowrap;
}

.contacts__head.is-visible .contacts__line{
    transform:scaleX(1);
}

/* =========================
CONTACTS GRID
========================= */
.contacts__grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:20px;
}

/* =========================
CONTACT CARD
========================= */
.contacts__card{
    min-width:0;
    min-height:250px;
    padding:32px 34px 28px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    position:relative;
    background:#fff;
    border:1px solid var(--line-color);
    border-radius:24px;
    overflow:hidden;
    transition:
        transform .45s cubic-bezier(.22,1,.36,1),
        box-shadow .45s ease,
        border-color .4s ease,
        background .4s ease;
}

.contacts__card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:3px;
    background:var(--brown-color);
    transform:scaleX(0);
    transform-origin:left center;
    transition:transform .45s cubic-bezier(.22,1,.36,1);
}

.contacts__card:hover{
    transform:translateY(-8px);
    background:#faf9f8;
    border-color:rgba(157,124,103,.42);
    box-shadow:0 24px 55px rgba(72,72,72,.08);
}

.contacts__card:hover::before{
    transform:scaleX(1);
}

.contacts__card-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
}

.contacts__card-title{
    margin:0;
    font-family:var(--font-mulish);
    font-size:clamp(22px,1.55vw,30px);
    font-weight:300;
    line-height:1.15;
    text-transform:uppercase;
    color:var(--text-color);
}

.contacts__arrow{
    flex:0 0 auto;
    font-family:var(--font-roboto);
    font-size:24px;
    font-weight:300;
    line-height:1;
    color:var(--brown-color);
    opacity:0;
    transform:translate(-8px,8px);
    transition:
        opacity .35s ease,
        transform .45s cubic-bezier(.22,1,.36,1);
}

.contacts__card--link:hover .contacts__arrow{
    opacity:1;
    transform:translate(0,0);
}

.contacts__card-bottom{
    margin-top:45px;
}

.contacts__value{
    font-family:var(--font-mulish);
    font-size:clamp(17px,1.2vw,22px);
    font-weight:400;
    line-height:1.3;
    color:var(--text-color);
    transition:color .3s ease;
}

.contacts__card--link:hover .contacts__value{
    color:var(--brown-color-hover);
}

/* =========================
SOCIALS
========================= */
.contacts__socials{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:14px;
}

.contacts__social{
    width:54px;
    height:54px;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    border-radius:50%;
    background:#F4F3F2;
    overflow:hidden;
    transition:
        transform .4s cubic-bezier(.22,1,.36,1),
        background .35s ease,
        box-shadow .4s ease;
}

.contacts__social::before{
    content:"";
    position:absolute;
    inset:0;
    border:1px solid rgba(157,124,103,0);
    border-radius:50%;
    transition:border-color .35s ease;
}

.contacts__social-icon{
    width:25px;
    height:25px;
    object-fit:contain;
    filter:grayscale(1);
    opacity:.55;
    transition:
        filter .45s ease,
        opacity .35s ease,
        transform .45s cubic-bezier(.22,1,.36,1);
}

.contacts__social:hover{
    transform:translateY(-6px);
    background:#fff;
    box-shadow:0 12px 25px rgba(72,72,72,.09);
}

.contacts__social:hover::before{
    border-color:rgba(157,124,103,.35);
}

.contacts__social:hover .contacts__social-icon{
    filter:grayscale(0);
    opacity:1;
    transform:scale(1.08);
}

/* =========================
COPY EMAIL
========================= */
.contacts__card--email{
    width:100%;
    font:inherit;
    text-align:left;
    color:inherit;
    cursor:pointer;
}

.copy-notification{
    position:fixed;
    z-index:1000;
    left:50%;
    bottom:32px;
    padding:13px 20px;
    display:flex;
    align-items:center;
    gap:9px;
    border:1px solid rgba(157,124,103,.25);
    border-radius:100px;
    background:rgba(255,255,255,.92);
    box-shadow:0 16px 45px rgba(72,72,72,.12);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    font-family:var(--font-mulish);
    font-size:14px;
    font-weight:400;
    line-height:1;
    color:var(--brown-color-hover);
    opacity:0;
    visibility:hidden;
    transform:translate(-50%,20px);
    transition:
        opacity .35s ease,
        visibility .35s ease,
        transform .45s cubic-bezier(.22,1,.36,1);
}

.copy-notification::before{
    content:"✓";
    width:24px;
    height:24px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:rgba(157,124,103,.12);
    color:var(--brown-color);
    font-size:13px;
}

.copy-notification.is-visible{
    opacity:1;
    visibility:visible;
    transform:translate(-50%,0);
}

.contacts__card--email.is-copied{
    border-color:rgba(157,124,103,.5);
}

.contacts__card--email.is-copied .contacts__value{
    color:var(--brown-color);
}

@media(max-width:600px){
    .copy-notification{
        bottom:20px;
        max-width:calc(100% - 32px);
        padding:12px 17px;
        font-size:13px;
        white-space:nowrap;
    }
}

/* =========================
REVEAL
========================= */
.contacts .reveal{
    opacity:0;
    transform:translateY(35px);
    transition:
        opacity .8s cubic-bezier(.22,1,.36,1),
        transform .8s cubic-bezier(.22,1,.36,1);
}

.contacts .reveal.is-visible{
    opacity:1;
    transform:translateY(0);
}

.contacts__card:nth-child(1){
    transition-delay:.05s;
}

.contacts__card:nth-child(2){
    transition-delay:.12s;
}

.contacts__card:nth-child(3){
    transition-delay:.19s;
}

.contacts__card:nth-child(4){
    transition-delay:.26s;
}

/* =========================
CONTACTS ADAPTIVE 1200
========================= */
@media(max-width:1200px){
    .contacts{
        padding-top:60px;
        padding-bottom:60px;
    }

    .contacts__grid{
        gap:16px;
    }

    .contacts__card{
        min-height:220px;
        padding:28px 24px 24px;
        border-radius:20px;
    }

    .contacts__card-title{
        font-size:21px;
    }

    .contacts__social{
        width:48px;
        height:48px;
    }

    .contacts__social-icon{
        width:22px;
        height:22px;
    }
}

/* =========================
CONTACTS TABLET
========================= */
@media(max-width:900px){
    .contacts{
        padding:52px 24px;
    }

    .contacts__head{
        margin-bottom:32px;
        grid-template-columns:auto 1fr;
        gap:14px;
    }

    .contacts__subtitle{
        grid-column:1/-1;
        white-space:normal;
    }

    .contacts__card{
        min-height:210px;
    }
}

/* =========================
CONTACTS MOBILE
========================= */
@media(max-width:600px){
    .contacts{
        padding:46px 18px;
    }

    .contacts__head{
        margin-bottom:28px;
    }

    .contacts__title{
        font-size:27px;
    }

    .contacts__subtitle{
        font-size:16px;
        line-height:1.35;
    }

    .contacts__grid{
        grid-template-columns:1fr;
        gap:12px;
    }

    .contacts__card{
        min-height:180px;
        padding:24px 20px 22px;
        border-radius:18px;
    }

    .contacts__card-title{
        font-size:22px;
    }

    .contacts__card-bottom{
        margin-top:38px;
    }

    .contacts__value{
        font-size:17px;
    }

    .contacts__social{
        width:50px;
        height:50px;
    }

    .contacts__card:hover{
        transform:translateY(-4px);
    }
}

/* =========================
CONTACTS SMALL MOBILE
========================= */
@media(max-width:390px){
    .contacts{
        padding-left:16px;
        padding-right:16px;
    }

    .contacts__head{
        grid-template-columns:1fr;
    }

    .contacts__line{
        display:none;
    }

    .contacts__card{
        min-height:170px;
    }
}

/* =========================
REDUCED MOTION
========================= */
@media(prefers-reduced-motion:reduce){
    .contacts .reveal,
    .contacts__line,
    .contacts__card,
    .contacts__arrow,
    .contacts__social,
    .contacts__social-icon{
        opacity:1;
        transform:none;
        transition:none;
    }
}

/* =========================
FOOTER
========================= */
.footer{
    width:100%;
    padding:28px clamp(24px,2.2vw,42px) 24px;
    background:#F5F5F5;
    border-top:1px solid rgba(72,72,72,.08);
}

.footer__top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
}

.footer__copyright,
.footer__policy{
    margin:0;
    font-family:var(--font-mulish);
    font-size:14px;
    font-weight:300;
    line-height:1.4;
    color:var(--text-color-light);
}

.footer__policy{
    color:var(--brown-color);
    transition:color .3s ease;
}

.footer__policy:hover{
    color:var(--brown-color-hover);
}

.footer__disclaimer{
    max-width:94%;
    margin:22px auto 0;
    font-family:var(--font-mulish);
    font-size:11px;
    font-weight:300;
    line-height:1.45;
    text-align:center;
    color:#B8B8B8;
}

/* =========================
QUICK CONTACT
========================= */
.quick-contact{
    position:fixed;
    z-index:80;
    right:26px;
    bottom:28px;
    display:flex;
    align-items:flex-end;
    gap:12px;
}

.quick-contact__toggle{
    width:62px;
    height:62px;
    padding:0;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    flex:0 0 auto;
    border:0;
    border-radius:50%;
    background:var(--brown-color);
    box-shadow:0 15px 38px rgba(72,72,72,.18);
    cursor:pointer;
    transition:
        transform .4s cubic-bezier(.22,1,.36,1),
        background .3s ease,
        box-shadow .4s ease;
}

.quick-contact__toggle:hover{
    transform:translateY(-5px);
    background:var(--brown-color-hover);
    box-shadow:0 20px 45px rgba(72,72,72,.22);
}

.quick-contact__toggle-icon{
    width:25px;
    height:25px;
    object-fit:contain;
    filter:brightness(0) invert(1);
    position:relative;
    z-index:2;
    transition:transform .4s cubic-bezier(.22,1,.36,1);
}

.quick-contact.is-open .quick-contact__toggle-icon{
    transform:rotate(12deg) scale(.92);
}

.quick-contact__pulse{
    position:absolute;
    inset:-7px;
    border:1px solid rgba(157,124,103,.35);
    border-radius:50%;
    animation:quick-contact-pulse 2.4s ease-out infinite;
}

.quick-contact__panel{
    width:290px;
    padding:20px;
    border:1px solid rgba(157,124,103,.18);
    border-radius:20px;
    background:rgba(255,255,255,.94);
    box-shadow:0 20px 55px rgba(72,72,72,.12);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateX(25px) translateY(10px) scale(.96);
    transform-origin:right bottom;
    transition:
        opacity .35s ease,
        visibility .35s ease,
        transform .45s cubic-bezier(.22,1,.36,1);
}

.quick-contact.is-open .quick-contact__panel{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translate(0,0) scale(1);
}

.quick-contact__label{
    display:block;
    margin-bottom:15px;
    font-family:var(--font-mulish);
    font-size:13px;
    font-weight:400;
    letter-spacing:.07em;
    text-transform:uppercase;
    color:var(--text-color-light);
}

.quick-contact__items{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:8px;
}

.quick-contact__link{
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:7px;
    font-family:var(--font-mulish);
    font-size:10px;
    color:var(--text-color-light);
}

.quick-contact__link img{
    width:44px;
    height:44px;
    padding:11px;
    object-fit:contain;
    border-radius:50%;
    background:#F4F2F0;
    filter:grayscale(1);
    opacity:.65;
    transition:
        transform .4s cubic-bezier(.22,1,.36,1),
        filter .35s ease,
        opacity .35s ease,
        background .35s ease;
}

.quick-contact__link:hover img{
    transform:translateY(-5px);
    filter:grayscale(0);
    opacity:1;
    background:#fff;
}

.quick-contact__request{
    width:100%;
    margin-top:18px;
    padding:13px 15px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    border:1px solid var(--brown-color);
    background:transparent;
    font-family:var(--font-mulish);
    font-size:13px;
    color:var(--brown-color);
    cursor:pointer;
    transition:
        background .3s ease,
        color .3s ease;
}

.quick-contact__request span{
    transition:transform .35s ease;
}

.quick-contact__request:hover{
    background:var(--brown-color);
    color:#fff;
}

.quick-contact__request:hover span{
    transform:translateX(5px);
}

@keyframes quick-contact-pulse{
    0%{
        opacity:.7;
        transform:scale(.85);
    }
    70%,
    100%{
        opacity:0;
        transform:scale(1.25);
    }
}

/* =========================
CONTACT MODAL
========================= */
.contact-modal{
    position:fixed;
    z-index:500;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:
        opacity .35s ease,
        visibility .35s ease;
}

.contact-modal.is-open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}

.contact-modal__backdrop{
    position:absolute;
    inset:0;
    background:rgba(40,38,36,.48);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
}

.contact-modal__window{
    width:min(960px,100%);
    max-height:calc(100vh - 48px);
    display:grid;
    grid-template-columns:minmax(0,1.25fr) minmax(250px,.75fr);
    position:relative;
    z-index:2;
    overflow:auto;
    background:#fff;
    box-shadow:0 40px 90px rgba(35,32,30,.24);
    opacity:0;
    transform:translateY(35px) scale(.97);
    transition:
        opacity .45s ease,
        transform .55s cubic-bezier(.22,1,.36,1);
}

.contact-modal.is-open .contact-modal__window{
    opacity:1;
    transform:translateY(0) scale(1);
}

.contact-modal__close{
    width:44px;
    height:44px;
    padding:0;
    position:absolute;
    z-index:10;
    top:18px;
    right:18px;
    border:1px solid rgba(72,72,72,.15);
    border-radius:50%;
    background:rgba(255,255,255,.86);
    cursor:pointer;
    transition:
        transform .35s ease,
        border-color .35s ease;
}

.contact-modal__close:hover{
    transform:rotate(90deg);
    border-color:var(--brown-color);
}

.contact-modal__close span{
    position:absolute;
    top:50%;
    left:50%;
    width:17px;
    height:1px;
    background:var(--text-color);
}

.contact-modal__close span:first-child{
    transform:translate(-50%,-50%) rotate(45deg);
}

.contact-modal__close span:last-child{
    transform:translate(-50%,-50%) rotate(-45deg);
}

.contact-modal__content{
    padding:clamp(38px,5vw,72px);
}

.contact-modal__eyebrow{
    display:block;
    margin-bottom:20px;
    font-family:var(--font-roboto);
    font-size:12px;
    letter-spacing:.09em;
    text-transform:uppercase;
    color:var(--brown-color);
}

.contact-modal__title {
    margin: 0;
    font-family: var(--font-mulish);
    font-size: clamp(28px,3vw,40px);
    font-weight: 300;
    line-height: 1;
    letter-spacing: .01em;
    color: var(--text-color);
}

.contact-modal__subtitle{
    max-width:520px;
    margin:26px 0 38px;
    font-family:var(--font-mulish);
    font-size:16px;
    font-weight:300;
    line-height:1.5;
    color:var(--text-color-light);
}

.contact-modal__form{
    display:flex;
    flex-direction:column;
    gap:24px;
}

.contact-modal__field{
    display:block;
}

.contact-modal__field-label{
    display:block;
    margin-bottom:8px;
    font-family:var(--font-mulish);
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.06em;
    color:var(--text-color-light);
}

.contact-modal__input{
    width:100%;
    padding:13px 0;
    border:0;
    border-bottom:1px solid var(--line-color);
    outline:0;
    background:transparent;
    font-family:var(--font-mulish);
    font-size:17px;
    font-weight:300;
    color:var(--text-color);
    transition:border-color .3s ease;
}

.contact-modal__input::placeholder{
    color:#C1C1C1;
}

.contact-modal__input:focus{
    border-color:var(--brown-color);
}

.contact-modal__agreement{
    display:flex;
    align-items:flex-start;
    gap:11px;
    cursor:pointer;
}

.contact-modal__checkbox{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.contact-modal__check{
    width:18px;
    height:18px;
    margin-top:2px;
    flex:0 0 auto;
    position:relative;
    border:1px solid var(--line-color);
    transition:
        background .3s ease,
        border-color .3s ease;
}

.contact-modal__check::after{
    content:"";
    width:8px;
    height:4px;
    position:absolute;
    top:5px;
    left:4px;
    border-left:1px solid #fff;
    border-bottom:1px solid #fff;
    opacity:0;
    transform:rotate(-45deg);
}

.contact-modal__checkbox:checked + .contact-modal__check{
    background:var(--brown-color);
    border-color:var(--brown-color);
}

.contact-modal__checkbox:checked + .contact-modal__check::after{
    opacity:1;
}

.contact-modal__agreement-text{
    font-family:var(--font-mulish);
    font-size:12px;
    font-weight:300;
    line-height:1.45;
    color:var(--text-color-light);
}

.contact-modal__agreement-text a{
    color:var(--brown-color);
    text-decoration:underline;
    text-underline-offset:2px;
}

.contact-modal__submit{
    width:100%;
    margin-top:4px;
    padding:17px 20px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    border:1px solid var(--brown-color);
    background:var(--brown-color);
    font-family:var(--font-mulish);
    font-size:14px;
    text-transform:uppercase;
    letter-spacing:.04em;
    color:#fff;
    cursor:pointer;
    transition:
        background .35s ease,
        border-color .35s ease;
}

.contact-modal__submit:hover{
    background:var(--brown-color-hover);
    border-color:var(--brown-color-hover);
}

.contact-modal__submit-arrow{
    font-size:20px;
    transition:transform .35s ease;
}

.contact-modal__submit:hover .contact-modal__submit-arrow{
    transform:translateX(7px);
}

.contact-modal__status{
    min-height:18px;
    margin:0;
    font-family:var(--font-mulish);
    font-size:13px;
    color:var(--brown-color);
}

/* =========================
MODAL VISUAL
========================= */
.contact-modal__visual{
    min-height:620px;
    padding:42px 34px;
    position:relative;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    background:#EDE9E5;
}

.contact-modal__visual-number{
    font-family:var(--font-mulish);
    font-size:70px;
    font-weight:200;
    line-height:1;
    color:rgba(157,124,103,.32);
}

.contact-modal__visual-text{
    display:flex;
    flex-direction:column;
    gap:7px;
    position:relative;
    z-index:2;
    font-family:var(--font-mulish);
    font-size:13px;
    font-weight:300;
    color:#8E8178;
}

.contact-modal__circle{
    position:absolute;
    border:1px solid rgba(157,124,103,.18);
    border-radius:50%;
}

.contact-modal__circle--1{
    width:300px;
    height:300px;
    right:-100px;
    top:100px;
}

.contact-modal__circle--2{
    width:170px;
    height:170px;
    right:80px;
    top:240px;
}

.contact-modal__circle--3{
    width:70px;
    height:70px;
    right:45px;
    top:65px;
    background:rgba(157,124,103,.12);
}

/* =========================
COOKIES
========================= */
.cookie{
    width:min(520px,calc(100% - 32px));
    position:fixed;
    z-index:300;
    left:18px;
    bottom:18px;
    padding:15px 16px;
    border:1px solid rgba(72,72,72,.1);
    border-radius:16px;
    background:rgba(255,255,255,.95);
    box-shadow:0 16px 42px rgba(72,72,72,.11);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    opacity:0;
    visibility:hidden;
    transform:translateY(18px);
    transition:
        opacity .4s ease,
        visibility .4s ease,
        transform .45s cubic-bezier(.22,1,.36,1);
}

.cookie.is-visible{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.cookie__main{
    display:flex;
    align-items:flex-end;
    gap:20px;
}

.cookie__text-wrap{
    flex:1;
}

.cookie__title{
    display:block;
    margin-bottom:5px;
    font-family:var(--font-mulish);
    font-size:14px;
    color:var(--text-color);
}

.cookie__text{
    margin:0;
    font-family:var(--font-mulish);
    font-size:11px;
    font-weight:300;
    line-height:1.4;
    color:var(--text-color-light);
}

.cookie__actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    flex-wrap:wrap;
    gap:7px;
}

.cookie__button,
.cookie__save{
    padding:9px 12px;
    border:0;
    font-family:var(--font-mulish);
    font-size:11px;
    cursor:pointer;
}

.cookie__button--text{
    padding-left:5px;
    padding-right:5px;
    background:transparent;
    color:var(--brown-color);
}

.cookie__button--secondary{
    background:#F3F1EF;
    color:var(--text-color);
}

.cookie__button--primary,
.cookie__save{
    background:var(--brown-color);
    color:#fff;
}

.cookie__settings{
    max-height:0;
    padding-top:0;
    overflow:hidden;
    opacity:0;
    transition:
        max-height .5s cubic-bezier(.22,1,.36,1),
        padding .4s ease,
        opacity .3s ease;
}

.cookie.is-settings .cookie__settings{
    max-height:500px;
    padding-top:18px;
    opacity:1;
}

.cookie__settings-head{
    padding-top:16px;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
    border-top:1px solid rgba(72,72,72,.1);
}

.cookie__settings-title{
    display:block;
    margin-bottom:5px;
    font-family:var(--font-mulish);
    font-size:14px;
    color:var(--text-color);
}

.cookie__settings-text{
    margin:0;
    font-family:var(--font-mulish);
    font-size:11px;
    color:var(--text-color-light);
}

.cookie__settings-close{
    padding:0;
    border:0;
    background:transparent;
    font-size:22px;
    color:var(--text-color-light);
    cursor:pointer;
}

.cookie__options{
    margin:17px 0;
    display:flex;
    flex-direction:column;
    gap:12px;
}

.cookie__option{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
}

.cookie__option strong,
.cookie__option span{
    display:block;
    font-family:var(--font-mulish);
}

.cookie__option strong{
    margin-bottom:3px;
    font-size:12px;
    font-weight:500;
    color:var(--text-color);
}

.cookie__option > div > span{
    font-size:10px;
    font-weight:300;
    color:var(--text-color-light);
}

.cookie-switch input{
    position:absolute;
    opacity:0;
}

.cookie-switch__control{
    width:38px;
    height:21px;
    display:block;
    position:relative;
    border-radius:20px;
    background:#DFDFDF;
    cursor:pointer;
    transition:background .3s ease;
}

.cookie-switch__control::after{
    content:"";
    width:15px;
    height:15px;
    position:absolute;
    top:3px;
    left:3px;
    border-radius:50%;
    background:#fff;
    box-shadow:0 1px 5px rgba(0,0,0,.12);
    transition:transform .3s ease;
}

.cookie-switch input:checked + .cookie-switch__control{
    background:var(--brown-color);
}

.cookie-switch input:checked + .cookie-switch__control::after{
    transform:translateX(17px);
}

.cookie-switch input:disabled + .cookie-switch__control{
    opacity:.5;
    cursor:default;
}

.cookie__save{
    width:100%;
}

/* =========================
LOCK SCROLL
========================= */
html.is-modal-open,
body.is-modal-open{
    overflow:hidden;
}

/* =========================
ADAPTIVE
========================= */
@media(max-width:760px){
    .footer__top{
        align-items:flex-start;
        flex-direction:column;
        gap:8px;
    }

    .footer__disclaimer{
        max-width:100%;
        margin-top:18px;
        text-align:left;
    }

    .quick-contact{
        right:16px;
        bottom:16px;
    }

    .quick-contact__toggle{
        width:56px;
        height:56px;
    }

    .quick-contact__panel{
        width:min(290px,calc(100vw - 92px));
    }

    .contact-modal{
        padding:12px;
    }

    .contact-modal__window{
        grid-template-columns:1fr;
        max-height:calc(100dvh - 24px);
    }

    .contact-modal__content{
        padding:42px 22px 30px;
    }

    .contact-modal__visual{
        display:none;
    }

    .contact-modal__close{
        top:12px;
        right:12px;
    }

    .cookie{
        left:12px;
        bottom:12px;
        width:calc(100% - 24px);
    }

    .cookie__main{
        align-items:stretch;
        flex-direction:column;
        gap:12px;
    }

    .cookie__actions{
        justify-content:flex-start;
    }
}

@media(max-width:420px){
    .quick-contact__panel{
        width:calc(100vw - 32px);
        position:absolute;
        right:0;
        bottom:70px;
    }

    .quick-contact__items{
        grid-template-columns:repeat(4,1fr);
    }

    .quick-contact__link span{
        display:none;
    }

    .contact-modal__title{
        font-size:38px;
    }

    .cookie__actions{
        display:grid;
        grid-template-columns:1fr 1fr;
    }

    .cookie__button--text{
        grid-column:1/-1;
        text-align:left;
    }
}

@media(prefers-reduced-motion:reduce){
    .quick-contact__pulse{
        display:none;
    }

    .quick-contact__panel,
    .quick-contact__toggle,
    .contact-modal,
    .contact-modal__window,
    .cookie{
        transition:none;
    }
}
/* =========================
LEGAL LINKS / FORM NOTICE
========================= */
.footer__legal-links{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:10px 24px;
}

.contact-modal__privacy-note{
    margin:-2px 0 0 32px;
    font-family:var(--font-roboto);
    font-size:11px;
    line-height:1.55;
    color:rgba(72,72,72,.65);
}

.contact-modal__privacy-note a,
.cookie__text a{
    color:var(--brown-color-hover);
    text-decoration:underline;
    text-decoration-thickness:1px;
    text-underline-offset:3px;
}

@media(max-width:600px){
    .footer__legal-links{
        width:100%;
        align-items:flex-start;
        flex-direction:column;
    }

    .contact-modal__privacy-note{
        margin-left:0;
    }
}

/* =========================
QUICK CONTACT — BOTTOM / OPEN UP
========================= */

.quick-contact{
    position:fixed;
    z-index:80;
    top:auto;
    right:24px;
    bottom:24px;
    left:auto;
    display:block;
    width:62px;
    height:62px;
    transform:none;
}

/* Основная закреплённая кнопка */
.quick-contact__toggle{
    position:relative;
    z-index:3;
    width:62px;
    height:62px;
    padding:0;
    display:flex;
    align-items:center;
    justify-content:center;
    border:0;
    border-radius:50%;
    background:var(--brown-color);
    box-shadow:0 15px 38px rgba(72,72,72,.18);
    cursor:pointer;
    transition:
        transform .35s cubic-bezier(.22,1,.36,1),
        background .3s ease,
        box-shadow .35s ease;
}

.quick-contact__toggle:hover{
    transform:translateY(-3px);
    background:var(--brown-color-hover);
    box-shadow:0 18px 45px rgba(72,72,72,.23);
}

.quick-contact__toggle-icon{
    width:25px;
    height:25px;
    object-fit:contain;
    position:relative;
    z-index:2;
    filter:brightness(0) invert(1);
    transition:transform .35s cubic-bezier(.22,1,.36,1);
}

.quick-contact.is-open .quick-contact__toggle-icon{
    transform:rotate(12deg) scale(.92);
}

.quick-contact__pulse{
    position:absolute;
    inset:-7px;
    border:1px solid rgba(157,124,103,.35);
    border-radius:50%;
    pointer-events:none;
    animation:quick-contact-pulse 2.4s ease-out infinite;
}

/* Панель находится НАД кнопкой и раскрывается вверх */
.quick-contact__panel{
    position:absolute;
    z-index:2;
    right:0;
    bottom:calc(100% + 12px);
    width:auto;
    padding:8px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    border:1px solid rgba(157,124,103,.16);
    border-radius:999px;
    background:rgba(255,255,255,.96);
    box-shadow:0 18px 45px rgba(72,72,72,.13);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(14px) scale(.92);
    transform-origin:bottom right;
    transition:
        opacity .25s ease,
        visibility .25s ease,
        transform .4s cubic-bezier(.22,1,.36,1);
}

.quick-contact.is-open .quick-contact__panel{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0) scale(1);
}

/* В компактной версии оставляем только иконки */
.quick-contact__label,
.quick-contact__request{
    display:none;
}

.quick-contact__items{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
}

/* Иконки контактов */
.quick-contact__link{
    width:46px;
    height:46px;
    min-width:46px;
    padding:0;
    position:relative;
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:center;
    gap:0;
    border:0;
    border-radius:50%;
    background:#F4F2F0;
    font-family:var(--font-mulish);
    font-size:11px;
    line-height:1;
    color:var(--text-color-light);
    cursor:pointer;
    transition:
        transform .3s cubic-bezier(.22,1,.36,1),
        background .3s ease,
        box-shadow .3s ease;
}

.quick-contact__link:hover{
    transform:translateY(-2px);
    background:#fff;
    box-shadow:0 7px 18px rgba(72,72,72,.12);
}

.quick-contact__link img{
    width:46px;
    height:46px;
    padding:11px;
    object-fit:contain;
    border-radius:50%;
    background:transparent;
    filter:grayscale(1);
    opacity:.72;
    transition:
        filter .3s ease,
        opacity .3s ease,
        transform .3s ease;
}

.quick-contact__link:hover img{
    filter:grayscale(0);
    opacity:1;
    transform:scale(1.05);
}

/* Подписи показываются слева от иконки только на desktop */
.quick-contact__link > span:not(.quick-contact__request-icon){
    position:absolute;
    right:calc(100% + 12px);
    top:50%;
    padding:7px 10px;
    border-radius:8px;
    background:rgba(72,72,72,.94);
    color:#fff;
    font-family:var(--font-mulish);
    font-size:11px;
    line-height:1;
    white-space:nowrap;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translate(7px,-50%);
    transition:
        opacity .2s ease,
        visibility .2s ease,
        transform .25s ease;
}

.quick-contact__link:hover > span:not(.quick-contact__request-icon),
.quick-contact__link:focus-visible > span:not(.quick-contact__request-icon){
    opacity:1;
    visibility:visible;
    transform:translate(0,-50%);
}

.quick-contact__link--request{
    color:var(--brown-color);
}

.quick-contact__request-icon{
    width:46px;
    height:46px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:27px;
    font-weight:200;
    line-height:1;
    color:var(--brown-color);
    transition:
        transform .35s ease,
        color .3s ease;
}

.quick-contact__link--request:hover .quick-contact__request-icon{
    transform:rotate(90deg);
    color:var(--brown-color-hover);
}

/* Поля и статусы рабочей формы */
.contact-modal__honeypot{
    position:absolute !important;
    left:-9999px !important;
    width:1px !important;
    height:1px !important;
    overflow:hidden !important;
}

.contact-modal__submit[disabled]{
    opacity:.6;
    cursor:wait;
    pointer-events:none;
}

.contact-modal__status.is-error{
    color:#9d3b31;
}

.contact-modal__status.is-success{
    color:#4d7660;
}

/* Планшеты и телефоны */
@media(max-width:760px){
    .quick-contact{
        top:auto;
        right:16px;
        bottom:16px;
        left:auto;
        width:56px;
        height:56px;
        transform:none;
    }

    .quick-contact__toggle{
        width:56px;
        height:56px;
    }

    .quick-contact__panel{
        right:0;
        bottom:calc(100% + 10px);
        width:auto;
        padding:7px;
        transform:translateY(12px) scale(.92);
        transform-origin:bottom right;
    }

    .quick-contact.is-open .quick-contact__panel{
        transform:translateY(0) scale(1);
    }

    .quick-contact__link,
    .quick-contact__link img{
        width:43px;
        height:43px;
        min-width:43px;
    }

    .quick-contact__link img{
        padding:10px;
    }

    .quick-contact__request-icon{
        width:43px;
        height:43px;
        display:flex;
    }

    .quick-contact__link > span:not(.quick-contact__request-icon){
        display:none;
    }
}

@media(max-width:420px){
    .quick-contact{
        right:12px;
        bottom:12px;
    }

    .quick-contact__panel{
        right:0;
        bottom:calc(100% + 9px);
        width:auto;
    }

    .quick-contact__request-icon{
        display:flex;
    }
}