@font-face{
    font-family:'Satoshi';
    src:url('Satoshi-Variable.woff2') format('woff2'),url('Satoshi-Variable.ttf') format('truetype');
    font-weight:300 900;
    font-display:swap
}
*{margin:0;padding:0;box-sizing:border-box}
/* One palette, warm throughout. The previous build mixed a warm sand base with
   cool greys (#f8f9fa, #e2e5e9, #666) picked up from component snippets — three
   temperatures on one page reads as assembled rather than designed. Everything
   below is tinted from the forest green instead, so hairlines and text sit in
   the same family as the photography. */
:root{
    --primary:#00301A;
    --primary-deep:#021a10;
    --accent:#F3701D;
    --accent-deep:#c95a12;
    --light:#faf6ee;
    --sand:#f5efe3;
    --paper:#fbf8f1;
    --ink:#26332c;
    --gray:#5d6963;
    --line:rgba(0,48,26,.12);
    --line-soft:rgba(0,48,26,.075);
    --shadow-sm:0 1px 2px rgba(0,48,26,.06),0 2px 12px rgba(0,48,26,.05);
    --shadow-md:0 10px 30px rgba(0,48,26,.10);
    /* height of the contact strip above the header — the hero subtracts it
       from 100svh so the first screen still ends on the fold */
    --topbar-h:38px;
}
html{scrollbar-gutter:stable}

/* --- Contact strip above the header ------------------------------------
   The reference (qld.creationhomes.com.au) puts the phone number in a thin
   bar above the nav, before any scrolling. Same idea here: phone and email
   on the left, hours and location on the right, on the dark forest ground
   so it separates from the sand header underneath.
   Deliberately NOT sticky — it scrolls away and the nav pins, so once you
   are reading the strip costs no vertical space. */
.site-topbar{background:#03251a;color:rgba(255,255,255,.62);font-size:.75rem;
    border-bottom:1px solid rgba(255,255,255,.07)}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;
    min-height:var(--topbar-h)}
.topbar-contact{display:flex;align-items:center;gap:1.7rem;min-width:0}
.topbar-item{display:inline-flex;align-items:center;gap:.45rem;color:inherit;
    text-decoration:none;line-height:1.2;white-space:nowrap;transition:color .25s}
.topbar-item svg{width:13px;height:13px;flex:0 0 auto;opacity:.55;transition:opacity .25s}
.topbar-phone{color:#fff;font-weight:700;letter-spacing:.005em}
.topbar-phone svg{color:var(--accent);opacity:1}
a.topbar-item:hover{color:#fff}
a.topbar-item:hover svg{opacity:1}
a.topbar-item:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
.topbar-meta{display:flex;align-items:center;gap:.95rem;font-size:.71rem;
    letter-spacing:.075em;text-transform:uppercase;color:rgba(255,255,255,.5);white-space:nowrap}
.topbar-hours{text-transform:none;letter-spacing:.01em;font-size:.73rem;color:rgba(255,255,255,.62)}
.topbar-sep{width:1px;height:11px;background:rgba(255,255,255,.16);flex:0 0 auto}
@media(max-width:980px){
    .topbar-meta{display:none}
}
/* Phones get no strip at all: 38px of permanent chrome above the nav is a lot
   of a 844px screen, and the number moves into the header instead (see
   .header-call). --topbar-h drops to 0 so the hero still lands on the fold. */
@media(max-width:768px){
    .site-topbar{display:none}
    :root{--topbar-h:0px}
}

body{color:var(--ink);background:#fff;line-height:1.6;overflow-x:hidden;scrollbar-gutter:stable;font-family:'Satoshi','Segoe UI',Roboto,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.container{width:95%;max-width:1280px;margin:0 auto;padding:0 10px}

/* Heading rag: balance stops a two-line h2 from ending on one orphan word, and
   pretty keeps paragraphs from leaving a single word on the last line. Both are
   progressive — browsers without support simply ignore them. */
h1,h2,h3,h4,h5{text-wrap:balance}
p,li,dd,figcaption{text-wrap:pretty}

/* Utility: visually hidden but still read out (labels for compact forms). */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Keyboard users land here first instead of tabbing through the whole nav. */
.skip-link{position:absolute;left:1rem;top:-5rem;z-index:200;background:var(--primary);color:#fff;
    padding:.75rem 1.2rem;border-radius:0 0 8px 8px;font-size:.9rem;font-weight:600;text-decoration:none;transition:top .25s}
.skip-link:focus{top:0;outline:2px solid var(--accent);outline-offset:2px}

/* Header */
header{background:rgba(245,239,227,.82);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:var(--primary);padding:1.1rem 0;position:sticky;top:0;z-index:99;border-bottom:1px solid rgba(0,48,26,.08);transition:background .35s,padding .35s,box-shadow .35s,border-color .35s}
header.scrolled{background:rgba(245,239,227,.96);padding:.6rem 0;box-shadow:0 10px 30px rgba(0,48,26,.1);border-bottom-color:rgba(0,48,26,.1)}
.header-wrap{display:flex;justify-content:space-between;align-items:center;gap:1rem;position:relative;z-index:99}
.logo{position:relative;z-index:100;display:flex;align-items:center;line-height:0;text-decoration:none;cursor:default}
.logo img{height:44px;width:255px;max-width:100%;object-fit:contain;transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.logo:hover img{transform:scale(1.04)}
nav{position:fixed;top:0;left:0;right:0;display:block;width:100%;padding:5.8rem 1.6rem 2.2rem;background:linear-gradient(180deg,rgba(2,33,19,.97),rgba(0,48,26,.96));-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);z-index:98;transform:translateY(-105%);visibility:hidden;transition:transform .45s cubic-bezier(.77,0,.18,1),visibility .45s}
nav.active{transform:translateY(0);visibility:visible}
body.nav-open{overflow:hidden}
nav a{display:block;color:rgba(255,255,255,.88);text-decoration:none;margin:0;padding:1rem .2rem;font-size:1.05rem;font-weight:500;border-bottom:1px solid rgba(255,255,255,.07);opacity:0;transform:translateY(-14px);transition:opacity .35s,transform .35s,padding-left .3s,color .3s}
/* Mobile drawer keeps dark forest bg + white links; light header needs dark links on desktop (set in desktop block) */
nav.active a{opacity:1;transform:translateY(0)}
nav.active a:nth-child(1){transition-delay:.1s}
nav.active a:nth-child(2){transition-delay:.16s}
nav.active a:nth-child(3){transition-delay:.22s}
nav.active a:nth-child(4){transition-delay:.28s}
nav.active a:nth-child(5){transition-delay:.34s}
nav.active a:nth-child(6){transition-delay:.4s}
nav.active a:nth-child(7){transition-delay:.46s}
nav.active a:nth-child(8){transition-delay:.52s}
nav a:hover,nav a.active{color:var(--accent);padding-left:.9rem}
/* A real <button> in the markup (was a div with aria-expanded — not focusable,
   so keyboard users could not open the menu at all). */
.mobile-menu-btn{display:flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;padding:11px;cursor:pointer;border:0;border-radius:4px;background:none;font-family:inherit;transition:background .3s,opacity .26s ease,transform .34s cubic-bezier(.34,1.56,.64,1)}
.mobile-menu-btn:focus-visible{outline:2px solid var(--primary);outline-offset:-2px}
.mobile-menu-btn:hover{background:rgba(0,48,26,.06)}
.mobile-menu-btn span{display:block;height:2px;width:100%;background:var(--primary);border-radius:2px;transition:transform .35s cubic-bezier(.68,-.4,.32,1.4),opacity .25s}
.mobile-menu-btn.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.mobile-menu-btn.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.mobile-menu-btn.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Mobile Nav Close Button (plain X — no border, no effects) */
.nav-close-btn{display:none}
/* Tap-to-call, mobile only. Desktop keeps the full contact strip above the nav,
   so the icon would only be the second way to do the same thing.
   Declared here, above the ≤768 block, so that block can switch it on. */
.header-call{display:none}
@media(max-width:768px){
    /* logo 209 + call 44 + menu 44 + gap 16 = 313px, which still fits a 360px
       screen but not a 320px one — let the logo give up the difference */
    .logo{min-width:0;flex-shrink:1}
    .logo img{height:36px;width:209px}
    /* margin-left:auto pushes it to the right edge so it sits beside the menu
       button; the header-wrap gap (1rem) is the space between the two.
       No fill: a filled 44px chip in a sand header reads as a button from an
       app bar. The icon alone, at the weight of the hamburger beside it, is
       the quieter and more expensive-looking version. The 44px box is still
       there for the tap target, it just is not painted. */
    .header-call{display:inline-flex;align-items:center;justify-content:center;
        width:44px;height:44px;margin-left:auto;flex:0 0 auto;
        color:var(--primary);text-decoration:none;
        transition:opacity .26s ease,transform .34s cubic-bezier(.34,1.56,.64,1)}
    .header-call svg{width:21px;height:21px}
    .header-call:focus-visible{outline:2px solid var(--primary);outline-offset:-6px;border-radius:4px}
    /* the drawer covers the page, so the icon leaves with the hamburger */
    body.nav-open .header-call{opacity:0;transform:scale(.72);pointer-events:none}
    .nav-close-btn{display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:none;background:none;color:#fff;cursor:pointer;position:absolute;right:0;top:50%;transform:translateY(-50%);opacity:0;pointer-events:none;z-index:100;transition:opacity .2s ease}
    .nav-close-btn svg{width:26px;height:26px;flex-shrink:0}
    body.nav-open .nav-close-btn{opacity:1;pointer-events:auto}
    body.nav-open .mobile-menu-btn{opacity:0;transform:scale(.72);pointer-events:none}
}

/* Buttons: the orange gradient plus an orange glow was the loudest "SaaS"
   signal on the page. Solid fill, a 4px radius and a neutral shadow reads as
   a building company instead. */
.btn{display:inline-block;background:var(--accent);color:#fff;padding:.6rem 1.45rem;border-radius:4px;text-decoration:none;border:none;cursor:pointer;transition:background .25s,transform .25s,box-shadow .25s;font-size:.9rem;font-weight:700;letter-spacing:.005em;box-shadow:0 1px 2px rgba(0,48,26,.16)}
.btn:hover{background:#e0640f;transform:translateY(-1px);box-shadow:0 6px 16px rgba(0,48,26,.2)}
.header-cta{display:none;white-space:nowrap;flex-shrink:0}

/* Nav Dropdown */
.nav-dropdown{position:relative}
.dropdown-toggle{cursor:pointer}
.dropdown-arrow{font-size:.7em;transition:transform .25s ease}
.dropdown-menu{display:flex;flex-direction:column;padding-left:1rem}
.nav-dropdown:hover .dropdown-arrow{transform:rotate(180deg)}
@media(min-width:769px){
    .dropdown-menu{display:none;position:absolute;top:100%;left:50%;transform:translateX(-50%);min-width:220px;padding:.6rem 0;background:rgba(2,33,19,.96);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-radius:10px;box-shadow:0 12px 36px rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.08);gap:0}
    .nav-dropdown:hover .dropdown-menu{display:flex}
    .dropdown-menu a{display:block;padding:.6rem 1.4rem;font-size:.85rem;white-space:nowrap;border-bottom:none}
    .dropdown-menu a::after{display:none}
    .dropdown-menu a:hover{background:rgba(255,255,255,.06);padding-left:1.4rem}
}

/* Hero ----------------------------------------------------------------
   Was: brand name as the h1, a slogan, three generic icons ("Sustainable
   Living / Smarter Building / Stronger Communities") and two text links —
   no proposition, no proof, nothing an Australian buyer could act on. It now
   states what is actually sold, who builds it, and backs it with three figures
   pulled from elsewhere on the site. The icons are gone; the only ornament
   left is a hairline rule and a very light grain over the photograph, which
   also hides the fact that the source image is 1088px wide. */
.hero{position:relative;display:flex;flex-direction:column;justify-content:center;gap:0;
    background:url('images/home_bk1.webp');background-size:cover;background-position:65% center;
    color:#fff;padding:clamp(3.2rem,7vh,5.2rem) 0;text-align:left;
    min-height:calc(100vh - 72px - var(--topbar-h));min-height:calc(100svh - 72px - var(--topbar-h));overflow:hidden}
.hero::before{content:'';position:absolute;inset:0;
    background:linear-gradient(103deg,rgba(0,26,15,.94) 0%,rgba(0,32,18,.84) 30%,rgba(0,32,18,.45) 62%,rgba(0,32,18,.12) 100%);z-index:1}
/* film grain — 6% opacity, tiled 160px, sits above the photo and below the copy */
.hero::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.055;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
.hero h1{font-size:clamp(2.55rem,6.6vw,4.6rem);margin-bottom:.6rem;line-height:1.02;font-weight:800;letter-spacing:-.035em}
.hero h1 .accent-word{color:#f6a463}
.hero-title{font-size:clamp(1.02rem,1.5vw,1.42rem);font-weight:600;color:rgba(255,255,255,.9);
    margin-bottom:.55rem;line-height:1.35}
.hero-desc{font-size:.97rem;color:rgba(255,255,255,.66);margin-bottom:2.8rem;max-width:440px;line-height:1.7}
.hero-sub{font-size:.95rem;font-weight:600;text-transform:uppercase;letter-spacing:.22em;color:rgba(255,255,255,.9)}
.hero .container{position:relative;z-index:2;opacity:0;animation:heroIn 1.2s ease-in-out .1s forwards}
.hero-content{max-width:560px}

/* three small promises — quiet marks, no boxes, one row that collapses on mobile */
.hero-features{display:flex;gap:2.4rem}
.hero-feature{display:flex;flex-direction:column;align-items:center;gap:.5rem;text-align:center}
.hero-feature svg{width:34px;height:34px;color:rgba(250,246,238,.92)}
.hero-feature span{font-size:.74rem;font-weight:600;color:rgba(255,255,255,.72);line-height:1.4}
@keyframes heroIn{from{opacity:0}to{opacity:1}}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

/* Hero Boundary Strip */
.hero-notice{background:rgba(0,48,26,.05);border-bottom:1px solid rgba(0,48,26,.08);padding:.65rem 0}
.hero-notice .container{display:flex;align-items:center;gap:.6rem;font-size:.8rem;color:rgba(0,48,26,.6);line-height:1.5}
.hero-notice svg{flex-shrink:0;color:var(--accent);opacity:.7}

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

/* Section */
/* Section rhythm: was a flat 3.5rem (56px), which reads "small business website"
   next to the 96–120px used by the top-quartile Australian builders. Fluid now,
   so the larger screens get the air without the phone stretching to match. */
section{padding:clamp(3.8rem,7vw,6.6rem) 0}
section[id]{scroll-margin-top:84px}
.sec-title{text-align:center;margin-bottom:2.8rem;padding:0 10px}
.sec-title h2{font-size:clamp(1.95rem,3.4vw,2.55rem);line-height:1.18;letter-spacing:-.02em;color:var(--primary);margin-bottom:.65rem}
.sec-title p{color:var(--gray);font-size:clamp(.98rem,1.1vw,1.06rem);line-height:1.7}

/* Product Grid */
.prod-head{text-align:left;max-width:820px;margin-bottom:2.6rem}
.prod-eyebrow{display:inline-flex;align-items:center;gap:.65rem;font-size:.75rem;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:#c95a12;margin-bottom:.9rem}
.prod-eyebrow::before{content:'';width:34px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--accent),transparent)}
.prod-head h2{font-size:clamp(2.05rem,3.9vw,2.9rem);line-height:1.16;letter-spacing:-.022em;margin-bottom:.9rem}
.prod-head p{max-width:640px;font-size:clamp(.98rem,1.1vw,1.06rem);line-height:1.75}
/* --- Brochure (gated PDF) download trigger inside the inquiry form --- */
.form-alt-line{font-size:.82rem;color:var(--gray);margin-top:.7rem}
.link-btn{background:none;border:none;padding:0;font-family:inherit;font-size:.82rem;font-weight:600;color:var(--accent);text-decoration:underline;text-underline-offset:2px;cursor:pointer;transition:color .25s}
.link-btn:hover{color:#c95a12}
.product-list{display:flex;flex-direction:column;gap:1.8rem}
.product-row{display:grid;grid-template-columns:1fr}
.product-row .prod-media{height:230px}
.product-row h3{font-size:1.3rem}
.product-card{position:relative;border:1px solid var(--line-soft);border-radius:10px;overflow:hidden;background:#fff;box-shadow:var(--shadow-sm);transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .45s ease,border-color .45s ease;cursor:pointer}
.product-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;z-index:4;background:linear-gradient(90deg,var(--accent),#f8b477);transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.product-card:hover{transform:translateY(-8px);box-shadow:0 24px 48px rgba(0,48,26,.18);border-color:rgba(243,112,29,.6)}
.product-card:hover::before{transform:scaleX(1)}
.prod-media{position:relative;overflow:hidden;background:#f5f5f5}
.prod-media img{width:100%;height:100%;object-fit:cover;display:block}
.prod-body{display:flex;flex-direction:column;padding:1.4rem 1.5rem 1.6rem;position:relative;z-index:1}
.prod-body h3{color:var(--primary);margin-bottom:.55rem;font-size:1.15rem;line-height:1.3;transition:color .3s ease,transform .5s cubic-bezier(.22,1,.36,1)}
.product-card:hover .prod-body h3{color:#c95a12;transform:translateY(-6px)}
.prod-body p{font-size:.9rem;color:var(--gray);margin-bottom:1rem;line-height:1.7;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.prod-tag{color:#c95a12;font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em;margin-bottom:.5rem}
/* catalogue index — four rows read as one long strip otherwise */
.prod-no{display:block;font-size:.6rem;font-weight:700;letter-spacing:.26em;
    color:#a0947d;margin-bottom:.55rem;font-variant-numeric:tabular-nums;
    transition:color .3s,transform .5s cubic-bezier(.22,1,.36,1)}
.product-card:hover .prod-no{color:var(--accent);transform:translateY(-6px)}
.product-card:hover .prod-body .prod-tag{transform:translateY(-6px);transition-delay:.06s}
.product-card:hover .prod-body p:not(.prod-tag){transform:translateY(-6px);transition-delay:.11s}
.prod-link{display:inline-flex;align-items:center;gap:.45rem;margin-top:auto;color:var(--primary);font-size:.9rem;font-weight:700;text-decoration:none;transition:color .3s ease,gap .3s ease,transform .5s cubic-bezier(.22,1,.36,1);position:relative;z-index:4}
.prod-link::after{content:'';position:absolute;inset:-9999px}
.prod-link .prod-arrow{transition:transform .35s cubic-bezier(.22,1,.36,1)}
.product-card:hover .prod-link{gap:.7rem;transform:translateY(-6px);transition-delay:.16s}
.product-card:hover .prod-link .prod-arrow{transform:translateX(8px)}
/* Scroll Reveal */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
.reveal.in{opacity:1;transform:none}

/* System Section */
/* --- Our System -------------------------------------------------------
   The six-icon card grid said "system" six times and showed nothing: any
   builder could have written it. This is a dossier instead — one exploded
   drawing of the actual kit on the left, the six claims as a keyed list on
   the right, hard figures underneath. The drawing is the illustration, so
   the icon tiles are gone. */
.system{position:relative;background:radial-gradient(125% 105% at 10% 0%,#07462a 0%,#043520 44%,#021a10 100%);color:#fff;padding:clamp(4.2rem,7vw,6.4rem) 0 clamp(4rem,6.4vw,5.6rem);overflow:hidden}
.sys-head{max-width:680px;margin:0 0 3.2rem;text-align:left}
/* left-aligned head: one leading rule, not a pair of centred dashes */
.sys-head .sys-eyebrow::after{display:none}
.sys-head h2{font-size:clamp(2.05rem,3.7vw,2.75rem);letter-spacing:-.022em;line-height:1.18;margin-bottom:1.05rem}
.sys-head p{color:rgba(255,255,255,.68);line-height:1.8;font-size:clamp(.97rem,1.1vw,1.05rem);max-width:600px}

.sys-body{display:grid;grid-template-columns:1fr;gap:2.2rem}

/* The drawing is the kit's exploded axonometric, one layer per assembly step.
   The AI render sits on a pure black field, so the black is keyed to alpha at
   build time (edge-connected flood fill + anti-bleed, not a luminance ramp,
   which used to punch holes through the dark roof). Saved as a transparent webp
   — no blend mode, no black box, and it survives an opacity transition on an
   ancestor. The 01–06 column is HTML, not baked into the image. */
.sys-figure{margin:0}
.sys-model{position:relative;line-height:0;margin:0 0 1rem;padding-left:1.85rem}
.sys-model img{width:100%;max-width:540px;height:auto;display:block;margin:0 auto}
.sys-annot{list-style:none;margin:0;padding:0;position:absolute;left:0;top:0;bottom:0;width:1.85rem}
.sys-annot li{position:absolute;left:0;top:var(--y);transform:translateY(-50%);
    display:flex;align-items:center;gap:.2rem;line-height:1}
.sys-annot li span{font-size:.5rem;font-weight:700;letter-spacing:.04em;
    color:var(--accent);font-variant-numeric:tabular-nums}
.sys-annot li::after{content:"";display:block;width:.42rem;height:1px;background:rgba(255,255,255,.32)}
.sys-figure figcaption{padding-top:.85rem;border-top:1px solid rgba(255,255,255,.12);
    font-size:.77rem;line-height:1.75;color:rgba(255,255,255,.56);max-width:440px}
.sys-fig-key{display:block;font-size:.56rem;font-weight:700;letter-spacing:.2em;
    text-transform:uppercase;color:var(--accent);margin-bottom:.4rem}
.sys-legend{list-style:none;margin:.1rem 0 .7rem;padding:0;
    display:grid;grid-template-columns:1fr 1fr;gap:.26rem .9rem}
.sys-legend li{display:flex;gap:.4rem;font-size:.7rem;line-height:1.45;color:rgba(255,255,255,.64)}
.sys-legend li span{font-weight:700;color:rgba(243,112,29,.85);font-variant-numeric:tabular-nums}
.sys-figure figcaption p{margin:0}

/* the six claims: key column + statement, hairline rules, no boxes */
.sys-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
/* the transition list must repeat .reveal's pair, or this rule (later, equal
   specificity) would cancel the entrance animation */
.sys-item{display:grid;grid-template-columns:1fr;gap:.22rem;padding:1rem 0;
    border-top:1px solid rgba(255,255,255,.11);
    transition:border-color .35s,opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
.sys-item:last-child{border-bottom:1px solid rgba(255,255,255,.11)}
.sys-key{font-size:.55rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
    color:rgba(255,255,255,.4);transition:color .35s}
.sys-item h3{font-size:1rem;color:#fff;line-height:1.35;margin-bottom:.28rem;letter-spacing:-.005em}
.sys-item p{font-size:.845rem;line-height:1.72;color:rgba(255,255,255,.62);margin:0;max-width:52ch}
@media(hover:hover){
    .sys-item:hover{border-top-color:rgba(243,112,29,.55)}
    .sys-item:hover .sys-key{color:var(--accent)}
}

/* hard figures — value above label, tabular so the strip lines up */
.sys-specs{display:grid;grid-template-columns:repeat(2,1fr);gap:1.3rem 1rem;margin:3rem 0 0;
    padding:1.4rem 0 0;border-top:1px solid rgba(255,255,255,.16)}
.sys-specs>div{display:flex;flex-direction:column-reverse;gap:.22rem}
.sys-specs dt{font-size:.54rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
    color:rgba(255,255,255,.44);line-height:1.4}
.sys-specs dd{margin:0;font-size:1.45rem;font-weight:700;color:#fff;line-height:1.05;
    letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.sys-specs dd span{font-size:.85rem;font-weight:600;color:var(--accent);margin-left:.06em}

@media(min-width:860px){
    .sys-body{grid-template-columns:minmax(0,40%) minmax(0,1fr);gap:3.2rem;align-items:start}
    .sys-figure{position:sticky;top:96px}
    .sys-model img{margin:0}
    .sys-item{grid-template-columns:96px minmax(0,1fr);gap:0 1.1rem;padding:1.15rem 0}
    .sys-key{padding-top:.3rem}
}
@media(min-width:1024px){
    .sys-body{gap:4rem}
    .sys-specs{grid-template-columns:repeat(4,1fr);gap:1.6rem}
}


/* Process Section */
.process{background:#f9f6f0;padding:clamp(4rem,7vw,6.4rem) 0}
.proc-head{max-width:760px;margin:0 auto 2.5rem;text-align:center}
.proc-eyebrow{display:inline-flex;align-items:center;gap:.7rem;font-size:.75rem;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:#c95a12;margin-bottom:1rem}
.proc-eyebrow::before{content:'';width:34px;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--accent))}
.proc-eyebrow::after{content:'';width:34px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--accent),transparent)}
.proc-head h2{font-size:clamp(2.05rem,3.7vw,2.75rem);color:var(--primary);letter-spacing:-.022em;line-height:1.18;margin-bottom:.75rem}
.proc-lead{font-size:clamp(1.02rem,1.25vw,1.12rem);font-weight:600;color:#c95a12;margin-bottom:.7rem}
.proc-intro{color:var(--gray);line-height:1.8;font-size:clamp(.97rem,1.1vw,1.04rem);max-width:760px}
.process-track{position:relative;max-width:1040px;margin:0 auto}
.process-track::before{content:'';position:absolute;top:0;bottom:0;left:19px;width:2px;background:#e6dfd0}
.process-step{display:grid;grid-template-columns:40px 1fr;grid-template-areas:"marker title" "marker body";gap:.5rem 1.5rem;padding:2.4rem 0;opacity:.3;transform:translateY(26px);transition:opacity .6s ease,transform .6s cubic-bezier(.22,1,.36,1)}
.process-step.active{opacity:1;transform:none}
.step-title{grid-area:title}
.step-marker{grid-area:marker;display:flex;justify-content:center;align-self:stretch}
.step-body{grid-area:body}
.step-num{display:block;font-size:2.6rem;font-weight:800;line-height:1.05;color:transparent;-webkit-text-stroke:1.3px rgba(0,48,26,.35);letter-spacing:-.02em;margin-bottom:.35rem;transition:-webkit-text-stroke-color .6s ease}
.process-step.active .step-num{-webkit-text-stroke-color:#F3701D}
.step-title h3{font-size:1.25rem;color:var(--primary);line-height:1.3}
.step-dot{position:sticky;top:40vh;width:18px;height:18px;border-radius:50%;background:var(--accent);outline:10px solid #f9f6f0;transition:transform .35s ease,box-shadow .35s ease}
.process-step.active .step-dot{transform:scale(1.2);box-shadow:0 0 0 5px rgba(243,112,29,.22)}
.step-img{display:block;width:100%;height:auto;max-width:530px;aspect-ratio:16/9;object-fit:cover;border-radius:40px 40px 40px 0;margin-bottom:1.1rem;box-shadow:0 14px 34px rgba(0,48,26,.12);transform:scale(1.04);transition:transform .8s cubic-bezier(.22,1,.36,1)}
.process-step.active .step-img{transform:scale(1)}
.step-body p{color:#5f6b64;line-height:1.8;font-size:.92rem;max-width:400px}
.proc-outro{text-align:center;margin-top:2.5rem;font-size:1.1rem;font-weight:700;color:var(--primary)}
.proc-outro::before{content:'';display:block;width:56px;height:3px;border-radius:2px;background:linear-gradient(90deg,var(--accent),#f8b477);margin:0 auto 1.3rem}

/* ---------------------------------------------------------------
   Australian conditions band
   The site claimed "adapted to Australian design, engineering, climate" and
   then said nothing a certifier could check. This band names the four
   instruments an Australian approval actually turns on, states the kit is
   detailed to the classification the project engineer sets, and lists the
   eight jurisdictions — hairline rules, no cards, no icons.
   --------------------------------------------------------------- */
.au-band{position:relative;background:radial-gradient(120% 95% at 88% 0%,#0a3d26 0%,#03251a 55%,#01150d 100%);color:#fff;padding:clamp(4rem,7vw,5.8rem) 0;overflow:hidden}
.au-band::before{content:'';position:absolute;inset:0;pointer-events:none;
    background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px);background-size:100% 96px}
.au-band .container{position:relative}
.au-head{max-width:720px;margin-bottom:2.6rem}
.au-eyebrow{color:#f6a463}
.au-eyebrow::before{background:linear-gradient(90deg,var(--accent),transparent)}
.au-head h2{font-size:clamp(1.95rem,3.6vw,2.6rem);line-height:1.16;letter-spacing:-.024em;color:#fff;margin-bottom:.95rem}
.au-head p{font-size:clamp(.96rem,1.1vw,1.04rem);line-height:1.8;color:rgba(255,255,255,.66);max-width:620px}

.au-codes{display:grid;grid-template-columns:1fr;margin:0;border-top:1px solid rgba(255,255,255,.15)}
.au-codes>div{padding:1.15rem 0;border-bottom:1px solid rgba(255,255,255,.1)}
.au-codes dt{font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
    color:#f6a463;margin-bottom:.4rem;font-variant-numeric:tabular-nums}
.au-codes dd{margin:0;font-size:.86rem;line-height:1.72;color:rgba(255,255,255,.6);max-width:46ch}

.au-states{margin-top:2.2rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.15);
    display:grid;grid-template-columns:1fr;gap:.9rem 2.4rem}
.au-states-label{font-size:.68rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.4);margin:0}
.au-states ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 1.2rem}
.au-states li{display:flex;align-items:baseline;gap:.55rem;padding:.42rem 0;
    border-bottom:1px solid rgba(255,255,255,.07);font-size:.78rem;color:rgba(255,255,255,.48);line-height:1.4}
.au-states li span{font-size:.7rem;font-weight:700;letter-spacing:.1em;color:#fff;min-width:2.5em}
.au-note{margin:0;font-size:.76rem;line-height:1.7;color:rgba(255,255,255,.42);max-width:60ch}
.au-note strong{color:rgba(255,255,255,.7);font-weight:600}

@media(min-width:769px){
    .au-codes{grid-template-columns:repeat(4,minmax(0,1fr))}
    .au-codes>div{border-bottom:0;padding:1.6rem 1.5rem 1.9rem 0}
    .au-codes>div+div{border-left:1px solid rgba(255,255,255,.11);padding-left:1.5rem}
    .au-codes dd{font-size:.82rem;max-width:none}
    .au-states{grid-template-columns:180px minmax(0,1fr);align-items:start;gap:0 2.4rem;margin-top:2.4rem}
    .au-states-label{padding-top:.5rem}
    .au-states ul{grid-template-columns:repeat(4,minmax(0,1fr));gap:0 1.6rem}
    .au-note{grid-column:1/-1;margin-top:1.5rem;padding-top:1.3rem;border-top:1px solid rgba(255,255,255,.08)}
}
@media(max-width:480px){
    .au-head h2{font-size:1.72rem}
    .au-states ul{grid-template-columns:1fr 1fr}
}

/* Compliance */
.compliance{position:relative;background:linear-gradient(160deg,rgba(2,33,19,.66),rgba(2,33,19,.38));-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);padding:2rem 2.2rem 1.9rem;border:1px solid rgba(255,255,255,.14);border-radius:14px;margin:0 auto;font-size:.95rem;line-height:1.9;color:rgba(255,255,255,.82);max-width:900px;box-shadow:0 14px 44px rgba(0,0,0,.28);overflow:hidden;opacity:0;animation:fadeUp .8s cubic-bezier(.22,1,.36,1) .75s forwards}
.compliance::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:64px;height:3px;border-radius:0 0 3px 3px;background:linear-gradient(90deg,var(--accent),#f8b477)}
.compliance p{margin:0}
.compliance p+p{margin-top:.9rem}
.compliance strong{color:var(--accent)}

/* Form */
/* landing pulse when a design card hands over to the form */
.form-card.is-targeted{animation:formTarget 1.3s ease-out 2}
@keyframes formTarget{
    0%{box-shadow:0 4px 32px rgba(0,48,26,.08),0 0 0 0 rgba(243,112,29,.45)}
    70%{box-shadow:0 4px 32px rgba(0,48,26,.08),0 0 0 12px rgba(243,112,29,0)}
    100%{box-shadow:0 4px 32px rgba(0,48,26,.08),0 0 0 0 rgba(243,112,29,0)}
}
.form-card{position:relative;background:#fff;border-radius:10px;padding:2.5rem 2rem 2rem;max-width:720px;margin:0 auto;box-shadow:0 1px 2px rgba(0,48,26,.04),0 12px 40px rgba(0,48,26,.07);border:1px solid var(--line-soft);overflow:hidden}
.form-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--accent)}
.form-header{text-align:center;margin-bottom:2rem}
.form-header h3{font-size:1.35rem;color:var(--primary);font-weight:700;margin-bottom:.35rem}
.form-header p{font-size:.88rem;color:var(--gray);line-height:1.6}
.form-group{margin-bottom:1.4rem}
.form-group-label{display:block;font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--accent);margin-bottom:.6rem}
.form-wrap input,.form-wrap textarea,.form-wrap select{width:100%;padding:.85rem 1rem;border:1px solid #e0dacb;border-radius:4px;font-size:.93rem;font-family:inherit;color:var(--ink);background:#fdfbf6;transition:border-color .3s,box-shadow .3s,background .3s;-webkit-appearance:none;appearance:none}
.form-wrap select{background:#fdfbf6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 1rem center;padding-right:2.5rem;cursor:pointer}
.form-wrap input:hover,.form-wrap textarea:hover,.form-wrap select:hover{border-color:#c9c1ae}
.form-wrap input:focus,.form-wrap select:focus,.form-wrap textarea:focus{outline:none;border-color:var(--accent);background:#fff;box-shadow:0 0 0 3px rgba(243,112,29,.13)}
.form-wrap input::placeholder,.form-wrap textarea::placeholder{color:#a8a294;font-weight:400}
.form-wrap textarea{resize:vertical;min-height:100px}
.form-wrap button[type="submit"]{width:100%;padding:1rem;border-radius:4px;font-size:1rem;font-weight:700;margin-top:.5rem;letter-spacing:.01em;background:var(--accent);color:#fff;border:none;cursor:pointer;transition:background .25s,box-shadow .25s;box-shadow:0 1px 2px rgba(0,48,26,.16)}
.form-wrap button[type="submit"]:hover{background:#e0640f;box-shadow:0 6px 16px rgba(0,48,26,.2)}
.form-wrap button:disabled{opacity:.6;cursor:not-allowed;transform:none;box-shadow:none}
.form-status{display:none;margin:1rem 0 0;padding:.8rem 1.1rem;border-radius:10px;font-size:.88rem;line-height:1.6;text-align:center;font-weight:500}
.form-status.show{display:block}
.form-status.info{color:#00301A;background:rgba(0,48,26,.05);border:1px solid rgba(0,48,26,.08)}
.form-status.ok{color:#1e6b3a;background:rgba(46,160,80,.08);border:1px solid rgba(46,160,80,.15)}
.form-status.error{color:#a4342f;background:rgba(220,60,50,.06);border:1px solid rgba(220,60,50,.12)}

/* Hero Audience Quick-Links (low-key text links — replaces the prominent pill buttons) */
.hero-links{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.6rem;margin-top:2.4rem;font-size:.95rem}
.hero-links a{display:inline-flex;align-items:center;gap:.45rem;font-weight:600;letter-spacing:.01em;color:rgba(255,255,255,.82);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.22);padding-bottom:3px;transition:color .25s,border-color .25s}
.hero-links a:hover{color:#fff;border-color:var(--accent)}
.hero-links a:focus-visible{outline:2px solid rgba(255,255,255,.9);outline-offset:3px;border-radius:2px}
.hero-arrow{font-size:1rem;line-height:1;color:var(--accent);transition:transform .35s cubic-bezier(.22,1,.36,1)}
.hero-links a:hover .hero-arrow{transform:translateX(4px)}
.hero-links-sep{color:rgba(255,255,255,.28);font-size:.9rem;user-select:none}

/* Rendering Disclaimer */
.render-disclaimer{font-size:.75rem;color:#999;font-style:italic;margin-top:.5rem;line-height:1.5}
.gallery-grid .render-disclaimer{grid-column:1/-1;text-align:center;margin-top:0}

/* Form Enhancements */
.form-row{display:grid;grid-template-columns:1fr;gap:.9rem}
@media(min-width:769px){.form-row{grid-template-columns:1fr 1fr}}
.form-divider{height:1px;background:linear-gradient(90deg,transparent,#e5dfd0,transparent);margin:1.6rem 0}

/* Real labels, not placeholders: a placeholder disappears the moment someone
   types, which is exactly when they lose track of which field they are in. */
.field{display:flex;flex-direction:column;gap:.42rem;min-width:0}
.field>label{font-size:.78rem;font-weight:700;letter-spacing:.02em;color:#37443d;line-height:1.3}
.field>label span{font-weight:500;color:#969b90;letter-spacing:0;font-size:.74rem}
.form-wrap .field input,.form-wrap .field select,.form-wrap .field textarea{margin:0}
/* Progressive disclosure: three fields at first touch, the rest one click away.
   Native <details> — keyboard and screen reader behaviour comes for free. */
.form-extra{margin:1.2rem 0 .2rem;border:1px solid #e0dacb;border-radius:4px;background:#fdfbf6;overflow:hidden;transition:border-color .3s,background .3s}
.form-extra[open]{background:#fff;border-color:#d5cdba}
.form-extra summary{display:flex;flex-wrap:wrap;align-items:baseline;gap:.15rem .5rem;padding:.95rem 1rem;cursor:pointer;list-style:none;font-size:.9rem;font-weight:700;color:var(--primary)}
.form-extra summary::-webkit-details-marker{display:none}
.form-extra summary::after{content:'+';margin-left:auto;font-size:1.15rem;line-height:1;font-weight:600;color:var(--accent)}
.form-extra[open] summary::after{content:'\2013'}
.form-extra summary em{font-style:normal;font-weight:500;font-size:.78rem;color:#8a8577}
.form-extra summary:hover{color:#c95a12}
.form-extra summary:focus-visible{outline:2px solid var(--accent);outline-offset:-3px;border-radius:4px}
.form-extra-body{display:flex;flex-direction:column;gap:.9rem;padding:.1rem 1rem 1.15rem}
.form-extra-body .form-row{gap:.9rem}

/* Footer */
footer{background:var(--primary);color:#fff;padding:3.5rem 0 0;font-size:.88rem}
.footer-grid{display:grid;grid-template-columns:1fr;gap:2.2rem;margin-bottom:2.5rem}
.footer-brand .logo{margin-bottom:.8rem;display:inline-flex}
.footer-brand .logo img{height:40px;width:232px}
.footer-brand p{font-size:.85rem;color:rgba(255,255,255,.6);line-height:1.7;max-width:300px}
.footer-brand .footer-contact-item{display:flex;align-items:flex-start;gap:.5rem;margin-top:.5rem;font-size:.82rem;color:rgba(255,255,255,.55)}
.footer-brand .footer-contact-item svg{flex-shrink:0;color:var(--accent);opacity:.7;margin-top:2px}
.footer-heading{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.15em;color:var(--accent);margin-bottom:1rem}
.footer-links{list-style:none}
.footer-links li{margin-bottom:.55rem}
.footer-links a{color:rgba(255,255,255,.6);text-decoration:none;font-size:.85rem;transition:color .3s,padding-left .3s}
.footer-links a:hover{color:var(--accent);padding-left:4px}
.footer-social{display:flex;gap:.7rem;margin-top:.3rem}
.footer-social a{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.6);text-decoration:none;transition:background .3s,color .3s,border-color .3s,transform .3s}
.footer-social a:hover{background:rgba(243,112,29,.15);border-color:rgba(243,112,29,.4);color:var(--accent);transform:translateY(-2px)}
.footer-social svg{width:18px;height:18px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08);padding:1.5rem 0 2rem;text-align:center}
.footer-bottom p{font-size:.8rem;color:rgba(255,255,255,.45);line-height:1.7;margin-bottom:.3rem}
.footer-bottom a{color:var(--accent);text-decoration:none;margin:0 .3rem}
.footer-legal{display:flex;flex-wrap:wrap;justify-content:center;gap:.3rem .6rem;margin:.6rem 0}
.footer-legal a{font-size:.8rem}
.footer-biz-info{font-size:.75rem;color:rgba(255,255,255,.35);margin-top:.6rem;line-height:1.6}
footer a{color:var(--accent);text-decoration:none;margin:0 .2rem}
@media(min-width:769px){
    .footer-grid{grid-template-columns:1.4fr 1fr 1fr;gap:3rem}
}
@media(max-width:768px){
    footer{padding:2.5rem 0 0;text-align:center}
    .footer-brand p{margin-left:auto;margin-right:auto}
    .footer-social{justify-content:center}
    .footer-brand .footer-contact-item{justify-content:center}
}

/* Cookie Popup */
.cookie-popup{position:fixed;bottom:0;left:0;right:0;background:rgba(2,26,16,.975);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#fff;padding:1.4rem 1rem;z-index:999;display:none;border-top:1px solid rgba(255,255,255,.08)}
.cookie-popup.show{display:block;animation:cookieSlideUp .4s ease}
@keyframes cookieSlideUp{from{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}
.cookie-inner{display:flex;flex-direction:column;gap:.9rem;align-items:center;text-align:center;max-width:720px;margin:0 auto}
.cookie-inner p{font-size:.88rem;line-height:1.6;color:rgba(255,255,255,.78);margin:0}
.cookie-inner a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.cookie-btns{display:flex;gap:.7rem;flex-wrap:wrap;justify-content:center;max-width:100%}
.cookie-btns .btn{min-width:110px;padding:.55rem 1.3rem;font-size:.85rem;border-radius:6px;cursor:pointer;border:none}
.cookie-btns .btn-decline{background:transparent;color:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.2)}
.cookie-btns .btn-decline:hover{border-color:rgba(255,255,255,.45);color:#fff}
.cookie-prefs{display:none;width:100%;max-width:480px;margin-top:.3rem}
.cookie-prefs.open{display:block}
.cookie-prefs label{display:flex;align-items:center;justify-content:space-between;padding:.55rem 0;font-size:.84rem;color:rgba(255,255,255,.7);border-bottom:1px solid rgba(255,255,255,.06)}
.cookie-prefs label:last-child{border-bottom:none}
.cookie-prefs .toggle{position:relative;width:38px;height:20px;flex-shrink:0;margin-left:.8rem}
.cookie-prefs .toggle input{opacity:0;width:0;height:0}
.cookie-prefs .toggle .slider{position:absolute;inset:0;background:rgba(255,255,255,.15);border-radius:20px;cursor:pointer;transition:background .25s}
.cookie-prefs .toggle .slider::before{content:'';position:absolute;left:2px;top:2px;width:16px;height:16px;background:#fff;border-radius:50%;transition:transform .25s}
.cookie-prefs .toggle input:checked+.slider{background:var(--accent)}
.cookie-prefs .toggle input:checked+.slider::before{transform:translateX(18px)}
.cookie-prefs .toggle input:disabled+.slider{opacity:.5;cursor:not-allowed}
.cookie-prefs-desc{font-size:.78rem;color:rgba(255,255,255,.45);margin-top:.2rem}

/* Desktop Adaptation */
@media(min-width:769px){
    .mobile-menu-btn{display:none}
    nav{position:static;display:flex;align-items:center;width:auto;padding:0;transform:none;visibility:visible;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;gap:.2rem}
    nav a{display:inline-block;margin:0;padding:.5rem .85rem;font-size:.92rem;border-bottom:none;opacity:1;transform:none;position:relative;white-space:nowrap;color:rgba(0,48,26,.78);font-weight:600}
    nav a::after{content:'';position:absolute;left:50%;bottom:4px;height:2px;width:0;border-radius:2px;background:linear-gradient(90deg,var(--accent),#f8b477);transform:translateX(-50%);transition:width .3s ease}
    nav a:hover{color:var(--primary);padding-left:.85rem}
    nav a:hover::after{width:55%}
    nav a.active{color:var(--accent)}
    nav a.active::after{width:55%}
    /* FAQ / Inquiry / Contact are page-section jumps, not destinations, and they
       were pushing the row to nine items against a 255px logo. They stay in the
       mobile drawer (where vertical room is free) and are dropped on desktop;
       all three remain reachable from the footer and the "Get Quote" CTA. */
    nav a.nav-util{display:none}
    .header-cta{display:block}
    .product-list{gap:0}
    .product-row{grid-template-columns:1fr 1fr;align-items:stretch;border:none;border-radius:0;box-shadow:none}
    .product-row::before{display:none}
    .product-row:hover{transform:none;box-shadow:none}
    .product-row .prod-media{height:auto;min-height:440px}
    /* hairline between catalogue rows: without it four full-bleed 50/50 rows
       merge into one band and the eye loses the product boundaries */
    .product-row+.product-row{border-top:1px solid var(--line-soft)}
    .product-row:nth-child(even) .prod-media{order:2}
    .product-row .prod-body{padding:2.6rem 3.2rem;justify-content:center;max-width:640px}
    .product-row:nth-child(even) .prod-body{margin-left:auto}
    .product-row h3{font-size:1.75rem;margin-bottom:.7rem}
    .product-row .prod-tag{font-size:.82rem;margin-bottom:.8rem}
    .product-row .prod-body p{font-size:1rem;line-height:1.85;margin-bottom:1.7rem}
    .product-row .prod-link{font-size:.95rem}
    .process-step{grid-template-columns:1fr 44px 1fr;grid-template-areas:"title marker body";gap:0 2.8rem;min-height:36vh;align-items:center;padding:2.6rem 0}
    .step-title{text-align:left;position:sticky;top:38vh;justify-self:end;max-width:320px}
    .process-track::before{left:50%;margin-left:-1px}
    .step-num{font-size:4.8rem}
    .step-title h3{font-size:1.55rem}
    .step-dot{width:20px;height:20px;outline-width:12px}
    .hero-content{max-width:620px}
    .container{padding:0}
}
/* Desktop nav is now six items (FAQ / Inquiry / Contact are drawer-only), which
   buys back the breathing room these tablet bands used to squeeze out. */
@media(min-width:769px) and (max-width:1023px){
    nav{gap:0}
    nav a{padding:.5rem .62rem;font-size:.84rem}
    nav a:hover{padding-left:.62rem}
    .header-cta{padding:.45rem .85rem;font-size:.78rem}
    .logo img{height:36px;width:209px}
}
/* Narrow tablets: shrink logo further & tighten nav so labels never wrap */
@media(min-width:769px) and (max-width:900px){
    .logo img{height:28px;width:162px}
    nav a{padding:.4rem .36rem;font-size:.78rem}
    nav a:hover{padding-left:.36rem}
    .header-cta{padding:.4rem .75rem;font-size:.74rem}
}
/* 1024–1180px: container is still ~973–1120px here, so keep logo/nav/CTA compact —
   otherwise the flex row over-squeezes the CTA and "Get Quote" wraps to two lines. */
@media(min-width:1024px) and (max-width:1180px){
    .logo img{height:38px;width:220px}
    nav{gap:0}
    nav a{padding:.5rem .8rem;font-size:.9rem}
    nav a:hover{padding-left:.8rem}
    .header-cta{padding:.5rem 1.1rem;font-size:.85rem}
}
@media(min-width:1024px){
    .hero-content{max-width:640px}
    .product-row .prod-media{min-height:520px}
    .product-row .prod-body{padding:3rem 3.6rem}
    .product-row h3{font-size:1.95rem}
    .product-row .prod-body p{font-size:1.05rem}
    /* h2 sizes are fluid via clamp() at the base rule — no fixed ceiling here,
       otherwise anything past 1024px stops growing and the scale goes flat. */
}
@media(max-width:768px){
    .hero{background-position:58% center;min-height:calc(100svh - 80px - var(--topbar-h));
        padding:3rem 0 2.8rem}
    .hero::before{background:linear-gradient(178deg,rgba(0,26,15,.72) 0%,rgba(0,26,15,.86) 46%,rgba(0,26,15,.95) 100%)}
    .hero-content{max-width:100%}
    .hero h1{font-size:clamp(2.3rem,9vw,3.1rem)}
    .hero-desc{max-width:100%}
    .hero-features{gap:1.9rem}
    .hero-links{gap:.5rem 1.2rem}
}
@media(max-width:480px){
    .hero{padding:2.6rem 0 2.4rem}
    .hero h1{font-size:clamp(2.1rem,9.4vw,2.7rem)}
    .hero-features{gap:1.4rem}
    .hero-feature svg{width:30px;height:30px}
    section{padding:3.4rem 0}
    .sec-title h2{font-size:1.78rem}
    .prod-head h2{font-size:1.86rem}
    .product-row .prod-media{height:200px}
    .product-row .prod-body{padding:1.4rem 1.4rem 1.6rem}
    .sys-head h2{font-size:1.8rem}
    .system{padding:3.6rem 0}
    .process{padding:3.6rem 0}
    .step-num{font-size:2.2rem}
}

/* ============================================================
   Product Detail Page Styles
   ============================================================ */

/* --- Breadcrumb --- */
.product-breadcrumb{padding:16px 0;font-size:.85rem;color:var(--gray)}
.product-breadcrumb a{color:var(--accent);text-decoration:none;transition:opacity .3s}
.product-breadcrumb a:hover{opacity:.75}
.product-breadcrumb span{margin:0 .4rem;color:#bbb}

/* --- Product Hero --- */
.product-hero{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:60vh;background-size:cover;background-position:center;color:#fff;text-align:center;padding:4rem 0 3.5rem}
.product-hero::before{content:'';position:absolute;inset:0;background:linear-gradient(rgba(2,33,19,.72),rgba(0,48,26,.58));z-index:1}
/* same fine grain as the homepage hero — keeps the photographic treatment
   consistent across the two first screens */
.product-hero::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.05;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n2)'/%3E%3C/svg%3E")}
.product-hero .container{position:relative;z-index:2}
.product-hero h1{font-size:3rem;font-weight:800;line-height:1.2;letter-spacing:-.01em;margin-bottom:1rem}
.product-hero .hero-sub{display:inline-block;font-size:.95rem;font-weight:600;text-transform:uppercase;letter-spacing:.22em;background:linear-gradient(90deg,var(--accent),#fbd3a9);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:1.5rem}
.product-hero p{font-size:1.05rem;max-width:680px;margin:0 auto 2rem;opacity:.92;line-height:1.7}
.btn-gold{display:inline-block;background:var(--accent);color:#fff;padding:.6rem 1.8rem;border-radius:4px;text-decoration:none;border:none;cursor:pointer;font-size:.95rem;font-weight:700;box-shadow:0 1px 2px rgba(0,48,26,.16);transition:background .25s,box-shadow .25s}
.btn-gold:hover{background:#e0640f;box-shadow:0 6px 16px rgba(0,48,26,.2)}

/* --- Product Overview --- */
.product-overview{background:#fff;padding:clamp(56px,7vw,104px) 0}
.product-overview .overview-grid{display:grid;grid-template-columns:1fr;gap:40px}
.product-overview .overview-title h2{font-size:clamp(1.85rem,3.1vw,2.45rem);color:var(--primary);margin-bottom:1.1rem;line-height:1.22;letter-spacing:-.02em;font-weight:700}
.product-overview .overview-title p{color:var(--gray);line-height:1.8;font-size:clamp(.96rem,1.05vw,1.03rem)}
.product-overview .overview-specs{border-left:3px solid var(--accent);padding-left:24px}
.product-overview .overview-specs li{list-style:none;color:var(--gray);line-height:1.8;font-size:.92rem;margin-bottom:8px}
.product-overview .overview-specs li strong{color:var(--primary)}

/* --- Product Features --- */
.product-features{background:var(--light);padding:clamp(56px,7vw,104px) 0}
.product-features .sec-title{margin-bottom:3rem}
.features-grid{display:grid;grid-template-columns:1fr;gap:24px}
.feature-card{background:#fff;border-radius:8px;padding:36px 28px;position:relative;overflow:hidden;box-shadow:0 2px 10px rgba(0,48,26,.05);transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s}
.feature-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent),#f8b477)}
.feature-card:hover{transform:translateY(-5px);box-shadow:0 14px 36px rgba(0,48,26,.12)}
.feature-icon{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,rgba(243,112,29,.18),rgba(243,112,29,.06));display:grid;place-items:center;margin-bottom:1.2rem;color:var(--accent)}
.feature-icon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.feature-card h3{font-size:1.25rem;font-weight:700;color:var(--primary);margin-bottom:.6rem;line-height:1.3}
.feature-card p{font-size:.9rem;color:var(--gray);line-height:1.7}
/* Product Range (for-builders): 4 cards → balanced single row, avoids the 3+1 orphan */
.range-grid .feature-card{padding:30px 24px}
.range-grid .feature-card h3{font-size:1.15rem}
.range-grid .feature-card p{font-size:.85rem}
.range-grid .feature-card{display:flex;flex-direction:column}
.range-grid .prod-link{margin-top:auto;padding-top:1.1rem}

/* --- Product Includes --- */
.product-includes{background:#fff;padding:80px 0}
.product-includes .sec-title{margin-bottom:2.5rem}
.includes-list{column-count:1;list-style:none}
.includes-list li{position:relative;padding:8px 0 8px 32px;font-size:.92rem;color:#3f4b45;line-height:1.6;margin-bottom:8px}
.includes-list li::before{content:'\2713';position:absolute;left:0;top:8px;color:var(--accent);font-weight:700;font-size:1rem}

/* --- Product Not Included --- */
.product-not-included{background:var(--light);padding:80px 0}
.product-not-included .sec-title{margin-bottom:2.5rem}
.not-included-list{column-count:1;list-style:none}
.not-included-list li{position:relative;padding:8px 0 8px 32px;font-size:.92rem;color:#8b8b82;line-height:1.6;margin-bottom:8px;text-decoration:line-through;text-decoration-color:rgba(180,80,70,.35)}
.not-included-list li::before{content:'\2717';position:absolute;left:0;top:8px;color:#b45046;font-weight:700;font-size:1rem}
@media(min-width:769px){.not-included-list{column-count:2}}

/* --- Product Gallery --- */
.product-gallery{background:var(--light);padding:clamp(56px,7vw,104px) 0}
.product-gallery .sec-title{margin-bottom:2.5rem}
.gallery-grid{display:grid;grid-template-columns:1fr;gap:20px}
.gallery-grid img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px;display:block;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.gallery-grid img:hover{transform:scale(1.03)}
.gallery-coming-soon{grid-column:1/-1;text-align:center;margin-top:.5rem;font-size:.78rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#9a9a9a}

/* --- Product Featured Projects (from Treezo casebook) --- */
.product-projects{background:#fff;padding:80px 0}
.product-projects .sec-title{margin-bottom:2.8rem}
.product-projects .sec-title p{max-width:640px;margin:.4rem auto 0;line-height:1.75}
.projects-grid{display:grid;grid-template-columns:1fr;gap:24px}
/* Design listing, after the catalogue idiom used by Australian project builders:
   no card frame, no lift on hover — the photograph is the card, the spec row is
   a fixed label/value grid and one text CTA closes it. Chrome-free cards let the
   eye compare images instead of boxes. */
.project-card{display:flex;flex-direction:column;background:transparent;border:0;border-radius:0;overflow:hidden;transition:none}
/* overflow:hidden above is not cosmetic — .prod-link carries an ::after{inset:-9999px}
   hit area and must stay clipped by its card (see treezo.html cards). */
.project-card:hover{transform:none;box-shadow:none;border-color:transparent}
.project-img{position:relative;overflow:hidden;background:var(--sand);aspect-ratio:4/3;border-radius:12px}
.project-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.22,1,.36,1)}
.project-card:hover .project-img img{transform:scale(1.045)}
.project-flag{position:absolute;top:12px;left:12px;background:rgba(0,48,26,.82);color:#fff;font-size:.62rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;padding:.34rem .68rem;border-radius:20px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.project-body{padding:1.05rem 0 0;display:flex;flex-direction:column;gap:.4rem;flex:1}
.project-tag{font-size:.63rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#c95a12}
.project-title{font-size:1.16rem;font-weight:700;color:var(--primary);line-height:1.32;margin:0;letter-spacing:-.012em;transition:color .3s}
.project-card:hover .project-title{color:var(--accent)}
.project-desc{font-size:.85rem;color:var(--gray);line-height:1.68;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* three or four fixed slots — label above value, tabular figures so the
   numbers line up down the column the way a spec sheet does */
/* treezo's three cards carry a full paragraph, not a one-line caption */
.projects-grid--editorial .project-desc{-webkit-line-clamp:5}
.design-spec{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.55rem 1rem;
    margin:auto 0 0;padding:.9rem 0 0;border-top:1px solid rgba(0,48,26,.1)}
.design-spec--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.design-spec>div{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.design-spec dt{font-size:.53rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:#a6a6a6}
.design-spec dd{margin:0;font-size:.85rem;font-weight:600;color:var(--primary);line-height:1.3;
    font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.design-link{display:flex;align-items:center;justify-content:space-between;gap:.5rem;
    margin-top:.85rem;padding-top:.8rem;border-top:1px solid rgba(0,48,26,.1);
    font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
    color:var(--primary);text-decoration:none;transition:color .3s}
.design-link svg{flex:0 0 auto;transition:transform .35s cubic-bezier(.22,1,.36,1)}
.project-card:hover .design-link{color:var(--accent)}
.project-card:hover .design-link svg{transform:translateX(4px)}
.design-link:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:2px}
.projects-note{grid-column:1/-1;text-align:center;font-size:.75rem;color:#8a8a8a;font-style:italic;margin-top:.6rem;line-height:1.6}

/* --- Project Image Carousel (multi-image slides) --- */
.project-img[data-carousel] .carousel-track{display:flex;height:100%;transition:transform .55s cubic-bezier(.22,1,.36,1);will-change:transform}
.project-img[data-carousel] .carousel-slide{min-width:100%;height:100%;flex-shrink:0;position:relative;overflow:hidden}
.project-img[data-carousel] .carousel-slide img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.22,1,.36,1)}
.project-card:hover .project-img[data-carousel] .carousel-slide img{transform:scale(1.05)}
.carousel-btn{position:absolute;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.92);border:none;color:var(--primary);font-size:1.35rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s,background .2s,transform .25s;z-index:3;box-shadow:0 2px 10px rgba(0,48,26,.18);padding:0;font-family:inherit}
.project-img[data-carousel]:hover .carousel-btn,.project-img[data-carousel]:focus-within .carousel-btn{opacity:1}
.carousel-btn:hover{background:#fff;transform:translateY(-50%) scale(1.1)}
.carousel-btn:active{transform:translateY(-50%) scale(.94)}
.carousel-btn.prev{left:10px}
.carousel-btn.next{right:10px}
.carousel-dots{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);display:flex;gap:5px;z-index:3;padding:5px 9px;background:rgba(0,48,26,.42);border-radius:20px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.carousel-dots .dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.5);border:none;padding:0;cursor:pointer;transition:background .3s,width .3s,border-radius .3s}
.carousel-dots .dot:hover{background:rgba(255,255,255,.85)}
.carousel-dots .dot.is-active{background:#fff;width:16px;border-radius:3px}
.carousel-count{position:absolute;top:12px;right:12px;background:rgba(0,48,26,.72);color:#fff;font-size:.66rem;font-weight:600;letter-spacing:.08em;padding:.28rem .58rem;border-radius:12px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:3;font-variant-numeric:tabular-nums}
@media(max-width:768px){
    .carousel-btn{opacity:.88;width:30px;height:30px;font-size:1.1rem}
    .carousel-dots{bottom:8px;padding:4px 8px;gap:4px}
    .carousel-dots .dot{width:5px;height:5px}
    .carousel-dots .dot.is-active{width:14px}
    .carousel-count{top:10px;right:10px;font-size:.62rem;padding:.24rem .5rem}
}

/* --- Product CTA --- */
.product-cta{background:var(--primary);padding:clamp(56px,6vw,88px) 0;text-align:center;color:#fff}
.product-cta h2{font-size:clamp(1.9rem,3.2vw,2.5rem);font-weight:700;margin-bottom:.85rem;line-height:1.24;letter-spacing:-.02em}
.product-cta p{font-size:.95rem;opacity:.8;margin-bottom:1.8rem;max-width:560px;margin-left:auto;margin-right:auto;line-height:1.7}

/* --- Product Page Reveal Animation --- */
.product-hero .container,.product-overview .reveal,.product-features .reveal,.product-includes .reveal,.product-gallery .reveal,.product-projects .reveal,.product-cta .reveal{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
.product-hero .container.in,.product-overview .reveal.in,.product-features .reveal.in,.product-includes .reveal.in,.product-gallery .reveal.in,.product-projects .reveal.in,.product-cta .reveal.in{opacity:1;transform:none}

/* --- Product Detail — Tablet (≥769px) --- */
@media(min-width:769px){
    .product-hero{min-height:60vh;padding:5rem 0 4rem}
    .product-hero h1{font-size:3rem}
    .product-overview .overview-grid{grid-template-columns:1fr 1fr;gap:60px}
    .features-grid{grid-template-columns:repeat(2,1fr)}
    .includes-list{column-count:2}
    .gallery-grid{grid-template-columns:repeat(2,1fr)}
    .projects-grid{grid-template-columns:repeat(2,1fr)}
}

/* --- Product Detail — Desktop (≥1024px) --- */
@media(min-width:1024px){
    .features-grid{grid-template-columns:repeat(3,1fr)}
.features-grid.range-grid{grid-template-columns:repeat(4,1fr)}
    .gallery-grid{grid-template-columns:repeat(3,1fr)}
    .projects-grid{grid-template-columns:repeat(3,1fr)}
    /* overview h2 is fluid via clamp() on the base rule */
}

/* --- Product Detail — Mobile (≤480px) --- */
@media(max-width:480px){
    .product-hero{min-height:50vh;padding:3rem 0 2.5rem}
    .product-hero h1{font-size:2rem}
    .product-overview{padding:50px 0}
    .product-features{padding:50px 0}
    .product-includes{padding:50px 0}
    .product-gallery{padding:50px 0}
    .product-projects{padding:50px 0}
    .project-body{padding:.9rem 0 0}
    .project-title{font-size:1.05rem}
    /* three value columns stop fitting under ~360px card width, so the spec
       row drops to two and the label never has to break mid-word */
    .design-spec,.design-spec--4{grid-template-columns:repeat(2,minmax(0,1fr))}
    .product-cta{padding:40px 0}
    .product-cta h2{font-size:1.5rem}
}

/* --- Scroll Progress Bar --- */
.progress-bar{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--accent),#f8b477);z-index:200;pointer-events:none;transition:width .08s linear}

/* --- Hero Scroll Indicator --- */
.scroll-indicator{position:absolute;bottom:2.2rem;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.5);text-decoration:none;font-size:.7rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:.5rem;transition:color .3s}
.scroll-indicator:hover{color:rgba(255,255,255,.9)}
.scroll-indicator::after{content:'';display:block;width:1px;height:32px;background:linear-gradient(to bottom,rgba(255,255,255,.5),transparent);animation:scrollPulse 2s ease-in-out infinite}
@keyframes scrollPulse{0%,100%{opacity:.3;transform:scaleY(.7)}50%{opacity:1;transform:scaleY(1)}}

/* --- Back to Top --- */
.back-to-top{position:fixed;bottom:2rem;right:2rem;width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--accent),#d95f10);color:#fff;display:flex;align-items:center;justify-content:center;text-decoration:none;font-size:1.2rem;z-index:99;opacity:0;transform:translateY(16px);transition:opacity .35s,transform .35s,background .25s;box-shadow:0 4px 16px rgba(243,112,29,.35);pointer-events:none}
.back-to-top.visible{opacity:1;transform:translateY(0);pointer-events:auto}
.back-to-top:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(243,112,29,.5)}

/* --- FAQ Enhancements ---
   Hairline rows instead of grey cards: four boxed questions in a row read as an
   appendix, while ruled rows sit in the same editorial language as Our System
   and the Australian-conditions band. */
.faq-list{border-top:1px solid var(--line)}
.faq-item{max-width:100%;margin:0;border:0;border-bottom:1px solid var(--line);border-radius:0;overflow:hidden;transition:border-color .3s}
.faq-item:hover{border-bottom-color:rgba(243,112,29,.45)}
/* The question is a real <button> (was a div with onclick, which keyboard and
   screen-reader users could not operate at all). Reset to look unchanged. */
.faq-q{width:100%;padding:1.35rem .2rem;background:none;border:0;font-family:inherit;text-align:left;cursor:pointer;font-weight:600;display:flex;justify-content:space-between;align-items:center;gap:1.4rem;font-size:1.02rem;line-height:1.45;color:var(--primary);transition:color .3s}
.faq-q:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}
.faq-item:hover .faq-q{color:#c95a12}
.faq-q::after{content:'+';font-size:1.25rem;font-weight:400;color:var(--accent);flex-shrink:0;line-height:1;
    transition:transform .35s cubic-bezier(.22,1,.36,1)}
.faq-item.active .faq-q::after{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;visibility:hidden;transition:max-height .4s cubic-bezier(.22,1,.36,1),visibility 0s .4s}
.faq-item.active .faq-a{max-height:24rem;visibility:visible;transition:max-height .4s cubic-bezier(.22,1,.36,1),visibility 0s 0s}
.faq-a-inner{padding:0 3rem 1.5rem .2rem;font-size:.93rem;line-height:1.78;color:var(--gray);opacity:0;transform:translateY(-6px);transition:opacity .35s ease,transform .35s ease}
.faq-item.active .faq-a-inner{opacity:1;transform:none}
#faq{padding:clamp(3.6rem,6vw,5.4rem) 0;background:var(--paper)}

/* --- Contact Section --- */
.contact-section{background:linear-gradient(180deg,#043520,#021a10);color:#fff;padding:clamp(3.6rem,6vw,5.4rem) 0;text-align:center}
.contact-section .sec-title h2{color:#fff}
.contact-section .sec-title p{color:rgba(255,255,255,.6)}
.contact-cards{display:grid;grid-template-columns:1fr;gap:1.2rem;margin-top:2.5rem}
@media(min-width:769px){.contact-cards{grid-template-columns:repeat(4,1fr)}}
.contact-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:2rem 1.5rem;transition:background .35s,border-color .35s,transform .35s cubic-bezier(.22,1,.36,1)}
.contact-card:hover{background:rgba(255,255,255,.09);border-color:rgba(243,112,29,.4);transform:translateY(-4px)}
.contact-card .card-icon{width:48px;height:48px;border-radius:12px;background:linear-gradient(135deg,rgba(243,112,29,.22),rgba(243,112,29,.08));border:1px solid rgba(243,112,29,.4);display:grid;place-items:center;margin:0 auto 1rem;color:var(--accent)}
.contact-card .card-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.contact-card h3{font-size:1.05rem;color:#fff;margin-bottom:.4rem;font-weight:600}
/* Embedded Google Map (#8) — keyless maps embed, no API key required */
.contact-map{margin-top:2.5rem;border-radius:10px;overflow:hidden;border:1px solid rgba(255,255,255,.12);box-shadow:0 18px 40px rgba(0,0,0,.28);background:#e9e7e1}
.contact-map iframe{display:block;width:100%;height:340px;border:0;background:#e9e7e1}
.contact-map-bar{background:#fff;color:#4c5a52;padding:.75rem 1rem;font-size:.85rem;text-align:center;line-height:1.5}
.contact-map-bar a{color:var(--accent);font-weight:600;text-decoration:none}
.contact-map-bar a:hover{text-decoration:underline}
@media(min-width:769px){.contact-map iframe{height:420px}}
.contact-card p{font-size:.9rem;color:rgba(255,255,255,.6);line-height:1.6}
.contact-card a{color:var(--accent);text-decoration:none;transition:opacity .3s}
.contact-card a:hover{opacity:.8}

/* --- Inquiry Section Polish --- */
/* :not(.product-cta) 避免产品页 <section class="product-cta" id="inquiry"> 被白底覆盖，仅作用于 index 询价表单区 */
#inquiry:not(.product-cta){padding:clamp(3.8rem,6.4vw,5.8rem) 0;background:#fff}
.form-trust{font-size:.78rem;color:#aaa;text-align:center;margin-top:1rem;display:flex;align-items:center;justify-content:center;gap:.4rem}
.form-trust::before{content:'';display:inline-block;width:14px;height:14px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aaa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0110 0v4'/%3E%3C/svg%3E") no-repeat center/contain}

/* --- State Compatibility Tags --- */
.state-tags{display:flex;flex-wrap:wrap;gap:.35rem;margin:.5rem 0}
.state-tag{display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.06em;padding:.2rem .55rem;border-radius:4px;background:rgba(0,48,26,.06);color:var(--primary);border:1px solid rgba(0,48,26,.1)}
.state-tag.all{background:rgba(46,160,80,.08);color:#1e6b3a;border-color:rgba(46,160,80,.18)}

/* --- Product Filter Bar --- */
.product-filter{display:flex;flex-direction:column;gap:1rem;margin-bottom:2rem;padding:1.2rem 1.4rem;background:var(--light);border-radius:12px;border:1px solid #e5dfd0}
.filter-row{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem}
.filter-label{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--accent);min-width:70px}
.filter-btn{display:inline-block;padding:.35rem .85rem;border-radius:3px;border:1px solid #ddd6c4;background:#fff;font-size:.8rem;font-weight:500;color:var(--gray);cursor:pointer;transition:all .25s ease;font-family:inherit}
.filter-btn:hover{border-color:var(--accent);color:var(--primary)}
.filter-btn.active{background:var(--primary);border-color:var(--primary);color:#fff}
.filter-reset{padding:.35rem .85rem;border-radius:3px;border:1px solid transparent;background:none;font-size:.78rem;font-weight:600;color:var(--accent);cursor:pointer;font-family:inherit;transition:color .25s}
.filter-reset:hover{color:var(--primary)}
.product-card.hidden{display:none}

/* --- Download Modal --- */
.download-modal{position:fixed;inset:0;z-index:999;display:none;align-items:center;justify-content:center}
.download-modal.show{display:flex}
.modal-overlay{position:absolute;inset:0;background:rgba(0,0,0,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.modal-content{position:relative;background:#fff;border-radius:10px;padding:2.5rem 2rem;max-width:480px;width:92%;z-index:1;box-shadow:0 20px 60px rgba(0,0,0,.25)}
.modal-close{position:absolute;top:1rem;right:1rem;width:36px;height:36px;border:none;background:none;font-size:1.5rem;color:#999;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background .2s,color .2s}
.modal-close:hover{background:#f3efe4;color:var(--ink)}
.modal-content h3{font-size:1.3rem;color:var(--primary);margin-bottom:.5rem;font-weight:700}
.modal-content .modal-desc{font-size:.88rem;color:var(--gray);margin-bottom:1.5rem;line-height:1.6}
.modal-form{display:flex;flex-direction:column;gap:.9rem}
.modal-form input,.modal-form select{width:100%;padding:.8rem 1rem;border:1px solid #e0dacb;border-radius:4px;font-size:.9rem;font-family:inherit;color:var(--ink);background:#fdfbf6;transition:border-color .3s,box-shadow .3s;-webkit-appearance:none;appearance:none}
.modal-form input:focus,.modal-form select:focus{outline:none;border-color:var(--accent);background:#fff;box-shadow:0 0 0 3px rgba(243,112,29,.13)}
.modal-form select{background:#fdfbf6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 1rem center;padding-right:2.5rem;cursor:pointer}
.modal-form .btn{width:100%;text-align:center;padding:.85rem;font-size:.95rem}
.modal-status{font-size:.85rem;text-align:center;margin-top:.5rem;display:none}
.modal-status.show{display:block}
.modal-status.ok{color:#1e6b3a}
.modal-status.error{color:#a4342f}

/* --- Partners Section --- */
.partners{background:#fff;padding:4.5rem 0}
.partner-grid{display:grid;grid-template-columns:1fr;gap:1.3rem;margin-top:2.5rem}
.partner-card{background:var(--light);border:1px solid var(--line-soft);border-radius:8px;padding:2rem 1.5rem;transition:border-color .35s,transform .35s cubic-bezier(.22,1,.36,1)}
.partner-card:hover{border-color:rgba(243,112,29,.4);transform:translateY(-4px)}
.partner-card h3{font-size:1.05rem;color:var(--primary);margin-bottom:.5rem;font-weight:700}
.partner-card p{font-size:.85rem;color:var(--gray);line-height:1.7}
.partner-badge{display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.06em;padding:.2rem .6rem;border-radius:4px;background:rgba(243,112,29,.12);color:var(--accent);margin-bottom:.8rem}

/* --- Factory Section --- */
.factory{background:linear-gradient(180deg,#043520,#021a10);color:#fff;padding:4.5rem 0}
.factory-grid{display:grid;grid-template-columns:1fr;gap:1.3rem;margin-top:2.5rem}
.factory-card{position:relative;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.09);border-radius:14px;padding:2rem 1.7rem;transition:background .35s,border-color .35s,transform .35s cubic-bezier(.22,1,.36,1)}
.factory-card:hover{background:rgba(255,255,255,.08);border-color:rgba(243,112,29,.4);transform:translateY(-4px)}
.factory-icon{width:48px;height:48px;border-radius:12px;background:linear-gradient(135deg,rgba(243,112,29,.22),rgba(243,112,29,.08));border:1px solid rgba(243,112,29,.35);display:grid;place-items:center;margin-bottom:1.2rem;color:var(--accent)}
.factory-icon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.factory-card h3{font-size:1.05rem;color:#fff;margin-bottom:.5rem;font-weight:700}
.factory-card p{font-size:.85rem;color:rgba(255,255,255,.6);line-height:1.7}
/* --- Reduced Motion for new elements --- */
@media(prefers-reduced-motion:reduce){
    .scroll-indicator::after{animation:none;opacity:.5;transform:scaleY(1)}
    .back-to-top{transition:none}
    .contact-card{transition:none}
}

/* --- Product Detail — Reduced Motion --- */
@media(prefers-reduced-motion:reduce){
    .product-hero .container,
    .product-overview .reveal,
    .product-features .reveal,
    .product-includes .reveal,
    .product-gallery .reveal,
    .product-projects .reveal,
    .product-cta .reveal{opacity:1;transform:none;transition:none}
    .gallery-grid img:hover{transform:none}
    .feature-card:hover{transform:none}
}

/* --- Responsive: New Components --- */
@media(min-width:769px){
    .product-filter{flex-direction:row;align-items:center;gap:1.5rem}
    .partner-grid{grid-template-columns:repeat(2,1fr)}
    .factory-grid{grid-template-columns:repeat(2,1fr)}
    .modal-content{padding:2.5rem}
}
@media(min-width:1024px){
    .partner-grid{grid-template-columns:repeat(3,1fr)}
    .factory-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:768px){
    .partners,.factory{padding:3rem 0}
    .modal-content{padding:1.8rem 1.4rem;margin:1rem auto}
}
@media(max-width:480px){
    .product-filter{padding:1rem}
    .filter-row{gap:.4rem}
    .filter-btn{padding:.3rem .65rem;font-size:.75rem}
    .filter-label{min-width:auto;width:100%}
    .partner-grid,.factory-grid{grid-template-columns:1fr}
    /* The hero is left-aligned on every width now. The old centred layout
       stacked these two links under each other; keeping that rule here made
       the hero look broken at ≤480 (icons left, links centred and stacked). */
    .hero-links{gap:.4rem 1rem;font-size:.9rem}
}

/* The bar itself lives in .mobile-cta (markup, bottom of each page). There used
   to be a second, script-injected .sticky-cta on top of it: every content page
   rendered two fixed bars at the same coordinates, and the injected one won on
   z-index, so the labelled two-button bar was painted over by an unlabelled
   one. One system now — see the block at the end of this file. */

/* --- Thank-you / conversion confirmation page (#13) --- */
.thanks-wrap{min-height:72vh;display:flex;align-items:center;justify-content:center;padding:5.5rem 0 4rem;text-align:center}
.thanks-card{max-width:620px;margin:0 auto}
.thanks-check{width:82px;height:82px;border-radius:50%;background:linear-gradient(135deg,rgba(46,160,80,.18),rgba(46,160,80,.06));border:1.5px solid rgba(46,160,80,.5);display:grid;place-items:center;margin:0 auto 1.6rem;color:#2ea050}
.thanks-check svg{width:40px;height:40px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.thanks-card h1{font-size:2rem;color:var(--primary);margin-bottom:.8rem;line-height:1.25}
.thanks-card p.lead{font-size:1.05rem;color:#5f6b64;line-height:1.75;margin-bottom:.4rem}
.thanks-next{background:var(--light);border:1px solid #ece7dd;border-radius:16px;padding:1.4rem 1.6rem;margin:1.8rem 0;text-align:left}
.thanks-next h3{font-size:1rem;color:var(--primary);margin-bottom:.7rem}
.thanks-next ul{margin:0;padding-left:1.1rem;color:#5f6b64;font-size:.92rem;line-height:1.95}
.thanks-btns{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;margin-top:1.4rem}
.thanks-btns .btn{min-height:48px;display:inline-flex;align-items:center}

/* ============================================================
   Partner page (treezo.html) — strategic manufacturing partner
   ============================================================ */
/* CJK fallback for the partner brand name (Satoshi has no CJK glyphs) */
.zh{font-family:'Satoshi','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',sans-serif;font-weight:600}

.partner-hero{background-position:center 62%}
.partner-hero{padding:5rem 0 4rem}
.partner-hero h1{font-size:2.6rem;margin-bottom:.6rem}
.partner-hero .hero-sub{font-size:.8rem;letter-spacing:.18em}
.partner-org{display:inline-block;font-size:.82rem;font-weight:500;letter-spacing:.06em;color:rgba(255,255,255,.62);margin-bottom:1.1rem}
.partner-hero p{max-width:660px}
.partner-hero-btns{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center}
.partner-hero-btns .btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:.6rem 1.5rem;font-size:.9rem}
.btn-ghost{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:.6rem 1.5rem;border-radius:4px;border:1.5px solid rgba(255,255,255,.5);color:#fff;text-decoration:none;font-size:.9rem;font-weight:600;transition:background .3s,border-color .3s,transform .3s}
.btn-ghost:hover{background:rgba(255,255,255,.14);border-color:#fff;transform:translateY(-2px)}

/* --- Quick facts strip ------------------------------------------------
   Four numbers on one rule, left-aligned with hairline dividers. The old
   version centre-aligned them 2×2 and filled the figures with an orange
   gradient — gradient type is the single most reliable "template" tell on
   a builder site. Solid white, tabular, and the label carries the meaning. */
.partner-facts{background:var(--primary);color:#fff;padding:clamp(2.4rem,4vw,3.4rem) 0}
.facts-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.8rem 1.2rem}
.fact-num{display:block;font-size:clamp(1.7rem,2.4vw,2.1rem);font-weight:500;line-height:1;
    letter-spacing:-.03em;color:#fff;font-variant-numeric:tabular-nums}
.fact-label{display:block;font-size:.72rem;line-height:1.6;color:rgba(255,255,255,.62);
    margin-top:.7rem;max-width:23ch}
@media(min-width:769px){
    .facts-grid{grid-template-columns:repeat(4,1fr);gap:0}
    .facts-grid>div{padding:0 2rem;border-left:1px solid rgba(255,255,255,.13)}
    .facts-grid>div:first-child{padding-left:0;border-left:0}
    .facts-grid>div:last-child{padding-right:0}
}

/* --- Component spec table --- */
.spec-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:8px}
.spec-table{width:100%;border-collapse:collapse;font-size:.85rem;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 2px 10px rgba(0,48,26,.06);border:1px solid rgba(0,48,26,.07)}
.spec-table caption{caption-side:top;text-align:left;font-size:.78rem;color:#8a8a8a;font-style:italic;padding-bottom:.6rem}
.spec-table th{background:var(--primary);color:#fff;text-align:left;padding:.8rem 1rem;font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;line-height:1.4}
.spec-table td{padding:.8rem 1rem;border-bottom:1px solid rgba(0,48,26,.08);color:#3f4b45;vertical-align:top;line-height:1.65}
.spec-table tbody tr:last-child td{border-bottom:none}
.spec-table td:first-child{font-weight:700;color:var(--primary);white-space:nowrap}

/* --- Craft blocks (image + copy rows) --- */
.craft-stack{display:flex;flex-direction:column;gap:3.2rem}
.craft-block{display:grid;grid-template-columns:1fr;gap:1.5rem;align-items:center}
.craft-media{border-radius:10px;overflow:hidden;background:var(--sand);line-height:0}
.craft-media img{width:100%;height:auto;display:block}
/* Diagram plates are dark on purpose: the exploded renders are keyed to a
   transparent background and their white panels need a dark field to read
   against, exactly like the homepage "Our System" drawing. */
.craft-media.is-diagram{background:radial-gradient(ellipse at 50% 32%,#14291f 0%,#0a1310 72%);
    border:1px solid rgba(255,255,255,.07);padding:1.5rem;display:flex;align-items:center;justify-content:center;line-height:normal}
.craft-media.is-diagram img{width:auto;max-width:100%;max-height:430px}
.craft-body h3{font-size:1.3rem;font-weight:700;color:var(--primary);margin-bottom:.7rem;line-height:1.35}
.craft-body p{font-size:.93rem;color:var(--gray);line-height:1.8;margin-bottom:.9rem}
.craft-body>*:last-child{margin-bottom:0}
.craft-list{list-style:none;margin:0 0 .9rem}
.craft-list li{position:relative;padding:6px 0 6px 24px;font-size:.89rem;color:#3f4b45;line-height:1.65}
.craft-list li::before{content:'';position:absolute;left:0;top:13px;width:7px;height:7px;border-radius:2px;background:var(--accent)}
.craft-list li strong{color:var(--primary)}
.craft-caption{font-size:.76rem;color:#8a8a8a;font-style:italic;margin-top:.75rem;line-height:1.6}
.craft-note{background:var(--light);border-left:3px solid var(--accent);border-radius:0 10px 10px 0;padding:1.1rem 1.3rem;font-size:.88rem;color:#555;line-height:1.75}
.craft-note strong{color:var(--primary)}

/* --- Partnership model --- */
.partner-model{display:grid;grid-template-columns:1fr;gap:22px}
.model-card{background:#fff;border-radius:8px;padding:30px 26px;border-top:3px solid var(--accent);box-shadow:0 2px 10px rgba(0,48,26,.05);display:flex;flex-direction:column}
.model-role{display:block;font-size:.68rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#c95a12;margin-bottom:.55rem}
.model-card h3{font-size:1.15rem;font-weight:700;color:var(--primary);margin-bottom:.6rem;line-height:1.35}
.model-card p{font-size:.88rem;color:var(--gray);line-height:1.75}

/* --- Partner page — tablet / desktop --- */
@media(min-width:769px){
    .partner-hero{padding:5.5rem 0 4.5rem}
    .partner-hero h1{font-size:3rem}
    .facts-grid{grid-template-columns:repeat(4,1fr);gap:1.2rem}
    .fact-num{font-size:2rem}
    .craft-block{grid-template-columns:1fr 1fr;gap:2.8rem}
    .craft-block.reverse .craft-media{order:2}
    .craft-block.reverse .craft-body{order:1}
    .partner-model{grid-template-columns:repeat(3,1fr)}
}
/* Phones: the 4-column spec table is wider than the viewport — let it scroll
   inside .spec-scroll instead of squeezing every cell into ~70px. */
@media(max-width:768px){
    .spec-table{min-width:560px}
}
@media(max-width:480px){
    .partner-hero h1{font-size:2rem}
    .fact-num{font-size:1.5rem}
    .spec-table{font-size:.8rem;min-width:560px}
    .spec-table th,.spec-table td{padding:.65rem .7rem}
    .spec-table td:first-child{white-space:normal}
    .craft-media.is-diagram{padding:.9rem}
}

/* --- Homepage: strategic partner band (sits between "Our System" and "Our Process") --- */
.partner-band{background:#fff;padding:clamp(3.8rem,6vw,5.4rem) 0}
.partner-band-grid{display:grid;grid-template-columns:1fr;gap:1.8rem;align-items:center;max-width:1040px;margin:0 auto}
.partner-band-media{border-radius:10px;overflow:hidden;background:var(--sand);line-height:0;box-shadow:0 18px 44px rgba(0,48,26,.14)}
.partner-band-media img{width:100%;height:auto;display:block}
.partner-band-body h2{font-size:clamp(1.75rem,2.9vw,2.3rem);color:var(--primary);line-height:1.24;letter-spacing:-.02em;margin-bottom:.9rem}
.partner-band-body p{font-size:.95rem;color:var(--gray);line-height:1.8;margin-bottom:.9rem}
.partner-band-points{list-style:none;margin:0 0 1.2rem}
.partner-band-points li{position:relative;padding:5px 0 5px 24px;font-size:.9rem;color:#3f4b45;line-height:1.65}
.partner-band-points li::before{content:'';position:absolute;left:0;top:12px;width:7px;height:7px;border-radius:2px;background:var(--accent)}
.partner-band-points li strong{color:var(--primary)}
/* Deliberately NOT .prod-link: that class carries a stretched ::after
   (inset:-9999px) meant for cards with overflow:hidden, which would smear an
   invisible click target across the whole band here. */
.partner-band-link{display:inline-flex;align-items:center;gap:.45rem;color:var(--primary);font-size:.9rem;font-weight:700;text-decoration:none;transition:color .3s ease,gap .3s ease}
.partner-band-link:hover{color:var(--accent);gap:.75rem}
@media(min-width:769px){
    .partner-band{padding:5rem 0}
    .partner-band-grid{grid-template-columns:1.05fr 1fr;gap:3.2rem}
    /* h2 comes from the fluid clamp on the base rule */
}
@media(max-width:480px){
    .partner-band-body h2{font-size:1.4rem}
}

/* ============================================================
   Selections page — colour boards + supply wall
   (selections.html; the page's earlier blocks reuse .partner-* /.product-*)
   ============================================================ */

/* --- Selections page: editorial heads --------------------------------
   Every block on this page is left-aligned (schedule rows, spec strips,
   sample captions), so a centred intro above them is the one thing that
   still read as a brochure. Scoped to <body class="is-selections">. */
.is-selections .sec-title{text-align:left;padding:0;margin-bottom:2.4rem}
.is-selections .sec-title p{max-width:62ch;margin:0}
.is-selections .wall-head{text-align:left;margin:0 0 2.4rem;max-width:62ch}

/* the hero shares that edge too — a centred hero above left-aligned rows is
   what makes a long page feel assembled from two different sites */
.is-selections .partner-hero{text-align:left}
.is-selections .partner-hero h1{max-width:24ch}
.is-selections .partner-hero p{margin-left:0;margin-right:0;max-width:58ch}
.is-selections .partner-hero .partner-hero-btns{justify-content:flex-start}

/* the spec list used a 3px orange quote-bar; hairlines and a label column read
   as a schedule instead of a pull-quote */
.is-selections .overview-specs{border-left:0;padding-left:0;border-top:1px solid var(--line)}
.is-selections .overview-specs li{display:grid;grid-template-columns:9.5rem 1fr;gap:.5rem 1.2rem;
    align-items:baseline;margin:0;padding:.75rem 0;border-bottom:1px solid var(--line-soft);
    font-size:.85rem;line-height:1.65}
.is-selections .overview-specs li strong{font-size:.57rem;font-weight:700;letter-spacing:.16em;
    text-transform:uppercase;color:#a89a86;padding-top:.2rem}
@media(max-width:640px){
    .is-selections .overview-specs li{grid-template-columns:1fr;gap:.15rem}
    .is-selections .overview-specs li strong{padding-top:0}
}

/* --- Ranges: a schedule, not a card grid --------------------------------
   Eight ranges used to be eight icon cards, which is the language of a SaaS
   feature list — and with three per row the last row ran 3/3/2. A building
   professional reads a schedule: numbered rows, hairline rules, the term on
   its own column. Same content, half the visual noise, and it matches what
   the page actually argues (selections are a manufacturing input). */
.range-schedule{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.range-row{display:grid;grid-template-columns:2.2rem 1fr;gap:.15rem .9rem;
    padding:1.25rem 0 1.35rem;border-bottom:1px solid var(--line-soft);align-items:baseline}
.range-no{font-size:.6rem;font-weight:700;letter-spacing:.14em;color:#b9a98f;
    font-variant-numeric:tabular-nums;line-height:1.9}
.range-row h3{font-size:1.02rem;font-weight:700;color:var(--primary);
    letter-spacing:-.005em;margin:0 0 .3rem;line-height:1.3}
.range-row p{grid-column:2;font-size:.87rem;color:var(--gray);line-height:1.75;margin:0;max-width:64ch}
/* A normal inline link — .prod-link carries a full-bleed ::after hit area that
   only works inside an overflow:hidden card, so it cannot be reused here. */
.range-link{color:var(--accent-deep);font-weight:600;text-decoration:none;
    border-bottom:1px solid rgba(243,112,29,.4);transition:color .25s,border-color .25s;white-space:nowrap}
.range-link:hover{color:#a84a0d;border-color:currentColor}
@media(min-width:769px){
    .range-row{grid-template-columns:2.4rem 15rem 1fr;gap:0 1.6rem;padding:1.5rem 0 1.6rem}
    .range-row h3{font-size:1.06rem;margin:0}
    .range-row p{grid-column:3}
}

/* --- Process: four steps on one rule ---------------------------------- */
.sel-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:0}
.sel-step{padding:1.2rem 0 1.4rem;border-top:1px solid var(--line)}
.sel-step .step-no{display:block;font-size:.6rem;font-weight:700;letter-spacing:.2em;
    color:var(--accent-deep);margin-bottom:.7rem;font-variant-numeric:tabular-nums}
.sel-step h3{font-size:1.02rem;font-weight:700;color:var(--primary);margin-bottom:.35rem;line-height:1.3}
.sel-step p{font-size:.85rem;color:var(--gray);line-height:1.72;max-width:38ch}
@media(min-width:769px){
    .sel-steps{grid-template-columns:repeat(4,1fr);gap:0 2.4rem}
}

/* --- Styles & products ------------------------------------------------
   A look is a product set, not a colour board. Every image is the
   manufacturer's own product photograph: three objects (sink, mixer,
   sanitaryware) on white, then two material samples cut from the board and
   the slab. Materials sit first because they set the tone; the fittings
   follow as evidence. Tiles are paper-toned with no border, so the section
   reads as a printed sample book rather than a grid of cards. */
.looks{display:flex;flex-direction:column;gap:0}
.look{display:grid;grid-template-columns:1fr;gap:1.5rem;
    padding:2.6rem 0;border-top:1px solid var(--line)}
.look:first-child{border-top:0;padding-top:.2rem}
.look-head{position:relative}
.look-no{display:block;font-size:.58rem;font-weight:700;letter-spacing:.24em;
    text-transform:uppercase;color:#b9a98f;margin-bottom:.75rem;font-variant-numeric:tabular-nums}
.look-head h3{font-size:1.55rem;font-weight:500;color:var(--primary);
    line-height:1.15;letter-spacing:-.022em;margin-bottom:.55rem}
.look-head p{font-size:.85rem;color:var(--gray);line-height:1.75;max-width:34ch}

/* finish key — a spec strip, label above value, hairline above the block */
.look-key{display:flex;flex-direction:column;gap:0;margin:1.4rem 0 0;
    padding:.85rem 0 0;border-top:1px solid var(--line-soft)}
.look-key div{display:flex;justify-content:space-between;align-items:baseline;
    gap:1rem;padding:.28rem 0}
.look-key dt{font-size:.55rem;font-weight:700;letter-spacing:.16em;
    text-transform:uppercase;color:#a89a86}
.look-key dd{margin:0;font-size:.77rem;color:#3f4b45;line-height:1.5;text-align:right}
/* a 11px chip before each finish — a sample book marks the colour, it does
   not only name it. Pure CSS: two stops and an inset hairline, no images. */
.look-key .chip{display:inline-block;width:11px;height:11px;border-radius:2px;margin-right:.5rem;
    vertical-align:-1px;background:linear-gradient(135deg,var(--c1),var(--c2));
    box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}

.look-matrix{display:flex;flex-direction:column;gap:1.3rem}
.look-products,.look-samples{display:grid;grid-auto-flow:column;gap:10px;
    overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    padding-bottom:.4rem;margin:0 -10px;padding-left:10px;padding-right:10px}
.look-samples{order:-1}
.look-products{grid-auto-columns:66%}
.look-samples{grid-auto-columns:59%}
.look-products::-webkit-scrollbar,.look-samples::-webkit-scrollbar{height:3px}
.look-products::-webkit-scrollbar-thumb,.look-samples::-webkit-scrollbar-thumb{background:rgba(0,48,26,.18);border-radius:3px}

.prod{margin:0;scroll-snap-align:start}
.prod-media{background:var(--paper);border-radius:3px;overflow:hidden;line-height:0}
.prod-media.is-object{background:#fff}
.prod-media img{width:100%;display:block;object-fit:cover;transition:transform .6s cubic-bezier(.22,1,.36,1)}
.prod-media.is-object img{aspect-ratio:1/1;object-fit:contain}
.prod-media.is-sample img{aspect-ratio:4/3}
.prod:hover .prod-media img{transform:scale(1.025)}
.prod figcaption{display:flex;flex-direction:column;padding:.72rem 0 0}
.prod-role{font-size:.55rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
    color:#a89a86;margin-bottom:.32rem}
.prod-name{font-size:.9rem;font-weight:600;color:var(--primary);line-height:1.35}
.prod-spec{font-size:.72rem;color:#7d8a83;line-height:1.55;margin-top:.16rem}
.prod-brand{font-size:.58rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
    color:#0d5a37;margin-top:.5rem}
.looks-note{max-width:640px;margin:2.4rem auto 0;font-size:.75rem;color:#8d8579;line-height:1.8;text-align:center;font-style:italic}

/* Below 900 the caption column would squeeze three 140px cards, so the look
   stays stacked and the cards scroll instead. */
@media(min-width:900px){
    .look{grid-template-columns:236px 1fr;gap:2.4rem;align-items:start;padding:3rem 0}
    .look-head h3{font-size:1.7rem}
    .look-products{grid-auto-flow:row;grid-template-columns:repeat(3,1fr);overflow:visible;
        padding:0;margin:0;gap:14px}
    .look-samples{grid-auto-flow:row;grid-template-columns:repeat(2,1fr);overflow:visible;
        padding:0;margin:0;gap:14px}
}
@media(min-width:1024px){
    .look{grid-template-columns:264px 1fr;gap:3rem}
    .look-products,.look-samples{gap:18px}
    .look-head h3{font-size:1.85rem}
}

/* --- Brand wall -------------------------------------------------------
   Deliberately not cards. The wall reads as a logo strip: one monochrome
   treatment for every mark, colour only on hover, so no single brand
   outshouts the others while most are still un-signed. */
.brand-wall{background:#fff;padding:clamp(56px,6vw,88px) 0 clamp(48px,5vw,72px)}
.wall-head{max-width:640px;margin:0 auto 2.4rem;text-align:center}
.wall-head h2{font-size:clamp(1.75rem,2.7vw,2.15rem);font-weight:600;color:var(--primary);line-height:1.26;letter-spacing:-.02em;margin:.5rem 0 .9rem}
.wall-head p{font-size:.9rem;color:var(--gray);line-height:1.8}

.logo-wall{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);
    border-top:1px solid rgba(0,48,26,.07);border-left:1px solid rgba(0,48,26,.07)}
.logo-tile{position:relative;display:flex;align-items:center;justify-content:center;
    min-height:104px;padding:1.3rem .9rem;
    border-right:1px solid rgba(0,48,26,.07);border-bottom:1px solid rgba(0,48,26,.07)}
/* Real brand assets. Optical size is capped by height, not width, so a wide
   wordmark (Haier) and a stacked lockup (Dongpeng) read at the same weight. */
.lg{display:flex;align-items:center;justify-content:center;height:34px;text-decoration:none}
.lg img{height:100%;width:auto;max-width:152px;object-fit:contain;
    filter:grayscale(1);opacity:.52;
    transition:filter .35s ease,opacity .35s ease,transform .35s cubic-bezier(.22,1,.36,1)}
.logo-tile:hover .lg img,.logo-tile:focus-within .lg img{filter:grayscale(0);opacity:1;transform:translateY(-2px)}
.wall-note{max-width:700px;margin:2.6rem auto 0;padding-top:1.6rem;border-top:1px solid rgba(0,48,26,.09);
    font-size:.76rem;color:#909090;line-height:1.8;text-align:center}

@media(min-width:560px){ .logo-wall{grid-template-columns:repeat(3,1fr)} }
@media(min-width:769px){
    .brand-wall{padding:82px 0 72px}
    /* h2 comes from the fluid clamp on the base rule */
    .wall-head p{font-size:.94rem}
    .logo-wall{grid-template-columns:repeat(4,1fr)}
    .logo-tile{min-height:116px}
    .palette-grid{grid-template-columns:repeat(2,1fr);gap:24px}
}
@media(min-width:1024px){
    .logo-tile{min-height:118px}
    .palette-grid{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:480px){
    .wall-head h2{font-size:1.45rem}
    .logo-tile{min-height:88px;padding:.9rem .5rem 1.35rem}
    .lg{height:26px}
    .lg img{max-width:104px}
}

/* ============================================================
   Mobile sticky CTA
   Desktop conversion happens from the header; on a phone the header
   CTA is gone and the inquiry form is three screens down, so the bar
   is the only always-reachable action. Hidden while the drawer is open
   (it would sit on top of the menu) and while the form itself is on
   screen — otherwise it covers the fields it points at.
   ============================================================ */
.mobile-cta{display:none}
@media(max-width:768px){
    .mobile-cta{position:fixed;left:0;right:0;bottom:0;z-index:90;display:grid;grid-template-columns:1.35fr 1fr;gap:.5rem;
        padding:.55rem .7rem calc(.55rem + env(safe-area-inset-bottom));
        background:rgba(250,246,238,.95);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
        border-top:1px solid rgba(0,48,26,.12);box-shadow:0 -8px 26px rgba(0,48,26,.12);
        transform:translateY(115%);transition:transform .4s cubic-bezier(.22,1,.36,1);will-change:transform}
    .mobile-cta.show{transform:translateY(0)}
    body.nav-open .mobile-cta{transform:translateY(115%)}
    .mobile-cta-btn{display:flex;align-items:center;justify-content:center;gap:.4rem;min-height:46px;border-radius:4px;
        font-family:inherit;font-size:.92rem;font-weight:700;letter-spacing:.01em;text-decoration:none;
        border:1px solid transparent;cursor:pointer;transition:transform .2s,box-shadow .25s,background .25s}
    .mobile-cta-btn:active{transform:scale(.985)}
    .mobile-cta-btn.is-primary{background:var(--accent);color:#fff;box-shadow:0 1px 2px rgba(0,48,26,.18)}
    .mobile-cta-btn.is-ghost{background:#fff;color:var(--primary);border-color:rgba(0,48,26,.2)}
    .mobile-cta-btn:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
    /* keep the last screen of content reachable under a fixed bar */
    footer{padding-bottom:calc(70px + env(safe-area-inset-bottom))}
    .back-to-top{bottom:calc(74px + env(safe-area-inset-bottom));right:1rem;width:42px;height:42px}
}