

.header{

    position:fixed;

    inset:0 0 auto 0;

    height:88px;

    display:flex;

    align-items:center;

    z-index:1000;

    transition:all .35s ease;

    background:rgba(250,250,248,.82);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    border-bottom:1px solid transparent;

}

.header--scrolled{

    height:72px;

    border-color:var(--color-border);

    box-shadow:var(--shadow-sm);

}

.nav{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:2rem;

    width:100%;

}

.logo{

    display:flex;

    align-items:center;

}

.logo img{

    width:180px;

    display:block;

}

.header--scrolled .nav__logo img{

    height:36px;

}

.nav__menu{

    display:flex;

    align-items:center;

    gap:2.75rem;

}

.nav__item{

    position:relative;

}

.nav__link{

    position:relative;

    display:inline-flex;

    align-items:center;

    font-size:.95rem;

    font-weight:500;

    color:var(--color-text);

    transition:color .3s ease;

}

.nav__link:hover{

    color:var(--color-gold);

}

.nav__link::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:100%;

    height:2px;

    background:var(--color-gold);

    transform:scaleX(0);

    transform-origin:left;

    transition:.3s ease;

}

.nav__link:hover::after,

.nav__link.active::after{

    transform:scaleX(1);

}

.nav__actions{

    display:flex;

    align-items:center;

    gap:1rem;

}

.nav-toggle{

    display:none;

    width:46px;

    height:46px;

    border-radius:50%;

    background:white;

    border:1px solid var(--color-border);

    justify-content:center;

    align-items:center;

}

.nav-toggle span{

    width:22px;

    height:2px;

    background:var(--color-text);

    display:block;

    position:relative;

    transition:.3s;

}

.nav-toggle span::before,

.nav-toggle span::after{

    content:"";

    position:absolute;

    width:22px;

    height:2px;

    background:inherit;

    left:0;

    transition:.3s;

}

.nav-toggle span::before{

    top:-7px;

}

.nav-toggle span::after{

    top:7px;

}

.btn{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:18px 34px;

    border-radius:40px;

    font-size:15px;
    font-weight:600;

    text-decoration:none;

    transition:.35s;

}

.btn svg{

    width:18px;

    height:18px;

}

.btn-primary{

    background:#C7A262;

    color:#ffffff;

    box-shadow:

        0 10px 30px rgba(199,162,98,.25);

}

.btn-primary:hover{

    background:#b78f4b;

    transform:translateY(-3px);

    box-shadow:

        0 18px 40px rgba(199,162,98,.35);

}

.btn-secondary{

    border:1px solid #d8d8d8;

    color:#222;

    background:#ffffff;

}

.btn-secondary:hover{

    background:#111;

    color:#fff;

}

.btn--ghost{

    padding:0;

    border-radius:0;

    color:var(--color-text);

}

.btn--ghost:hover{

    color:var(--color-gold);

}

.btn--large{

    padding:1.2rem 2.8rem;

    font-size:1.05rem;

}

.btn--small{

    padding:.75rem 1.4rem;

    font-size:.9rem;

}

.section-label{

    display:inline-flex;

    align-items:center;

    gap:.8rem;

    margin-bottom:2rem;

    text-transform:uppercase;

    letter-spacing:.2em;

    font-size:.75rem;

    color:var(--color-gold);

}

.section-label::before{

    content:"";

    width:42px;

    height:1px;

    background:var(--color-gold);

}

.title-group{

    margin-bottom:4rem;

}

.title-group h2{

    margin-bottom:1.5rem;

}

.title-group p{

    max-width:700px;

}

.divider{

    width:100%;

    height:1px;

    background:var(--color-border);

}

.divider--gold{

    background:var(--color-gold);

}

.badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:.5rem 1rem;

    border-radius:999px;

    background:#f5f5f5;

    color:var(--color-text-light);

    font-size:.8rem;

    font-weight:500;

}

.badge--gold{

    background:rgba(196,161,76,.12);

    color:var(--color-gold);

}

.icon-link{

    display:inline-flex;

    align-items:center;

    gap:.75rem;

    transition:.3s;

}

.icon-link svg{

    width:18px;

    height:18px;

}

.icon-link:hover{

    color:var(--color-gold);

    gap:1rem;

}

.card{

    background:white;

    border:1px solid var(--color-border);

    border-radius:24px;

    padding:2rem;

    transition:.35s ease;

}

.card:hover{

    transform:translateY(-6px);

    box-shadow:var(--shadow);

}

.card__title{

    margin-bottom:1rem;

}

.card__text{

    margin-bottom:2rem;

}

.card__footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.service-card{

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    gap:2rem;

    padding:3rem;

    background:var(--color-surface);

    border:1px solid var(--color-border);

    border-radius:28px;

    transition:all .35s ease;

}

.service-card:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow);

    border-color:rgba(196,161,76,.35);

}

.service-card__icon{

    width:64px;

    height:64px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:18px;

    background:rgba(196,161,76,.10);

    color:var(--color-gold);

}

.service-card__title{

    margin-bottom:1rem;

}

.service-card__text{

    color:var(--color-text-light);

}

.service-card__footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:auto;

}

.project-card{

    position:relative;

    overflow:hidden;

    border-radius:28px;

    cursor:pointer;

}

.project-card img{

    width:100%;

    height:520px;

    object-fit:cover;

    transition:transform .7s ease;

}

.project-card:hover img{

    transform:scale(1.06);

}

.project-card__overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(
        transparent 35%,
        rgba(0,0,0,.65)
    );

    display:flex;

    align-items:flex-end;

    padding:2.5rem;

}

.project-card__content{

    color:white;

}

.project-card__category{

    display:inline-block;

    margin-bottom:.75rem;

    color:#d8c27b;

    text-transform:uppercase;

    letter-spacing:.18em;

    font-size:.75rem;

}

.project-card__title{

    color:white;

    margin-bottom:.5rem;

}

.project-card__location{

    opacity:.85;

    font-size:.95rem;

}

.stat-card{

    padding:2.5rem;

    border-left:3px solid var(--color-gold);

    background:var(--color-surface);

}

.stat-card__value{

    font-size:clamp(2.8rem,6vw,4.5rem);

    font-weight:300;

    line-height:1;

    color:var(--color-text);

}

.stat-card__label{

    margin-top:1rem;

    color:var(--color-text-light);

}

.cta-box{

    padding:5rem;

    border-radius:36px;

    background:#111;

    color:white;

    text-align:center;

}

.cta-box h2{

    color:white;

    margin-bottom:1.5rem;

}

.cta-box p{

    color:rgba(255,255,255,.72);

    max-width:650px;

    margin:0 auto 2.5rem;

}

.form{

    display:grid;

    gap:1.5rem;

}

.form__group{

    display:flex;

    flex-direction:column;

    gap:.65rem;

}

.form__label{

    font-size:.9rem;

    font-weight:500;

    color:var(--color-text);

}

.form__help{

    font-size:.85rem;

    color:var(--color-text-light);

}

.input,

.textarea,

.select{

    width:100%;

    padding:1rem 1.25rem;

    border:1px solid var(--color-border);

    border-radius:18px;

    background:white;

    transition:.3s ease;

}

.input:focus,

.textarea:focus,

.select:focus{

    border-color:var(--color-gold);

    box-shadow:0 0 0 4px rgba(196,161,76,.10);

    outline:none;

}

.textarea{

    resize:vertical;

    min-height:180px;

}

.checkbox{

    display:flex;

    align-items:flex-start;

    gap:.75rem;

    cursor:pointer;

}

.checkbox input{

    margin-top:.25rem;

}

.checkbox span{

    color:var(--color-text-light);

}

.radio{

    display:flex;

    align-items:center;

    gap:.75rem;

    cursor:pointer;

}

.feature-list{

    display:grid;

    gap:1rem;

}

.feature-list li{

    display:flex;

    align-items:center;

    gap:.85rem;

}

.feature-list li::before{

    content:"";

    width:8px;

    height:8px;

    border-radius:50%;

    background:var(--color-gold);

}

.info-box{

    padding:2rem;

    border-left:4px solid var(--color-gold);

    background:rgba(196,161,76,.08);

    border-radius:18px;

}

.info-box p{

    margin:0;

}

.quote-card{

    padding:3rem;

    background:var(--color-surface);

    border-radius:28px;

    box-shadow:var(--shadow-sm);

}

.quote-card blockquote{

    font-size:1.4rem;

    line-height:1.6;

    color:var(--color-text);

}

.quote-card footer{

    margin-top:2rem;

    color:var(--color-text-light);

}

.avatar{

    width:64px;

    height:64px;

    border-radius:50%;

    overflow:hidden;

}

.avatar img{

    width:100%;

    height:100%;

    object-fit:cover;

}

.footer{

    background:#101010;

    color:#bdbdbd;

    padding:7rem 0 2rem;

}

.footer__grid{

    display:grid;

    grid-template-columns:2fr 1fr 1fr 1fr;

    gap:4rem;

    margin-bottom:5rem;

}

.footer__logo{

    display:inline-block;

    max-width:230px;

    margin-bottom:2rem;

}

.footer__logo img{

    display:block;

    height:64px;

    width:auto;

}

.footer__text{

    max-width:420px;

    color:#909090;

}

.footer__details{

    display:grid;
    gap:.45rem;
    margin:0;
    color:#9b9b9b;
    font-size:.95rem;
    font-style:normal;
    line-height:1.55;

}

.footer__details--legal > div{

    display:grid;
    gap:.15rem;

}

.footer__details--legal dt{

    color:#6f6f6f;
    font-size:.72rem;
    letter-spacing:.1em;
    text-transform:uppercase;

}

.footer__details--legal dd{

    margin:0;

}

.footer__title{

    margin-bottom:1.5rem;

    color:#ffffff;

    font-size:1rem;

}

.footer__menu{

    display:grid;

    gap:.9rem;

}

.footer__menu a{

    color:#9b9b9b;

    transition:.3s ease;

}

.footer__menu a:hover{

    color:white;

}

.footer__bottom{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding-top:2rem;

    border-top:1px solid rgba(255,255,255,.08);

    font-size:.9rem;

}

.social{

    display:flex;

    gap:1rem;

}

.social__link{

    width:44px;

    height:44px;

    border-radius:50%;

    border:1px solid rgba(255,255,255,.12);

    display:flex;

    align-items:center;

    justify-content:center;

    transition:.35s ease;

}

.social__link svg{

    width:18px;

    height:18px;

}

.social__link:hover{

    background:var(--color-gold);

    border-color:var(--color-gold);

    transform:translateY(-4px);

}

.breadcrumb{

    display:flex;

    align-items:center;

    gap:.75rem;

    margin-bottom:2rem;

    font-size:.9rem;

    color:var(--color-text-light);

}

.breadcrumb span{

    opacity:.5;

}

.accordion{

    display:grid;

    gap:1rem;

}

.accordion__item{

    border:1px solid var(--color-border);

    border-radius:20px;

    overflow:hidden;

    background:white;

}

.accordion__header{

    width:100%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:1.5rem 2rem;

    cursor:pointer;

}

.accordion__title{

    font-size:1.1rem;

    font-weight:500;

}

.accordion__icon{

    transition:.35s ease;

}

.accordion__item.active .accordion__icon{

    transform:rotate(45deg);

}

.accordion__content{

    display:none;

    padding:0 2rem 2rem;

    color:var(--color-text-light);

}

.accordion__item.active .accordion__content{

    display:block;

}

.modal{

    position:fixed;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(0,0,0,.75);

    opacity:0;

    visibility:hidden;

    transition:.35s ease;

    z-index:2000;

}

.modal.active{

    opacity:1;

    visibility:visible;

}

.modal__window{

    width:min(900px,90vw);

    background:white;

    border-radius:24px;

    overflow:hidden;

    position:relative;

}

.modal__close{

    position:absolute;

    top:1.5rem;

    right:1.5rem;

    width:44px;

    height:44px;

    border-radius:50%;

    background:white;

    box-shadow:var(--shadow-sm);

}

.toast{

    position:fixed;

    right:2rem;

    bottom:2rem;

    padding:1rem 1.5rem;

    background:#111;

    color:white;

    border-radius:16px;

    opacity:0;

    transform:translateY(30px);

    transition:.35s ease;

    z-index:3000;

}

.toast.active{

    opacity:1;

    transform:translateY(0);

}

.loader{

    width:48px;

    height:48px;

    border-radius:50%;

    border:3px solid rgba(0,0,0,.08);

    border-top-color:var(--color-gold);

    animation:loader 1s linear infinite;

}

@keyframes loader{

    to{

        transform:rotate(360deg);

    }

}

.cookie{

    position:fixed;

    left:2rem;

    right:2rem;

    bottom:2rem;

    background:white;

    border-radius:24px;

    box-shadow:var(--shadow-lg);

    padding:2rem;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:2rem;

    z-index:3000;

}

.cookie__text{

    max-width:700px;

}

.cookie__actions{

    display:flex;

    gap:1rem;

}

.back-top{

    position:fixed;

    right:2rem;

    bottom:2rem;

    width:54px;

    height:54px;

    border-radius:50%;

    background:var(--color-gold);

    color:white;

    display:flex;

    align-items:center;

    justify-content:center;

    box-shadow:var(--shadow);

    opacity:0;

    visibility:hidden;

    transition:.35s ease;

    z-index:1500;

}

.back-top.active{

    opacity:1;

    visibility:visible;

}

.back-top:hover{

    transform:translateY(-5px);

}

.empty-state{

    text-align:center;

    padding:5rem 2rem;

}

.empty-state__icon{

    width:72px;

    height:72px;

    margin:0 auto 2rem;

    color:var(--color-gold);

}

.empty-state h3{

    margin-bottom:1rem;

}

.empty-state p{

    margin:0 auto 2rem;

    max-width:520px;

}

.stats{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:2rem;

    margin-top:5rem;

}

.stat-card{

    position:relative;

    padding:3rem;

    border:1px solid var(--color-border);

    border-radius:24px;

    background:#fff;

    transition:.35s ease;

}

.stat-card:hover{

    transform:translateY(-8px);

}

.stat-card__value{

    font-size:clamp(3rem,6vw,5rem);

    font-weight:700;

    line-height:1;

    color:var(--color-primary);

}

.stat-card__suffix{

    font-size:2rem;

    font-weight:600;

    color:var(--color-gold);

    margin-bottom:1.5rem;

}

.stat-card h3{

    margin:0;

    font-size:1rem;

    font-weight:500;

    color:var(--color-text-light);

}

.projects-grid{

    display:grid;

    grid-template-columns:2fr 1fr 1fr;

    gap:2rem;

    margin-top:5rem;

}

.project-card{

    position:relative;

    overflow:hidden;

    border-radius:28px;

    aspect-ratio:1/1;

    background:#f3f3f3;

}

.project-card--large{

    grid-row:span 2;

    aspect-ratio:auto;

    min-height:720px;

}

.project-card img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:transform .8s ease;

}

.project-card:hover img{

    transform:scale(1.08);

}

.project-card__overlay{

    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    justify-content:flex-end;

    padding:2.5rem;

    background:linear-gradient(
        to top,
        rgba(0,0,0,.72),
        rgba(0,0,0,.15),
        transparent
    );

    color:#fff;

}

.project-card__overlay span{

    font-size:.75rem;

    letter-spacing:.15em;

    text-transform:uppercase;

    opacity:.8;

    margin-bottom:.75rem;

}

.project-card__overlay h3{

    color:white;

    margin-bottom:1.5rem;

}

.project-card__overlay .btn{

    width:max-content;

}

.services{

    padding:9rem 0;

    background:#ffffff;

}

.section-heading{

    max-width:760px;

    margin:0 auto 7rem;

    text-align:center;

}

.section-heading h2{

    margin:1rem 0 1.5rem;

    font-size:clamp(2.6rem,4vw,4rem);

    line-height:1.15;

}

.section-heading p{

    max-width:640px;

    margin:auto;

    color:#666;

    font-size:1.05rem;

    line-height:1.8;

}

.service{

    display:grid;

    grid-template-columns:1fr 1.2fr;

    gap:6rem;

    align-items:center;

}

.service-number{

    display:block;

    font-size:7rem;

    font-weight:700;

    color:#EFEAE2;

    line-height:1;

    margin-bottom:2rem;

}

.service h3{

    font-size:3rem;

    line-height:1.05;

    margin-bottom:2rem;

}

.service p{

    color:#666;

    line-height:1.9;

    max-width:520px;

}

.service-tags{

    display:flex;

    flex-wrap:wrap;

    gap:1rem;

    margin:2.5rem 0;

    padding:0;

    list-style:none;

}

.service-tags li{

    padding:.75rem 1.25rem;

    border-radius:40px;

    background:#f6f6f6;

    font-size:.9rem;

}

.service-image{

    overflow:hidden;

    border-radius:28px;

    box-shadow:

        0 30px 60px rgba(0,0,0,.08);

}

.service-image img{

    width:100%;

    display:block;

    transition:transform .8s ease;

}

.service-image:hover img{

    transform:scale(1.04);

}

.service + .service{

    margin-top:10rem;

}

.service-reverse{

    grid-template-columns:1.2fr 1fr;

}

.service-reverse .service-content{

    order:2;

}

.service-reverse .service-image{

    order:1;

}

.services .service:last-child{

    margin-bottom:2rem;

}

.services::after{

    content:"";

    display:block;

    width:120px;

    height:2px;

    margin:6rem auto 0;

    background:linear-gradient(
        90deg,
        transparent,
        var(--color-gold),
        transparent
    );

    opacity:.45;

}

.js .animate{

    opacity:0;

    transform:translateY(50px);

}

.js .animate.in-view{

    opacity:1;

    transform:translateY(0);

    transition:
        opacity 1.2s cubic-bezier(.16,1,.3,1),
        transform 1.2s cubic-bezier(.16,1,.3,1);

}

.portfolio {

    
    display: block;
    gap: 0;
    padding: 120px 0;
    background: #ffffff;

}

.portfolio .section-heading {

    max-width: 760px;
    margin: 0 auto 72px;
    text-align: center;

}

.portfolio .section-heading p {

    margin-top: 20px;

}

.portfolio-grid {

    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;

}

.portfolio-card {

    position: relative;
    overflow: hidden;
    border-radius: 20px;
    background: #f4f4f4;
    aspect-ratio: 4 / 3;

}

.portfolio-card img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    transition: transform .6s cubic-bezier(.16, 1, .3, 1);

}

.portfolio-card__overlay {

    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 24px;
    color: #fff;
    background: linear-gradient(180deg, rgba(10, 13, 16, .08) 20%, rgba(10, 13, 16, .9) 100%);
    opacity: 0;
    transition: opacity .35s ease;

}

.portfolio-card__number {

    align-self: flex-end;
    font-family: "Space Grotesk", sans-serif;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .14em;

}

.portfolio-card__details {

    transform: translateY(18px);
    transition: transform .45s cubic-bezier(.16, 1, .3, 1);

}

.portfolio-card__eyebrow {

    margin: 0 0 8px;
    color: #d2a441;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;

}

.portfolio-card__details h3 {

    margin: 0 0 10px;
    color: #fff;
    font-size: clamp(1.35rem, 2vw, 1.8rem);
    line-height: 1.1;

}

.portfolio-card__details > p:last-child {

    margin: 0;
    color: rgba(255, 255, 255, .84);
    font-size: .9rem;
    line-height: 1.5;

}

.portfolio-card:hover img {

    transform: scale(1.06);

}

.portfolio-card:hover .portfolio-card__overlay {

    opacity: 1;

}

.portfolio-card:hover .portfolio-card__details {

    transform: translateY(0);

}

.portfolio-footer {

    display: flex;
    justify-content: center;

    margin-top: 60px;

}

@media (max-width: 900px) {

    .portfolio-grid {

        grid-template-columns: repeat(2, minmax(0, 1fr));

    }

}

@media (max-width: 600px) {

    .portfolio {

        padding: 80px 0;

    }

    .portfolio .section-heading {

        margin-bottom: 48px;

    }

    .portfolio-grid {

        grid-template-columns: 1fr;
        gap: 16px;

    }

    .portfolio-card {

        aspect-ratio: 16 / 11;

    }

}

@media (hover: none) {

    .portfolio-card__overlay {

        opacity: 1;

    }

    .portfolio-card__details {

        transform: translateY(0);

    }

}
