/* ============================================================
   TRU DESIGNS — Base, typography, layout, components
   ============================================================ */

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:auto; }
body{
  font-family:var(--font-sans);
  font-weight:400;
  font-size:var(--t-body);
  line-height:1.7;
  color:var(--fg);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
ul,ol{ list-style:none; }
input{ font:inherit; }
h1,h2,h3,h4{ font-weight:400; letter-spacing:-.01em; }
::selection{ background:var(--accent); color:#fff; }

/* Focus */
:focus{ outline:none; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.section--dark :focus-visible,.section--black :focus-visible{ outline-color:#7f9ad6; }

/* Skip link (visually hidden, no overflow) */
.skip{
  position:absolute; top:0; left:0; z-index:1000;
  width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
  background:var(--ink); color:#fff; padding:0; font-size:var(--t-small);
}
.skip:focus{ width:auto; height:auto; clip:auto; overflow:visible; left:1rem; top:1rem; padding:.75rem 1.25rem; }

/* ---------- Layout primitives ---------- */
.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--page-x); }
.section{ padding-block:var(--section-y); position:relative; }
.bleed{ width:100%; }
.stack> * + *{ margin-top:var(--s-4); }
.grid{ display:grid; gap:clamp(1rem,2vw,2rem); }
.hr{ height:1px; background:var(--rule); border:0; width:100%; }

/* ---------- Type utilities ---------- */
/* Big headings use Switzer (sharp neo-grotesque, ref-Text-Home-Hero), light */
.display,.h1,.h2,.hero h1,.disc-row .dt,.kw,.statband .num,.mega-col a{
  font-family:var(--font-display); font-weight:300; -webkit-font-smoothing:antialiased;
}
.display{ font-size:var(--t-display); font-weight:300; line-height:1.02; letter-spacing:-.025em; }
.h1{ font-size:var(--t-h1); font-weight:300; line-height:1.06; letter-spacing:-.02em; }
.h2{ font-size:var(--t-h2); font-weight:300; line-height:1.1; letter-spacing:-.018em; }
.h3{ font-size:var(--t-h3); line-height:1.2; }
.hero h1{ font-weight:300; }
.statband .num{ font-weight:300; }
.lead{ font-size:var(--t-lead); line-height:1.42; max-width:46ch; color:var(--fg); }
.body{ font-size:var(--t-body); line-height:1.75; max-width:64ch; color:var(--muted); }
.small{ font-size:var(--t-small); }
.label{
  font-size:var(--t-label); text-transform:uppercase; letter-spacing:.22em;
  color:var(--muted); line-height:1.4; display:inline-block;
}
.muted{ color:var(--muted); }
.measure-18{ max-width:18ch; }
.italic{ font-style:italic; }
.tnum{ font-variant-numeric:tabular-nums; }

/* Accent "index" rule motif under titles */
.rule-lead{ position:relative; height:1px; background:var(--rule); margin:var(--s-5) 0; }
.rule-lead::before{
  content:""; position:absolute; left:0; top:-1px; height:3px; width:110px;
  background:var(--accent-2); transform-origin:left;
}

/* Eyebrow (used sparingly per taste rules) */
.eyebrow{ font-size:var(--t-label); text-transform:uppercase; letter-spacing:.22em; color:var(--muted); }

/* ---------- Links & CTAs ---------- */
.link{
  position:relative; display:inline-flex; align-items:center; gap:.5rem;
  font-size:var(--t-small); letter-spacing:.02em; color:var(--fg);
  padding-bottom:2px;
}
.link .arrow{ transition:transform var(--dur-micro) var(--ease-tru); }
.link::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--accent-2); transform:scaleX(0); transform-origin:left;
  transition:transform var(--dur-micro) var(--ease-tru);
}
.link:hover::after,.link:focus-visible::after{ transform:scaleX(1); }
.link:hover .arrow{ transform:translateX(4px); }
.link::after{ background:var(--accent-2); }

.btn{
  display:inline-flex; align-items:center; gap:.6rem; white-space:nowrap;
  border:1px solid currentColor; padding:.85rem 1.5rem;
  font-size:var(--t-label); text-transform:uppercase; letter-spacing:.18em;
  border-radius:0; transition:background var(--dur-micro) var(--ease-tru),
    color var(--dur-micro) var(--ease-tru), transform var(--dur-micro) var(--ease-tru);
}
.btn:hover{ background:#fff; color:var(--ink); }
.btn:active{ transform:translateY(1px); }
.btn--accent{ border-color:var(--accent); }
.btn--accent:hover{ background:var(--accent); color:#fff; }
.btn--wa{ border-color:#25D366; }
.btn--wa svg{ color:#25D366; transition:color var(--dur-micro) var(--ease-tru); }
.btn--wa:hover{ background:#25D366; color:#0b0b0c; }
.btn--wa:hover svg{ color:#0b0b0c; }
/* email addresses: Glacial's @ glyph is faint -> use the display grotesque for a clear @ */
a[href^="mailto:"], .email-txt{ font-family:"Switzer","Glacial Indifference",var(--font-sans); }
a.kv-map{ text-decoration:none; transition:color .3s var(--ease-tru); }
a.kv-map:hover{ color:#fff; text-decoration:underline; text-underline-offset:3px; }

/* ---------- Header ---------- */
.site-header{
  position:fixed; inset:0 0 auto 0; height:var(--header-h); z-index:var(--z-header);
  display:flex; align-items:center; justify-content:space-between;
  padding-inline:var(--page-x);
  color:#fff; mix-blend-mode:normal;
  transition:transform .35s var(--ease-tru), background .35s ease, color .35s ease,
    border-color .35s ease, backdrop-filter .35s ease;
  border-bottom:1px solid transparent;
}
/* Header is always transparent; theme (dark=white / light=navy) set dynamically */
.site-header{ background:transparent !important; border-bottom:none !important; }
.site-header.is-hidden{ transform:translateY(-102%); }
.site-header a,.site-header button{ color:inherit; }
/* Dark theme = light contents (over dark bg / photos) */
.header--dark{ color:#fff; text-shadow:0 1px 16px rgba(0,0,0,.42); }
.header--dark .brand-mark{ filter:drop-shadow(0 1px 10px rgba(0,0,0,.4)); }
/* Light theme = brand blue contents (over light bg) */
.header--light{ color:#182F76; text-shadow:none; }
.brand{ display:flex; align-items:center; gap:.62rem; }
/* Single logo.svg, recoloured via mask -> white on dark, blue on light */
.brand-mark{ height:clamp(28px,3.2vw,38px); aspect-ratio:1/1; width:auto; display:block; background:currentColor;
  -webkit-mask:url("/logo.svg") center/contain no-repeat; mask:url("/logo.svg") center/contain no-repeat; }
.brand .wordmark{ font-family:var(--font-display); font-weight:300; font-size:clamp(.82rem,1vw,1rem);
  letter-spacing:.26em; text-transform:uppercase; white-space:nowrap; }
.frame-wrap{ position:relative; }
.header-right{ display:flex; align-items:center; gap:1.25rem; }
.icon-btn{ width:40px; height:40px; display:grid; place-items:center; }
.icon-btn svg{ width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.4; }

/* Hamburger */
.hamburger{ width:26px; height:14px; position:relative; }
.hamburger span{
  position:absolute; left:0; height:1.4px; width:100%; background:currentColor;
  transition:transform .35s var(--ease-tru), opacity .2s ease;
}
.hamburger span:nth-child(1){ top:0; }
.hamburger span:nth-child(2){ top:6.3px; }
.hamburger span:nth-child(3){ top:12.6px; }
body.menu-open .hamburger span:nth-child(1){ transform:translateY(6.3px) rotate(45deg); }
body.menu-open .hamburger span:nth-child(2){ opacity:0; }
body.menu-open .hamburger span:nth-child(3){ transform:translateY(-6.3px) rotate(-45deg); }

/* ---------- Mega menu ---------- */
.mega{
  position:fixed; inset:0; z-index:var(--z-overlay); background:var(--ink); color:#f4f4f6;
  padding:calc(var(--header-h) + 2vh) var(--page-x) var(--s-7);
  display:flex; flex-direction:column; justify-content:space-between;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  clip-path:inset(0 0 100% 0); pointer-events:none; visibility:hidden;
  transition:clip-path .6s var(--ease-tru), visibility .6s;
}
body.menu-open .mega{ pointer-events:auto; visibility:visible; clip-path:inset(0 0 0% 0); }
.mega-close{ position:absolute; top:0; right:var(--page-x); height:var(--header-h); display:flex; align-items:center; }
.mega-cols{
  display:flex; gap:var(--s-7);
  max-width:var(--maxw); margin-inline:auto; width:100%; margin-top:auto; margin-bottom:auto;
}
.mega-group{ display:flex; gap:var(--s-7); flex:1; min-width:0; }
.mega-col{ flex:1; min-width:0; }
.mega-col h4{ font-size:var(--t-label); letter-spacing:.24em; text-transform:uppercase; color:var(--grey-40); margin-bottom:var(--s-5); }
.mega-col li + li{ margin-top:.65rem; }
.mega-col a{
  font-size:clamp(1.05rem,1.5vw,1.55rem); font-weight:200; color:#cfcfd6; letter-spacing:-.01em; line-height:1.3;
  display:inline-block; position:relative;
  opacity:0; transform:translateY(18px);
  transition:transform .55s var(--ease-tru), opacity .5s ease, color .35s ease;
}
body.menu-open .mega-col a{ opacity:1; transform:translateY(0); transition-delay:.18s; }
body.menu-open .mega-col:nth-child(2) a{ transition-delay:.26s; }
body.menu-open .mega-group:nth-child(2) .mega-col:nth-child(1) a{ transition-delay:.22s; }
body.menu-open .mega-group:nth-child(2) .mega-col:nth-child(2) a{ transition-delay:.30s; }
.mega-col a::after{ content:""; position:absolute; left:0; bottom:-2px; height:1px; width:0; background:#fff; transition:width .4s var(--ease-tru); }
.mega-col a:hover,.mega-col a:focus-visible{ color:#fff; }
.mega-col a:hover::after,.mega-col a:focus-visible::after{ width:100%; }
@media (prefers-reduced-motion:reduce){ .mega{ transition:none; } .mega-col a{ opacity:1; transform:none; transition:none; } }
.mega-foot{
  display:flex; flex-wrap:wrap; gap:var(--s-5); justify-content:space-between;
  max-width:var(--maxw); margin-inline:auto; width:100%;
  border-top:1px solid var(--hair-dark); padding-top:var(--s-5); color:var(--grey-40); font-size:var(--t-small);
}

/* ---------- Search overlay ---------- */
.search{
  position:fixed; inset:0; z-index:var(--z-overlay); background:var(--ink); color:#f4f4f6;
  padding:calc(var(--header-h) + 6vh) var(--page-x) var(--s-7);
  opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s;
}
body.search-open .search{ opacity:1; visibility:visible; }
.search-close{ position:absolute; top:0; right:var(--page-x); height:var(--header-h); display:flex; align-items:center; }
.search-inner{ max-width:var(--maxw); margin-inline:auto; }
.search-field{ position:relative; border-bottom:1px solid var(--hair-dark); }
.search-field input{
  width:100%; background:none; border:none; color:#fff; padding:.5rem 0 1rem;
  font-family:var(--font-sans); font-size:var(--t-h2); caret-color:var(--accent-2);
}
.search-field input::placeholder{ color:var(--grey-40); }
.search-results{ margin-top:var(--s-6); display:grid; gap:.25rem; max-width:900px; }
.search-results a{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  padding:1rem 0; border-bottom:1px solid var(--hair-dark); transition:padding-left var(--dur-micro) var(--ease-tru);
}
.search-results a:hover{ padding-left:.75rem; }
.search-results .r-title{ font-size:var(--t-lead); color:#fff; }
.search-results .r-title mark{ background:none; color:var(--accent-2); }
.search-results .r-meta{ font-size:var(--t-label); letter-spacing:.16em; text-transform:uppercase; color:var(--grey-40); }
.search-hint{ margin-top:var(--s-6); }
.search-hint .label{ display:block; margin-bottom:var(--s-3); }
.search-chips{ display:flex; flex-wrap:wrap; gap:.6rem; }
.search-chips a{ border:1px solid var(--hair-dark); padding:.5rem 1rem; font-size:var(--t-small); }
.search-chips a:hover{ border-color:var(--accent-2); color:#fff; }

/* ---------- Footer (minimal, ref-footer) ---------- */
.site-footer{ background:#000 !important; color:#f4f4f6; }
.foot-inner{ padding-block:clamp(3rem,7vh,5rem); }
.foot-row{ display:flex; justify-content:space-between; align-items:baseline; gap:2rem; flex-wrap:wrap; }
.foot-nav2{ display:flex; gap:clamp(1.1rem,2.4vw,2.4rem); flex-wrap:wrap; }
.foot-nav2 a,.foot-social a{ font-size:clamp(1rem,1.3vw,1.25rem); color:#e9e9ee; position:relative; }
.foot-nav2 a::after,.foot-social a::after{ content:""; position:absolute; left:0; bottom:-3px; height:1px; width:0; background:#fff; transition:width .35s var(--ease-tru); }
.foot-nav2 a:hover::after,.foot-social a:hover::after{ width:100%; }
.foot-social{ display:flex; gap:clamp(1.1rem,2vw,2rem); }
.foot-addresses{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,3rem); margin-top:clamp(2.5rem,6vh,4rem); padding-top:clamp(1.5rem,3vw,2.25rem); border-top:1px solid var(--hair-dark); }
.foot-addr{ display:flex; flex-direction:column; gap:.5rem; max-width:34ch; }
.foot-addr .k{ font-size:var(--t-label); letter-spacing:.18em; text-transform:uppercase; color:var(--grey-40); }
.foot-addr > :last-child{ font-size:clamp(.95rem,1.1vw,1.05rem); color:#e9e9ee; line-height:1.5; }
a.foot-map{ text-decoration:none; transition:color .3s var(--ease-tru); display:inline-block; }
a.foot-map:hover{ color:#fff; text-decoration:underline; text-underline-offset:3px; }
.foot-wa{ display:inline-flex; align-items:center; gap:.45rem; }
.foot-wa svg{ width:18px; height:18px; }
@media (max-width:600px){ .foot-addresses{ grid-template-columns:1fr; } }
.foot-meta{ display:flex; justify-content:space-between; align-items:center; margin-top:clamp(2rem,5vh,3rem); font-size:var(--t-small); letter-spacing:.04em; color:var(--grey-40); position:relative; text-transform:uppercase; }
.foot-meta .dot{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:6px; height:6px; border-radius:50%; background:var(--grey-40); }

/* ---------- SmartImage / media ---------- */
.frame{ position:relative; overflow:hidden; background:var(--ink-2); }
.frame > img{ width:100%; height:100%; object-fit:cover; display:block; }
.frame.zoom > img{ transform:scale(1.06); will-change:transform; }
.gray > img{ filter:grayscale(1) contrast(1.02); transition:filter .7s var(--ease-tru), transform .9s var(--ease-tru); }
.gray:hover > img, .gray.in-view > img{ filter:grayscale(0) contrast(1); }
/* touch devices have no hover -> show project images in colour from the start */
@media (hover:none){ .gray > img{ filter:none; } }

/* Placeholder (Tier C) — generic photo, behaves like real media */
.ph{ position:relative; overflow:hidden; background:var(--ink-2); }
.ph > img{ width:100%; height:100%; object-fit:cover; display:block; }
.ph .ph-tag{ display:none;
  position:absolute; left:.8rem; bottom:.7rem; z-index:2;
  font-size:.58rem; letter-spacing:.24em; text-transform:uppercase;
  color:rgba(255,255,255,.55); padding:.25rem .5rem; background:rgba(11,11,12,.4);
  backdrop-filter:blur(4px); pointer-events:none;
}
html.dev-tags .ph .ph-tag{ display:block; }

/* ---------- Project card ---------- */
.pcard{ position:relative; display:block; overflow:hidden; }
.pcard .frame,.pcard .ph{ aspect-ratio:4/5; }
.pcard .cap{
  position:absolute; left:0; right:0; bottom:0; padding:1.1rem 1.2rem;
  color:#fff; z-index:2;
  background:linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,0) 88%);
}
.pcard .cap .t{ font-size:var(--t-h3); line-height:1.15; transition:transform var(--dur-micro) var(--ease-tru); display:inline-block; }
.pcard .cap .l{ font-size:var(--t-label); letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.72); margin-top:.25rem; display:block; }
.pcard .cap .t::after{ content:""; display:block; height:1px; width:0; background:var(--accent-2); transition:width var(--dur-micro) var(--ease-tru); margin-top:.35rem; }
.pcard:hover .cap .t{ transform:translateX(6px); }
.pcard:hover .cap .t::after{ width:38px; }
.pcard img{ transition:transform .9s var(--ease-tru), filter .7s var(--ease-tru); }
.pcard:hover img{ transform:scale(1.05); }

/* ---------- Stat band ---------- */
.statband{ display:grid; grid-template-columns:repeat(4,1fr); }
.statband .stat{ padding:var(--s-7) var(--s-5); border-left:1px solid var(--hair-dark); }
.statband .stat:first-child{ border-left:0; }
.statband .stat .bar{ height:3px; width:64px; background:var(--accent-2); margin-bottom:var(--s-5); transform-origin:left; }
.statband .stat .num{ font-size:var(--t-stat); line-height:.95; letter-spacing:-.01em; font-variant-numeric:tabular-nums; }
.statband .stat .cap{ font-size:var(--t-label); letter-spacing:.2em; text-transform:uppercase; color:var(--grey-40); margin-top:var(--s-3); }

/* ---------- Kinetic words ---------- */
.kinetic{ position:relative; }
.kinetic .kw{ font-size:var(--t-display); line-height:1.0; letter-spacing:-.02em; overflow:hidden; }
.kinetic .kw > span{ display:inline-block; color:rgba(244,244,246,.16); }
.kinetic .kw.on > span{ color:#f6f6f8; }
.kinetic .kw.on{ position:relative; }
.kinetic .underline{ height:4px; width:0; background:var(--accent-2); margin-top:1rem; }
.kinetic .globe{ position:absolute; right:0; top:50%; transform:translateY(-50%); width:min(42vw,520px); opacity:.5; pointer-events:none; }
.kinetic .globe svg{ width:100%; height:auto; }
.kinetic{ position:relative; }
.kinetic--split{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,5rem); align-items:center; }
.kinetic--split .kinetic-col{ position:relative; }
.forbes-feature{ width:100%; }
.forbes-play{ position:relative; display:block; width:100%; aspect-ratio:16/9; overflow:hidden; border:1px solid var(--hair-dark); background:#000; cursor:pointer; padding:0; }
.forbes-play .fp-video{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .8s var(--ease-tru), opacity .4s; }
.forbes-play:hover .fp-video{ transform:scale(1.04); opacity:.9; }
.forbes-play .fp-badge{ position:absolute; inset:0; margin:auto; width:66px; height:66px; display:grid; place-items:center;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.65); border-radius:50%; backdrop-filter:blur(4px);
  opacity:0; transition:background .3s var(--ease-tru), transform .3s var(--ease-tru), opacity .3s; }
.forbes-play:hover .fp-badge, .forbes-play:focus-visible .fp-badge{ opacity:1; background:var(--accent); transform:scale(1.08); }
.forbes-play .fp-badge svg{ width:24px; height:24px; fill:#fff; margin-left:3px; }
.kinetic .kv-cap{ display:block; margin-top:.85rem; font-size:var(--t-label); letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
@media (max-width:900px){ .kinetic--split{ grid-template-columns:1fr; } .kinetic .forbes-feature{ margin-top:2rem; } }

/* Press clippings (recognition) */
.press-clips{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1rem,2.5vw,2rem); }
.press-clip{ position:relative; display:block; overflow:hidden; border:1px solid var(--hair-dark); background:var(--ink-2); }
.press-clip img{ width:100%; height:auto; display:block; transition:transform .8s var(--ease-tru); }
.press-clip:hover img{ transform:scale(1.03); }
@media (max-width:640px){ .press-clips{ grid-template-columns:1fr; } }

/* Video modal */
.modal .m-video{ background:#000; }
.modal .m-video video{ width:100%; max-height:74vh; display:block; }

/* Services: kinetic words left, What we do right */
.svc-do{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,5rem); align-items:center; }
.svc-do-left{ position:relative; }
.eyebrow--blue{ color:#7fa2e6; }
@media (max-width:900px){ .svc-do{ grid-template-columns:1fr; } }

/* ---------- Forms (contact + careers, EmailJS) ---------- */
.tru-form{ display:grid; gap:1.3rem; margin-top:2.25rem; }
.tru-form .row2{ display:grid; grid-template-columns:1fr 1fr; gap:1.3rem; }
.tru-form .field label{ display:block; font-size:var(--t-label); letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:.5rem; }
.tru-form .field label .req{ color:#e88; }
.tru-form input, .tru-form select, .tru-form textarea{
  width:100%; background:transparent; color:var(--fg); border:0; border-bottom:1px solid var(--rule);
  padding:.65rem 0; font:inherit; font-size:var(--t-body); border-radius:0; transition:border-color .3s var(--ease-tru); }
.tru-form input:focus, .tru-form select:focus, .tru-form textarea:focus{ outline:none; border-color:#7fa2e6; }
.tru-form textarea{ min-height:130px; resize:vertical; }
.tru-form select{ -webkit-appearance:none; appearance:none; cursor:pointer; }
.tru-form select option{ background:var(--ink-2); color:var(--fg); }
.tru-form .form-status{ font-size:var(--t-small); color:var(--muted); min-height:1.2em; margin-top:.9rem; }
.tru-form .form-status.is-ok{ color:#7fd6a2; }
.tru-form .form-status.is-err{ color:#e88; }
@media (max-width:640px){ .tru-form .row2{ grid-template-columns:1fr; } }

/* ---------- Services triad ---------- */
.triad{ display:grid; grid-template-columns:repeat(3,1fr); }
.triad .cell{ padding:var(--s-6) var(--s-5) var(--s-6) 0; border-left:1px solid var(--rule); padding-left:var(--s-5); }
.triad .cell:first-child{ border-left:0; padding-left:0; }
.triad .ico{ width:56px; height:56px; background:var(--ink); color:#fff; display:grid; place-items:center; margin-bottom:var(--s-5); }
.triad .ico svg{ width:26px; height:26px; stroke:#fff; fill:none; stroke-width:1.3; }
.triad h3{ font-size:var(--t-h3); margin-bottom:.5rem; }
.triad p{ font-size:var(--t-body); color:var(--muted); max-width:34ch; margin-bottom:var(--s-4); }

/* ---------- Project detail (editorial mono, ref-project-inside) ---------- */
.pd-col{ max-width:1160px; margin-inline:auto; }
.pd-strip-sec{ padding-top:calc(var(--header-h) + clamp(1.5rem,4vh,3rem)); padding-bottom:clamp(1rem,2.5vh,1.5rem); }
.pd-strip{ font-size:var(--t-label); letter-spacing:.2em; text-transform:uppercase; color:var(--fg);
  display:flex; flex-wrap:wrap; gap:.9rem; align-items:center; }
.pd-strip .sep{ color:var(--accent-2); }
.pd-strip .meta-dim{ color:var(--muted); }
/* cover photo — contained wide banner (per wireframe) */
.pd-hero-sec{ padding-top:0; padding-bottom:0; }
.pd-hero-shot{ position:relative; width:100%; }
.pd-hero-shot .frame, .pd-hero-shot .ph{ width:100%; aspect-ratio:2/1; overflow:hidden; }
.pd-hero-shot .frame img, .pd-hero-shot .ph img{ width:100%; height:100%; object-fit:cover; }
.pd-tag{ font-size:var(--t-label); letter-spacing:.24em; text-transform:uppercase; color:rgba(255,255,255,.82); }
.pd-tag--over{ position:absolute; top:1rem; left:clamp(1rem,3vw,2rem); z-index:2; text-shadow:0 1px 10px rgba(0,0,0,.5); }
/* tagline + inline project details */
.pd-lead{ font-family:var(--font-display); font-weight:300; font-size:clamp(1.7rem,3.4vw,3rem);
  line-height:1.18; letter-spacing:-.025em; color:var(--fg); max-width:30ch; }
.pd-facts-row{ display:flex; flex-wrap:wrap; gap:clamp(1.5rem,5vw,4rem);
  margin-top:clamp(1.75rem,4vw,3rem); padding-top:clamp(1.25rem,2.5vw,1.75rem); border-top:1px solid var(--rule); }
.pd-facts-row .fact{ display:flex; flex-direction:column; gap:.4rem; }
.pd-facts-row .fk{ font-size:var(--t-label); letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }
.pd-facts-row .fv{ font-size:var(--t-body); color:var(--fg); }
/* wireframe gallery rows: 4:3+4:3 / landscape+portrait / 16:9 / portrait+landscape */
.pd-wire{ display:flex; flex-direction:column; gap:clamp(.9rem,1.8vw,1.5rem); }
.pd-row{ display:grid; gap:clamp(.9rem,1.8vw,1.5rem); align-items:start; }
.pd-row--eq{ grid-template-columns:1fr 1fr; }
.pd-row--ls-pt{ grid-template-columns:2fr 1fr; }
.pd-row--full{ grid-template-columns:1fr; }
.pd-row--pt-ls{ grid-template-columns:1fr 2fr; }
.pd-row--pt-single{ grid-template-columns:minmax(0,62%); justify-content:center; }
.pd-fig{ position:relative; margin:0; }
.pd-fig .frame{ overflow:hidden; background:var(--ink-2); }
.pd-fig .frame img{ width:100%; height:100%; object-fit:cover; }
.pd-fig .pd-tag{ position:absolute; top:.8rem; left:.9rem; z-index:2; }
@media (max-width:720px){ .pd-row{ grid-template-columns:1fr!important; } }
/* next project */
.pd-next{ border-top:1px solid var(--rule); }
.pd-next-in{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,3rem); align-items:center; }
.pd-next-in .pd-next-h{ font-family:var(--font-display); font-weight:300; font-size:clamp(1.4rem,2.4vw,2rem); letter-spacing:-.01em; }
.pd-next-btn{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  border:1px solid var(--rule); padding:clamp(1.4rem,3vw,2.2rem) clamp(1.4rem,3vw,2.2rem);
  font-size:var(--t-label); letter-spacing:.22em; text-transform:uppercase;
  transition:background .4s var(--ease-tru), border-color .4s ease; }
.pd-next-btn:hover{ background:var(--ink-2); border-color:var(--accent-2); }
.pd-next-btn svg{ width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.4; transition:transform .35s var(--ease-tru); }
.pd-next-btn:hover svg{ transform:translateX(6px); }
@media (max-width:640px){ .pd-next-in{ grid-template-columns:1fr; } }

/* ---------- Hero (generic) ---------- */
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; color:#fff; overflow:hidden; }
.hero.hero--tall{ min-height:84svh; }
.hero .hero-media{ position:absolute; inset:0; }
.hero .hero-media img{ width:100%; height:100%; object-fit:cover; }
.hero .hero-media::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,.04) 42%, rgba(0,0,0,.10) 82%, rgba(0,0,0,.42)); }
.hero .hero-inner{ position:relative; z-index:2; width:100%; padding-bottom:clamp(3rem,8vh,7rem); }
.hero .hero-eyebrow{ color:rgba(255,255,255,.82); margin-bottom:var(--s-4); }
.hero h1{ font-size:var(--t-display); line-height:1.02; letter-spacing:-.02em; max-width:20ch; }
.hero .hero-sub{ margin-top:var(--s-5); max-width:44ch; color:rgba(255,255,255,.86); font-size:var(--t-lead); }
.line-mask{ overflow:hidden; display:block; padding-bottom:.14em; margin-bottom:-.08em; }
.line-mask > *{ display:block; }
/* Word-split reveal */
[data-splitlines].is-split{ }
[data-splitlines] .w{ display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.14em; margin-bottom:-.14em; }
[data-splitlines] .w > span{ display:inline-block; }

/* ---------- Reveal (JS-driven, with no-JS fallback = visible) ---------- */
.reveal{ opacity:0; transform:translateY(24px); }
.js .reveal{ will-change:transform,opacity; }
html:not(.js) .reveal{ opacity:1; transform:none; }

/* ---------- Section header block ---------- */
.sec-head{ display:grid; gap:var(--s-4); margin-bottom:var(--s-8); }
.sec-head .h2{ max-width:20ch; }

/* ---------- Facts / key-value ---------- */
.kv{ border-top:1px solid var(--rule); }
.kv > div{ display:flex; justify-content:space-between; gap:1rem; padding:.95rem 0; border-bottom:1px solid var(--rule); }
.kv .k{ font-size:var(--t-label); letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }
.kv .v{ font-size:var(--t-body); }

/* ---------- Clientele marquee (scroll-linked, coloured, big, fully visible) ---------- */
.marquee{ overflow:hidden; position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 2.5%,#000 97.5%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 2.5%,#000 97.5%,transparent); }
.marquee + .marquee{ margin-top:clamp(1.4rem,2.6vw,2.6rem); }
.marquee-track{ display:flex; gap:clamp(1.4rem,2.6vw,2.6rem); align-items:center; width:max-content; will-change:transform; }
.marquee-track .m-item{ flex:none; display:grid; place-items:center; background:#fff; border-radius:8px;
  width:clamp(150px,15vw,210px); height:clamp(80px,9vw,120px); padding:clamp(.9rem,1.4vw,1.4rem); }
.marquee-track .m-item img{ width:100%; height:100%; object-fit:contain; object-position:center; display:block; }
html.no-js .marquee-track{ animation:marq 60s linear infinite; }
@keyframes marq{ to{ transform:translateX(-50%); } }

/* ---------- Clientele: one white sheet (grid of coloured logos) ---------- */
.logo-sheet{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); background:#fff;
  border-top:1px solid #e6e6ec; border-left:1px solid #e6e6ec; }
.logo-sheet .cell{ min-width:0; aspect-ratio:3/2; overflow:hidden; display:grid; place-items:center;
  padding:clamp(.85rem,1.5vw,1.5rem); border-right:1px solid #e6e6ec; border-bottom:1px solid #e6e6ec; }
.logo-sheet .cell img{ width:100%; height:100%; object-fit:contain; object-position:center; display:block; }
@media (max-width:900px){ .logo-sheet{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (max-width:560px){ .logo-sheet{ grid-template-columns:repeat(3,minmax(0,1fr)); } }

/* ---------- Awards list ---------- */
.awards{ display:grid; gap:0; }
.awards li{ display:flex; gap:1rem; align-items:baseline; padding:1rem 0; border-bottom:1px solid var(--rule); font-size:var(--t-body); }
.awards li .yr{ font-size:var(--t-small); color:var(--muted); margin-left:auto; font-variant-numeric:tabular-nums; }
.awards li .a{ color:var(--accent-2); }

/* ---------- Team grid (individuals, B&W) ---------- */
.team-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1rem,2vw,2rem); }
.team-card .frame,.team-card .ph{ aspect-ratio:4/5; margin-bottom:var(--s-3); overflow:hidden; }
.team-card .frame img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.03);
  transition:transform .8s var(--ease-tru); }
.team-card:hover .frame img{ transform:scale(1.04); }  /* stays B&W, no colour on hover */
.team-card .nm{ font-size:var(--t-h3); }
.team-card .rl{ font-size:var(--t-label); letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-top:.15rem; }
.team-card{ transition:transform var(--dur-micro) var(--ease-tru); }
.team-card:hover{ transform:translateY(-6px); }

/* ---------- Team group photos (coloured) ---------- */
.team-groups{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(1rem,2.2vw,1.75rem); }
.team-group .frame{ aspect-ratio:16/10; overflow:hidden; }
.team-group .frame img{ width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease-tru); }
.team-group:hover .frame img{ transform:scale(1.04); }
.team-group .tg-label{ margin-top:.85rem; font-size:var(--t-h3); }
.team-group .tg-sub{ font-size:var(--t-label); letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-top:.1rem; }
@media (max-width:560px){ .team-groups{ grid-template-columns:1fr; } }

/* ---------- Clientele ledger ---------- */
.ledger{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:clamp(.5rem,1vw,1rem); }
.ledger .cell{ min-width:0; aspect-ratio:3/2; display:grid; place-items:center; padding:clamp(.9rem,1.6vw,1.6rem); background:#fff; overflow:hidden;
  will-change:transform; transition:transform .45s var(--ease-tru), box-shadow .45s ease; }
.ledger .cell img{ max-height:clamp(24px,3vw,42px); max-width:80%; width:auto; object-fit:contain; transition:transform .45s var(--ease-tru); }
.ledger .cell:hover{ transform:translateY(-8px); box-shadow:0 22px 55px rgba(0,0,0,.30); z-index:2; }
.ledger .cell:hover img{ transform:scale(1.08); }

/* ---------- Testimonial ---------- */
.quote{ position:relative; }
.quote .mark{ font-size:8rem; line-height:.6; color:#6f97e6; opacity:.5; }
.quote blockquote{ font-size:var(--t-lead); font-style:italic; line-height:1.4; max-width:34ch; }
.quote .who{ margin-top:var(--s-4); font-size:var(--t-label); letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.quote .who b{ font-weight:400; color:var(--fg); }

/* ---------- Preloader (logo drawn clockwise, wordmark expands right) ---------- */
.preloader{ position:fixed; inset:0; z-index:500; background:var(--ink); display:grid; place-items:center; color:#fff; will-change:transform; }
.pl-logo{ display:flex; align-items:center; gap:.9rem; }
/* logo.svg drawn clockwise: logo shape mask INTERSECT conic sweep, filled white */
.pl-mark{ width:clamp(60px,7vw,82px); aspect-ratio:1/1; flex:none; display:block; background:#eef0f6; --sweep:0deg;
  -webkit-mask:url("/logo.svg") center/contain no-repeat, conic-gradient(from -90deg, #000 var(--sweep), transparent 0);
  mask:url("/logo.svg") center/contain no-repeat, conic-gradient(from -90deg, #000 var(--sweep), transparent 0);
  -webkit-mask-composite:source-in; mask-composite:intersect; }
.pl-word{ overflow:hidden; display:inline-block; }
.pl-word span{ display:inline-block; font-family:var(--font-display); font-weight:300;
  font-size:clamp(1.05rem,2vw,1.45rem); letter-spacing:.24em; text-transform:uppercase; white-space:nowrap; color:#eef0f6; }
html.no-js .pl-mark{ --sweep:360deg; }
html.no-js .pl-word span{ transform:none; }
@media (prefers-reduced-motion:reduce){ .pl-mark{ --sweep:360deg; } .pl-word span{ transform:none; } }


/* ---------- Numbered capability list (interactive) ---------- */
.caps{ border-top:1px solid var(--rule); }
.caps .cap-row{ position:relative; display:grid; grid-template-columns:clamp(60px,7vw,110px) 1fr; gap:clamp(1rem,3vw,3rem);
  padding:clamp(1.4rem,3vw,2.4rem) 0; border-bottom:1px solid var(--rule); align-items:baseline;
  transition:padding-left .55s var(--ease-tru); }
.caps .cap-row::before{ content:""; position:absolute; left:0; top:-1px; height:2px; width:0; background:var(--accent-2); transition:width .55s var(--ease-tru); }
.caps .cap-row:hover{ padding-left:clamp(.5rem,1.5vw,1.5rem); }
.caps .cap-row:hover::before{ width:100%; }
.caps .cap-row .no{ font-family:var(--font-display); font-weight:200; font-size:clamp(1.6rem,3vw,2.8rem);
  color:var(--muted); font-variant-numeric:tabular-nums; line-height:1; transition:color .4s ease; }
.caps .cap-row:hover .no{ color:var(--accent-2); }
.caps .cap-row h4{ font-size:clamp(1.2rem,1.7vw,1.7rem); transition:transform .5s var(--ease-tru); }
.caps .cap-row:hover h4{ transform:translateX(8px); }
.caps .cap-row p{ font-size:var(--t-body); color:var(--muted); max-width:52ch; margin-top:.5rem; }

/* ---------- Split (brutalist seam) ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; min-height:100svh; }
.split .side{ display:flex; flex-direction:column; justify-content:center; padding:calc(var(--header-h) + var(--s-7)) var(--page-x) var(--s-8); }
.split .media{ position:relative; overflow:hidden; }
.split .media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* ---------- Sub-nav (practice) — static index, not sticky ---------- */
.subnav{ position:relative; z-index:5; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); }
.subnav ul{ display:flex; flex-wrap:wrap; gap:clamp(1.5rem,3vw,3rem); padding:1.1rem var(--page-x); max-width:var(--maxw); margin-inline:auto; }
.subnav a{ font-size:var(--t-label); letter-spacing:.2em; text-transform:uppercase; color:var(--muted); position:relative; padding-bottom:5px; transition:color .3s ease; }
.subnav a.active,.subnav a:hover{ color:var(--fg); }
.subnav a::after{ content:""; position:absolute; left:0; bottom:0; height:1px; width:0; background:var(--accent-2); transition:width .35s var(--ease-tru); }
.subnav a.active::after,.subnav a:hover::after{ width:100%; }

/* ---------- Modal (forms) ---------- */
.modal-backdrop{ position:fixed; inset:0; z-index:var(--z-overlay); background:rgba(8,8,10,.7); opacity:0; visibility:hidden; transition:opacity .28s ease, visibility .28s; display:grid; place-items:center; padding:var(--page-x); }
body.modal-open .modal-backdrop{ opacity:1; visibility:visible; }
.modal{ background:var(--ink-2); color:#f4f4f6; width:min(760px,100%); max-height:86vh; display:flex; flex-direction:column; transform:scale(.98); transition:transform .3s var(--ease-tru); }
body.modal-open .modal{ transform:scale(1); }
.modal .m-head{ display:flex; justify-content:space-between; align-items:center; padding:1rem 1.25rem; border-bottom:1px solid var(--hair-dark); }
.modal .m-head .label{ color:var(--grey-40); }
.modal iframe{ width:100%; height:70vh; border:0; background:#fff; }
.modal .m-note{ padding:1rem 1.25rem; font-size:var(--t-small); color:var(--grey-40); }

/* ---------- Hero carousel ---------- */
.after-hero{ position:relative; z-index:2; background:var(--ink); }
.hero-carousel .hero-slides{ position:absolute; inset:0; z-index:0; }
.hero-carousel .slide{ position:absolute; inset:0; opacity:0; transition:opacity 1.5s var(--ease-tru); }
.hero-carousel .slide.is-active{ opacity:1; }
.hero-carousel .slide img, .hero-carousel .slide video{ width:100%; height:100%; object-fit:cover; }
.hero-scrim{ position:absolute; inset:0; z-index:1; background:linear-gradient(to top, rgba(0,0,0,.64), rgba(0,0,0,.05) 42%, rgba(0,0,0,.10) 82%, rgba(0,0,0,.44)); }
.hero-carousel .hero-inner{ z-index:2; }
.hero-title{ max-width:14ch; letter-spacing:-.03em; }
.hero-title #hero-service-text{ display:inline-block; will-change:opacity,transform; }
.hero-dots{ position:absolute; z-index:3; left:var(--page-x); bottom:clamp(1.5rem,4vh,2.5rem); display:flex; gap:.7rem; }
.hero-dots .dot{ width:36px; height:2px; background:rgba(255,255,255,.35); position:relative; overflow:hidden; transition:background .3s ease; }
.hero-dots .dot::after{ content:""; position:absolute; inset:0; width:0; background:#fff; }
.hero-dots .dot.is-active{ background:rgba(255,255,255,.3); }
.hero-dots .dot.is-active::after{ width:var(--p,0%); }  /* JS-driven from video progress */
@media (prefers-reduced-motion:reduce){
  .hero-dots .dot.is-active::after{ width:100%; }
}

/* ---------- Disciplines (hover-reveal index) ---------- */
.disc-grid{ display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(2rem,5vw,5rem); align-items:center; }
.disc-media{ position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--ink-2); }
.disc-img{ position:absolute; inset:0; opacity:0; transition:opacity .8s var(--ease-tru); }
.disc-img.is-active{ opacity:1; }
.disc-img img{ width:100%; height:100%; object-fit:cover; transform:scale(1.04); transition:transform 1.4s var(--ease-tru); }
.disc-img.is-active img{ transform:scale(1.12); }
.disc-list{ display:flex; flex-direction:column; }
.disc-row{ display:grid; grid-template-columns:auto 1fr; column-gap:1.5rem; align-items:baseline;
  border-top:1px solid var(--rule); padding:clamp(1.1rem,2.4vw,1.9rem) 0;
  cursor:pointer; transition:padding-left .55s var(--ease-tru); }
.disc-row:last-child{ border-bottom:1px solid var(--rule); }
.disc-row .no{ font-size:var(--t-small); color:var(--muted); font-variant-numeric:tabular-nums; transition:color .4s ease; }
.disc-row .dt{ font-size:clamp(1.7rem,3.3vw,3rem); letter-spacing:-.02em; line-height:1; color:var(--fg);
  display:inline-flex; align-items:center; gap:.9rem; transition:color .4s ease; }
.disc-row .dt .arrow2{ width:26px; height:26px; opacity:0; transform:translateX(-10px); transition:opacity .45s ease, transform .45s var(--ease-tru); }
.disc-row .dt .arrow2 svg{ width:100%; height:100%; stroke:var(--accent); fill:none; stroke-width:1.4; }
.disc-row p{ grid-column:2; font-size:var(--t-body); color:var(--muted); max-width:42ch;
  max-height:0; opacity:0; overflow:hidden; transition:max-height .55s var(--ease-tru), opacity .45s ease, margin-top .55s ease; }
.disc-row.is-active{ padding-left:clamp(.75rem,1.5vw,1.5rem); }
.disc-row.is-active .no{ color:var(--accent-2); }
.disc-row.is-active .dt .arrow2{ opacity:1; transform:translateX(0); }
.disc-row.is-active p{ max-height:8rem; opacity:1; margin-top:.85rem; }

/* ---------- Selected work horizontal scroller (coloured) ---------- */
.hscroll{ display:flex; gap:clamp(1rem,2vw,2rem); overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory; padding-inline:var(--page-x); padding-bottom:1.25rem;
  scrollbar-width:none; -ms-overflow-style:none; -webkit-overflow-scrolling:touch; cursor:grab; }
.hscroll::-webkit-scrollbar{ display:none; }
.hscroll.dragging{ cursor:grabbing; scroll-snap-type:none; }
.hscroll.dragging a{ pointer-events:none; }
.hcard{ flex:none; width:clamp(280px,42vw,540px); scroll-snap-align:start; }
.hcard .frame{ aspect-ratio:4/3; overflow:hidden; background:var(--ink-2); }
.hcard .frame img{ width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease-tru); }
.hcard:hover .frame img{ transform:scale(1.05); }
.hcap{ margin-top:1rem; display:flex; flex-direction:column; gap:.2rem; }
.hcap .ht{ font-size:var(--t-h3); transition:transform .35s var(--ease-tru); display:inline-block; }
.hcard:hover .hcap .ht{ transform:translateX(6px); }
.hcap .hl{ font-size:var(--t-label); letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
@media (max-width:520px){ .hcard{ width:80vw; } }

/* ---------- Careers: open positions ---------- */
.openings{ border-top:1px solid var(--rule); }
.opening{ display:grid; grid-template-columns:1fr auto; column-gap:2rem; row-gap:.75rem;
  align-items:baseline; padding:clamp(1.4rem,3vw,2.2rem) 0; border-bottom:1px solid var(--rule);
  transition:padding-left .5s var(--ease-tru); }
.opening:hover{ padding-left:clamp(.4rem,1.2vw,1rem); }
.opening .op-role{ font-family:var(--font-display); font-weight:300; font-size:clamp(1.4rem,2.6vw,2.2rem); display:block; letter-spacing:-.01em; }
.opening .op-type{ font-size:var(--t-label); letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-top:.35rem; display:block; }
.opening p{ grid-column:1; font-size:var(--t-body); color:var(--muted); max-width:60ch; margin-top:.4rem; }
.opening .op-apply{ grid-column:2; grid-row:1; align-self:center; }
@media (max-width:560px){ .opening{ grid-template-columns:1fr; } .opening .op-apply{ grid-column:1; grid-row:auto; } }

/* ---------- Scroll-to-top ---------- */
.to-top{ position:fixed; right:clamp(1rem,2.5vw,2rem); bottom:clamp(1rem,2.5vw,2rem); z-index:90;
  width:46px; height:46px; display:grid; place-items:center; border:1px solid var(--rule);
  background:rgba(11,11,12,.55); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); color:var(--fg);
  opacity:0; transform:translateY(12px); pointer-events:none;
  transition:opacity .35s ease, transform .35s var(--ease-tru), border-color .3s ease, background .3s ease; }
.to-top.show{ opacity:1; transform:none; pointer-events:auto; }
.to-top:hover{ border-color:var(--accent-2); background:rgba(20,20,26,.8); }
.to-top svg{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.5; transition:transform .3s var(--ease-tru); }
.to-top:hover svg{ transform:translateY(-2px); }

/* ---------- Magnetic ---------- */
.magnetic{ display:inline-block; will-change:transform; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  .mega-cols{ gap:var(--s-6); }
  .statband{ grid-template-columns:repeat(2,1fr); }
  .statband .stat:nth-child(3){ border-left:0; }
  .team-grid{ grid-template-columns:repeat(3,1fr); }
  .ledger{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .triad{ grid-template-columns:1fr; }
  .triad .cell{ border-left:0; padding-left:0; border-top:1px solid var(--rule); padding-top:var(--s-5); }
  .triad .cell:first-child{ border-top:0; }
  .site-footer .foot-top{ grid-template-columns:1fr; }
  .foot-nav{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:720px){
  .split{ grid-template-columns:1fr; }
  .split .media{ min-height:60svh; }
  .split .media img{ position:relative; }
  .mega{ justify-content:flex-start; }
  .mega-cols{ gap:var(--s-5); align-items:flex-start; margin-top:var(--s-6); margin-bottom:var(--s-6); flex:0 0 auto; }
  .mega-group{ flex-direction:column; gap:var(--s-6); }  /* col1: Projects+Practice, col2: Services+Connect */
  .mega-col h4{ margin-bottom:var(--s-3); }
  .mega-foot{ flex:0 0 auto; }
  .statband{ grid-template-columns:1fr; }
  .statband .stat{ border-left:0; border-top:1px solid var(--hair-dark); }
  .statband .stat:first-child{ border-top:0; }
  .team-grid{ grid-template-columns:repeat(2,1fr); }
  .ledger{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .foot-nav{ grid-template-columns:1fr 1fr; }
  .brand .wordmark{ display:none; } /* monogram only on small screens */
  .kinetic .globe{ display:none; }
  .quote blockquote{ max-width:none; }
  .disc-grid{ grid-template-columns:1fr; }
  .disc-media{ aspect-ratio:16/10; }
  .disc-row.is-active p, .disc-row p{ max-height:8rem; opacity:1; margin-top:.6rem; }
  .disc-row .dt .arrow2{ opacity:1; transform:none; }
}

/* Projects grid (defined per page but base here) */
.pgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:4px; }
@media (max-width:900px){ .pgrid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .pgrid{ grid-template-columns:1fr; } }

/* ============================================================
   MOBILE-FIRST OVERRIDES (single column, no overflow)
   ============================================================ */
@media (max-width:820px){
  /* collapse any inline two-column grid to one column */
  .grid[style]{ grid-template-columns:1fr !important; gap:var(--s-6) !important; }
  /* practice / project / service structural grids */
  #leadership .grid{ grid-template-columns:1fr !important; }
  .kv{ max-width:none !important; }
  .lead{ max-width:none; }
}
@media (max-width:520px){
  :root{ --page-x:1.15rem; }
  .team-grid{ grid-template-columns:1fr 1fr; gap:1rem; }
  .ledger{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hero-service{ font-size:1.1rem; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1 !important; transform:none !important; }
  .marquee-track{ animation:none !important; }
  .frame.zoom > img{ transform:none; }
}