/* Self-hosted fonts. Replaces a remote webfont @import, which leaked
   visitor IPs to Google (GDPR) and cost three serialised round trips before text
   rendered. Subsets: latin, latin-ext only. Regenerate: node scripts/selfhost-fonts.mjs */
/* latin-ext */@font-face
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/public-sans-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */@font-face
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/public-sans-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */@font-face
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/public-sans-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */@font-face
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/public-sans-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */@font-face
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/public-sans-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */@font-face
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/public-sans-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */@font-face
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/source-serif-4-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */@font-face
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/source-serif-4-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */@font-face
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/source-serif-4-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */@font-face
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/source-serif-4-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */@font-face
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/source-serif-4-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */@font-face
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/source-serif-4-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
--grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.038'/%3E%3C/svg%3E");--bg:#F6F5F3;--bg-alt:#EFEEE9;--bg-warm:#F3F0E8;--bg-deep:#E8E6DF;--card:#fff;
--ink:#1A1A1A;--ink-2:#44443F;--muted:#6E6E6B;--faint:#8C8C88;
--border:#E4E2DC;--border-2:#D8D5CD;
--accent:#E8590C;--accent-soft:#FDF0E8;
--tk-bg:#FBF1D8;--tk-ink:#7A5E12;
--serif:"Source Serif 4",Charter,Georgia,serif;
--mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
--sans:"Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
--maxw:1120px;--pad:40px;--r:10px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
a:hover{color:var(--accent)}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--ink);color:var(--bg)}

.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.band{border-bottom:1px solid var(--border)}
.band-alt{background:var(--bg-alt)}
.sec{padding:64px 0}
.sec-sm{padding:44px 0}
.sec-lg{padding:88px 0}

/* ---------- type ---------- */
h1,h2,h3,h4{margin:0;font-family:var(--serif);font-weight:400;letter-spacing:-0.01em;color:var(--ink)}
.h-xl{font-size:clamp(38px,4.6vw,56px);line-height:1.08}
.h-lg{font-size:clamp(28px,3vw,36px);line-height:1.15}
.h-md{font-size:22px;line-height:1.25}
.eyebrow{font-family:var(--sans);font-size:13px;color:var(--muted);margin:0 0 10px}
.lede{font-size:16px;line-height:1.6;color:var(--ink-2);max-width:60ch;margin:16px 0 0;text-wrap:pretty}
.body{font-size:14.5px;line-height:1.65;color:var(--ink-2);text-wrap:pretty}
.small{font-size:13.5px;color:var(--muted)}
.card-title{font-family:var(--sans);font-size:15.5px;font-weight:600;color:var(--ink);margin:0 0 8px;letter-spacing:0}

/* ---------- header ---------- */
.hdr{background:var(--bg);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:50}
.nav{display:flex;align-items:center;gap:36px;height:66px}
.logo{display:flex;align-items:center;gap:9px;flex:0 0 auto}
.logo-txt{font-family:var(--sans);font-size:17px;letter-spacing:-0.02em;color:var(--ink)}
.logo-txt b{font-weight:700}
.logo-txt span{font-weight:400}
.nav-main{display:flex;gap:26px;margin:0 auto 0 12px;font-size:14.5px}
.nav-main>*{position:relative}
.nav-item{display:flex;align-items:center;gap:5px;white-space:nowrap;padding:7px 11px;border-radius:7px;color:var(--ink-2);border:1px solid transparent}
.nav-item:hover{color:var(--ink);background:#fff;border-color:var(--border)}
.nav-item.on{color:var(--ink);background:#fff;border-color:var(--border-2)}
.nav-item svg{opacity:.5}
.nav-end{display:flex;align-items:center;gap:16px;flex:0 0 auto}
.nav-end a.plain{font-size:14.5px;color:var(--ink-2)}
.nav-end a.plain:hover{color:var(--ink)}

/* dropdown */
.dd{position:absolute;top:calc(100% + 8px);left:0;min-width:250px;background:#fff;border:1px solid var(--border);border-radius:var(--r);padding:8px;box-shadow:0 8px 28px rgba(20,20,15,.09);opacity:0;visibility:hidden;transform:translateY(-4px);transition:.14s}
.nav-main>*:hover .dd{opacity:1;visibility:visible;transform:none}
.dd a{display:block;padding:8px 10px;border-radius:6px;font-size:14px;color:var(--ink-2)}
.dd a:hover{background:var(--bg-alt);color:var(--ink)}
.nav .nav-main>*:has(>.dd.mega){position:static}
.hdr .nav{position:relative}
.dd.mega{left:auto;right:0;max-width:calc(100vw - 48px);padding:20px 22px;display:grid;grid-template-columns:repeat(3,minmax(190px,1fr));gap:26px;min-width:660px}
.dd.mega .col{min-width:0}
.dd.mega h6{margin:0 0 8px;padding:0 10px 8px;border-bottom:1px solid var(--border);font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--faint);font-weight:500}
.dd.mega h6 a{display:inline;padding:0;font-size:inherit;letter-spacing:inherit;color:inherit;text-transform:inherit}
.dd.mega h6 a:hover{background:none;color:var(--ink)}
.dd.mega a{padding:6px 10px;font-size:13.5px;line-height:1.35}
.dd.mega .more{margin-top:6px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.dd.mega .scroll{max-height:290px;overflow:auto;overscroll-behavior:contain}
.dd.mega .scroll::-webkit-scrollbar{width:5px}
.dd.mega .scroll::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 17px;border-radius:8px;font-size:14.5px;font-weight:500;border:1px solid transparent;transition:.15s;white-space:nowrap}
.btn-dark{background:#141414;color:#fff}
.btn-dark:hover{background:#000;color:#fff}
.btn-light{background:#fff;border-color:var(--border-2);color:var(--ink)}
.btn-light:hover{border-color:var(--ink);color:var(--ink)}
.btn-white{background:#fff;color:#141414}
.btn-white:hover{background:#F0EFEC;color:#141414}

/* ---------- breadcrumb / page head ---------- */
.crumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:13.5px;color:var(--muted);padding:26px 0 0}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--accent)}
.crumbs .sep{color:var(--border-2)}
.phead{padding:22px 0 52px}

/* ---------- cards ---------- */
.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:22px}
a.card{display:block;transition:.15s}
a.card:hover{border-color:var(--border-2);box-shadow:0 4px 16px rgba(20,20,15,.05);color:inherit}
a.card:hover .card-title{color:var(--accent)}
.card-num{font-size:13px;color:var(--faint);margin:0 0 12px}
.card p{margin:0;font-size:14px;line-height:1.6;color:var(--ink-2)}

/* ---------- spec table ---------- */
.spec{background:#fff;border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
.spec-hd{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--border)}
.spec-hd .t{font-size:14.5px;font-weight:600}
.chip-unc{white-space:nowrap;font-size:12px;color:var(--muted);background:var(--bg-alt);border:1px solid var(--border);border-radius:20px;padding:3px 11px}
.spec-row{display:block;padding:13px 18px;border-bottom:1px solid var(--border)}
.spec-row .k{display:block;margin:0 0 5px;font:500 11.5px/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.spec-row .v{display:block;margin:0;font-size:14.5px;line-height:1.5;color:var(--ink);text-wrap:pretty}
.spec-row:last-child{border-bottom:0}

/* ---------- TK chip / note ---------- */
.tk{display:inline-flex;align-items:center;gap:6px;background:var(--tk-bg);color:var(--tk-ink);border-radius:5px;padding:2px 8px;font-size:11.5px;line-height:1.7;white-space:nowrap}
.tk b{font-weight:700;letter-spacing:.02em}
.tk-note{background:#fff;border:1px solid var(--border);border-radius:var(--r);padding:20px}
.tk-note p{margin:12px 0 0;font-size:14px;line-height:1.65;color:var(--ink-2);text-wrap:pretty}

/* ---------- prose (guides) ---------- */
.prose{max-width:62ch}
.prose h2{font-size:24px;margin:44px 0 14px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:18px;margin:30px 0 10px}
.prose p{margin:0 0 14px;font-size:14.5px;line-height:1.7;color:var(--ink-2)}
.prose ul{margin:0 0 16px;padding:0;list-style:none;display:grid;gap:10px}
.prose li{position:relative;padding-left:16px;font-size:14.5px;line-height:1.65;color:var(--ink-2)}
.prose li::before{content:"";position:absolute;left:0;top:9px;width:4px;height:4px;border-radius:50%;background:var(--accent)}
.prose table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--border);border-radius:var(--r);overflow:hidden;margin:0 0 20px;font-size:13.5px}
.prose th{text-align:left;padding:11px 14px;border-bottom:1px solid var(--border);font-weight:600;color:var(--ink);background:#fff}
.prose td{padding:11px 14px;border-bottom:1px solid var(--border);color:var(--ink-2);vertical-align:top;line-height:1.55}
.prose tr:last-child td{border-bottom:0}
.prose td:first-child{font-weight:500;color:var(--ink);white-space:nowrap}

/* ---------- FAQ ---------- */
.faq{display:grid}
.faq-q{padding:16px 0;border-bottom:1px solid var(--border)}
.faq-q:first-child{border-top:1px solid var(--border)}
.faq-q .q{font-size:14.5px;font-weight:500;color:var(--ink);margin:0 0 8px}
.faq-q .a{margin:0;font-size:14px;line-height:1.65;color:var(--ink-2)}
.faq-foot{margin:18px 0 0;font-size:13px;color:var(--faint)}

/* ---------- CTA band ---------- */
.cta{background:#141414;border-radius:var(--r);padding:34px 36px;display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap}
.cta h2{color:#fff;font-size:27px;margin:0 0 10px}
.cta p{margin:0;color:#B8B7B2;font-size:14px;line-height:1.6;max-width:52ch}

/* ---------- footer ---------- */
.ftr{background:var(--bg-alt);border-top:1px solid var(--border);padding:56px 0 26px;margin-top:0}
.ftr-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px}
.ftr-addr{font-size:14px;color:var(--ink-2);line-height:1.7;margin:18px 0 0}
.ftr-addr .lbl{color:var(--faint);font-size:13px}
.ftr h5{font-family:var(--sans);font-size:13px;font-weight:400;color:var(--faint);margin:0 0 14px}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.ftr ul a{font-size:14px;color:var(--ink-2)}

.ftr-btm{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin:30px 0 0;padding:20px 0 0;border-top:1px solid var(--border-2);font-size:13px;color:var(--muted)}

/* ---------- misc ---------- */
.stack{display:grid;gap:18px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
.two-a{display:grid;grid-template-columns:0.95fr 1.05fr;gap:44px;align-items:start}
.mt0{margin-top:0}.mt8{margin-top:8px}.mt16{margin-top:16px}.mt24{margin-top:24px}.mt32{margin-top:32px}.mt44{margin-top:44px}
.numlist{display:grid}
.numlist-row{display:grid;grid-template-columns:44px 1fr;gap:18px;padding:20px 0;border-bottom:1px solid var(--border)}
.numlist-row:first-child{border-top:1px solid var(--border)}
.numlist-row .n{font-size:13px;color:var(--faint);padding-top:2px}
.numlist-row h3{font-family:var(--sans);font-size:15.5px;font-weight:600;margin:0 0 6px}
.numlist-row p{margin:0 0 10px;font-size:14px;line-height:1.6;color:var(--ink-2);max-width:64ch}

@media(max-width:900px){
:root{--pad:22px}
.nav-main{display:none}
.g3,.g4{grid-template-columns:repeat(2,1fr)}
.two,.two-a{grid-template-columns:1fr;gap:28px}
.ftr-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
.g2,.g3,.g4{grid-template-columns:1fr}
.ftr-grid{grid-template-columns:1fr}
.cta{padding:26px}
}

/* ============================================================
   MOTION + POLISH LAYER
   ============================================================ */

/* --- refined type rendering --- */
body{font-feature-settings:"kern" 1,"liga" 1;text-rendering:optimizeLegibility}
h1,h2,h3,h4{font-optical-sizing:auto}
.h-xl{letter-spacing:-0.022em;line-height:1.06}
.h-lg{letter-spacing:-0.018em}
.h-md{letter-spacing:-0.012em}
.eyebrow{letter-spacing:0.06em;text-transform:uppercase;font-size:11.5px;font-weight:500;color:var(--faint)}
.lede{font-size:17px;line-height:1.62;color:var(--ink-2)}
.card-title{letter-spacing:-0.008em}
.prose p,.prose li{font-size:15px}

/* --- header --- */
.hdr{transition:box-shadow .25s,border-color .25s}
.hdr.is-stuck{box-shadow:0 1px 0 var(--border),0 6px 24px rgba(20,20,15,.05)}

/* --- scroll reveal --- */
html.js [data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .62s cubic-bezier(.22,.61,.36,1),transform .62s cubic-bezier(.22,.61,.36,1)}
html.js [data-reveal].is-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){html.js [data-reveal]{opacity:1;transform:none;transition:none}}

/* --- cards --- */
.card{transition:border-color .2s,box-shadow .2s,transform .2s}
a.card:hover{transform:translateY(-2px);box-shadow:0 6px 22px rgba(20,20,15,.07)}
.card-media{position:relative;border-radius:8px;overflow:hidden;margin:-4px 0 16px;aspect-ratio:16/10;background:var(--bg-alt)}
a.card:hover .card-media image-slot{transform:scale(1.03)}
.card-media image-slot{transition:transform .5s cubic-bezier(.22,.61,.36,1)}

/* --- buttons --- */
.btn{transition:background .18s,color .18s,border-color .18s,transform .18s}
.btn:active{transform:translateY(1px)}
.btn-dark:hover{box-shadow:0 4px 14px rgba(20,20,15,.18)}

/* --- FAQ disclosure --- */
.faq-q.is-toggle .q{cursor:pointer;display:flex;justify-content:space-between;gap:20px;align-items:flex-start;margin:0}
.faq-q.is-toggle .q::after{content:"";flex:0 0 auto;width:9px;height:9px;margin-top:6px;border-right:1.4px solid var(--faint);border-bottom:1.4px solid var(--faint);transform:rotate(45deg);transition:transform .22s}
.faq-q.is-toggle.is-open .q::after{transform:rotate(-135deg)}
.faq-q.is-toggle .a{max-height:0;overflow:hidden;opacity:0;margin:0;transition:max-height .34s ease,opacity .24s,margin .24s}
.faq-q.is-toggle.is-open .a{max-height:420px;opacity:1;margin-top:10px}

/* --- sticky section nav --- */
.secnav{position:sticky;top:66px;z-index:30;background:var(--bg);border-bottom:1px solid var(--border)}
.secnav-in{display:flex;gap:4px;overflow-x:auto;padding:10px 0;scrollbar-width:none}
.secnav-in::-webkit-scrollbar{display:none}
.secnav a{padding:7px 13px;border-radius:7px;font-size:13.5px;color:var(--muted);white-space:nowrap;transition:.15s}
.secnav a:hover{color:var(--ink);background:var(--bg-alt)}
.secnav a.on{color:var(--ink);background:#fff;border:1px solid var(--border-2)}

/* --- stats --- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
.stat{background:var(--card);padding:26px 22px}
.stat .v{font-family:var(--serif);font-size:38px;line-height:1;letter-spacing:-0.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.stat .l{font-size:13px;color:var(--muted);margin-top:9px}

/* --- hero --- */
.hero{position:relative;overflow:hidden}
.hero-media{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:16/9;background:var(--bg-alt);border:1px solid var(--border)}
.hero-tall{aspect-ratio:4/5}

/* --- pill / tag --- */
.pill{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--border);border-radius:20px;padding:5px 13px;font-size:12.5px;color:var(--ink-2)}
.pill-row{display:flex;flex-wrap:wrap;gap:8px}
.pill .dot{width:5px;height:5px;border-radius:50%;background:var(--accent)}

/* --- case study specifics --- */
.cs-hero{padding:52px 0 8px}
.cs-meta{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;padding:26px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.cs-meta .k{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin:0 0 7px}
.cs-meta .v{font-size:14.5px;color:var(--ink);margin:0;line-height:1.5}
.spec-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
.spec-cell{background:#fff;padding:16px 18px}
.spec-cell .k{font-size:12px;color:var(--faint);margin:0 0 5px}
.spec-cell .v{font-size:14.5px;color:var(--ink);margin:0}
.phase{display:grid;grid-template-columns:56px 1fr;gap:24px;padding:30px 0;border-top:1px solid var(--border)}
.phase .n{font-family:var(--serif);font-size:26px;color:var(--border-2);line-height:1}
.phase h3{font-family:var(--sans);font-size:16px;font-weight:600;margin:0 0 8px}
.phase p{margin:0 0 14px;font-size:14.5px;line-height:1.65;color:var(--ink-2);max-width:66ch}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.gallery .g-item{border-radius:8px;overflow:hidden;aspect-ratio:4/3;background:var(--bg-alt);border:1px solid var(--border)}
.gallery .g-wide{grid-column:span 2;aspect-ratio:8/3}
.quote-block{background:#fff;border:1px solid var(--border);border-radius:var(--r);padding:36px}
.quote-block p{font-family:var(--serif);font-size:22px;line-height:1.45;color:var(--ink);margin:0 0 18px;text-wrap:pretty}
.quote-block .who{font-size:13.5px;color:var(--muted);margin:0}
.result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.result{background:#fff;border:1px solid var(--border);border-radius:var(--r);padding:26px}
.result .v{font-family:var(--serif);font-size:34px;line-height:1;letter-spacing:-.02em;margin:0 0 10px;font-variant-numeric:tabular-nums}
.result h4{font-family:var(--sans);font-size:14.5px;font-weight:600;margin:0 0 8px}
.result p{margin:0;font-size:13.5px;line-height:1.6;color:var(--ink-2)}
.inspect{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--border);border-radius:var(--r);overflow:hidden;font-size:13px}
.inspect th{text-align:left;padding:11px 13px;border-bottom:1px solid var(--border);font-weight:600;background:var(--bg-alt);white-space:nowrap}
.inspect td{padding:10px 13px;border-bottom:1px solid var(--border);color:var(--ink-2);font-variant-numeric:tabular-nums}
.inspect tr:last-child td{border-bottom:0}
.ok{color:#2E7D32;font-weight:600}

/* --- mobile nav --- */
.nav-toggle{display:none;width:38px;height:38px;border:1px solid var(--border-2);border-radius:8px;align-items:center;justify-content:center}
.nav-panel{display:none}
.nav-panel.is-open{display:block;border-top:1px solid var(--border);background:var(--bg);padding:14px 0 20px}
.nav-panel a{display:block;padding:10px 0;font-size:15px;color:var(--ink-2);border-bottom:1px solid var(--border)}
.nav-panel .grp{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin:18px 0 4px}

@media(max-width:900px){
.nav-toggle{display:flex}
.stats,.cs-meta,.spec-grid,.result-grid{grid-template-columns:repeat(2,1fr)}
.gallery{grid-template-columns:repeat(2,1fr)}
.gallery .g-wide{grid-column:span 2}
.secnav{top:0}
}
@media(max-width:600px){
.stats,.cs-meta,.spec-grid,.result-grid,.gallery{grid-template-columns:1fr}
.gallery .g-wide{grid-column:span 1}
.phase{grid-template-columns:1fr;gap:10px}
.quote-block{padding:24px}
.quote-block p{font-size:19px}
}

/* --- portrait-aware media frames --- */
.hero-split{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}
.hero-split .hero-media{aspect-ratio:4/5;margin:0}
.media-p{aspect-ratio:3/4}
.gallery .g-item.media-p{aspect-ratio:3/4}
.gallery .g-item.g-wide.media-p{aspect-ratio:3/2}
.cs-cover{aspect-ratio:1/1}
@media(max-width:900px){.hero-split{grid-template-columns:1fr;gap:28px}}

/* --- intake form --- */
.form-wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:start}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:7px}
.field.full{grid-column:1/-1}
.field label{font-size:12.5px;color:var(--muted);letter-spacing:.01em}
.field label .req{color:var(--accent)}
.field input,.field select,.field textarea{font-family:var(--sans);font-size:14.5px;color:var(--ink);background:#fff;border:1px solid var(--border-2);border-radius:8px;padding:11px 13px;width:100%;transition:border-color .15s,box-shadow .15s}
.field textarea{resize:vertical;min-height:96px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(20,20,15,.06)}
.field input::placeholder,.field textarea::placeholder{color:#B0AFAA}
.form-foot{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-top:22px}
.form-note{font-size:12.5px;color:var(--muted);max-width:44ch;line-height:1.55}
.form-side .card{margin-bottom:14px}
.form-side .card p{font-size:13.5px}
@media(max-width:900px){.form-wrap{grid-template-columns:1fr;gap:30px}}
@media(max-width:600px){.form-grid{grid-template-columns:1fr}}

/* --- 3D hero + dimensional cards --- */
.hero3d-wrap{background:linear-gradient(175deg,var(--bg-alt) 0%,#E9E7E0 100%);border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
.hero3d{width:100%;aspect-ratio:16/9;position:relative}
.hero3d canvas{display:block;width:100%!important;height:100%!important}
.stage-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 18px;border-top:1px solid var(--border);background:var(--bg);flex-wrap:wrap}
.stage-bar .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--faint)}
.stage-seq{display:flex;gap:16px;flex-wrap:wrap}
.stage-seq span{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);position:relative;padding-left:14px;transition:color .3s}
.stage-seq span::before{content:"";position:absolute;left:0;top:4px;width:6px;height:6px;border-radius:50%;background:var(--border-2);transition:background .3s,transform .3s}
.stage-seq span.on{color:var(--ink)}
.stage-seq span.on::before{background:var(--accent);transform:scale(1.25)}

/* dimensional capability cards */
.cap3d-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;perspective:1400px}
.cap3d{position:relative;background:var(--card);border:1px solid var(--border);border-radius:12px;overflow:hidden;display:block;
  transform-style:preserve-3d;transition:transform .38s cubic-bezier(.22,.61,.36,1),box-shadow .38s,border-color .28s;
  box-shadow:0 1px 2px rgba(20,20,15,.04),0 8px 20px -12px rgba(20,20,15,.18)}
.cap3d:hover{transform:translateY(-5px) rotateX(3.4deg) rotateY(-3.4deg);border-color:var(--border-2);
  box-shadow:0 2px 4px rgba(20,20,15,.05),0 26px 46px -20px rgba(20,20,15,.32)}
.cap3d .stage{position:relative;aspect-ratio:16/10;background:radial-gradient(120% 90% at 62% 22%,#FBFAF8 0%,#EDEBE4 58%,#E2DFD7 100%);border-bottom:1px solid var(--border)}
.cap3d .stage canvas{display:block;width:100%!important;height:100%!important}
.cap3d .stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.22,.61,.36,1)}
.cap3d:hover .stage img{transform:scale(1.04)}
.cap3d .body{padding:20px 22px 22px;transform:translateZ(18px)}
.cap3d .idx{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin:0 0 9px}
.cap3d h3{font-family:var(--sans);font-size:16px;font-weight:600;letter-spacing:-.008em;margin:0 0 8px;transition:color .2s}
.cap3d:hover h3{color:var(--accent)}
.cap3d p{margin:0;font-size:13.8px;line-height:1.6;color:var(--ink-2)}
.cap3d .go{display:inline-flex;align-items:center;gap:7px;margin-top:15px;font-size:13px;color:var(--muted);transition:gap .25s,color .25s}
.cap3d:hover .go{gap:11px;color:var(--ink)}
@media(max-width:900px){.cap3d-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.cap3d-grid{grid-template-columns:1fr}.cap3d:hover{transform:translateY(-3px)}}
@media(prefers-reduced-motion:reduce){.cap3d,.cap3d:hover{transform:none;transition:none}}

/* --- line-art part backdrop --- */
.cta-scene{position:relative;overflow:hidden;background:var(--bg-alt);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.cta-scene .scene{position:absolute;top:50%;transform:translateY(-50%);height:88%;width:auto;pointer-events:none;
  stroke:var(--accent);stroke-width:1.15;stroke-linejoin:round;fill:none;opacity:.17}
.cta-scene .scene-l{left:-10px}
.cta-scene .scene-r{right:-10px}
.cta-inner{position:relative;z-index:1;text-align:center;padding:82px 0;max-width:620px;margin:0 auto}
.cta-inner h2{font-size:clamp(26px,3vw,36px);line-height:1.14;margin:0 0 14px;letter-spacing:-.018em}
.cta-inner p{margin:0 auto 26px;font-size:15px;line-height:1.6;color:var(--ink-2);max-width:48ch;text-wrap:pretty}
.cta-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
/* subtle texture on alternating bands */
.band-alt{background-image:none}
@media(max-width:900px){.cta-scene .scene{opacity:.11;height:70%}.cta-inner{padding:60px 0}}
@media(max-width:640px){.cta-scene .scene-l{left:-70px}.cta-scene .scene-r{right:-70px}}

/* --- brand mark --- */
.logo{display:flex;align-items:center;gap:9px;flex:0 0 auto}
.logo-img{height:30px;width:auto;display:block}
.ftr .logo-img{height:34px}
@media(max-width:900px){.logo-img{height:26px}}

/* --- technical diagrams --- */
.dg{background:var(--bg-alt);border:1px solid var(--border);border-radius:10px;padding:20px 22px;margin:26px 0}
.dg svg{width:100%;height:auto;display:block}
.dg .ink{stroke:var(--ink);fill:none;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.dg .thin{stroke:var(--ink);fill:none;stroke-width:1;opacity:.38}
.dg .hair{stroke:var(--ink);fill:none;stroke-width:.8;opacity:.2}
.dg .dim{stroke:var(--accent);fill:none;stroke-width:1}
.dg .dash{stroke:var(--accent);fill:none;stroke-width:1.2;stroke-dasharray:5 4}
.dg .solid{fill:rgba(20,20,15,.09);stroke:none}
.dg .warn{fill:rgba(232,89,12,.14);stroke:none}
.dg .steel{fill:rgba(20,20,15,.13);stroke:none}
.dg text{font-family:var(--mono);font-size:10.5px;fill:var(--muted);letter-spacing:.02em}
.dg text.lbl{fill:var(--accent)}
.dg text.hd{font-family:var(--sans);font-size:11.5px;fill:var(--ink);font-weight:600}
.dg-cap{font-size:12.5px;line-height:1.55;color:var(--muted);margin:14px 0 0;text-wrap:pretty}
.dg-2{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:26px 0}
.dg-2 .dg{margin:0}
@media(max-width:700px){.dg-2{grid-template-columns:1fr}}

/* --- hero background texture --- */
.hero{position:relative;isolation:isolate}
.hero-bg{position:absolute;inset:-1px 0 0;z-index:-1;pointer-events:none;overflow:hidden}
/* fine engineering grid, fading out down the section */
.hero-bg::before{content:"";position:absolute;inset:0;
  background-image:linear-gradient(to right,rgba(20,20,15,.055) 1px,transparent 1px),
                   linear-gradient(to bottom,rgba(20,20,15,.055) 1px,transparent 1px);
  background-size:64px 64px;background-position:center top;
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.9) 0%,rgba(0,0,0,.5) 45%,transparent 88%);
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.9) 0%,rgba(0,0,0,.5) 45%,transparent 88%)}
/* denser sub-grid inside the major squares */
.hero-bg::after{content:"";position:absolute;inset:0;
  background-image:linear-gradient(to right,rgba(20,20,15,.03) 1px,transparent 1px),
                   linear-gradient(to bottom,rgba(20,20,15,.03) 1px,transparent 1px);
  background-size:16px 16px;background-position:center top;
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.7) 0%,transparent 62%);
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.7) 0%,transparent 62%)}
/* warm paper wash so the grid never reads as a screen */
.hero-wash{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(120% 85% at 78% 6%,rgba(232,89,12,.055) 0%,transparent 58%),
             radial-gradient(90% 70% at 8% 4%,rgba(20,20,15,.035) 0%,transparent 60%)}
@media(max-width:700px){.hero-bg::before{background-size:44px 44px}.hero-bg::after{display:none}}
@media(prefers-reduced-motion:no-preference){
  .hero-bg::before,.hero-bg::after{will-change:auto}
}

/* ============================================================
   SPACING SYSTEM, one scale, applied everywhere.
   Steps are 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 88 / 120.
   Rules:
     section padding      : sm 56 · base 88 · lg 120   (mobile: 40 / 56 / 72)
     eyebrow -> heading   : 10
     heading -> lede      : 16
     lede -> content      : 32
     block -> block       : 24
     copy -> major visual : 72
     grid gap             : 20
   ============================================================ */
:root{
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;
  --s7:48px;--s8:64px;--s9:88px;--s10:120px;
  --sec-y:var(--s8);--sec-y-sm:44px;--sec-y-lg:var(--s9);
}
@media(max-width:900px){:root{--sec-y:48px;--sec-y-sm:32px;--sec-y-lg:60px}}

.sec{padding:var(--sec-y) 0}
.sec-sm{padding:var(--sec-y-sm) 0}
.sec-lg{padding:var(--sec-y-lg) 0}

/* section internals */
.sec .eyebrow,.sec-sm .eyebrow,.sec-lg .eyebrow{margin:0 0 10px}
.sec h2.h-lg,.sec-sm h2.h-lg,.sec-lg h2.h-lg{margin:0}
.sec h2.h-lg + .lede,.sec-sm h2.h-lg + .lede,.sec-lg h2.h-lg + .lede{margin-top:var(--s4)}
.sec h2.h-lg + .grid,.sec h2.h-lg + .cap3d-grid,
.sec h2.h-lg + .stats,.sec h2.h-lg + .form-wrap,
.sec h2.h-lg + .prose,.sec h2.h-lg + .numlist,
.sec h2.h-lg + .faq,.sec h2.h-lg + .result-grid,
.sec h2.h-lg + .gallery,.sec h2.h-lg + .spec-grid{margin-top:var(--s6)}
.sec .lede + .grid,.sec .lede + .cap3d-grid,.sec .lede + .stats,
.sec .lede + .form-wrap,.sec .lede + .prose,.sec .lede + .numlist,
.sec .lede + .faq,.sec .lede + .result-grid,.sec .lede + .gallery,
.sec .lede + .spec-grid,.sec .lede + .two-a,.sec .lede + .two{margin-top:var(--s6)}

/* page head */
.phead{padding:var(--s5) 0 var(--s7)}
.phead .lede{margin-top:var(--s4)}
.crumbs{padding:var(--s5) 0 0}

/* grids and cards */
.grid{gap:20px}
.cap3d-grid{gap:20px}
.dg-2{gap:20px;margin:var(--s6) 0}
.dg{margin:var(--s6) 0}
.gallery{gap:16px}
.result-grid{gap:20px}
.stack{gap:20px}

/* utility classes pinned to the scale */
.mt8{margin-top:var(--s2)}
.mt16{margin-top:var(--s4)}
.mt24{margin-top:var(--s5)}
.mt32{margin-top:var(--s6)}
.mt44{margin-top:var(--s7)}
.mt48{margin-top:var(--s7)}
.mt64{margin-top:var(--s8)}

/* hero: the copy block must never crowd the animation */
.hero .hero-actions{margin-top:var(--s6);display:flex;gap:12px;flex-wrap:wrap}
.hero-visual{margin-top:72px}
@media(max-width:900px){.hero-visual{margin-top:var(--s7)}}
.hero3d-wrap{margin:0}
.stage-bar{padding:14px 20px}

/* two-column blocks */
.two-a,.two{gap:var(--s7)}
@media(max-width:900px){.two-a,.two{gap:var(--s6)}}

/* prose rhythm */
.prose h2{margin:var(--s7) 0 var(--s4)}
.prose h2:first-child{margin-top:0}
.prose h3{margin:var(--s6) 0 10px}
.prose p{margin:0 0 var(--s4)}
.prose ul{margin:0 0 var(--s4)}
.prose table{margin:0 0 var(--s5)}

/* lists and rows */
.numlist-row{padding:var(--s5) 0}
.phase{padding:var(--s6) 0}
.faq-q{padding:var(--s4) 0}

/* CTA band */
.cta-inner{padding:var(--sec-y) 0}
.cta-inner h2{margin:0 0 var(--s3)}
.cta-inner p{margin:0 auto var(--s5)}

/* adjacent sections sharing a background should not double their padding */
.band-alt + .band-alt{border-top:0}
.sec + .sec.band-alt,.sec.band-alt + .sec{margin-top:0}

/* footer */
.ftr{padding:var(--sec-y) 0 var(--s5)}

.ftr-btm{margin-top:var(--s6);padding-top:var(--s5)}

/* --- video testimonials : slider --- */
.vt{position:relative;overflow:hidden}
.vt-viewport{overflow:hidden;margin-top:var(--s7);position:relative;padding:0 62px;clip-path:inset(0 62px)}
.vt-track{display:flex;transition:transform .55s cubic-bezier(.4,0,.2,1);will-change:transform}
.vt-slide{flex:0 0 100%;min-width:100%;overflow:hidden;display:grid;grid-template-columns:1fr 1.05fr;gap:var(--s8);align-items:center}
.vt-copy{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center}
.vt-name{font-family:var(--serif);font-size:30px;line-height:1.15;letter-spacing:-.02em;margin:0 0 4px}
.vt-role{font-size:15px;color:var(--muted);margin:0 0 var(--s5)}
.vt-quote{position:relative;font-size:17px;line-height:1.62;color:var(--ink-2);margin:0;padding-left:20px;text-wrap:pretty;max-width:46ch}
.vt-quote::before{content:"\201C";position:absolute;left:0;top:-6px;font-family:var(--serif);font-size:34px;color:var(--accent);line-height:1}
.vt-quote::after{content:"\201D";font-family:var(--serif);font-size:34px;color:var(--accent);line-height:0;margin-left:3px;vertical-align:-10px}

.vt-media{position:relative;z-index:2}
.vt-arc{position:absolute;right:2%;top:50%;transform:translateY(-50%);width:78%;aspect-ratio:1;border-radius:50%;
  background:var(--bg-alt);z-index:0;pointer-events:none}
.vt-frame{position:relative;border-radius:12px;overflow:hidden;background:var(--bg-alt);aspect-ratio:3/4;max-width:390px;margin-left:auto;
  border:1px solid var(--border);
  box-shadow:0 18px 44px -22px rgba(20,20,15,.28),0 2px 6px rgba(20,20,15,.05)}
.vt-frame image-slot,.vt-poster{width:100%;height:100%;display:block;object-fit:cover}
.vt-frame video{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;z-index:4;background:#000}
.vt-frame.is-playing .vt-poster{display:none}
.vt-play{position:absolute;inset:0;display:none;place-items:center;border:0;background:transparent;cursor:pointer;z-index:3}
.vt-play span{width:70px;height:70px;border-radius:50%;background:rgba(255,255,255,.94);display:grid;place-items:center;
  box-shadow:0 6px 20px rgba(20,20,15,.22);transition:.18s}
.vt-play:hover span{transform:scale(1.07);background:#fff}
.vt-play svg{margin-left:4px}
.vt-frame.has-media .vt-play{display:grid}
.vt-frame.is-playing .vt-play{display:none}

/* slider controls */
.vt-slider{position:relative}
.vt-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:6}
.vt-arrow[data-vt="prev"]{left:2px}
.vt-arrow[data-vt="next"]{right:2px}
.vt-ctl{display:flex;align-items:center;gap:var(--s5);margin-top:var(--s6)}
.vt-arrow{width:42px;height:42px;border-radius:50%;border:1px solid var(--border-2);background:#fff;
  display:grid;place-items:center;cursor:pointer;transition:.16s;color:var(--ink-2);flex:0 0 auto}
.vt-arrow:hover{border-color:var(--ink);color:var(--ink)}
.vt-arrow:disabled{opacity:.32;cursor:default;border-color:var(--border)}
.vt-dots{display:flex;gap:8px;align-items:center}
.vt-dot{width:7px;height:7px;border-radius:50%;background:var(--border-2);border:0;padding:0;cursor:pointer;transition:.18s}
.vt-dot.on{background:var(--accent);width:22px;border-radius:4px}
.vt-count{margin-left:auto;font-family:var(--mono);font-size:12px;color:var(--faint);letter-spacing:.04em}

@media(max-width:900px){
  .vt-viewport{padding:0;clip-path:none}
  .vt-arrow{width:38px;height:38px;background:rgba(255,255,255,.94)}
  .vt-frame{margin:0 auto;max-width:320px}
  .vt-slide{grid-template-columns:1fr;gap:var(--s6)}
  .vt-arc{display:none}
  .vt-name{font-size:25px}
  .vt-quote{font-size:16px}
}

/* hero: copy block, then the animation full width beneath it */
.hero-stack{display:block}
.hero-stack > div:first-child{max-width:820px}
.hero-visual{margin-top:72px;width:100%}
@media(max-width:900px){.hero-visual{margin-top:var(--s7)}}

/* ============================================================
   PROSE MEASURE, text keeps a readable 62ch line, but tables
   and diagrams span the full content column instead of being
   squeezed into it.
   ============================================================ */
.prose{max-width:none}
.prose > p,
.prose > ul,
.prose > ol,
.prose > h2,
.prose > h3,
.prose > blockquote{max-width:62ch}

.prose table{width:100%;max-width:none;table-layout:auto}
.prose th,.prose td{padding:13px 16px;vertical-align:top;line-height:1.5}
.prose td:first-child,.prose th:first-child{white-space:normal;width:18%;min-width:130px}
.prose table.cols3 td:first-child{width:16%}
.prose td p{margin:0}
.prose .dg{max-width:none}

@media(max-width:700px){
  .prose table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .prose th,.prose td{padding:11px 13px;font-size:13px}
  .prose td:first-child,.prose th:first-child{min-width:110px}
}

/* Photography, muted to sit inside the warm paper palette */
.ph-frame{position:relative;overflow:hidden;background:var(--bg-alt);border:1px solid var(--border)}
.ph-frame img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.66) contrast(1.06) brightness(1.01)}
.ph-frame::after{content:"";position:absolute;inset:0;background:var(--bg);opacity:.10;pointer-events:none}
.ph-hero{aspect-ratio:16/7;margin:0}
.card-ph{display:block;position:relative;overflow:hidden;aspect-ratio:16/10;margin:0 0 var(--s5,20px);background:var(--bg-alt)}
.card-ph img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.66) contrast(1.06);transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.card-ph::after{content:"";position:absolute;inset:0;background:var(--bg);opacity:.10;pointer-events:none}
.card.has-ph:hover .card-ph img{transform:scale(1.03)}
@media(max-width:700px){.ph-hero{aspect-ratio:4/3}}

/* Industry parts band */
.pf-solo{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--s8,32px);align-items:center}.pf-txt .pf-t{font-size:20px}.pf-txt .pf-b{max-width:38ch}
.pf{margin:0}
.pf-img{display:block;aspect-ratio:4/3}
.pf figcaption{padding-top:var(--s5,16px)}
.pf-t{margin:0 0 6px;font-weight:600;letter-spacing:-.01em}
.pf-b{margin:0;color:var(--muted);max-width:46ch}
.pf-note{margin:var(--s7,28px) 0 0;font-size:13px;color:var(--muted)}
@media(max-width:820px){.pf-solo{grid-template-columns:1fr;gap:var(--s6,24px)}}

.ind-grid .card{display:flex;flex-direction:column;padding:0;overflow:hidden}
.card-thumb{display:block;aspect-ratio:4/3;background:var(--bg-alt);overflow:hidden}
.card-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.ind-grid .card:hover .card-thumb img{transform:scale(1.04)}
.ind-grid .card .card-title{margin:var(--s4) var(--s4) var(--s2)}
.ind-grid .card p:not(.card-title){margin:0 var(--s4) var(--s4)}

.guide-toc{border-top:1px solid var(--border);padding-top:20px}.guide-toc ol{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:0;counter-reset:none}.guide-toc li{border-bottom:1px solid var(--border)}.guide-toc a{display:flex;gap:16px;align-items:baseline;padding:14px 0;text-decoration:none;color:var(--ink);font-size:17px}.guide-toc a span{font:500 12px/1 var(--mono);color:var(--muted);letter-spacing:.06em}.guide-toc a:hover{color:var(--accent);text-decoration:underline}

/* ============================================================
   CONTENT WIDTH RULE - applies to every page, no exceptions
   1. .prose is the one long-form reading column on the site.
      Its measure is declared here and nowhere else.
   2. The column is CENTRED in its wrap. Text must never sit in
      a left-hand strip with dead space to its right.
   3. Every direct child of .prose shares the column's left and
      right edge: paragraphs, lists, tables and diagrams all
      align. No child sets its own max-width.
   4. Content that must break out of the measure uses .full,
      which widens symmetrically and stays centred.
   Check any new page against these four before shipping.
   ============================================================ */
.prose{max-width:none}
.prose > p,.prose > ul,.prose > ol,.prose > h2,.prose > h3,.prose > h4,.prose > blockquote,.prose > table,.prose > .dg,.prose > .dg-2,.prose > figure{max-width:none}
/* Document pages (guides, articles): the whole page column narrows to a
   reading measure, so the h1, lede, body text, tables and diagrams all
   share one left edge and one right edge. */
body.doc .wrap{max-width:900px}
body.doc .hdr .wrap,body.doc .ftr .wrap,body.doc .cta .wrap{max-width:var(--maxw)}
body.doc .prose{max-width:none}
body.doc .cta-inner{max-width:620px}

/* Wide (900-unit) diagrams scale down more than the 440-unit ones, so their
   type is set larger in user units to render at a comparable size. */
.dg svg[viewBox^="0 0 900"] text{font-size:14px}
.dg svg[viewBox^="0 0 900"] text.hd{font-size:15.5px}

/* --- hero 3D as a background layer --- */
.hero{overflow:hidden}
.hero .wrap{position:relative;z-index:2}
.hero-3dbg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.hero-3dbg .hero3d{position:absolute;top:-6%;right:-2%;width:70%;height:110%}
.hero-3dbg canvas{width:100%!important;height:100%!important;display:block;filter:saturate(.86) contrast(.97);opacity:.72;-webkit-mask-image:linear-gradient(96deg,transparent 0,transparent 20%,rgba(0,0,0,.55) 38%,#000 58%);mask-image:linear-gradient(96deg,transparent 0,transparent 20%,rgba(0,0,0,.55) 38%,#000 58%)}
@media(max-width:900px){.hero-3dbg .hero3d{width:130%;right:-34%}.hero-3dbg canvas{opacity:.42}}

/* --- two surfaces, alternating -------------------------------------------
   Every section is one of two materials, strictly alternating down the page.
   A  paper + brushed grain  (metal)   .sec
   B  deeper + moulded stipple (polymer) .band-alt
   .band-warm / .band-deep are kept as aliases so existing markup still works.
------------------------------------------------------------------------- */
.sec,.sec-lg,.sec-sm{position:relative;background-color:var(--bg);background-image:none}
.band-alt,.band-warm,.band-deep{background-color:var(--bg-alt);background-image:none}
.band-alt,.band-warm,.band-deep{border-bottom:1px solid var(--border)}
.band-alt + .band-alt,.band-warm + .band-warm,.band-deep + .band-deep{border-top:0}
.band-alt .card,.band-warm .card,.band-deep .card{background:var(--card)}
.band-alt .dg,.band-warm .dg,.band-deep .dg{background:rgba(255,255,255,.58)}

/* --- testimonial: the portrait dissolves into the page beside its quote --- */
@media(min-width:900px){
  .vt-slide{grid-template-columns:1.18fr .92fr;gap:var(--s4);align-items:center}
  .vt-copy{position:relative;z-index:3;margin-right:-14%}
  .vt-media{z-index:1}
  .vt-frame{max-width:410px;margin-right:26px;border:0;border-radius:0;background:transparent;box-shadow:none;
    filter:saturate(.72) contrast(.97) brightness(1.03);
    -webkit-mask-image:radial-gradient(74% 64% at 64% 44%,#000 38%,rgba(0,0,0,.55) 66%,transparent 88%);
    mask-image:radial-gradient(74% 64% at 64% 44%,#000 38%,rgba(0,0,0,.55) 66%,transparent 88%);
    transition:filter .5s ease,border-radius .5s ease,box-shadow .5s ease}
  .vt-frame::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
    background:linear-gradient(100deg,var(--bg-deep) 0,rgba(232,230,223,.35) 34%,transparent 62%);
    transition:opacity .5s ease}
  .vt-frame.is-playing{-webkit-mask-image:none;mask-image:none;filter:none;border-radius:12px;
    box-shadow:0 18px 44px -22px rgba(20,20,15,.3),0 2px 6px rgba(20,20,15,.05)}
  .vt-frame.is-playing::after{opacity:0}
  .vt-frame:hover{filter:saturate(.92) contrast(1) brightness(1)}
  .vt-quote{text-wrap:pretty}
}

.lede .tk{margin-right:6px}

@media(max-width:420px){}

/* --- spacing corrections: a section already supplies its own vertical rhythm --- */
.sec>.wrap>.dg:first-child,.sec-sm>.wrap>.dg:first-child,.sec-lg>.wrap>.dg:first-child,
.sec>.wrap>.dg-2:first-child{margin-top:0}
.sec>.wrap>.dg:last-child,.sec-sm>.wrap>.dg:last-child,.sec-lg>.wrap>.dg:last-child,
.sec>.wrap>.dg-2:last-child{margin-bottom:0}
.sec:has(>.wrap>.dg:only-child),.sec:has(>.wrap>.dg-2:only-child){padding:var(--s7) 0}
.sec>.wrap>*:last-child{margin-bottom:0}
.phead{padding:var(--s4) 0 var(--s6)}
.crumbs{padding:var(--s5) 0 0}

/* --- data tables outside .prose (materials library) --- */
.tbl-wrap{border:1px solid var(--border);border-radius:var(--r);background:#fff;overflow:hidden}
@media(max-width:820px){.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}}
.tbl{width:100%;border-collapse:collapse;font-size:14px;min-width:640px}
.tbl thead th{text-align:left;padding:14px 18px;background:var(--bg-alt);border-bottom:1px solid var(--border);font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--faint);font-weight:500;white-space:nowrap}
.tbl td{padding:15px 18px;border-bottom:1px solid var(--border);color:var(--ink-2);vertical-align:top;line-height:1.5}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl tbody tr:hover td{background:var(--bg-alt)}
.tbl td:nth-child(1){width:16%;white-space:nowrap}
.tbl td:nth-child(1) a{color:var(--ink);font-weight:600}
.tbl td:nth-child(1) a:hover{color:var(--accent)}
.tbl td:nth-child(2){width:34%}
.tbl td:nth-child(3){width:22%;font-family:var(--mono);font-size:12.5px;color:var(--ink);white-space:nowrap}
.tbl td:nth-child(4){width:28%;font-size:13px;color:var(--muted)}

/* hero lede, inline capability links, underline only on hover */
.lede-hero{max-width:36em;margin-bottom:var(--s6)}
.lede-hero a{color:var(--ink);text-decoration:none;box-shadow:inset 0 -1px 0 var(--border-2);transition:box-shadow .18s,color .18s}
.lede-hero a:hover{color:var(--accent);box-shadow:inset 0 -1px 0 var(--accent)}

/* FAQ */
.faq-lay{display:grid;grid-template-columns:minmax(0,0.8fr) minmax(0,1.2fr);gap:clamp(40px,6vw,88px);align-items:start}
.faq-head .lede{margin-bottom:28px}
.faq-head .btn{display:inline-flex}
.faq-list{border-top:1px solid var(--border)}
.faq-item{border-bottom:1px solid var(--border)}
.faq-item summary{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding:22px 0;cursor:pointer;list-style:none;font-family:var(--serif);font-size:20px;line-height:1.35;letter-spacing:-.01em;color:var(--ink);transition:color .18s ease}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:var(--accent)}
.faq-ico{width:16px;height:16px;flex:0 0 16px;margin-top:6px;stroke:var(--muted);stroke-width:1.25;fill:none;transition:transform .25s ease,stroke .18s ease}
.faq-item[open] .faq-ico{transform:rotate(45deg);stroke:var(--accent)}
.faq-item summary:hover .faq-ico{stroke:var(--accent)}
.faq-a{padding:0 40px 26px 0}
.faq-a p{color:var(--ink-2);max-width:62ch;margin:0}
@media(max-width:900px){.faq-lay{grid-template-columns:1fr;gap:32px}.faq-item summary{font-size:18px}.faq-a{padding-right:0}}

/* Intake wizard */
.ik-panel{max-width:920px;margin:0 auto;background:#fff;border:1px solid var(--border);padding:clamp(24px,4vw,48px)}
.ik-top{margin-bottom:36px}
.ik-topline{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:12px}
.ik-topline .eyebrow,.ik-pctline{white-space:nowrap;margin:0}
.ik-pctline{font:500 12px/1 var(--mono);letter-spacing:.06em;color:var(--muted);margin:0}
.ik-pct{color:var(--ink);font-weight:600}
.ik-bar{height:3px;background:var(--border);overflow:hidden}
.ik-bar-fill{height:100%;width:0;background:var(--accent);transition:width .35s cubic-bezier(.2,.7,.3,1)}
.ik-resume{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;margin:16px 0 0;font:400 13px/1.4 var(--sans);color:var(--muted)}
.ik-resume button{background:none;border:0;padding:0;font:inherit;color:var(--accent);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.ik-dots{display:flex;gap:8px;margin-top:20px}
.ik-dot{flex:1;height:34px;border:1px solid var(--border);background:transparent;font:500 11px/1 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--muted);cursor:default;transition:all .2s ease;padding:0 4px;white-space:nowrap;overflow:hidden}
.ik-dot.is-done{cursor:pointer;border-color:var(--ink);color:var(--ink)}
.ik-dot.is-on{background:var(--ink);border-color:var(--ink);color:#fff}
.ik-steptitle{margin:0 0 8px}
.ik-stephint{margin:0 0 10px;max-width:56ch}
.ik-count{margin:0 0 30px;font:500 12px/1 var(--mono);letter-spacing:.05em;color:var(--muted)}
.ik-step{display:none}
.ik-step.is-on{display:block;animation:ikIn .32s cubic-bezier(.2,.7,.3,1)}
@keyframes ikIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.ik-row2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.ik-row3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.ik-f{margin-bottom:20px;display:flex;flex-direction:column;gap:7px}
.ik-f label{font:500 12px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.ik-f input[type=text],.ik-f input[type=email],.ik-f input[type=tel],.ik-f input[type=date],.ik-f select,.ik-f textarea{width:100%;font:400 16px/1.5 var(--sans);color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--border);padding:8px 0;border-radius:0;transition:border-color .18s ease}
.ik-f input:focus,.ik-f select:focus,.ik-f textarea:focus{outline:none;border-bottom-color:var(--accent)}
.ik-f textarea{resize:vertical;border:1px solid var(--border);padding:12px 14px}
.ik-f textarea:focus{border-color:var(--accent)}
.ik-f.is-bad input,.ik-f.is-bad select{border-bottom-color:var(--accent)}
.ik-f.is-bad label{color:var(--accent)}
.ik-hint{font-size:13px;line-height:1.45;color:var(--muted)}
.ik-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.ik-chips input{position:absolute;opacity:0;width:0;height:0}
.ik-chips span{display:inline-block;white-space:nowrap;padding:9px 16px;border:1px solid var(--border);font-size:14px;color:var(--ink-2);cursor:pointer;transition:all .18s ease}
.ik-chips span:hover{border-color:var(--ink)}
.ik-chips input:checked+span{background:var(--ink);border-color:var(--ink);color:#fff}
.ik-chips input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.ik-drop{border:1px dashed var(--border);padding:36px 24px;text-align:center;cursor:pointer;transition:all .2s ease}
.ik-drop:hover,.ik-drop.is-over{border-color:var(--accent);background:var(--bg-alt)}
.ik-drop svg{display:block;margin:0 auto;width:26px;height:26px;stroke:var(--muted);stroke-width:1.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
.ik-drop p{margin:10px 0 4px;font-size:15px;color:var(--ink-2)}
.ik-drop.has-files{border-style:solid;text-align:left}
.ik-files{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.ik-files li{display:flex;justify-content:space-between;gap:16px;font:400 13px/1.4 var(--mono);color:var(--ink);border-top:1px solid var(--border);padding-top:6px;text-align:left}
.ik-fsize{color:var(--muted);flex:0 0 auto}
.ik-nav{display:flex;align-items:center;gap:12px;margin-top:36px;padding-top:26px;border-top:1px solid var(--border)}
.ik-nav .btn{min-width:132px;justify-content:center}
.ik-nav .btn[hidden]{display:none}
.ik-step>.ik-f:last-child,.ik-step>.ik-row2:last-child .ik-f,.ik-step>.ik-row3:last-child .ik-f{margin-bottom:0}
.ik-save{margin-left:auto;font:400 12px/1 var(--mono);color:var(--muted)}
.ik-done{max-width:760px;margin:0 auto;text-align:center}
/* .lede is 60ch with `margin:16px 0 0`, which is right in a left-aligned column and
   wrong here: the box hugs the left edge of a 760px centred panel while its text
   centres inside that narrower box, so it reads as misaligned against the heading
   above it. `.cta-inner p` already solves this the same way. */
.ik-done .lede{margin-inline:auto}
.ik-code{font-family:var(--mono);color:var(--accent)}
.ik-sum{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:36px 0 0;padding-top:26px;border-top:1px solid var(--border);text-align:left}
.ik-sum dt{font:500 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.ik-sum dd{margin:0;font-size:16px;color:var(--ink)}
.ik-tk{margin-top:32px;text-align:left;font-size:14px;color:var(--muted)}
@media(max-width:760px){.ik-row2,.ik-row3,.ik-sum{grid-template-columns:1fr}.ik-dot span{font-size:10px}.ik-nav{flex-wrap:wrap}.ik-save{width:100%;margin:6px 0 0}}

.prose .legal-note{margin-top:34px;padding-top:18px;border-top:1px solid var(--border);font-size:13.5px;color:var(--muted)}

/* material process badges */
.pbadges{display:flex;flex-wrap:wrap;gap:10px}
.pbadge{display:flex;flex-direction:column;gap:3px;padding:12px 16px;min-width:150px;border:1px solid var(--border);background:#fff;text-decoration:none;transition:border-color .18s ease,transform .18s ease}
a.pbadge:hover{border-color:var(--ink);transform:translateY(-1px)}
.pbadge .pb-n{font-size:14.5px;color:var(--ink);font-weight:500}
.pbadge .pb-s{font:500 11px/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--accent)}
.pbadge.off{background:transparent;border-style:dashed}
.pbadge.off .pb-n{color:var(--muted)}
.pbadge.off .pb-s{color:var(--faint)}
@media(max-width:600px){.pbadge{min-width:0;flex:1 1 45%}}

/* volume selector */
.vol-pick{border:1px solid var(--border);background:#fff;padding:24px 26px}
.vol-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border)}
.vol-cell{background:#fff;padding:18px 20px}
.vol-n{margin:0 0 6px;font:500 12px/1 var(--mono);letter-spacing:.08em;color:var(--accent)}
.vol-t{margin:0 0 6px;font-size:16px;font-weight:500;color:var(--ink);line-height:1.35}
.vol-d{margin:0;font-size:14px;line-height:1.5;color:var(--muted)}
@media(max-width:760px){.vol-row{grid-template-columns:1fr}.vol-pick{padding:18px}}

/* ── Footer: nav-mirroring columns, wide and condensed ───────────────────────
   Five columns mirroring the mega-menu, so every capability, industry and guide
   page is reachable and crawlable from any page.

   The footer runs WIDER than the 1120px body grid (1320px) specifically so the
   link columns get room and stop wrapping, wrapped links were what made it read
   as long. Type steps down to 13px and the row gap tightens, so the same 33 links
   occupy noticeably less height.

   Breakpoints avoid an orphan column: 5 across, then brand full-width above a
   clean row of 4, then 2. Never 5 items in a 4-column grid, which wraps the last
   one onto its own row and doubles the apparent height. */
.ftr{padding:var(--s7) 0 var(--s4)}
.ftr .wrap{max-width:1320px}
.ftr-grid{grid-template-columns:1.5fr repeat(4,1fr);gap:18px 34px}
.ftr-brand{max-width:32ch}
.ftr .ftr-addr{margin:12px 0 0;line-height:1.55;font-size:13px}
.ftr ul{gap:6px}
.ftr ul a{font-size:13px;line-height:1.35}
.ftr h5{margin:0 0 9px;letter-spacing:.02em}
.ftr .logo-img{height:30px}
.ftr .ftr-all{color:var(--muted)}
.ftr .ftr-all:hover{color:var(--accent)}
.ftr-btm{margin-top:var(--s4);padding-top:var(--s3);font-size:12.5px}
.ftr-legal{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.ftr-legal a{color:var(--muted)}
.ftr-legal a:hover{color:var(--ink)}
.ftr-wa{display:inline-flex;align-items:center;gap:6px}
.ftr-wa svg{flex:0 0 auto;opacity:.75}
@media(max-width:1180px){.ftr-grid{gap:16px 24px}}
@media(max-width:1000px){
  .ftr-grid{grid-template-columns:repeat(4,1fr)}
  .ftr-brand{grid-column:1/-1;max-width:none;display:flex;flex-wrap:wrap;align-items:flex-start;gap:10px 44px}
  .ftr-brand .ftr-addr{margin:0}
}
@media(max-width:620px){.ftr-grid{grid-template-columns:repeat(2,1fr);gap:22px 24px}}
/* The fixed action button otherwise sits on the copyright line once the footer
   goes full width. Reserve room for it. */
@media(max-width:900px){.ftr-btm{padding-bottom:56px}}

/* ── Floating WhatsApp action ────────────────────────────────────────────────
   Always visible, on every page, scrolling with nothing, position:fixed. The
   rounded square matches the WhatsApp app icon people recognise.

   It renders ABOVE the consent banner (z-index 250 vs 200) and merely shifts up
   while the banner is open so it does not cover the Accept button. Deliberately
   NOT hidden: an earlier version gated visibility on :has(), which meant a browser
   without :has() support, or any change to how the banner is dismissed, left the
   button invisible forever. Default state is now visible; :has() only nudges
   position, so if it fails the button is still there. */
.tm-wa{position:fixed;right:22px;bottom:22px;z-index:250;
  width:56px;height:56px;border-radius:16px;
  display:inline-flex;align-items:center;justify-content:center;
  background:#25D366;color:#fff;
  box-shadow:0 8px 22px rgba(20,20,15,.24),0 2px 5px rgba(20,20,15,.16);
  transition:transform .16s ease,box-shadow .16s ease,bottom .18s ease}
.tm-wa:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(20,20,15,.28),0 2px 5px rgba(20,20,15,.18)}
.tm-wa:active{transform:translateY(0)}
.tm-wa:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
/* Banner is full-bleed at every width (measured), so always clear it. */
body:has(#tm-consent:not([hidden])) .tm-wa{bottom:200px}
@media(max-width:560px){
  .tm-wa{right:16px;bottom:16px;width:54px;height:54px;border-radius:15px}
  body:has(#tm-consent:not([hidden])) .tm-wa{bottom:310px}
}
@media(prefers-reduced-motion:reduce){.tm-wa{transition:none}.tm-wa:hover{transform:none}}
@media print{.tm-wa{display:none}}


/* ---- customer logo marquee ----
   Sits directly under the hero. No panel, no card, no background: the source PNGs carry
   alpha, so only the marks themselves travel across the page.

   TWO THINGS THAT LOOK RIGHT IN CODE AND WRONG ON SCREEN.

   1. Normalising by height alone does not work. These marks run from 1:1 (Tata, IIT
      Madras) to 9.6:1 (Nasher Miles); at a common 34px height the square ones shrink to
      illegible stamps while the wide ones dominate the strip. Each logo therefore gets
      an equal-width cell and is fitted inside it, so every brand occupies the same
      optical space regardless of proportion.

   2. The trailing space on a run MUST equal the gap between items. It was 28px against
      a 56px gap, which put a double-width hole in the strip at the exact point where
      run one handed over to run two, the seam reads as a missing logo. */

.lgs { padding: 30px 0 10px; overflow: hidden; }

.lgs-track {
  display: flex;
  width: max-content;
  animation: lgs-scroll 52s linear infinite;
}

.lgs-run {
  display: flex;
  align-items: center;
  gap: 52px;
  margin: 0;
  /* Equal to the gap. This is what makes the loop seamless. */
  padding: 0 52px 0 0;
  list-style: none;
}

/* An equal cell per brand. The mark is fitted inside it rather than stretched, so a
   square logo and a long wordmark carry the same weight without being distorted. */
.lgs-run li {
  flex: 0 0 auto;
  width: 132px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lgs-run img {
  display: block;
  max-height: 38px;
  max-width: 132px;
  width: auto;
  height: auto;
  object-fit: contain;
  /* Greyscale is baked into the file; this only settles the weight against the page so a
     dense mark and an open one read as the same tone. */
  opacity: .58;
  transition: opacity .25s ease;
}
.lgs:hover img { opacity: .82; }

/* Left to right: the track starts one full run to the left and travels back to zero. */
@keyframes lgs-scroll {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

/* Fade both edges so logos enter and leave rather than being cut off mid-mark. */
@supports (mask-image: linear-gradient(90deg, #000, #000)) {
  .lgs {
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  }
}

/* Dark mode: these are dark marks on transparency, so invert to keep them legible. */
@media (prefers-color-scheme: dark) {
  .lgs-run img { filter: invert(1); opacity: .52; }
  .lgs:hover img { opacity: .78; }
}

@media (prefers-reduced-motion: reduce) {
  /* Motion off, but every logo must stay reachable, so the strip becomes a scrollable
     row rather than a frozen crop of the first eight. */
  .lgs-track { animation: none; }
  .lgs { overflow-x: auto; }
}

@media (max-width: 700px) {
  .lgs-run { gap: 34px; padding-right: 34px; }
  .lgs-run li { width: 96px; }
  .lgs-run img { max-height: 30px; max-width: 96px; }
}