:root{
  --font-display:'Fraunces',Georgia,'Times New Roman',serif;
  --font-body:'Geist',ui-sans-serif,system-ui,sans-serif;
  --font-mono:'Geist Mono',ui-monospace,monospace;
  --maxw:1280px; --gutter:clamp(20px,5vw,72px);
  --r:14px;
}
[data-theme="light"]{
  --bg:#ffffff; --bg-2:#f4f6fb; --bg-3:#eef2fa;
  --ink:#0A0C12; --ink-2:#1C222F; --mut:rgba(28,34,47,.70); --faint:rgba(28,34,47,.40);
  --line:rgba(10,12,18,.12); --line-2:rgba(10,12,18,.07);
  --primary:#1D57CF; --secondary:#1D4AA7; --accent:#FF8600; --accent-text:#B35900;
  --hero-veil:linear-gradient(180deg,rgba(255,255,255,.20),rgba(255,255,255,.55) 55%,rgba(255,255,255,.94));
  --on-image:#0A0C12;
}
[data-theme="dark"]{
  --bg:#090B11; --bg-2:#0d111a; --bg-3:#11161f;
  --ink:#F4F7FF; --ink-2:#C4CEE0; --mut:rgba(196,206,224,.62); --faint:rgba(196,206,224,.40);
  --line:rgba(255,255,255,.12); --line-2:rgba(255,255,255,.07);
  --primary:#528BFF; --secondary:#786EEB; --accent:#FFA028; --accent-text:#FFA028;
  --hero-veil:linear-gradient(180deg,rgba(9,11,17,.30),rgba(9,11,17,.55) 50%,rgba(9,11,17,.97));
  --on-image:#F4F7FF;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
/* the header is fixed at 74px, so every scroll-into-view the browser performs
   (fragment links, the skip link, sequential focus) has to clear it or the top
   of the target lands underneath. 94px = the bar + the 20px the sticky detail
   rail already uses (`.rail{top:94px}`). */
html{scroll-padding-top:94px}
body{
  margin:0; background:var(--bg); color:var(--ink-2);
  font-family:var(--font-body); font-weight:400; line-height:1.6;
  font-size:clamp(15px,1.05vw,17px); overflow-x:hidden;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  transition:background .5s ease,color .5s ease;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
::selection{background:var(--accent); color:#0A0C12}
.wrap{max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter)}
.eyebrow{font-family:var(--font-mono); font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; color:var(--mut)}
.accent{color:var(--accent)}
h1,h2,h3{font-family:var(--font-display); font-weight:420; line-height:1.02; letter-spacing:-.02em; color:var(--ink); margin:0}
.display{font-size:clamp(2.6rem,7.4vw,6.6rem); font-weight:380; line-height:.98}
.h-sec{font-size:clamp(2rem,4.6vw,3.9rem); font-weight:400}
p{margin:0}

/* ---------- header ---------- */
header.site{position:fixed; inset:0 0 auto 0; z-index:50; transition:background .4s ease,border-color .4s ease,backdrop-filter .4s}
header.site .bar{display:flex; align-items:center; gap:24px; height:74px; border-bottom:1px solid transparent}
header.site.scrolled{background:color-mix(in srgb,var(--bg) 78%,transparent); backdrop-filter:blur(14px)}
header.site.scrolled .bar{border-color:var(--line-2)}
.brand{display:flex; align-items:center; gap:12px}
.logo-chip{background:#fff; border-radius:8px; padding:6px 8px; display:flex; box-shadow:0 1px 0 rgba(0,0,0,.06)}
.logo-chip img{height:22px; width:auto}
.brand .tag{font-family:var(--font-mono); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--mut)}
nav.main{margin-inline-start:auto; display:flex; gap:26px}
nav.main a{font-size:.86rem; color:var(--ink-2); opacity:.82; transition:opacity .2s,color .2s}
nav.main a:hover{opacity:1; color:var(--ink)}
.h-actions{display:flex; align-items:center; gap:14px}
.tt{appearance:none; border:1px solid var(--line); background:transparent; color:var(--ink); width:38px; height:38px; border-radius:50%; cursor:pointer; display:grid; place-items:center; transition:border-color .2s,transform .2s}
.tt:hover{border-color:var(--accent); transform:translateY(-1px)}
.tt svg{width:17px; height:17px}
.btn{display:inline-flex; align-items:center; gap:8px; font-size:.84rem; font-weight:500; padding:11px 20px; border-radius:999px; background:var(--accent); color:#0A0C12; border:1px solid var(--accent); transition:transform .2s,box-shadow .25s}
.btn:hover{transform:translateY(-1px); box-shadow:0 8px 24px -8px var(--accent)}
.btn.ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn.ghost:hover{border-color:var(--ink); box-shadow:none}
@media(max-width:880px){ nav.main{display:none} }

/* ---------- hero ---------- */
.hero{position:relative; min-height:92svh; display:flex; align-items:flex-end; padding-bottom:clamp(48px,8vh,96px); overflow:hidden}
.hero .bg{position:absolute; inset:0; z-index:0}
.hero .bg img{width:100%; height:120%; object-fit:cover; will-change:transform}
.hero .bg::after{content:""; position:absolute; inset:0; background:var(--hero-veil)}
.hero .inner{position:relative; z-index:1; width:100%}
.hero .display{color:var(--on-image); max-width:16ch}
.hero .display em{font-style:italic; font-weight:360; color:var(--accent-text)}
.hero .lede{margin-top:26px; max-width:52ch; font-size:clamp(1rem,1.5vw,1.25rem); color:var(--ink-2)}
[data-theme="dark"] .hero .lede{color:#cdd6e6}
.hero-cta{margin-top:34px; display:flex; flex-wrap:wrap; gap:14px}
.hero .eyebrow{display:inline-flex; gap:12px; align-items:center; margin-bottom:22px}
.hero .eyebrow::before{content:""; width:34px; height:1px; background:var(--accent)}

.strip{border-block:1px solid var(--line-2); background:var(--bg)}
.strip .row{display:flex; flex-wrap:wrap; gap:10px 34px; padding-block:18px; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--mut)}
.strip .row span{display:inline-flex; gap:34px}
.strip b{color:var(--ink); font-weight:500}

/* ---------- generic section ---------- */
section{padding-block:clamp(72px,12vh,150px)}
.lead-num{font-family:var(--font-mono); font-size:.72rem; letter-spacing:.2em; color:var(--accent-text)}
.sec-head{display:grid; grid-template-columns:1fr; gap:18px; margin-bottom:clamp(40px,6vw,72px)}
.sec-head .k{display:flex; align-items:center; gap:14px}
.sec-head .k .eyebrow{display:inline-flex; align-items:center; gap:12px}

/* about */
.about-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,80px); align-items:center}
.about-grid figure{margin:0; border-radius:var(--r); overflow:hidden; border:1px solid var(--line-2)}
.about-grid figure img{width:100%; aspect-ratio:4/3; object-fit:cover}
.about-copy p+p{margin-top:20px}
.about-copy .big{font-family:var(--font-display); font-weight:380; font-size:clamp(1.5rem,2.4vw,2.1rem); line-height:1.18; color:var(--ink); letter-spacing:-.01em}
@media(max-width:860px){ .about-grid{grid-template-columns:1fr} }

/* vmv */
.vmv{display:grid; gap:0; border-top:1px solid var(--line)}
.vmv .row{display:grid; grid-template-columns:auto 1fr; gap:clamp(20px,5vw,64px); padding-block:clamp(28px,4vw,46px); border-bottom:1px solid var(--line); align-items:start}
.vmv .row .lab{font-family:var(--font-mono); font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; color:var(--mut); padding-top:.5em; min-width:96px}
.vmv .row q{font-family:var(--font-display); font-weight:360; font-style:normal; font-size:clamp(1.4rem,3vw,2.4rem); line-height:1.16; color:var(--ink); letter-spacing:-.015em; quotes:none}
.vmv .row q::before{content:"“"; color:var(--accent)}
.vmv .row q::after{content:"”"; color:var(--accent)}

/* index list (services / products) */
.idx{border-top:1px solid var(--line)}
.idx a, .idx .item{display:grid; grid-template-columns:auto 1fr auto; gap:clamp(16px,3vw,44px); align-items:baseline; padding-block:clamp(20px,2.6vw,30px); border-bottom:1px solid var(--line); transition:background .3s,padding-inline-start .3s}
.idx .item:hover{background:var(--bg-2); padding-inline-start:14px}
.idx .n{font-family:var(--font-mono); font-size:.78rem; color:var(--accent-text); letter-spacing:.1em}
.idx .nm{font-family:var(--font-display); font-weight:400; font-size:clamp(1.3rem,2.6vw,2rem); color:var(--ink); letter-spacing:-.01em}
.idx .ds{color:var(--mut); max-width:46ch; justify-self:start; font-size:.96rem}
/* the row-affordance arrow was --faint (2.35:1 light / 2.75:1 dark) — the one
   glyph that says "this row is clickable" was invisible until hover. --mut
   clears AA; the hover promotion to --on-card-accent still reads as a delta. */
.idx .ar{color:var(--mut); font-family:var(--font-mono); transition:color .25s,transform .25s}
.idx .item:hover .ar{color:var(--accent); transform:translateX(4px)}
/* (the responsive reflow of .idx lives in the MERGE LAYER below — it needs the
   explicit grid-template-areas track, which the base 3-column grid predates) */

/* industries */
.ind{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.ind .cell{background:var(--bg); padding:clamp(26px,3vw,42px); min-height:300px; display:flex; flex-direction:column; gap:14px}
.ind .cell .ic{width:40px; height:40px; border-radius:10px; display:grid; place-items:center; background:color-mix(in srgb,var(--primary) 14%,transparent); color:var(--primary); margin-bottom:8px}
.ind .cell h3{font-size:clamp(1.3rem,2vw,1.7rem)}
.ind .cell p{color:var(--mut); font-size:.96rem; margin-top:auto}
@media(max-width:820px){ .ind{grid-template-columns:1fr} }

/* stories */
.stories{display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,2.4vw,30px)}
.story{border:1px solid var(--line); border-radius:var(--r); padding:clamp(24px,2.6vw,38px); background:var(--bg); display:flex; flex-direction:column; gap:18px; transition:border-color .3s,transform .3s}
.story:hover{border-color:color-mix(in srgb,var(--accent) 55%,var(--line)); transform:translateY(-3px)}
.story .top{display:flex; align-items:center; gap:16px}
.story .chip{background:#fff; border-radius:10px; padding:10px 12px; width:84px; height:54px; display:grid; place-items:center; flex:none}
.story .chip img{max-height:34px; width:auto; object-fit:contain}
.story .kname{font-family:var(--font-display); font-weight:420; font-size:1.5rem; color:var(--ink)}
.story .ktag{font-family:var(--font-mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-text)}
.story p{color:var(--mut); font-size:.97rem}
@media(max-width:720px){ .stories{grid-template-columns:1fr} }

/* journey */
.journey{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,48px)}
.journey .step{border-top:2px solid var(--line); padding-top:22px}
.journey .yr{font-family:var(--font-display); font-weight:400; font-size:clamp(2.4rem,5vw,4rem); color:var(--ink); line-height:1}
.journey .step:first-child .yr{color:var(--primary)}
.journey .step p{color:var(--mut); margin-top:14px; font-size:.96rem; max-width:34ch}
@media(max-width:760px){ .journey{grid-template-columns:1fr; gap:0} .journey .step{padding-block:26px; border-top:1px solid var(--line)} }

/* insights */
.insights{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(22px,3vw,40px)}
.insight{display:grid; grid-template-columns:170px 1fr; gap:22px; align-items:center; padding-block:8px}
.insight figure{margin:0; border-radius:12px; overflow:hidden; border:1px solid var(--line-2)}
.insight figure img{aspect-ratio:4/3; object-fit:cover; width:100%; height:auto; transition:transform .8s cubic-bezier(.16,1,.3,1)}
.insight:hover figure img{transform:scale(1.05)}
.insight .kdate{font-family:var(--font-mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-text)}
.insight h3{font-size:1.18rem; font-weight:440; line-height:1.18; margin-top:8px; letter-spacing:-.01em}

/* careers */
.careers .role{font-family:var(--font-display); font-size:clamp(1.3rem,2.6vw,2rem); color:var(--ink)}

/* contact */
.contact{background:var(--bg-2); border-top:1px solid var(--line)}
.contact .grid{display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(36px,6vw,90px); align-items:end}
.contact .display{color:var(--ink); max-width:14ch}
.contact dl{display:grid; gap:18px; margin:0}
.contact dt{font-family:var(--font-mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--mut); margin-bottom:4px}
.contact dd{margin:0; font-size:1.05rem; color:var(--ink)}
.contact dd a:hover{color:var(--accent-text)}
@media(max-width:820px){ .contact .grid{grid-template-columns:1fr} }

footer.site{border-top:1px solid var(--line); padding-block:34px; background:var(--bg-2)}
footer.site .row{display:flex; flex-wrap:wrap; gap:20px; align-items:center; justify-content:space-between}
footer.site .soc{display:flex; gap:8px}
footer.site .soc a{width:38px; height:38px; border:1px solid var(--line); border-radius:50%; display:grid; place-items:center; color:var(--ink-2); transition:border-color .2s,color .2s,transform .2s}
footer.site .soc a:hover{border-color:var(--accent); color:var(--accent-text); transform:translateY(-2px)}
footer.site .cr{font-family:var(--font-mono); font-size:.72rem; color:var(--mut); letter-spacing:.06em}

/* signature motion: quiet rise + clip reveal */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
.reveal.in{opacity:1; transform:none}
.reveal[data-d="1"]{transition-delay:.08s}
.reveal[data-d="2"]{transition-delay:.16s}
.reveal[data-d="3"]{transition-delay:.24s}
/* Off-screen but RTL-safe (a −9999px left offset overflows in RTL documents). */
.skip{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0}
.skip:focus{width:auto; height:auto; margin:0; clip:auto; clip-path:none; left:16px; top:16px; z-index:99; background:var(--bg); color:var(--ink); padding:10px 16px; border:1px solid var(--accent); border-radius:8px}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:6px}
/* =========================================================================
   PAGE SYSTEM — inner pages, detail layout, prose, forms, mobile nav, footer
   (additive; reuses the tokens/primitives above — desktop landing unchanged)
   ========================================================================= */

/* (the inner-page top offset, the detail masthead, the covers and the related
   strip all live in the INNER PAGES section at the end of this file — they are
   band components now, not one-off page rules.) */

/* ---------- prose (rendered markdown) ---------- */
.prose{max-width:72ch; color:var(--ink-2); font-size:clamp(1rem,1.12vw,1.12rem); line-height:1.72}
.prose>*:first-child{margin-top:0}
.prose p{margin:0 0 1.15em}
.prose h2{font-family:var(--font-display); font-weight:420; font-size:clamp(1.5rem,2.6vw,2.1rem); line-height:1.12; letter-spacing:-.015em; color:var(--ink); margin:1.9em 0 .55em}
.prose h3{font-family:var(--font-display); font-weight:440; font-size:clamp(1.25rem,2vw,1.6rem); line-height:1.15; color:var(--ink); margin:1.6em 0 .5em}
.prose h4{font-family:var(--font-body); font-weight:600; font-size:1.05rem; color:var(--ink); margin:1.5em 0 .4em; letter-spacing:.01em}
.prose ul,.prose ol{margin:0 0 1.15em; padding-inline-start:1.3em}
.prose li{margin:0 0 .5em}
.prose li::marker{color:var(--accent)}
.prose a{color:var(--ink); text-decoration:underline; text-decoration-color:color-mix(in srgb,var(--accent) 60%,transparent); text-underline-offset:3px; text-decoration-thickness:1px; transition:text-decoration-color .2s,color .2s}
.prose a:hover{color:var(--accent-text); text-decoration-color:var(--accent)}
.prose strong{color:var(--ink); font-weight:600}
.prose em{font-style:italic}
.prose blockquote{margin:1.6em 0; padding-block:6px; padding-inline-start:24px; border-inline-start:2px solid var(--accent); font-family:var(--font-display); font-weight:360; font-size:clamp(1.2rem,2vw,1.55rem); line-height:1.28; color:var(--ink)}
.prose hr{border:0; height:1px; background:var(--line); margin:2.4em 0}
.prose code{font-family:var(--font-mono); font-size:.9em; background:var(--bg-2); border:1px solid var(--line-2); border-radius:6px; padding:.1em .4em}
.prose pre{background:var(--bg-2); border:1px solid var(--line-2); border-radius:var(--r); padding:18px 20px; overflow:auto; margin:0 0 1.15em}
.prose pre code{background:none; border:0; padding:0}
.prose img{border-radius:12px; border:1px solid var(--line-2); margin:1.4em 0}
.prose-tight{font-size:clamp(1rem,1.05vw,1.08rem)}
.prose-tight h2{margin-top:1.3em}

/* ---------- about / careers: key factors ---------- */
.factor{display:flex; flex-direction:column; gap:14px}
.factor-n{font-family:var(--font-mono); font-size:.78rem; letter-spacing:.1em; color:var(--accent-text)}
.factor p{color:var(--ink); font-family:var(--font-display); font-weight:400; font-size:clamp(1.1rem,1.6vw,1.35rem); line-height:1.24; letter-spacing:-.01em; margin-top:auto}

/* ---------- list card extras ---------- */
.ins-sum{color:var(--mut); font-size:.92rem; margin-top:8px; max-width:48ch}
.story-more{margin-top:auto; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-text)}
.empty-note{color:var(--mut); font-size:1.05rem}
.empty-note a{color:var(--accent-text)}

/* ---------- 404 ---------- */
.notfound .display{max-width:14ch; margin-top:14px}
.notfound .lede{margin-top:22px; max-width:44ch; font-size:clamp(1rem,1.5vw,1.2rem); color:var(--ink-2)}
.notfound .hero-cta{margin-top:32px}

/* ---------- contact + apply layouts ---------- */
.contact-grid,.apply-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(20px,2.4vw,34px); align-items:start}
.apply-grid{grid-template-columns:.8fr 1.2fr}
.contact-info dl{display:grid; gap:16px; margin:0 0 clamp(20px,2.4vw,26px)}
.contact-info dt{font-family:var(--font-mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--mut); margin-bottom:4px}
.contact-info dd{margin:0; font-size:1.05rem; color:var(--ink)}
.contact-info dd a:hover{color:var(--accent-text)}
.contact-info .soc{display:flex; gap:8px}
.contact-info .soc a{width:38px; height:38px; border:1px solid var(--line); border-radius:50%; display:grid; place-items:center; color:var(--ink-2); transition:border-color .2s,color .2s,transform .2s}
.contact-info .soc a:hover{border-color:var(--accent); color:var(--accent-text); transform:translateY(-2px)}
.apply-meta dl{display:grid; gap:14px; margin:0 0 22px; border-top:1px solid var(--line); padding-top:22px}
.apply-meta dt{font-family:var(--font-mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--mut); margin-bottom:3px}
.apply-meta dd{margin:0; color:var(--ink); font-size:1.02rem}
.apply-meta .apply-note{color:var(--mut); font-size:.95rem; line-height:1.6}
.apply-meta .apply-note a{color:var(--accent-text)}
@media(max-width:820px){ .contact-grid,.apply-grid{grid-template-columns:1fr} }

/* ---------- forms ---------- */
.lead-form{display:grid; gap:20px}
.field{display:grid; gap:8px}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start}
.lead-form label{font-family:var(--font-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mut)}
/* the asterisk is the only VISUAL required cue, so it has to be legible: raw
   --accent measures 2.42:1 on the white form panel. It takes the darkest of the
   two orange text tokens (light #9C4D00, dark #FFA028 — unchanged) because the
   panel is white at 1440 but sits on the tinted band surface on a phone, and
   --accent-text only clears 4.5:1 against the white one. */
.lead-form .req{color:var(--on-card-accent)}
/* "(optional)" is inside the <label> and is announced — content, not decoration.
   --faint measured 2.42:1 light / 2.83:1 dark; it takes the label's own token. */
.lead-form .opt{text-transform:none; letter-spacing:0; color:var(--mut)}
.lead-form input,.lead-form textarea{width:100%; font-family:var(--font-body); font-size:1rem; color:var(--ink); background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:13px 15px; transition:border-color .2s,box-shadow .2s}
.lead-form textarea{resize:vertical; min-height:130px; line-height:1.55}
.lead-form input::placeholder,.lead-form textarea::placeholder{color:var(--faint)}
.lead-form input:focus,.lead-form textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 26%,transparent)}
.lead-form [aria-invalid="true"]{border-color:#e5484d}
.lead-form [aria-invalid="true"]:focus{box-shadow:0 0 0 3px color-mix(in srgb,#e5484d 26%,transparent)}
.field-err{color:#e5484d; font-size:.85rem; margin:0}
.form-actions{display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.form-actions .btn{cursor:pointer}
.form-actions .btn[disabled]{opacity:.6; cursor:progress; box-shadow:none; transform:none}
.form-status{margin:0; font-size:.92rem; color:var(--mut)}
.form-status.error{color:#e5484d}
.form-success{border:1px solid color-mix(in srgb,var(--accent) 45%,var(--line)); border-radius:var(--r); padding:clamp(22px,3vw,32px); background:color-mix(in srgb,var(--accent) 7%,var(--bg))}
.form-success .fs-title{font-family:var(--font-display); font-weight:420; font-size:clamp(1.3rem,2vw,1.7rem); color:var(--ink); outline:none}
.form-success .fs-text{color:var(--mut); margin-top:10px}
.hp{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0}
@media(max-width:520px){ .field-row{grid-template-columns:1fr} }

/* ---------- header hamburger + mobile nav ---------- */
.nav-toggle{display:none; margin-inline-start:auto; appearance:none; border:1px solid var(--line); background:transparent; width:40px; height:40px; border-radius:10px; cursor:pointer; place-items:center; color:var(--ink); transition:border-color .2s}
.nav-toggle:hover{border-color:var(--accent)}
.nav-toggle-bars{display:grid; gap:4px; width:18px}
.nav-toggle-bars i{display:block; height:1.6px; background:currentColor; border-radius:2px}
.mnav{position:fixed; inset:0; z-index:60}
.mnav[hidden]{display:none}
/* Only the open menu captures pointer events — a closing/closed overlay can never
   linger and eat page clicks (defends against a missed transitionend). */
.mnav:not(.open){pointer-events:none}
.mnav.open{pointer-events:auto}
.mnav-backdrop{position:absolute; inset:0; background:color-mix(in srgb,#000 55%,transparent); opacity:0; transition:opacity .3s ease}
.mnav.open .mnav-backdrop{opacity:1}
.mnav-panel{position:absolute; top:0; right:0; height:100%; width:min(400px,88vw); background:var(--bg); border-left:1px solid var(--line); padding:22px clamp(22px,6vw,34px) 34px; display:flex; flex-direction:column; overflow-y:auto; transform:translateX(100%); transition:transform .36s cubic-bezier(.16,1,.3,1)}
.mnav.open .mnav-panel{transform:none}
.mnav-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:24px}
.mnav-x{width:38px; height:38px}
.mnav-links{list-style:none; margin:0; padding:0; display:grid; gap:2px; border-top:1px solid var(--line)}
.mnav-links a{display:block; padding:16px 2px; border-bottom:1px solid var(--line); font-family:var(--font-display); font-weight:400; font-size:1.5rem; color:var(--ink); letter-spacing:-.01em; transition:color .2s,padding-inline-start .2s}
.mnav-links a:hover,.mnav-links a:focus-visible{color:var(--accent-text); padding-inline-start:8px}
.mnav-foot{display:flex; align-items:center; gap:14px; margin-top:auto; padding-top:26px}
.mnav-foot .btn{flex:1; justify-content:center}
@media(max-width:880px){
  .nav-toggle{display:grid; width:44px; height:44px}
  .mnav-x{width:44px; height:44px}
  .h-actions{display:none}
  /* below the nav breakpoint the pointer is a finger: every control the finger
     can reach gets a 44px box. The visual weight is unchanged — these are the
     hit boxes growing, not the type. */
  .mnav-foot .tt{width:44px; height:44px}
  .contact-info .soc a{width:44px; height:44px}
  .btn{min-height:44px}
  /* the related section's heading link is a 37px inline box; padding on an
     inline element grows the hit target without touching the line rhythm. */
  .related h2 a{padding-block:6px}
}
@media(max-width:400px){ .brand .tag{display:none} }

/* ---------- footer columns ---------- */
.foot-cols{display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr; gap:clamp(28px,4vw,56px); padding-bottom:34px; margin-bottom:28px; border-bottom:1px solid var(--line-2)}
.foot-brand .logo-chip{background:#fff; border-radius:8px; padding:6px 8px; display:inline-flex; box-shadow:0 1px 0 rgba(0,0,0,.06)}
.foot-brand .logo-chip img{height:22px; width:auto}
.foot-tag{margin-top:16px; max-width:30ch; color:var(--mut); font-size:.95rem}
.foot-contact{display:grid; gap:10px; margin:20px 0 0}
.foot-contact dt{font-family:var(--font-mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); margin-bottom:2px}
.foot-contact dd{margin:0; font-size:.94rem; color:var(--ink-2)}
.foot-contact dd a:hover{color:var(--accent-text)}
.foot-h{font-family:var(--font-mono); font-size:.68rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--mut)}
.foot-col ul{list-style:none; margin:16px 0 0; padding:0; display:grid; gap:11px}
.foot-col a{font-size:.94rem; color:var(--ink-2); opacity:.84; transition:opacity .2s,color .2s}
.foot-col a:hover{opacity:1; color:var(--accent-text)}
@media(max-width:820px){ .foot-cols{grid-template-columns:1fr 1fr; gap:32px} .foot-brand{grid-column:1/-1} }
@media(max-width:520px){ .foot-cols{grid-template-columns:1fr} }

/* (MOTION HYGIENE — the single `prefers-reduced-motion` block lives at the very
   end of this file, after every component and RTL rule, so nothing can outrank
   it on source order.) */

/* =========================================================================
   LANGUAGE SWITCHER (both directions)
   ========================================================================= */
.lang-switch{display:inline-flex; align-items:center; height:38px; padding:0 14px; border:1px solid var(--line); border-radius:999px; font-family:var(--font-body); font-size:.8rem; line-height:1; letter-spacing:normal; text-transform:none; color:var(--ink-2); opacity:.9; white-space:nowrap; transition:border-color .2s,color .2s,transform .2s}
.lang-switch:hover{border-color:var(--accent); color:var(--ink); opacity:1; transform:translateY(-1px)}
.mnav-langs{display:flex; gap:8px; margin-top:22px}
.mnav-lang{flex:1; text-align:center; padding:11px 12px; border:1px solid var(--line); border-radius:10px; font-family:var(--font-body); font-size:.92rem; letter-spacing:normal; color:var(--ink-2); transition:border-color .2s,color .2s,background .2s}
.mnav-lang:hover{border-color:var(--accent); color:var(--ink)}
.mnav-lang.is-current{border-color:var(--accent); color:var(--ink); background:color-mix(in srgb,var(--accent) 8%,transparent)}
/* Arabic label rendered inside the LTR chrome must never inherit Latin tracking */
[lang="ar"]{letter-spacing:normal}

/* =========================================================================
   DESIGN SYSTEM — "D-MERGED"
   ONE token system for every band below the credibility strip: one surface
   ramp, one elevation scale, one radius scale, one border token, one easing,
   ONE hover gesture and one band rhythm. The header, the hero and the
   credibility strip above are untouched.
   ========================================================================= */

/* ---- ONE radius / motion / rhythm scale --------------------------------- */
:root{
  --r-sm:10px; --r-lg:20px;
  --band-pad:clamp(48px,5vw,64px);
  --e-out:cubic-bezier(.16,1,.3,1);
  /* ONE hover gesture: one duration, one easing, one lift — used by every
     card, row, tile and schematic on the page. No second opinion anywhere. */
  --t-hover:.4s; --lift:-3px;
  /* per-image exposure trim. The duotone is only a system if every photograph
     enters it at the same luminance, so each picture carries its own
     multiplier (set inline from `_data/art.js`) and they all land on ~95
     (light) / ~55 (dark). */
  --ph-b:1; --ph-b-l:1; --ph-c:1; --ph-c-l:1;
  --dia-w:200px;
  --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' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  /* the scrim is measured in PIXELS from the top of the text block, so the
     opaque stop always lands under the copy no matter how tall the card grows.
     Text over photography is therefore deterministically AA in both themes. */
  --scrim:linear-gradient(180deg,
    color-mix(in srgb,var(--card-base) 0%,transparent) 0,
    color-mix(in srgb,var(--card-base) 22%,transparent) 16px,
    color-mix(in srgb,var(--card-base) 68%,transparent) 38px,
    color-mix(in srgb,var(--card-base) 94%,transparent) 54px,
    var(--card-base) 68px);
  --scrim-pad:76px;
}
[data-theme="dark"]{
  /* the measurable surface ramp */
  --surf-1:#090B11; --surf-2:#0c1017; --surf-3:#0f141e;
  --grain-a:.055;
  --plane-a:radial-gradient(70% 90% at 15% 0%,color-mix(in srgb,var(--primary) 20%,transparent),transparent 68%);
  --plane-b:radial-gradient(60% 80% at 90% 100%,color-mix(in srgb,var(--secondary) 18%,transparent),transparent 70%);
  /* one elevation scale */
  --sh-1:0 1px 2px rgba(0,0,0,.55);
  --sh-2:0 16px 36px -22px rgba(0,0,0,1),0 3px 10px rgba(0,0,0,.42);
  --sh-3:0 34px 70px -30px rgba(0,0,0,1),0 8px 22px rgba(0,0,0,.5);
  /* one card surface + one border token */
  --card-bg:linear-gradient(168deg,rgba(255,255,255,.058),rgba(255,255,255,.018) 58%,rgba(255,255,255,.006));
  --card-bd:rgba(255,255,255,.11);
  --card-bd-h:color-mix(in srgb,var(--accent) 48%,rgba(255,255,255,.12));
  /* the AA-safe image-card system */
  --card-base:#0b0e15;
  --card-veil:linear-gradient(180deg,rgba(9,11,17,.04) 0%,rgba(9,11,17,.42) 44%,rgba(9,11,17,.74) 78%,rgba(9,11,17,.88) 100%);
  --card-tint:linear-gradient(206deg,color-mix(in srgb,var(--primary) 40%,transparent) 0%,transparent 60%),
              linear-gradient(18deg,color-mix(in srgb,var(--accent) 20%,transparent) 0%,transparent 44%);
  --tint-blend:normal; --tint-op:.88;
  --on-card:#F4F7FF; --on-card-mut:rgba(210,220,238,.80); --on-card-accent:#FFA028;
  --img-fx:saturate(.60) contrast(1.12) brightness(.78);
  --img-fx-soft:saturate(.70) contrast(1.06) brightness(.86);
  --glass:color-mix(in srgb,#0b0e15 76%,transparent);
  --plate-bg:#ffffff;
}
[data-theme="light"]{
  --surf-1:#ffffff; --surf-2:#f3f6fc; --surf-3:#e9eef8;
  --grain-a:.032;
  --plane-a:radial-gradient(70% 90% at 15% 0%,color-mix(in srgb,var(--primary) 9%,transparent),transparent 68%);
  --plane-b:radial-gradient(60% 80% at 90% 100%,color-mix(in srgb,var(--secondary) 8%,transparent),transparent 70%);
  --sh-1:0 1px 1px rgba(16,24,40,.04),0 3px 6px -1px rgba(16,24,40,.08),0 12px 24px -12px rgba(16,24,40,.16);
  --sh-2:0 1px 2px rgba(16,24,40,.05),0 6px 12px -2px rgba(16,24,40,.10),0 22px 42px -16px rgba(16,24,40,.22);
  --sh-3:0 2px 4px rgba(16,24,40,.06),0 12px 24px -4px rgba(16,24,40,.12),0 40px 72px -22px rgba(16,24,40,.28);
  --card-bg:linear-gradient(168deg,#ffffff,#ffffff 62%,#fafcff);
  --card-bd:rgba(10,12,18,.10);
  --card-bd-h:color-mix(in srgb,var(--accent) 52%,rgba(10,12,18,.11));
  --card-base:#ffffff;
  --card-veil:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.08) 50%,rgba(255,255,255,.24) 82%,rgba(255,255,255,.34) 100%);
  /* light is AUTHORED, not bleached: the photo is reduced to pure luminance and
     re-coloured with a brand blue -> violet -> amber duotone (mix-blend-mode:color). */
  --card-tint:linear-gradient(206deg,var(--secondary) 0%,var(--secondary) 46%,#9C5F2A 78%,var(--accent) 100%);
  --tint-blend:color; --tint-op:.72;
  --on-card:#0A0C12; --on-card-mut:rgba(28,34,47,.78); --on-card-accent:#9C4D00;
  --img-fx:grayscale(1) contrast(1.26) brightness(.74);
  --img-fx-soft:grayscale(1) contrast(1.12) brightness(.88);
  --glass:color-mix(in srgb,#ffffff 80%,transparent);
  --plate-bg:#ffffff;
}

/* AA correction: the footer's 9.9px labels were --faint, which measures
   2.39:1 (light) / 2.84:1 (dark). --mut clears 4.5:1 in both. */
.foot-contact dt{color:var(--mut)}

/* AA correction: --mut clears 4.5:1 against the page background in both themes,
   but a dark PANEL is a lighter surface than --bg, and the 10-11px micro-labels
   that sit on one (EMAIL / PHONE / STUDIO, the rail's AT A GLANCE, the form's
   "(optional)") measured 4.10-4.33:1 there. The panel republishes --mut at a
   higher alpha, so only the panel-borne cases move — everything on --bg keeps
   the ramp it was designed with. */
[data-theme="dark"] .panel,[data-theme="dark"] .rail-card{--mut:rgba(196,206,224,.78)}

/* every orange micro-label uses the higher-contrast accent so 10px mono still
   clears AA on the light theme's near-white surfaces (measured, not assumed) */
.band .lead-num,.idx .n,.story .ktag,.insight .kdate,.tl-tag,.ind .ktag{color:var(--on-card-accent)}

/* ---- BANDS: the measurable surface ramp --------------------------------- */
.band{position:relative; padding-block:var(--band-pad); background:var(--surf-1); isolation:isolate; overflow:clip}
.band>.wrap{position:relative; z-index:3}
.band::after{content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background-image:var(--grain); background-size:140px 140px; opacity:var(--grain-a)}
.band.tint{background:var(--surf-2)}
.band.deep{background:var(--surf-3)}
.band.tint,.band.deep{border-block:1px solid var(--line-2)}
/* masked blueprint grid */
.band.tex-grid::before{content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:linear-gradient(var(--line-2) 1px,transparent 1px),linear-gradient(90deg,var(--line-2) 1px,transparent 1px);
  background-size:78px 78px; background-position:center top;
  -webkit-mask-image:radial-gradient(120% 78% at 50% 0%,#000 8%,transparent 72%);
  mask-image:radial-gradient(120% 78% at 50% 0%,#000 8%,transparent 72%)}
/* layered translucent light planes */
.band.tex-plane::before{content:""; position:absolute; inset:-10% -5% auto -5%; height:120%; z-index:0; pointer-events:none;
  background-image:var(--plane-a),var(--plane-b); opacity:.9}

/* ---- section head: the hairline running out of the eyebrow -------------- */
.band .sec-head{margin-bottom:clamp(20px,2.2vw,28px); gap:12px}
.band .h-sec{font-size:clamp(1.9rem,4vw,3.4rem); text-wrap:balance}
.band .sec-head .k::after{content:""; flex:1 1 auto; height:1px; min-width:24px;
  background:linear-gradient(90deg,var(--line) 0%,transparent 88%)}

/* ---- scroll rule, parked on the bottom edge of the viewport -------------
   Never painted across the locked header's own bottom border. */
.sprog{position:fixed; inset:auto 0 0 0; height:1px; z-index:51; pointer-events:none;
  background:var(--line-2); opacity:0; transition:opacity .4s ease}
body.is-scrolled .sprog{opacity:1}
.sprog i{display:block; height:100%; width:100%; transform:scaleX(var(--p,0)); transform-origin:left center;
  background:linear-gradient(90deg,color-mix(in srgb,var(--primary) 88%,transparent),var(--accent))}

/* ---- shared photo treatment: duotone veil + brand tint + ken-burns ------- */
.ph{display:block; position:relative; overflow:hidden; isolation:isolate; background:var(--bg-3)}
/* the image is taken out of flow so a lazily-decoded photograph can NEVER
   resize its frame — every .ph carries its own aspect-ratio or height, so the
   page's layout is final before a single byte of imagery arrives */
.ph>img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:var(--img-fx) brightness(var(--ph-b)) contrast(var(--ph-c));
  transform:scale(1.001); transition:transform 1.4s var(--e-out),filter .5s ease}
.ph.soft>img{filter:var(--img-fx-soft) brightness(var(--ph-b)) contrast(var(--ph-c))}
.ph::after{content:""; position:absolute; inset:0; background:var(--card-tint);
  mix-blend-mode:var(--tint-blend); opacity:var(--tint-op); pointer-events:none}
.ph-veil::before{content:""; position:absolute; inset:0; z-index:1; background:var(--card-veil); pointer-events:none}
.ph-hover:hover>img{transform:scale(1.06)}
.op-t>img{object-position:50% 18%}
.op-b>img{object-position:50% 82%}
.op-l>img{object-position:16% 50%}
.op-r>img{object-position:84% 50%}
/* the text plate that guarantees AA over any photograph */
.pbody{position:relative; background:var(--scrim);
  padding:var(--scrim-pad) clamp(18px,1.9vw,24px) clamp(17px,1.8vw,22px);
  display:flex; flex-direction:column}

/* ================= 01 ABOUT — layered plate + stat rail ================== */
#about .about-grid{grid-template-columns:1.02fr .98fr; gap:clamp(28px,4vw,64px); align-items:center}
/* the base rule is `.about-grid figure` (0,1,1) — match its specificity to un-clip the inset */
.about-grid figure.about-fig{position:relative; margin:0 0 26px; border:0; border-radius:0; overflow:visible}
.about-fig .plate{position:relative; border-radius:var(--r-lg); overflow:hidden; isolation:isolate;
  border:1px solid var(--card-bd); box-shadow:var(--sh-3)}
/* `height:auto` is load-bearing: an intrinsic `height` attribute on the <img>
   (kept for CLS) would otherwise be a used height and `aspect-ratio` would
   never apply — the inset grew to its full 600px source height. */
.about-fig .plate img{width:100%; height:auto; aspect-ratio:5/4; object-fit:cover; filter:var(--img-fx) brightness(var(--ph-b)) contrast(var(--ph-c))}
.about-fig .plate::after,.about-fig .inset::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:var(--card-tint); mix-blend-mode:var(--tint-blend); opacity:var(--tint-op)}
.about-fig .inset{position:absolute; inset-inline-end:16px; bottom:-26px; width:44%; max-width:230px; isolation:isolate;
  border-radius:var(--r); overflow:hidden; border:1px solid var(--card-bd); box-shadow:var(--sh-3); background:var(--surf-1)}
.about-fig .inset img{width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; filter:var(--img-fx) brightness(var(--ph-b)) contrast(var(--ph-c))}
.about-fig .badge{position:absolute; top:14px; inset-inline-start:14px; z-index:2;
  font-family:var(--font-mono); font-size:.62rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--on-card); background:var(--glass); backdrop-filter:blur(8px);
  border:1px solid var(--card-bd); border-radius:999px; padding:6px 12px}
.stat-rail{display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin:clamp(22px,3vw,30px) 0 0;
  border-top:1px solid var(--line)}
.stat-rail>div{display:flex; flex-direction:column; padding-block-start:16px; padding-inline-end:14px;
  border-inline-end:1px solid var(--line-2)}
.stat-rail>div:last-child{border-inline-end:0}
.stat-rail dt{font-family:var(--font-mono); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--mut); order:2; margin-top:4px; line-height:1.35}
.stat-rail dd{margin:0; order:1; font-family:var(--font-display); font-weight:400; line-height:1;
  font-size:clamp(1.5rem,2.5vw,2.1rem); color:var(--ink); font-variant-numeric:tabular-nums}
.stat-rail>div:nth-child(2) dd{color:var(--accent-text)}
@media(max-width:860px){ #about .about-grid{grid-template-columns:1fr} .about-fig .inset{width:38%} }
@media(max-width:520px){ .stat-rail{grid-template-columns:1fr 1fr; row-gap:14px}
  .stat-rail>div:nth-child(2){border-inline-end:0} }

/* ================= 02 VMV — photographic plate per row =================== */
.vmv .row{grid-template-columns:clamp(96px,9.4vw,132px) minmax(72px,auto) minmax(0,1fr);
  gap:clamp(18px,2.2vw,30px); padding-block:clamp(16px,1.8vw,22px); align-items:center}
.vmv-fig{width:100%; aspect-ratio:1; border-radius:var(--r); border:1px solid var(--card-bd); box-shadow:var(--sh-2)}
.vmv .row .lab{padding-top:0; min-width:0}
.vmv .row q{font-size:clamp(1.15rem,2.1vw,1.72rem); line-height:1.28}
.vmv .row:hover .vmv-fig>img{transform:scale(1.07)}
@media(max-width:760px){
  .vmv .row{grid-template-columns:76px minmax(0,1fr); gap:6px 16px; align-items:start}
  .vmv-fig{aspect-ratio:1; grid-column:1; grid-row:1/3; align-self:start}
  .vmv .row .lab{grid-column:2; grid-row:1; align-self:center}
  .vmv .row q{grid-column:2; grid-row:2; font-size:1.05rem; line-height:1.5}
}

/* ========== THE ROW FIX — explicit tracks, explicit named areas ===========
   3 columns / 4 children let the "→" wrap onto an implicit second row and
   doubled every row's height. grid-template-areas means a child can only ever
   land where it belongs. The 5-column `.cap` variant carries the schematic in
   its own named area, on the same rules.                                    */
.idx a,.idx .item{
  display:grid;
  grid-template-columns:auto minmax(0,1.02fr) minmax(0,1.18fr) auto;
  grid-template-areas:"n nm ds ar";
  column-gap:clamp(14px,2vw,30px); row-gap:0;
  align-items:center; min-height:84px;
  padding-block:clamp(12px,1.4vw,17px); padding-inline:12px;
  border-bottom:1px solid var(--line); position:relative;
  transition:background var(--t-hover) var(--e-out),border-color var(--t-hover) var(--e-out);
}
.idx .n{grid-area:n; align-self:center}
.idx .nm,.idx .role{grid-area:nm; line-height:1.14; font-size:clamp(1.1rem,1.7vw,1.4rem); text-wrap:balance}
.idx .ds{grid-area:ds; max-width:46ch; font-size:.9rem; line-height:1.55; align-self:center; justify-self:start}
.idx .ar{grid-area:ar; align-self:center; justify-self:end}
.idx .thumb{grid-area:th; display:none; width:76px; aspect-ratio:1; border-radius:var(--r-sm); border:1px solid var(--card-bd)}
/* thumbnails are tiny — ease the grade so they read as pictures, not swatches */
.idx .thumb>img{filter:var(--img-fx-soft) brightness(var(--ph-b)) contrast(var(--ph-c))}
.idx .thumb::after{opacity:calc(var(--tint-op) * .55)}
.idx .item::before{content:""; position:absolute; inset-block:-1px auto; inset-inline-start:0; width:2px; height:100%;
  background:var(--accent); transform:scaleY(0); transform-origin:50% 100%; transition:transform var(--t-hover) var(--e-out)}
.idx .item:hover::before,.idx .item:focus-visible::before,.idx .item.is-active::before{transform:none}
/* the "row slides on hover" cue, done with transform instead of padding — no
   reflow of the description column, so it stays 60fps and never re-wraps */
.idx .n,.idx .nm,.idx .role{transition:transform var(--t-hover) var(--e-out)}
.idx .item:hover,.idx .item:focus-visible{background:color-mix(in srgb,var(--primary) 8%,transparent); padding-inline-start:12px}
.idx .item:focus-visible{outline:2px solid var(--accent); outline-offset:-2px; border-radius:var(--r-sm)}
.idx .item.is-active{background:color-mix(in srgb,var(--primary) 7%,transparent)}
.idx .item:hover .n,.idx .item:hover .nm,.idx .item:hover .role,
.idx .item:focus-visible .n,.idx .item:focus-visible .nm,.idx .item:focus-visible .role,
.idx .item.is-active .n,.idx .item.is-active .nm,.idx .item.is-active .role{transform:translateX(7px)}
.idx .ar{transition:color var(--t-hover) var(--e-out),transform var(--t-hover) var(--e-out)}
.idx .item:hover .ar,.idx .item.is-active .ar,.idx .item:focus-visible .ar{color:var(--on-card-accent); transform:translateX(4px)}

/* ================= 03 SERVICES — the sticky photographic stage =========== */
.svc{display:grid; grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr); gap:clamp(22px,2.8vw,44px); align-items:stretch}
.svc-stage{position:relative; min-height:280px}
/* the frame is deliberately SHORTER than the list beside it, so the panel
   stays pinned under the header for the whole read instead of being
   guillotined on the last row. */
.svc-frame{position:sticky; top:94px; height:clamp(260px,31vh,320px); border-radius:var(--r-lg); overflow:hidden; isolation:isolate;
  border:1px solid var(--card-bd); box-shadow:var(--sh-3); background:var(--bg-3)}
.svc-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:var(--img-fx) brightness(var(--ph-b)) contrast(var(--ph-c));
  opacity:0; transform:scale(1.07); transition:opacity .75s ease,transform 1.6s var(--e-out)}
.svc-img.is-on{opacity:1; transform:none}
/* same duotone stack as .ph — tint blends, veil sits on top of it */
.svc-tint{position:absolute; inset:0; z-index:1; pointer-events:none;
  background:var(--card-tint); mix-blend-mode:var(--tint-blend); opacity:var(--tint-op)}
.svc-frame::after{content:""; position:absolute; inset:0; z-index:2; pointer-events:none; background:var(--card-veil)}
/* pixel-measured caption scrim → the caption is AA over any frame in either theme */
.svc-frame::before{content:""; position:absolute; z-index:3; inset:auto 0 0 0; height:104px;
  background:var(--scrim); pointer-events:none}
.svc-cap{position:absolute; z-index:4; inset-inline:18px; bottom:15px; display:flex; flex-direction:column; gap:2px}
.svc-cap-n{font-family:var(--font-mono); font-size:.66rem; letter-spacing:.2em; color:var(--on-card-accent)}
.svc-cap-t{font-family:var(--font-display); font-size:clamp(1.05rem,1.5vw,1.3rem); color:var(--ink); letter-spacing:-.01em; line-height:1.2}
.svc-meter{position:absolute; z-index:4; inset-inline:0; bottom:0; height:2px; background:var(--line); overflow:hidden}
.svc-meter i{display:block; height:100%; width:16.6667%; background:var(--accent);
  transition:transform .5s var(--e-out)}
@media(max-width:980px){ .svc{grid-template-columns:1fr} .svc-stage{display:none} }

/* ================= 04 PRODUCTS — the interface schematics ================ */
/* Products is the SAME component as Services and must read at the same
   density. The ONLY difference from a Services row is a fourth column holding
   the schematic, at 200px / ~84px tall, so the row lands in the same 84–124px
   band. The name track is a fixed width (not max-content) so the description
   column starts on the same x on all six rows. */
.idx.cap .item{
  grid-template-columns:auto clamp(168px,12.4vw,180px) minmax(0,1fr) var(--dia-w) auto;
  grid-template-areas:"n nm ds dia ar";
  min-height:0; padding-block:8px;
}
.dia-wrap{grid-area:dia; display:block; border:1px solid var(--card-bd); border-radius:var(--r-sm);
  background:var(--surf-1); padding:5px 6px; box-shadow:var(--sh-1);
  transition:border-color var(--t-hover) var(--e-out),box-shadow var(--t-hover) var(--e-out),transform var(--t-hover) var(--e-out)}
.idx.cap .item:hover .dia-wrap,.idx.cap .item:focus-visible .dia-wrap{border-color:var(--card-bd-h); box-shadow:var(--sh-2); transform:translateY(var(--lift))}
.dia{display:block; width:100%; height:auto; color:var(--primary)}
.dia .st{fill:none; stroke:currentColor; stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round}
.dia .sf{fill:color-mix(in srgb,var(--primary) 12%,transparent)}
.dia .dash{fill:none; stroke:var(--line); stroke-width:1.3; stroke-dasharray:3 5}
.dia .ac{stroke:var(--accent)}
.dia .af{fill:color-mix(in srgb,var(--accent) 26%,transparent); stroke:var(--accent)}
.dia .mut{stroke:var(--line); opacity:.9}
.dia .fillmut{fill:color-mix(in srgb,var(--ink) 14%,transparent); stroke:none}
.dia .fillac{fill:var(--accent); stroke:none}
/* labels are sized in user units against a 220-unit box scaled to --dia-w;
   at 200px the multiplier is .909, so 13u/12u still render >= 10.9px CSS */
.dia .tx{font-family:var(--font-mono); font-size:13px; fill:var(--ink-2); opacity:.85; text-anchor:middle; letter-spacing:.03em}
.dia .tx.s{text-anchor:start}
.dia .tx.e{text-anchor:end}
.dia .tiny{font-size:12px; opacity:.85}
/* draw-on-reveal: strokes trace themselves, labels and solids fade in behind.
   pathLength="1" normalises every shape to a unit length, so the dash pattern
   can never come up short on a shape whose real perimeter grows. */
.dia .st{stroke-dasharray:1; stroke-dashoffset:1}
.reveal.in .dia .st{animation:dia-draw 1.05s var(--e-out) forwards}
.reveal.in .dia .st.d2{animation-delay:.12s}
.reveal.in .dia .st.d3{animation-delay:.22s}
@keyframes dia-draw{to{stroke-dashoffset:0}}
.dia .tx,.dia .fillmut,.dia .fillac,.dia .dash{opacity:0}
.reveal.in .dia .tx{animation:dia-fade .6s ease .38s forwards}
.reveal.in .dia .fillmut,.reveal.in .dia .fillac,.reveal.in .dia .dash{animation:dia-fade .6s ease .3s forwards}
@keyframes dia-fade{to{opacity:1}}

/* ================= 05 INDUSTRIES — photographic cards, deepest band ====== */
.ind{grid-template-columns:repeat(3,1fr); gap:clamp(12px,1.4vw,18px); background:none; border:0; border-radius:0; overflow:visible}
.ind .cell{position:relative; isolation:isolate; overflow:hidden; background:var(--card-base);
  border:1px solid var(--card-bd); border-radius:var(--r-lg); box-shadow:var(--sh-2);
  min-height:clamp(292px,30vw,352px); padding:0;
  justify-content:flex-end; gap:0; transition:transform var(--t-hover) var(--e-out),box-shadow var(--t-hover) var(--e-out),border-color var(--t-hover) var(--e-out)}
.ind .cell .ph{position:absolute; inset:0; z-index:-1}
.ind .cell:hover{transform:translateY(var(--lift)); box-shadow:var(--sh-3); border-color:var(--card-bd-h)}
.ind .cell:hover .ph>img{transform:scale(1.06)}
.ind .cell .ic{position:absolute; z-index:2; top:18px; inset-inline-start:18px; margin:0;
  background:var(--glass); backdrop-filter:blur(8px); border:1px solid var(--card-bd); color:var(--on-card)}
.ind .cell .pbody{gap:8px; padding-inline:clamp(20px,2.1vw,26px)}
.ind .cell h3{color:var(--ink); font-size:clamp(1.28rem,1.9vw,1.62rem)}
.ind .cell p{color:var(--mut); margin-top:0; font-size:.885rem; line-height:1.6}
.ind .ktag{font-family:var(--font-mono); font-size:.62rem; letter-spacing:.18em; text-transform:uppercase}
@media(max-width:820px){ .ind{grid-template-columns:1fr} .ind .cell{min-height:280px} }

/* ============ 06 SUCCESS STORIES — index, top-rule, logo wall ============ */
.stories{grid-template-columns:repeat(2,1fr); gap:clamp(12px,1.4vw,18px)}
.story{background:var(--card-bg); border:1px solid var(--card-bd); border-radius:var(--r-lg);
  padding:clamp(20px,2.2vw,28px); gap:14px; box-shadow:var(--sh-1); position:relative; overflow:hidden;
  transition:transform var(--t-hover) var(--e-out),box-shadow var(--t-hover) var(--e-out),border-color var(--t-hover) var(--e-out)}
.story::before{content:""; position:absolute; inset:0 auto auto 0; width:100%; height:2px; background:var(--accent);
  transform:scaleX(0); transform-origin:0 50%; transition:transform var(--t-hover) var(--e-out)}
.story:hover::before,.story:focus-visible::before{transform:scaleX(1)}
.story:hover,.story:focus-visible{transform:translateY(var(--lift)); box-shadow:var(--sh-3); border-color:var(--card-bd-h)}
.story:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.story .sn{position:absolute; top:16px; inset-inline-end:18px; font-family:var(--font-mono); font-size:.62rem;
  letter-spacing:.14em; color:var(--mut); font-variant-numeric:tabular-nums}
.story .top{padding-inline-end:46px}
.story .chip{border:1px solid var(--card-bd); width:76px; height:50px; padding:8px 10px; border-radius:var(--r-sm)}
.story .chip img{height:32px; max-height:32px; object-fit:contain}
.story .kname{font-size:1.32rem}
.story p{font-size:.92rem; line-height:1.6; text-wrap:pretty; margin-bottom:auto}
/* --- the client + partner wall --- */
.wall{margin-top:clamp(18px,2.2vw,26px); border:1px solid var(--card-bd); border-radius:var(--r-lg);
  overflow:hidden; background:var(--card-bg); box-shadow:var(--sh-1)}
.wall-h{display:grid; grid-template-columns:4fr 3fr; gap:6px 18px; align-items:center; padding:11px 16px;
  border-bottom:1px solid var(--line-2); font-family:var(--font-mono); font-size:.64rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--mut)}
.wall-part{display:flex; align-items:center; justify-content:space-between; gap:10px 18px; flex-wrap:wrap}
.wall-cert{display:inline-flex; align-items:center; gap:8px; color:var(--ink-2); white-space:nowrap}
.wall-cert::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--accent); flex:none}
.wall-g{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); margin-inline-end:-1px; margin-block-end:-1px}
.wall-i{min-height:80px; display:grid; place-items:center; padding:14px 12px;
  border-inline-end:1px solid var(--line-2); border-block-end:1px solid var(--line-2)}
/* ONE cell treatment: every mark on the wall — client logo or partner
   wordmark — sits on the same white plate at the same height, so the row
   never reads as "four lit tiles then three empty ones" in dark. */
.wall-plate{background:var(--plate-bg); border:1px solid var(--line-2); border-radius:var(--r-sm); padding:8px 10px;
  display:grid; place-items:center; width:100%; min-height:42px}
[data-theme="dark"] .wall-plate{border-color:transparent}
.wall-plate img{height:26px; max-height:26px; width:auto; object-fit:contain}
.wm{font-family:var(--font-mono); font-size:.76rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:#1C222F; text-align:center; line-height:1.3}
@media(max-width:980px){ .wall-g{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media(max-width:720px){ .stories{grid-template-columns:1fr} }
@media(max-width:560px){ .wall-g{grid-template-columns:repeat(2,minmax(0,1fr))} .wall-i{min-height:66px}
  /* 7 logos into 2 columns would leave the last cell beside an empty one with a
     divider hanging down the void — give the odd one out the whole final row */
  .wall-i:last-child{grid-column:1/-1}
  .wall-h{grid-template-columns:minmax(0,1fr); gap:5px 14px} }

/* ================= 07 JOURNEY — the horizontal timeline ================== */
.tl{position:relative; --tl-gap:clamp(16px,2.4vw,34px)}
/* the axis TERMINATES on the centre of the third dot instead of running into space */
.tl-axis{position:absolute; top:6px; z-index:0; overflow:hidden; height:1px; background:var(--line);
  inset-inline:6px calc(33.3333% - (var(--tl-gap) * 2 / 3) - 6px)}
.tl-fill{display:block; width:100%; height:100%; transform:scaleX(0); transform-origin:left center;
  background:linear-gradient(90deg,var(--primary),var(--accent)); transition:transform 1.5s var(--e-out) .1s}
.tl.is-on .tl-fill{transform:scaleX(1)}
.tl-steps{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.4vw,34px)}
.tl-step{position:relative; padding-top:34px}
.tl-dot{position:absolute; top:0; inset-inline-start:0; width:13px; height:13px; border-radius:50%;
  background:var(--surf-1); border:1px solid var(--line); z-index:2;
  transition:transform .6s var(--e-out),border-color .6s,background .6s}
.tl-dot::after{content:""; position:absolute; inset:3px; border-radius:50%; background:var(--faint); transition:background .6s}
.tl.is-on .tl-step:nth-child(1) .tl-dot{transition-delay:.15s}
.tl.is-on .tl-step:nth-child(2) .tl-dot{transition-delay:.6s}
.tl.is-on .tl-step:nth-child(3) .tl-dot{transition-delay:1.05s}
.tl.is-on .tl-dot{border-color:color-mix(in srgb,var(--accent) 60%,transparent); transform:scale(1.15)}
.tl.is-on .tl-dot::after{background:var(--accent)}
/* terminal marker: the last dot reads as the end of the line, not a stop mid-air */
.tl-step:last-child .tl-dot::before{content:""; position:absolute; inset:-6px; border-radius:50%;
  border:1px solid color-mix(in srgb,var(--accent) 34%,transparent);
  transform:scale(.4); opacity:0; transition:transform .7s var(--e-out) 1.3s,opacity .7s ease 1.3s}
.tl.is-on .tl-step:last-child .tl-dot::before{transform:none; opacity:1}
.tl-tag{display:block; font-family:var(--font-mono); font-size:.66rem; letter-spacing:.18em; text-transform:uppercase}
.tl-step .yr{font-family:var(--font-display); font-weight:400; font-size:clamp(2.3rem,4.4vw,3.6rem); line-height:1;
  color:var(--ink); letter-spacing:-.02em; margin-top:8px; font-variant-numeric:tabular-nums}
.tl-card{margin-top:16px; padding:clamp(16px,1.8vw,22px); border:1px solid var(--card-bd); border-radius:var(--r);
  background:var(--card-bg); box-shadow:var(--sh-1); color:var(--mut); font-size:.92rem; line-height:1.58;
  transition:transform var(--t-hover) var(--e-out),box-shadow var(--t-hover) var(--e-out)}
.tl-step:hover .tl-card{transform:translateY(var(--lift)); box-shadow:var(--sh-2)}
@media(max-width:820px){
  .tl-steps{grid-template-columns:1fr; gap:0}
  .tl-step{padding-top:0; padding-inline-start:32px; padding-bottom:24px}
  .tl-step:last-child{padding-bottom:0}
  /* per-step connectors so the vertical rail ends exactly on the last dot */
  .tl-axis{display:none}
  .tl-step:not(:last-child)::before{content:""; position:absolute; top:10.5px; bottom:-10.5px;
    inset-inline-start:6px; width:1px; background:var(--line); z-index:0}
  .tl-step:not(:last-child)::after{content:""; position:absolute; top:10.5px; bottom:-10.5px;
    inset-inline-start:6px; width:1px; z-index:1;
    background:linear-gradient(180deg,var(--primary),var(--accent));
    transform:scaleY(0); transform-origin:center top; transition:transform .8s var(--e-out)}
  .tl.is-on .tl-step:nth-child(1)::after{transform:scaleY(1); transition-delay:.2s}
  .tl.is-on .tl-step:nth-child(2)::after{transform:scaleY(1); transition-delay:.65s}
  .tl-dot{top:4px; inset-inline-start:0}
  .tl-step:last-child .tl-dot::before{inset:-5px}
  .tl-step .yr{font-size:2.2rem; margin-top:2px}
}

/* ================= 08 INSIGHTS — 4-up photographic cards ================= */
.insights{grid-template-columns:repeat(4,1fr); gap:clamp(12px,1.4vw,18px)}
/* grid, not flex: a grid item resolves its height from `aspect-ratio` against a
   definite width, so the frame is sized before the photograph decodes.
   `align-items:stretch` un-does the `center` the base `.insight` rule sets for
   the old 2-column layout — without it the body box is only as tall as its
   text and `margin-top:auto` on "Read →" has no free space to absorb. */
.insight{display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto 1fr; gap:0; padding:0; overflow:hidden;
  align-items:stretch;
  border:1px solid var(--card-bd); border-radius:var(--r-lg); background:var(--card-bg); box-shadow:var(--sh-1);
  transition:transform var(--t-hover) var(--e-out),box-shadow var(--t-hover) var(--e-out),border-color var(--t-hover) var(--e-out)}
.insight:hover,.insight:focus-visible{transform:translateY(var(--lift)); box-shadow:var(--sh-2); border-color:var(--card-bd-h)}
.insight:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.insight figure{border:0; border-radius:0; border-bottom:1px solid var(--card-bd)}
.insight figure.ph{aspect-ratio:16/10}
.insight:hover figure.ph>img{transform:scale(1.05)}
.insight>div{padding:14px clamp(14px,1.4vw,18px) clamp(16px,1.6vw,20px); display:flex; flex-direction:column; flex:1}
.insight h3{font-size:1rem; line-height:1.32; margin-top:7px; margin-bottom:14px; text-wrap:pretty}
/* the 14px minimum gap lives on the h3, NOT here: `margin-block-start` is the
   same property as `margin-top` and would have overwritten the `auto` that
   pins "Read →" to the bottom of every card. */
.insight .more{display:flex; align-items:center; gap:8px; margin-top:auto; padding-top:13px;
  border-top:1px solid var(--line-2); font-family:var(--font-mono); font-size:.66rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--mut); transition:color .25s}
.insight .more span{display:inline-block; transition:transform .25s var(--e-out)}
.insight:hover .more,.insight:focus-visible .more{color:var(--on-card-accent)}
.insight:hover .more span,.insight:focus-visible .more span{transform:translateX(4px)}
/* two-up: the frame widens, so flatten the crop rather than let it grow tall */
@media(max-width:1100px){ .insights{grid-template-columns:repeat(2,1fr)}
  .insight figure.ph{aspect-ratio:21/9} .insight h3{font-size:1.06rem} }

/* ================= 09 CAREERS — workplace photography + roles ============ */
.careers-grid{display:grid; grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr); gap:clamp(24px,3.2vw,52px); align-items:stretch}
.careers-fig{position:relative; margin:0; border-radius:var(--r-lg); min-height:280px;
  border:1px solid var(--card-bd); box-shadow:var(--sh-3)}
.careers-fig figcaption,.careers-fig .pin{position:absolute; z-index:2;
  font-family:var(--font-mono); font-size:.62rem; letter-spacing:.17em; text-transform:uppercase;
  color:var(--on-card); background:var(--glass); backdrop-filter:blur(8px);
  border:1px solid var(--card-bd); border-radius:999px; padding:7px 13px; line-height:1}
.careers-fig figcaption{inset-inline-start:16px; bottom:16px}
.careers-fig .pin{top:16px; inset-inline-start:16px}
@media(max-width:900px){ .careers-grid{grid-template-columns:1fr} .careers-fig{aspect-ratio:16/9; min-height:0} }
@media(max-width:420px){ .careers-fig figcaption{font-size:.56rem; inset-inline-end:16px} }

/* ================= CONTACT — photographic backdrop ====================== */
.contact.band{background:var(--surf-2); border-top:1px solid var(--line-2); position:relative; isolation:isolate; overflow:clip; padding-block:0}
.contact .c-bg{position:absolute; inset:0; z-index:0; isolation:isolate}
.contact .c-bg img{width:100%; height:100%; object-fit:cover; object-position:50% 42%; filter:var(--img-fx-soft) brightness(var(--ph-b)) contrast(var(--ph-c))}
.contact .c-bg::before{content:""; position:absolute; inset:0; z-index:1;
  background:var(--card-tint); mix-blend-mode:var(--tint-blend); opacity:var(--tint-op)}
/* committed backdrop: solid under the copy, fully photographic on the far side */
.contact .c-bg::after{content:""; position:absolute; inset:0; z-index:2;
  background:linear-gradient(90deg,var(--surf-2) 0%,color-mix(in srgb,var(--surf-2) 90%,transparent) 30%,color-mix(in srgb,var(--surf-2) 34%,transparent) 62%,color-mix(in srgb,var(--surf-2) 12%,transparent) 100%)}
/* the address card is gone: it printed the same email and phone as the two
   buttons 400px to its left and as the footer directly below. The buttons are
   the action, the chip carries the one fact the card added — the address — and
   the far half is given back to the photograph. */
.contact .grid{grid-template-columns:minmax(0,1fr); align-items:center}
.contact .grid>div{max-width:34rem}
.contact .c-inner{position:relative; z-index:3; padding-block:clamp(52px,6.4vh,76px)}
.contact .display{font-size:clamp(2.3rem,5.2vw,4.2rem)}
.contact .c-meta{margin-top:22px; display:flex; flex-wrap:wrap; gap:8px}
.contact .c-meta span{display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-mono); font-size:.62rem; letter-spacing:.17em; text-transform:uppercase;
  color:var(--ink-2); border:1px solid var(--card-bd); border-radius:999px; padding:7px 14px; line-height:1;
  background:color-mix(in srgb,var(--surf-2) 88%,transparent)}
.contact .c-meta svg{width:12px; height:12px; flex:none; color:var(--accent-text)}
.contact .c-cta{margin-top:26px; display:flex; flex-wrap:wrap; gap:12px}
@media(max-width:820px){
  .contact .c-inner{padding-block:clamp(44px,6vh,60px)}
  .contact .c-bg::after{background:
    linear-gradient(180deg,color-mix(in srgb,var(--surf-2) 92%,transparent) 0%,color-mix(in srgb,var(--surf-2) 80%,transparent) 100%)}
}

/* ---- light-theme half of the exposure trim -----------------------------
   Declared after every component rule so it wins on order, not on hacks.
   Each photograph carries --ph-b (dark) and --ph-b-l (light) inline; the two
   grades are non-linear, so one number could not serve both themes. */
[data-theme="light"] .ph>img{filter:var(--img-fx) brightness(var(--ph-b-l)) contrast(var(--ph-c-l))}
[data-theme="light"] .ph.soft>img,
[data-theme="light"] .idx .thumb>img{filter:var(--img-fx-soft) brightness(var(--ph-b-l)) contrast(var(--ph-c-l))}
[data-theme="light"] .about-fig .plate img,
[data-theme="light"] .about-fig .inset img,
[data-theme="light"] .svc-img{filter:var(--img-fx) brightness(var(--ph-b-l)) contrast(var(--ph-c-l))}
[data-theme="light"] .contact .c-bg img{filter:var(--img-fx-soft) brightness(var(--ph-b-l)) contrast(var(--ph-c-l))}

/* =========================================================================
   RESPONSIVE — declared last so it wins over the component rules above
   ========================================================================= */
/* the schematic never shrinks below legibility — the text column stacks instead */
@media(max-width:1180px){
  .idx.cap .item{
    grid-template-columns:auto minmax(0,1fr) var(--dia-w) auto;
    grid-template-areas:"n nm dia ar" "n ds dia ar";
    row-gap:6px;
  }
  .idx.cap .n{align-self:start; padding-top:3px}
  .idx.cap .ds{max-width:52ch}
}
@media(max-width:1040px){ :root{ --dia-w:184px } }
@media(max-width:980px){
  /* the stage is gone below 980px, so "active row" has nothing to point at —
     drop the highlight rather than leave a state with no consequence */
  .idx .item.is-active{background:none}
  .idx .item.is-active::before{transform:scaleY(0)}
  .idx .item.is-active .n,.idx .item.is-active .nm,.idx .item.is-active .role{transform:none}
}
@media(max-width:900px){
  /* default reflow: no thumbnail, so the copy takes the whole width. */
  .idx .item,.idx a{grid-template-columns:minmax(0,1fr);
    grid-template-areas:"n" "nm" "ds"; column-gap:16px; row-gap:5px;
    align-items:center; padding-block:16px; padding-inline:8px; min-height:0}
  .idx .item:hover,.idx .item:focus-visible{padding-inline-start:8px}
  .idx .ar{display:none}
  .idx .ds{max-width:none; font-size:.88rem}
  /* opt-in: the services list carries a 76px thumbnail into the reflow */
  .idx.thumbs .item{grid-template-columns:76px minmax(0,1fr);
    grid-template-areas:"th n" "th nm" "th ds"}
  .idx.thumbs .thumb{display:block; grid-row:1/4; align-self:center}
  .idx.cap .item{grid-template-columns:auto minmax(0,1fr);
    grid-template-areas:"n nm" "ds ds" "dia dia"; row-gap:8px; padding-inline:8px}
  .idx.cap .n{align-self:center; padding-top:0}
  .idx.cap .ds{max-width:none}
  .dia-wrap{max-width:300px; margin-top:2px}
}
@media(max-width:640px){
  :root{ --band-pad:40px; --dia-w:200px }
  .band .sec-head{margin-bottom:18px}
  .h-sec,.band .h-sec{font-size:1.85rem}
  /* hold at least two columns on a phone — full-width blocks of two-line copy
     were the single biggest source of mobile height */
  .insights{grid-template-columns:repeat(2,1fr); gap:10px}
  .insight>div{padding:11px 12px 13px}
  .insight h3{font-size:.92rem; line-height:1.3; margin-top:5px; margin-bottom:11px}
  .insight .more{padding-top:10px; font-size:.6rem}
  .idx .ds{font-size:.84rem; line-height:1.5}
  .dia-wrap{max-width:240px; padding:5px 6px}
  .ind .cell .pbody{--scrim-pad:60px; padding-inline:16px}
  .ind .cell h3{font-size:1.22rem}
  .ind .cell p{font-size:.845rem; line-height:1.55}
  .stories{gap:10px}
  .story{padding:16px 15px; gap:11px}
  .story p{font-size:.86rem; line-height:1.55}
  .ind{gap:10px}
  .ind .cell{min-height:250px}
  .tl-card{padding:14px}
  /* real 44px thumb targets without moving the surrounding layout */
  .contact dd a,.foot-contact dd a{display:inline-flex; align-items:center; min-height:44px; margin-block:-11px}
  .foot-col ul{gap:0}
  .foot-col a{display:inline-flex; align-items:center; min-height:44px}
  footer.site .soc a{width:44px; height:44px}
  /* the base footer collapses to one column at 520px — the same "too much
     whitespace" failure this pass exists to fix */
  .foot-cols{grid-template-columns:1fr 1fr; gap:26px 24px; padding-bottom:26px; margin-bottom:22px}
  .foot-brand{grid-column:1/-1}
  footer.site{padding-block:28px}
}
/* two columns hold all the way to 320px — density over drama on a phone */
@media(max-width:460px){
  .idx.thumbs .item{grid-template-columns:60px minmax(0,1fr); column-gap:13px}
  .idx.thumbs .thumb{width:60px}
  .insight figure.ph,.insight figure.ph>img{aspect-ratio:3/2}
  .insight h3{font-size:.88rem}
}

/* ---- staggered reveals -------------------------------------------------- */
.reveal[data-d="4"]{transition-delay:.32s}
.reveal[data-d="5"]{transition-delay:.40s}

/* =========================================================================
   ARABIC TYPOGRAPHY + RTL LAYOUT
   Fraunces/Geist are Latin-only; swap to Arabic faces and neutralise the
   Latin design's negative/tracked letter-spacing (which breaks AR shaping).
   Numerals stay Western for stats consistency.
   ========================================================================= */
[dir="rtl"]{
  --font-display:'Noto Kufi Arabic','Fraunces',Georgia,'Times New Roman',serif;
  --font-body:'IBM Plex Sans Arabic','Geist',ui-sans-serif,system-ui,sans-serif;
  --font-mono:'IBM Plex Sans Arabic','Geist Mono',ui-monospace,monospace;
}
/* Reset all tracking for Arabic — negative/positive letter-spacing corrupts joins */
[dir="rtl"] *{letter-spacing:normal !important}
/* Arabic (Noto Kufi) tashkeel/diacritics need more vertical room than the tight
   Latin display leading, or the marks clip/collide between lines. */
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3{line-height:1.42}
[dir="rtl"] .display{line-height:1.36}
[dir="rtl"] .h-sec{line-height:1.42}
[dir="rtl"] .vmv .row q,[dir="rtl"] .about-copy .big,[dir="rtl"] .story .kname,[dir="rtl"] .idx .nm,[dir="rtl"] .careers .role,[dir="rtl"] .factor p,[dir="rtl"] .prose h2,[dir="rtl"] .prose h3,[dir="rtl"] .insight h3,
[dir="rtl"] .statement,[dir="rtl"] .ft-title,[dir="rtl"] .wcard .kname,[dir="rtl"] .detail-title{line-height:1.5}

/* header: nav auto-margin already logical; hamburger already logical */
/* directional arrows: mirror the "→" glyph to "←" and reverse hover motion */
/* (no `display` here — the arrow is a grid item, so it is blockified already
   and `scaleX` applies. Setting `display:inline-block` would out-specify the
   `display:none` the mobile reflow relies on and drop the glyph into an
   implicit grid row.) */
[dir="rtl"] .idx .ar{transform:scaleX(-1)}
[dir="rtl"] .idx .item:hover .ar{transform:scaleX(-1) translateX(4px)}
[dir="rtl"] .story-more span{display:inline-block; transform:scaleX(-1)}

/* mobile nav: slide in from the left (start edge) */
[dir="rtl"] .mnav-panel{right:auto; left:0; border-left:0; border-right:1px solid var(--line); transform:translateX(-100%)}
[dir="rtl"] .mnav.open .mnav-panel{transform:none}

/* skip link lands on the start (right) edge */
[dir="rtl"] .skip:focus{left:auto; right:16px}

/* Latin-content fields keep LTR flow but align to the reading (right) edge */
[dir="rtl"] input[type="email"],[dir="rtl"] input[type="tel"]{direction:ltr; text-align:right}
/* phone / email display strings stay LTR so digits and "+" don't reorder */
[dir="rtl"] a[href^="tel:"],[dir="rtl"] a[href^="mailto:"]{direction:ltr; unicode-bidi:embed; display:inline-block}

/* quote marks: mirror the decorative quote so it opens on the right */
[dir="rtl"] .vmv .row q::before{content:"”"}
[dir="rtl"] .vmv .row q::after{content:"“"}

/* -------------------------------------------------------------------------
   RTL — the D-merged components
   Everything positional in the merge layer is already logical (inset-inline,
   grid-template-areas, padding-inline). What is left is the handful of things
   CSS cannot mirror for us: gradient angles, transform origins, translate
   signs, glyph direction and the schematics.
   ------------------------------------------------------------------------- */

/* the hairline runs out of the eyebrow towards the reading edge */
[dir="rtl"] .band .sec-head .k::after{background:linear-gradient(270deg,var(--line) 0%,transparent 88%)}

/* progress meters fill from the start (right) edge */
[dir="rtl"] .sprog i{transform-origin:right center;
  background:linear-gradient(270deg,color-mix(in srgb,var(--primary) 88%,transparent),var(--accent))}
[dir="rtl"] .tl-fill{transform-origin:right center;
  background:linear-gradient(270deg,var(--primary),var(--accent))}

/* the row slide follows the reading direction */
[dir="rtl"] .idx .item:hover .n,[dir="rtl"] .idx .item:hover .nm,[dir="rtl"] .idx .item:hover .role,
[dir="rtl"] .idx .item:focus-visible .n,[dir="rtl"] .idx .item:focus-visible .nm,[dir="rtl"] .idx .item:focus-visible .role,
[dir="rtl"] .idx .item.is-active .n,[dir="rtl"] .idx .item.is-active .nm,[dir="rtl"] .idx .item.is-active .role{transform:translateX(-7px)}
[dir="rtl"] .idx .item:hover .ar,[dir="rtl"] .idx .item.is-active .ar,
[dir="rtl"] .idx .item:focus-visible .ar{transform:scaleX(-1) translateX(4px)}

/* the story's top rule draws out of the start (right) corner */
[dir="rtl"] .story::before{transform-origin:100% 50%}

/* "Read →" mirrors to "Read ←" and travels the other way */
[dir="rtl"] .insight .more span{transform:scaleX(-1)}
[dir="rtl"] .insight:hover .more span,[dir="rtl"] .insight:focus-visible .more span{transform:scaleX(-1) translateX(4px)}

/* the contact backdrop stays solid under the copy, photographic on the far side */
[dir="rtl"] .contact .c-bg::after{background:linear-gradient(270deg,var(--surf-2) 0%,color-mix(in srgb,var(--surf-2) 90%,transparent) 30%,color-mix(in srgb,var(--surf-2) 34%,transparent) 62%,color-mix(in srgb,var(--surf-2) 12%,transparent) 100%)}
@media(max-width:820px){
  [dir="rtl"] .contact .c-bg::after{background:
    linear-gradient(180deg,color-mix(in srgb,var(--surf-2) 92%,transparent) 0%,color-mix(in srgb,var(--surf-2) 80%,transparent) 100%)}
}

/* 04 PRODUCTS — the schematics read right-to-left too. The whole drawing is
   mirrored, then every label is flipped back about its own box (fill-box) so
   the glyphs stay readable while sitting at the mirrored position. `direction`
   is pinned to ltr on the text so `text-anchor:start/end` keeps meaning
   "geometric left/right" and the double flip resolves exactly. */
[dir="rtl"] .dia{transform:scaleX(-1)}
[dir="rtl"] .dia text{transform:scaleX(-1); transform-box:fill-box; transform-origin:center;
  direction:ltr; unicode-bidi:isolate}

/* =========================================================================
   INNER PAGES
   Phase 2: every page that is not the landing page, built from the SAME
   system — the surface ramp with its textures, one band rhythm, one card
   frame, one hover gesture, one photo treatment. Declared after the RTL layer
   so these components can carry their own mirroring where CSS cannot infer it.
   ========================================================================= */

/* ---- each band publishes its own surface, so a component sitting inside it
       (a photographic backdrop's scrim, a chip) can blend with it instead of
       guessing. ---------------------------------------------------------- */
.band{--band-surf:var(--surf-1)}
.band.tint{--band-surf:var(--surf-2)}
.band.deep{--band-surf:var(--surf-3)}

/* ---- the opening band of an inner page clears the fixed 74px header ----- */
.band.page-head{padding-top:calc(74px + clamp(30px,4.6vw,58px))}
/* a head band with nothing under the heading (the legal pages) doesn't carry
   the section-head's trailing margin as well as the band's own padding */
.page-head .sec-head:last-child{margin-bottom:0}
.page-lede{max-width:64ch; margin-top:clamp(14px,1.6vw,20px); color:var(--ink-2);
  font-size:clamp(1.02rem,1.35vw,1.16rem); line-height:1.62; text-wrap:pretty}

/* ---- BP — a band whose surface IS a photograph -------------------------
   Same stack as the landing page's contact band: exposure-trimmed picture,
   brand duotone, then a directional scrim that is opaque under the copy and
   lets the photograph breathe on the far side. Text over it is measured AA in
   both themes because the scrim resolves to the band's own surface colour. */
.bp{position:relative; isolation:isolate; overflow:clip}
.bp-bg{position:absolute; inset:0; z-index:0; isolation:isolate}
.bp-bg img{width:100%; height:100%; object-fit:cover; object-position:50% 42%;
  filter:var(--img-fx-soft) brightness(var(--ph-b)) contrast(var(--ph-c))}
.bp-bg::before{content:""; position:absolute; inset:0; z-index:1;
  background:var(--card-tint); mix-blend-mode:var(--tint-blend); opacity:var(--tint-op)}
.bp-bg::after{content:""; position:absolute; inset:0; z-index:2; background:linear-gradient(90deg,
  var(--band-surf) 0%,
  color-mix(in srgb,var(--band-surf) 92%,transparent) 34%,
  color-mix(in srgb,var(--band-surf) 42%,transparent) 68%,
  color-mix(in srgb,var(--band-surf) 14%,transparent) 100%)}
[data-theme="light"] .bp-bg img{filter:var(--img-fx-soft) brightness(var(--ph-b-l)) contrast(var(--ph-c-l))}
/* a photographic band sitting UNDER the fixed header needs a vertical veil as
   well: until you scroll, the header is transparent and its nav would sit on
   bare photography. (These bands never carry a texture class, so ::before is
   free — the grain still paints from ::after.) */
.page-head.bp::before{content:""; position:absolute; inset:0 0 auto 0; height:180px; z-index:1; pointer-events:none;
  background:linear-gradient(180deg,color-mix(in srgb,var(--band-surf) 88%,transparent) 0,
    color-mix(in srgb,var(--band-surf) 44%,transparent) 46%,transparent 100%)}
[dir="rtl"] .bp-bg::after{background:linear-gradient(270deg,
  var(--band-surf) 0%,
  color-mix(in srgb,var(--band-surf) 92%,transparent) 34%,
  color-mix(in srgb,var(--band-surf) 42%,transparent) 68%,
  color-mix(in srgb,var(--band-surf) 14%,transparent) 100%)}

/* the address chip, shared by the contact header and the closing CTA */
.c-meta{margin-top:22px; display:flex; flex-wrap:wrap; gap:8px}
.c-meta span{display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-mono); font-size:.62rem; letter-spacing:.17em; text-transform:uppercase;
  color:var(--ink-2); border:1px solid var(--card-bd); border-radius:999px; padding:7px 14px; line-height:1;
  background:color-mix(in srgb,var(--band-surf) 88%,transparent)}
.c-meta svg{width:12px; height:12px; flex:none; color:var(--accent-text)}

/* ---- the closing CTA band — the landing page's contact band, reused ----- */
.cta-band{border-block-start:1px solid var(--line-2)}
.cta-inner{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:26px 44px}
.cta-copy{max-width:34rem}
.cta-inner .eyebrow{display:block; margin-bottom:14px}
.cta-inner h2{max-width:18ch; font-size:clamp(1.85rem,3.8vw,3rem); text-wrap:balance}
.cta-actions{display:flex; flex-wrap:wrap; gap:12px; align-items:center}
/* The band's scrim is directional: it is opaque under the copy and lets the
   photograph breathe on the far side — which is exactly where .cta-actions sits.
   A transparent ghost button therefore put --ink straight on the picture (3.44:1
   light, 1.86:1 at the worst pixel). It gets the same local backing the address
   chip already uses, so it carries its own contrast instead of borrowing the
   scrim's. */
.cta-band .btn.ghost{background:color-mix(in srgb,var(--band-surf) 88%,transparent);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border-color:var(--card-bd)}
.cta-band .btn.ghost:hover{border-color:var(--ink);
  background:color-mix(in srgb,var(--band-surf) 94%,transparent)}

/* ---- BRAND PLATE — the treatment for artwork that is a MARK, not a
   photograph. The success stories' cover asset is the client's logo, and a
   logo cropped to 16/9 and pushed through the duotone reads as a mistake. It
   gets the same white plate the client wall uses instead: contained, full
   colour, never cropped. -------------------------------------------------- */
/* the image is taken out of flow for the same reason every `.ph` is: the frame
   owns the geometry (its aspect-ratio), so a percentage height has a definite
   box to resolve against and `object-fit:contain` can actually letterbox. */
.plate-fig{position:relative; overflow:hidden; background:var(--plate-bg)}
.plate-fig img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
  padding:clamp(14px,2vw,26px); filter:none}
.insight figure.plate-fig{aspect-ratio:16/10}
.mh-fig.plate-fig{aspect-ratio:3/2}
.wcard figure.plate-fig{aspect-ratio:16/9}

/* ---- one panel: the card frame for anything that is not a link tile ----- */
.panel{background:var(--card-bg); border:1px solid var(--card-bd); border-radius:var(--r-lg);
  box-shadow:var(--sh-1); padding:clamp(20px,2.4vw,32px)}

/* ================= LIST PAGES =========================================== */

/* the lead article, at feature size (insights) */
.feature{position:relative; display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  overflow:hidden; border:1px solid var(--card-bd); border-radius:var(--r-lg);
  background:var(--card-bg); box-shadow:var(--sh-2);
  transition:transform var(--t-hover) var(--e-out),box-shadow var(--t-hover) var(--e-out),border-color var(--t-hover) var(--e-out)}
.feature:hover,.feature:focus-visible{transform:translateY(var(--lift)); box-shadow:var(--sh-3); border-color:var(--card-bd-h)}
.feature:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.feature figure.ph{margin:0; min-height:clamp(230px,26vw,340px); height:100%}
.feature:hover figure.ph>img,.feature:focus-visible figure.ph>img{transform:scale(1.05)}
.ft-body{padding:clamp(22px,2.8vw,42px); display:flex; flex-direction:column; justify-content:center}
.kdate{font-family:var(--font-mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--on-card-accent)}
.ft-title{font-family:var(--font-display); font-weight:400; font-size:clamp(1.45rem,2.7vw,2.15rem);
  line-height:1.12; letter-spacing:-.015em; color:var(--ink); margin-top:11px; text-wrap:balance}
.ft-sum{margin-top:15px; color:var(--mut); font-size:.97rem; line-height:1.62; max-width:52ch}
.feature .more{display:inline-flex; align-items:center; gap:8px; margin-top:clamp(20px,2.4vw,28px);
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--mut); transition:color .25s}
.feature .more span{display:inline-block; transition:transform .25s var(--e-out)}
.feature:hover .more,.feature:focus-visible .more{color:var(--on-card-accent)}
.feature:hover .more span,.feature:focus-visible .more span{transform:translateX(4px)}
[dir="rtl"] .feature .more span{transform:scaleX(-1)}
[dir="rtl"] .feature:hover .more span,[dir="rtl"] .feature:focus-visible .more span{transform:scaleX(-1) translateX(4px)}

/* the archive grid: the landing page's card, three-up on a full page */
.insights.three{grid-template-columns:repeat(3,1fr)}
.insight .ins-sum{color:var(--mut); font-size:.87rem; line-height:1.55; margin:0 0 13px; max-width:none}
.insight h3+.ins-sum{margin-top:-4px}
.insights.three .insight h3{font-size:1.05rem; margin-bottom:10px}

/* success stories, now photographic */
.wcards{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(12px,1.4vw,18px)}
.wcard{position:relative; display:grid; grid-template-rows:auto 1fr; overflow:hidden;
  border:1px solid var(--card-bd); border-radius:var(--r-lg); background:var(--card-bg); box-shadow:var(--sh-1);
  transition:transform var(--t-hover) var(--e-out),box-shadow var(--t-hover) var(--e-out),border-color var(--t-hover) var(--e-out)}
.wcard::before{content:""; position:absolute; inset:0 auto auto 0; z-index:3; width:100%; height:2px;
  background:var(--accent); transform:scaleX(0); transform-origin:0 50%; transition:transform var(--t-hover) var(--e-out)}
[dir="rtl"] .wcard::before{transform-origin:100% 50%}
.wcard:hover::before,.wcard:focus-visible::before{transform:scaleX(1)}
.wcard:hover,.wcard:focus-visible{transform:translateY(var(--lift)); box-shadow:var(--sh-3); border-color:var(--card-bd-h)}
.wcard:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.wcard figure{margin:0; aspect-ratio:16/9; border-bottom:1px solid var(--card-bd)}
.wcard:hover figure.ph>img,.wcard:focus-visible figure.ph>img{transform:scale(1.05)}
/* the counter sits over a WHITE brand plate in both themes, so it carries its
   own ink rather than the theme's — measured 12.9:1 either way. */
.wcard .sn{position:absolute; z-index:2; top:14px; inset-inline-end:14px; font-family:var(--font-mono);
  font-size:.6rem; letter-spacing:.14em; color:#F4F7FF; font-variant-numeric:tabular-nums;
  background:color-mix(in srgb,#0A0C12 78%,transparent); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.22); border-radius:999px; padding:6px 11px; line-height:1}
.wbody{padding:clamp(17px,1.9vw,24px); display:flex; flex-direction:column; gap:13px}
.wcard .top{display:flex; align-items:center; gap:14px}
.wcard .chip{flex:none; background:var(--plate-bg); border:1px solid var(--card-bd); border-radius:var(--r-sm);
  width:74px; height:48px; padding:7px 9px; display:grid; place-items:center}
[data-theme="dark"] .wcard .chip{border-color:transparent}
.wcard .chip img{max-height:30px; width:auto; object-fit:contain}
.wcard .ktag{font-family:var(--font-mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--on-card-accent)}
.wcard .kname{font-family:var(--font-display); font-weight:420; font-size:1.28rem; line-height:1.16; color:var(--ink); margin-top:4px}
.wcard p{color:var(--mut); font-size:.9rem; line-height:1.6; margin-bottom:auto; text-wrap:pretty}
.wcard .story-more{display:inline-flex; align-items:center; gap:8px; padding-top:12px;
  border-top:1px solid var(--line-2); color:var(--on-card-accent); transition:color .25s}
.wcard .story-more span{display:inline-block; transition:transform .25s var(--e-out)}
.wcard:hover .story-more span,.wcard:focus-visible .story-more span{transform:translateX(4px)}
[dir="rtl"] .wcard:hover .story-more span,[dir="rtl"] .wcard:focus-visible .story-more span{transform:scaleX(-1) translateX(4px)}

/* key factors: the same tile as everything else on the page */
.factors{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,1.4vw,18px)}
.factor{background:var(--card-bg); border:1px solid var(--card-bd); border-radius:var(--r-lg);
  box-shadow:var(--sh-1); padding:clamp(20px,2.2vw,30px); min-height:clamp(150px,15vw,190px);
  transition:transform var(--t-hover) var(--e-out),box-shadow var(--t-hover) var(--e-out),border-color var(--t-hover) var(--e-out)}
.factor:hover{transform:translateY(var(--lift)); box-shadow:var(--sh-2); border-color:var(--card-bd-h)}
.factor p{text-wrap:pretty}

/* /about/ — the landing page's composition, on the page's own head band */
.about-sec .about-grid{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr); gap:clamp(28px,4vw,64px); align-items:center}
.about-sec .about-copy .prose{max-width:56ch}

/* ================= DETAIL PAGES ========================================= */

/* --- masthead: copy on the ramp, the cover inside the duotone system ---- */
.masthead{display:grid; grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  gap:clamp(24px,3.6vw,56px); align-items:center}
.masthead.no-fig{grid-template-columns:minmax(0,1fr)}
.masthead.no-fig .mh-copy{max-width:64ch}
.detail-head .eyebrow a{display:inline-flex; align-items:center; gap:12px; color:var(--mut); transition:color .25s}
.detail-head .eyebrow a::before{content:""; width:30px; height:1px; background:var(--accent); flex:none}
.detail-head .eyebrow a:hover{color:var(--on-card-accent)}
.detail-title{max-width:20ch; margin-top:15px; font-size:clamp(1.95rem,4vw,3.3rem); text-wrap:balance}
.detail-lede{margin-top:19px; max-width:52ch; font-size:clamp(1.02rem,1.4vw,1.2rem); color:var(--ink-2); line-height:1.6}
.detail-meta{display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:20px; font-family:var(--font-mono);
  font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--mut)}
.detail-meta span{display:inline-flex; align-items:center}
.detail-meta span+span::before{content:"·"; margin-inline-end:18px; color:var(--faint)}
.mh-fig{margin:0; aspect-ratio:3/2; border-radius:var(--r-lg); border:1px solid var(--card-bd); box-shadow:var(--sh-3)}
.mh-fig:hover>img{transform:scale(1.04)}

/* --- body: one prose measure beside one facts rail ---------------------- */
.detail-cols{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,264px);
  gap:clamp(26px,3.6vw,60px); align-items:start}
.detail-copy .prose{max-width:70ch}
/* the summary, when the CMS body only repeated it: the page still lands on a
   statement instead of a void. */
.statement{position:relative; padding-inline-start:22px; max-width:26ch;
  font-family:var(--font-display); font-weight:380; font-size:clamp(1.4rem,2.5vw,2.05rem);
  line-height:1.2; letter-spacing:-.015em; color:var(--ink); text-wrap:pretty}
.statement::before{content:""; position:absolute; inset-block:6px auto; inset-inline-start:0;
  width:2px; height:calc(100% - 12px); background:var(--accent); border-radius:2px}
.rail{position:sticky; top:94px}
.rail-card{display:flex; flex-direction:column; gap:15px; padding:clamp(17px,1.8vw,22px);
  background:var(--card-bg); border:1px solid var(--card-bd); border-radius:var(--r-lg); box-shadow:var(--sh-1)}
.rail-h{font-family:var(--font-mono); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--mut)}
.facts{display:grid; gap:12px; margin:0; padding-top:14px; border-top:1px solid var(--line-2)}
.facts dt{font-family:var(--font-mono); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--mut); margin-bottom:3px}
.facts dd{margin:0; color:var(--ink); font-size:.97rem; line-height:1.4; font-variant-numeric:tabular-nums}
.rail .chip{background:var(--plate-bg); border:1px solid var(--card-bd); border-radius:var(--r-sm);
  padding:9px 11px; display:grid; place-items:center; min-height:52px}
[data-theme="dark"] .rail .chip{border-color:transparent}
.rail .chip img{max-height:30px; width:auto; object-fit:contain}
.rail .btn{justify-content:center}

/* --- careers: the apply block ------------------------------------------ */
.apply-grid{align-items:stretch}
.apply-meta.panel{display:flex; flex-direction:column; justify-content:space-between; gap:22px}
.apply-meta.panel dl{margin:0; border-top:0; padding-top:0}
.apply-meta.panel .apply-note{margin:0}
.apply-form.panel{padding:clamp(20px,2.6vw,34px)}

/* --- related: the landing page's card, as many columns as there are cards */
.related h2 a{transition:color .25s}
.related h2 a:hover{color:var(--on-card-accent)}
.insights.three.n2{grid-template-columns:repeat(2,1fr)}
.insights.three.n1{grid-template-columns:minmax(0,440px)}

/* ================= CONTACT / LEGAL / 404 ================================ */
/* the two cards are one row: the info panel stretches to the form's height and
   distributes its own content, so the band never ends on half an empty card. */
.contact-grid{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); align-items:stretch}
.contact-info.panel{display:flex; flex-direction:column; justify-content:space-between; gap:24px}
.contact-info.panel dl{margin:0}
.contact-info .soc{margin-top:0}
.legal .panel{max-width:84ch; margin-inline:auto}
.legal .prose>*:first-child{margin-top:0}
.notfound{display:flex; align-items:center; min-height:clamp(420px,64svh,620px)}
.notfound>.wrap{width:100%}
.notfound .eyebrow{display:inline-flex; align-items:center; gap:12px}
.notfound .eyebrow::before{content:""; width:34px; height:1px; background:var(--accent)}

/* ================= RESPONSIVE — declared after the components =========== */
@media(max-width:1100px){
  .insights.three,.insights.three.n2{grid-template-columns:repeat(2,1fr)}
  .insights.three.n1{grid-template-columns:minmax(0,1fr)}
  .insights.three .insight figure.ph,.insights.three .insight figure.plate-fig{aspect-ratio:21/9}
}
@media(max-width:980px){
  .detail-cols{grid-template-columns:minmax(0,1fr); gap:clamp(24px,3vw,32px)}
  .rail{position:static}
  .rail-card{flex-direction:row; flex-wrap:wrap; align-items:center; gap:14px 22px}
  .rail-h{width:100%}
  .facts{flex:1 1 260px; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); border-top:0; padding-top:0}
  .rail .btn{margin-inline-start:auto}
  .statement{max-width:40ch}
  .factors{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  .masthead,.masthead.no-fig{grid-template-columns:minmax(0,1fr); gap:clamp(20px,3vw,28px)}
  .mh-fig{aspect-ratio:16/9; order:-1}
  .contact-grid,.apply-grid{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:860px){
  /* the landing page collapses this composition at 860px too — its rule is
     id-scoped to #about, so the page version needs its own. */
  .about-sec .about-grid{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:820px){
  .feature{grid-template-columns:minmax(0,1fr)}
  .feature figure.ph{aspect-ratio:16/9; min-height:0; border-bottom:1px solid var(--card-bd)}
  .wcards{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:640px){
  .insights.three,.insights.three.n2,.insights.three.n1{grid-template-columns:repeat(2,1fr); gap:10px}
  .insights.three .insight h3{font-size:.92rem}
  .insight .ins-sum{display:none}
  .factors{grid-template-columns:minmax(0,1fr)}
  .cta-inner h2{font-size:1.85rem}
  .cta-actions{width:100%}
  .cta-actions .btn{flex:1 1 auto; justify-content:center}
  .rail-card{flex-direction:column; align-items:stretch}
  .rail .btn{margin-inline-start:0}
  .ft-body{padding:18px 16px 20px}
  .wbody{padding:16px 15px}
  .wcard .kname{font-size:1.18rem}
  .panel{padding:18px 16px}
}
@media(max-width:460px){
  .insights.three .insight figure.ph,.insights.three .insight figure.plate-fig{aspect-ratio:3/2}
  .insights.three .insight h3{font-size:.88rem}
}

/* =========================================================================
   MOTION HYGIENE — under reduced motion EVERYTHING resolves to its final
   state. Nothing hidden, nothing half-drawn, no parallax, no cursor effects.
   Declared last so no component or RTL rule can outrank it on source order.
   ========================================================================= */
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none}
  .hero .bg img{height:100%}
  .mnav-panel,.mnav-backdrop{transition:none}
  .sprog{display:none}
  /* schematics: drawn, labelled, complete */
  .dia .st{stroke-dasharray:none; stroke-dashoffset:0; animation:none !important}
  .dia .tx,.dia .fillmut,.dia .fillac,.dia .dash,.dia .sf{opacity:1; animation:none !important}
  .reveal.in .dia .tx,.reveal.in .dia .st{opacity:1; animation:none !important}
  /* timeline: axis filled, all three dots lit, terminal ring present */
  .tl-fill{transform:scaleX(1); transition:none}
  .tl-dot{transition:none}
  .tl-step:last-child .tl-dot::before{transform:none; opacity:1; transition:none}
  @media(max-width:820px){ .tl-fill{transform:scaleY(1)}
    .tl-step:not(:last-child)::after{transform:scaleY(1); transition:none} }
  /* stories rule, meters and photography settle at their end state */
  .story::before,.wcard::before{transform:scaleX(1); transition:none}
  .svc-meter i,.ph>img,.svc-img,.idx .item::before,.tl-card,.insight,.ind .cell,.story,.dia-wrap,
  .feature,.wcard,.factor,.mh-fig>img,.feature .more span,.wcard .story-more span{transition:none !important}
  .story:hover,.insight:hover,.ind .cell:hover,.feature:hover,.wcard:hover,.factor:hover{transform:none}
  /* the detail rail is a plain card, not a follower */
  .rail{position:static}
  *{scroll-behavior:auto !important}
}