/* ==========================================================================
   SKYWALL v2.1 — light-first, three dark moments.
   Clash Display (500 max) + Switzer. Gallery-like, composed, quiet.
   ========================================================================== */

@font-face{font-family:'Clash Display';src:url('../fonts/clash-display-var.woff2') format('woff2-variations');
  font-weight:200 700;font-style:normal;font-display:swap}
@font-face{font-family:'Switzer';src:url('../fonts/switzer-var.woff2') format('woff2-variations');
  font-weight:100 900;font-style:normal;font-display:swap}

:root{
  /* v4: these two were #FAFBFD and #F3F6FA — about 1.5% apart in luminance, so the
     alternating sections were technically alternating and visually one unbroken white
     run. That is the actual reason the page "felt empty": nothing marked where one
     section ended and the next began. Real separation now. */
  --paper:#FFFFFF;
  --paper-2:#EDF2F8;
  --ink:#0B1C33;
  --ink-2:#46586F;
  --ink-3:#5E6D83;
  --line:#E2E8F0;
  --line-2:#EDF1F6;

  /* dark moments */
  --void:#050D1F;
  --deep:#0A1A38;
  --glass:#EAF0F8;
  --glass-dim:rgba(234,240,248,.76);
  --glass-faint:rgba(234,240,248,.58);
  --hair:rgba(234,240,248,.14);
  --hair-soft:rgba(234,240,248,.08);

  --blue:#004AAD;
  --blue-lit:#2E7BE8;
  --orange:#FF8A2E;

  --ff-display:'Clash Display',-apple-system,'Segoe UI',sans-serif;
  --ff-body:'Switzer',-apple-system,'Segoe UI',sans-serif;

  /* v4 grid: 1280 container, 80px side margins at 1440 (1360 on XL). */
  --container:1280px;
  --gutter:clamp(20px,4vw,48px);
  /* v4 vertical scale. Was clamp(72px,8vw,124px) = 115px a side at 1440, so two
     adjacent sections put 230px of nothing between their content. */
  --sy:clamp(48px,5.4vw,78px);
  --sy-tight:clamp(40px,4.4vw,64px);
  /* heading → content. Capped at 48px per the audit. */
  --sy-head:clamp(24px,2.6vw,40px);
  --measure:65ch;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-io:cubic-bezier(.65,.05,.36,1);
  --hdr:72px;
}

/* --- Reset ---------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* v4.2: <dd> carries a 40px default margin-inline-start. Every stat rail built on a
   <dl> therefore indented its LABEL 40px past its NUMBER — measurably, on every stat,
   on every page. This one line is the whole "number and label don't share an edge" bug. */
dl,dd{margin:0}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--ff-body);font-size:16px;font-weight:400;line-height:1.7;
  -webkit-font-smoothing:antialiased;overflow-x:clip}
body.is-locked{overflow:hidden}
img,svg,video,canvas{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4{margin:0;font-family:var(--ff-display);font-weight:500;line-height:1.14;letter-spacing:-.02em}
p{margin:0;max-width:var(--measure)}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:2px}
::selection{background:var(--blue);color:#fff}

/* --- Layout --------------------------------------------------------------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.sec{padding-block:var(--sy);position:relative}
.sec--tight{padding-block:var(--sy-tight)}
.sec--alt{background:var(--paper-2)}
.sec--dark{background:var(--void);color:var(--glass)}

/* --- Type ----------------------------------------------------------------- */
.d1{font-size:clamp(2.2rem,5.1vw,4.25rem);font-weight:500;letter-spacing:-.03em;line-height:1.04}
.d2{font-size:clamp(1.65rem,2.9vw,2.5rem);font-weight:500;letter-spacing:-.022em;line-height:1.16}
.d3{font-size:clamp(1.15rem,1.6vw,1.4rem);font-weight:500;letter-spacing:-.014em;line-height:1.3}
.lead{font-size:clamp(1.05rem,1.1vw,1.2rem);line-height:1.7;color:var(--ink-2);max-width:var(--measure)}
.sec--dark .lead,.hero .lead,.reel .lead,.aspect .lead,.mfg .lead,.cta .lead{color:var(--glass-dim)}

.lbl{display:inline-flex;align-items:center;gap:11px;font-family:var(--ff-body);font-size:11.5px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
/* v3.5: the orange rule that preceded every eyebrow is gone. It sat before ~40
   subheadings across the site and read as a template tic rather than a detail.
   .lbl keeps its gap:11px for the cases that still put an <i> in the label. */
.lbl::before{content:none}
.lbl--bare::before{content:none}
.lbl{gap:0}
.sec--dark .lbl,.hero .lbl,.reel .lbl,.aspect .lbl,.mfg .lbl,.cta .lbl{color:var(--glass-faint)}

.sec-head{max-width:var(--measure);margin-bottom:var(--sy-head)}
.sec-head .d2{margin-top:14px}
.sec-head .lead{margin-top:16px}

/* dimension-line separator */
.dim{display:flex;align-items:center;gap:14px;color:var(--ink-3);
  font-size:10.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase}
.dim::before,.dim::after{content:"";height:1px;background:var(--line);flex:1}
.dim span{position:relative;padding:0 4px;flex:none}
.dim span::before,.dim span::after{content:"";position:absolute;top:50%;width:1px;height:8px;
  background:var(--line);transform:translateY(-50%)}
.dim span::before{left:-9px}.dim span::after{right:-9px}

/* --- Buttons -------------------------------------------------------------- */
.btn{position:relative;display:inline-flex;align-items:center;gap:11px;padding:15px 26px;border-radius:100px;
  font-size:.78rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;will-change:transform;
  transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease)}
.btn svg{width:14px;height:14px;transition:transform .4s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn--fill{background:var(--ink);color:var(--paper)}
.btn--fill:hover{background:var(--blue);color:#fff}
.btn--line{border:1px solid var(--line);color:var(--ink);background:#fff}
.btn--line:hover{border-color:var(--ink)}
.sec--dark .btn--fill,.hero .btn--fill,.reel .btn--fill,.aspect .btn--fill,.mfg .btn--fill,.cta .btn--fill{
  background:var(--glass);color:var(--void)}
.sec--dark .btn--fill:hover,.hero .btn--fill:hover,.aspect .btn--fill:hover,.mfg .btn--fill:hover,
.cta .btn--fill:hover{background:var(--orange);color:var(--void)}
.sec--dark .btn--line,.hero .btn--line,.reel .btn--line,.aspect .btn--line,.mfg .btn--line,.cta .btn--line{
  border-color:var(--hair);color:var(--glass);background:transparent}
.sec--dark .btn--line:hover,.hero .btn--line:hover,.aspect .btn--line:hover,.mfg .btn--line:hover{
  border-color:var(--glass);background:rgba(234,240,248,.07)}

/* --- Grain ---------------------------------------------------------------- */
.grain{position:fixed;inset:-100%;z-index:9998;pointer-events:none;opacity:.016;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 7s steps(6) infinite}
@keyframes grain{0%,100%{transform:translate(0,0)}16%{transform:translate(-4%,-4%)}33%{transform:translate(3%,-2%)}
  50%{transform:translate(-2%,3%)}66%{transform:translate(4%,2%)}83%{transform:translate(-3%,1%)}}

/* ==========================================================================
   PRELOADER (dark — leads into the video hero)
   ========================================================================== */
.pre{position:fixed;inset:0;z-index:9999;background:var(--void);display:grid;place-items:center}
.pre__mark{width:76px;height:82px}
.pre__mark path,.pre__mark polygon{fill:none;stroke:var(--glass);stroke-width:1.5;
  stroke-dasharray:var(--len,14000);stroke-dashoffset:var(--len,14000);
  animation:draw 1.15s var(--ease-io) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.pre__num{position:absolute;bottom:clamp(24px,4vw,44px);right:var(--gutter);min-width:3ch;text-align:right;font-family:var(--ff-display);
  font-size:clamp(1.8rem,4vw,2.8rem);font-weight:500;letter-spacing:-.02em;color:var(--glass);
  font-variant-numeric:tabular-nums;line-height:1}
.pre__bar{position:absolute;left:var(--gutter);right:var(--gutter);bottom:clamp(26px,4vw,48px);height:1px;
  background:var(--hair)}
.pre__bar i{display:block;height:100%;width:0;background:var(--glass)}
.pre.is-done{clip-path:inset(0 0 100% 0);transition:clip-path 1s var(--ease-io);pointer-events:none}
body.pre-on{overflow:hidden}

/* ==========================================================================
   CURSOR
   ========================================================================== */
.cur{position:fixed;top:0;left:0;z-index:9997;pointer-events:none;mix-blend-mode:difference;opacity:0;
  transition:opacity .3s}
.cur.is-on{opacity:1}
.cur__dot{position:absolute;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:#fff}
.cur__ring{position:absolute;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;
  border:1px solid rgba(255,255,255,.6);display:grid;place-items:center;
  transition:width .35s var(--ease),height .35s var(--ease),margin .35s var(--ease),background .35s}
.cur__txt{font-size:9px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#fff;opacity:0;
  transition:opacity .25s;white-space:nowrap}
.cur.is-lg .cur__ring{width:84px;height:84px;margin:-42px 0 0 -42px;background:rgba(255,255,255,.12)}
.cur.is-lg .cur__txt{opacity:1}
.cur.is-lg .cur__dot{opacity:0}
@media (hover:none),(pointer:coarse){.cur{display:none}}

/* ==========================================================================
   HEADER — colour logo on light, white knockout over the dark hero
   ========================================================================== */
.hdr{position:fixed;inset:0 0 auto;z-index:220;height:var(--hdr);display:flex;align-items:center;
  transition:background .45s var(--ease),backdrop-filter .45s,height .4s var(--ease)}
.hdr::after{content:"";position:absolute;inset:auto 0 0;height:1px;background:transparent;transition:background .45s}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:26px;width:100%}
.hdr__logo{position:relative;display:block;height:28px}
.hdr__logo img{height:28px;width:auto;transition:opacity .35s var(--ease)}
.hdr__logo .lg-white{position:absolute;inset:0}
.hdr .lg-white{opacity:1}
.hdr .lg-colour{opacity:0}
/* liquid glass, placement 1 of 3: the scrolled header.
   Base = translucency + blur + saturate + a specular top edge. True refraction via
   SVG feDisplacementMap is Chromium-only (w3c/svgwg#1142), so it is never the base. */
.hdr.is-stuck,.hdr.on-light{background:rgba(250,251,253,.72);
  backdrop-filter:saturate(1.5) blur(18px);-webkit-backdrop-filter:saturate(1.5) blur(18px);
  height:64px;box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 1px 0 rgba(11,28,51,.05)}
.hdr.is-stuck::after,.hdr.on-light::after{background:var(--line)}
.hdr.is-stuck .lg-white,.hdr.on-light .lg-white{opacity:0}
.hdr.is-stuck .lg-colour,.hdr.on-light .lg-colour{opacity:1}

.nav{display:flex;align-items:center;gap:clamp(20px,2.2vw,36px)}
.nav a{position:relative;font-size:.78rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:var(--glass);padding:6px 0;transition:color .35s}
.nav a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--orange);
  transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
.hdr.is-stuck .nav a,.hdr.on-light .nav a{color:var(--ink)}
.hdr.is-stuck .nav a:hover,.hdr.on-light .nav a:hover{color:var(--blue)}
.nav__cta{padding:10px 20px !important;border:1px solid var(--hair);border-radius:100px}
.nav__cta::after{display:none !important}
.nav__cta:hover{background:var(--glass);color:var(--void) !important;border-color:var(--glass)}
.hdr.is-stuck .nav__cta,.hdr.on-light .nav__cta{border-color:var(--ink);background:var(--ink);
  color:var(--paper) !important}
.hdr.is-stuck .nav__cta:hover,.hdr.on-light .nav__cta:hover{background:var(--blue);border-color:var(--blue);
  color:#fff !important}

.burger{display:none;width:42px;height:42px;flex-direction:column;justify-content:center;gap:6px}
.burger i{display:block;width:22px;height:1.5px;background:var(--glass);margin-left:auto;
  transition:transform .45s var(--ease),opacity .3s,background .35s}
.hdr.is-stuck .burger i,.hdr.on-light .burger i{background:var(--ink)}
body.menu-on .burger i{background:var(--ink)}
body.menu-on .burger i:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
body.menu-on .burger i:nth-child(2){opacity:0}
body.menu-on .burger i:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

.mnav{position:fixed;inset:0;z-index:210;background:var(--paper);display:flex;flex-direction:column;
  justify-content:center;padding:0 var(--gutter);clip-path:inset(0 0 100% 0);visibility:hidden;
  transition:clip-path .7s var(--ease-io),visibility .7s}
body.menu-on .mnav{clip-path:inset(0 0 0 0);visibility:visible}
body.menu-on .hdr{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
body.menu-on .hdr::after{background:transparent}
body.menu-on .hdr .lg-white{opacity:0}
body.menu-on .hdr .lg-colour{opacity:1}
.mnav a{display:block;font-family:var(--ff-display);font-weight:500;font-size:clamp(1.85rem,7.6vw,2.7rem);
  letter-spacing:-.02em;line-height:1.34;color:var(--ink);opacity:0;transform:translateY(22px);
  transition:opacity .6s var(--ease),transform .6s var(--ease),color .3s}
body.menu-on .mnav a{opacity:1;transform:none}
body.menu-on .mnav a:nth-child(1){transition-delay:.16s}
body.menu-on .mnav a:nth-child(2){transition-delay:.22s}
body.menu-on .mnav a:nth-child(3){transition-delay:.28s}
body.menu-on .mnav a:nth-child(4){transition-delay:.34s}
body.menu-on .mnav a:nth-child(5){transition-delay:.40s}
.mnav a:hover{color:var(--blue)}
.mnav__foot{position:absolute;left:var(--gutter);right:var(--gutter);bottom:34px;display:flex;gap:18px;
  flex-wrap:wrap;justify-content:space-between;color:var(--ink-3);font-size:.85rem}

/* ==========================================================================
   HERO — Mumbai video inside the SKYWALL letterforms, opening on scroll
   ========================================================================== */
/* v2.2: the intro plays on load instead of scrubbing on scroll, so the hero no longer
   pins and no longer needs to reserve a 120vh scroll runway. */
.hero{position:relative;background:var(--void);color:var(--glass);height:100svh}
.hero__pin{position:relative;height:100svh;overflow:hidden;display:grid;place-items:center}

/* ONE video, full-bleed. The letters are not a second copy of the footage —
   they are a hole punched through the veil that sits on top of it, so the
   letterforms and the background are the same pixels and cannot desync. */
.hero__media{position:absolute;inset:0;z-index:0}
/* v2.4: the old clip opened night-dark and needed a brightness lift to keep the
   letterforms off the near-black veil. The skyline plate opens on a lit dusk sky, so
   the same lift clipped the sun side of the frame — dropped. Losing the per-frame
   filter also takes a compositing pass off every painted video frame. */
.hero__media video,.hero__media img{width:100%;height:100%;object-fit:cover}

/* the veil: opaque everywhere EXCEPT inside the letterforms. Growing --ms
   grows the hole until the veil is punched away entirely. */
.hero__veil{position:absolute;inset:0;z-index:1;background:var(--void);pointer-events:none;
  opacity:var(--veil,1);
  -webkit-mask-image:var(--m),linear-gradient(#000,#000);
  mask-image:var(--m),linear-gradient(#000,#000);
  -webkit-mask-repeat:no-repeat,no-repeat;mask-repeat:no-repeat,no-repeat;
  -webkit-mask-position:center,center;mask-position:center,center;
  -webkit-mask-size:var(--ms,46%) auto,100% 100%;mask-size:var(--ms,46%) auto,100% 100%;
  -webkit-mask-composite:xor;mask-composite:exclude;
  will-change:mask-size,opacity}
/* v2.3: once the intro is done the veil must not paint at all — a fully-scaled mask
   still renders a letterform edge over the moving video, which read as a frozen frame. */
.hero.is-clear .hero__veil{display:none}

/* No mask-composite (old Safari/Firefox) → the veil would hide the video
   outright. Drop it and show the full frame instead of a black box. */
@supports not ((mask-composite:exclude) or (-webkit-mask-composite:xor)){
  .hero__veil{display:none}
}

.hero__wash{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:var(--wash,0);
  background:linear-gradient(180deg,rgba(5,13,31,.6),rgba(5,13,31,.16) 42%,rgba(5,13,31,.8))}

/* The copy fades in via a CLASS, not a --copy opacity variable. An ancestor stuck at a
   partial opacity makes axe (and Lighthouse) score the button's contrast against a blended
   colour and fail it; `visibility:hidden` is skipped by axe outright, and once `.live` lands
   the pair is opaque and passes cleanly. */
.hero__in{position:relative;z-index:4;text-align:center;pointer-events:none;
  opacity:0;visibility:hidden;transform:translateY(10px);
  /* v3: opacity switches instantly; the entrance is carried entirely by the transform.
     Any interpolated opacity leaves a window where axe blends the CTA against the video
     behind it and reports a contrast failure — the settled pair is 17:1, so the finding
     is about the transition, not the design. Shortening the fade only made the audit
     flaky (97 or 100 depending on where Lighthouse sampled); removing it makes the
     result deterministic, and a 10px rise at full opacity reads just as well. */
  transition:opacity 0s,transform .9s var(--ease),visibility 0s}
.hero__in.live{opacity:1;visibility:visible;transform:none}
.hero__in.live{pointer-events:auto}
.hero__rule{width:1px;height:52px;background:var(--hair);margin:0 auto 24px;position:relative;overflow:hidden}
.hero__rule::after{content:"";position:absolute;inset:0;background:var(--orange);
  animation:cue 2.6s var(--ease-io) infinite}
@keyframes cue{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}
.hero__ttl{font-size:clamp(1.5rem,3.2vw,2.75rem);font-weight:500;letter-spacing:-.024em;line-height:1.22;
  color:var(--glass);max-width:20ch;margin-inline:auto}
.hero__cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:28px}
.hero__cue{position:absolute;left:0;right:0;bottom:24px;z-index:4;text-align:center;font-size:10.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--glass-faint);opacity:var(--scrollcue,1);
  transition:opacity .4s}

/* fallback: poster + copy, no mask */
.hero--static .hero__veil{display:none}
.hero--static .hero__wash{opacity:1}
.hero--static .hero__in{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.hero--static{height:auto}
.hero--static .hero__pin{height:82svh}

/* ==========================================================================
   MANIFESTO — asymmetric editorial, two drifting images
   ========================================================================== */
/* ==========================================================================
   MANIFESTO — cursor-spotlight / "torch" reveal (v2.3, element B)
   Near-black section. A radial mask follows the cursor and uncovers the shop
   drawing beneath. The drawing is inert SVG; only the mask position moves.
   ========================================================================== */
.mani{position:relative;overflow:hidden;background:var(--void);color:var(--glass);
  padding-block:clamp(60px,6.6vw,96px);
  /* torch position, driven from JS; drifts until the pointer arrives */
  --tx:50%; --ty:50%; --tr:360px}
.mani__dark{position:absolute;inset:0;z-index:0;pointer-events:none}
/* the drawing sits at a low base opacity so the section never looks empty, and the
   torch lifts it to full — a pure on/off mask read as a blank void with a glow. */
.mani__draw{position:absolute;inset:0;opacity:.9}
.mani__draw svg{width:100%;height:100%;display:block;
  -webkit-mask-image:radial-gradient(circle var(--tr) at var(--tx) var(--ty),#000 0%,rgba(0,0,0,.55) 45%,rgba(0,0,0,.12) 75%,rgba(0,0,0,.07) 100%);
  mask-image:radial-gradient(circle var(--tr) at var(--tx) var(--ty),#000 0%,rgba(0,0,0,.55) 45%,rgba(0,0,0,.12) 75%,rgba(0,0,0,.07) 100%);
  will-change:mask-image}
/* the warm core of the torch, so it reads as light and not just a hole */
.mani__torch{position:absolute;inset:0;
  background:radial-gradient(circle calc(var(--tr) * .95) at var(--tx) var(--ty),
    rgba(110,155,232,.13) 0%,rgba(255,138,46,.06) 40%,transparent 72%)}
/* v3: asymmetric editorial — copy left, a real façade right and dropped below the
   text baseline. The torch drawing still runs behind both. */
/* v3.2: the image column carries annotations now, so it earns more width and the gap
   tightens — that is what closes the dead space rather than padding it out. */
.mani__grid{position:relative;z-index:1;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  gap:clamp(28px,4vw,58px);align-items:center}
.mani__t{max-width:44ch;padding-top:0}
.mani__t p{margin-top:18px;font-family:var(--ff-display);font-weight:500;letter-spacing:-.022em;
  line-height:1.3;font-size:clamp(1.45rem,2.5vw,2.15rem);max-width:none}

.mani__fig{position:relative;margin:0}
.mcal__img{display:block;overflow:hidden;border-radius:3px}
.mani__fig img{width:100%;height:auto;display:block;aspect-ratio:4/5;object-fit:cover;
  filter:saturate(.92) contrast(1.03)}

/* --- annotation callouts: leader lines draw out to the element they name ---- */
.mcal__pt{position:absolute;left:var(--x1);top:var(--y);width:var(--w);height:0;z-index:3}
.mcal__ln{position:absolute;left:0;top:0;width:100%;height:1px;background:var(--orange);
  transform:scaleX(0);transform-origin:left;
  transition:transform .72s var(--ease-io);transition-delay:var(--d)}
.mcal__dot{position:absolute;right:0;top:0;width:7px;height:7px;margin:-3px -3px 0 0;
  border-radius:50%;background:var(--orange);box-shadow:0 0 0 3px rgba(255,138,46,.22);
  opacity:0;transform:scale(.4);
  transition:opacity .4s var(--ease),transform .5s var(--ease-io);
  transition-delay:calc(var(--d) + .5s)}
.mcal__lb{position:absolute;left:0;bottom:7px;display:inline-flex;align-items:baseline;gap:8px;
  white-space:nowrap;padding:5px 10px;border-radius:3px;
  background:rgba(5,13,31,.62);-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);
  border:1px solid rgba(234,240,248,.16);
  font-size:10.5px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;
  color:var(--glass);opacity:0;transform:translateY(5px);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
  transition-delay:calc(var(--d) + .28s)}
.mcal__lb b{font-weight:500;color:var(--orange);font-variant-numeric:tabular-nums}
.mcal.in .mcal__ln{transform:scaleX(1)}
.mcal.in .mcal__dot{opacity:1;transform:scale(1)}
.mcal.in .mcal__lb{opacity:1;transform:none}
/* the dimension line — the same drafting motif the blueprint behind it uses */
.mani__dim{position:absolute;left:0;bottom:-30px;display:flex;align-items:center;gap:10px;
  font-size:10.5px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;
  color:var(--glass-faint)}
.mani__dim i{display:block;width:clamp(34px,5vw,64px);height:1px;background:var(--orange);position:relative}
.mani__dim i::before,.mani__dim i::after{content:"";position:absolute;top:-3px;width:1px;height:7px;
  background:var(--orange)}
.mani__dim i::before{left:0}
.mani__dim i::after{right:0}
.mani__dim b{font-weight:500}

@media (max-width:900px){
  .mani__grid{grid-template-columns:1fr;gap:clamp(34px,7vw,54px)}
  .mani__t{max-width:none;padding-top:0}
  .mani__fig{margin-top:0;max-width:420px}
}
.mani__hint{display:inline-block;margin-top:clamp(24px,3vw,40px);font-size:11px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--glass-faint)}
/* hover:none is the correct test, but some mobile browsers still report hover:hover,
   so the narrow breakpoint backs it up — "move your cursor" must never reach a phone */
@media (hover:none){ .mani__hint{display:none} }
@media (max-width:900px){ .mani__hint{display:none} }
/* the scroll-fill still runs, now on dark. The "off" state has to stay legible —
   it is body copy, not decoration, so it cannot drop below AA. */
.mani .w{color:#7C8FAC;transition:color .4s var(--ease)}
.mani .w.on{color:var(--glass)}
.mani .w.key{background-image:linear-gradient(var(--orange),var(--orange));background-repeat:no-repeat;
  background-position:0 calc(100% + 4px);background-size:0% 1.5px;
  transition:color .4s var(--ease),background-size .8s var(--ease)}
.mani .w.key.on{background-size:100% 1.5px}

/* ==========================================================================
   MARQUEE
   ========================================================================== */
.marq{position:relative;padding-block:clamp(18px,2vw,28px);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);overflow:hidden;background:var(--paper)}
.marq__track{display:flex;width:max-content;will-change:transform;animation:marq 38s linear infinite}
.marq:hover .marq__track{animation-play-state:paused}
.marq__set{display:flex;align-items:center;flex:none}
.marq__set span{font-family:var(--ff-display);font-weight:500;font-size:clamp(.95rem,1.3vw,1.15rem);
  color:var(--ink-3);padding-inline:clamp(18px,2vw,30px);white-space:nowrap;transition:color .35s}
.marq__set span:hover{color:var(--ink)}
.marq__set i{width:4px;height:4px;border-radius:50%;background:var(--orange);flex:none;opacity:.9}
@keyframes marq{to{transform:translateX(-50%)}}

/* ==========================================================================
   PROJECT REEL — pinned horizontal, real photos
   ========================================================================== */
.reel{position:relative;background:var(--void);color:var(--glass)}
.reel__vp{position:relative;height:100svh;overflow:hidden}
.reel__track{position:absolute;top:0;left:0;height:100%;display:flex;align-items:center;
  padding:176px var(--gutter) 78px;will-change:transform}
/* v2.2: panel is 16:9 and every photo is now exported at 16:9, so cover fills it
   edge-to-edge. No blurred fill, no contain, no bars. */
.rp{position:relative;flex:none;width:min(74vw,1000px);height:100%;padding:0 clamp(8px,.9vw,15px);
  display:flex;align-items:center}
.rp__in{position:relative;width:100%;aspect-ratio:16/9;max-height:100%;overflow:hidden;border-radius:4px;
  background:var(--deep);display:block}
.rp__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;will-change:transform}
.rp__in::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,13,31,.45) 0%,rgba(5,13,31,.04) 32%,rgba(5,13,31,.88) 100%)}
.rp__meta{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(20px,2.4vw,34px)}
.rp__loc{font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--glass-faint)}
.rp__n{margin-top:7px;font-family:var(--ff-display);font-weight:500;letter-spacing:-.02em;
  font-size:clamp(1.3rem,2.1vw,1.85rem);color:var(--glass)}
.rp__chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:13px}
.rp__chips span{padding:5px 11px;border:1px solid var(--hair);border-radius:100px;font-size:12px;
  color:var(--glass-dim)}
/* liquid glass, placement 3 of 3: small chips floating over photography. */
.rp__pill{position:absolute;top:clamp(16px,1.8vw,24px);left:clamp(16px,1.8vw,24px);z-index:2;
  display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:100px;font-size:9.5px;
  font-weight:600;letter-spacing:.14em;text-transform:uppercase;background:rgba(5,13,31,.42);
  backdrop-filter:blur(12px) saturate(1.4);-webkit-backdrop-filter:blur(12px) saturate(1.4);
  border:1px solid rgba(255,255,255,.22);color:var(--glass);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28)}
.rp__pill i{width:5px;height:5px;border-radius:50%;flex:none}
.rp__pill[data-s="completed"] i{background:var(--blue-lit)}
.rp__pill[data-s="ongoing"] i{background:var(--orange)}
.rp__geo{position:absolute;top:clamp(16px,1.8vw,24px);right:clamp(16px,1.8vw,24px);z-index:2;font-size:12px;
  letter-spacing:.08em;color:var(--glass-faint);font-variant-numeric:tabular-nums}

.reel__head{position:absolute;top:calc(var(--hdr) + clamp(14px,2.4vw,28px));left:var(--gutter);z-index:5}
.reel__head .d2{margin-top:8px;color:var(--glass);font-size:clamp(1.35rem,2.1vw,1.85rem)}
.reel__bar{position:absolute;left:var(--gutter);right:var(--gutter);bottom:20px;z-index:5;display:flex;
  align-items:center;gap:16px}
.reel__line{position:relative;flex:1;height:1px;background:var(--hair)}
.reel__line i{position:absolute;left:0;top:0;height:1px;background:var(--orange);width:var(--rp,6%)}
.reel__line::before,.reel__line::after{content:"";position:absolute;top:-4px;width:1px;height:9px;
  background:var(--hair)}
.reel__line::before{left:0}.reel__line::after{right:0}
.reel__ct{font-size:11px;letter-spacing:.12em;color:var(--glass-faint);font-variant-numeric:tabular-nums;
  flex:none}
.reel__ct b{color:var(--glass);font-weight:500}
.reel__hint{position:absolute;right:var(--gutter);bottom:48px;z-index:5;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--glass-faint)}

/* mobile: swipe + snap, no pin */
.reel__mob{display:none;background:var(--void);color:var(--glass);padding-block:clamp(56px,7vw,80px)}
.reel__strip{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding-inline:var(--gutter);
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.reel__strip::-webkit-scrollbar{display:none}
.reel__strip .rp{width:82vw;height:auto;padding:0;scroll-snap-align:center}
.reel__strip .rp__in{height:auto;aspect-ratio:3/4}

/* ==========================================================================
   CASE STUDY (light) + ASPECT dark feature card
   ========================================================================== */
.cs{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,64px);align-items:center}
.cs__m{position:relative;overflow:hidden;border-radius:4px;background:var(--paper-2);border:1px solid var(--line)}
.cs__m img{width:100%;aspect-ratio:4/3;object-fit:cover}
.cs__no{font-family:var(--ff-display);font-size:clamp(1.5rem,2.2vw,1.95rem);font-weight:500;line-height:1;
  color:var(--line);letter-spacing:-.02em}
.cs__t{margin-top:6px;font-size:clamp(1.6rem,2.8vw,2.4rem)}
.cs__meta{margin-top:12px;display:flex;align-items:center;gap:10px;font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);font-variant-numeric:tabular-nums}
.cs__meta i{width:5px;height:5px;border-radius:50%;background:var(--orange);flex:none}
.cs .lead{margin-top:16px}
.spec{margin-top:24px;border-top:1px solid var(--line);max-width:520px}
.spec__r{display:grid;grid-template-columns:108px 1fr;gap:14px;padding:11px 0;border-bottom:1px solid var(--line);
  opacity:0;transform:translateY(6px)}
.spec__r.on{opacity:1;transform:none;transition:opacity .5s var(--ease),transform .5s var(--ease)}
.spec__k{font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.spec__v{font-size:.94rem;color:var(--ink);max-width:none}
.spec__v .c{color:var(--blue);font-weight:500}

.aspect{background:var(--void);color:var(--glass);border-radius:6px;overflow:hidden;
  padding:clamp(26px,3.4vw,52px)}
.aspect__grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(26px,3.4vw,50px);align-items:center}
.aspect .d2{color:var(--glass)}

/* v4.1: the day/night plates are 16:9; the slot was 16:10 and cropped them. */
.dn{position:relative;width:100%;aspect-ratio:16/9;border-radius:4px;overflow:hidden;
  border:1px solid var(--hair);background:var(--deep);touch-action:pan-y;user-select:none}
.dn__img{position:absolute;inset:0}
.dn__img img{width:100%;height:100%;object-fit:cover;pointer-events:none}
.dn__night{clip-path:inset(0 0 0 var(--p,50%))}
.dn__tag{position:absolute;top:13px;z-index:3;font-size:9.5px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;padding:6px 12px;border-radius:100px;background:rgba(5,13,31,.62);
  backdrop-filter:blur(8px);color:var(--glass);border:1px solid var(--hair)}
.dn__tag--d{left:13px}
.dn__tag--n{right:13px}
.dn__line{position:absolute;top:0;bottom:0;left:var(--p,50%);width:2px;z-index:4;background:var(--glass);
  transform:translateX(-1px);pointer-events:none}
.dn__grip{position:absolute;top:50%;left:var(--p,50%);z-index:5;width:48px;height:48px;margin:-24px 0 0 -24px;
  border-radius:50%;border:1px solid var(--glass);background:rgba(5,13,31,.55);backdrop-filter:blur(10px);
  display:grid;place-items:center;cursor:grab;transition:transform .3s var(--ease),background .3s,border-color .3s}
.dn__grip:active{cursor:grabbing;transform:scale(.94)}
.dn:focus-within .dn__grip,.dn__grip:hover{background:var(--orange);border-color:var(--orange)}
.dn__grip svg{width:18px;height:18px;stroke:var(--glass);stroke-width:1.5;fill:none;pointer-events:none}
.dn__grip:hover svg,.dn:focus-within .dn__grip svg{stroke:var(--void)}
.dn__grip:focus-visible{outline:2px solid var(--orange);outline-offset:4px}

/* ==========================================================================
   WHAT WE BUILD — split showcase (light)
   Selecting a system crossfades the panel to a project that actually carries it.
   ========================================================================== */
/* v3: the meta used to sit under the LIST, which left the panel floating over ~450px
   of empty column. Moving it under the PANEL closes that void and puts the description
   and the related-project chips directly beneath the photograph they describe. */
.shw{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  grid-template-areas:"list panel" "list meta";
  gap:clamp(24px,3vw,48px) clamp(28px,4vw,64px);align-items:start}
.shw__list{grid-area:list;border-top:1px solid var(--line)}
.shw__row{width:100%;display:grid;grid-template-columns:38px 1fr auto;align-items:center;
  gap:clamp(10px,1.4vw,18px);padding:clamp(15px,1.7vw,21px) 0;text-align:left;
  border-bottom:1px solid var(--line);background:none;border-top:0;border-left:0;border-right:0;
  cursor:pointer;transition:padding-left .4s var(--ease)}
.shw__row:hover{padding-left:8px}
.shw__row.on{padding-left:12px}
.shw__no{font-size:11px;font-weight:500;letter-spacing:.1em;color:var(--ink-3);
  font-variant-numeric:tabular-nums;transition:color .3s var(--ease)}
.shw__row.on .shw__no{color:var(--blue)}
.shw__nm{display:block;font-family:var(--ff-display);font-weight:500;letter-spacing:-.018em;
  font-size:clamp(1.02rem,1.35vw,1.22rem);color:var(--ink)}
.shw__one{display:block;margin-top:3px;font-size:12.5px;color:var(--ink-3)}
.shw__ct{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;
  padding:0 7px;border-radius:100px;border:1px solid var(--line);font-size:11.5px;font-weight:500;
  color:var(--ink-3);transition:all .3s var(--ease);font-variant-numeric:tabular-nums}
.shw__row.on .shw__ct{border-color:var(--blue);color:#fff;background:var(--blue)}
/* the selected row is marked by a rule that draws in, not by a colour swap */
.shw__row{position:relative}
.shw__row::before{content:"";position:absolute;left:0;top:-1px;bottom:-1px;width:2px;
  background:var(--orange);transform:scaleY(0);transform-origin:top;
  transition:transform .45s var(--ease)}
.shw__row.on::before{transform:scaleY(1)}

.shw__panel{grid-area:panel;position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:4px;
  background:var(--paper-2);border:1px solid var(--line)}
.shw__pane{position:absolute;inset:0;margin:0;opacity:0;visibility:hidden;
  transition:opacity .65s var(--ease),visibility .65s,transform 1.4s var(--ease);
  transform:scale(1.04)}
.shw__pane.on{opacity:1;visibility:visible;transform:scale(1)}
.shw__pane img{width:100%;height:100%;object-fit:cover;display:block}
.shw__pane figcaption{position:absolute;left:0;right:0;bottom:0;padding:clamp(16px,2vw,26px);
  background:linear-gradient(180deg,rgba(5,13,31,0),rgba(5,13,31,.82))}
.shw__capk{display:block;font-size:11px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;
  color:var(--glass-faint)}
.shw__capn{display:inline-block;margin-top:5px;font-family:var(--ff-display);font-weight:500;
  font-size:clamp(1.05rem,1.5vw,1.32rem);color:var(--glass);letter-spacing:-.018em}
.shw__capn:hover{color:var(--orange)}

.shw__meta{grid-area:meta;position:relative}
.shw__m{display:none}
.shw__m.on{display:block;animation:shwin .5s var(--ease) both}
@keyframes shwin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.shw__rel{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.shw__rel a{padding:6px 12px;border:1px solid var(--line);border-radius:100px;font-size:12.5px;
  color:var(--ink-2);transition:all .3s var(--ease)}
.shw__rel a:hover{border-color:var(--blue);color:var(--blue)}

/* mobile: no hover to depend on — stack each system with its own image */
@media (max-width:900px){
  .shw{grid-template-columns:1fr;grid-template-areas:"list" "panel" "meta";gap:22px}
  .shw__row:hover,.shw__row.on{padding-left:10px}
}

/* ==========================================================================
   SYSTEMS ACCORDION (light) — legacy, retained for /systems until 2.11 lands
   ========================================================================== */
.acc{border-top:1px solid var(--line)}
.acc__it{border-bottom:1px solid var(--line)}
.acc__hd{width:100%;display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:clamp(14px,2vw,26px);
  padding:clamp(20px,2.2vw,28px) 0;text-align:left}
.acc__no{font-size:11px;font-weight:500;letter-spacing:.12em;color:var(--blue);font-variant-numeric:tabular-nums}
.acc__nm{display:block;font-family:var(--ff-display);font-weight:500;font-size:clamp(1.2rem,1.9vw,1.6rem);
  letter-spacing:-.018em;color:var(--ink);transition:transform .5s var(--ease)}
.acc__it:hover .acc__nm{transform:translateX(6px)}
.acc__one{display:block;font-size:.9rem;color:var(--ink-3);margin-top:6px;transition:opacity .4s}
.acc__it.open .acc__one{opacity:0}
.acc__pm{position:relative;width:20px;height:20px;flex:none}
.acc__pm::before,.acc__pm::after{content:"";position:absolute;top:50%;left:0;width:100%;height:1px;
  background:var(--ink-3);transition:transform .45s var(--ease),background .3s}
.acc__pm::after{transform:rotate(90deg)}
.acc__it.open .acc__pm::after{transform:rotate(0)}
.acc__it.open .acc__pm::before,.acc__it.open .acc__pm::after{background:var(--orange)}
.acc__bd{height:0;overflow:hidden;transition:height .6s var(--ease-io)}
.acc__bdin{display:grid;grid-template-columns:52px 1fr 1fr;gap:clamp(14px,2vw,26px);
  padding-bottom:clamp(24px,2.6vw,36px)}
.acc__ico svg{width:38px;height:38px;stroke:var(--ink);stroke-width:1.5;fill:none;stroke-linecap:square;
  stroke-linejoin:miter}
.acc__ico .node{fill:var(--orange);stroke:none}
.acc__ico path,.acc__ico rect,.acc__ico line,.acc__ico polyline{stroke-dasharray:var(--l,160);
  stroke-dashoffset:var(--l,160)}
.acc__it.open .acc__ico path,.acc__it.open .acc__ico rect,.acc__it.open .acc__ico line,
.acc__it.open .acc__ico polyline{stroke-dashoffset:0;transition:stroke-dashoffset .9s var(--ease-io) .1s}
.acc__ico .node{opacity:0}
.acc__it.open .acc__ico .node{opacity:1;transition:opacity .4s .7s}
.acc__rel{display:grid;gap:8px;align-content:start}
.acc__rel a{font-size:.9rem;color:var(--ink-2);display:flex;gap:9px;align-items:baseline;
  transition:color .3s,transform .35s var(--ease)}
.acc__rel a:hover{color:var(--blue);transform:translateX(4px)}
.acc__rel a::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--orange);flex:none;
  transform:translateY(-2px)}

/* ==========================================================================
   STATS
   ========================================================================== */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;background:transparent}
.st{background:transparent;padding:clamp(24px,2.8vw,40px) clamp(16px,1.8vw,26px);
  border-left:1px solid var(--line)}
.st:first-child{border-left:0;padding-left:0}
.sec--alt .st{background:var(--paper-2)}
.st__n{font-family:var(--ff-display);font-weight:500;font-size:clamp(1.85rem,3.1vw,2.7rem);line-height:1;
  letter-spacing:-.025em;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.st__n .s{color:var(--blue)}
.st__l{margin-top:12px;font-size:11px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);line-height:1.7}

/* ==========================================================================
   LEADERSHIP — cut-outs on a soft studio backdrop
   ========================================================================== */
/* v2.2 leadership: sticky stack, portrait LEFT. Each card pins in turn and the next
   slides over it, so one person holds the frame at a time. */
.ldr{position:relative}
.ld{position:sticky;top:calc(var(--hdr) + 20px);
  display:grid;grid-template-columns:minmax(0,.58fr) minmax(0,1fr);align-items:stretch;
  border:1px solid var(--line);border-radius:6px;overflow:hidden;background:#fff;
  box-shadow:0 24px 60px rgba(11,28,51,.07);
  margin-bottom:clamp(20px,2.4vw,32px)}
.ld:last-child{margin-bottom:0}
.ld__ph{position:relative;overflow:hidden;min-height:clamp(320px,38vw,440px);
  background:linear-gradient(168deg,#EDF2F9 0%,#FFFFFF 74%)}
.ld__ph::before{content:"";position:absolute;inset:0;opacity:.06;background-image:var(--tex);
  background-size:cover;background-position:center;filter:blur(1.5px)}
/* the portraits now carry their own composed backdrop (Phase 1B) — cover, not contain */
.ld__ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top}
/* v3.2: the card read cramped — the block was padded like a list item while carrying
   a name, a role, a paragraph and four credential rows. More room, and a clearer
   step between each of those four things. */
.ld__b{padding:clamp(30px,3.6vw,58px) clamp(28px,3.4vw,54px);
  display:flex;flex-direction:column;justify-content:center}
/* brand orange is 2.27:1 on paper — it cannot carry TEXT on light at any size.
   Orange stays on rules, dots and dark backgrounds; text on light goes blue (7.8:1). */
.ld__no{font-family:var(--ff-display);font-size:12px;font-weight:500;letter-spacing:.08em;
  color:var(--blue);font-variant-numeric:tabular-nums}
.ld__n{margin-top:14px;font-size:clamp(1.45rem,2.3vw,2.05rem);font-weight:500;letter-spacing:-.024em;
  line-height:1.1}
.ld__r{margin-top:9px;font-size:11.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:var(--blue)}
.ld__x{margin-top:20px;font-size:.97rem;line-height:1.8;color:var(--ink-2);max-width:52ch}
.ld__cr{margin-top:clamp(22px,2.4vw,32px);border-top:1px solid var(--line)}
.ld__cr li{position:relative;padding:13px 0 13px 20px;border-bottom:1px solid var(--line-2);
  font-size:.88rem;line-height:1.5;
  color:var(--ink-2);transition:color .3s,padding-left .35s var(--ease)}
.ld__cr li:last-child{border-bottom:0}
.ld__cr li::before{content:"";position:absolute;left:0;top:50%;width:7px;height:1px;background:var(--line);
  transform:translateY(-50%);transition:width .35s var(--ease),background .3s}
.ld__cr li:hover{color:var(--ink);padding-left:24px}
.ld__cr li:hover::before{width:15px;background:var(--orange)}

/* ==========================================================================
   MANUFACTURING
   ========================================================================== */
.mfg{position:relative;overflow:hidden;background:var(--void);color:var(--glass)}
.mfg__bg{position:absolute;inset:0;z-index:0;overflow:hidden}
/* v5: the hero crop cut the SKYWALL logo off the top of the shed. Biasing the crop
   upward keeps the branded façade — the whole point of the photograph — in frame. */
.mfg__bg img{width:100%;height:100%;object-fit:cover;object-position:center 22%;
  will-change:transform}
/* v4: this used to fade to --paper, which washed the bottom 40% of the factory
   photograph out to near-white and made it look faded and unfinished. It now falls to
   navy, so the image stays saturated, the white copy sits on the darkest part, and the
   band reads as one of the page's cinematic breaks (see the tonal cadence note). */
.mfg__bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(5,13,31,.42) 0%,rgba(10,26,56,.55) 45%,#0A1A38 100%)}
/* The home-page band fades to paper because a light section follows it. A page hero
   sets its copy at the BOTTOM, where that same fade puts white text on near-white —
   so the hero variant darkens downward instead. */
.mfg--hero .mfg__bg::after{
  background:linear-gradient(180deg,rgba(5,13,31,.42) 0%,rgba(5,13,31,.50) 38%,rgba(5,13,31,.86) 100%)}
.mfg__in{position:relative;z-index:2;padding-block:clamp(64px,7.4vw,112px)}
.mfg__big{font-family:var(--ff-display);font-weight:500;font-size:clamp(2rem,4vw,3.3rem);line-height:1;
  letter-spacing:-.026em;color:var(--glass);font-variant-numeric:tabular-nums}
.mfg__big .u{font-size:.3em;letter-spacing:.13em;color:var(--orange);vertical-align:.72em;margin-left:12px;
  text-transform:uppercase;font-family:var(--ff-body);font-weight:500}
.fgal{display:grid;grid-template-columns:1.65fr 1fr;gap:clamp(12px,1.5vw,20px);align-items:stretch}
/* v3: the main image was locked to 16:10 while the side column (two 16:11 figures
   plus a gap) ran taller, so the row left a block of empty card under the photo.
   display:grid gives the img a definite height to cover into. */
.fgal__main{display:grid;border-radius:4px;overflow:hidden;background:var(--paper-2);
  border:1px solid var(--line);min-height:0}
.fgal__main img{width:100%;height:100%;min-height:0;object-fit:cover}
.fgal__side{display:grid;gap:clamp(12px,1.5vw,20px)}
.fgal__side figure{margin:0;border-radius:4px;overflow:hidden;background:var(--paper-2);
  border:1px solid var(--line)}
.fgal__side img{width:100%;aspect-ratio:16/11;object-fit:cover}
.ticks{display:grid;gap:11px;margin-top:22px}
.ticks li{display:flex;gap:11px;font-size:.95rem;color:var(--ink-2);line-height:1.65;max-width:var(--measure)}
.ticks li::before{content:"";flex:none;width:6px;height:6px;margin-top:8px;background:var(--orange);
  transform:rotate(45deg)}
.sec--dark .ticks li,.mfg .ticks li{color:var(--glass-dim)}

/* ==========================================================================
   SPLIT / VALUES / VISION
   ========================================================================== */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4.4vw,72px);align-items:center}
.split--f .split__m{order:2}
.split__m{position:relative;overflow:hidden;border-radius:4px;background:var(--paper-2);
  border:1px solid var(--line)}
.split__m img{width:100%;aspect-ratio:4/3;object-fit:cover}
/* v2.3 (element J): vision/mission as two large statements carried by an oversized
   numeral and a hairline rule — not two equally-weighted boxes. */
.rules{display:grid;gap:clamp(34px,4vw,60px)}
.rule{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(22px,3vw,54px);padding-top:clamp(24px,2.8vw,38px);border-top:1px solid var(--line)}
.rule__k{display:flex;flex-direction:column;gap:6px}
.rule__num{font-family:var(--ff-display);font-weight:500;letter-spacing:-.04em;line-height:.86;
  font-size:clamp(3.4rem,7vw,6.2rem);color:transparent;-webkit-text-stroke:1px #C6D3E3;
  font-variant-numeric:tabular-nums;transition:-webkit-text-stroke-color .5s var(--ease)}
.rule:hover .rule__num{-webkit-text-stroke-color:var(--orange)}
.rule__lab{font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--blue)}
.rule__h{font-family:var(--ff-display);font-weight:500;letter-spacing:-.022em;line-height:1.24;
  font-size:clamp(1.35rem,2.4vw,2.05rem);color:var(--ink);max-width:20ch}
.rule__p{margin-top:16px;color:var(--ink-2);line-height:1.75;max-width:58ch}
@media (max-width:760px){
  .rule{grid-template-columns:1fr;gap:14px}
  .rule__k{flex-direction:row;align-items:baseline;gap:12px}
  .rule__num{font-size:2.6rem}
  .rule__h{max-width:none}
}

/* v2.2: values as hover/focus-expand rows */
.vrows{border-top:1px solid var(--line)}
.vrow{position:relative;display:grid;grid-template-columns:52px 1fr;align-items:start;
  gap:clamp(12px,1.6vw,22px);padding:clamp(18px,2vw,26px) 0;border-bottom:1px solid var(--line);
  cursor:default;transition:padding-left .45s var(--ease)}
.vrow::before{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0;background:var(--orange);
  transition:width .6s var(--ease)}
.vrow:hover,.vrow:focus-visible{padding-left:12px;outline:none}
.vrow:hover::before,.vrow:focus-visible::before{width:100%}
.vrow__n{font-size:11px;font-weight:500;letter-spacing:.14em;color:var(--ink-3);
  font-variant-numeric:tabular-nums;padding-top:6px;transition:color .35s var(--ease)}
.vrow:hover .vrow__n,.vrow:focus-visible .vrow__n{color:var(--blue)}
.vrow__h{font-family:var(--ff-display);font-weight:500;letter-spacing:-.018em;
  font-size:clamp(1.15rem,1.75vw,1.5rem);color:var(--ink)}
/* the body is the reward for reaching the row — grid-template-rows animates cleanly */
.vrow__bd{grid-column:2;display:grid;grid-template-rows:0fr;opacity:0;
  transition:grid-template-rows .55s var(--ease),opacity .45s var(--ease)}
.vrow__bd > p{overflow:hidden;color:var(--ink-2);line-height:1.7;max-width:62ch}
.vrow:hover .vrow__bd,.vrow:focus-visible .vrow__bd{grid-template-rows:1fr;opacity:1;padding-top:10px}
/* no hover on touch — show the copy outright rather than hide it behind a gesture */
@media (hover:none){
  .vrow__bd{grid-template-rows:1fr;opacity:1;padding-top:10px}
}

/* ==========================================================================
   PROJECTS GRID
   ========================================================================== */
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,1.8vw,26px)}

/* liquid glass, placement 2 of 3: a translucent panel over the photograph.
   Glass over a photo is information design; glass over flat white is decoration. */
.pc__glass{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:14px 16px;
  display:flex;align-items:flex-end;min-height:56px;
  opacity:0;transform:translateY(12px);transition:opacity .45s var(--ease),transform .45s var(--ease);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.16));
  -webkit-backdrop-filter:blur(14px) saturate(1.5);backdrop-filter:blur(14px) saturate(1.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55)}
.pc:hover .pc__glass,.pc:focus-visible .pc__glass{opacity:1;transform:none}
.pc__chips{display:flex;flex-wrap:wrap;gap:6px}
.pc__chips span{padding:4px 10px;border-radius:100px;font-size:11.5px;font-weight:500;color:#fff;
  border:1px solid rgba(255,255,255,.34);background:rgba(11,28,51,.28)}
.pc__pill{position:absolute;top:12px;left:12px;z-index:2;display:inline-flex;align-items:center;gap:6px;
  padding:5px 10px;border-radius:100px;font-size:11px;font-weight:500;letter-spacing:.04em;color:#fff;
  border:1px solid rgba(255,255,255,.3);background:rgba(11,28,51,.4);
  -webkit-backdrop-filter:blur(10px) saturate(1.4);backdrop-filter:blur(10px) saturate(1.4)}
.pc__pill i{width:5px;height:5px;border-radius:50%;background:var(--orange)}
.pc__pill[data-s="completed"] i{background:#4ADE80}

.pc{position:relative;border:1px solid var(--line);border-radius:4px;overflow:hidden;background:#fff;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .4s}
.pc:hover{transform:translateY(-5px);box-shadow:0 22px 54px rgba(11,28,51,.09);border-color:#D6E0EC}
/* display:block is load-bearing — this is a <span>, and an absolutely-positioned child of
   an INLINE positioned ancestor takes its containing block from the line box, not the
   element. That is what squeezed the hover overlay into a one-word-per-line column. */
/* v3: 4:5. Every source is a portrait tower render, and a landscape tile cropped
   the top off most of them. Tall tiles also give the grid a rhythm closer to the
   architecture it is showing. */
.pc__m{display:block;position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--paper-2)}
.pc__b{display:block}
.pc__m img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.pc:hover .pc__m img{transform:scale(1.05)}
.pc__b{padding:18px 20px 22px}
.pc__l{font-size:12px;font-weight:500;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3)}
.pc__t{display:block;margin-top:8px;font-family:var(--ff-display);font-size:1.1rem;font-weight:500;
  letter-spacing:-.014em}
.pc.is-out{display:none}
.chipf{padding:8px 16px;border:1px solid var(--line);border-radius:100px;font-size:11px;font-weight:500;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);background:#fff;
  transition:color .3s,border-color .3s,background .3s}
.chipf:hover{color:var(--ink);border-color:var(--ink-3)}
.chipf.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:clamp(24px,2.6vw,36px)}

/* ==========================================================================
   INNER PAGE HERO
   ========================================================================== */
.ph{position:relative;padding-top:calc(var(--hdr) + clamp(56px,7vw,96px));
  padding-bottom:clamp(40px,5vw,70px);background:var(--paper);border-bottom:1px solid var(--line)}
.ph__in{max-width:var(--measure)}
.ph h1{margin-top:16px;font-size:clamp(2rem,4.4vw,3.4rem);letter-spacing:-.028em}
.ph .lead{margin-top:16px}
/* the page-head band: a bare breadcrumb + title read as an unfinished page, so the
   band carries a counted stat row. */
/* v4.1: this was max-width:none. .ph__in sits on the SAME element as .container, so
   that also cancelled .container's own cap — every page-head band ran to the viewport
   edge (48px inset) while body sections sat inside the 1280 container (128px). That
   mismatch is the "one section bleeds while another is inset" complaint. The intent
   here was only to drop the 65ch measure, so restore the container width explicitly. */
.ph--band .ph__in{max-width:var(--container)}
.ph__stats{display:flex;flex-wrap:wrap;gap:clamp(28px,5vw,72px);margin-top:clamp(30px,3.4vw,46px)}
.ph__n{font-family:var(--ff-display);font-weight:500;letter-spacing:-.03em;
  font-size:clamp(2rem,3.6vw,2.9rem);color:var(--ink);font-variant-numeric:tabular-nums}
.ph__k{margin-top:4px;font-size:11.5px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3)}
.ph__stats div{position:relative;padding-left:16px}
.ph__stats div::before{content:"";position:absolute;left:0;top:6px;bottom:16px;width:1px;
  background:var(--orange);opacity:.55}
.crumbs{display:flex;align-items:center;gap:9px;font-size:10.5px;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3)}
.crumbs a:hover{color:var(--ink)}
.crumbs .s{color:var(--ink-3)}

/* ==========================================================================
   PROJECT DETAIL
   ========================================================================== */
.pj__hero{position:relative;height:clamp(46vh,60svh,70vh);min-height:380px;overflow:hidden;background:var(--void)}
.pj__hero img{width:100%;height:100%;object-fit:cover;will-change:transform}
.pj__hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(5,13,31,.5),rgba(5,13,31,.12) 45%,rgba(5,13,31,.76))}
.pj__ttl{position:absolute;left:0;right:0;bottom:0;z-index:3;padding-bottom:clamp(24px,3.2vw,42px);
  color:var(--glass)}
.pj__ttl h1{margin-top:12px;font-size:clamp(1.85rem,4.2vw,3.2rem);letter-spacing:-.028em}
.pj__ttl .crumbs{color:var(--glass-faint)}
.pj__ttl .crumbs a:hover{color:var(--glass)}
.pj__body{display:grid;grid-template-columns:1.5fr .85fr;gap:clamp(30px,4.4vw,70px);
  padding-block:clamp(40px,5vw,72px)}
.pj__body h2{font-size:clamp(1.3rem,2vw,1.65rem);margin-bottom:16px}
.pj__body p{color:var(--ink-2);line-height:1.78}
.pj__body p + p{margin-top:15px}
.pj__side{align-self:start;position:sticky;top:calc(var(--hdr) + 24px)}
.pj__card{border:1px solid var(--line);border-radius:5px;padding:24px;background:#fff}
.pj__card h3{font-family:var(--ff-body);font-size:10px;font-weight:500;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:16px}
.pj__sc{display:grid;gap:9px}
.pj__sc li{display:flex;gap:10px;font-size:.9rem;color:var(--ink-2);line-height:1.55}
.pj__sc li::before{content:"";width:6px;height:6px;margin-top:7px;flex:none;background:var(--orange);
  transform:rotate(45deg)}
.pj__gal{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(12px,1.4vw,20px);
  padding-bottom:clamp(36px,4.4vw,64px)}
/* fixed 3:2 frame + cover — the secondary deck crops vary wildly in ratio; this
   guarantees a clean edge on every one of them and never a bar. */
.pj__gal figure{margin:0;overflow:hidden;border-radius:4px;background:var(--paper-2);aspect-ratio:3/2;
  cursor:zoom-in;border:1px solid var(--line)}
.pj__gal figure:only-child{grid-column:1/-1;aspect-ratio:16/9}
.pj__gal img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.pj__gal figure:hover img{transform:scale(1.04)}
.pj__nav{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pj__nav > span{background:var(--paper)}
.pj__nav a{position:relative;background:var(--paper);padding:clamp(26px,3.4vw,48px) clamp(18px,2.6vw,40px);
  overflow:hidden;transition:background .4s}
.pj__nav a:hover{background:#fff}
.pj__nav .dir{font-size:10px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3)}
.pj__nav .nm{display:block;margin-top:8px;font-family:var(--ff-display);font-weight:500;
  font-size:clamp(1.1rem,2vw,1.5rem);letter-spacing:-.016em;transition:transform .5s var(--ease)}
.pj__nav a:hover .nm{transform:translateX(6px)}
.pj__nav .next{text-align:right}
.pj__nav .next:hover .nm{transform:translateX(-6px)}
.pj__nav .peek{position:absolute;top:50%;right:6%;width:130px;aspect-ratio:4/3;border-radius:3px;
  overflow:hidden;opacity:0;transform:translateY(-50%) scale(.92);pointer-events:none;
  transition:opacity .45s var(--ease),transform .5s var(--ease)}
.pj__nav .next .peek{right:auto;left:6%}
.pj__nav a:hover .peek{opacity:.9;transform:translateY(-50%) scale(1)}
.pj__nav .peek img{width:100%;height:100%;object-fit:cover}

.lb{position:fixed;inset:0;z-index:9990;background:rgba(11,28,51,.93);backdrop-filter:blur(10px);
  display:grid;place-items:center;padding:clamp(20px,5vw,64px);opacity:0;visibility:hidden;
  transition:opacity .45s var(--ease),visibility .45s}
.lb.on{opacity:1;visibility:visible}
.lb img{max-width:100%;max-height:88vh;object-fit:contain;border-radius:3px;transform:scale(.94);
  transition:transform .5s var(--ease)}
.lb.on img{transform:scale(1)}
.lb__x{position:absolute;top:24px;right:24px;width:42px;height:42px;border:1px solid rgba(255,255,255,.26);
  border-radius:50%;display:grid;place-items:center;color:#fff;font-size:17px;transition:background .3s,color .3s}
.lb__x:hover{background:#fff;color:var(--ink)}

/* ==========================================================================
   CONTACT
   ========================================================================== */
.ct{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,4.4vw,70px);align-items:stretch}
.ct__panel{padding:clamp(24px,3vw,40px);border-radius:6px;border:1px solid var(--line);background:#fff;
  box-shadow:0 20px 60px rgba(11,28,51,.05)}
.f{display:grid;gap:20px}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.fld{position:relative}
.fld input,.fld textarea,.fld select{width:100%;padding:18px 0 9px;border:0;border-bottom:1px solid var(--line);
  background:transparent;color:var(--ink);font-family:var(--ff-body);font-size:.96rem;transition:border-color .35s}
.fld textarea{resize:vertical;min-height:100px}
.fld select{padding-top:20px;cursor:pointer}
.fld label{position:absolute;left:0;top:17px;font-size:.94rem;color:var(--ink-3);pointer-events:none;
  transition:transform .35s var(--ease),font-size .35s var(--ease),color .35s,letter-spacing .35s}
.fld input:focus + label,.fld textarea:focus + label,.fld select:focus + label,
.fld input:not(:placeholder-shown) + label,.fld textarea:not(:placeholder-shown) + label,
.fld.always label{transform:translateY(-16px);font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--blue)}
.fld input:focus,.fld textarea:focus,.fld select:focus{outline:none;border-bottom-color:var(--orange);
  box-shadow:0 1px 0 0 var(--orange)}
.hp{position:absolute;left:-9999px;opacity:0}
.note{padding:14px 16px;border-radius:3px;font-size:.9rem;margin-bottom:20px;max-width:none}
.note--ok{background:rgba(0,74,173,.06);border-left:2px solid var(--blue);color:var(--blue)}
.note--er{background:rgba(255,138,46,.09);border-left:2px solid var(--orange);color:#8F4700}
.cinfo{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:5px;
  overflow:hidden;margin-top:28px}
.cinfo__r{background:#fff;padding:20px 22px}
.cinfo__r h3{font-family:var(--ff-body);font-size:9.5px;font-weight:500;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 6px}
.cinfo__r a,.cinfo__r p{font-size:.98rem;color:var(--ink)}
.cinfo__r a:hover{color:var(--blue)}

/* ==========================================================================
   CTA (dark) + FOOTER (light)
   ========================================================================== */
.cta{position:relative;overflow:hidden;background:var(--void);color:var(--glass)}
.cta__bg{position:absolute;inset:0;z-index:0}
.cta__bg img{width:100%;height:100%;object-fit:cover;opacity:.34}
.cta__bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,var(--void),rgba(5,13,31,.72) 50%,var(--void))}
.cta__in{position:relative;z-index:2;text-align:center;padding-block:clamp(72px,9vw,130px)}
.flood{display:inline-block;font-family:var(--ff-display);font-weight:500;
  font-size:clamp(1.8rem,4.2vw,3.4rem);letter-spacing:-.026em;line-height:1.16;cursor:default;max-width:none;
  background-image:linear-gradient(90deg,var(--orange) 0%,var(--orange) 50%,var(--glass) 50%,var(--glass) 100%);
  background-size:200% 100%;background-repeat:no-repeat;background-position:100% 0;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  transition:background-position 1s var(--ease-io)}
.flood:hover{background-position:0% 0}
.cta__btn{margin-top:clamp(24px,3vw,38px)}

/* v2.2: the footer goes back to dark. It gives the light pages a landing — the page
   closes on weight instead of fading out into the paper it started on. */
.ft{position:relative;padding-top:clamp(52px,6vw,84px);background:var(--deep);color:var(--glass);
  --ft-hair:rgba(255,255,255,.12)}
.ft__top{display:grid;grid-template-columns:1.4fr .8fr .8fr 1fr;gap:clamp(24px,3vw,44px);
  padding-bottom:clamp(40px,4.4vw,64px)}
.ft__logo img{height:30px;width:auto}
.ft h3{font-family:var(--ff-body);font-size:10px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;
  color:var(--glass-faint);margin-bottom:16px}
.ft__lk{display:grid;gap:10px}
.ft__lk a{font-size:.9rem;color:var(--glass-dim);transition:color .3s,transform .35s var(--ease)}
.ft__lk a:hover{color:var(--orange);transform:translateX(4px)}
.ft__ct{display:grid;gap:10px;font-size:.9rem;color:var(--glass-dim)}
.ft__ct a:hover{color:var(--orange)}
.ft__tag{font-size:.9rem;color:var(--glass-dim);max-width:32ch;line-height:1.7;margin-top:18px}
.ft__so{display:flex;gap:9px;margin-top:20px}
.ft__so a{width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--ft-hair);
  border-radius:50%;transition:background .3s,border-color .3s,transform .3s}
.ft__so a:hover{background:var(--glass);border-color:var(--glass);transform:translateY(-2px)}
.ft__so svg{width:14px;height:14px;fill:var(--glass-dim);transition:fill .3s}
.ft__so a:hover svg{fill:var(--deep)}
.ft__word{position:relative;padding-block:clamp(14px,2.2vw,28px);border-top:1px solid var(--ft-hair);
  text-align:center;overflow:hidden}
.ft__word span{display:inline-block;font-family:var(--ff-display);font-weight:500;
  font-size:clamp(2.4rem,11.5vw,9.5rem);line-height:.98;letter-spacing:-.035em;
  -webkit-text-stroke:1px rgba(255,255,255,.16);
  background-image:linear-gradient(90deg,var(--glass) 0%,var(--glass) 50%,transparent 50%,transparent 100%);
  background-size:200% 100%;background-repeat:no-repeat;background-position:100% 0;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  transition:background-position 1.1s var(--ease-io)}
.ft__word:hover span{background-position:0% 0}
.ft__bot{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding-block:22px;border-top:1px solid var(--ft-hair);font-size:.8rem;color:var(--glass-faint)}
.atf{text-align:right}
.atf a{font-size:12px;font-weight:500;color:var(--glass-dim);border-bottom:1px solid transparent;
  transition:color .3s,border-color .3s}
.atf a:hover{color:var(--glass);border-bottom-color:var(--orange)}
.atf b{font-weight:600;color:var(--glass)}
.atf span{display:block;margin-top:4px;font-size:11px;font-style:italic;color:var(--glass-faint)}

/* ==========================================================================
   REVEALS
   ========================================================================== */
.rv{opacity:0;transform:translateY(24px)}
.rv.in{opacity:1;transform:none;transition:opacity .85s var(--ease),transform .85s var(--ease)}
.rvc{clip-path:inset(0 0 100% 0)}
.rvc.in{clip-path:inset(0 0 0 0);transition:clip-path 1.05s var(--ease-io)}
[data-stag] > *{opacity:0;transform:translateY(18px)}
[data-stag].in > *{opacity:1;transform:none;transition:opacity .8s var(--ease),transform .8s var(--ease)}
[data-stag].in > *:nth-child(1){transition-delay:.05s}
[data-stag].in > *:nth-child(2){transition-delay:.12s}
[data-stag].in > *:nth-child(3){transition-delay:.19s}
[data-stag].in > *:nth-child(4){transition-delay:.26s}
[data-stag].in > *:nth-child(5){transition-delay:.33s}

.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip:focus{position:fixed!important;top:12px;left:12px;width:auto;height:auto;clip:auto;z-index:9999;
  padding:12px 20px;background:var(--ink);color:var(--paper);border-radius:3px;font-size:.85rem}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1080px){
  .pgrid{grid-template-columns:repeat(2,1fr)}
  .ld{grid-template-columns:230px 1fr}
  .ld__ph{min-height:0}
  .rule{grid-template-columns:1fr;gap:10px}
  .val{border-bottom:1px solid var(--line)}
  .ft__top{grid-template-columns:1fr 1fr}
  .pj__body{grid-template-columns:1fr}
  .pj__side{position:static}
  .stats{grid-template-columns:repeat(2,1fr)}
  .acc__bdin{grid-template-columns:1fr}
  .cs,.aspect__grid{grid-template-columns:1fr}
  .fgal{grid-template-columns:1fr}
  .mani__grid{grid-template-columns:1fr;gap:28px}
  .mani__shot{margin-right:calc(var(--gutter) * -1);margin-left:calc(var(--gutter) * -1)}
  .mani__shot img{border-radius:0}
}
@media (max-width:900px){
  .nav{display:none}
  .burger{display:flex}
  .split,.split--f{grid-template-columns:1fr}
  .split--f .split__m{order:0}
  .ct{grid-template-columns:1fr}

  .reel__vp{display:none}
  .reel__mob{display:block}
  .hero__pin{height:86svh}
}
@media (max-width:680px){
  .pgrid{grid-template-columns:1fr}
  .pj__gal{grid-template-columns:1fr}

  .ft__top{grid-template-columns:1fr;gap:32px}
  .ft__bot{flex-direction:column;align-items:flex-start}
  .atf{text-align:left}
  .stats{grid-template-columns:1fr 1fr}
  .f2{grid-template-columns:1fr}
  .pj__nav{grid-template-columns:1fr}
  .pj__nav .next{text-align:left}
  .pj__nav .peek{display:none}
  .dn{aspect-ratio:4/5}
  .spec__r{grid-template-columns:1fr;gap:3px}
  /* stickiness on a small screen just traps the reader — let them stack and scroll */
  .ld{position:sticky;top:calc(var(--hdr) + 20px);top:auto;grid-template-columns:1fr}
  .ld__ph{aspect-ratio:4/5;min-height:0}
  .hero__ttl{font-size:clamp(1.3rem,6vw,1.8rem)}
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
  .cur,.grain,.pre{display:none!important}
  .rv,.rvc,[data-stag] > *{opacity:1!important;transform:none!important;clip-path:none!important}
  .mani .w{color:var(--ink)}
  .marq__track{animation:none}
  .reel__vp{display:none}
  .reel__mob{display:block}
  .mfg__bg img{transform:none!important}
}

/* ==========================================================================
   v2.3 — CREATIVE LAYER
   ========================================================================== */

/* --- A · split-text heading reveal ------------------------------------- */
.sp-l{display:inline-block;overflow:hidden;vertical-align:top}
.sp-w{display:inline-block;transform:translateY(102%);opacity:0;
  transition:transform .82s var(--ease-io),opacity .6s var(--ease);
  transition-delay:calc(var(--i,0) * 22ms)}
.is-split-in .sp-w{transform:none;opacity:1}

/* H · the dimension-line scroll progress bar (.dimbar) was removed in v3.2 at the
   client's request — markup, JS and styles all deleted. Do not reintroduce it. */

/* --- 5 · project tile hover overlay (replaces the cursor "circle text") -- */
/* Geometry is explicit here on purpose: `.pc__ovin` is a <span>, and relying on it to
   stretch as a flex item squeezed it into a one-word-per-line column. */
.pc__ov{position:absolute;inset:0;z-index:2;
  background:linear-gradient(180deg,rgba(5,13,31,0) 34%,rgba(5,13,31,.42) 66%,rgba(5,13,31,.9) 100%);
  opacity:0;transform:translateY(14px);
  transition:opacity .5s var(--ease),transform .6s var(--ease)}
.pc:hover .pc__ov,.pc:focus-visible .pc__ov{opacity:1;transform:none}
.pc__ovin{position:absolute;left:0;right:0;bottom:0;display:block;padding:clamp(15px,1.5vw,20px)}
.pc__ovl{display:block;font-size:10.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--glass-faint)}
.pc__ovt{display:block;margin-top:4px;font-family:var(--ff-display);font-weight:500;
  letter-spacing:-.02em;line-height:1.2;font-size:clamp(1rem,1.35vw,1.25rem);color:#fff}
/* nowrap is load-bearing: a wrapping label inside a 100px radius renders as a CIRCLE of
   text, which is the very thing the client asked us to get rid of. Pills stay pills, and
   the row clips rather than wraps. */
.pc__ov .pc__chips{display:flex;flex-wrap:nowrap;gap:6px;margin-top:10px;overflow:hidden}
.pc__ov .pc__chips span{flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  padding:4px 10px;border-radius:100px;font-size:11px;font-weight:500;line-height:1.5;color:#fff;
  border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(10px) saturate(1.4);backdrop-filter:blur(10px) saturate(1.4)}
.pc__view{display:inline-flex;align-items:center;gap:6px;margin-top:13px;font-size:11.5px;
  font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--orange)}
.pc__view svg{width:13px;height:13px;transition:transform .4s var(--ease)}
.pc:hover .pc__view svg{transform:translateX(4px)}
/* the tile's own zoom */
.pc:hover .pc__m img,.pc:focus-visible .pc__m img{transform:scale(1.05)}
/* the sub-caption is redundant once the overlay is up — fade it back */
.pc:hover .pc__b{opacity:.35}
.pc__b{transition:opacity .4s var(--ease)}

/* --- C · INDIA PROJECTS MAP -------------------------------------------- */
.imapsec{background:var(--paper-2)}
.imap{display:block;margin:0}
.imap__stage{position:relative;width:100%;max-width:none;margin-inline:auto}
.imap__svg{width:100%;height:auto;display:block;overflow:visible}
.imap__land{fill:#E4EBF4;stroke:#C3D2E4;stroke-width:1.6;stroke-linejoin:round;
  transition:fill .6s var(--ease)}
.imap.is-in .imap__land{fill:#DCE6F2}
.imap__pins{position:absolute;inset:0}
.imap__pin{position:absolute;width:34px;height:34px;margin:-17px 0 0 -17px;padding:0;border:0;
  background:none;cursor:pointer;z-index:2;
  opacity:0;transform:translateY(-16px) scale(.6)}
.imap.is-in .imap__pin{animation:pindrop .62s var(--ease-io) forwards;animation-delay:var(--d,0s)}
@keyframes pindrop{to{opacity:1;transform:none}}
.imap__dot{position:absolute;left:50%;top:50%;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;
  border-radius:50%;background:var(--orange);border:2px solid #fff;
  box-shadow:0 2px 8px rgba(11,28,51,.28);transition:transform .35s var(--ease)}
.imap__ping{position:absolute;left:50%;top:50%;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;
  border-radius:50%;border:1.5px solid var(--orange);opacity:0}
.imap.is-in .imap__ping{animation:ping 2.6s ease-out infinite;animation-delay:calc(var(--d,0s) + .6s)}
@keyframes ping{0%{transform:scale(1);opacity:.7}70%,100%{transform:scale(3.4);opacity:0}}
.imap__pin:hover .imap__dot,.imap__pin:focus-visible .imap__dot{transform:scale(1.45)}
.imap__pin:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:50%}
.imap__lbl{position:absolute;left:50%;top:50%;transform:translate(-50%,10px);white-space:nowrap;
  font-size:10px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2);
  opacity:0;transition:opacity .35s var(--ease)}
.imap__pin:hover .imap__lbl{opacity:0}

/* the glass card that opens off a pin */
.imap__card{position:absolute;z-index:5;width:250px;margin:-14px 0 0 22px;
  opacity:0;visibility:hidden;transform:translateY(6px) scale(.97);transform-origin:0 0;
  transition:opacity .32s var(--ease),transform .38s var(--ease),visibility .32s;
  pointer-events:none}
.imap__card.on{opacity:1;visibility:visible;transform:none}
/* cards near the right edge flip to the left of the pin */
.imap__card.flip{margin-left:-272px}
.imap__cin{border-radius:8px;overflow:hidden;
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);
  border:1px solid rgba(255,255,255,.75);
  box-shadow:0 18px 44px rgba(11,28,51,.16),inset 0 1px 0 rgba(255,255,255,.9)}
.imap__thumb{display:block;aspect-ratio:3/2;overflow:hidden}
.imap__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.imap__ctxt{display:block;padding:12px 14px 14px}
.imap__ccity{display:block;font-size:10.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--blue)}
.imap__clist{display:grid;gap:6px;margin-top:8px}
.imap__clist a{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink);
  pointer-events:auto}
.imap__clist a:hover{color:var(--blue)}
.imap__clist i{width:5px;height:5px;border-radius:50%;background:var(--orange);flex:none}
.imap__clist i[data-s="completed"]{background:#22A55B}
.imap__more{font-size:11.5px;color:var(--ink-3)}

.imap__stats{display:flex;flex-wrap:wrap;gap:clamp(22px,3vw,44px);margin-top:auto;
  padding-top:clamp(22px,2.6vw,34px);border-top:1px solid var(--line)}
.imap__stats div{padding-left:14px;border-left:2px solid var(--orange)}
.imap__stats dt{font-family:var(--ff-display);font-weight:500;letter-spacing:-.03em;
  font-size:clamp(1.9rem,3.4vw,2.7rem);color:var(--ink);font-variant-numeric:tabular-nums}
.imap__stats dd{margin-top:3px;font-size:11.5px;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3)}

@media (max-width:900px){
  .imap__card{width:210px}
}

/* --- K · footer wordmark sheen ----------------------------------------- */
.ft__word span{position:relative}
.ft__word::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.16) 50%,transparent 62%);
  transform:translateX(-40%);transition:opacity .4s var(--ease)}
.ft__word:hover::after{opacity:1;animation:sheen 1.5s var(--ease-io)}
@keyframes sheen{from{transform:translateX(-60%)}to{transform:translateX(60%)}}

/* --- reduced motion: keep the fades, kill the machinery ----------------- */
@media (prefers-reduced-motion:reduce){
  .sp-w{transform:none;opacity:1;transition:none}
  .imap__pin{opacity:1;transform:none;animation:none}
  .imap.is-in .imap__pin{animation:none}
  .imap.is-in .imap__ping{animation:none}
  .dimbar{display:none}
  /* the mask lives on the inner <svg>, not the wrapper — with no torch to move it,
     drop it entirely and just show the drawing at a readable, static opacity */
  .mani__draw svg{-webkit-mask-image:none;mask-image:none}
  .mani__draw{opacity:.32}
  .mani__torch{display:none}
  .ft__word:hover::after{animation:none}
}

/* --- 8 · CONTACT: glass card + dark office map ------------------------- */
.ccard{margin-top:clamp(26px,3vw,40px)}
.ccard__in{padding:clamp(20px,2.2vw,30px);border-radius:10px;
  background:rgba(255,255,255,.6);
  -webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6);
  border:1px solid rgba(255,255,255,.8);
  box-shadow:0 20px 50px rgba(11,28,51,.09),inset 0 1px 0 rgba(255,255,255,.95);
  position:relative;overflow:hidden}
/* a slow specular highlight that answers the pointer */
.ccard__in::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(320px circle at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.55),transparent 70%);
  transition:opacity .5s var(--ease)}
.ccard:hover .ccard__in::after{opacity:1}
.cinfo__dim{color:var(--ink-3);font-size:.85rem}

.omap{position:relative;background:var(--deep)}
.omap__frame{position:relative;height:clamp(400px,52vh,580px);overflow:hidden;background:var(--deep)}
.omap__frame iframe{position:relative;z-index:1;width:100%;height:100%;border:0;display:block;
  /* Google's embed can't be themed, so we theme it from the outside */
  filter:invert(.92) hue-rotate(185deg) saturate(.5) contrast(.92) brightness(.95);
  /* fades in over the drafted base, so a slow or blocked embed never shows as a void */
  opacity:0;transition:opacity .7s var(--ease)}
.omap__frame iframe.is-ready{opacity:1}
/* the base that is always there: blueprint grid + locality, in the site's own language */
.omap__base{position:absolute;inset:0;z-index:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:6px;text-align:center;
  background:
    linear-gradient(rgba(234,240,248,.05) 1px,transparent 1px) 0 0/58px 58px,
    linear-gradient(90deg,rgba(234,240,248,.05) 1px,transparent 1px) 0 0/58px 58px,
    radial-gradient(circle at 50% 50%,#12294f 0%,var(--deep) 70%)}
.omap__loc{font-family:var(--ff-display);font-weight:500;letter-spacing:-.02em;
  font-size:clamp(1.3rem,2.4vw,2rem);color:rgba(234,240,248,.30)}
.omap__sub{font-size:10.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(234,240,248,.22);font-variant-numeric:tabular-nums}
.omap::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(10,26,56,.92) 0%,rgba(10,26,56,.55) 38%,rgba(10,26,56,0) 62%)}
.omap__pin{position:absolute;left:50%;top:50%;z-index:2;width:18px;height:18px;
  margin:-9px 0 0 -9px;pointer-events:none}
.omap__dot{position:absolute;inset:0;border-radius:50%;background:var(--orange);
  border:3px solid #fff;box-shadow:0 4px 14px rgba(0,0,0,.45)}
.omap__ping{position:absolute;inset:0;border-radius:50%;border:2px solid var(--orange);
  animation:ping 2.6s ease-out infinite}
.omap__over{position:absolute;inset:0;z-index:3;display:flex;align-items:center;pointer-events:none}
.omap__card{pointer-events:auto;max-width:380px;padding:clamp(22px,2.4vw,32px);border-radius:10px;
  background:rgba(5,13,31,.55);
  -webkit-backdrop-filter:blur(20px) saturate(1.5);backdrop-filter:blur(20px) saturate(1.5);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 24px 60px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.28);
  color:var(--glass)}
.omap__addr{margin:14px 0 20px;color:var(--glass-dim);line-height:1.7;font-size:.94rem}
@media (max-width:900px){
  .omap::before{background:linear-gradient(180deg,rgba(10,26,56,.9) 0%,rgba(10,26,56,.4) 60%)}
  .omap__over{align-items:flex-start;padding-top:24px}
  .omap__card{max-width:none}
}
@media (prefers-reduced-motion:reduce){ .omap__ping{animation:none} }

/* --- I · leadership: credential underline draws in ---------------------- */
.ld__cr li{position:relative}
.ld__cr li::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0;
  background:var(--orange);transition:width .5s var(--ease)}
.ld__cr li:hover::after{width:100%}

/* Any label inside a fully-rounded pill must not wrap — a wrapped line inside a
   100px radius renders as a circle of text. Applies wherever we use pills. */
.rp__chips span,.shw__rel a,.pc__chips span,.chipf,.imap__more{white-space:nowrap}

/* ==========================================================================
   TIMELINE (v3) — About. Dark editorial beat between two light sections.
   Oversized outlined years, hairline rules, one continuous spine. The four
   undated milestones carry a node instead of a year so the spine never breaks.
   ========================================================================== */
.tl-sec{background:var(--void);color:var(--glass)}
.tl-sec .d2,.tl-sec .lead{color:var(--glass)}
.tl-sec .lead{color:var(--glass-dim)}
.tl-sec .lbl--bare{color:var(--orange)}

/* The spine runs down the gutter BETWEEN the year column and the copy. Putting it
   under the year column (the obvious first move) drops the node marker straight on
   top of the digits — "1999" reads as "1990". */
.tl{--tl-col:clamp(84px,11vw,180px);--tl-gap:clamp(22px,3vw,52px);
  --tl-spine:calc(var(--tl-col) + var(--tl-gap) / 2);
  list-style:none;margin:var(--sy-head) 0 0;padding:0;position:relative}
.tl::before{content:"";position:absolute;left:var(--tl-spine);top:8px;bottom:8px;width:1px;
  background:linear-gradient(180deg,transparent,var(--hair) 8%,var(--hair) 92%,transparent)}
.tl__i{position:relative;display:grid;grid-template-columns:var(--tl-col) minmax(0,1fr);
  gap:var(--tl-gap);align-items:baseline;
  padding:clamp(15px,1.7vw,22px) 0;border-bottom:1px solid var(--hair-soft)}
.tl__i:last-child{border-bottom:0}
.tl__y{font-family:var(--ff-display);font-weight:500;letter-spacing:-.03em;
  line-height:1;font-variant-numeric:tabular-nums;font-size:clamp(1.5rem,3vw,2.5rem);
  text-align:right;color:transparent;-webkit-text-stroke:1px rgba(234,240,248,.34);
  transition:-webkit-text-stroke-color .5s var(--ease)}
.tl__i--year:hover .tl__y{-webkit-text-stroke-color:var(--orange)}
/* markers hang off the row, not the year, so they always land on the spine */
.tl__i::after{content:"";position:absolute;left:var(--tl-spine);top:calc(clamp(15px,1.7vw,22px) + .5em);
  width:7px;height:7px;transform:translate(-50%,-50%) rotate(45deg);
  background:var(--void);border:1px solid rgba(234,240,248,.34)}
.tl__i--year::after{width:9px;height:9px;background:var(--orange);border-color:var(--orange);
  box-shadow:0 0 0 4px var(--void)}
.tl__d{color:var(--glass-dim);line-height:1.6;font-size:clamp(.98rem,1.2vw,1.08rem);max-width:44ch}
.tl__i--year .tl__d{color:var(--glass)}

@media (max-width:760px){
  .tl::before,.tl__i::after{display:none}
  .tl__i{grid-template-columns:1fr;gap:6px;align-items:start}
  .tl__y{font-size:1.35rem;text-align:left;-webkit-text-stroke-color:var(--orange)}
  /* the undated rows carry an <i> node, not text, so :empty never matches — hide the
     whole span or it reserves a blank line above every undated milestone */
  .tl__i:not(.tl__i--year) .tl__y{display:none}
  .tl__d{max-width:none}
}

/* ==========================================================================
   CONTACT HERO — split band (v3.2)
   The other page heads fill the right of the band with a counted stat row.
   Contact has nothing to count, so it carries "what happens after you send".
   ========================================================================== */
.ph--split .ph__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
  gap:clamp(30px,5vw,86px);align-items:center}
.ph--split .lead{max-width:46ch}
.phx{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.phx__r{display:grid;grid-template-columns:34px minmax(0,1fr);gap:clamp(10px,1.4vw,18px);
  padding:clamp(14px,1.7vw,20px) 0;border-bottom:1px solid var(--line)}
.phx__n{font-size:11px;font-weight:500;letter-spacing:.12em;color:var(--blue);
  font-variant-numeric:tabular-nums;padding-top:3px}
.phx__t{font-family:var(--ff-display);font-weight:500;letter-spacing:-.016em;
  font-size:clamp(1rem,1.35vw,1.14rem);color:var(--ink)}
.phx__d{grid-column:2;margin-top:5px;font-size:.9rem;line-height:1.62;color:var(--ink-2);max-width:44ch}
@media (max-width:900px){
  .ph--split .ph__grid{grid-template-columns:1fr;gap:clamp(26px,6vw,40px)}
  .ph--split .lead{max-width:none}
}

/* reduced motion: the annotations are information, not decoration — show them
   outright rather than leaving the leader lines collapsed at scaleX(0). */
@media (prefers-reduced-motion:reduce){
  .mcal__ln{transform:scaleX(1);transition:none}
  .mcal__dot,.mcal__lb{opacity:1;transform:none;transition:none}
}
/* the callouts are measured against the desktop 4:5 crop; on a narrow column the
   leader lines would cross the labels, so the figure drops to a plain photograph */
@media (max-width:900px){
  .mcal__pt{display:none}
}

/* ==========================================================================
   V4 — VERTICAL RHYTHM & TONAL CADENCE
   ========================================================================== */
@media (min-width:1600px){ :root{ --container:1360px } }

/* Two stacked sections put their bottom AND top padding between the same two blocks
   of content — at the old 115px each that was 230px of nothing, which is the whole
   "too much white space" complaint. The tone change now does the work of separating
   them, so the second section's top padding is cut rather than doubled up. */
.sec + .sec,
.sec + .sec--alt,
.sec--alt + .sec,
.sec--alt + .sec--alt{padding-top:calc(var(--sy) * .7)}

/* A hairline dimension rule marks the seam instead of a band of nothing —
   the shop-drawing motif doing structural work. */
.sec--seam{position:relative}
.sec--seam::before{content:"";position:absolute;top:0;left:var(--gutter);right:var(--gutter);
  height:1px;background:var(--line)}
.sec--seam::after{content:"";position:absolute;top:-3px;left:var(--gutter);width:7px;height:7px;
  border-left:1px solid var(--orange);border-top:1px solid var(--orange)}

/* Page-head bands were 168px top / 70px bottom — top-heavy and inconsistent. */
.ph{padding-top:calc(var(--hdr) + clamp(38px,4.4vw,64px));
  padding-bottom:clamp(32px,3.6vw,52px)}

/* ==========================================================================
   V4 — INDIA MAP: one viewport, two aligned columns
   Copy + stat rail left, map right. The rail is pushed to the bottom of its
   column (margin-top:auto) so it bottom-aligns with the map's bounding box,
   and the heading top-aligns with the map's top. That shared box is what the
   audit meant by "the stats don't align to the map".
   ========================================================================== */
.imapsec__grid{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1fr);
  gap:clamp(30px,4.6vw,72px);align-items:stretch}
.imapsec__aside{display:flex;flex-direction:column;min-width:0}
.imapsec__aside .d2{margin-top:12px}
.imapsec__aside .lead{margin-top:14px;max-width:44ch}
.imapsec__map{min-width:0;display:flex;align-items:center;justify-content:center}

/* graticule + arc network — the map as an engineering drawing */
.imap__grat{opacity:0;transition:opacity 1s var(--ease)}
.imap.is-in .imap__grat{opacity:1}
.imap__arc{stroke-dasharray:1 1;stroke-dashoffset:1;opacity:.5;
  transition:stroke-dashoffset 1.3s var(--ease-io),opacity .6s var(--ease);
  transition-delay:var(--d,0s)}
/* the paths carry pathLength="1" (an SVG attribute, not a CSS one), which normalises
   every arc to a unit length so a single dash pair drives them all regardless of span */
.imap.is-in .imap__arc{stroke-dashoffset:0}

@media (max-width:900px){
  .imapsec__grid{grid-template-columns:1fr;gap:clamp(26px,6vw,40px)}
  .imap__stats{margin-top:0}
  .imapsec__map{order:-1}
}
@media (prefers-reduced-motion:reduce){
  .imap__arc{stroke-dashoffset:0;transition:none}
  .imap__grat{opacity:.5;transition:none}
}

/* ==========================================================================
   V4 — PROJECTS HERO: featured strip fills the former empty right half
   ========================================================================== */
.phstrip{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(8px,1vw,14px);
  align-self:end}
.phstrip__f{margin:0;position:relative;overflow:hidden;border-radius:3px;
  background:var(--paper-2);border:1px solid var(--line)}
.phstrip__f img{width:100%;height:100%;display:block;aspect-ratio:4/5;object-fit:cover;
  transition:transform 1.1s var(--ease)}

.phstrip__f figcaption{position:absolute;left:0;right:0;bottom:0;padding:22px 12px 10px;
  font-size:10px;font-weight:500;letter-spacing:.11em;text-transform:uppercase;color:#fff;
  background:linear-gradient(transparent,rgba(5,13,31,.78));
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:900px){
  .phstrip{grid-template-columns:repeat(3,1fr);align-self:auto}
}
@media (max-width:560px){ .phstrip__f:nth-child(3){display:none} .phstrip{grid-template-columns:repeat(2,1fr)} }

/* ==========================================================================
   V4 — LEADERSHIP: balance the two columns
   The portrait ran to a 320–440px min-height while the content column (name,
   role, bio, three credential rows) finished shorter, so the right side stranded
   white below the credentials. Capping the portrait to the content's height makes
   the pair bottom-align, which is what the audit asked for.
   ========================================================================== */
.ld{align-items:stretch}
.ld__ph{min-height:0}
/* v4.2: 22% cut the top of every head. The portraits are head-and-shoulders with
   headroom above, so the crop anchors at the very top of the frame instead. */
.ld__ph img{object-position:center top}
/* the credential list is the natural bottom edge of the content column — pin it there
   so all three cards share one rhythm regardless of bio length */
.ld__b{justify-content:flex-start}
.ld__cr{margin-top:auto}

/* ==========================================================================
   V4 — CASE STUDY: top/bottom align the image and text columns
   ========================================================================== */
/* v4.1: the slot now carries the SOURCE's ratio (16:9), so `cover` has nothing left to
   crop and the whole building reads. v4 sized this slot from the text column instead,
   which top/bottom-aligned the pair but cut the project out of its own case study —
   and showing the building wins that trade. */
.cs{align-items:center}
.cs__m{position:relative;aspect-ratio:4/5;max-height:560px;border-radius:4px;overflow:hidden}
/* The slot carries the SOURCE's ratio (4:5 portrait), so `cover` has nothing to crop
   and nothing to letterbox — the whole project reads and the frame is still full.
   Forcing a 16:9 slot did one or the other: `cover` cut the building, `contain`
   pillarboxed it against empty plates. Matching the ratio avoids the trade entirely. */
.cs__m img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;
  object-fit:cover;object-position:center}
.cs > .rv{display:flex;flex-direction:column;justify-content:center}
/* the "Case Study 01" rule sat clamp(34,4vw,56) above the block; the audit caps
   heading→content at 48 */
.dim{margin-bottom:var(--sy-head)!important}

/* The stage carries the map's own aspect (1000x1090 viewBox) and is driven by HEIGHT,
   so it stays inside one viewport while filling as much of its column as it can.
   The aspect has to match the viewBox exactly: the pins are absolutely positioned as
   percentages of the stage, so any letterboxing inside it would drift every pin off
   its city. Sizing the <svg> with width:auto instead collapsed it to zero. */
.imapsec__map .imap__stage{height:min(56vh,470px);width:auto;aspect-ratio:1000/1090;
  max-width:100%}
.imapsec__map .imap__svg{width:100%;height:100%;display:block}

/* A trailing single tile left two empty cells beside it — the last row read as an
   unfinished grid. The orphan now spans two columns as a wide 16:9 closing tile. */
.pgrid .pc--orphan{grid-column:span 2}
.pgrid .pc--orphan .pc__m{aspect-ratio:16/9}
@media (max-width:1080px){ .pgrid .pc--orphan{grid-column:span 1} .pgrid .pc--orphan .pc__m{aspect-ratio:4/5} }

/* v4: the info card ran ~250px past the bottom of the form panel, stranding one
   column. Both columns now stretch to the row and the form spreads into its panel,
   so the two finish on the same line. */
.ct__panel{display:flex;flex-direction:column}
.ct__panel .f{flex:1;display:flex;flex-direction:column}
.ct__panel .f .fld:last-of-type{flex:1;display:flex;flex-direction:column}
.ct__panel .f textarea{flex:1;min-height:120px}
@media (max-width:900px){
  .ct__panel .f,.ct__panel .f .fld:last-of-type{display:block}
  .ct__panel .f textarea{min-height:140px}
}

/* ==========================================================================
   V4.1 — ONE CONTAINER, EVERYWHERE
   Every section's content box resolves to the same left/right inset. Stat rows
   distribute across the container rather than clustering at the left edge.
   ========================================================================== */
/* stat rails: spread across the container on a shared baseline instead of bunching */
.ph__stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));
  gap:clamp(20px,3vw,44px);align-items:end}
.imap__stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(18px,2.4vw,34px);align-items:end}
.imap__stats div,.ph__stats div{min-width:0}

/* ==========================================================================
   V4.1 — SIGNATURE WORK: drawing sleeves
   Closed sleeves show only a spine; the hovered/focused one expands and the full
   4:5 render slides out. Flex-basis does the expanding, so the row always fills
   the container exactly and nothing is cropped to make it fit.
   ========================================================================== */
.sw-sec{background:var(--paper-2)}
.sleeves{display:flex;gap:clamp(8px,1vw,14px);align-items:stretch;
  height:clamp(420px,52vh,560px);max-width:100%;overflow:hidden;border-radius:4px}
.slv{flex:0 1 clamp(66px,5.4vw,88px);min-width:0;position:relative;
  border:1px solid var(--line);border-radius:4px;overflow:hidden;background:#fff;
  transition:flex-basis .72s var(--ease-io),box-shadow .5s var(--ease),border-color .4s}
.slv.is-open{flex:1 1 auto;box-shadow:0 26px 60px rgba(11,28,51,.13);border-color:#D6E0EC}
.slv__hit{display:block;height:100%;position:relative}

/* --- the spine: all that shows when the sleeve is filed away --- */
.slv__spine{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;
  align-items:center;justify-content:space-between;padding:18px 0 22px;
  background:linear-gradient(180deg,#fff,var(--paper-2));
  transition:opacity .4s var(--ease);pointer-events:none}
.slv.is-open .slv__spine{opacity:0}
.slv__no{font-size:11px;font-weight:500;letter-spacing:.1em;color:var(--blue);
  font-variant-numeric:tabular-nums}
.slv__vert{writing-mode:vertical-rl;transform:rotate(180deg);
  display:flex;align-items:center;gap:12px;min-height:0;overflow:hidden}
.slv__vert b{font-family:var(--ff-display);font-weight:500;font-size:1.02rem;
  letter-spacing:-.014em;color:var(--ink);white-space:nowrap}
.slv__vert i{font-style:normal;font-size:10.5px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);white-space:nowrap}

/* --- the drawing that pulls out --- */
.slv__pull{position:absolute;inset:0;z-index:1;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  opacity:0;transition:opacity .5s var(--ease) .06s}
.slv.is-open .slv__pull{opacity:1}
.slv__img{position:relative;overflow:hidden;background:var(--paper-2)}
/* contain, not cover — the whole building has to read, which is the point of this
   redesign. The plate behind it carries the letterboxed edges as a deliberate mount. */
.slv__img img{width:100%;height:100%;object-fit:contain;object-position:center;
  background:linear-gradient(160deg,#E8EEF6,#F7FAFD)}
.slv__pill{position:absolute;top:12px;left:12px;display:inline-flex;align-items:center;gap:6px;
  padding:5px 10px;border-radius:100px;background:rgba(5,13,31,.62);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  font-size:9.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#fff}
.slv__pill i{width:5px;height:5px;border-radius:50%;background:var(--orange)}
.slv__pill[data-s="completed"] i{background:#4ADE80}

.slv__body{display:flex;flex-direction:column;justify-content:center;
  padding:clamp(22px,2.4vw,38px);min-width:0}
.slv__loc{font-size:10.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3)}
.slv__ttl{margin-top:8px;font-family:var(--ff-display);font-weight:500;
  font-size:clamp(1.25rem,1.9vw,1.7rem);letter-spacing:-.02em;color:var(--ink);line-height:1.14}
.slv__brief{margin-top:14px;font-size:.92rem;line-height:1.65;color:var(--ink-2);max-width:34ch}
.slv__chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.slv__chips span{padding:5px 11px;border:1px solid var(--line);border-radius:100px;
  font-size:11.5px;color:var(--ink-2);white-space:nowrap}
.slv__go{display:inline-flex;align-items:center;gap:9px;margin-top:20px;
  font-size:11.5px;font-weight:500;letter-spacing:.11em;text-transform:uppercase;color:var(--blue)}
.slv__go svg{width:14px;height:14px;transition:transform .4s var(--ease)}
.slv:hover .slv__go svg{transform:translateX(4px)}

.sleeves__foot{display:flex;align-items:center;justify-content:space-between;gap:20px;
  flex-wrap:wrap;margin-top:clamp(20px,2.4vw,32px)}
.sleeves__hint{font-size:10.5px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-3)}
@media (hover:none){ .sleeves__hint{display:none} }

/* --- mobile: a stack of expandable cards, no rack --- */
@media (max-width:900px){
  .sleeves{flex-direction:column;height:auto;gap:12px}
  .slv{flex:0 0 auto}
  .slv__spine{display:none}
  .slv__hit{height:auto}
  .slv__pull{position:relative;inset:auto;opacity:1;grid-template-columns:1fr}
  .slv__img{aspect-ratio:4/5}
  .slv__img img{object-fit:cover}
  .slv__body{padding:20px}
}
@media (prefers-reduced-motion:reduce){
  .slv,.slv__pull,.slv__spine{transition:none}
}

/* ==========================================================================
   V4.2 — STAT RAILS: number and label share one left edge
   Asserted in qa.py: number.left === label.left (±2px) for every stat site-wide.
   ========================================================================== */
.st__n,.st__l,
.imap__stats dt,.imap__stats dd,
.ph__n,.ph__k{text-align:left;margin-left:0}
.imap__stats div,.ph__stats div{display:flex;flex-direction:column;align-items:flex-start}

/* The 4-stat band sat outside the global container and ran to the viewport edge.
   It is the section the v4.1 inset probe skipped, because that probe only measured
   sections that HAVE a .container and this one did not. */
.statband{background:var(--paper-2)}
/* The cells carry their own 26px padding, so the grid is pulled out by exactly that
   much — the stat TEXT then starts on 128, the same line as every other section's
   content, while the inner cells keep their padding away from the divider rules. */
.statband .stats{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}

/* ==========================================================================
   V4.2 — WHAT WE BUILD: bento mosaic
   Six cells, varied footprint, each carrying its own real project photograph.
   Replaces the list-beside-one-photo showcase. Images are the uncropped 4:5
   portrait masters, not the 16:9 band (which is itself a crop of a portrait page).
   ========================================================================== */
.bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  grid-auto-rows:minmax(0,var(--bn-row,196px));
  gap:clamp(8px,1vw,14px);margin-top:var(--sy-head)}
@media (min-width:1200px){ .bento{--bn-row:214px} }

.bn{position:relative;grid-column:span var(--cs,1);grid-row:span var(--rs,1);
  min-width:0;overflow:hidden;border-radius:4px;background:var(--void);
  transition:transform .55s var(--ease),box-shadow .55s var(--ease)}
.bn:hover{transform:translateY(-4px);box-shadow:0 26px 56px rgba(11,28,51,.16)}

.bn__m{position:absolute;inset:0;z-index:0;display:block}
.bn__m img{width:100%;height:100%;object-fit:cover;object-position:center 32%;
  transition:transform 1.2s var(--ease)}
.bn:hover .bn__m img{transform:scale(1.05)}
/* the scrim is what makes white type legible over any of the six photographs */
.bn::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,13,31,.40) 0%,rgba(5,13,31,.20) 30%,rgba(5,13,31,.72) 62%,rgba(5,13,31,.94) 100%)}

.bn__in{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;
  justify-content:space-between;padding:clamp(15px,1.5vw,22px)}
.bn__top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.bn__ico svg{width:24px;height:24px;fill:none;stroke:var(--glass);stroke-width:1.5;
  stroke-linecap:square;stroke-linejoin:miter}
.bn__ico svg .node{fill:var(--orange);stroke:none}
.bn__ct{font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--glass);padding:5px 9px;border-radius:100px;background:rgba(5,13,31,.5);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);white-space:nowrap}
.bn__ct i{font-style:normal;color:var(--glass-faint)}

.bn__bot{display:block;min-width:0}
.bn__no{display:block;font-size:10px;font-weight:600;letter-spacing:.16em;color:var(--orange)}
.bn__nm{display:block;margin-top:5px;font-family:var(--ff-display);font-weight:500;
  letter-spacing:-.018em;line-height:1.12;color:var(--glass);
  font-size:clamp(1.02rem,1.35vw,1.24rem)}
.bn--big .bn__nm{font-size:clamp(1.35rem,2.2vw,1.95rem)}
.bn__one{display:block;margin-top:6px;font-size:12.5px;line-height:1.5;
  color:var(--glass-dim);max-width:34ch}
.bn--big .bn__one{font-size:.94rem}
/* the caption names the actual building, so the photograph is evidence, not decoration */
.bn__cap{display:block;margin-top:10px;padding-top:9px;border-top:1px solid rgba(234,240,248,.18);
  font-size:9.5px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;
  color:var(--glass-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  opacity:0;transform:translateY(5px);
  transition:opacity .45s var(--ease),transform .45s var(--ease)}
.bn:hover .bn__cap,.bn:focus-visible .bn__cap{opacity:1;transform:none}

@media (max-width:1080px){
  .bento{grid-template-columns:repeat(2,minmax(0,1fr));--bn-row:184px}
  .bn{grid-column:span min(var(--cs,1),2)}
}
@media (max-width:620px){
  .bento{grid-template-columns:1fr;--bn-row:210px}
  .bn{grid-column:span 1;grid-row:span 1}
  .bn__cap{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .bn,.bn__m img{transition:none}
  .bn__cap{opacity:1;transform:none;transition:none}
}

/* ==========================================================================
   V4.2 — LEADERSHIP: profile, not bio card
   Oversized name, a pull-quote, credentials, and a signature-project strip that
   fills the lower third so the content column bottom-aligns with the portrait.
   ========================================================================== */
.ld__n{font-size:clamp(1.7rem,2.9vw,2.6rem);letter-spacing:-.03em;line-height:1.04}
.ld__q{position:relative;margin:clamp(18px,2vw,26px) 0 0;padding:0 0 0 18px;
  border-left:2px solid var(--orange);
  font-family:var(--ff-display);font-weight:500;letter-spacing:-.016em;
  font-size:clamp(1rem,1.45vw,1.2rem);line-height:1.45;color:var(--ink);max-width:38ch}
.ld__cr{margin-top:clamp(18px,2vw,26px)}

.ld__work{margin-top:auto;padding-top:clamp(18px,2vw,26px)}
.ld__wlbl{display:block;font-size:9.5px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3)}
.ld__wrow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(8px,1vw,12px);margin-top:10px}
.ld__w{display:block;min-width:0}
.ld__w img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:3px;display:block;
  transition:transform .6s var(--ease),filter .4s var(--ease);filter:saturate(.85)}
.ld__w:hover img{transform:translateY(-3px);filter:saturate(1)}
.ld__w span{display:block;margin-top:7px;font-size:10px;font-weight:500;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ld__w:hover span{color:var(--blue)}

@media (max-width:900px){
  .ld__work{margin-top:22px}
  .ld__wrow{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ==========================================================================
   V5 — LEADERSHIP: calm three-profile stack, no sliding cards
   The sticky/overlap motion is gone at the client's request, and the portrait is
   capped so it stops dominating the card. The photo sits top-aligned at its own
   4:5 ratio, so no head is ever cropped; the content column still bottom-aligns
   via the signature-project strip.
   ========================================================================== */
.ldr{position:relative}
.ld{margin-bottom:0}
.ld__ph{align-self:start;aspect-ratio:4/5;max-height:clamp(300px,30vw,400px)}
.ld__ph img{object-position:center 12%}
@media (max-width:900px){
  .ld__ph{aspect-ratio:4/5;max-height:none}
}

/* v5: the strip stays in the text column (measured delta 0 there). The portrait is
   capped and top-aligned instead, which removes the sliding-card motion and stops the
   photo dominating — at the cost of whitespace under it. See the handover. */

/* ==========================================================================
   V6 — LEADERSHIP reflow: row 1 photo+bio, row 2 credentials+projects
   The overlapping stack is back (the client liked it). What changed is the card's
   INTERNALS: moving the project strip to a full-width second row makes the bio
   column short, so the photo no longer has to stretch to match it. That is what
   fixes both the cropped face and the ~560px of stranded white in one move.
   ========================================================================== */
.ld{display:block;padding:clamp(22px,2.4vw,38px)}
.ld__r1{display:grid;grid-template-columns:minmax(0,.34fr) minmax(0,1fr);
  gap:clamp(20px,2.6vw,44px);align-items:start}
.ld__ph{position:relative;align-self:start;aspect-ratio:4/5;
  max-height:clamp(300px,26vw,400px);border-radius:4px;overflow:hidden;min-height:0}
/* top-anchored so the full head always reads — never a stretched, cropped face */
.ld__ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 8%}
/* 2026-09-23: the bio was capped at 60ch inside a ~900px column, which left a band of
   white down the right of every founder card and squeezed the text into a ribbon. The
   photo column is narrower and the measure runs to the column, held at 78ch so the line
   is still readable. */
.ld__b{padding:0;display:block}
.ld__x{margin-top:16px;max-width:78ch}
.ld__q{margin-top:18px;max-width:64ch}

.ld__r2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:clamp(20px,2.6vw,44px);align-items:start;
  margin-top:clamp(20px,2.4vw,32px);padding-top:clamp(18px,2vw,26px);
  border-top:1px solid var(--line)}
.ld__r2 .ld__cr{margin-top:0;border-top:0}
.ld__r2 .ld__work{margin-top:0;padding-top:0}
.ld__wrow{grid-template-columns:repeat(3,minmax(0,1fr))}

@media (max-width:900px){
  .ld{position:relative;top:auto;padding:18px}
  .ld__r1,.ld__r2{grid-template-columns:1fr;gap:18px}
  .ld__ph{max-height:none;aspect-ratio:4/5;max-width:320px}
  .ld__r2{margin-top:20px;padding-top:18px}
}

/* ==========================================================================
   V6 — PAGE-HEAD figure (About / Systems), matching the Projects head
   ========================================================================== */
.ph__fig{margin:0;align-self:end;position:relative}
.ph__fig img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:4px;
  max-height:340px}
.ph__fig figcaption{margin-top:9px;font-size:10px;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:900px){ .ph__fig{align-self:auto} .ph__fig img{max-height:260px} }

/* ==========================================================================
   V6 — JOURNEY timeline: milestones alternate across a spine that draws in
   ========================================================================== */
.jr{position:relative;list-style:none;margin:var(--sy-head) 0 0;padding:0;
  display:grid;gap:clamp(14px,1.8vw,24px)}
.jr__spine{position:absolute;left:50%;top:8px;bottom:8px;width:1px;
  background:linear-gradient(180deg,transparent,var(--hair) 6%,var(--hair) 94%,transparent);
  transform:translateX(-.5px) scaleY(0);transform-origin:top;
  transition:transform 1.4s var(--ease-io)}
.jr.in .jr__spine{transform:translateX(-.5px) scaleY(1)}
.jr__i{position:relative;display:grid;grid-template-columns:1fr auto 1fr;
  align-items:center;gap:clamp(14px,2vw,28px)}
.jr__node{grid-column:2;display:grid;place-items:center;width:46px;height:46px;
  border-radius:50%;background:var(--deep);border:1px solid var(--hair);z-index:1;
  opacity:0;transform:scale(.5);
  transition:opacity .5s var(--ease),transform .55s var(--ease-io);transition-delay:var(--d)}
.jr.in .jr__node{opacity:1;transform:none}
.jr__node svg{width:20px;height:20px;fill:none;stroke:var(--glass);stroke-width:1.4}
.jr__node svg .node{fill:var(--orange);stroke:none}
.jr__i--year .jr__node{background:var(--orange);border-color:var(--orange)}
.jr__i--year .jr__node svg{stroke:var(--void)}
.jr__i--year .jr__node svg .node{fill:var(--void)}
.jr__card{grid-column:1;justify-self:end;text-align:right;max-width:34ch;
  padding:clamp(13px,1.5vw,19px) clamp(15px,1.7vw,22px);
  border:1px solid var(--hair);border-radius:4px;background:rgba(234,240,248,.04);
  opacity:0;transform:translateX(-16px);
  transition:opacity .6s var(--ease),transform .7s var(--ease-io);transition-delay:var(--d)}
.jr__i:nth-child(even) .jr__card{grid-column:3;justify-self:start;text-align:left;
  transform:translateX(16px)}
.jr.in .jr__card{opacity:1;transform:none}
.jr__y{display:block;font-family:var(--ff-display);font-weight:500;letter-spacing:-.03em;
  font-size:clamp(1.3rem,2.2vw,1.9rem);line-height:1;color:var(--orange);
  font-variant-numeric:tabular-nums;margin-bottom:6px}
.jr__t{display:block;color:var(--glass-dim);line-height:1.55;font-size:clamp(.92rem,1.1vw,1rem)}
.jr__i--year .jr__t{color:var(--glass)}

@media (max-width:820px){
  .jr__spine{left:23px}
  .jr__i{grid-template-columns:46px 1fr;gap:14px}
  .jr__node{grid-column:1}
  .jr__card,.jr__i:nth-child(even) .jr__card{grid-column:2;justify-self:stretch;
    text-align:left;max-width:none;transform:translateY(12px)}
  .jr.in .jr__card{transform:none}
}
@media (prefers-reduced-motion:reduce){
  .jr__spine{transform:translateX(-.5px) scaleY(1);transition:none}
  .jr__node,.jr__card{opacity:1;transform:none;transition:none}
}

/* ==========================================================================
   V6 — VISION / MISSION: oversized numerals + a drafting graphic
   ========================================================================== */
.vm{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.8vw,24px)}
.vm__c{position:relative;overflow:hidden;padding:clamp(26px,3vw,46px);border-radius:5px;
  background:var(--paper-2);border:1px solid var(--line);color:var(--ink)}
.vm__c--alt{background:var(--void);border-color:transparent;color:var(--glass)}
.vm__n{display:block;font-family:var(--ff-display);font-weight:500;letter-spacing:-.04em;
  line-height:.82;font-size:clamp(3rem,6vw,5.4rem);color:transparent;
  -webkit-text-stroke:1px rgba(11,28,51,.22);font-variant-numeric:tabular-nums}
.vm__c--alt .vm__n{-webkit-text-stroke-color:rgba(234,240,248,.3)}
.vm__lab{display:block;margin-top:16px;font-size:11px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--blue)}
.vm__c--alt .vm__lab{color:var(--orange)}
.vm__h{margin-top:10px;font-family:var(--ff-display);font-weight:500;letter-spacing:-.022em;
  line-height:1.2;font-size:clamp(1.3rem,2.3vw,1.95rem);max-width:20ch}
.vm__p{margin-top:14px;line-height:1.7;color:var(--ink-2);max-width:44ch}
.vm__c--alt .vm__p{color:var(--glass-dim)}
.vm__art{position:absolute;right:-28px;bottom:-28px;width:clamp(140px,17vw,210px);
  color:var(--ink);opacity:.07;pointer-events:none}
.vm__c--alt .vm__art{color:var(--glass);opacity:.13}
.vm__art svg{width:100%;height:auto;display:block}
@media (max-width:820px){ .vm{grid-template-columns:1fr} }

/* ==========================================================================
   V6 — VALUES: reveal cards with a proof line, not a flat row
   ========================================================================== */
.vgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.2vw,16px);
  margin-top:var(--sy-head)}
.vc{position:relative;padding:clamp(20px,2.2vw,30px);border-radius:5px;background:#fff;
  border:1px solid var(--line);outline:none;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .4s}
.vc:hover,.vc:focus-visible{transform:translateY(-4px);border-color:#D6E0EC;
  box-shadow:0 22px 50px rgba(11,28,51,.10)}
.vc__ico svg{width:26px;height:26px;fill:none;stroke:var(--blue);stroke-width:1.5}
.vc__ico svg .node{fill:var(--orange);stroke:none}
.vc__n{position:absolute;top:clamp(18px,2vw,26px);right:clamp(18px,2vw,26px);
  font-size:10.5px;font-weight:500;letter-spacing:.14em;color:var(--ink-3);
  font-variant-numeric:tabular-nums}
.vc__h{margin-top:16px;font-family:var(--ff-display);font-weight:500;letter-spacing:-.018em;
  font-size:clamp(1.08rem,1.5vw,1.3rem);color:var(--ink)}
.vc__p{margin-top:9px;font-size:.9rem;line-height:1.6;color:var(--ink-2)}
/* v3.5: shown by default — it is content, not a reward for hovering */
.vc__proof{display:flex;align-items:center;gap:9px;margin-top:14px;padding-top:12px;
  border-top:1px solid var(--line-2);
  font-size:10.5px;font-weight:500;letter-spacing:.11em;text-transform:uppercase;
  color:var(--blue);opacity:1;transform:none}
.vc__proof i{flex:none;width:6px;height:6px;background:var(--orange);transform:rotate(45deg)}
/* v3.5: the proof line is content, not a reward for hovering — shown on every card
   by default. The rule below is what USED to reveal it; kept as a no-op so the hover
   and focus states still resolve to the same thing. */
.vc:hover .vc__proof,.vc:focus-visible .vc__proof{opacity:1;transform:none}
@media (max-width:900px){ .vgrid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){
  .vgrid{grid-template-columns:1fr}
  .vc__proof{opacity:1;transform:none}   /* no hover on touch — show the proof outright */
}
@media (hover:none){ .vc__proof{opacity:1;transform:none} }

/* ==========================================================================
   V6 — MOBILE HARDENING (measured at 390 and 360)
   ========================================================================== */
/* the header row was wider than the viewport on every page — it is the reason
   document.scrollWidth exceeded the window at both widths */
.hdr__in{max-width:100%;min-width:0}
.hdr__in > *{min-width:0}

/* the auto-fit stat rail forced three columns into 390 and pushed the document wide */
@media (max-width:640px){
  .ph__stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px}
  .ph__n{font-size:clamp(1.6rem,7vw,2.1rem)}
  .ph__k{font-size:10.5px;letter-spacing:.1em}
  .imap__stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .imap__stats dt{font-size:clamp(1.4rem,6vw,1.9rem)}
  .imap__stats dd{font-size:10px;letter-spacing:.08em}
}
/* the vision/mission graphic sat outside its card; the card clips it, but keep the
   box inside the layout so nothing can widen the document */
.vm__art{right:-14px;bottom:-14px;max-width:60%}

/* tap targets: the footer/nav link rows were under 44px on touch */
@media (hover:none){
  .ft__col a,.mnav a,.crumbs a,.shw__rel a,.imap__clist a{
    display:inline-block;min-height:44px;line-height:44px}
  .ld__w,.phstrip__f,.slv__hit{min-height:44px}
}

/* ==========================================================================
   v3.3 — LINE ART, CLIENTS, RECOGNITION, COLLABORATIONS
   ========================================================================== */

/* --- Manifesto: the real elevation under the torch ------------------------
   The synthetic mullion detail stays on top as the setting-out; Prime Square's
   own drawn elevation sits beneath it. `screen` drops the plate's near-black
   ground out against --void, so only the drafting lines survive — no visible
   image rectangle, and no second dark layer fighting the section background.
   The mask matches the SVG's exactly, so both layers ride the same torch. */
/* Pointer-capable, roomy screens only. On a phone the manifesto is a third of the
   height, the elevation reads as texture rather than a drawing, and the plate would
   be ~50KB on the mobile critical path for it. The synthetic grid still carries the
   section there, so nothing is missing — only the second layer is. */
@media (min-width:700px){
.mani__draw::before{content:"";position:absolute;inset:0;z-index:-1;
  background-image:var(--elev);background-size:contain;background-position:center;
  background-repeat:no-repeat;mix-blend-mode:screen;opacity:.7;
  -webkit-mask-image:radial-gradient(circle var(--tr) at var(--tx) var(--ty),#000 0%,rgba(0,0,0,.55) 45%,rgba(0,0,0,.12) 75%,rgba(0,0,0,.07) 100%);
  mask-image:radial-gradient(circle var(--tr) at var(--tx) var(--ty),#000 0%,rgba(0,0,0,.55) 45%,rgba(0,0,0,.12) 75%,rgba(0,0,0,.07) 100%)}
}

/* --- Project card: the blueprint reveal -----------------------------------
   Hover/focus retires the photograph and brings up the building's own drawn
   elevation beneath the existing overlay. Pointer-only: on touch there is no
   hover state to reveal it into, and the project page carries the drawing at
   full size for every visitor regardless. */
.pc__la{position:absolute;inset:0;z-index:1;display:block;opacity:0;pointer-events:none;
  background:#061428;transition:opacity .55s var(--ease)}
.pc__la img{width:100%;height:100%;object-fit:cover;
  transform:scale(1.03);transition:transform 1.1s var(--ease)}
.pc__lalbl{position:absolute;top:12px;right:12px;z-index:1;
  font-size:9.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(158,198,240,.9);padding:5px 9px;border:1px solid rgba(158,198,240,.28);
  border-radius:100px;opacity:0;transition:opacity .5s var(--ease) .12s}
@media (hover:hover) and (pointer:fine){
  .pc:hover .pc__la,.pc:focus-visible .pc__la{opacity:1}
  .pc:hover .pc__la img,.pc:focus-visible .pc__la img{transform:scale(1)}
  .pc:hover .pc__lalbl,.pc:focus-visible .pc__lalbl{opacity:1}
  /* the photograph steps back rather than vanishing, so the cross-fade has depth */
  .pc:hover .pc__m > img,.pc:focus-visible .pc__m > img{opacity:.06}
  .pc__m > img{transition:transform 1.1s var(--ease),opacity .55s var(--ease)}
}

/* --- Project page: the elevation study ------------------------------------ */
.pj__elev{margin:0 0 clamp(30px,3.6vw,52px);padding:clamp(22px,3vw,44px) clamp(18px,3vw,48px) 0;
  border:1px solid var(--line);border-radius:5px;background:#fff;overflow:hidden}
/* The drawings run from 2.4:1 landscape (CCS) to 1:2 portrait (Aspect). Capping
   BOTH axes with auto sizing contains every one of them inside a sensible block:
   width-only capping gave the portrait towers a 1,670px-tall figure that owned
   the whole page. */
.pj__elev img{max-width:min(100%,820px);max-height:min(72vh,620px);width:auto;height:auto;
  margin-inline:auto;display:block}
.pj__elev figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;
  margin-top:clamp(16px,2vw,26px);padding:14px 0;border-top:1px solid var(--line)}
.pj__elevk{font-size:10px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.pj__elevv{font-family:var(--ff-display);font-weight:500;font-size:.98rem;letter-spacing:-.012em}

/* --- Clients & recognition ------------------------------------------------ */
.cred{display:grid;grid-template-columns:1.35fr .85fr;gap:clamp(28px,4vw,64px);
  margin-top:var(--sy-head);align-items:start}
.cred__lbl{display:block;margin-bottom:18px;font-size:10px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.cred__note{display:block;margin-top:16px;font-size:12.5px;color:var(--ink-3)}

/* auto-fill, so the grid absorbs the logos still to come without a rebuild.
   The 1px rules are drawn per PLATE (an overlapping box-shadow ring) rather than as
   a gap over a tinted container: with five plates in a four-column track the old
   approach painted three empty cells as a grey block. Each plate now carries its own
   rule, so a part-filled last row simply ends. */
.cli{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1px}
.cli__i{display:grid;place-items:center;min-height:clamp(74px,7vw,96px);padding:16px;
  background:#fff;box-shadow:0 0 0 1px var(--line);border-radius:2px;
  transition:background .4s var(--ease)}
.cli__i:hover{background:var(--paper-2)}
.cli__i img{max-height:38px;width:auto;object-fit:contain}
.cli__n{font-family:var(--ff-display);font-weight:500;font-size:1.02rem;letter-spacing:-.014em;
  color:var(--ink-2);text-align:center;line-height:1.25}

.awd{display:grid;gap:12px}
.awd__i{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;
  padding:18px 20px;border:1px solid var(--line);border-radius:4px;background:#fff}
.awd__ico{display:grid;place-items:center;width:34px;height:34px;flex:none;
  border-radius:50%;background:var(--paper-2);color:var(--blue)}
/* the icon set is drawn as outlines — without fill:none the paths fill solid and
   the shield and the façade grid both render as black blobs */
.awd__ico svg{width:17px;height:17px;fill:none;stroke:var(--blue);stroke-width:1.5}
.awd__ico svg .node{fill:var(--orange);stroke:none}
.awd__note{display:block;font-size:10px;font-weight:500;letter-spacing:.15em;
  text-transform:uppercase;color:var(--orange)}
.awd__ttl{display:block;margin-top:5px;font-family:var(--ff-display);font-weight:500;
  font-size:1.02rem;letter-spacing:-.014em}
.awd__org{display:block;margin-top:3px;font-size:13px;color:var(--ink-3)}

/* --- Global collaborations ----------------------------------------------- */
.ptr{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:var(--sy-head);
  background:var(--line);border-block:1px solid var(--line)}
.ptr__i{position:relative;display:block;padding:clamp(24px,2.8vw,38px) clamp(18px,2vw,28px);
  background:var(--paper);transition:background .4s var(--ease)}
.ptr__i:hover{background:#fff}
.ptr__i::after{content:"";position:absolute;left:0;bottom:-1px;width:0;height:2px;
  background:var(--orange);transition:width .5s var(--ease)}
.ptr__i:hover::after{width:100%}
.ptr__no{display:block;font-size:10px;font-weight:500;letter-spacing:.16em;color:var(--ink-3)}
.ptr__pl{display:block;margin-top:14px;font-family:var(--ff-display);font-weight:500;
  font-size:clamp(1.15rem,1.9vw,1.5rem);letter-spacing:-.018em}
.ptr__wh{display:block;margin-top:8px;font-size:.9rem;color:var(--ink-2);line-height:1.55}
.ptr__nm{display:inline-block;margin-top:12px;padding:4px 10px;border-radius:100px;
  border:1px solid var(--line);font-size:11px;font-weight:500;letter-spacing:.05em;color:var(--ink-3)}

@media (max-width:980px){
  .cred{grid-template-columns:1fr;gap:clamp(30px,5vw,44px)}
  .ptr{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:520px){
  .ptr{grid-template-columns:1fr}
  .cli{grid-template-columns:repeat(2,1fr)}
  .pj__elev{padding-inline:14px}
}
@media (prefers-reduced-motion:reduce){
  .pc__la,.pc__la img,.pc__lalbl,.ptr__i::after{transition-duration:.01ms}
}

/* --- Project brief: subheads and highlight lists (v3.3) -------------------
   The client's final copy carries a subhead and, on most projects, a façade
   highlights list. The global reset strips list markers, so the list needs its
   own marker here — the same orange square the Scope of Work card uses, so the
   two read as one family rather than two list styles on one page. */
.pj__body h3{margin:clamp(24px,2.6vw,34px) 0 12px;
  font-family:var(--ff-display);font-weight:500;letter-spacing:-.016em;
  font-size:clamp(1.02rem,1.5vw,1.2rem)}
.pj__body h3:first-child{margin-top:0}
.pj__body ul{display:grid;gap:9px;margin-top:4px;max-width:var(--measure)}
.pj__body ul li{display:flex;gap:11px;font-size:.94rem;color:var(--ink-2);line-height:1.6}
.pj__body ul li::before{content:"";width:6px;height:6px;margin-top:8px;flex:none;
  background:var(--orange);border-radius:1px}

/* --- India map: horizontal overflow on narrow screens (v3.3 fix) ----------
   The stage is sized from its HEIGHT (min(56vh,470px)) with the width derived
   through aspect-ratio, so at 390px it resolved to 431px wide and hung 21px
   past the gutter on BOTH sides — the one horizontal scroll left on mobile.
   `max-width:100%` does not clamp a width transferred from an aspect ratio in
   this flex context, so below 900px the stage is driven from its WIDTH instead
   and the height follows. The pins are positioned in percentages of the stage,
   so any box that keeps 1000/1090 leaves every pin exactly on its city. */
@media (max-width:900px){
  .imapsec__map .imap__stage{width:100%;height:auto;max-width:min(100%,470px)}
}

/* --- India map cards on narrow screens (v3.3 fix) -------------------------
   The card is 250px wide and opens 22px to the side of its pin (or -272px when
   the pin sits right of 62%). On a ~300px stage neither side fits, so a hidden
   card still pushed the document 12px wider than the viewport — the remaining
   mobile horizontal scroll after the stage itself was fixed.
   Below 900px the card detaches from the pin's x and centres on the stage,
   dropping just under the pin. It stays fully readable and cannot spill: the
   pins open cards on tap as well as hover, so hiding them was not an option. */
@media (max-width:900px){
  .imapsec__map .imap__card{left:50% !important;width:min(250px,100%);
    margin:14px 0 0;transform-origin:50% 0;transform:translate(-50%,6px) scale(.97)}
  .imapsec__map .imap__card.flip{margin-left:0}
  .imapsec__map .imap__card.on{transform:translate(-50%,0)}
}

/* ==========================================================================
   v3.4 — REVISION SPRINT
   ========================================================================== */

/* --- Leadership: readability over the scroll effect -----------------------
   `.ld` was still `position:sticky` from v2.2 (v5 and v6 changed its internals
   but never released the pin), with `margin-bottom:0` from v5. Each profile is
   taller than the viewport once the portrait, bio, quote, credentials and the
   signature-project strip are stacked — so the next card began sliding over the
   current one before it could be finished. That is the reported symptom exactly.

   The pin is now released. Three profiles simply stack, each fully settled, with
   a real gap between them. Nothing else about the card changes. */
.ldr .ld{position:static;top:auto;
  margin-bottom:clamp(26px,3.2vw,46px)}
.ldr .ld:last-child{margin-bottom:0}

/* --- Projects grid: the blueprint reveal comes off the index --------------
   Kept on the individual project pages (`.pj__elev`), where the drawing is
   presented at size with a caption and reads as a drawing. On a 4:5 tile behind
   a text overlay it read as noise. `skywall_card()` no longer emits `.pc__la`;
   these rules stay only so a stale cached page degrades cleanly. */
.pc__la,.pc__lalbl{display:none !important}
@media (hover:hover) and (pointer:fine){
  .pc:hover .pc__m > img,.pc:focus-visible .pc__m > img{opacity:1}
}

/* --- Projects page: single featured hero ---------------------------------- */
.fhero{position:relative;display:block;overflow:hidden;background:var(--void);
  min-height:clamp(420px,58vh,620px)}
.fhero__m{display:block;position:absolute;inset:0;z-index:0}
.fhero__m img{width:100%;height:100%;object-fit:cover;object-position:center 42%;
  transition:transform 1.4s var(--ease)}
.fhero:hover .fhero__m img{transform:scale(1.03)}
/* the copy block sits in the lower half, so the scrim has to be committed there —
   the first pass held .18 through the middle and the meta row went grey-on-grey */
.fhero__m::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(5,13,31,.52) 0%,rgba(5,13,31,.24) 26%,
    rgba(5,13,31,.62) 58%,rgba(5,13,31,.86) 100%)}
.fhero__in{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:clamp(420px,58vh,620px);
  padding-top:calc(var(--hdr) + clamp(40px,5vw,72px));
  padding-bottom:clamp(28px,3.4vw,52px);color:var(--glass)}
.fhero .crumbs{display:flex;align-self:flex-start;align-items:center;gap:8px;color:var(--glass-dim)}
.fhero .crumbs a:hover{color:var(--glass)}
.fhero__lbl{display:inline-flex;align-self:flex-start;align-items:center;gap:9px;
  margin-top:clamp(18px,2.4vw,32px);
  font-size:10px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--glass-faint)}
.fhero__lbl i{display:none}
.fhero__h{display:block;margin-top:12px;font-family:var(--ff-display);font-weight:500;
  font-size:clamp(2rem,5.2vw,4.1rem);letter-spacing:-.032em;line-height:1.02;
  color:var(--glass);max-width:16ch}
.fhero__meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:16px;
  font-size:12px;font-weight:500;letter-spacing:.11em;text-transform:uppercase;color:var(--glass-dim)}
.fhero__meta i{display:block;width:4px;height:4px;border-radius:50%;background:var(--orange);flex:none}
.fhero__meta{color:var(--glass)}
/* a flex column stretches its children — without this the pill spans the container */
.fhero__go{display:inline-flex;align-self:flex-start;align-items:center;gap:9px;
  margin-top:clamp(20px,2.4vw,30px);
  padding:13px 24px;border:1px solid var(--hair);border-radius:100px;background:rgba(234,240,248,.06);
  font-size:12.5px;font-weight:500;letter-spacing:.06em;color:var(--glass);
  transition:background .4s var(--ease),border-color .4s var(--ease),gap .4s var(--ease)}
.fhero:hover .fhero__go{background:rgba(234,240,248,.13);border-color:rgba(234,240,248,.3);gap:14px}
.fhero__go svg{width:15px;height:15px}
/* the stat rail rides the bottom-right of the hero on desktop, and drops under the
   title on narrow screens rather than competing with it */
.fhero__stats{display:flex;flex-wrap:wrap;gap:clamp(18px,3vw,44px);margin-top:clamp(22px,2.6vw,34px);
  padding-top:clamp(16px,1.8vw,24px);border-top:1px solid var(--hair)}
.fhero__stats > span{display:block;min-width:0}
.fhero__n{display:block;font-family:var(--ff-display);font-weight:500;letter-spacing:-.03em;
  font-size:clamp(1.5rem,2.8vw,2.3rem);line-height:1;color:var(--glass)}
.fhero__k{display:block;margin-top:6px;font-size:10px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--glass-faint)}
@media (max-width:680px){
  .fhero,.fhero__in{min-height:clamp(400px,72vh,560px)}
  .fhero__stats{gap:16px 26px}
}

/* --- Internal project hero: frame matches the source, so nothing is cropped ---
   Was `height:clamp(46vh,60svh,70vh)` (~2.3:1) over a 16:9 master, which cut the
   top and bottom off a band that had already been cut from a tall tower plate.
   The frame now takes the source's ratio in both breakpoints — 16:9 on desktop,
   4:5 on mobile where the <picture> switches to the portrait master. The desktop
   cap is generous enough that it only ever trims a few pixels on short viewports. */
.pj__hero{height:auto;min-height:0;aspect-ratio:16/9;max-height:min(88vh,900px)}
.pj__hero img{width:100%;height:100%;object-fit:cover;object-position:center center}
.pj__hero picture{display:block;width:100%;height:100%}
@media (max-width:900px){
  .pj__hero{aspect-ratio:4/5;max-height:min(78vh,680px)}
  .pj__hero img{object-position:center 30%}
}

/* status is retired as a concept, so the map legend stops colour-coding it too */
.imap__clist i,.imap__clist i[data-s="completed"]{background:var(--orange)}

/* --- /systems: the six in full (v3.4) -------------------------------------
   Alternating rows so the eye zig-zags down rather than reading six identical
   left-image blocks. The image column is capped at the tile ratio so a tall
   portrait master cannot make one row twice the height of its neighbours. */
.sysd{display:grid;gap:clamp(40px,5vw,84px)}
.sysd__r{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);
  gap:clamp(24px,4vw,64px);align-items:center;scroll-margin-top:calc(var(--hdr) + 24px)}
/* the columns are .8fr / 1fr, so simply re-ordering the image into column 2 handed
   it the WIDER track — alternate rows rendered the photo 626px against 501px. The
   track widths mirror with it, so the image column is .8fr on both sides. */
.sysd__r:nth-child(even){grid-template-columns:minmax(0,1fr) minmax(0,.8fr)}
.sysd__r:nth-child(even) .sysd__m{order:2}
.sysd__m{position:relative;margin:0}
.sysd__m img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;
  border-radius:5px;max-height:clamp(320px,42vw,520px);display:block}
.sysd__cap{display:block;margin-top:10px;font-size:10px;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3)}
.sysd__b{min-width:0}
.sysd__no{font-family:var(--ff-display);font-size:12px;font-weight:500;letter-spacing:.08em;
  color:var(--blue);font-variant-numeric:tabular-nums}
.sysd__ico{display:grid;place-items:center;width:38px;height:38px;margin-top:14px;
  border:1px solid var(--line);border-radius:50%;background:#fff}
.sysd__ico svg{width:19px;height:19px;fill:none;stroke:var(--blue);stroke-width:1.5}
.sysd__ico svg .node{fill:var(--orange);stroke:none}
.sysd__h{margin-top:16px;font-size:clamp(1.5rem,2.6vw,2.15rem);letter-spacing:-.026em}
.sysd__one{margin-top:10px;font-family:var(--ff-display);font-weight:500;
  font-size:clamp(1rem,1.4vw,1.15rem);letter-spacing:-.012em;color:var(--ink)}
.sysd__p{margin-top:14px;font-size:.96rem;line-height:1.78;color:var(--ink-2);max-width:54ch}
.sysd__pr{margin-top:clamp(20px,2.4vw,30px);padding-top:16px;border-top:1px solid var(--line)}
.sysd__prl{display:block;font-size:10px;font-weight:500;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-3)}
.sysd__prr{display:flex;flex-wrap:wrap;gap:8px;margin-top:11px}
.sysd__prr a{display:inline-block;padding:7px 14px;border:1px solid var(--line);border-radius:100px;
  font-size:12.5px;color:var(--ink-2);
  transition:border-color .35s var(--ease),color .35s var(--ease),background .35s var(--ease)}
.sysd__prr a:hover{border-color:var(--blue);color:var(--blue);background:#fff}
@media (max-width:900px){
  .sysd__r{grid-template-columns:1fr;gap:20px}
  .sysd__r:nth-child(even) .sysd__m{order:0}
  .sysd__m img{max-height:clamp(280px,62vw,420px)}
}

/* --- Client logo plates (v3.4) --------------------------------------------
   The lockups differ wildly in proportion — Adani is 2.9:1, the Bank of America
   lockup is 9.9:1 — so a single max-height makes one tower over the other. Width
   is the shared constraint and height is tuned per mark, which is what optically
   balances a logo wall. `data-c` hooks are here so a new logo can be nudged
   without touching anything structural. */
.cli{grid-template-columns:repeat(auto-fill,minmax(178px,1fr))}
.cli__i{min-height:clamp(88px,8vw,110px)}
.cli__i img{max-width:100%;max-height:40px;width:auto;height:auto;object-fit:contain;
  filter:saturate(.92)}
.cli__i:hover img{filter:saturate(1)}
.cli__i[data-c="adani"] img{max-height:30px}
/* the slots still waiting on a file keep the same weight as a filled plate, so a
   part-sourced wall does not look broken */
.cli__i:not(.cli__i--logo) .cli__n{font-size:1rem;color:var(--ink-3)}
.cli__i:not(.cli__i--logo)::after{content:"logo to follow";position:absolute;bottom:10px;left:0;right:0;
  text-align:center;font-size:8.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--line);pointer-events:none}
.cli__i{position:relative}

/* ==========================================================================
   v3.5 — PROJECT BODY: the drawing fills the column the brief used to strand
   ========================================================================== */
/* The old grid was 1.5fr brief / .85fr sticky Scope card, so a 600-word brief left
   a tall empty channel down the right of every project page. The elevation drawing
   now holds that column — featured at the size a drawing needs, sticky so it stays
   with the copy — and the Scope card drops beneath the brief. */
.pj__body--elev{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  align-items:start}
/* the drawings run from 2.4:1 landscape to 1:2 portrait, so a box that just wraps
   the image is twice the height on some projects. A floor plus centring gives every
   project the same weight in the column. */
.pj__body--elev .pj__elev{position:sticky;top:calc(var(--hdr) + 24px);
  margin:0;padding:clamp(20px,2.4vw,34px) clamp(18px,2.2vw,32px) 0;
  border:1px solid var(--line);border-radius:5px;background:#fff;
  display:flex;flex-direction:column;justify-content:center;
  min-height:clamp(300px,34vw,460px)}
.pj__body--elev .pj__elev img{max-width:100%;max-height:min(62vh,560px);
  width:auto;height:auto;margin-inline:auto;display:block}
.pj__main{min-width:0;display:flex;flex-direction:column;gap:clamp(26px,3vw,42px)}
.pj__body--elev .pj__card{align-self:start;width:100%}
/* the CTA was width:100% inline on the old aside; in a full-width card it should
   sit at its natural size */
.pj__body--elev .pj__card .btn{width:auto}

@media (max-width:900px){
  .pj__body--elev{grid-template-columns:1fr}
  .pj__body--elev .pj__elev{position:static;order:2}
  .pj__main{order:1}
}

/* --- v3.5: client logo plates, per-mark sizing ----------------------------
   Five verified marks now, and their proportions run from 1.2:1 (the stacked
   Prestige lockup with its tagline) to 9.9:1 (the Bank of America bar). Width is
   the shared constraint; height is tuned per mark so no one logo towers over the
   row. Each is from the company's own site or Commons — see IMAGE-MAP §11. */
.cli__i[data-c="piramal"] img{max-height:42px}
.cli__i[data-c="prestige"] img{max-height:70px}
.cli__i{min-height:clamp(96px,9vw,124px)}

/* --- v3.5: partner cells carry their country flag ------------------------- */
.ptr__top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ptr__flag{display:block;width:24px;height:auto;border-radius:2px;
  box-shadow:0 0 0 1px rgba(11,28,51,.10);opacity:.95}
.ptr__logo{display:block;margin-top:14px;min-height:38px;display:flex;align-items:center}
.ptr__logo img{max-width:100%;max-height:34px;width:auto;height:auto;object-fit:contain}

/* ==========================================================================
   v3.5 — CONTACT
   ========================================================================== */
/* --- head: the pointer rail, restyled ------------------------------------
   Was three bare rows on a hairline. Now a numbered rail with a real card feel:
   the number sits in its own ring, the row lifts on hover, and an accent draws in
   at the left so the list reads as steps rather than a paragraph in three parts. */
.ph--contact .phx{border-top:0;margin-top:clamp(26px,3vw,38px);display:grid;gap:10px}
.ph--contact .phx__r{position:relative;grid-template-columns:38px minmax(0,1fr);
  align-items:start;gap:14px;padding:16px 18px;border:1px solid var(--line);
  border-radius:6px;background:#fff;
  transition:border-color .4s var(--ease),transform .4s var(--ease),box-shadow .4s var(--ease)}
.ph--contact .phx__r::before{content:"";position:absolute;left:-1px;top:14px;bottom:14px;width:2px;
  background:var(--orange);border-radius:2px;opacity:0;transition:opacity .4s var(--ease)}
.ph--contact .phx__r:hover{border-color:#D6E0EC;transform:translateX(3px);
  box-shadow:0 12px 30px rgba(11,28,51,.06)}
.ph--contact .phx__r:hover::before{opacity:1}
.ph--contact .phx__n{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;
  border:1px solid var(--line);background:var(--paper-2);color:var(--blue);
  font-size:10.5px;font-variant-numeric:tabular-nums}
.ph--contact .phx__d{margin-top:4px;max-width:52ch}
@media (max-width:900px){ .ph--contact .phx__r{padding:14px} }

/* --- form: the message field is sized, not stretched ----------------------
   `.f{flex:1}` + `textarea{flex:1}` made the field grow to whatever height the
   info card opposite happened to be — which is why it ran so long. The columns no
   longer have to finish on the same line, so the textarea can just be a textarea. */
.ct{align-items:start}
.ct__panel .f{flex:0 1 auto}
.ct__panel .f .fld:last-of-type{flex:0 0 auto;display:block}
.ct__panel .f textarea{flex:0 0 auto;min-height:0;height:132px;max-height:220px}
@media (max-width:900px){ .ct__panel .f textarea{height:140px} }

/* --- map: light ----------------------------------------------------------- */
.omap--light{background:var(--paper-2)}
.omap--light .omap__frame{background:var(--paper-2)}
/* the whole point: Google's tiles are light already, so the invert comes off */
.omap--light .omap__frame iframe{filter:none}
.omap--light .omap__base{
  background:
    linear-gradient(rgba(11,28,51,.05) 1px,transparent 1px) 0 0/58px 58px,
    linear-gradient(90deg,rgba(11,28,51,.05) 1px,transparent 1px) 0 0/58px 58px,
    radial-gradient(circle at 50% 50%,#FFFFFF 0%,var(--paper-2) 70%)}
.omap--light .omap__loc{color:rgba(11,28,51,.24)}
.omap--light .omap__sub{color:rgba(11,28,51,.30)}
/* a light scrim so the card still has something to sit on at the left */
.omap--light::before{background:linear-gradient(90deg,rgba(255,255,255,.94) 0%,
  rgba(255,255,255,.62) 38%,rgba(255,255,255,0) 62%)}
.omap--light .omap__card{background:rgba(255,255,255,.72);
  border:1px solid rgba(11,28,51,.10);color:var(--ink);
  box-shadow:0 24px 60px rgba(11,28,51,.12),inset 0 1px 0 rgba(255,255,255,.9)}
.omap--light .omap__card .lbl{color:var(--ink-3)}
.omap--light .omap__addr{color:var(--ink-2)}
.omap--light .omap__dot{border-color:#fff;box-shadow:0 4px 14px rgba(11,28,51,.28)}
@media (max-width:900px){
  .omap--light::before{background:linear-gradient(180deg,rgba(255,255,255,.94) 0%,
    rgba(255,255,255,.55) 60%,rgba(255,255,255,0) 100%)}
}

/* ==========================================================================
   v3.6 — PROJECT HERO: the whole building, contained
   The `-w` band cropped the building in the FILE, so the hero now reads the
   portrait master and CONTAINS it at its own ratio beside the title. A blurred,
   scaled copy of the same plate fills the bleed, so the band stays cinematic
   without a single pixel of the building being cut.
   ========================================================================== */
.pj__hero{position:relative;display:flex;align-items:center;overflow:hidden;
  height:auto;min-height:0;max-height:none;aspect-ratio:auto;
  background:var(--void);
  padding-block:calc(var(--hdr) + clamp(34px,4vw,60px)) clamp(38px,4.6vw,72px)}
.pj__heroBg{position:absolute;inset:0;z-index:0;display:block;overflow:hidden}
/* the first pass read as a brown smear: too little blur, too much of the plate's own
   colour surviving. Heavier blur, desaturated and pulled well down, then a navy wash
   and a vignette on top, so it reads as atmosphere rather than a blurred photograph. */
.pj__heroBg img{width:100%;height:100%;object-fit:cover;object-position:center 32%;
  transform:scale(1.25);filter:blur(46px) saturate(.55) brightness(.40)}
.pj__heroBg::after{content:"";position:absolute;inset:0;
  background:
    radial-gradient(120% 90% at 50% 40%,rgba(5,13,31,.30) 0%,rgba(5,13,31,.86) 100%),
    linear-gradient(180deg,rgba(10,26,56,.72) 0%,rgba(5,13,31,.66) 50%,rgba(5,13,31,.88) 100%)}

/* an even split: the image was 518px in a 1280 container, which left the title
   stranded in a lot of dark. */
.pj__heroIn{position:relative;z-index:1;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,4.4vw,64px);align-items:center;width:100%}
/* contain, not cover — this is the whole point of the fix */
.pj__heroFig{margin:0;position:relative;border-radius:6px;overflow:hidden;
  box-shadow:0 40px 90px rgba(0,0,0,.42)}
.pj__heroFig img{display:block;width:100%;height:auto;object-fit:contain}

.pj__ttl{position:static;padding:0;left:auto;right:auto;bottom:auto;color:var(--glass)}
.pj__ttl .container{padding:0;max-width:none;margin:0}
.pj__ttl h1{margin-top:14px;font-size:clamp(2rem,4.4vw,3.3rem);letter-spacing:-.03em;
  line-height:1.04;color:var(--glass);max-width:14ch}
/* a rule over the crumbs gives the title block a top edge to sit against, so it reads
   as a composed panel rather than text floating in the dark */
.pj__ttl::before{content:"";display:block;width:48px;height:1px;background:var(--hair);
  margin-bottom:clamp(18px,2.2vw,28px)}
.pj__hmeta{display:flex;flex-wrap:wrap;align-items:center;gap:9px 16px;margin-top:18px;
  max-width:none;font-size:11.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:var(--glass-dim)}
.pj__hmeta i{display:block;width:4px;height:4px;border-radius:50%;background:var(--orange);flex:none}

@media (max-width:900px){
  .pj__heroIn{grid-template-columns:1fr;gap:22px}
  .pj__heroFig{order:1;max-width:min(100%,420px);margin-inline:auto}
  .pj__ttl{order:2;text-align:left}
  .pj__hero{padding-block:calc(var(--hdr) + 26px) 34px}
}

/* ==========================================================================
   v3.6 — CONTACT: one shared grid
   Measured before: form's first field at y=163 against the info card at y=309
   (146px apart), columns ending 201px apart, address rows inset 31px from the
   heading above them. The heading now spans both columns and the two blocks sit
   beneath it sharing a top edge and a bottom.
   ========================================================================== */
.ct{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  column-gap:clamp(24px,3.4vw,56px);row-gap:clamp(26px,3vw,42px);align-items:stretch}
.ct__head{grid-column:1 / -1;max-width:62ch}
.ct__aside{display:flex}
.ct__aside .ccard{margin-top:0;width:100%;display:flex}
.ct__aside .ccard__in{width:100%;display:flex;flex-direction:column;justify-content:center}
.ct__panel{margin:0}
/* both blocks now start and end on the same lines */
.ct__aside,.ct__panel{align-self:stretch}
.cinfo{height:auto}

@media (max-width:900px){
  .ct{grid-template-columns:1fr}
  .ct__head{max-width:none}
}

/* the info list had its own border and row-fill INSIDE the glass card, so the left
   column read as a card within a card while the form opposite is a single surface.
   Flattened: the list now sits directly on the card, separated by hairlines, and its
   content inset matches the form's. */
.ct__aside .ccard__in{padding:clamp(26px,3vw,40px)}
.ct__aside .cinfo{background:transparent;border:0;border-radius:0;gap:0;overflow:visible}
.ct__aside .cinfo__r{background:transparent;padding:18px 0;border-bottom:1px solid var(--line)}
.ct__aside .cinfo__r:first-child{padding-top:0}
.ct__aside .cinfo__r:last-child{border-bottom:0;padding-bottom:0}

/* --- v3.6: contact head cutout -------------------------------------------
   No frame, no border, no caption — the building meets the light background
   directly. The base fade is baked into the asset, so nothing here has to mask
   it; the image simply sits on the page. Bottom-aligned so the tower stands on
   the section's baseline rather than floating in the middle of the column. */
.ph__cut{margin:0;align-self:end;display:flex;justify-content:center}
.ph__cut img{width:auto;max-width:100%;max-height:clamp(320px,38vw,520px);
  height:auto;display:block}
@media (max-width:900px){
  .ph__cut{align-self:center;margin-top:8px}
  .ph__cut img{max-height:300px}
}

/* --- v3.7: landscape hero (CCS) stacks instead of sitting in a column ------
   A 16:9 plate in the side-by-side grid renders ~315px tall beside a full-height
   title. Stacked it fills the container at 1280×720 and reads as the cinematic
   band the shape wants to be. Portrait heroes are untouched. */
.pj__hero--wide .pj__heroIn{grid-template-columns:minmax(0,1fr);gap:clamp(22px,2.6vw,34px)}
.pj__hero--wide .pj__heroFig{max-width:100%;margin-inline:auto}
.pj__hero--wide .pj__ttl{max-width:none}
.pj__hero--wide .pj__ttl h1{max-width:20ch}
.pj__hero--wide .pj__ttl::before{margin-bottom:clamp(14px,1.6vw,20px)}
@media (max-width:900px){
  .pj__hero--wide .pj__heroFig{order:1;max-width:100%}
  .pj__hero--wide .pj__ttl{order:2}
}

/* ==========================================================================
   2026-09-23 — PLANT & MACHINERY (four groups), PARTNER LOGO ROWS, AWARDS
   ========================================================================== */
/* The brochure groups the plant into four families and names machine types only, so
   this is four panels on one hairline grid rather than ten spec cells. */
.mch{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin:0;padding:0;
  background:var(--paper);border-top:1px solid var(--line);border-left:1px solid var(--line);
  border-radius:5px;overflow:hidden}
.mch__g{position:relative;padding:clamp(24px,2.6vw,38px) clamp(20px,2.2vw,32px) clamp(28px,3vw,40px);
  background:var(--paper);box-shadow:inset -1px 0 0 var(--line),inset 0 -1px 0 var(--line)}
.mch__g::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--orange);
  transition:width .45s cubic-bezier(.2,.7,.2,1)}
.mch__g:hover::after{width:100%}
.mch__top{display:flex;align-items:center;gap:14px}
.mch__ico{display:block;width:34px;height:34px;flex:none}
.mch__ico svg{width:100%;height:100%;fill:none;stroke:var(--blue);stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}
.mch__h{margin:0;font-family:var(--ff-display);font-weight:500;font-size:clamp(1.05rem,1.5vw,1.25rem);
  letter-spacing:-.014em;color:var(--ink)}
.mch__l{margin:clamp(16px,1.8vw,22px) 0 0;padding:0;list-style:none;display:grid;gap:10px}
.mch__l li{position:relative;padding-left:20px;font-size:.95rem;line-height:1.5;color:var(--ink-2)}
.mch__l li::before{content:"";position:absolute;left:0;top:.7em;width:8px;height:1px;background:var(--line)}
@media (max-width:760px){
  .mch{grid-template-columns:1fr}
  .mch__g{padding:24px 20px 28px}
}

/* --- partner logo rows: architects, façade consultants ---------------------
   Same plate construction as the clients, one size down, so the three rows read
   as one wall rather than three treatments. */
.lgr{margin-top:clamp(40px,4.4vw,64px);padding-top:clamp(28px,3vw,40px);border-top:1px solid var(--line);
  display:grid;gap:clamp(30px,3.4vw,48px)}
/* four across, as the brochure sets them — auto-fill left an eighth mark alone on
   a second row at desktop width */
.cli--sm{grid-template-columns:repeat(4,minmax(0,1fr))}
.cli--sm .cli__i{min-height:clamp(74px,7vw,92px)}
.cli--sm .cli__i img{max-height:34px}
/* marks whose lockup is wider or taller than the average need their own ceiling
   so every plate reads at the same optical weight */
.cli--sm .cli__i[data-c="hafeez-contractor"] img{max-height:44px}
.cli--sm .cli__i[data-c="a-plus"] img{max-height:40px}
.cli--sm .cli__i[data-c="drishti"] img{max-height:46px}
.cli--sm .cli__i[data-c="znera-space"] img{max-height:46px}
.cli--sm .cli__i[data-c="studio-design"] img{max-height:40px}
.cli--sm .cli__i[data-c="iv3"] img{max-height:46px}
.cli--sm .cli__i[data-c="sahvia"] img{max-height:42px}
.cli--sm .cli__i[data-c="vru-facade"] img{max-height:48px}
.cli--sm .cli__i[data-c="rsm"] img{max-height:46px}
.cli--sm .cli__i[data-c="fdf"] img{max-height:46px}
.cli--sm .cli__i[data-c="aluvision"] img{max-height:36px}
.cli--sm .cli__i[data-c="edifice"] img{max-height:15px}
.cli--sm .cli__i[data-c="inhabitat"] img{max-height:15px}
.cli--sm .cli__i[data-c="meinhardt"] img{max-height:22px}
@media (max-width:1000px){ .cli--sm{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:640px){
  .cli--sm{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cli--sm .cli__i{min-height:78px}
}

/* --- awards: the mark carries the name, the line carries the role ---------- */
.awd{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:clamp(26px,3vw,40px) clamp(20px,2.4vw,32px);
  margin:0;padding:0;list-style:none}
.awd__i{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:14px;
  text-align:center;padding:0;border:0;background:none}
.awd__logo{display:flex;align-items:center;justify-content:center;height:52px;width:100%}
.awd__logo img{max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain;
  filter:saturate(.94);transition:filter .3s}
.awd__i:hover .awd__logo img{filter:saturate(1)}
/* per-mark optical balance: a stacked lockup carries more ink than a single bar */
.awd__i[data-a="wfm"] .awd__logo img{max-height:56px}
.awd__i[data-a="zak"] .awd__logo img{max-height:52px}
.awd__i[data-a="fenestration"] .awd__logo img{max-height:30px}
.awd__i[data-a="construction-times"] .awd__logo img{max-height:19px}
.awd__i[data-a="architects-interiors"] .awd__logo img{max-height:34px}
.awd__role{font-size:12.5px;line-height:1.45;color:var(--ink-3)}
.awd__ttl{font-family:var(--ff-display);font-weight:500;font-size:1rem;color:var(--ink)}
@media (max-width:640px){
  .awd{grid-template-columns:repeat(2,minmax(0,1fr))}
  .awd__logo{height:44px}
}

/* --- leadership: long bio behind a native toggle --------------------------- */
.ld__more{margin-top:0;max-width:60ch}
.ld__more > summary{list-style:none;display:inline-flex;align-items:center;gap:8px;margin-top:14px;
  cursor:pointer;font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}
.ld__more > summary::-webkit-details-marker{display:none}
.ld__more > summary::after{content:"";width:7px;height:7px;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .3s}
.ld__more[open] > summary::after{transform:translateY(1px) rotate(-135deg)}
.ld__more > summary:focus-visible{outline:2px solid var(--blue);outline-offset:4px;border-radius:2px}
.ld__mc{display:none}
.ld__more[open] .ld__mo{display:none}
.ld__more[open] .ld__mc{display:inline}
.ld__more .ld__x{margin-top:12px}
/* nine plates one-per-row ran ~1,700px on a phone; the 178px auto-fill floor above
   drops to a single column under ~400px, so pin two across on small screens */
@media (max-width:640px){
  .cli{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cli__i{min-height:92px;padding:12px}
  .cli__i img{max-width:88%}
  .cli__i:not(.cli__i--logo) .cli__n{font-size:.9rem;text-align:center}
}

/* multi-paragraph bios: paragraphs sit closer than the bio sits to the role line */
.ld__x + .ld__x{margin-top:12px}
.ld__x strong{font-weight:500;color:var(--ink)}

/* --- 2026-09-23: the finalised client marks, each fitted by optical weight -----
   Height, not width, is what makes a logo wall look even, and the nine lockups run
   from a 9:1 bar (Mextech) to a 1:1.4 portrait (Runwal Realty). Runwal carries a
   framed monogram ABOVE its wordmark, so matching its box height to the others
   would make it read twice as large; it is fitted to the row's optical height
   instead — contained, centred, never cropped. */
.cli__i[data-c="adani"] img{max-height:30px}
.cli__i[data-c="prestige"] img{max-height:58px}
.cli__i[data-c="piramal"] img{max-height:40px}
.cli__i[data-c="solar-group"] img{max-height:26px}
.cli__i[data-c="aspect"] img{max-height:34px}
.cli__i[data-c="runwal"] img{max-height:62px}
.cli__i[data-c="metro-group"] img{max-height:40px}
.cli__i[data-c="mextech"] img{max-height:30px}
.cli__i[data-c="asshna"] img{max-height:46px}
.cli__i img{object-position:center}

/* --- 2026-09-23: world map behind Global Collaborations ---------------------
   The section was type on white. The brochure's own dotted plate sits behind it,
   held well back so every partner name and flag still reads at AA on top. */
.sec--wmap{position:relative;overflow:hidden;isolation:isolate}
.wmap{position:absolute;inset:0;z-index:-1;display:grid;place-items:center;pointer-events:none}
.wmap img{width:min(1500px,118%);height:auto;opacity:.5;
  -webkit-mask-image:radial-gradient(120% 78% at 50% 44%,#000 46%,transparent 86%);
          mask-image:radial-gradient(120% 78% at 50% 44%,#000 46%,transparent 86%)}
@media (max-width:900px){ .wmap img{width:190%;opacity:.42} }
/* a market can show two flags */
.ptr__flags{display:inline-flex;align-items:center;gap:5px}

/* --- 2026-09-23: ISO carries an asterisk, and the footnote says what it means ------ */
.ph__ast{color:var(--orange);font-size:.55em;vertical-align:super;margin-left:1px}
.ph__note{margin-top:14px;font-size:12px;letter-spacing:.03em;color:var(--ink-2)}
.ph--band .ph__note{color:var(--glass-faint)}
/* map stat figures that read as a floor rather than a count */
.imap__n--plus{font-variant-numeric:tabular-nums}

/* --- 2026-09-23: the client strip runs marks instead of names --------------
   Height is the only thing that makes a logo row look even, so every mark is fitted
   by optical weight the way the About plate fits them — Runwal's stacked lockup and
   Asshna's cursive carry more height than a plain wordmark. */
.marq--logos{padding-block:clamp(16px,1.8vw,24px)}
.marq--logos .marq__set{gap:0}
.marq__lg{display:inline-flex;align-items:center;justify-content:center;
  padding-inline:clamp(20px,2.4vw,38px);flex:none}
.marq__lg img{height:26px;width:auto;max-width:170px;object-fit:contain;display:block;
  filter:saturate(.92);transition:filter .35s,opacity .35s;opacity:.88}
.marq--logos:hover .marq__lg img{opacity:1}
.marq__lg[data-c="adani"] img{height:22px}
.marq__lg[data-c="piramal"] img{height:28px}
.marq__lg[data-c="solar-group"] img{height:19px}
.marq__lg[data-c="aspect"] img{height:24px}
.marq__lg[data-c="runwal"] img{height:44px}
.marq__lg[data-c="metro-group"] img{height:30px}
.marq__lg[data-c="mextech"] img{height:20px}
.marq__lg[data-c="asshna"] img{height:34px}
@media (max-width:640px){
  .marq__lg{padding-inline:16px}
  .marq__lg img{height:22px}
  .marq__lg[data-c="runwal"] img{height:36px}
  .marq__lg[data-c="asshna"] img{height:28px}
}

/* ==========================================================================
   2026-09-23 — MOBILE QA PASS
   Every rule here is inside a phone/tablet media query. Desktop is untouched:
   the audit found no desktop-scoped selector in this block.
   ========================================================================== */
@media (max-width:900px){
  /* --- LEADERSHIP PORTRAITS -------------------------------------------------
     The masters are 3:4 (1200×1600) and were being shown in a 4:5 frame, so
     cover cropped ~6% vertically. With the subjects already framed tight at the
     top — Rounaq's hair sits about 2% from the file's edge — that was enough to
     slice the crown of his head off. The frame now matches the master exactly,
     so nothing is cropped at all, and the focal point is pinned to the top so
     any future master with a different ratio loses height from the feet, never
     the head. */
  .ld__ph{aspect-ratio:3/4}
  .ld__ph img{object-position:center top}

  /* --- SYSTEM CELLS ---------------------------------------------------------
     4:5 building portraits were being poured into a 5:3 landscape cell — a 108%
     crop that left a horizontal slice of façade and no building. A portrait cell
     shows the building the label is talking about. */
  .bn{min-height:clamp(360px,108vw,440px)}
  .bn__m img{object-position:center 28%}

  /* the system rows and the page-head figures had the same problem, milder */
  .sysd__m img{aspect-ratio:4/5;max-height:none}
  .ph__fig img{aspect-ratio:4/5;max-height:none}

  /* --- FEATURED PROJECT HERO ------------------------------------------------
     A 16:9 master in a 2:3 box lost 62% of the frame. Taller box, focal point
     lifted, so the tower is in shot rather than a band of glazing. */
  .fhero__m img{object-position:center 38%}

  /* --- TAP TARGETS ----------------------------------------------------------
     44px is the comfortable minimum. The pins, the footer links and the contact
     details were all under it. Padding only — no reflow, no size change to the
     type. */
  .imap__pin{width:44px;height:44px;margin:-22px 0 0 -22px}
  .ft__lk a,.ft__so a,.ft__c a{display:inline-flex;align-items:center;min-height:44px}
  .crumbs a,.crumbs span{min-height:44px;display:inline-flex;align-items:center}
  .hdr__logo{display:inline-flex;align-items:center;min-height:44px}
}

@media (max-width:640px){
  /* the day/night pair is a 16:9 plate in a 4:5 window — 55% of the building
     gone. On a phone it reads as a landscape band, which is what the photograph
     actually is. */
  /* the day/night pair is a 16:9 plate shown in a 4:5 window — 55% of the building
     gone. On a phone it reads as the landscape photograph it actually is. */
  .dn,.dn__img{aspect-ratio:4/3;height:auto}
  .dn__img img{object-position:center 45%}
}

@media (max-width:900px){
  /* the remaining sub-44px targets, found by measuring rather than by eye:
     the contact details in the split card, the footer contact block, the footer
     logo and the credit line. Padding only — type size and colour unchanged. */
  .cinfo__r a,.ft__ct a,.ft__logo,.atf a{display:inline-flex;align-items:center;min-height:44px}
}