/* ============================================================
   SAGUARO CONTRACT SUPPLY
   Core stylesheet
   ============================================================ */

/* ---------- Tokens ---------- */
:root{
  --ink:        #0B0B0A;
  --ink-2:      #15140F;
  --ink-3:      #1F1D18;
  --espresso:   #4A3B32;
  --espresso-d: #2E251F;
  --brass:      #B08D57;
  --brass-l:    #CBA974;
  --sage:       #5F6F52;
  --cream:      #F5F1E8;
  --cream-2:    #EAE3D6;
  --paper:      #FBF9F4;

  --fg-dark:    #0B0B0A;
  --fg-light:   #F5F1E8;

  --maxw: 1560px;
  --gut: clamp(20px, 5vw, 88px);

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  --nav-h: 76px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--fg-dark);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
ul{margin:0;padding:0;list-style:none}
::selection{background:var(--brass);color:#fff}

/* ---------- Type ---------- */
.display,h1,h2,h3,.h{
  font-family:'Archivo','Inter',sans-serif;
  font-weight:700;
  letter-spacing:-.03em;
  line-height:.95;
  text-wrap:balance;
}
.d1{font-size:clamp(2.75rem,8.2vw,7.6rem)}
.d2{font-size:clamp(2.25rem,5.6vw,5.1rem)}
.d3{font-size:clamp(1.75rem,3.4vw,3.1rem);line-height:1.02}
.d4{font-size:clamp(1.3rem,2vw,1.85rem);line-height:1.1;letter-spacing:-.02em}

.eyebrow{
  font-family:'Archivo',sans-serif;
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--brass);
  display:flex;align-items:center;gap:14px;
}
.eyebrow::before{
  content:"";width:34px;height:1px;background:currentColor;opacity:.7;flex:none;
}
.eyebrow.no-rule::before{display:none}

.lead{font-size:clamp(1.05rem,1.35vw,1.3rem);line-height:1.55;opacity:.78;max-width:56ch}
.body-lg{font-size:1.075rem;line-height:1.68;opacity:.75;max-width:62ch}
.small{font-size:.83rem;letter-spacing:.02em;opacity:.6}
.serif{font-family:'Fraunces','Georgia',serif;font-weight:400;font-style:italic}
.num{font-family:'Archivo',sans-serif;font-weight:700;letter-spacing:-.04em;font-variant-numeric:tabular-nums}

/* ---------- Layout ---------- */
[id]{scroll-margin-top:calc(var(--nav-h) + 24px)}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.section{padding-block:clamp(84px,11vw,180px)}
.section-sm{padding-block:clamp(56px,7vw,110px)}
.grid{display:grid;gap:clamp(28px,4vw,72px)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.center{text-align:center}
.center .eyebrow{justify-content:center}
.center .lead{margin-inline:auto}

/* Theme blocks */
.dark{background:var(--ink);color:var(--fg-light)}
.dark .lead,.dark .body-lg{opacity:.66}
.espresso{background:var(--espresso-d);color:var(--fg-light)}
.cream{background:var(--cream)}
.paper{background:var(--paper)}
.rule{height:1px;background:currentColor;opacity:.14;border:0;margin:0}

/* ---------- Nav ---------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:1000;height:var(--nav-h);
  display:flex;align-items:center;
  transition:background .45s var(--ease), backdrop-filter .45s var(--ease), border-color .45s var(--ease), transform .5s var(--ease);
  border-bottom:1px solid transparent;
}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;width:100%;gap:24px}
.nav-logo img{height:56px;width:auto;transition:opacity .4s var(--ease)}
@media (max-width:620px){.nav-logo img{height:44px}}
.nav-logo .lg-cream{position:absolute;top:0;left:0}
.nav-logo{position:relative;display:block;flex:none;line-height:0}
.nav-links{display:flex;align-items:center;gap:clamp(18px,2.6vw,40px)}
.nav-links a{
  font-family:'Archivo',sans-serif;font-size:.76rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  position:relative;padding-block:6px;white-space:nowrap;
}
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .45s var(--ease-out);
}
.nav-links a:hover::after,.nav-links a[aria-current]::after{transform:scaleX(1);transform-origin:left}
.nav-cta{display:flex;align-items:center;gap:14px;flex:none}

/* nav colour states */
.nav[data-theme="light"]{color:var(--cream)}
.nav[data-theme="light"] .lg-brown{opacity:0}
.nav[data-theme="light"] .lg-cream{opacity:1}
.nav[data-theme="dark"]{color:var(--ink)}
.nav[data-theme="dark"] .lg-brown{opacity:1}
.nav[data-theme="dark"] .lg-cream{opacity:0}
.nav.scrolled{
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(18px) saturate(1.3);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);
  border-bottom-color:rgba(0,0,0,.09);
  color:var(--ink);
}
.nav.scrolled .lg-brown{opacity:1}
.nav.scrolled .lg-cream{opacity:0}
.nav.hidden{transform:translateY(-102%)}

/* ---------- Buttons ---------- */
.btn{
  --bg:var(--ink);--fg:var(--cream);--bd:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:13px 26px;border-radius:999px;
  background:var(--bg);color:var(--fg);border:1px solid var(--bd);
  font-family:'Archivo',sans-serif;font-size:.74rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease);
}
.btn:hover{transform:translateY(-2px)}
/* ghost: transparent until hover, then inverts against its surface */
.btn-ghost{--bg:transparent;--fg:currentColor;--bd:currentColor}
.btn-ghost:hover{--bg:var(--ink);--fg:var(--cream);--bd:var(--ink)}
.hero .btn-ghost:hover,.phero .btn-ghost:hover,.cta .btn-ghost:hover,
.dark .btn-ghost:hover,.espresso .btn-ghost:hover,.nav .btn-ghost:hover{
  --bg:var(--cream);--fg:var(--ink);--bd:var(--cream);
}
.nav.scrolled .btn-ghost:hover{--bg:var(--ink);--fg:var(--cream);--bd:var(--ink)}
.btn-brass{--bg:var(--brass);--fg:#1a1409;--bd:var(--brass)}
.btn-brass:hover{--bg:var(--brass-l);--bd:var(--brass-l)}
.btn-light{--bg:var(--cream);--fg:var(--ink);--bd:var(--cream)}
.btn-sm{padding:10px 20px;font-size:.68rem}

.link-arrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'Archivo',sans-serif;font-size:.75rem;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;
  padding-bottom:4px;border-bottom:1px solid currentColor;
  transition:gap .35s var(--ease),opacity .3s;
}
.link-arrow:hover{gap:18px}
.link-arrow svg{width:14px;height:14px;flex:none}

/* ---------- Hero ---------- */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:flex-end;
  color:var(--cream);overflow:hidden;isolation:isolate;
}
.hero-media{position:absolute;inset:0;z-index:-2}
.hero-media video,.hero-media img{width:100%;height:100%;object-fit:cover}
.hero-media::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(8,8,7,.62) 0%,rgba(8,8,7,.12) 34%,rgba(8,8,7,.30) 62%,rgba(8,8,7,.86) 100%);
}
.hero-inner{width:100%;padding-bottom:clamp(56px,8vh,110px);padding-top:calc(var(--nav-h) + 40px)}
.hero h1{margin-block:22px 26px;max-width:16ch}
.hero-foot{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:32px;margin-top:clamp(32px,5vh,58px);
}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px}
.scroll-cue{
  display:flex;align-items:center;gap:12px;
  font-family:'Archivo',sans-serif;font-size:.66rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;opacity:.72;
}
.scroll-cue i{
  width:1px;height:44px;background:currentColor;display:block;position:relative;overflow:hidden;
}
.scroll-cue i::after{
  content:"";position:absolute;inset:0;background:var(--brass);
  animation:cue 2.4s var(--ease) infinite;
}
@keyframes cue{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

/* page hero (interior pages) */
.phero{
  position:relative;min-height:clamp(520px,74svh,760px);display:flex;align-items:flex-end;
  color:var(--cream);overflow:hidden;isolation:isolate;
}
.phero-media{position:absolute;inset:0;z-index:-2}
.phero-media img{width:100%;height:100%;object-fit:cover;transform:scale(1.06)}
.phero-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,8,7,.66) 0%,rgba(8,8,7,.20) 40%,rgba(8,8,7,.78) 100%);
}
.phero-inner{width:100%;padding-block:clamp(48px,7vh,92px)}
.phero h1{margin-block:20px 22px;max-width:18ch}

/* ---------- Reveal ---------- */
[data-reveal]{
  opacity:0;transform:translateY(28px);
  transition:opacity 1s var(--ease-out),transform 1.1s var(--ease-out);
  transition-delay:var(--d,0ms);
}
[data-reveal].in{opacity:1;transform:none}
[data-reveal="fade"]{transform:none}
[data-reveal="mask"]{
  clip-path:inset(0 0 100% 0);opacity:1;transform:none;
  transition:clip-path 1.15s var(--ease-out);
}
[data-reveal="mask"].in{clip-path:inset(0 0 0 0)}
[data-reveal="scale"] img{transform:scale(1.14);transition:transform 1.5s var(--ease-out)}
[data-reveal="scale"].in img{transform:scale(1)}
@media (prefers-reduced-motion:reduce){
  [data-reveal],[data-reveal="mask"],[data-reveal="scale"] img{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* ---------- Statement band ---------- */
.statement{
  padding-block:clamp(96px,14vw,220px);
}
.statement .d2{max-width:19ch}
.statement-grid{
  display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,6vw,96px);align-items:end;
}

/* ---------- Feature / split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(32px,6vw,90px)}
.split-media{position:relative;overflow:hidden;border-radius:2px}
.split-media img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.split.tall .split-media img{aspect-ratio:3/4}
.split-body{max-width:52ch}
.split-body .d3{margin-block:20px 22px}

/* ---------- Full-bleed media ---------- */
.bleed{position:relative;overflow:hidden;height:clamp(420px,72svh,780px)}
.bleed img{width:100%;height:100%;object-fit:cover}
.bleed-cap{
  position:absolute;inset:auto 0 0 0;padding:var(--gut);color:var(--cream);
  background:linear-gradient(180deg,transparent,rgba(8,8,7,.78));
}
.bleed.parallax img{height:118%;position:relative;top:-9%;will-change:transform}

/* ---------- Feature icons row ---------- */
.perf{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(18px,2.6vw,40px)}
.perf-item{padding-top:22px;border-top:1px solid currentColor;border-color:color-mix(in srgb,currentColor 22%,transparent)}
.perf-item svg{width:30px;height:30px;stroke:var(--brass);fill:none;stroke-width:1.35;margin-bottom:16px}
.perf-item h4{font-family:'Archivo',sans-serif;font-size:.86rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;line-height:1.3;margin-bottom:8px}
.perf-item p{font-size:.86rem;line-height:1.55;opacity:.62;margin:0}

/* ---------- Stats ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,48px)}
.stat{padding-top:24px;border-top:1px solid color-mix(in srgb,currentColor 22%,transparent)}
.stat .num{display:block;font-size:clamp(2.1rem,3.7vw,3.5rem);line-height:1;margin-bottom:10px}
.stat p{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;opacity:.6;font-family:'Archivo',sans-serif;font-weight:500}

/* ---------- Audience cards ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.card{
  position:relative;overflow:hidden;min-height:clamp(400px,52vw,560px);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(24px,2.6vw,40px);color:var(--cream);isolation:isolate;
}
.card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1.4s var(--ease-out)}
.card::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(8,8,7,.18) 0%,rgba(8,8,7,.30) 45%,rgba(8,8,7,.88) 100%);
  transition:background .6s var(--ease);
}
.card:hover img{transform:scale(1.06)}
.card:hover::after{background:linear-gradient(180deg,rgba(8,8,7,.24) 0%,rgba(8,8,7,.40) 45%,rgba(8,8,7,.92) 100%)}
.card h3{font-size:clamp(1.5rem,2.1vw,2.05rem);margin-bottom:12px}
.card p{font-size:.94rem;line-height:1.55;opacity:.8;margin-bottom:22px;max-width:34ch}

/* ---------- Colour selector (Products) ---------- */
.selector{position:relative}
.sel-stage{position:relative;height:clamp(440px,74svh,820px);overflow:hidden;background:var(--ink)}
.sel-stage figure{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 1.05s var(--ease-out)}
.sel-stage figure.on{opacity:1}
.sel-stage img{width:100%;height:100%;object-fit:cover;transform:scale(1.05);transition:transform 8s linear}
.sel-stage figure.on img{transform:scale(1)}
.sel-stage::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,8,7,.42) 0%,transparent 30%,transparent 52%,rgba(8,8,7,.80) 100%);
}
.sel-overlay{
  position:absolute;inset:auto 0 0 0;z-index:2;color:var(--cream);
  padding:var(--gut);display:flex;flex-wrap:wrap;gap:32px;align-items:flex-end;justify-content:space-between;
}
.sel-name{display:flex;align-items:baseline;gap:18px}
.sel-name .d2{line-height:.9}
.sel-code{font-family:'Archivo',sans-serif;font-size:.8rem;font-weight:600;letter-spacing:.2em;opacity:.7}
.sel-swatches{display:flex;gap:clamp(12px,1.6vw,26px)}
.sw{
  position:relative;width:clamp(64px,7.4vw,104px);text-align:center;
  opacity:.55;transition:opacity .4s var(--ease),transform .4s var(--ease);
}
.sw:hover{opacity:.85}
.sw[aria-selected="true"]{opacity:1}
.sw span.ring{
  display:block;width:100%;aspect-ratio:1;border-radius:50%;overflow:hidden;
  border:1px solid rgba(245,241,232,.32);position:relative;
  transition:border-color .4s var(--ease),transform .5s var(--ease);
}
.sw[aria-selected="true"] span.ring{border-color:var(--brass);transform:scale(1.06)}
.sw span.ring img{width:100%;height:100%;object-fit:cover}
.sw em{
  display:block;margin-top:12px;font-style:normal;
  font-family:'Archivo',sans-serif;font-size:.68rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
}

/* ---------- Spec table ---------- */
.spec{width:100%;border-collapse:collapse;font-size:.95rem}
.spec caption{text-align:left;padding-bottom:22px}
.spec th,.spec td{
  padding:16px 18px;text-align:left;vertical-align:top;
  border-bottom:1px solid color-mix(in srgb,currentColor 14%,transparent);
}
.spec thead th{
  font-family:'Archivo',sans-serif;font-size:.72rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  border-bottom:1px solid color-mix(in srgb,currentColor 34%,transparent);
  padding-bottom:14px;
}
.spec thead th:first-child{color:color-mix(in srgb,currentColor 55%,transparent)}
.spec tbody th{
  font-weight:400;font-size:.88rem;opacity:.58;width:32%;
  font-family:'Inter',sans-serif;letter-spacing:.01em;
}
.spec td{font-weight:500}
.spec tbody tr:hover td,.spec tbody tr:hover th{background:color-mix(in srgb,currentColor 4%,transparent)}
.spec .brasscell{color:var(--brass)}

/* ---------- Diagram ---------- */
.diagram{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,6vw,90px);align-items:center}
.diagram img{width:100%;height:auto}
.layerlist li{
  display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:baseline;
  padding:18px 0;border-bottom:1px solid color-mix(in srgb,currentColor 14%,transparent);
}
.layerlist b{font-family:'Archivo',sans-serif;font-size:.72rem;letter-spacing:.16em;color:var(--brass);font-weight:600}
.layerlist h4{font-family:'Archivo',sans-serif;font-size:1rem;font-weight:600;letter-spacing:-.01em;margin-bottom:5px}
.layerlist p{font-size:.9rem;opacity:.62;margin:0;line-height:1.5}

/* ---------- Marquee ---------- */
.marquee{overflow:hidden;padding-block:clamp(28px,3.4vw,54px);border-block:1px solid color-mix(in srgb,currentColor 16%,transparent)}
.marquee-track{display:flex;gap:64px;width:max-content;animation:slide 42s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee span{
  font-family:'Archivo',sans-serif;font-weight:700;letter-spacing:-.02em;
  font-size:clamp(1.5rem,3.1vw,2.9rem);white-space:nowrap;display:flex;align-items:center;gap:64px;
}
.marquee span::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--brass);flex:none}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- Process / numbered steps ---------- */
.steps{counter-reset:s;display:grid;gap:0}
.step{
  counter-increment:s;display:grid;grid-template-columns:96px 1fr;gap:clamp(20px,3vw,54px);
  padding-block:clamp(30px,4vw,52px);
  border-top:1px solid color-mix(in srgb,currentColor 16%,transparent);
  align-items:start;
}
.step:last-child{border-bottom:1px solid color-mix(in srgb,currentColor 16%,transparent)}
.step::before{
  content:"0" counter(s);
  font-family:'Archivo',sans-serif;font-weight:700;font-size:1rem;letter-spacing:.06em;color:var(--brass);
  padding-top:6px;
}
.step-body{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(16px,3vw,48px);align-items:start}
.step h3{font-size:clamp(1.3rem,2.1vw,2rem)}
.step p{margin:0;opacity:.66;line-height:1.62;font-size:1rem}

/* ---------- Value list ---------- */
.values{display:grid;grid-template-columns:repeat(2,1fr);gap:2px}
.value{
  padding:clamp(28px,3.4vw,52px);
  background:color-mix(in srgb,currentColor 4%,transparent);
  transition:background .5s var(--ease);
}
.value:hover{background:color-mix(in srgb,currentColor 8%,transparent)}
.value svg{width:28px;height:28px;stroke:var(--brass);fill:none;stroke-width:1.35;margin-bottom:20px}
.value h4{font-family:'Archivo',sans-serif;font-size:1.05rem;font-weight:600;letter-spacing:-.01em;margin-bottom:10px}
.value p{margin:0;font-size:.94rem;line-height:1.6;opacity:.65}

/* ---------- CTA band ---------- */
.cta{
  position:relative;overflow:hidden;isolation:isolate;color:var(--cream);
  padding-block:clamp(90px,12vw,180px);
}
.cta img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.cta::after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(8,8,7,.66)}
.cta .d2{max-width:16ch;margin-block:20px 26px}

/* ---------- Form ---------- */
.form{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.field{display:flex;flex-direction:column;gap:9px}
.field.full{grid-column:1/-1}
.field label{
  font-family:'Archivo',sans-serif;font-size:.68rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;opacity:.6;
}
.field input,.field select,.field textarea{
  font:inherit;font-size:.98rem;color:inherit;background:transparent;
  border:0;border-bottom:1px solid color-mix(in srgb,currentColor 26%,transparent);
  padding:11px 2px;border-radius:0;transition:border-color .35s var(--ease);
}
.field textarea{resize:vertical;min-height:104px}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-bottom-color:var(--brass)}
.field select option{color:#111}

/* ---------- Footer ---------- */
.footer{background:var(--ink);color:var(--cream);padding-top:clamp(64px,7vw,110px)}
.footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:clamp(28px,4vw,64px);padding-bottom:clamp(48px,6vw,86px)}
.footer h5{
  font-family:'Archivo',sans-serif;font-size:.68rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;opacity:.5;margin-bottom:20px;
}
.footer li{margin-bottom:11px}
.footer li a{font-size:.95rem;opacity:.78;transition:opacity .3s,color .3s}
.footer li a:hover{opacity:1;color:var(--brass-l)}
.footer-logo img{height:44px;margin-bottom:22px}
.footer-bottom{
  display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;align-items:center;
  padding-block:26px;border-top:1px solid rgba(245,241,232,.14);
  font-size:.78rem;opacity:.5;
}

/* ---------- Utility ---------- */
.mt-s{margin-top:18px}.mt-m{margin-top:32px}.mt-l{margin-top:clamp(40px,5vw,72px)}
.mb-m{margin-bottom:32px}
.maxw-sm{max-width:44ch}
.hide{display:none}
.badge{
  display:inline-flex;align-items:center;gap:9px;padding:7px 15px;border-radius:999px;
  border:1px solid color-mix(in srgb,currentColor 30%,transparent);
  font-family:'Archivo',sans-serif;font-size:.66rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
}
.badge i{width:6px;height:6px;border-radius:50%;background:var(--brass);flex:none}

/* ---------- Mobile nav ---------- */
.burger{display:none;width:42px;height:42px;align-items:center;justify-content:center;flex-direction:column;gap:5px}
.burger i{display:block;width:20px;height:1.5px;background:currentColor;transition:transform .4s var(--ease),opacity .3s}
.mobile-menu{
  position:fixed;inset:0;z-index:999;background:var(--ink);color:var(--cream);
  display:flex;flex-direction:column;justify-content:center;padding:var(--gut);
  clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--ease-out);
}
.mobile-menu.open{clip-path:inset(0 0 0 0)}
.mobile-menu a{
  font-family:'Archivo',sans-serif;font-weight:700;letter-spacing:-.03em;
  font-size:clamp(2rem,9vw,3.4rem);padding-block:12px;display:block;
  border-bottom:1px solid rgba(245,241,232,.12);
}
.mobile-menu .btn{margin-top:34px;align-self:flex-start}
body.menu-open{overflow:hidden}

/* ---------- Responsive ---------- */
@media (max-width:1180px){
  .perf{grid-template-columns:repeat(3,1fr);gap:28px}
  .stats{grid-template-columns:repeat(2,1fr)}
  .footer-top{grid-template-columns:1fr 1fr}
}
@media (max-width:940px){
  .nav-links{display:none}
  .nav-cta .btn{display:none}
  .burger{display:flex}
  .split,.diagram,.statement-grid,.step-body{grid-template-columns:1fr}
  .split.rev .split-media{order:-1}
  .cards{grid-template-columns:1fr}
  .card{min-height:400px}
  .values{grid-template-columns:1fr}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .form{grid-template-columns:1fr}
  .step{grid-template-columns:56px 1fr}
  .sel-overlay{flex-direction:column;align-items:flex-start;gap:24px}
  .footer-top{grid-template-columns:1fr 1fr;gap:36px}
}
@media (max-width:620px){
  body{font-size:16px}
  .perf{grid-template-columns:repeat(2,1fr)}
  .sel-swatches{width:100%;justify-content:space-between}
  .hero-foot{flex-direction:column;align-items:flex-start}
  .scroll-cue{display:none}
  .spec th,.spec td{padding:13px 10px;font-size:.87rem}
  .spec tbody th{width:42%}
}