/*
Theme Name: Interior Advisors
Theme URI: https://interioradvisors.pl/
Author: Interior Advisors
Description: Custom bilingual theme based on the supplied Interior Advisors HTML design.
Version: 1.2.0
Text Domain: interior-advisors
*/

:root{
 --wine:#7A1F2B; --wine-deep:#54121B; --wine-soft:#F3E5E7;
 --gold:#BBA98D; --paper:#F7F4EF; --white:#FFFDFC; --ink:#191719;
 --muted:#716A68; --line:#DED7D0; --serif:"Cormorant Garamond",Georgia,serif; --sans:"DM Sans",Arial,sans-serif;
}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--sans);line-height:1.6}
a{color:inherit} img{max-width:100%;display:block}
.container{width:min(1180px,calc(100% - 64px));margin:auto}
@media(max-width:700px){.container{width:calc(100% - 40px)}}
.nav{position:fixed;z-index:50;top:0;left:0;right:0;background:rgba(255,253,252,.92);backdrop-filter:blur(14px);border-bottom:1px solid rgba(222,215,208,.8)}
.nav-in{height:82px;display:flex;align-items:center;justify-content:space-between}
.nav-logo{height:48px;width:auto}
.nav-links{display:flex;gap:29px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.nav-links a{text-decoration:none}.nav-links a:hover{color:var(--wine)}
.nav-cta{font-size:10px;letter-spacing:.13em;text-transform:uppercase;text-decoration:none;background:var(--wine);color:#fff;padding:12px 17px}
.nav-cta:hover{background:var(--wine-deep)}
.lang-switch{display:flex;align-items:center;gap:8px;margin-left:6px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.lang-switch a{text-decoration:none;color:var(--muted);padding:5px 3px;border-bottom:1px solid transparent}
.lang-switch a.active{color:var(--wine);border-bottom-color:var(--wine)}
.lang-switch .sep{color:var(--line)}
@media(max-width:900px){.nav-links,.nav-cta{display:none}.lang-switch{margin-left:auto}}
@media(max-width:900px){.nav-links,.nav-cta{display:none}}

.hero{padding:170px 0 105px;background:var(--paper);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:80px;align-items:center}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr;gap:50px}}
.hero-logo{width:min(370px,78%);margin-bottom:40px}
.eyebrow{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--wine);display:flex;align-items:center;gap:12px;margin-bottom:22px}
.eyebrow:before{content:"";width:28px;height:1px;background:var(--wine)}
h1,h2,h3{font-family:var(--serif);font-weight:500}
h1{font-size:clamp(52px,6vw,82px);line-height:.95;letter-spacing:-.03em;margin:0;max-width:720px}
h1 em{font-style:normal;color:var(--wine)}
.hero-copy{font-size:16px;color:var(--muted);max-width:620px;line-height:1.8;margin:28px 0 0}
.hero-copy strong{color:var(--ink)}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}
.btn{display:inline-block;padding:13px 20px;text-decoration:none;font-size:10px;letter-spacing:.13em;text-transform:uppercase}
.btn-primary{background:var(--wine);color:#fff}.btn-primary:hover{background:var(--wine-deep)}
.btn-outline{border:1px solid var(--line)}.btn-outline:hover{border-color:var(--wine);color:var(--wine)}
.hero-image{min-height:500px;position:relative}
.hero-image-main{position:absolute;inset:0 0 35px 35px;overflow:hidden;background:#d8cec1}
.hero-image-main img{width:100%;height:100%;object-fit:cover}
.hero-image-main:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(25,23,25,.25))}
.hero-caption{position:absolute;left:0;bottom:0;background:var(--wine);color:#fff;padding:16px 20px;font-size:9px;letter-spacing:.16em;text-transform:uppercase}
.hero-circle{position:absolute;right:-20px;top:-35px;width:118px;height:118px;border:1px solid var(--gold);border-radius:50%;display:grid;place-items:center;text-align:center;font-family:var(--serif);font-size:17px;line-height:1.05;color:var(--wine);background:rgba(255,253,252,.72);transform:rotate(8deg)}
@media(max-width:900px){.hero-image{min-height:390px}.hero-image-main{inset:0 0 30px 20px}}

.signature{background:var(--wine);color:white;padding:31px 0}
.signature-in{display:flex;align-items:center;justify-content:space-between;gap:30px}
.signature p{font-family:var(--serif);font-size:25px;line-height:1.15;margin:0}
.signature span{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.65)}
@media(max-width:700px){.signature-in{display:block}.signature span{display:block;margin-top:12px}}

section{padding:105px 0}
.section-head{display:grid;grid-template-columns:.65fr 1.35fr;gap:50px;margin-bottom:55px}
@media(max-width:800px){.section-head{grid-template-columns:1fr;gap:14px}}
h2{font-size:clamp(43px,5vw,66px);line-height:.98;letter-spacing:-.025em;margin:0;max-width:850px}
.lead{font-size:16px;color:var(--muted);max-width:690px;line-height:1.8;margin:18px 0 0}

.about{background:var(--white)}
.about-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:80px}
@media(max-width:850px){.about-grid{grid-template-columns:1fr;gap:45px}}
.stats{border-top:1px solid var(--line)}
.stat{display:grid;grid-template-columns:100px 1fr;gap:22px;padding:22px 0;border-bottom:1px solid var(--line)}
.stat b{font-family:var(--serif);font-size:45px;font-weight:500;color:var(--wine);line-height:1}
.stat span{font-size:13px;color:var(--muted);align-self:center}
.about-text p{font-size:15.5px;color:var(--muted);line-height:1.85;margin:0 0 19px}
.about-text strong{color:var(--ink)}
.quote{border-left:2px solid var(--wine);padding:8px 0 8px 24px;margin:30px 0;font-family:var(--serif);font-size:28px;line-height:1.15;color:var(--ink)}
.roles{margin-top:28px;border-top:1px solid var(--line)}
.role{display:flex;justify-content:space-between;gap:20px;padding:14px 0;border-bottom:1px solid var(--line)}
.role b{font-family:var(--serif);font-size:21px;font-weight:500}.role span{font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--wine);text-align:right}

.services{background:var(--paper)}
.service-grid{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);border-left:1px solid var(--line)}
@media(max-width:750px){.service-grid{grid-template-columns:1fr}}
.service{padding:35px 32px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(255,253,252,.45)}
.service-num{font-size:10px;letter-spacing:.15em;color:var(--wine);text-transform:uppercase}
.service h3{font-size:32px;line-height:1.05;margin:17px 0 19px}
.service ul{list-style:none;padding:0;margin:0}.service li{border-top:1px solid var(--line);padding:10px 0 10px 16px;font-size:13px;color:var(--muted);position:relative}
.service li:before{content:"";position:absolute;left:0;top:19px;width:5px;height:1px;background:var(--wine)}

.projects{background:var(--white)}
.project-list{border-top:1px solid var(--line)}
.project{display:grid;grid-template-columns:65px 1fr auto;gap:25px;padding:27px 0;border-bottom:1px solid var(--line);align-items:start}
@media(max-width:700px){.project{grid-template-columns:1fr;gap:8px}}
.project-code{font-size:10px;letter-spacing:.14em;color:var(--wine)}
.project-name{font-family:var(--serif);font-size:30px;line-height:1;margin-bottom:5px}
.project-loc{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:#9a918d}
.project-desc{font-size:13.5px;color:var(--muted);line-height:1.7;max-width:680px;margin-top:12px}
.scope{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--wine);border:1px solid #e8d4d7;background:var(--wine-soft);padding:7px 10px;white-space:nowrap}

.portfolio{background:var(--paper)}
.gallery{display:grid;grid-template-columns:1.2fr .8fr;gap:16px}
.gallery .large{grid-row:span 2}
.gallery-item{position:relative;overflow:hidden;background:#ded3c8;min-height:300px}
.gallery-item img{width:100%;height:100%;min-height:300px;object-fit:cover;transition:transform .5s}
.gallery-item:hover img{transform:scale(1.035)}
.gallery-label{position:absolute;left:0;right:0;bottom:0;padding:35px 18px 16px;color:#fff;background:linear-gradient(transparent,rgba(20,17,18,.62));font-size:10px;letter-spacing:.12em;text-transform:uppercase}
@media(max-width:700px){.gallery{grid-template-columns:1fr}.gallery .large{grid-row:auto}}

.experience{background:var(--white)}
.client-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.client{min-height:130px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:25px;display:flex;flex-direction:column;justify-content:space-between}
.client b{font-family:var(--serif);font-size:25px;font-weight:500}.client span{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--wine)}
@media(max-width:650px){.client-grid{grid-template-columns:1fr 1fr}}

.media{background:var(--paper)}
.media-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.media-card{background:var(--white);border:1px solid var(--line);padding:18px}
.media-card img{width:100%;height:210px;object-fit:cover;margin-bottom:16px}
.media-outlet{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--wine)}
.media-title{font-family:var(--serif);font-size:25px;line-height:1.1;margin-top:8px}
.media-desc{font-size:12.5px;color:var(--muted);line-height:1.6;margin-top:8px}
@media(max-width:700px){.media-grid{grid-template-columns:1fr}}

.contact{background:var(--wine);color:white;text-align:center}
.contact .eyebrow{color:rgba(255,255,255,.7);justify-content:center}.contact .eyebrow:before{background:rgba(255,255,255,.5)}
.contact h2{margin:auto;max-width:850px}.contact .lead{color:rgba(255,255,255,.76);margin:20px auto 0}
.contact-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:35px}
.contact .btn-primary{background:#fff;color:var(--wine)}.contact .btn-outline{border-color:rgba(255,255,255,.45);color:#fff}
.contact-meta{margin-top:45px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6)}

footer{background:#191719;color:rgba(255,255,255,.55);padding:28px 0;font-size:9px;letter-spacing:.1em;text-transform:uppercase}
.footer-in{display:flex;justify-content:space-between;gap:20px}.footer-in strong{color:#fff;font-weight:500}
@media(max-width:700px){.footer-in{display:block}.footer-in div+div{margin-top:8px}}

.reveal{opacity:0;transform:translateY(16px);transition:.7s ease}.reveal.visible{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}

/* ===== Interior Advisors: tablet + mobile optimisation ===== */
@media (max-width:1024px){
  .container{width:min(100% - 64px,1180px)}
  section{padding:82px 0}
  .nav-in{height:72px}
  .nav-logo{height:42px}
  .hero{padding:128px 0 78px}
  .hero-logo{display:none}
  .hero-grid{grid-template-columns:1fr 1fr;gap:44px}
  .hero-image{min-height:440px}
  .section-head{gap:34px;margin-bottom:44px}
  .about-grid{gap:48px}
  .service{padding:30px 26px}
}

@media (max-width:900px){
  .nav-links,.nav-cta{display:none}
  .lang-switch{margin-left:auto}
  .hero-grid{grid-template-columns:1fr;gap:44px}
  .hero-image{min-height:460px}
  .hero-image-main{inset:0 0 30px 20px}
}

@media (max-width:767px){
  .container{width:calc(100% - 40px)}
  section{padding:66px 0}
  .section-head{grid-template-columns:1fr;gap:10px;margin-bottom:36px}
  .section-head .eyebrow{margin-bottom:4px}
  h1{font-size:clamp(41px,12vw,50px);line-height:.94}
  h2{font-size:clamp(35px,10.5vw,43px);line-height:.98}
  .lead{font-size:15px;line-height:1.7;margin-top:14px}
  .eyebrow{font-size:9px;letter-spacing:.16em;margin-bottom:17px}

  .nav-in{height:64px}
  .nav-logo{height:36px;max-width:190px}
  .lang-switch{gap:6px;font-size:10px}
  .lang-switch a{padding:12px 4px}

  .hero{padding:96px 0 56px}
  .hero-logo{display:none}
  .hero-grid{gap:36px}
  .hero .eyebrow:nth-of-type(2){display:none}
  .hero-copy{font-size:15px;line-height:1.7;margin-top:21px}
  .hero .actions{display:block;margin-top:27px}
  .hero .btn-primary{display:block;width:100%;text-align:center;padding:15px 20px}
  .hero .btn-outline{display:inline-block;border:0;padding:18px 0 0;color:var(--wine)}
  .hero-image{min-height:0;aspect-ratio:4/5}
  .hero-image-main{inset:0}
  .hero-circle{display:none}
  .hero-caption{bottom:0;padding:13px 16px}

  .signature{padding:25px 0}
  .signature-in{display:block}
  .signature p{font-size:22px;line-height:1.18}
  .signature span{display:block;margin-top:12px}

  .about-grid{grid-template-columns:1fr;gap:38px}
  .stat{grid-template-columns:78px 1fr;gap:16px;padding:19px 0}
  .stat b{font-size:40px}
  .about-text p{font-size:15px;line-height:1.78}
  .quote{font-size:24px;padding-left:19px;margin:28px 0}
  .role{display:block;padding:17px 0}
  .role span{display:block;text-align:left;margin-top:5px;line-height:1.5}

  .service-grid{grid-template-columns:1fr}
  .service{padding:27px 21px}
  .service h3{font-size:29px;margin:14px 0 17px}

  .project{grid-template-columns:1fr auto;gap:8px 14px;padding:23px 0}
  .project-code{grid-column:1;grid-row:1;align-self:center}
  .scope{grid-column:2;grid-row:1;align-self:start}
  .project>div:nth-child(2){grid-column:1/-1;grid-row:2}
  .project-name{font-size:27px;margin-top:4px}
  .project-desc{margin-top:9px;line-height:1.65}

  .gallery{display:flex;overflow-x:auto;gap:12px;scroll-snap-type:x mandatory;scrollbar-width:none;margin-right:-20px;padding-right:20px;-webkit-overflow-scrolling:touch}
  .gallery::-webkit-scrollbar{display:none}
  .gallery-item,.gallery-item.large{flex:0 0 86%;min-height:0;aspect-ratio:4/5;scroll-snap-align:start;grid-row:auto}
  .gallery-item img{height:100%;min-height:0;object-fit:cover}
  .gallery-item:hover img{transform:none}

  .client-grid{grid-template-columns:1fr 1fr}
  .client{min-height:105px;padding:18px}
  .client b{font-size:21px;line-height:1.05}

  .media-grid{display:flex;overflow-x:auto;gap:12px;scroll-snap-type:x mandatory;scrollbar-width:none;margin-right:-20px;padding-right:20px;-webkit-overflow-scrolling:touch}
  .media-grid::-webkit-scrollbar{display:none}
  .media-card{flex:0 0 86%;scroll-snap-align:start;padding:15px}
  .media-card img{height:auto;aspect-ratio:4/3;object-fit:cover}
  .media-title{font-size:23px}

  .contact .lead{margin-top:17px}
  .contact-actions{display:block;margin-top:28px}
  .contact .btn-primary{display:block;width:100%;padding:15px 20px}
  .contact .btn-outline{display:none}
  .contact-meta{margin-top:32px;line-height:1.8}

  footer{padding:25px 0}
  .footer-in{display:block;text-align:center;line-height:1.7}
  .footer-in div+div{margin-top:9px}

  .reveal{transform:translateY(10px);transition:.5s ease}
}

@media (max-width:390px){
  .container{width:calc(100% - 32px)}
  h1{font-size:40px}
  h2{font-size:34px}
  .nav-logo{height:33px;max-width:165px}
  .hero{padding-top:91px}
  .gallery,.media-grid{margin-right:-16px;padding-right:16px}
  .gallery-item,.gallery-item.large,.media-card{flex-basis:89%}
  .client{padding:15px;min-height:98px}
  .client b{font-size:19px}
}

/* ============================================================
   INTERIOR ADVISORS — RESPONSIVE OPTIMISATION
   Paste at the VERY BOTTOM of style.css
   Desktop > 1024px remains unchanged
   ============================================================ */


/* ============================================================
   TABLET
   768px — 1024px
   ============================================================ */

@media (max-width: 1024px) {

    /* ---------- GLOBAL ---------- */

    .container {
        width: calc(100% - 64px) !important;
        max-width: none !important;
    }

    section {
        padding: 80px 0 !important;
    }

    .section-head {
        margin-bottom: 45px !important;
        gap: 32px !important;
    }

    h2 {
        font-size: clamp(44px, 6vw, 58px) !important;
    }


    /* ---------- NAV ---------- */

    .nav-in {
        height: 70px !important;
    }

    .nav-logo {
        height: 40px !important;
        width: auto !important;
    }

    .lang-switch {
        margin-left: auto !important;
    }

    .lang-switch a {
        padding: 12px 5px !important;
    }


    /* ---------- HERO ---------- */

    .hero {
        padding: 125px 0 80px !important;
    }

    /* Logo already exists in nav — don't repeat it */
    .hero-logo {
        display: none !important;
    }

    .hero-grid {
        gap: 50px !important;
    }

    h1 {
        font-size: clamp(54px, 8vw, 72px) !important;
    }

    .hero-copy {
        max-width: 650px !important;
    }

    .hero-image {
        min-height: 460px !important;
    }

    .hero-image-main {
        inset: 0 0 30px 25px !important;
    }


    /* ---------- ABOUT ---------- */

    .about-grid {
        gap: 50px !important;
    }


    /* ---------- SERVICES ---------- */

    .service {
        padding: 30px 26px !important;
    }


    /* ---------- CLIENTS ---------- */

    .client {
        min-height: 115px !important;
        padding: 22px !important;
    }


    /* ---------- MEDIA ---------- */

    .media-card img {
        height: 190px !important;
    }

}



/* ============================================================
   MOBILE
   ≤ 767px
   ============================================================ */

@media (max-width: 767px) {

    /* ========================================================
       GLOBAL
       ======================================================== */

    .container {
        width: calc(100% - 40px) !important;
        max-width: none !important;
    }

    section {
        padding: 66px 0 !important;
    }

    .section-head {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        margin-bottom: 38px !important;
    }

    .section-head .eyebrow {
        margin-bottom: 8px !important;
    }

    h1 {
        font-size: 46px !important;
        line-height: .93 !important;
        letter-spacing: -.035em !important;
    }

    h2 {
        font-size: 39px !important;
        line-height: .97 !important;
        letter-spacing: -.025em !important;
    }

    .lead {
        font-size: 15px !important;
        line-height: 1.7 !important;
        margin-top: 15px !important;
    }

    .eyebrow {
        font-size: 9px !important;
        line-height: 1.5 !important;
        letter-spacing: .16em !important;
        margin-bottom: 18px !important;
    }

    .eyebrow:before {
        width: 22px !important;
    }


    /* ========================================================
       NAVIGATION
       ======================================================== */

    .nav-in {
        height: 64px !important;
    }

    .nav-logo {
        height: 36px !important;
        width: auto !important;
    }

    .nav-links,
    .nav-cta {
        display: none !important;
    }

    .lang-switch {
        margin-left: auto !important;
        gap: 6px !important;
        font-size: 9px !important;
    }

    /* Larger invisible touch area */
    .lang-switch a {
        padding: 14px 5px !important;
    }


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

    .hero {
        padding: 102px 0 58px !important;
    }

    .hero-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 40px !important;
    }

    /* Navigation already contains the logo */
    .hero-logo {
        display: none !important;
    }

    /*
       Keep the first descriptor but remove the second one.
       This prevents two almost identical labels above headline.
    */
    .hero > .container > div:first-child > .eyebrow:nth-of-type(2) {
        display: none !important;
    }

    .hero-copy {
        font-size: 15px !important;
        line-height: 1.72 !important;
        margin-top: 22px !important;
        max-width: none !important;
    }


    /* HERO BUTTONS */

    .hero .actions {
        display: block !important;
        margin-top: 28px !important;
    }

    .hero .btn-primary {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        padding: 16px 20px !important;
        font-size: 10px !important;
    }

    /*
       Secondary action becomes a simple editorial text link
       instead of competing with the main CTA.
    */
    .hero .btn-outline {
        display: inline-block !important;
        border: 0 !important;
        padding: 17px 0 2px !important;
        color: var(--wine) !important;
        background: transparent !important;
    }


    /* HERO IMAGE */

    .hero-image {
        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        aspect-ratio: 4 / 5 !important;
        position: relative !important;
    }

    .hero-image-main {
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }

    .hero-image-main img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    /* Decorative circle is too busy on phone */
    .hero-circle {
        display: none !important;
    }

    .hero-caption {
        left: 0 !important;
        bottom: 0 !important;
        padding: 13px 16px !important;
        font-size: 8px !important;
    }


    /* ========================================================
       QUOTE / SIGNATURE STRIP
       ======================================================== */

    .signature {
        padding: 27px 0 !important;
    }

    .signature-in {
        display: block !important;
    }

    .signature p {
        font-size: 23px !important;
        line-height: 1.15 !important;
    }

    .signature span {
        display: block !important;
        margin-top: 15px !important;
        font-size: 8px !important;
    }


    /* ========================================================
       ABOUT
       ======================================================== */

    .about-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 42px !important;
    }


    /* STATS */

    .stat {
        display: block !important;
        padding: 20px 0 !important;
    }

    .stat b {
        display: block !important;
        font-size: 48px !important;
        margin-bottom: 8px !important;
    }

    .stat span {
        display: block !important;
        max-width: 290px !important;
        font-size: 13px !important;
        line-height: 1.55 !important;
    }


    /* ABOUT COPY */

    .about-text p {
        font-size: 15px !important;
        line-height: 1.78 !important;
        margin-bottom: 18px !important;
    }


    /* QUOTE */

    .quote {
        font-size: 25px !important;
        line-height: 1.15 !important;
        padding: 6px 0 6px 20px !important;
        margin: 32px 0 !important;
    }


    /* CAREER / ROLES */

    .role {
        display: block !important;
        padding: 18px 0 !important;
    }

    .role b {
        display: block !important;
        font-size: 22px !important;
        line-height: 1.15 !important;
    }

    .role span {
        display: block !important;
        text-align: left !important;
        margin-top: 7px !important;
        line-height: 1.5 !important;
    }


    /* ========================================================
       SERVICES
       ======================================================== */

    .service-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }

    .service {
        padding: 27px 21px !important;
    }

    .service h3 {
        font-size: 29px !important;
        line-height: 1.04 !important;
        margin: 15px 0 18px !important;
    }

    .service li {
        font-size: 13px !important;
        line-height: 1.55 !important;
        padding-top: 11px !important;
        padding-bottom: 11px !important;
    }


    /* ========================================================
       PROJECTS
       ======================================================== */

    .project {
        display: grid !important;
        grid-template-columns: 1fr auto !important;
        column-gap: 12px !important;
        row-gap: 8px !important;
        padding: 24px 0 !important;
        align-items: start !important;
    }

    /* P-01 etc */
    .project-code {
        grid-column: 1 !important;
        grid-row: 1 !important;
        align-self: center !important;
    }

    /* Main project information */
    .project > div:nth-child(2) {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
    }

    /* Scope badge */
    .project > .scope {
        grid-column: 2 !important;
        grid-row: 1 !important;
        justify-self: end !important;
        align-self: start !important;
    }

    .project-name {
        font-size: 28px !important;
        line-height: 1.02 !important;
        margin: 5px 0 7px !important;
    }

    .project-loc {
        font-size: 8px !important;
        line-height: 1.5 !important;
    }

    .project-desc {
        font-size: 13px !important;
        line-height: 1.65 !important;
        margin-top: 10px !important;
    }

    .scope {
        font-size: 8px !important;
        padding: 6px 8px !important;
    }


    /* ========================================================
       PORTFOLIO
       Native horizontal swipe gallery
       ======================================================== */

    .portfolio {
        overflow: hidden !important;
    }

    .gallery {
        display: flex !important;
        grid-template-columns: none !important;

        gap: 12px !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        scroll-snap-type: x mandatory !important;
        scroll-padding-left: 0 !important;

        -webkit-overflow-scrolling: touch !important;

        scrollbar-width: none !important;

        /*
           Extends carousel to right edge so next image
           visibly peeks into viewport.
        */
        margin-right: -20px !important;
        padding-right: 20px !important;
    }

    .gallery::-webkit-scrollbar {
        display: none !important;
    }

    .gallery-item,
    .gallery-item.large {
        flex: 0 0 86% !important;

        width: 86% !important;

        min-height: 0 !important;
        height: auto !important;

        aspect-ratio: 4 / 5 !important;

        grid-row: auto !important;

        scroll-snap-align: start !important;
        scroll-snap-stop: always !important;
    }

    .gallery-item img {
        width: 100% !important;
        height: 100% !important;

        min-height: 0 !important;

        object-fit: cover !important;
    }

    /* No hover zoom behaviour on touch */
    .gallery-item:hover img {
        transform: none !important;
    }

    .gallery-label {
        padding: 42px 16px 15px !important;
        font-size: 9px !important;
    }


    /* ========================================================
       EXPERIENCE / CLIENTS
       ======================================================== */

    .client-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .client {
        min-height: 105px !important;
        padding: 17px !important;
    }

    .client b {
        font-size: 20px !important;
        line-height: 1.05 !important;
        overflow-wrap: anywhere !important;
    }

    .client span {
        font-size: 8px !important;
        margin-top: 14px !important;
    }


    /* ========================================================
       MEDIA
       Native horizontal swipe carousel
       ======================================================== */

    .media {
        overflow: hidden !important;
    }

    .media-grid {
        display: flex !important;
        grid-template-columns: none !important;

        gap: 12px !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        scroll-snap-type: x mandatory !important;

        -webkit-overflow-scrolling: touch !important;

        scrollbar-width: none !important;

        margin-right: -20px !important;
        padding-right: 20px !important;
    }

    .media-grid::-webkit-scrollbar {
        display: none !important;
    }

    .media-card {
        flex: 0 0 86% !important;
        width: 86% !important;

        padding: 14px !important;

        scroll-snap-align: start !important;
        scroll-snap-stop: always !important;
    }

    .media-card img {
        width: 100% !important;

        height: auto !important;
        aspect-ratio: 4 / 3 !important;

        object-fit: cover !important;

        margin-bottom: 15px !important;
    }

    .media-title {
        font-size: 23px !important;
        line-height: 1.08 !important;
    }

    .media-desc {
        font-size: 12px !important;
        line-height: 1.6 !important;
    }


    /* ========================================================
       CONTACT
       ======================================================== */

    .contact {
        padding-top: 70px !important;
        padding-bottom: 70px !important;
    }

    .contact h2 {
        font-size: 41px !important;
    }

    .contact .lead {
        font-size: 14px !important;
        line-height: 1.7 !important;
    }

    .contact-actions {
        display: block !important;
        margin-top: 30px !important;
    }

    .contact .btn-primary {
        display: block !important;
        width: 100% !important;
        padding: 16px 20px !important;
        text-align: center !important;
    }

    /*
       By this point user has already seen the About section,
       so remove redundant "Discover Interior Advisors" CTA.
    */
    .contact .btn-outline {
        display: none !important;
    }

    .contact-meta {
        margin-top: 35px !important;
        font-size: 8px !important;
        line-height: 1.8 !important;
    }


    /* ========================================================
       FOOTER
       ======================================================== */

    footer {
        padding: 30px 0 !important;
    }

    .footer-in {
        display: block !important;
        text-align: center !important;
        line-height: 1.7 !important;
    }

    .footer-in div + div {
        margin-top: 10px !important;
    }


    /* ========================================================
       ANIMATIONS
       Slightly faster on mobile
       ======================================================== */

    .reveal {
        transform: translateY(10px) !important;
        transition-duration: .5s !important;
    }

    .reveal.visible {
        transform: none !important;
    }

}



/* ============================================================
   SMALL PHONES
   ≤ 390px
   ============================================================ */

@media (max-width: 390px) {

    .container {
        width: calc(100% - 32px) !important;
    }

    h1 {
        font-size: 41px !important;
    }

    h2 {
        font-size: 35px !important;
    }

    .hero {
        padding-top: 94px !important;
    }

    .hero-copy {
        font-size: 14px !important;
    }

    .signature p {
        font-size: 21px !important;
    }

    .service h3 {
        font-size: 27px !important;
    }

    .project-name {
        font-size: 26px !important;
    }

    .gallery {
        margin-right: -16px !important;
        padding-right: 16px !important;
    }

    .media-grid {
        margin-right: -16px !important;
        padding-right: 16px !important;
    }

    .contact h2 {
        font-size: 36px !important;
    }

}
/* ============================================================
   INTERIOR ADVISORS — MOBILE MENU
   ============================================================ */

/* Hidden on desktop */
.mobile-menu-toggle,
.mobile-menu {
    display: none;
}


/* ============================================================
   TABLET + MOBILE NAV
   ============================================================ */

@media (max-width: 900px) {

    /*
     * Header
     */

    .nav {
        z-index: 9999 !important;
    }

    .nav-in {
        position: relative !important;
        z-index: 10001 !important;
    }

    .nav-links,
    .nav-cta {
        display: none !important;
    }

    .lang-switch {
        margin-left: auto !important;
        margin-right: 18px !important;
    }


    /*
     * Hamburger
     */

    .mobile-menu-toggle {
        display: flex !important;

        width: 44px !important;
        height: 44px !important;

        padding: 0 !important;
        margin: 0 !important;

        border: 0 !important;
        background: transparent !important;

        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;

        gap: 7px !important;

        cursor: pointer !important;

        position: relative !important;
        z-index: 10002 !important;

        -webkit-tap-highlight-color: transparent;
    }

    .mobile-menu-toggle span {
        display: block !important;

        width: 25px !important;
        height: 1px !important;

        background: var(--ink) !important;

        transform-origin: center !important;

        transition:
            transform .3s ease,
            opacity .2s ease !important;
    }


    /*
     * Hamburger → X
     */

    .mobile-menu-toggle.is-open span:first-child {
        transform: translateY(4px) rotate(45deg) !important;
    }

    .mobile-menu-toggle.is-open span:last-child {
        transform: translateY(-4px) rotate(-45deg) !important;
    }


    /*
     * Menu panel
     */

    .mobile-menu {
        display: block !important;

        position: fixed !important;

        top: 0 !important;
        left: 0 !important;
        right: 0 !important;

        height: 100dvh !important;

        background: var(--paper) !important;

        z-index: 10000 !important;

        opacity: 0 !important;
        visibility: hidden !important;

        transform: translateY(-12px) !important;

        pointer-events: none !important;

        transition:
            opacity .3s ease,
            visibility .3s ease,
            transform .35s ease !important;
    }

    .mobile-menu.is-open {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important;
        pointer-events: auto !important;
    }


    /*
     * Menu contents
     */

    .mobile-menu-inner {
        height: 100% !important;

        padding-top: 125px !important;
        padding-bottom: 40px !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
    }


    /*
     * Main section links
     */

    .mobile-menu-inner > a:not(.mobile-menu-cta) {
        display: block !important;

        width: 100% !important;

        padding: 12px 0 !important;

        font-family: var(--serif) !important;

        font-size: clamp(38px, 8vw, 56px) !important;
        line-height: 1 !important;
        letter-spacing: -.025em !important;

        color: var(--ink) !important;

        text-decoration: none !important;

        border-bottom: 1px solid var(--line) !important;
    }

    .mobile-menu-inner > a:first-child {
        border-top: 1px solid var(--line) !important;
    }


    /*
     * Contact CTA at bottom
     */

    .mobile-menu-cta {
        display: block !important;

        width: 100% !important;

        margin-top: auto !important;

        padding: 16px 20px !important;

        background: var(--wine) !important;
        color: #fff !important;

        font-family: var(--sans) !important;

        font-size: 10px !important;
        font-weight: 500 !important;

        line-height: 1.4 !important;
        letter-spacing: .14em !important;

        text-transform: uppercase !important;
        text-align: center !important;

        text-decoration: none !important;
    }


    /*
     * Prevent page behind menu from scrolling
     */

    body.mobile-menu-open {
        overflow: hidden !important;
    }

}


/* ============================================================
   PHONE
   ============================================================ */

@media (max-width: 767px) {

    .lang-switch {
        margin-right: 8px !important;
    }

    .mobile-menu-inner {
        padding-top: 105px !important;
        padding-bottom: 24px !important;
    }

    .mobile-menu-inner > a:not(.mobile-menu-cta) {
        font-size: 40px !important;
        padding: 12px 0 !important;
    }

}


/* ============================================================
   SMALL PHONE
   ============================================================ */

@media (max-width: 390px) {

    .mobile-menu-inner {
        padding-top: 95px !important;
    }

    .mobile-menu-inner > a:not(.mobile-menu-cta) {
        font-size: 36px !important;
        padding: 10px 0 !important;
    }

}
/* ============================================================
   IA — MOBILE/TABLET TYPOGRAPHY + NAV POSITION FIX
   Paste AFTER all previous CSS
   ============================================================ */


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

@media (max-width: 1024px) {

    /* --- NAV --- */

    .nav-in {
        justify-content: flex-start !important;
    }

    .nav-logo {
        height: 36px !important;
    }

    /* Push language + hamburger to the right */
    .lang-switch {
        margin-left: auto !important;
        margin-right: 6px !important;
    }

    .mobile-menu-toggle {
        flex: 0 0 40px !important;
        width: 40px !important;
        height: 40px !important;
    }

    .mobile-menu-toggle span {
        width: 21px !important;
    }


    /* --- GENERAL TYPE --- */

    h1 {
        font-size: 50px !important;
        line-height: .97 !important;
    }

    h2 {
        font-size: 40px !important;
        line-height: 1 !important;
    }

    .lead {
        font-size: 15px !important;
    }


    /* --- MOBILE MENU --- */

    .mobile-menu-inner > a:not(.mobile-menu-cta) {
        font-size: 31px !important;
        line-height: 1.05 !important;
        padding: 14px 0 !important;
    }

}



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

@media (max-width: 767px) {

    /* ------------------------------------------------
       HEADER
       LOGO                  PL / EN    ☰
       ------------------------------------------------ */

    .nav-in {
        height: 62px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }

    .nav-logo {
        height: 32px !important;
        width: auto !important;
    }

    .lang-switch {
        margin-left: auto !important;
        margin-right: 4px !important;

        gap: 4px !important;

        font-size: 8px !important;
        letter-spacing: .12em !important;
    }

    .lang-switch a {
        padding: 12px 3px !important;
    }

    .mobile-menu-toggle {
        width: 38px !important;
        height: 38px !important;

        flex: 0 0 38px !important;

        margin: 0 !important;
        padding: 0 !important;

        gap: 6px !important;
    }

    .mobile-menu-toggle span {
        width: 20px !important;
    }


    /* ------------------------------------------------
       HERO
       ------------------------------------------------ */

    .hero {
        padding-top: 94px !important;
        padding-bottom: 52px !important;
    }

    h1 {
        font-size: 38px !important;
        line-height: .98 !important;
        letter-spacing: -.025em !important;
    }

    .hero-copy {
        font-size: 14px !important;
        line-height: 1.65 !important;
    }

    .eyebrow {
        font-size: 8px !important;
        letter-spacing: .14em !important;
    }


    /* ------------------------------------------------
       SECTION HEADINGS
       ------------------------------------------------ */

    h2 {
        font-size: 32px !important;
        line-height: 1 !important;
        letter-spacing: -.02em !important;
    }

    .lead {
        font-size: 14px !important;
        line-height: 1.65 !important;
    }

    .section-head {
        margin-bottom: 32px !important;
    }


    /* ------------------------------------------------
       SIGNATURE
       ------------------------------------------------ */

    .signature p {
        font-size: 19px !important;
        line-height: 1.18 !important;
    }


    /* ------------------------------------------------
       ABOUT
       ------------------------------------------------ */

    .stat b {
        font-size: 39px !important;
    }

    .stat span {
        font-size: 12px !important;
    }

    .about-text p {
        font-size: 14px !important;
        line-height: 1.7 !important;
    }

    .quote {
        font-size: 21px !important;
        line-height: 1.18 !important;
    }

    .role b {
        font-size: 19px !important;
    }


    /* ------------------------------------------------
       SERVICES
       ------------------------------------------------ */

    .service h3 {
        font-size: 24px !important;
        line-height: 1.05 !important;
    }

    .service li {
        font-size: 12px !important;
    }


    /* ------------------------------------------------
       PROJECTS
       ------------------------------------------------ */

    .project-name {
        font-size: 23px !important;
        line-height: 1.05 !important;
    }

    .project-desc {
        font-size: 12px !important;
    }


    /* ------------------------------------------------
       CLIENTS
       ------------------------------------------------ */

    .client b {
        font-size: 18px !important;
    }


    /* ------------------------------------------------
       MEDIA
       ------------------------------------------------ */

    .media-title {
        font-size: 20px !important;
        line-height: 1.1 !important;
    }

    .media-desc {
        font-size: 11px !important;
    }


    /* ------------------------------------------------
       CONTACT
       ------------------------------------------------ */

    .contact h2 {
        font-size: 32px !important;
        line-height: 1 !important;
    }

    .contact .lead {
        font-size: 13px !important;
    }


    /* ------------------------------------------------
       FULL SCREEN MENU
       ------------------------------------------------ */

    .mobile-menu-inner {
        padding-top: 92px !important;
    }

    .mobile-menu-inner > a:not(.mobile-menu-cta) {
        font-size: 27px !important;
        line-height: 1.05 !important;

        padding: 13px 0 !important;
    }

    .mobile-menu-cta {
        font-size: 9px !important;
        padding: 14px 18px !important;
    }

}



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

@media (max-width: 390px) {

    h1 {
        font-size: 35px !important;
    }

    h2 {
        font-size: 29px !important;
    }

    .contact h2 {
        font-size: 29px !important;
    }

    .mobile-menu-inner > a:not(.mobile-menu-cta) {
        font-size: 25px !important;
    }

}

/* ============================================================
   FINAL MOBILE HEADER FIX
   Logo | Language | Hamburger — always one row
   ============================================================ */

@media (max-width: 900px) {

    .nav-in {
        height: 64px !important;

        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;

        align-items: center !important;
        justify-content: flex-start !important;

        gap: 0 !important;
    }

    /* Logo wrapper */
    .nav-in > a:first-child {
        display: block !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
    }

    .nav-logo {
        display: block !important;
        width: auto !important;
        height: 32px !important;
    }

    /* Hide desktop elements */
    .nav-links,
    .nav-cta {
        display: none !important;
    }

    /* Language sits immediately before hamburger */
    .nav-in > .lang-switch {
        display: flex !important;
        flex: 0 0 auto !important;

        align-items: center !important;

        margin: 0 4px 0 auto !important;

        font-size: 8px !important;
        gap: 3px !important;
    }

    .nav-in > .lang-switch a {
        padding: 10px 3px !important;
    }

    /* Hamburger stays on same line */
    .nav-in > .mobile-menu-toggle {
        display: flex !important;

        flex: 0 0 38px !important;

        width: 38px !important;
        min-width: 38px !important;
        max-width: 38px !important;

        height: 38px !important;

        margin: 0 !important;
        padding: 0 !important;

        align-items: center !important;
        justify-content: center !important;
        flex-direction: column !important;

        gap: 6px !important;
    }

    .mobile-menu-toggle span {
        width: 20px !important;
        height: 1px !important;
    }

}

/* ============================================================
   FINAL IA MOBILE HEADER
   ============================================================ */

.nav-right-mobile {
    display: none;
}


@media (max-width: 900px) {

    /* MAIN HEADER ROW */

    .nav-in {
        height: 64px !important;

        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;

        align-items: center !important;
        justify-content: space-between !important;

        gap: 15px !important;
    }


    /* LOGO */

    .nav-in > a:first-child {
        display: block !important;
        flex: 0 1 auto !important;

        margin: 0 !important;
        padding: 0 !important;

        min-width: 0 !important;
    }

    .nav-logo {
        display: block !important;

        width: auto !important;
        max-width: 190px !important;
        height: 31px !important;

        object-fit: contain !important;
        object-position: left center !important;
    }


    /* HIDE DESKTOP NAV */

    .nav-links,
    .nav-cta {
        display: none !important;
    }


    /* RIGHT SIDE = LANGUAGE + HAMBURGER */

    .nav-right-mobile {
        display: flex !important;

        flex: 0 0 auto !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;

        align-items: center !important;
        justify-content: flex-end !important;

        width: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        gap: 5px !important;
    }


    /* LANGUAGE */

    .nav-right-mobile .lang-switch {
        display: flex !important;

        flex: 0 0 auto !important;
        flex-direction: row !important;

        align-items: center !important;

        width: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        gap: 3px !important;

        font-size: 8px !important;
        line-height: 1 !important;
        letter-spacing: .1em !important;
    }

    .nav-right-mobile .lang-switch a {
        display: inline-block !important;
        padding: 10px 3px !important;
    }


    /* HAMBURGER */

    .nav-right-mobile .mobile-menu-toggle {
        display: flex !important;

        flex: 0 0 38px !important;

        width: 38px !important;
        min-width: 38px !important;
        max-width: 38px !important;

        height: 38px !important;

        flex-direction: column !important;

        align-items: center !important;
        justify-content: center !important;

        gap: 6px !important;

        margin: 0 !important;
        padding: 0 !important;

        border: 0 !important;
        background: transparent !important;

        cursor: pointer !important;

        position: relative !important;
        z-index: 10002 !important;
    }

    .nav-right-mobile .mobile-menu-toggle span {
        display: block !important;

        width: 19px !important;
        height: 1px !important;

        margin: 0 !important;
        padding: 0 !important;

        background: var(--ink) !important;

        transform-origin: center !important;

        transition: transform .3s ease !important;
    }


    /* HAMBURGER → X */

    .nav-right-mobile .mobile-menu-toggle.is-open span:first-child {
        transform: translateY(3.5px) rotate(45deg) !important;
    }

    .nav-right-mobile .mobile-menu-toggle.is-open span:last-child {
        transform: translateY(-3.5px) rotate(-45deg) !important;
    }

}


/* SMALL PHONES */

@media (max-width: 390px) {

    .nav-in {
        gap: 8px !important;
    }

    .nav-logo {
        max-width: 165px !important;
        height: 28px !important;
    }

    .nav-right-mobile {
        gap: 2px !important;
    }

}