/* ==========================================================================
   MVS & Partners — Premium Website Prototype V2 (Home)
   Obsidian canvas · warm-white type · gold as datum, never as decoration.
   Type system uses Archivo's width axis as hierarchy:
     condensed (72%) = display, normal (88–100%) = headline, expanded (125%) = technical label;
     IBM Plex Sans = reading; IBM Plex Mono = index & metadata; IBM Plex Sans Arabic = the official Arabic legal name (footer).
   Scroll choreography runs on one number per scene, --p (0→1): driven by CSS scroll timelines where
   supported (so it works even where scripts are blocked), otherwise by script.js.
   ========================================================================== */

@font-face { font-family: "Archivo"; src: url(assets/fonts/archivo-latin.woff2) format("woff2"); font-weight: 300 600; font-stretch: 62% 125%; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Archivo"; src: url(assets/fonts/archivo-latin-ext.woff2) format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; src: url(assets/fonts/plex-sans-latin.woff2) format("woff2"); font-weight: 300 600; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url(assets/fonts/plex-mono-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url(assets/fonts/plex-mono-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url(assets/fonts/plex-arabic-300.woff2) format("woff2"); font-weight: 300; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url(assets/fonts/plex-arabic-400.woff2) format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }

@property --p  { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --w0 { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --w1 { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --w2 { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --n  { syntax: "<integer>"; inherits: false; initial-value: 0; }

:root {
  --ob: #0C0D0E; --ob-2: #121314; --ob-3: #191A1C; --ob-4: #232527;
  --ink: #ECE7DE; --ink-2: #BDB7AD; --ink-3: #8A857E; --ink-4: #85817B;
  --line: rgba(236, 231, 222, .11); --line-2: rgba(236, 231, 222, .22);
  --gold: #BA9631; --gold-2: rgba(186, 150, 49, .45);
  --f-d: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-t: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --f-m: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --f-a: "IBM Plex Sans Arabic", "Geeza Pro", Tahoma, sans-serif;
  --m: clamp(20px, 4.45vw, 64px);
  --hd-h: 76px;
  --e-out: cubic-bezier(.16, 1, .3, 1);
  --e-io: cubic-bezier(.65, 0, .35, 1);
  --e-std: cubic-bezier(.2, 0, 0, 1);
  --d0: 2.25s;                       /* when the page is revealed by the opening */
}
.seen, .op-skip { --d0: .12s; }
@media (prefers-reduced-motion: reduce) { :root { --d0: 0s; } }

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ob); color: var(--ink); -webkit-text-size-adjust: 100%; scroll-padding-top: var(--hd-h); }
body { margin: 0; background: var(--ob); color: var(--ink); font: 300 17px/1.6 var(--f-t); -webkit-font-smoothing: antialiased; overflow-x: clip; }
h1, h2, h3, p, ol, ul, dl, dd, figure, blockquote, fieldset { margin: 0; padding: 0; }
ol, ul { list-style: none; }
a { color: inherit; text-decoration: none; }
img, video, svg { display: block; max-width: 100%; }
button, input, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 1.5px solid var(--gold); outline-offset: 4px; }
::selection { background: var(--gold); color: var(--ob); }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 16px; top: -80px; z-index: 200; padding: 12px 16px; background: var(--ink); color: var(--ob); font: 500 13px var(--f-d); }
.skip:focus { top: 16px; }

/* ---------- type system ---------- */
.t-display { font: 300 clamp(52px, 7.4vw, 128px)/.88 var(--f-d); font-stretch: 72%; letter-spacing: -0.028em; color: var(--ink); }
.t-head { font: 300 clamp(28px, 2.9vw, 48px)/1.1 var(--f-d); font-stretch: 88%; letter-spacing: -0.018em; color: var(--ink); }
.t-label { font: 500 11px/1.3 var(--f-d); font-stretch: 125%; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); display: flex; align-items: baseline; }
.t-index { font: 400 11px/1 var(--f-m); letter-spacing: .02em; color: var(--gold); margin-right: 14px; font-stretch: normal; text-transform: none; }
.t-meta { font: 400 11.5px/1.5 var(--f-m); letter-spacing: .01em; color: var(--ink-3); }
.t-body { font: 300 17px/1.62 var(--f-t); color: var(--ink-2); max-width: 58ch; }
.dl { font: 500 10px var(--f-m); letter-spacing: .12em; fill: var(--ink-3); }

/* ---------- drawings ---------- */
.dwg { width: 100%; height: 100%; color: #D6D1C7; overflow: visible; }
.dwg .key circle { fill: var(--ob); stroke: var(--gold); stroke-width: 1; vector-effect: non-scaling-stroke; }
.dwg .key text { font: 500 15px var(--f-m); fill: var(--gold); }
.dwg .key line { stroke: var(--gold); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: .6; }
.js .dwg [data-draw] { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.2s var(--e-io); }
.js .dwg [data-fade] { transition: opacity 1.2s .6s var(--e-std); }
.js :not(.drawn) > .dwg [data-fade] { opacity: 0; }
.js .drawn > .dwg [data-draw] { stroke-dashoffset: 0; }

/* ---------- the mark ---------- */
.mk { color: var(--gold); }

/* ==========================================================================
   OPENING — datum, trace, signal, gold, wordmark; then the axis opens the film
   ========================================================================== */
.opening { position: fixed; inset: 0; z-index: 150; background: var(--ob); pointer-events: none; animation: op-out .55s var(--e-std) 2.95s both; }
.seen .opening, .op-skip .opening, .no-opening .opening { display: none; }
.op-stage { position: absolute; left: 57%; top: 46%; width: min(30vw, 42svh); translate: -50% -50%; animation: op-stage .5s var(--e-std) 2.45s both; }
.op-svg { width: 100%; height: auto; overflow: visible; }
.op-dim { fill: none; stroke: var(--ink-3); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; animation: op-draw .7s var(--e-io) .75s forwards, op-fade .3s var(--e-std) 2.05s forwards; }
.op-lab { font: 500 38px var(--f-m); letter-spacing: .14em; fill: var(--ink-3); opacity: 0; animation: op-in .4s var(--e-std) 1.05s forwards, op-fade .3s var(--e-std) 2.05s forwards; }
.op-barline { fill: none; stroke: var(--gold); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; animation: op-draw .6s var(--e-io) .05s forwards; }
.op-trace { fill: none; stroke: var(--ink); stroke-width: 1.1; vector-effect: non-scaling-stroke; stroke-linejoin: miter; stroke-dasharray: 1; stroke-dashoffset: 1; animation: op-draw 1.15s var(--e-io) .25s forwards, op-dim 0.4s var(--e-std) 1.9s forwards; }
.op-signal { fill: none; stroke: var(--gold); stroke-width: 2.2; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-dasharray: .045 .955; stroke-dashoffset: 0; opacity: 0; animation: op-signal 1.05s linear 1.0s both; }
.op-fill { fill: var(--gold); }
.op-rise { transform: translateY(1540px); animation: op-rise .8s var(--e-io) 1.35s forwards; }
.op-word { display: block; width: 100%; height: auto; margin-top: 7%; opacity: 0; animation: op-word .6s var(--e-out) 1.95s forwards; }
.op-meta { position: absolute; left: var(--m); right: var(--m); bottom: 34px; display: flex; justify-content: space-between; font: 400 11px var(--f-m); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); opacity: 0; animation: op-in .5s var(--e-std) .3s forwards, op-fade .35s var(--e-std) 2.45s forwards; }
.op-count { counter-reset: n var(--n); animation: op-count 2.1s steps(100) .25s both; }
.op-count::before { content: "00" counter(n); }
.op-axis { position: absolute; top: 0; bottom: 0; left: 57%; width: 1px; margin-left: -.5px; background: var(--gold); transform: scaleY(0); transform-origin: 50% 46%; animation: op-axis .5s var(--e-io) 2.45s forwards; }
@keyframes op-draw { to { stroke-dashoffset: 0; } }
@keyframes op-fade { to { opacity: 0; } }
@keyframes op-in { to { opacity: 1; } }
@keyframes op-dim { to { opacity: .18; } }
@keyframes op-rise { to { transform: translateY(0); } }
@keyframes op-signal { 0% { opacity: 0; stroke-dashoffset: 0; } 8% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; stroke-dashoffset: -1; } }
@keyframes op-word { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes op-count { from { --n: 0; } to { --n: 100; } }
@keyframes op-stage { to { opacity: 0; scale: .965; } }
@keyframes op-axis { to { transform: scaleY(1); } }
@keyframes op-out { to { opacity: 0; visibility: hidden; } }

/* ==========================================================================
   HEADER
   ========================================================================== */
.hd { position: fixed; top: 0; left: 0; right: 0; z-index: 80; transition: transform .6s var(--e-out), background-color .4s var(--e-std); animation: rise-in 1s var(--e-out) calc(var(--d0) + .5s) backwards; }
.hd::before { content: ""; position: absolute; inset: 0 0 -40px; background: linear-gradient(to bottom, rgba(12, 13, 14, .72), rgba(12, 13, 14, 0)); pointer-events: none; transition: opacity .4s; }
.hd.is-solid { background: rgba(12, 13, 14, .9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.hd.is-solid::before { opacity: 0; }
.hd.is-hidden:not(:focus-within):not(.mega-open) { transform: translateY(-101%); }
.hd-bar { position: relative; height: var(--hd-h); padding: 0 var(--m); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 32px; }
.hd-brand { display: flex; align-items: center; gap: 14px; }
.hd-brand .mk { width: 30px; height: 30px; }
.hd-word { width: 128px; height: auto; opacity: .92; }
.hd-nav > ul { display: flex; justify-content: center; gap: clamp(14px, 2.2vw, 36px); }
.hd-link { position: relative; display: block; padding: 28px 0 27px; font: 400 13px/1 var(--f-d); font-stretch: 100%; letter-spacing: .03em; color: var(--ink-2); transition: color .3s; }
.hd-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 20px; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: 0 50%; transition: transform .45s var(--e-out); }
.hd-link:hover, .has-mega:hover > .hd-link, .has-mega:focus-within > .hd-link, .has-mega.is-open > .hd-link { color: var(--ink); }
.hd-link:hover::after, .has-mega:hover > .hd-link::after, .has-mega.is-open > .hd-link::after { transform: scaleX(1); }
.hd-tools { display: flex; align-items: center; gap: 26px; }
.hd-search, .hd-menu { display: flex; align-items: center; gap: 10px; font: 400 13px/1 var(--f-d); letter-spacing: .03em; color: var(--ink-2); transition: color .3s; }
.hd-search svg { width: 17px; height: 17px; }
.hd-search:hover, .hd-menu:hover { color: var(--ink); }
.hd-menu i { position: relative; width: 22px; height: 7px; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; }
.hd-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line); opacity: 0; transition: opacity .4s; }
.hd.is-solid .hd-progress { opacity: 1; }
.hd-progress i { position: absolute; inset: 0; background: var(--gold); transform: scaleX(var(--sp, 0)); transform-origin: 0 50%; }

/* mega navigation (opens on hover / focus with CSS alone; script adds click, delay and previews) */
.mega { position: fixed; left: 0; right: 0; top: var(--hd-h); background: var(--ob-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path .55s var(--e-io), visibility 0s .55s; }
.has-mega:hover > .mega, .has-mega:focus-within > .mega, .has-mega.is-open > .mega { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path .6s var(--e-io), visibility 0s; }
.js .has-mega:not(.is-open):hover > .mega { clip-path: inset(0 0 100% 0); visibility: hidden; }
.mega-in { display: grid; grid-template-columns: 4fr 3.4fr 4.6fr; gap: clamp(24px, 3vw, 56px); padding: 48px var(--m) 52px; min-height: min(480px, 62svh); }
.mega-lead { display: flex; flex-direction: column; gap: 18px; }
.mega-title { font: 300 clamp(44px, 4.4vw, 72px)/.9 var(--f-d); font-stretch: 72%; letter-spacing: -0.025em; }
.mega-ar { font: 300 22px/1.4 var(--f-a); color: var(--ink-4); text-align: left; }
.mega-desc { font: 300 15px/1.6 var(--f-t); color: var(--ink-2); max-width: 40ch; }
.mega-more { margin-top: auto; font: 500 11px var(--f-d); font-stretch: 125%; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); display: inline-flex; gap: 10px; }
.mega-more span { color: var(--gold); transition: transform .4s var(--e-out); } .mega-more:hover span { transform: translateX(5px); }
.mega-sub { border-top: 1px solid var(--line); align-self: start; }
.mega-sub a { display: flex; align-items: baseline; gap: 4px; padding: 13px 0; border-bottom: 1px solid var(--line); font: 400 16px/1.3 var(--f-d); font-stretch: 94%; color: var(--ink-2); transition: color .25s, padding-left .45s var(--e-out); }
.mega-sub a .t-index { width: 52px; flex: none; }
.mega-sub a:hover, .mega-sub a:focus-visible, .mega-sub a.is-on { color: var(--ink); padding-left: 8px; }
.mega-all a { color: var(--ink-3); font-size: 13px; }
.mega-preview { position: relative; min-height: 300px; }
.mp { position: absolute; inset: 0; display: flex; flex-direction: column; opacity: 0; transition: opacity .5s var(--e-std); }
.mp.is-on { opacity: 1; }
.mp > img, .mp > .dwg { flex: 1; min-height: 0; width: 100%; object-fit: cover; }
.mp > .dwg { background: var(--ob); border: 1px solid var(--line); padding: 20px; }
.mp figcaption { display: flex; justify-content: space-between; gap: 16px; padding-top: 12px; font: 400 11px var(--f-m); color: var(--ink-3); }
.mp figcaption span:first-child { color: var(--ink); font: 500 11px var(--f-d); font-stretch: 125%; letter-spacing: .14em; text-transform: uppercase; }
.mp .ledger { flex: 1; }

/* vendor ledger */
.ledger { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--line); counter-reset: none; }
.ledger li { display: grid; grid-template-columns: 44px 1fr auto; column-gap: 12px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--line); font: 400 11px/1.35 var(--f-m); color: var(--ink-3); }
.ledger .lg-v { font: 400 14px/1.3 var(--f-d); font-stretch: 94%; color: var(--ink); }
.ledger .lg-s { text-transform: uppercase; letter-spacing: .06em; }
.ledger .lg-t { grid-column: 2 / 4; font-size: 10.5px; }
.ledger-s li { padding: 5px 0; } .ledger-s .lg-t { display: none; }

/* overlays: search + index (open with :target alone; script adds focus, keys and live filtering) */
.ov { position: fixed; inset: 0; z-index: 120; background: rgba(10, 11, 12, .975); visibility: hidden; opacity: 0; transition: opacity .45s var(--e-std), visibility 0s .45s; overflow-y: auto; }
.ov:target, .ov.is-open { visibility: visible; opacity: 1; transition: opacity .45s var(--e-std), visibility 0s; }
.ov-in { max-width: 1240px; margin: 0 auto; padding: 28px var(--m) 72px; }
.ov-top { display: flex; justify-content: space-between; align-items: center; height: 48px; margin-bottom: 36px; }
.ov-close { font: 400 13px var(--f-d); color: var(--ink-2); display: flex; gap: 12px; } .ov-close span { font: 400 11px var(--f-m); color: var(--ink-4); border: 1px solid var(--line-2); padding: 2px 6px; }
.s-input { width: 100%; background: none; border: 0; border-bottom: 1px solid var(--line-2); padding: 0 0 18px; font: 300 clamp(36px, 5.4vw, 84px)/1 var(--f-d); font-stretch: 72%; letter-spacing: -0.02em; color: var(--ink); outline: 0; }
.s-input::placeholder { color: var(--ink-4); }
.s-input:focus { border-bottom-color: var(--gold); }
.s-count { margin: 14px 0 34px; min-height: 18px; }
.s-results { columns: 3 260px; column-gap: 48px; }
.s-group { break-inside: avoid; margin-bottom: 34px; }
.s-group .t-label { margin-bottom: 10px; }
.s-group a { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); transition: color .2s, padding-left .35s var(--e-out); }
.s-t { font: 400 16px/1.3 var(--f-d); font-stretch: 94%; color: var(--ink-2); }
.s-group a:hover .s-t, .s-group a:focus-visible .s-t, .s-group a.is-on .s-t { color: var(--ink); }
.s-group a:hover, .s-group a.is-on { padding-left: 6px; }
.s-group li[hidden], .s-group[hidden] { display: none; }
.ix { border-top: 1px solid var(--line); }
.ix > li > a { display: flex; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--line); font: 300 clamp(40px, 6vw, 92px)/.95 var(--f-d); font-stretch: 72%; letter-spacing: -0.025em; color: var(--ink-2); transition: color .25s, padding-left .5s var(--e-out); }
.ix > li > a .t-index { width: 64px; flex: none; }
.ix > li > a:hover, .ix > li > a:focus-visible { color: var(--ink); padding-left: 12px; }
.ix ul { display: flex; flex-wrap: wrap; gap: 8px 28px; padding: 12px 0 18px 64px; border-bottom: 1px solid var(--line); }
.ix ul a { font: 400 15px var(--f-d); color: var(--ink-3); } .ix ul a:hover { color: var(--ink); }
.ix-foot { margin-top: 32px; }

/* cursor (fine pointers only; hidden natively only inside zones that carry a label) */
.cur { position: fixed; left: 0; top: 0; z-index: 140; pointer-events: none; opacity: 0; transition: opacity .25s; }
.cur.on { opacity: 1; }
.cur i { position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; border: 1px solid rgba(236, 231, 222, .9); border-radius: 50%; transition: transform .45s var(--e-out), border-color .3s; }
.cur b { position: absolute; left: 30px; top: -9px; white-space: nowrap; padding: 4px 8px 3px; background: var(--ob); border: 1px solid var(--line-2); font: 500 10px/1.2 var(--f-m); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.cur.down i { transform: scale(.82); border-color: var(--gold); }
.has-cur [data-cursor], .has-cur [data-cursor] * { cursor: none; }

/* ==========================================================================
   SCENES (pinned). Desktop and motion-OK only; otherwise every scene is a static layout.
   ========================================================================== */
.scene { position: relative; }
.stage { position: relative; }
@keyframes scene-p { from { --p: 0; } to { --p: 1; } }

/* ---------- 01 · 02  hero → who we are ---------- */
.s-hero { --apc: 57%; --apw: clamp(236px, 20.5vw, 350px); --dat: 72%; --fs: clamp(52px, min(11.6vw, 18svh), 196px); }
.h-frame { position: relative; height: 100svh; min-height: 620px; overflow: hidden; }
.h-grid { position: absolute; inset: 0 var(--m); background: linear-gradient(to right, var(--line) 1px, transparent 1px) 0 0 / calc(100% / 6) 100%; border-right: 1px solid var(--line); opacity: .45; pointer-events: none; }
.ap { position: absolute; z-index: 2; top: 0; left: calc(var(--apc) - var(--apw) / 2); width: var(--apw); height: var(--dat); overflow: hidden; background: #232220 center / cover; animation: ap-open 1.15s var(--e-io) var(--d0) backwards; }
.ap-film { width: 100%; height: 100%; object-fit: cover; }
.no-js .ap, .ap.is-near { background-image: url(assets/v2/inside-mvs-poster.webp); }
.ap-veil { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(12, 13, 14, .55), rgba(12, 13, 14, 0) 22%, rgba(12, 13, 14, 0) 80%, rgba(12, 13, 14, .28)); pointer-events: none; }
@keyframes ap-open { from { clip-path: inset(0 calc(50% - .5px) 0 calc(50% - .5px)); } to { clip-path: inset(0 0 0 0); } }
.h-en { position: absolute; z-index: 3; right: calc(100% - var(--apc) + var(--apw) / 2 + 30px); bottom: calc(100% - var(--dat) + 20px); text-align: right; font: 300 var(--fs)/.84 var(--f-d); font-stretch: 72%; letter-spacing: -0.034em; color: var(--ink); }
.h-en .ln { display: block; overflow: hidden; padding-bottom: .04em; margin-bottom: -.04em; }
.h-en .ln > span { display: block; animation: line-in 1.15s var(--e-out) backwards; }
.h-en .ln:nth-child(1) > span { animation-delay: calc(var(--d0) + .3s); }
.h-en .ln:nth-child(2) > span { animation-delay: calc(var(--d0) + .38s); }
.h-en .ln:nth-child(3) > span { animation-delay: calc(var(--d0) + .46s); }
.h-en .ln:nth-child(4) > span { animation-delay: calc(var(--d0) + .54s); }
@keyframes line-in { from { transform: translateY(104%); } to { transform: none; } }
.h-ar { position: absolute; z-index: 3; left: calc(var(--apc) + var(--apw) / 2 + 30px); bottom: calc(100% - var(--dat) + 20px); font: 300 calc(var(--fs) * .5)/1.22 var(--f-a); color: var(--ink-4); text-align: left; animation: fade-in 1.4s var(--e-std) calc(var(--d0) + .75s) backwards; }
.h-ar span { display: block; }
.datum { position: absolute; z-index: 4; left: 0; right: 0; top: var(--dat); height: 1px; background: var(--gold); transform-origin: var(--apc) 50%; animation: datum-in 1.3s var(--e-io) calc(var(--d0) + .2s) backwards; }
@keyframes datum-in { from { transform: scaleX(0); } to { transform: none; } }
.h-under { position: absolute; z-index: 3; top: calc(var(--dat) + 24px); right: calc(100% - var(--apc) + var(--apw) / 2 + 30px); display: flex; flex-direction: column; align-items: flex-end; gap: 16px; animation: fade-up 1s var(--e-out) calc(var(--d0) + .8s) backwards; }
.h-sub { font: 300 clamp(17px, 1.45vw, 21px)/1.35 var(--f-t); color: var(--ink-2); }
.h-pillars { display: flex; gap: clamp(16px, 2.2vw, 34px); }
.h-pillars a { position: relative; display: flex; align-items: baseline; font: 400 clamp(13px, 1.05vw, 15px)/1.2 var(--f-d); font-stretch: 100%; letter-spacing: .01em; color: var(--ink); padding-bottom: 6px; }
.h-pillars a .t-index { margin-right: 9px; }
.h-pillars a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line-2); transform-origin: 0 50%; transition: background-color .3s; }
.h-pillars a:hover::after, .h-pillars a:focus-visible::after { background: var(--gold); }
.h-sub-ar { position: absolute; z-index: 3; top: calc(var(--dat) + 24px); left: calc(var(--apc) + var(--apw) / 2 + 30px); font: 300 clamp(15px, 1.3vw, 19px)/1.5 var(--f-a); color: var(--ink-4); animation: fade-in 1.2s var(--e-std) calc(var(--d0) + .95s) backwards; }
.h-meta { position: absolute; z-index: 3; left: var(--m); bottom: 30px; display: flex; gap: 22px; animation: fade-in 1s var(--e-std) calc(var(--d0) + 1s) backwards; }
.film-meta { position: absolute; z-index: 3; right: var(--m); bottom: 30px; display: flex; align-items: center; gap: 18px; animation: fade-in 1s var(--e-std) calc(var(--d0) + 1s) backwards; }
.film-name { color: var(--ink-2); }
.film-ch { color: var(--ink); min-width: 9ch; }
.film-tc { color: var(--gold); font-variant-numeric: tabular-nums; }
.film-toggle { display: flex; align-items: center; gap: 9px; font: 400 11.5px var(--f-m); color: var(--ink-3); }
.film-toggle i { width: 9px; height: 10px; border-left: 2px solid currentColor; border-right: 2px solid currentColor; }
.film-toggle[aria-pressed="true"] i { border: 0; width: 0; height: 0; border-left: 9px solid currentColor; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.film-toggle:hover { color: var(--ink); }
.h-cue { position: absolute; z-index: 3; left: var(--apc); top: calc(var(--dat) + 26px); translate: -50% 0; display: flex; flex-direction: column; align-items: center; gap: 10px; animation: fade-in 1s var(--e-std) calc(var(--d0) + 1.2s) backwards; }
.h-cue i { width: 1px; height: 44px; background: linear-gradient(to bottom, var(--gold), transparent); animation: cue 2.4s var(--e-io) infinite; transform-origin: 50% 0; }
@keyframes cue { 0% { transform: scaleY(0); } 45% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes rise-in { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }

/* who we are (static layout by default) */
.v-text { position: relative; padding: 18vh var(--m) 12vh; display: grid; gap: 34px; max-width: 980px; }
.v-head { max-width: 22ch; }
.v-cols { display: grid; gap: 10px; }
.v-list { border-top: 1px solid var(--line); max-width: 560px; }
.v-list li { display: flex; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--line); font: 400 15px/1.35 var(--f-d); font-stretch: 94%; color: var(--ink-2); }
.v-list .t-index { width: 36px; flex: none; }
/* presence band (after the pinned hero scene): the client's profile map, shown unaltered.
   The frame shows only the map band (slide px 800–2680 × 20–575 of 2700 × 1500), clear of the slide's text panel.
   Its gold top edge picks up the datum the hero dissolves, and hands the reader on to the pillars. */
.s-presence { padding: clamp(32px, 5vw, 72px) var(--m) clamp(48px, 7vw, 104px); }
.v-map { margin: 0; }
.v-map-frame { position: relative; overflow: hidden; aspect-ratio: 1880 / 555; background: #4a4a4a; border-top: 1px solid var(--gold); }
.v-map-frame img { position: absolute; left: 0; top: 0; width: 143.617%; max-width: none; height: auto; transform: translate(-29.63%, -1.333%); }
.v-map-cap { display: flex; justify-content: flex-end; margin-top: 12px; color: var(--ink-4); }
.v-still { margin: 0 var(--m) 12vh; max-width: 420px; }
.v-still img { width: 100%; height: auto; }
.v-still figcaption { margin-top: 10px; }
.v-chapters { display: none; }

@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .s-hero { height: 250svh; }
  .s-hero .stage { position: sticky; top: 0; height: 100svh; min-height: 620px; overflow: hidden;
    --a: clamp(0, var(--p) / .42, 1);
    --b0: clamp(0, (var(--p) - .1) / .52, 1); --b: calc(var(--b0) * var(--b0) * (3 - 2 * var(--b0)));
    --c: clamp(0, (var(--p) - .5) / .3, 1); }
  .s-hero .h-frame { position: absolute; inset: 0; height: auto; min-height: 0; }
  .s-hero .ap { left: calc(var(--apc) + (68% - var(--apc)) * var(--b) - (var(--apw) + (34% - var(--apw)) * var(--b)) / 2); width: calc(var(--apw) + (34% - var(--apw)) * var(--b)); height: calc(var(--dat) + (100% - var(--dat)) * var(--b)); }
  .s-hero .h-en { translate: calc(var(--a) * -9vw) 0; opacity: calc(1 - var(--a) * 1.25); }
  .s-hero .h-ar, .s-hero .h-sub-ar { translate: calc(var(--a) * 9vw) 0; opacity: calc(1 - var(--a) * 1.4); }
  .s-hero .h-under, .s-hero .h-cue, .s-hero .h-meta, .s-hero .film-meta:not(:hover) { opacity: calc(1 - var(--a) * 1.6); }
  .s-hero .datum { scale: calc(1 - var(--b)) 1; opacity: calc(1 - var(--b)); }
  .s-hero .h-grid { opacity: calc(.45 - var(--b) * .3); }
  .s-hero .v-text { position: absolute; z-index: 5; left: var(--m); top: calc(var(--hd-h) + 7svh); width: calc(51% - var(--m) - 48px); max-width: none; padding: 0; gap: clamp(18px, 3svh, 32px);
    opacity: var(--c); translate: 0 calc((1 - var(--c)) * 40px); pointer-events: none; }
  .s-hero .v-head { font-size: clamp(28px, min(2.75vw, 4.8svh), 46px); }
  .s-hero .v-list li { padding: min(11px, 1.2svh) 0; }
  .s-hero .v-still { display: none; }
  .s-hero .v-chapters { display: block; position: absolute; z-index: 5; right: var(--m); top: calc(var(--hd-h) + 7svh); width: calc(15% - var(--m) - 16px); min-width: 120px; opacity: var(--c); translate: 0 calc((1 - var(--c)) * 40px); border-top: 1px solid var(--line); }
  .v-chapters li { display: grid; grid-template-columns: 22px 1fr; column-gap: 4px; padding: 7px 0; border-bottom: 1px solid var(--line); color: var(--ink-4); transition: color .4s; }
  .v-chapters li span { color: var(--ink-4); }
  .v-chapters li em { grid-column: 2; font-style: normal; font-size: 10px; color: var(--ink-4); }
  .v-chapters li.is-on { color: var(--ink); } .v-chapters li.is-on span { color: var(--gold); }
  .s-hero .stage.is-vision .v-text { pointer-events: auto; }
}

/* ---------- 03  the pillars: three territories under one datum ---------- */
.s-pillars .stage { padding: 14vh var(--m) 10vh; }
.p-head { display: grid; grid-template-columns: 3fr 9fr; gap: 24px; align-items: end; margin-bottom: 40px; }
.p-title { font: 300 clamp(26px, 2.6vw, 42px)/1.1 var(--f-d); font-stretch: 88%; letter-spacing: -0.018em; max-width: 30ch; }
.p-title span { color: var(--ink-3); }
.terr { display: grid; gap: 1px; background: var(--line); border-top: 1px solid var(--gold); }
.t { position: relative; min-height: 86svh; overflow: hidden; background: var(--ob); --k: 1; isolation: isolate; }
.t-vis { position: absolute; inset: 0; z-index: -1; }
.t-vis img { width: 100%; height: 100%; object-fit: cover; opacity: calc(.34 + .38 * var(--k)); transform: scale(calc(1.08 - .08 * var(--k))); transition: opacity .6s, transform 1.4s var(--e-out); filter: saturate(.85); }
.t-tr .t-vis img { object-position: 50% 42%; }
.t-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(12, 13, 14, .94) 8%, rgba(12, 13, 14, .35) 55%, rgba(12, 13, 14, .6)); }
.t-vis-dwg { display: flex; align-items: center; padding: 12% 6% 40%; opacity: calc(.4 + .6 * var(--k)); }
.t-cap { position: absolute; right: 22px; top: 20px; opacity: calc(var(--k)); text-align: right; }
.t-body-in { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px clamp(20px, 2.4vw, 40px) 34px; }
.t-num { font: 400 12px var(--f-m); color: var(--gold); margin-bottom: 16px; }
.t-name { font: 300 clamp(44px, 5.2vw, 92px)/.88 var(--f-d); font-stretch: 72%; letter-spacing: -0.028em; }
.t-ar { margin-top: 12px; font: 300 clamp(17px, 1.5vw, 22px)/1.4 var(--f-a); color: var(--ink-3); }
.t-more { margin-top: 26px; display: grid; gap: 18px; max-width: 520px; opacity: var(--k); }
.t-tr .t-vis { inset: auto; right: clamp(20px, 2.4vw, 40px); top: 58px; width: min(30%, 300px); aspect-ratio: 9 / 16; opacity: var(--k); }
.t-tr .t-vis img { opacity: .92; transform: none; filter: none; }
.t-tr .t-shade { display: none; }
.t-tr .t-cap { right: clamp(20px, 2.4vw, 40px); top: 30px; }
.t-tr .t-more { max-width: min(560px, calc(100% - min(30%, 300px) - 40px)); }
.t-tr .ledger li { grid-template-columns: 40px 1fr auto; padding: 5px 0; }
.t-tr .ledger .lg-t { display: none; }
.t-tr .ledger .lg-v { font-size: 15px; }
.t-desc { font: 300 16px/1.55 var(--f-t); color: var(--ink-2); }
.t-keys { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.t-keys li { font: 400 14px/1.3 var(--f-d); font-stretch: 94%; color: var(--ink); padding-left: 12px; position: relative; }
.t-keys li::before { content: ""; position: absolute; left: 0; top: .6em; width: 5px; height: 1px; background: var(--gold); }
.t-data { display: flex; flex-wrap: wrap; gap: 8px 32px; }
.t-data div { display: flex; gap: 10px; } .t-data dt { color: var(--ink-4); } .t-data dd { color: var(--ink-2); }
.t-go { justify-self: start; display: inline-flex; gap: 10px; font: 500 11px var(--f-d); font-stretch: 125%; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); padding-bottom: 6px; border-bottom: 1px solid var(--gold); }
.t-go span { transition: transform .4s var(--e-out); } .t-go:hover span { transform: translateX(5px); }
.t-tr .ledger { grid-template-columns: 1fr 1fr; column-gap: 26px; }

@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .s-pillars { height: 330svh; }
  .s-pillars .stage { position: sticky; top: 0; height: 100svh; padding: calc(var(--hd-h) + 3svh) var(--m) 4svh; display: flex; flex-direction: column; }
  .p-head { margin-bottom: 3svh; flex: none; }
  .terr { flex: 1; min-height: 0; display: flex; }
  .t { min-height: 0; flex: calc(var(--w) * (1 - var(--hv, 0)) + var(--hw, 1) * var(--hv, 0)) 1 0; transition: flex-grow .7s var(--e-out); }
  .t-co { --w: var(--w0); --k: clamp(0, (var(--w0) * (1 - var(--hv, 0)) + var(--hw, 1) * var(--hv, 0) - 1.4) / 2.4, 1); }
  .t-ict { --w: var(--w1); --k: clamp(0, (var(--w1) * (1 - var(--hv, 0)) + var(--hw, 1) * var(--hv, 0) - 1.4) / 2.4, 1); }
  .t-tr { --w: var(--w2); --k: clamp(0, (var(--w2) * (1 - var(--hv, 0)) + var(--hw, 1) * var(--hv, 0) - 1.4) / 2.4, 1); }
  .t-name { white-space: nowrap; }
  .t-body-in { width: max(100%, 34vw); }
  .t .t-name, .t .t-ar { transform-origin: 0 100%; }
  .t .t-body-in { transition: opacity .5s; }
  .t .t-name { font-size: calc(clamp(26px, 2.3vw, 40px) + (clamp(44px, 5.2vw, 92px) - clamp(26px, 2.3vw, 40px)) * var(--k)); }
  .t-more { max-height: calc(var(--k) * 70svh); overflow: hidden; margin-top: calc(var(--k) * 26px); }
  .t-ar { font-size: calc(15px + 6px * var(--k)); }
  .t-more { visibility: visible; }
}
@keyframes scene-w {
  0%, 26% { --w0: 4.2; --w1: 1; --w2: 1; }
  40%, 60% { --w0: 1; --w1: 4.2; --w2: 1; }
  74%, 100% { --w0: 1; --w1: 1; --w2: 4.2; }
}

/* ---------- 04  selected work: a horizontal track ---------- */
.s-work .stage { padding: 14vh 0 10vh; }
.w-track { display: flex; gap: 4vw; padding: 0 var(--m); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.w-track::-webkit-scrollbar { display: none; }
.w-intro { flex: none; width: min(86vw, 520px); display: flex; flex-direction: column; gap: 26px; scroll-snap-align: start; }
.w-title { font-size: clamp(52px, 6.4vw, 116px); }
.w-hint { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.w-hint i { width: 48px; height: 1px; background: var(--gold); }
.pl { flex: none; width: min(86vw, 58vw + 0px); min-width: min(86vw, 640px); display: grid; grid-template-rows: auto minmax(180px, 1fr) auto auto auto; gap: 18px; scroll-snap-align: start; border-top: 1px solid var(--line-2); padding-top: 16px; }
.pl-top { display: flex; gap: 22px; align-items: baseline; }
.pl-n { color: var(--gold); } .pl-n i { font-style: normal; color: var(--ink-4); }
.pl-p { color: var(--ink); text-transform: uppercase; letter-spacing: .08em; }
.pl-when { margin-left: auto; }
.pl-dwg { position: relative; min-height: 0; background: var(--ob-2); border: 1px solid var(--line); padding: clamp(14px, 2vw, 36px); display: flex; align-items: center; }
.pl-dwg .dwg { max-height: 100%; }
.pl-tb { position: absolute; right: 12px; bottom: 9px; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-4); }
.pl-tb b { font-weight: 400; color: var(--gold); }
.pl-name { font: 300 clamp(40px, 4.6vw, 84px)/.9 var(--f-d); font-stretch: 72%; letter-spacing: -0.026em; margin-top: -.5em; position: relative; z-index: 2; padding-left: clamp(14px, 2vw, 36px); text-shadow: 0 0 24px var(--ob); }
.pl-role { font: 400 15px/1.45 var(--f-d); font-stretch: 94%; color: var(--ink-2); padding-left: clamp(14px, 2vw, 36px); }
.pl-scope { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; padding-left: clamp(14px, 2vw, 36px); counter-reset: sc; }
.pl-scope li { padding: 6px 0; border-bottom: 1px solid var(--line); font: 400 12px/1.4 var(--f-m); color: var(--ink-3); }
.pl-scope.keyed li { counter-increment: sc; } .pl-scope.keyed li::before { content: counter(sc); color: var(--gold); margin-right: 10px; }
.w-progress { display: none; }
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .s-work { --tw: 470vw; height: calc(100svh + var(--tw) - 100vw); }
  .s-work .stage { position: sticky; top: 0; height: 100svh; padding: calc(var(--hd-h) + 6svh) 0 11svh; overflow: hidden; }
  .w-track { width: var(--tw); height: 100%; overflow: visible; scroll-snap-type: none; gap: 4vw; padding: 0 8vw 0 var(--m); translate: calc(var(--p) * (100vw - var(--tw))) 0; }
  .w-intro { width: 30vw; padding-right: 2vw; }
  .pl { width: 54vw; min-width: 0; height: 100%; grid-template-rows: auto minmax(0, 1fr) auto auto auto; }
  .w-progress { display: flex; position: absolute; left: var(--m); right: var(--m); bottom: 5svh; align-items: center; gap: 20px; }
  .w-progress i { position: relative; flex: 1; height: 1px; background: var(--line); }
  .w-progress b { position: absolute; inset: 0; background: var(--gold); transform: scaleX(var(--p)); transform-origin: 0 50%; }
}

/* ---------- 05  expertise: an information system ---------- */
.s-exp { padding: 13vh var(--m) 12vh; border-top: 1px solid var(--line); }
.x-head { display: grid; grid-template-columns: 5fr 7fr; column-gap: 48px; row-gap: 22px; align-items: end; margin-bottom: 6vh; }
.x-head .t-label { grid-column: 1 / -1; }
.x-lead { justify-self: end; }
.x-sys { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 5vw, 96px); align-items: start; }
.x-group + .x-group { margin-top: 42px; }
.x-gname { display: flex; align-items: baseline; font: 500 11px var(--f-d); font-stretch: 125%; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); padding-bottom: 12px; border-bottom: 1px solid var(--gold); }
.x-btn { position: relative; display: grid; grid-template-columns: 62px 1fr 18px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--line); font: 400 16px/1.3 var(--f-d); font-stretch: 94%; color: var(--ink-3); transition: color .25s, padding-left .45s var(--e-out); }
.x-btn .t-index { color: var(--ink-4); transition: color .25s; }
.x-btn i { justify-self: end; width: 10px; height: 1px; background: currentColor; transition: width .45s var(--e-out), background-color .25s; }
.x-btn:hover, .x-btn:focus-visible, .x-item.is-on .x-btn { color: var(--ink); padding-left: 8px; }
.x-item.is-on .x-btn .t-index, .x-btn:hover .t-index { color: var(--gold); }
.x-item.is-on .x-btn i { width: 18px; background: var(--gold); }
.x-panels { position: sticky; top: calc(var(--hd-h) + 28px); min-height: 60svh; }
.x-panel { display: none; }
.x-panel:target, .x-panel.is-on { display: grid; }
.x-panels:not(:has(.x-panel:target, .x-panel.is-on)) .x-panel:first-child { display: grid; }
.x-panel { gap: 22px; align-content: start; animation: panel-in .6s var(--e-out) both; }
@keyframes panel-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.x-pn { font: 300 clamp(40px, 4.6vw, 76px)/.92 var(--f-d); font-stretch: 72%; letter-spacing: -0.026em; }
.x-pd { font: 300 18px/1.6 var(--f-t); color: var(--ink-2); max-width: 52ch; }
.x-types { border-top: 1px solid var(--line); max-width: 560px; }
.x-types li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.x-types b { font: 400 16px var(--f-d); font-stretch: 94%; color: var(--ink); } .x-types span { font: 400 12px var(--f-m); color: var(--ink-3); text-align: right; }
.x-rel { display: grid; border-top: 1px solid var(--line); max-width: 620px; }
.x-rel div { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.x-rel dt { font: 500 10.5px/1.6 var(--f-d); font-stretch: 125%; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.x-rel dd { font: 400 14px/1.5 var(--f-t); color: var(--ink-2); }
.x-vis { margin-top: 6px; background: var(--ob-2); border: 1px solid var(--line); padding: 22px; max-height: 38svh; display: flex; align-items: center; }
.x-vis .dwg { max-height: calc(38svh - 44px); }
.x-photo { padding: 0; display: block; max-height: none; background: none; border: 0; }
.x-photo { max-width: min(100%, calc(var(--nw, 1600px) * 1.25)); }
.x-photo img { width: auto; height: auto; max-width: 100%; max-height: 44svh; }   /* evidence is shown whole: never cropped by CSS */
.x-photo figcaption { margin-top: 8px; }
.x-vis .ledger { width: 100%; }

/* ---------- 06  people ---------- */
.s-people { padding: 13vh 0 12vh; border-top: 1px solid var(--line); }
.pe-head { padding: 0 var(--m); display: grid; gap: 22px; margin-bottom: 7vh; }
.pe-title { font-size: clamp(56px, 8vw, 140px); }
.pe-hero { position: relative; height: min(78svh, 56vw); overflow: hidden; }
.pe-hero img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; transform: translateY(calc(var(--py, 0) * 1px)) scale(1.06); }
.pe-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, var(--ob) 0%, rgba(12, 13, 14, 0) 18%, rgba(12, 13, 14, 0) 70%, var(--ob) 100%); pointer-events: none; }
.pe-hero figcaption { position: absolute; z-index: 2; left: var(--m); bottom: 26px; display: flex; gap: 18px; }
.pe-hero figcaption span:first-child { color: var(--gold); }
.pe-body { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(32px, 6vw, 120px); padding: 8vh var(--m) 9vh; align-items: start; }
.pe-quote p { font: 300 clamp(30px, 3.4vw, 58px)/1.08 var(--f-d); font-stretch: 84%; letter-spacing: -0.02em; text-indent: -.4em; }
.pe-quote p::before { content: "“"; color: var(--gold); }
.pe-quote p::after { content: "”"; color: var(--gold); }
.pe-quote cite { display: block; margin-top: 22px; font-style: normal; }
.pe-mods { margin-top: 14px; border-top: 1px solid var(--line); }
.pe-mods li { display: flex; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--line); font: 400 16px var(--f-d); font-stretch: 94%; color: var(--ink); }
.pe-mods .t-index { width: 36px; flex: none; }
.pe-iso { margin-top: 18px; }
.pe-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); margin: 0 var(--m); }
.pe-strip li { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--ob); }
.pe-strip img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05) brightness(.82); transform: scale(1.02); transition: filter .9s var(--e-std), transform 1.4s var(--e-out); }
.pe-strip li:nth-child(1) img { object-position: 22% 50%; }
.pe-strip li:nth-child(2) img { object-position: 74% 50%; }
.pe-strip li:nth-child(3) img { object-position: 60% 40%; }
.pe-strip li:nth-child(4) img { object-position: 62% 40%; }
.pe-strip li:hover img { filter: none; transform: scale(1.06); }
.pe-strip span { position: absolute; left: 14px; bottom: 12px; color: var(--ink); }

/* ---------- 07  contact ---------- */
.s-contact { position: relative; padding: 13vh var(--m) 12vh; border-top: 1px solid var(--line); overflow: hidden; }
.c-tower { position: absolute; top: 0; right: 0; width: 46%; height: 100%; opacity: .34; -webkit-mask-image: linear-gradient(to left, #000 35%, transparent); mask-image: linear-gradient(to left, #000 35%, transparent); pointer-events: none; }
.c-tower img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.c-head { position: relative; display: grid; gap: 18px; margin-bottom: 8vh; }
.c-title { font: 300 clamp(96px, 17vw, 300px)/.8 var(--f-d); font-stretch: 68%; letter-spacing: -0.04em; margin-left: -.03em; }
.c-where { color: var(--ink-2); }
.c-body { position: relative; display: grid; grid-template-columns: 7fr 4fr; gap: clamp(32px, 6vw, 120px); align-items: start; }
.c-dept { border: 0; display: flex; flex-wrap: wrap; gap: 8px 10px; margin-bottom: 36px; }
.c-dept legend { width: 100%; margin-bottom: 14px; }
.c-dept label { position: relative; cursor: pointer; }
.c-dept input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.c-dept span { display: block; padding: 10px 16px 9px; border: 1px solid var(--line-2); font: 400 14px/1.2 var(--f-d); font-stretch: 94%; color: var(--ink-2); transition: border-color .25s, color .25s, background-color .25s; }
.c-dept label:hover span { border-color: var(--ink-3); color: var(--ink); }
.c-dept input:checked + span { border-color: var(--gold); color: var(--ink); background: rgba(186, 150, 49, .08); }
.c-dept input:focus-visible + span { outline: 1.5px solid var(--gold); outline-offset: 3px; }
.c-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 32px; }
.c-f { display: grid; gap: 8px; }
.c-f em { font-style: normal; color: var(--ink-4); letter-spacing: .06em; }
.c-f-wide { grid-column: 1 / -1; }
.c-f input, .c-f textarea { width: 100%; background: none; border: 0; border-bottom: 1px solid var(--line-2); padding: 8px 0 10px; font: 300 18px/1.4 var(--f-t); color: var(--ink); resize: vertical; outline: 0; transition: border-color .25s; }
.c-f input:focus, .c-f textarea:focus { border-bottom-color: var(--gold); }
.c-send { display: flex; align-items: center; gap: 24px; margin-top: 34px; flex-wrap: wrap; }
.btn { display: inline-flex; gap: 14px; align-items: center; padding: 16px 22px; background: var(--ink); color: var(--ob); font: 500 11px var(--f-d); font-stretch: 125%; letter-spacing: .16em; text-transform: uppercase; transition: background-color .3s; }
.btn:hover { background: var(--gold); }
.c-details { display: grid; border-top: 1px solid var(--line); }
.c-details div { padding: 16px 0; border-bottom: 1px solid var(--line); display: grid; gap: 6px; }
.c-details dd { font: 400 17px/1.45 var(--f-d); font-stretch: 94%; color: var(--ink); }
.c-details a:hover { color: var(--gold); }

/* ---------- footer ---------- */
.ft { padding: 0 var(--m) var(--m); }
.ft-in { border: 1px solid var(--line); background: var(--ob-2); padding: clamp(28px, 4vw, 64px); display: grid; grid-template-columns: 4fr 2fr 2fr 3.2fr 2.6fr; gap: 32px; }
.ft-brand { display: grid; gap: 18px; align-content: start; }
.ft-brand .mk { width: 46px; height: 46px; }
.ft-word { width: 180px; height: auto; }
.ft-brand .t-body { font-size: 15px; max-width: 30ch; }
.ft-col { display: grid; gap: 10px; align-content: start; font: 400 14px/1.4 var(--f-d); font-stretch: 94%; color: var(--ink-2); }
.ft-col .t-label { margin-bottom: 6px; }
.ft-col a:hover { color: var(--ink); }
.ft-cred p { display: grid; gap: 2px; } .ft-cred b { font-weight: 400; color: var(--ink); } .ft-cred span { font: 400 11px var(--f-m); color: var(--ink-3); }
.ft-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; padding: 18px 0 0; }
.ft-ar { display: inline-block; white-space: nowrap; font-family: var(--f-a); font-weight: 400; letter-spacing: 0; }   /* official legal name kept intact on one line */

/* ---------- reveals (script adds .in; without script everything is simply visible) ---------- */
.js .rv { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--e-out), transform 1.2s var(--e-out); }
.js .rv.in { opacity: 1; transform: none; }
.js .rv-img > img { clip-path: inset(100% 0 0 0); transition: clip-path 1.5s var(--e-io), transform 1.8s var(--e-out); }
.js .rv-img.in > img { clip-path: inset(0 0 0 0); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1180px) {
  .hd-nav > ul { gap: 18px; }
  .hd-word { width: 104px; }
  .mega-in { grid-template-columns: 1fr 1fr; } .mega-preview { display: none; }
}
@media (max-width: 1023px) {
  .hd-nav { display: none; }
  .hd-bar { grid-template-columns: auto 1fr auto; }
  .hd-tools { grid-column: 3; }
  .s-hero { --apc: 60%; --apw: 28vw; }
  .x-head, .x-sys { grid-template-columns: 1fr; }
  .x-lead { justify-self: start; }
  .x-panels { position: relative; top: 0; min-height: 0; order: -1; }
  .x-index { order: 2; }
  .pe-body, .c-body { grid-template-columns: 1fr; }
  .ft-in { grid-template-columns: 1fr 1fr; }
  .ft-brand { grid-column: 1 / -1; }
}
@media (max-width: 899px) {
  .terr { grid-template-columns: 1fr; }
  .t { min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; padding-top: 44svh; }
  .t-body-in { position: relative; }
  .t-ict { padding-top: 38svh; }
  .t-vis-dwg { padding: 70px 6% 0; align-items: flex-start; }
  .t-tr { padding-top: 0; }
  .t-tr .t-vis { position: relative; inset: auto; width: 52%; max-width: 280px; margin: 70px clamp(20px, 2.4vw, 40px) 0 auto; }
  .t-tr .t-more { max-width: none; }
  .t-tr .ledger { grid-template-columns: 1fr; }
  .p-head { grid-template-columns: 1fr; }
  .pe-strip { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 759px) {
  :root { --hd-h: 62px; }
  .hd-word { display: none; }
  .hd-search span { display: none; }
  .s-hero { --apc: 72%; --apw: 44vw; --dat: 66%; --fs: clamp(44px, 13.2vw, 72px); }
  .h-en { right: auto; left: var(--m); bottom: auto; top: calc(var(--hd-h) + 26px); text-align: left; }
  .h-ar { left: auto; right: var(--m); bottom: auto; top: calc(var(--dat) - 3.6em); display: none; }
  .ap { top: calc(var(--hd-h) + var(--fs) * 3.4 + 48px); height: calc(var(--dat) - var(--hd-h) - var(--fs) * 3.4 - 48px); }
  .h-under { right: auto; left: var(--m); align-items: flex-start; top: calc(var(--dat) + 18px); }
  .h-pillars { flex-direction: column; gap: 10px; }
  .h-sub-ar { display: none; }
  .h-cue { display: none; }
  .h-meta { display: none; }
  .film-meta { left: var(--m); right: var(--m); bottom: 22px; justify-content: space-between; gap: 10px; }
  .film-name { display: none; }
  .v-text { padding-top: 14vh; }
  .v-still { max-width: none; }
  .s-presence { padding-inline: 0; }
  .v-map-cap { padding-inline: var(--m); }
  .c-fields { grid-template-columns: 1fr; }
  .s-results { columns: 1; }
  .ft-in { grid-template-columns: 1fr; }
  .pe-hero { height: 62svh; }
  .pe-hero img { object-position: 38% 40%; }
}

/* scroll timelines drive the scenes (works without scripts); script.js drives them only where unsupported */
@supports (animation-timeline: view()) {
  @media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
    .s-hero, .s-work { animation: scene-p linear both; animation-timeline: view(); animation-range: contain 0% contain 100%; }
    .s-pillars { animation: scene-w linear both; animation-timeline: view(); animation-range: contain 0% contain 100%; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .opening { display: none; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  .js .rv, .js .rv-img > img { opacity: 1; transform: none; clip-path: none; }
}

/* script-controlled states */
.ov-lock, .ov-lock body { overflow: hidden; }
.js .has-mega:not(.is-open):focus-within > .mega { clip-path: inset(0 0 100% 0); visibility: hidden; }
.x-flow { display: flex; flex-wrap: wrap; gap: 6px 0; max-width: 620px; font: 300 clamp(19px, 1.6vw, 24px)/1.35 var(--f-d); font-stretch: 88%; color: var(--ink); }
.x-flow span::after { content: "·"; margin: 0 .5em; color: var(--gold); }
.x-flow span:last-child::after { content: none; }
.x-types b { font-weight: 400; }
.s-input::-webkit-search-cancel-button, .s-input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }

/* ---------- Contracting: 18 divisions ---------- */
.t-divs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 22px; border-top: 1px solid var(--line); }
.t-divs li { display: flex; gap: 8px; align-items: baseline; padding: 5px 0; border-bottom: 1px solid var(--line); font: 400 14px/1.3 var(--f-d); font-stretch: 94%; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-divs li span { font: 400 10.5px var(--f-m); color: var(--gold); }
.t-co .t-more { max-width: 640px; }
.mega-in-co { grid-template-columns: 3.4fr 4.8fr 3.8fr; }
.mega-divs-l { margin-bottom: 10px; }
.mega-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 26px; }
.mega-grid a { padding: 8px 0; font-size: 15px; }
.mega-grid a .t-index { width: 32px; }
.mp-type { justify-content: flex-end; gap: 12px; padding: 0 0 4px; border-top: 1px solid var(--gold); }
.mpt-n { color: var(--gold); }
.mpt-name { font: 300 clamp(44px, 4.6vw, 76px)/.9 var(--f-d); font-stretch: 72%; letter-spacing: -0.025em; color: var(--ink); }
.mpt-x { color: var(--ink-2); max-width: 42ch; }
.mp-type figcaption { margin-top: auto; }
.x-gname em { margin-left: auto; font-style: normal; color: var(--ink-3); }
.x-sub { margin-top: 18px !important; }
.x-sub .x-gname { border-bottom-color: var(--line-2); color: var(--ink-3); }
.x-gname .x-only { margin-left: 0; }
.x-list-2 { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; }
.x-list-2 .x-btn { grid-template-columns: 54px 1fr 14px; }
@media (max-width: 1180px) { .mega-in-co { grid-template-columns: 1fr 1.4fr; } }
@media (max-width: 899px) { .t-divs { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .x-list-2 { grid-template-columns: 1fr; } }
.t-co .t-shade { background: linear-gradient(to top, rgba(12, 13, 14, .97) 0%, rgba(12, 13, 14, .86) 42%, rgba(12, 13, 14, .4) 72%, rgba(12, 13, 14, .6)); }
@media (max-width: 899px) { .t-vis-dwg .dwg { height: auto; max-height: 30svh; } }

/* ==========================================================================
   PHASE 6 REFINEMENT — LANGUAGE SYSTEM, DIVISION DISCOVERY & DETAIL EXPERIENCE
   ========================================================================== */

/* ---------- Language Switcher ---------- */
.lang-switch { display: inline-flex; align-items: center; gap: 6px; font: 500 12px/1 var(--f-m); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); padding: 4px 10px; border: 1px solid var(--line); border-radius: 20px; transition: border-color .3s; }
.lang-switch:hover { border-color: var(--line-2); }
.lang-switch[hidden] { display: none; }
.lang-btn { background: none; border: none; padding: 2px 4px; color: var(--ink-3); font-weight: 500; cursor: pointer; transition: color .25s, transform .2s; }
.lang-btn:hover { color: var(--ink); }
.lang-btn.is-active { color: var(--gold); }
.lang-sep { opacity: .35; font-size: 11px; }

/* ---------- RTL & Arabic Language Support ---------- */
[dir="rtl"] { direction: rtl; text-align: right; }
[dir="rtl"] body { font-family: var(--f-a); }
[dir="rtl"] .t-index { margin-right: 0; margin-left: 14px; }
[dir="rtl"] .hd-bar { grid-template-columns: auto 1fr auto; }
[dir="rtl"] .mega-ar { text-align: right; }
[dir="rtl"] .mega-more span { display: inline-block; transform: scaleX(-1); }
[dir="rtl"] .mega-more:hover span { transform: scaleX(-1) translateX(5px); }
[dir="rtl"] .mega-sub a { transition: color .25s, padding-right .45s var(--e-out); }
[dir="rtl"] .mega-sub a:hover, [dir="rtl"] .mega-sub a:focus-visible, [dir="rtl"] .mega-sub a.is-on { padding-left: 0; padding-right: 8px; }
[dir="rtl"] .s-group a:hover, [dir="rtl"] .s-group a.is-on { padding-left: 0; padding-right: 6px; }
[dir="rtl"] .ix > li > a:hover, [dir="rtl"] .ix > li > a:focus-visible { padding-left: 0; padding-right: 12px; }
[dir="rtl"] .x-list-2 .x-btn { grid-template-columns: 54px 1fr 14px; }
[dir="rtl"] .t-go span, [dir="rtl"] .x-btn i::after, [dir="rtl"] .div-cta span { display: inline-block; transform: scaleX(-1); }


/* ---------- STRICT LANGUAGE MODE ISOLATION ---------- */
/* the Arabic typographic echo (.h-ar, .h-sub-ar, .mega-ar, .t-ar) belongs to the English page; only Arabic-only content is hidden */
html[lang="en"] [data-lang-only="ar"] {
  display: none !important;
}

html[lang="ar"] .h-en,
html[lang="ar"] .h-sub,
html[lang="ar"] [data-lang-only="en"] {
  display: none !important;
}


/* RTL Layout Fixes */
html[dir="rtl"] {
  direction: rtl;
  text-align: right;
}
html[dir="rtl"] .hd-bar {
  direction: rtl;
}
html[dir="rtl"] .hd-nav ul {
  direction: rtl;
}
html[dir="rtl"] .hd-tools {
  direction: rtl;
}
html[dir="rtl"] .v-cols,
html[dir="rtl"] .v-list,
html[dir="rtl"] .ft-in {
  direction: rtl;
}


/* Image-completion pass (2026-10-03): verified project photo/render under a Selected Work drawing. Shown whole, never cropped by CSS. */
.pl-ph { margin: 0; padding-left: clamp(14px, 2vw, 36px); }
.pl-ph img { display: block; width: auto; height: auto; max-width: 100%; max-height: clamp(96px, 17vh, 190px); }
.pl-ph figcaption { margin-top: 6px; }
/* Final build (2026-10-04): Selected Work card balance + project detail view. Additive; uses existing tokens. */
.pl:has(.pl-scope.keyed) .pl-ph img { max-height: clamp(80px, 12vh, 140px); }
.pl-open { margin-left: 18px; padding: 0 0 4px; background: none; border: 0; border-bottom: 1px solid var(--gold); color: var(--ink); font: 500 10.5px/1.2 var(--f-d); font-stretch: 125%; letter-spacing: .16em; text-transform: uppercase; cursor: pointer; white-space: nowrap; }
.pl-open span { display: inline-block; transition: transform .4s var(--e-out); }
.pl-open:hover span, .pl-open:focus-visible span { transform: translateX(4px); }
@media (max-width: 640px) { .pl-open { margin-left: 12px; } }
@media (prefers-reduced-motion: reduce) { .pl-open span { transition: none; } }
.pl-top { flex-wrap: wrap; row-gap: 8px; }
.pl-open { transition: color .25s; } .pl-open:hover, .pl-open:focus-visible { color: var(--gold); }
@media (max-width: 899px), (prefers-reduced-motion: reduce) { .w-track { align-items: flex-start; } }   /* each card keeps its own height, so drawings are not stretched into empty frames */
/* Expertise: every panel figure (photo, render, drawing or illustration) shares one height discipline. */
.x-duo { display: flex; gap: 18px; align-items: flex-start; }
.x-duo > .x-photo { flex: var(--ar, 1) 1 0; min-width: 0; }   /* widths in proportion to aspect ratio, so both images share one height */
.x-duo > .x-photo img { width: 100%; }
@media (max-width: 640px) { .x-duo { flex-direction: column; } .x-duo > .x-photo { flex: none; } .x-duo > .x-photo img { width: auto; max-height: 44svh; } }
@media (min-width: 1024px) { .x-panels { max-height: calc(100svh - var(--hd-h) - 48px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; } }   /* sticky panel never taller than the view: the rest scrolls inside */
@media (min-width: 1024px) { .x-panel .x-photo img { max-height: min(36svh, 440px); } }
@media (min-width: 1024px) and (max-height: 800px) { .x-panel .x-photo img { max-height: 28svh; } }
@media (min-width: 1024px) and (max-height: 700px) { .x-panel .x-photo img { max-height: 20svh; } .x-panel .x-duo { max-width: calc(20svh * 2.86 + 18px); } }   /* short laptop views: the pair narrows instead of distorting */
@media (min-width: 1024px) { :is(#px-co-02, #px-cg-05) .x-photo img { max-height: min(28svh, 320px); } }   /* the two longest panels: image and label stay in view together */
@media (min-width: 1024px) and (max-height: 800px) { :is(#px-co-02, #px-cg-05) .x-photo img { max-height: 20svh; } }
@media (min-width: 1024px) and (max-height: 700px) { :is(#px-co-02, #px-cg-05) .x-photo img { max-height: 16svh; } }
.x-panel .x-duo > .x-photo img { max-height: none; }   /* the pair's shared height is bounded by the panel width; a cap would distort one image */
/* Contact */
.c-f em { margin-left: .8em; }
.c-f input[aria-invalid="true"], .c-f textarea[aria-invalid="true"] { border-bottom-color: var(--ink-2); }
.c-f input[aria-invalid="true"]:focus, .c-f textarea[aria-invalid="true"]:focus { border-bottom-color: var(--gold); }
.c-note { color: var(--ink-2); } .c-note:empty { display: none; }

/* ---------- Full build (2026-10-04): hero pillar counts, entries into the pillar / division / project pages ---------- */
.h-pillars a .h-pc { margin-left: 10px; color: var(--ink-3); transition: color .3s; }
.h-pillars a:hover .h-pc, .h-pillars a:focus-visible .h-pc { color: var(--ink-2); }
.x-open { justify-self: start; display: inline-flex; gap: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--gold); font: 500 11px var(--f-d); font-stretch: 125%; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); }
.x-open span { transition: transform .4s var(--e-out); } .x-open:hover span, .x-open:focus-visible span { transform: translateX(5px); }
@media (min-width: 1024px) { .x-panel { position: relative; } .x-panel > .x-open { position: absolute; top: 0; right: 0; } }   /* beside the panel label, so it costs the panel no height */

/* Selected Work: a project photograph or render leads its card; the drawing becomes the technical plate in the corner */
.s-work .pl { position: relative; }
.s-work .pl.is-photo .pl-ph { grid-row: 2; grid-column: 1; position: relative; margin: 0; padding: 0; min-height: 0; overflow: hidden; background: var(--ob-2); }
.s-work .pl.is-photo .pl-ph img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; transition: transform 1.6s var(--e-out); }
.s-work .pl.is-photo .pl-ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(12, 13, 14, .55), rgba(12, 13, 14, 0) 28%, rgba(12, 13, 14, 0) 62%, rgba(12, 13, 14, .7)); pointer-events: none; }
.s-work .pl.is-photo .pl-ph figcaption { position: absolute; z-index: 1; left: 16px; top: 14px; max-width: calc(58% - 16px); margin: 0; color: var(--ink-2); }
.s-work .pl.is-photo .pl-dwg { grid-row: 2; grid-column: 1; z-index: 3; align-self: start; justify-self: end; width: min(38%, 340px); min-height: 0; margin: 12px 12px 0 0; padding: 12px 12px 26px; background: rgba(12, 13, 14, .9); border-color: var(--line-2); }
.s-work .pl.is-photo .pl-dwg .dwg { height: auto; max-height: 110px; }
.s-work .pl.is-photo .pl-tb { right: 10px; bottom: 7px; font-size: 9px; }
.pl-hit { grid-row: 2; grid-column: 1; z-index: 4; }
.s-work .pl > .pl-top { grid-row: 1; } .s-work .pl > .pl-dwg { grid-row: 2; grid-column: 1; }
.s-work .pl.is-photo .pl-ph { aspect-ratio: var(--ar); height: auto; max-height: 100%; align-self: end; }   /* the frame follows the photograph, so it is never enlarged to fill a taller box */
.s-work .pl:hover .pl-ph img { transform: scale(1.035); }
@media (max-width: 899px), (prefers-reduced-motion: reduce) { .s-work .pl.is-photo .pl-ph { aspect-ratio: 4 / 3; } }
@media (prefers-reduced-motion: reduce) { .s-work .pl-ph img { transition: none; } }

/* ---------- 03 Organization ---------- */
.s-org { padding: 13vh var(--m) 12vh; border-top: 1px solid var(--line); }
.org-head { display: grid; grid-template-columns: 5fr 7fr; column-gap: 48px; row-gap: 22px; align-items: end; margin-bottom: 9vh; }
.org-head .t-label { grid-column: 1 / -1; }
.org-lead { max-width: 52ch; color: var(--ink-2); }
.org { position: relative; display: grid; justify-items: center; }
.org-spine { display: grid; justify-items: center; }
.org-node { position: relative; display: grid; justify-items: center; gap: 6px; min-width: min(100%, 380px); padding: 18px 30px 20px; border: 1px solid var(--line-2); background: var(--ob-2); text-align: center; }
.org-node + .org-node { margin-top: 44px; }
.org-node + .org-node::before, .org-fns::before, .org-coo::after { content: ""; position: absolute; left: 50%; width: 1px; background: var(--line-2); transform-origin: 50% 0; transform: scaleY(var(--c, 1)); transition: transform .7s var(--e-io) var(--cd, 0s); }
.org-node + .org-node::before { top: -45px; height: 44px; --cd: .35s; }
.org-ceo { border-color: var(--gold-2); }
.org-k { color: var(--ink-3); }
.org-n { font: 300 clamp(22px, 2vw, 32px)/1.1 var(--f-d); font-stretch: 80%; letter-spacing: -0.01em; color: var(--ink); }
.org-n i { font-style: normal; color: var(--ink-3); }
.org-fns { position: relative; width: 100%; margin-top: 44px; padding-top: 30px; }
.org-fns::before { top: -44px; height: 44px; --cd: .7s; }
.org-fns::after, .org-ops::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line-2); transform-origin: 50% 50%; transform: scaleX(var(--b, 1)); transition: transform 1.1s var(--e-io) var(--bd, .95s); }
.org-cap { margin-bottom: 18px; color: var(--ink-3); }
.org-fn-l { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); }
.org-fn-l li { position: relative; padding: 0 12px 14px; border-left: 1px solid var(--line); font: 400 14px/1.3 var(--f-d); font-stretch: 94%; color: var(--ink-2); transition: opacity .7s var(--e-out), transform .8s var(--e-out); }
.org-fn-l li:last-child { border-right: 1px solid var(--line); }
.org-coo { color: var(--ink); box-shadow: inset 0 2px 0 var(--gold); padding-top: 12px !important; }
.org-coo .org-n { font-size: clamp(17px, 1.3vw, 21px); }
.org-coo::after { top: 100%; height: 48px; background: var(--gold-2); --cd: 1.4s; }
.org-ops { position: relative; width: 100%; margin-top: 48px; padding-top: 0; }
.org-ops::after { background: var(--gold); --bd: 1.6s; }
.org-ops .org-cap { position: absolute; top: -34px; left: 0; margin: 0; }
.org-div-l { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.org-div { padding: 22px 18px 26px; border-left: 1px solid var(--line); transition: opacity .7s var(--e-out), transform .8s var(--e-out), background-color .4s; }
.org-div:last-child { border-right: 1px solid var(--line); }
.org-div:hover { background: var(--ob-2); }
.org-dh { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: baseline; width: 100%; text-align: left; }
.org-dh:disabled { cursor: default; color: inherit; }
.org-dh .t-index { color: var(--gold); }
.org-dn { font: 400 clamp(17px, 1.3vw, 21px)/1.2 var(--f-d); font-stretch: 88%; color: var(--ink); }
.org-dh i { width: 11px; height: 11px; position: relative; }
.org-dh i::before, .org-dh i::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--ink-2); transition: transform .35s var(--e-out); }
.org-dh i::after { transform: rotate(90deg); }
.org-div.is-open .org-dh i::after { transform: rotate(0); }
.org-dh:disabled i { display: none; }
.org-u { display: grid; margin-top: 16px; }
.org-u li { position: relative; padding: 8px 0; border-bottom: 1px solid var(--line); font: 300 14.5px/1.35 var(--f-t); color: var(--ink-2); }
.org-chain li { padding-left: 18px; }
.org-chain li::before { content: ""; position: absolute; left: 4px; top: 0; bottom: 0; width: 1px; background: var(--gold-2); }
.org-chain li:first-child::before { top: 50%; } .org-chain li:last-child::before { bottom: 50%; }
.org-chain li::after { content: ""; position: absolute; left: 1px; top: 50%; width: 7px; height: 7px; margin-top: -4px; border: 1px solid var(--gold); border-radius: 50%; background: var(--ob); }
.org-seq { counter-reset: q; }
.org-seq li::before { counter-increment: q; content: counter(q, decimal-leading-zero); margin-right: 10px; font: 400 11px var(--f-m); color: var(--gold); }
.org-values { display: flex; flex-wrap: wrap; justify-content: center; width: 100%; margin-top: 56px; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--ink-2); }
.org-values li { padding: 4px 22px; border-right: 1px solid var(--line); text-transform: uppercase; letter-spacing: .08em; }
.org-values li:last-child { border-right: 0; }
.org-src { justify-self: start; margin-top: 14px; color: var(--ink-3); }
.org-biz { display: grid; margin-top: 10vh; border-top: 1px solid var(--line); }
.org-biz > .t-label { padding: 18px 0 8px; color: var(--ink-3); }
.org-biz a { display: grid; grid-template-columns: 74px minmax(0, 1fr) auto 28px; gap: 18px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--line); }
.org-biz .t-index { color: var(--ink-3); }
.org-bn { font: 300 clamp(34px, 4vw, 72px)/.95 var(--f-d); font-stretch: 72%; letter-spacing: -0.025em; color: var(--ink); transition: color .3s, transform .5s var(--e-out); }
.org-biz .t-meta { color: var(--ink-3); text-align: right; }
.org-biz .vw-arr { color: var(--gold); justify-self: end; }
.org-biz a:hover .org-bn, .org-biz a:focus-visible .org-bn { color: var(--gold); transform: translateX(8px); }
/* the chart assembles once, top to bottom */
.js .org:not(.in) { --c: 0; --b: 0; }
.js .org:not(.in) .org-node, .js .org:not(.in) .org-fn-l li, .js .org:not(.in) .org-div, .js .org:not(.in) .org-values { opacity: 0; transform: translateY(14px); }
.org-node, .org-values { transition: opacity .8s var(--e-out), transform .9s var(--e-out); }
.org-ceo { transition-delay: .35s; }
.org-fn-l li { transition-delay: calc(.9s + var(--k, 0) * 50ms); }
.org-fn-l li:nth-child(1) { --k: 0; } .org-fn-l li:nth-child(2) { --k: 1; } .org-fn-l li:nth-child(3) { --k: 2; } .org-fn-l li:nth-child(4) { --k: 3; } .org-fn-l li:nth-child(5) { --k: 4; } .org-fn-l li:nth-child(6) { --k: 5; } .org-fn-l li:nth-child(7) { --k: 6; } .org-fn-l li:nth-child(8) { --k: 7; } .org-fn-l li:nth-child(9) { --k: 8; } .org-fn-l li:nth-child(10) { --k: 9; }
.org-div { transition-delay: calc(1.7s + var(--k, 0) * 80ms), calc(1.7s + var(--k, 0) * 80ms), 0s; }
.org-div:nth-child(2) { --k: 1; } .org-div:nth-child(3) { --k: 2; } .org-div:nth-child(4) { --k: 3; } .org-div:nth-child(5) { --k: 4; } .org-div:nth-child(6) { --k: 5; }
.org-values { transition-delay: 2.3s; }
@media (prefers-reduced-motion: reduce) { .org *, .org *::before, .org *::after, .org::after, .org-fns::after, .org-ops::after { transition: none !important; } }
@media (max-width: 1279px) {
  .org-fn-l { grid-template-columns: repeat(5, minmax(0, 1fr)); row-gap: 18px; }
  .org-fn-l li:nth-child(5) { border-right: 1px solid var(--line); }
  .org-coo::after { display: none; }
  .org-div-l { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 0; }
  .org-div:nth-child(3) { border-right: 1px solid var(--line); }
  .org-div:nth-child(n + 4) { border-top: 1px solid var(--line); }
}
@media (max-width: 899px) {
  .org-head { grid-template-columns: 1fr; }
  .org-node { min-width: 0; width: 100%; }
  .org-fn-l { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 0; }
  .org-fn-l li { padding: 12px 12px; border-bottom: 1px solid var(--line); border-right: 0 !important; }
  .org-fn-l li:nth-child(even) { border-right: 1px solid var(--line) !important; }
  .org-coo { grid-column: 1 / -1; }
  .org-ops { margin-top: 64px; }
  .org-ops .org-cap { top: -32px; }
  .org-div-l { grid-template-columns: 1fr; }
  .org-div, .org-div:nth-child(n) { padding: 0; border: 0; border-bottom: 1px solid var(--line); }
  .org-dh { padding: 18px 0; }
  .org-u { margin: 0 0 16px; }
  .js .org-div:not(.is-open) .org-u { display: none; }
  .org-values li { padding: 4px 12px; }
  .org-biz a { grid-template-columns: 52px minmax(0, 1fr) 22px; }
  .org-biz .t-meta { display: none; }
}
/* drawing-led cards whose photograph is too small to lead: a diptych of drawing plate and matted print, equal height */
.s-work .pl.is-dip .pl-dwg { grid-row: 2; grid-column: 1; margin-left: calc(min(44%, var(--nw) * 1.25 + 40px) + 14px); }
.s-work .pl.is-dip .pl-ph { grid-row: 2; grid-column: 1; justify-self: start; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; width: min(44%, calc(var(--nw) * 1.25 + 40px)); min-height: 0; margin: 0; padding: 20px; background: var(--ob-2); border: 1px solid var(--line); overflow: hidden; }
.s-work .pl.is-dip .pl-ph img { width: 100%; max-width: calc(var(--nw) * 1.25); height: auto; min-height: 0; max-height: calc(100% - 40px); object-fit: contain; }
.s-work .pl.is-dip .pl-ph figcaption { margin: 0; align-self: stretch; }
@media (max-width: 899px), (prefers-reduced-motion: reduce) {
  .s-work .pl.is-dip .pl-dwg { margin-left: 0; }
  .s-work .pl.is-dip .pl-ph { grid-row: auto; width: 100%; }
  .s-work .pl.is-dip .pl-ph img { max-height: none; }
}
/* very wide screens: cards stop growing, so photographs are never shown far beyond their native size */
@media (min-width: 1680px) and (prefers-reduced-motion: no-preference) {
  .s-work { --tw: calc(var(--m) + 92vw + 6440px); }
  .s-work .pl { width: 920px; }
}
/* ==========================================================================
   SIGHTLINE system (2026-10-05) — the site's engineered geometry and motion.
   Motion scale: micro 160 ms (state), small 380 ms (indicators), medium 760 ms (reveals),
   scroll-linked for the scenes; cinematic only for the opening and page entries.
   ========================================================================== */
:root { --t-micro: .16s; --t-small: .38s; --t-medium: .76s; }

/* geometry primitives: lines draw, nodes set, the ground datum runs last */
.sl { display: block; width: 100%; height: auto; overflow: visible; color: var(--ink-3); }
.sl .sl-l { stroke: currentColor; stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s var(--e-io) calc(var(--i, 0) * 38ms); }
.sl .sl-l2 { opacity: .45; }
.sl .sl-g { stroke: var(--gold); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--e-io) .2s; }
.sl .sl-n, .sl .sl-src { fill: var(--ob); stroke: var(--gold); stroke-width: 1; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform .5s var(--e-out) calc(.7s + var(--k, 0) * 42ms); }
.sl .sl-ex, .sl .sl-src { fill: var(--gold); }
.sl .sl-sig { fill: var(--gold); opacity: 0; }
.sl.is-on .sl-l, .sl.is-on .sl-g { stroke-dashoffset: 0; }
.sl.is-on .sl-n, .sl.is-on .sl-src { transform: scale(1); }
.sl.is-still .sl-l, .sl.is-still .sl-g, .sl.is-still .sl-n, .sl.is-still .sl-src { transition: none; }

/* each pillar territory carries its own geometry: structure, network, supply */
.t-geo { position: absolute; z-index: 1; top: clamp(54px, 8.5svh, 96px); right: 5%; width: min(36%, 380px); color: var(--ink-2); opacity: calc(var(--k, 1) * .85); pointer-events: none; transition: opacity var(--t-medium) var(--e-std); }
.t-geo .sl { color: inherit; }
@media (max-width: 899px) { .t-geo { display: none; } }

/* Organization: the business-structure rows carry the same geometry in miniature */
.org-biz a { grid-template-columns: 74px minmax(0, 1fr) 168px minmax(0, auto) 28px; }
.org-biz a > .t-index { grid-column: 1; } .org-biz a > .org-bn { grid-column: 2; } .org-biz a > .sl-mini { grid-column: 3; grid-row: 1; align-self: center; } .org-biz a > .t-meta { grid-column: 4; } .org-biz a > .vw-arr { grid-column: 5; }
.org-biz .sl-mini { width: 168px; color: var(--ink-4); transition: color var(--t-small); }
.org-biz a:hover .sl-mini, .org-biz a:focus-visible .sl-mini { color: var(--ink-2); }
@media (max-width: 899px) { .org-biz .sl-mini { display: none; } .org-biz a { grid-template-columns: 52px minmax(0, 1fr) 22px; } .org-biz a > .vw-arr { grid-column: 3; } }   /* phones keep the three-column row; the empty miniature column made 320 px pages scroll sideways */

/* the section rail: where you are on the home, as nodes on a vertical datum */
.sl-rail { position: fixed; z-index: 60; left: max(8px, calc(var(--m) / 2 - 12px)); top: 50%; transform: translateY(-50%); opacity: 0; pointer-events: none; transition: opacity var(--t-small) var(--e-std); }
.sl-rail.is-shown { opacity: 1; pointer-events: auto; }
html.vw-open .sl-rail, html.ov-lock .sl-rail { opacity: 0; pointer-events: none; }
.sl-rail ol { position: relative; display: grid; }
.sl-rail ol::before { content: ""; position: absolute; left: 4px; top: 13px; bottom: 13px; width: 1px; background: var(--line-2); }
.sl-rail a { position: relative; display: flex; align-items: center; gap: 10px; height: 26px; padding-left: 20px; }
.sl-rail a::before { content: ""; position: absolute; left: 0; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border: 1px solid var(--ink-4); border-radius: 50%; background: var(--ob); transition: border-color var(--t-micro), background-color var(--t-micro), transform var(--t-small) var(--e-out); }
.sl-rail a.is-on::before { border-color: var(--gold); background: var(--gold); transform: scale(1.12); }
.sl-rn { font: 400 9.5px/1 var(--f-m); color: var(--ink-4); transition: color var(--t-micro); }
.sl-rail a.is-on .sl-rn, .sl-rail a:hover .sl-rn { color: var(--gold); }
.sl-rl { padding: 3px 7px; background: var(--ob); font: 500 9.5px/1 var(--f-d); font-stretch: 125%; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; opacity: 0; transform: translateX(-6px); transition: opacity var(--t-small) var(--e-std), transform var(--t-small) var(--e-out); }
.sl-rail:hover .sl-rl, .sl-rail:focus-within .sl-rl { opacity: 1; transform: none; }
.sl-rail a.is-on .sl-rl { color: var(--ink); }
@media (max-width: 1099px) { .sl-rail { display: none; } }

/* the navigation datum: one gold line that follows the pointer and rests on the active item */
.hd-nav > ul { position: relative; }
.hd-nav.has-datum .hd-link::after { display: none; }
.hd-datum { position: absolute; left: 0; bottom: 20px; width: 100px; height: 1px; background: var(--gold); transform-origin: 0 50%; opacity: 0; pointer-events: none; transition: transform var(--t-small) var(--e-out), opacity var(--t-micro); }
.hd-link[aria-current] { color: var(--ink); }

/* hero: construction lines drop in before the type; the film is framed by a viewfinder reticle */
.h-grid { animation: grid-in 1.6s var(--e-io) calc(var(--d0) - .1s) backwards; }
@keyframes grid-in { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
.ap-ret { position: absolute; z-index: 2; inset: 14px; pointer-events: none; opacity: .8; animation: ret-in 1s var(--e-out) calc(var(--d0) + 1.55s) backwards; }
.ap-ret i { position: absolute; width: 16px; height: 16px; border: 0 solid rgba(236, 231, 222, .78); }
.ap-ret i:nth-child(1) { left: 0; top: 0; border-width: 1px 0 0 1px; }
.ap-ret i:nth-child(2) { right: 0; top: 0; border-width: 1px 1px 0 0; }
.ap-ret i:nth-child(3) { left: 0; bottom: 0; border-width: 0 0 1px 1px; }
.ap-ret i:nth-child(4) { right: 0; bottom: 0; border-width: 0 1px 1px 0; }
.ap-ret::before, .ap-ret::after { content: ""; position: absolute; left: 50%; top: 50%; background: rgba(236, 231, 222, .55); }
.ap-ret::before { width: 11px; height: 1px; margin: 0 0 0 -5.5px; }
.ap-ret::after { width: 1px; height: 11px; margin: -5.5px 0 0 0; }
@keyframes ret-in { from { opacity: 0; transform: scale(1.035); } to { opacity: .8; transform: none; } }
@media (min-width: 900px) { .ap-ret { top: calc(var(--hd-h) + 10px); } }   /* the film window runs under the header on wide screens */
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) { .s-hero .ap-ret { opacity: calc(.8 - var(--b, 0) * 1.6); } }
@media (prefers-reduced-motion: reduce) { .h-grid, .ap-ret { animation: none; } }
/* ==========================================================================
   01 IDENTITY HERO (2026-10-05): the mark rebuilt from its own 60° geometry, the type standing on its datum.
   ========================================================================== */
.s-id { position: relative; height: 100svh; min-height: 640px; overflow: hidden; background: var(--ob); isolation: isolate;
  --fs: clamp(52px, min(9.6vw, 15.5svh), 172px); --mark-l: 42%; --mark-r: 72%; --dat: 72%; }
.id-field { position: absolute; inset: 0; z-index: 0; }
.id-svg { display: block; width: 100%; height: 100%; }
.id-shade { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(120% 90% at 57% 46%, rgba(12, 13, 14, 0) 40%, rgba(12, 13, 14, .78) 100%); }
.id-lat path { fill: none; stroke: rgba(236, 231, 222, .075); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s var(--e-io) calc(var(--i, 0) * 24ms); }
.id-lit path { stroke: rgba(186, 150, 49, .5); }
.s-id.is-built .id-lat path { stroke-dashoffset: 0; }
.id-plates path { fill: var(--gold); opacity: 0; transform: translateY(10px); transform-box: fill-box; transition: opacity .7s var(--e-out) calc(.35s + var(--t, 0ms)), transform 1s var(--e-out) calc(.35s + var(--t, 0ms)); }
.id-plates .pu { --o: .96; } .id-plates .pd { --o: .58; }
.s-id.is-built .id-plates path { opacity: var(--o); transform: none; }
.id-dat { fill: none; stroke: var(--gold); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s var(--e-io) .15s; }
.s-id.is-built .id-dat { stroke-dashoffset: 0; }
.s-id.is-still .id-lat path, .s-id.is-still .id-plates path, .s-id.is-still .id-dat { transition: none; }

.id-h { position: absolute; z-index: 3; right: calc(100% - var(--mark-l) + 2.6vw); bottom: calc(100% - var(--dat) + 22px); margin: 0; text-align: right; font: 300 var(--fs)/.84 var(--f-d); font-stretch: 72%; letter-spacing: -0.032em; color: var(--ink); }
.id-h .ln { display: block; overflow: hidden; padding-bottom: .05em; margin-bottom: -.05em; }
.id-h .ln > span { display: block; transform: translateY(104%); transition: transform 1.15s var(--e-out); }
.id-h .ln:nth-child(1) > span { transition-delay: .95s; } .id-h .ln:nth-child(2) > span { transition-delay: 1.03s; } .id-h .ln:nth-child(3) > span { transition-delay: 1.11s; } .id-h .ln:nth-child(4) > span { transition-delay: 1.19s; }
.s-id.is-built .id-h .ln > span { transform: none; }
.id-ar { position: absolute; z-index: 3; left: calc(var(--mark-r) + 2.6vw); bottom: calc(100% - var(--dat) + 20px); display: flex; flex-direction: column; font: 300 calc(var(--fs) * .46)/1.2 var(--f-a); color: var(--ink-4); opacity: 0; transition: opacity 1.4s var(--e-std) 1.5s; }
.id-under { position: absolute; z-index: 3; top: calc(var(--dat) + 24px); right: calc(100% - var(--mark-l) + 2.6vw); display: flex; flex-direction: column; align-items: flex-end; gap: 18px; opacity: 0; transform: translateY(12px); transition: opacity 1s var(--e-out) 1.55s, transform 1.1s var(--e-out) 1.55s; }
.id-sub { font: 300 clamp(17px, 1.5vw, 23px)/1.35 var(--f-t); color: var(--ink-2); }
.id-pillars { display: flex; gap: clamp(16px, 2.4vw, 38px); }
.id-pillars a { position: relative; display: flex; align-items: baseline; gap: 9px; padding-bottom: 7px; font: 400 clamp(14px, 1.1vw, 16px)/1.2 var(--f-d); color: var(--ink); }
.id-pillars a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line-2); transform-origin: 0 50%; transition: background-color var(--t-small); }
.id-pillars a::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: 0 50%; z-index: 1; transition: transform var(--t-small) var(--e-out); }
.id-pillars a:hover::before, .id-pillars a:focus-visible::before { transform: scaleX(1); }
.id-pc { color: var(--ink-3); transition: color var(--t-micro); }
.id-pillars a:hover .id-pc, .id-pillars a:focus-visible .id-pc { color: var(--ink-2); }
.id-sub-ar { position: absolute; z-index: 3; top: calc(var(--dat) + 24px); left: calc(var(--mark-r) + 2.6vw); font: 300 clamp(15px, 1.3vw, 19px)/1.5 var(--f-a); color: var(--ink-4); opacity: 0; transition: opacity 1.4s var(--e-std) 1.7s; }
.s-id.is-built .id-ar, .s-id.is-built .id-sub-ar { opacity: 1; }
.s-id.is-built .id-under { opacity: 1; transform: none; }
.id-meta { position: absolute; z-index: 3; left: var(--m); bottom: 30px; display: flex; gap: 22px; color: var(--ink-3); }
.id-cue { position: absolute; z-index: 3; left: calc(var(--mx, 57) * 1%); bottom: 26px; translate: -50% 0; display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--ink-3); transition: color var(--t-micro); }
.id-cue i { width: 1px; height: 34px; background: linear-gradient(var(--gold), transparent); transform-origin: 50% 0; animation: cue 2.4s var(--e-io) 3.4s 2 both; }
.id-cue:hover { color: var(--ink); }
.no-js .s-id .id-h .ln > span, .no-js .id-under { transform: none; opacity: 1; }
.no-js .id-ar, .no-js .id-sub-ar { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .id-h .ln > span, .id-under, .id-ar, .id-sub-ar { transition: none; }
  .id-cue i { animation: none; }
}
@media (max-width: 899px) {
  .s-id { --fs: clamp(44px, 13.4vw, 74px); --mx: 64; --my: 50; min-height: 600px; }
  .id-shade { background: radial-gradient(120% 80% at 64% 50%, rgba(12, 13, 14, 0) 30%, rgba(12, 13, 14, .82) 100%); }
  .id-h { right: auto; left: var(--m); bottom: auto; top: calc(var(--hd-h) + 22px); text-align: left; }
  .id-ar, .id-sub-ar { display: none; }
  .id-under { right: auto; left: var(--m); align-items: flex-start; }
  .id-pillars { flex-direction: column; gap: 10px; }
  .id-cue { display: none; }
}

/* 02 Inside MVS: the film is a chapter now; its entrance waits until it is reached */
.s-hero { --d0: .1s; }
.js .s-hero:not(.is-live), .js .s-hero:not(.is-live) * { animation-play-state: paused !important; }
.s-hero .h-meta { display: none; }
.h-sub { font: 300 clamp(17px, 1.5vw, 23px)/1.35 var(--f-t); color: var(--ink-2); text-align: right; }
.h-lab { justify-content: flex-end; color: var(--ink-3); }
@media (max-width: 899px) { .h-sub { text-align: left; } .h-lab { justify-content: flex-start; } }
/* film chapter index, beside the window */
.h-chap { position: absolute; z-index: 3; left: calc(var(--apc) + var(--apw) / 2 + 30px); bottom: calc(100% - var(--dat) + 20px); width: min(240px, calc(100% - var(--apc) - var(--apw) / 2 - 30px - var(--m))); border-top: 1px solid var(--line); animation: fade-in 1s var(--e-std) calc(var(--d0) + 1.2s) backwards; }
.h-chap button { display: grid; grid-template-columns: 26px 1fr auto; align-items: baseline; width: 100%; padding: 7px 0; border-bottom: 1px solid var(--line); text-align: left; color: var(--ink-3); transition: color var(--t-micro); }
.h-chap button span { color: var(--ink-4); transition: color var(--t-micro); }
.h-chap button em { font-style: normal; color: var(--ink-4); }
.h-chap button:hover, .h-chap button.is-on { color: var(--ink); }
.h-chap button.is-on span, .h-chap button:hover span { color: var(--gold); }
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) { .s-hero .h-chap { left: calc(var(--apc) + (68% - var(--apc)) * var(--b) + (var(--apw) + (34% - var(--apw)) * var(--b)) / 2 + 30px); opacity: clamp(0, (.2 - var(--b, 0)) * 8, 1); } .s-hero .is-vision .h-chap { visibility: hidden; } }
@media (max-width: 899px) { .h-chap { display: none; } }
.id-pillars { gap: clamp(14px, 1.7vw, 30px); }
@media (min-width: 900px) and (max-width: 1500px) { .id-pillars .id-pc { display: none; } }
/* ==========================================================================
   PRESENCE (refinement 2026-10-05): the profile map framed whole, toned so no country is singled out,
   with markers only at confirmed places. The source image is untouched; framing, clip and tone are CSS/SVG.
   Map region of the 2700 x 1500 slide: x 796.5-2700, y 0-1040. The slide's white panel edge (x = 438.75 + .6256y)
   is clipped away; its ~58 degree cut is left as the frame's lower-left edge.
   ========================================================================== */
.s-presence { padding: clamp(56px, 8vw, 128px) var(--m) clamp(48px, 7vw, 112px); }
.pr-head { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding-bottom: 14px; margin: 0 0 clamp(18px, 2.4vw, 34px); border-bottom: 1px solid var(--line); }
.pr-head .t-label { margin: 0; }
.pr-lead { margin: 0; font: 300 clamp(16px, 1.3vw, 20px)/1.4 var(--f-t); color: var(--ink-2); text-align: right; }
.v-map-frame { position: relative; aspect-ratio: auto; overflow: visible; background: none; border-top: 0; }
.v-map-art { position: relative; overflow: hidden; aspect-ratio: 1903.5 / 1040; }
/* the image is the map band itself (slide x 796.5-2700, y 0-1040, cropped at full resolution, 2026-11-01); the panel cut runs from x -18.44% at the top to 15.78% at the foot, as before */
.v-map-art > img { position: absolute; left: 0; top: 0; width: 100%; max-width: none; height: auto; transform: none; filter: url(#pr-tone); clip-path: polygon(-18.44% 0, 100% 0, 100% 100%, 15.78% 100%); }
.pr-defs { position: absolute; width: 0; height: 0; }
.pr-pins { position: absolute; inset: 0; }
.pr-pin { position: absolute; left: var(--x); top: var(--y); width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; background: var(--gold); transform: rotate(45deg); transition: background-color var(--t-micro); }
.pr-pin::before { content: ""; position: absolute; inset: -6px; }
.pr-pin::after { content: ""; position: absolute; inset: -7px; border: 1px solid var(--gold); opacity: 0; transform: scale(.4); transition: opacity .35s var(--e-out), transform .5s var(--e-out); }
.pr-pin.is-on { background: var(--ink); z-index: 1; }
.pr-pin.is-on::after { opacity: 1; transform: none; }
.pr-lines { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.pr-lines path { fill: none; stroke: var(--gold); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .6s var(--e-out); }
.pr-lines path.is-on { stroke-dashoffset: 0; }
.pr-list { margin: 0; padding: 0; list-style: none; }
.pr-pl { border-top: 1px solid var(--line); }
.pr-pl:last-child { border-bottom: 1px solid var(--line); }
.pr-name { display: flex; align-items: baseline; width: 100%; padding: 9px 0 8px; text-align: left; font: 400 15px/1.2 var(--f-d); color: var(--ink-3); transition: color var(--t-micro); }
.pr-name .t-index { margin-right: 12px; color: var(--ink-4); transition: color var(--t-micro); }
.pr-pl.is-on .pr-name { color: var(--ink); }
.pr-pl.is-on .pr-name .t-index { color: var(--gold); }
.pr-meta { margin: 0; padding: 0 0 0 26px; list-style: none; color: var(--ink-3); }
.pr-meta li { padding: 0 0 6px; }
.pr-meta a { color: var(--ink-2); transition: color var(--t-micro); }
.pr-meta a:hover, .pr-meta a:focus-visible { color: var(--gold); }
.v-map-cap { justify-content: space-between; gap: 16px; }
.pr-list { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: clamp(20px, 2.4vw, 40px); margin-top: clamp(26px, 3vw, 44px); }
.pr-pl:last-child { border-bottom: 0; }
.pr-meta { opacity: .55; transition: opacity .3s var(--e-std); }
.pr-pl.is-on .pr-meta, .pr-pl:focus-within .pr-meta { opacity: 1; }
@media (max-width: 1099px) { .pr-list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 899px) {
  .pr-lines { display: none; }
  .s-presence { padding-inline: var(--m); }
  .v-map-art { margin-inline: calc(var(--m) * -1); }
  .v-map-cap { padding-inline: 0; flex-direction: column; gap: 2px; }
  .pr-head { flex-direction: column; gap: 8px; }
  .pr-lead { text-align: left; }
}
@media (max-width: 640px) { .pr-list { grid-template-columns: 1fr; } .pr-pl:last-child { border-bottom: 1px solid var(--line); } }
@media (prefers-reduced-motion: reduce) { .pr-lines path, .pr-pin::after, .pr-meta { transition: none; } }
/* Selected Work (refinement 2026-10-05): under 900px the caption runs along the image's lower edge, clear of the drawing inset */
@media (max-width: 899px) { .s-work .pl.is-photo .pl-ph figcaption { top: auto; bottom: 10px; left: 12px; max-width: calc(100% - 24px); } }
@media (max-width: 599px) { .s-work .pl.is-photo .pl-dwg { width: 50%; padding-bottom: 34px; } .s-work .pl.is-photo .pl-tb { left: 10px; line-height: 1.35; } }
/* Identity headline (refinement 2026-10-05): the line masks open .2em below the baseline so descenders ("integrated")
   are never cut; leading relaxed to .9 so the g clears the line below; size capped by height so the block clears the header. */
.s-id { --fs: clamp(52px, min(9.6vw, 14.5svh), 172px); }
.id-h { line-height: .9; }
.id-h .ln { padding-bottom: .2em; margin-bottom: -.2em; }
.id-h .ln > span { transform: translateY(132%); }
.s-id.is-built .id-h .ln > span, .no-js .s-id .id-h .ln > span { transform: none; }
@media (max-width: 899px) { .s-id { --fs: clamp(44px, 13.4vw, 74px); } }
@media (max-width: 640px) { .pr-pin { width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; } .pr-pin::after { inset: -5px; } }
/* Selected Work, swipe row (< 900px): snap points keep the page gutter, so the intro and each card rest on the margin, not on the screen edge */
@media (max-width: 899px) { .w-track { scroll-padding-inline: var(--m); } }
.sl-rail.is-quiet { opacity: 0; pointer-events: none; }
/* ==========================================================================
   OPENING AS A FIELD (elevation 2026-10-05): identity.js draws the opening on a canvas from the hero's own geometry.
   A signal on the mark's axis, filaments along the 60° lattice settling into plates, the lattice field spreading,
   then the wordmark; the veil lifts onto the identical hero mark. The former trace/axis drawing is retired.
   ========================================================================== */
.op-svg, .op-axis { display: none; }
.op-field { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.op-stage { z-index: 1; animation: op-stage .45s var(--e-std) 2.6s both; }
.op-word { margin-top: 0; animation: op-word .7s var(--e-out) 1.9s forwards; }
.s-id.from-op .id-lat path, .s-id.from-op .id-plates path { transition: none; }
@keyframes id-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .s-id .id-field { animation-name: id-in; animation-duration: .6s !important; animation-timing-function: ease; } }
/* Expertise: a frame that holds the vendor ledger takes the ledger's own height (it was capped at 38svh and centred,
   so the 13 rows spilled upward over the "In the work" / "Supplies" rows above it) */
.x-vis:has(.ledger) { max-height: none; align-items: flex-start; }
/* ==========================================================================
   PILLAR BALANCE (elevation 2026-10-05): ICT and Trading gain an image anchor equal to Contracting's aerial.
   ICT: structured-cabling illustration under the territory shade; the fibre-link drawing stays on top, on a dark plate.
   Trading: supply-warehouse illustration as a backdrop, shaded on the reading side; the authentic Riyadh warehouse
   photograph stays as the framed evidence plate. Both illustrations are captioned "Representative Illustration".
   ========================================================================== */
.t-ict .t-vis-ph .t-shade { background: linear-gradient(to top, rgba(12, 13, 14, .97) 0%, rgba(12, 13, 14, .9) 38%, rgba(12, 13, 14, .72) 62%, rgba(12, 13, 14, .62) 80%, rgba(12, 13, 14, .78)); }

.t-cap span { display: block; }
.t-tr .t-vis.t-vis-bg { inset: 0; right: 0; top: 0; width: auto; aspect-ratio: auto; opacity: 1; }
.t-tr .t-vis.t-vis-bg img { opacity: calc(.3 + .3 * var(--k, 1)); transform: scale(calc(1.08 - .08 * var(--k, 1))); filter: saturate(.8); }
.t-tr .t-vis.t-vis-bg .t-shade { display: block; background: linear-gradient(to right, rgba(12, 13, 14, .97) 0%, rgba(12, 13, 14, .9) 46%, rgba(12, 13, 14, .55) 78%, rgba(12, 13, 14, .7)), linear-gradient(to top, rgba(12, 13, 14, .6), transparent 40%); }
.t-tr .t-vis:not(.t-vis-bg) { box-shadow: 0 0 0 1px var(--line-2); }
.t-tr .t-cap.t-cap-bg { top: auto; bottom: 18px; }
@media (max-width: 899px) {
  .t-ict .t-vis-ph img, .t-tr .t-vis.t-vis-bg img { opacity: .42; transform: none; }
  .t-tr .t-vis.t-vis-bg { position: absolute; inset: 0; width: auto; max-width: none; margin: 0; }
  .t-cap-bg { display: none; }
}
/* IC-01: the service's illustration carries its duct-and-cable drawing as a technical inset (image + drawing, one figure) */
.x-ovl-f { position: relative; display: inline-block; max-width: 100%; vertical-align: top; }
.x-ovl-f > img { display: block; }
.x-ovl-d { position: absolute; right: 10px; top: 10px; width: min(30%, 220px); padding: 8px; background: rgba(12, 13, 14, .86); border: 1px solid var(--line-2); }
.x-ovl-d .dwg { display: block; width: 100%; height: auto; max-height: none; }
@media (max-width: 640px) { .x-ovl-d { width: 36%; padding: 5px; right: 6px; top: 6px; } }
/* ==========================================================================
   HERO REFINEMENT (2026-10-05): the lattice recedes to an atmospheric texture (one token, shared with the opening);
   the circular pointer light is gone; a scale ripple runs through the mark's own plates on hover / touch.
   ========================================================================== */
.s-id { --lat-a: .032; }
.id-lat path { stroke: rgba(236, 231, 222, var(--lat-a)); }
.id-lit { display: none; }
@keyframes id-scale {
  0% { transform: none; }
  32% { transform: translate(var(--dx, 0), var(--dy, 0)) scale(.86); fill: #D4B75E; opacity: 1; }
  70% { transform: none; fill: var(--gold); opacity: var(--o); }
  100% { transform: none; }
}
@media (max-width: 899px) { .s-id { --lat-a: .028; } }
/* ONE MANAGEMENT STRUCTURE: the organizational field (org.js) — the hero lattice expanded, kept clear of all content */
.s-org { position: relative; isolation: isolate; }
.org-field { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; opacity: 0;
  -webkit-mask-image: linear-gradient(120deg, #000 0 42%, transparent 58% 100%); mask-image: linear-gradient(120deg, #000 0 42%, transparent 58% 100%);
  -webkit-mask-size: 300% 100%; mask-size: 300% 100%; -webkit-mask-position: 100% 0; mask-position: 100% 0;
  transition: opacity 1.4s var(--e-std), -webkit-mask-position 2.6s var(--e-io), mask-position 2.6s var(--e-io); }
.org-field.in { opacity: 1; -webkit-mask-position: 0 0; mask-position: 0 0; }
.org-field.is-still { transition: none; }
.org-field svg { display: block; width: 100%; height: 100%; }
.org-field .of-l { fill: none; stroke: rgba(236, 231, 222, .05); stroke-width: 1; vector-effect: non-scaling-stroke; }
.org-field .of-g { fill: none; stroke: rgba(186, 150, 49, .24); stroke-width: 1; stroke-linejoin: miter; vector-effect: non-scaling-stroke; }
.org-field .of-p { fill: rgba(186, 150, 49, .14); } .org-field .of-pd { fill: rgba(186, 150, 49, .07); }
@media (max-width: 899px) { .org-field .of-l { stroke: rgba(236, 231, 222, .04); } .org-field .of-g { stroke: rgba(186, 150, 49, .2); } }
/* ==========================================================================
   HERO REFINEMENT II (2026-10-21): the mark leads; the English headline steps back a size; the Arabic echo is set as a
   designed counterpart (same line pitch as the English, one tone brighter, revealed word by word); the lattice is a
   living canvas field (identity.js); the headline answers the pointer like a lens; the entry is one sequence:
   mark → field wakes → English → Arabic → supporting line → pillars.
   ========================================================================== */
.s-id { --fs: clamp(48px, min(8.3vw, 12.6svh), 150px); --lat-a: .026; }
.id-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.id-svg { position: relative; z-index: 1; }
.s-id.has-cv .id-lat { display: none; }
/* Arabic: a counterpart, not a caption */
.id-ar { font: 300 calc(var(--fs) * .56)/calc(var(--fs) * .9) var(--f-a); color: var(--ink-3); bottom: calc(100% - var(--dat) + 22px); opacity: 1; transition: none; }
.id-ar .aw { display: block; overflow: hidden; padding-bottom: .3em; margin-bottom: -.3em; }
.id-ar .aw > span { display: block; transform: translateY(135%); transform-origin: 100% 70%; transition: transform 1.15s var(--e-out); }
.id-ar .aw:nth-child(1) > span { transition-delay: 1.07s; } .id-ar .aw:nth-child(2) > span { transition-delay: 1.15s; }
.id-ar .aw:nth-child(3) > span { transition-delay: 1.23s; } .id-ar .aw:nth-child(4) > span { transition-delay: 1.31s; }
.s-id.is-built .id-ar .aw > span { transform: none; }
.id-sub-ar { color: var(--ink-3); transition: opacity 1.1s var(--e-std) 1.55s; }
/* the supporting line settles, then the pillars arrive one by one */
.id-under { opacity: 1; transform: none; transition: none; }
.id-sub { opacity: 0; transform: translateY(10px); transition: opacity .9s var(--e-out) 1.45s, transform 1s var(--e-out) 1.45s; }
.id-pillars li { opacity: 0; transform: translateY(10px); transition: opacity .8s var(--e-out), transform .9s var(--e-out); }
.id-pillars li:nth-child(1) { transition-delay: 1.62s; } .id-pillars li:nth-child(2) { transition-delay: 1.7s; } .id-pillars li:nth-child(3) { transition-delay: 1.78s; }
.s-id.is-built .id-sub, .s-id.is-built .id-pillars li { opacity: 1; transform: none; }
/* the lens: letters (English) and whole words (Arabic) magnify near the pointer once the reveal has finished */
.id-h .ch { display: inline-block; transform-origin: 50% 82%; }
.s-id.is-open .id-h .ln, .s-id.is-open .id-ar .aw { overflow: visible; }
/* the mark's pulse: a stronger scale ripple on touch, a quieter one when the mark breathes on its own */
@keyframes id-scale {
  0% { transform: none; }
  32% { transform: translate(var(--dx, 0), var(--dy, 0)) scale(.82); fill: #D9BC62; opacity: 1; }
  70% { transform: none; fill: var(--gold); opacity: var(--o); }
  100% { transform: none; }
}
@keyframes id-scale-q {
  0% { transform: none; }
  32% { transform: translate(calc(var(--dx, 0) * .6), calc(var(--dy, 0) * .6)) scale(.9); fill: #CDB05A; opacity: 1; }
  70% { transform: none; fill: var(--gold); opacity: var(--o); }
  100% { transform: none; }
}
.no-js .id-sub, .no-js .id-pillars li, .no-js .id-ar .aw > span { opacity: 1; transform: none; }
@media (max-width: 899px) {
  .s-id { --fs: clamp(42px, 12.4vw, 68px); --lat-a: .024; }
  /* on phones the Arabic echo returns as one line under the English headline */
  .id-ar { display: flex; flex-direction: row; flex-wrap: wrap; gap: 0 .32em; left: var(--m); right: auto; width: fit-content; max-width: calc(100% - 2 * var(--m)); bottom: auto; top: calc(var(--hd-h) + 22px + var(--fs) * 3.6 + 14px); font-size: calc(var(--fs) * .46); line-height: 1.3; }
  .id-ar .aw { padding-bottom: .25em; margin-bottom: -.25em; }
}
@media (prefers-reduced-motion: reduce) {
  .id-ar .aw > span, .id-sub, .id-pillars li, .id-sub-ar { transition: none; }
}
/* ONE MANAGEMENT STRUCTURE II (2026-10-21): two planes of the field drift at different rates as the section passes
   (depth), and a slow gold signal travels each 60° vector chain; signals pause off screen; none under reduced motion */
.org-field .of-far { transform: translateY(var(--pf, 0)); }
.org-field .of-near { transform: translateY(var(--pn, 0)); }
.org-field .of-sig { fill: none; stroke: rgba(212, 183, 94, .55); stroke-width: 1.2; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: .06 .94; stroke-dashoffset: 1; opacity: 0; animation: of-run var(--dur, 15s) linear var(--del, 0s) infinite; animation-play-state: paused; }
.org-field.in.is-live .of-sig { opacity: 1; animation-play-state: running; transition: opacity 1.6s var(--e-std) 1.2s; }
@keyframes of-run { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@media (max-width: 899px) { .org-field .of-sig { stroke: rgba(212, 183, 94, .42); } }
@media (prefers-reduced-motion: reduce) { .org-field .of-sig { display: none; } .org-field .of-far, .org-field .of-near { transform: none; } }
/* ==========================================================================
   TRADING TERRITORY (2026-10-21): the client's store photograph is the territory's plate, set into the right of the
   panel and dissolving into the dark on its reading side; no photo-on-photo. As the territory opens the plate settles;
   hover / focus pushes gently toward the aisle's vanishing point, and the pointer moves the camera a few pixels;
   "Explore Trading" pushes further, then the page opens out of this plate (views.js).
   ========================================================================== */
.t-tr .t-vis.t-vis-store { inset: 0 0 0 auto; top: 0; right: 0; width: 54%; aspect-ratio: auto; opacity: calc(.38 + .62 * var(--k, 1)); overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 40%); mask-image: linear-gradient(to right, transparent 0, #000 40%); }
.t-tr .t-vis.t-vis-store img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 56%; opacity: 1; filter: saturate(.82) contrast(1.04);
  transform-origin: 50% 56%; transform: translate(calc(var(--px, 0) * -9px), calc(var(--py, 0) * -6px)) scale(calc(1.06 - .04 * var(--k, 1) + .035 * var(--push, 0) + .05 * var(--go, 0)));
  transition: transform 1.6s var(--e-out), opacity .6s; }
.t-tr .t-vis.t-vis-store .t-shade { display: block; background: linear-gradient(to top, rgba(12, 13, 14, .88) 0%, rgba(12, 13, 14, .25) 34%, rgba(12, 13, 14, 0) 60%, rgba(12, 13, 14, .45)); }
.t-tr:hover, .t-tr:focus-within { --push: 1; }
.t-tr:has(.t-go:hover), .t-tr:has(.t-go:focus-visible) { --go: 1; }
.t-tr .t-more { max-width: min(560px, 54%); }
.t-tr .t-cap { right: clamp(20px, 2.4vw, 40px); top: 22px; }
.t-tr .t-geo { display: none; }   /* the photograph is this territory's anchor; the supply fan stays on the Business Structure row */
.t-tr .t-ar { width: fit-content; }   /* the Arabic stays in the text column, never over the plate */
@media (min-width: 900px) and (max-width: 1359px) {   /* the two-column ledger needs ~412px; here it reads as one column beside a narrower plate */
  .t-tr .t-vis.t-vis-store { width: 46%; }
  .t-tr .t-more { max-width: 60%; }
}
@media (min-width: 900px) and (max-width: 1199px) { .t-tr .ledger { grid-template-columns: 1fr; } .t-tr .ledger li { padding: 3px 0; } }
@media (max-width: 899px) {
  .t-tr .t-vis.t-vis-store { position: relative; inset: auto; width: auto; max-width: none; height: min(118vw, 520px); margin: 0 0 -96px; opacity: 1;
    -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%); mask-image: linear-gradient(to bottom, #000 62%, transparent 100%); }
  .t-tr .t-vis.t-vis-store img { transform: none; }
  .t-tr .t-more { max-width: none; }
}
@media (prefers-reduced-motion: reduce) { .t-tr .t-vis.t-vis-store img { transition: none; transform: none; } }
/* ==========================================================================
   MVS FIELD (2026-10-21, field.js): the organizational field, generalised for other surfaces
   ========================================================================== */
.mvs-field { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; opacity: 0;
  -webkit-mask-image: linear-gradient(120deg, #000 0 42%, transparent 58% 100%); mask-image: linear-gradient(120deg, #000 0 42%, transparent 58% 100%);
  -webkit-mask-size: 300% 100%; mask-size: 300% 100%; -webkit-mask-position: 100% 0; mask-position: 100% 0;
  transition: opacity 1.4s var(--e-std), -webkit-mask-position 2.6s var(--e-io), mask-position 2.6s var(--e-io); }
.mvs-field.in { opacity: 1; -webkit-mask-position: 0 0; mask-position: 0 0; }
.mvs-field.is-still { transition: none; }
.mvs-field svg { display: block; width: 100%; height: 100%; }
.mvs-field .of-l { fill: none; stroke: rgba(236, 231, 222, .05); stroke-width: 1; vector-effect: non-scaling-stroke; }
.mvs-field .of-g { fill: none; stroke: rgba(186, 150, 49, .24); stroke-width: 1; stroke-linejoin: miter; vector-effect: non-scaling-stroke; }
.mvs-field .of-p { fill: rgba(186, 150, 49, .14); } .mvs-field .of-pd { fill: rgba(186, 150, 49, .07); }
.mvs-field .of-far { transform: translateY(var(--pf, 0)); } .mvs-field .of-near { transform: translateY(var(--pn, 0)); }
.mvs-field .of-sig { fill: none; stroke: rgba(212, 183, 94, .55); stroke-width: 1.2; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: .06 .94; stroke-dashoffset: 1; opacity: 0; animation: of-run var(--dur, 15s) linear var(--del, 0s) infinite; animation-play-state: paused; }
.mvs-field.in.is-live .of-sig { opacity: 1; animation-play-state: running; transition: opacity 1.6s var(--e-std) 1.2s; }
@media (max-width: 899px) { .mvs-field .of-l { stroke: rgba(236, 231, 222, .04); } .mvs-field .of-g { stroke: rgba(186, 150, 49, .2); } .mvs-field .of-sig { stroke: rgba(212, 183, 94, .42); } }
@media (prefers-reduced-motion: reduce) { .mvs-field .of-sig { display: none; } .mvs-field .of-far, .mvs-field .of-near { transform: none; } }
/* ==========================================================================
   HERO III + READING LENS (2026-10-21)
   The mark leads; the English steps down; the Arabic is set as an equal (larger, brighter, same line pitch).
   The mark's signal layer and the field's local response: identity.js (Hero IV, below).
   ========================================================================== */
.s-id { --fs: clamp(44px, min(7.5vw, 11.6svh), 136px); }
.id-ar { font-size: calc(var(--fs) * .7); line-height: calc(var(--fs) * .9); color: var(--ink-2); }
.id-sub-ar { font-size: clamp(16px, 1.45vw, 22px); color: var(--ink-2); }
.id-sub { color: var(--ink-2); }
@media (max-width: 899px) { .s-id { --fs: clamp(40px, 11.6vw, 64px); } .id-ar { font-size: calc(var(--fs) * .5); line-height: 1.3; } }
/* the lens: pieces lift, enlarge and come into focus under the pointer */
.lz { display: inline-block; transform-origin: 50% 82%; will-change: auto; color: color-mix(in srgb, var(--lz-c, #fff) calc(var(--lz, 0) * var(--lz-a, 30%)), currentColor); }

/* ==========================================================================
   HERO IV (2026-10-22): the mark's signal, a quicker construction.
   The oversized triangle of light is gone. A pointer on the mark lights the plates themselves, scale by scale, on a
   canvas layer above them (.id-mk, identity.js), and every lit scale settles back into its plate in about a third of a
   second. The opening keeps its choreography but runs about a quarter quicker; the type follows the mark sooner.
   ========================================================================== */
.id-mk { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; display: block; pointer-events: none; }
.opening { animation: op-out .5s var(--e-std) 2.25s both; }
.op-stage { animation: op-stage .4s var(--e-std) 2s both; }
.op-word { animation: op-word .6s var(--e-out) 1.45s forwards; }
.op-meta { animation: op-in .45s var(--e-std) .25s forwards, op-fade .3s var(--e-std) 1.9s forwards; }
.op-count { animation: op-count 1.65s steps(100) .2s both; }
.id-h .ln:nth-child(1) > span { transition-delay: .62s; } .id-h .ln:nth-child(2) > span { transition-delay: .7s; }
.id-h .ln:nth-child(3) > span { transition-delay: .78s; } .id-h .ln:nth-child(4) > span { transition-delay: .86s; }
.id-ar .aw:nth-child(1) > span { transition-delay: .74s; } .id-ar .aw:nth-child(2) > span { transition-delay: .82s; }
.id-ar .aw:nth-child(3) > span { transition-delay: .9s; } .id-ar .aw:nth-child(4) > span { transition-delay: .98s; }
.id-sub { transition-delay: 1.1s, 1.1s; }
.id-sub-ar { transition-delay: 1.2s; }
.id-pillars li:nth-child(1) { transition-delay: 1.26s; } .id-pillars li:nth-child(2) { transition-delay: 1.34s; } .id-pillars li:nth-child(3) { transition-delay: 1.42s; }
/* after the opening the mark is already in place, so the type follows it straight away, as the veil lifts */
.s-id.from-op .id-h .ln:nth-child(1) > span { transition-delay: .42s; } .s-id.from-op .id-h .ln:nth-child(2) > span { transition-delay: .5s; }
.s-id.from-op .id-h .ln:nth-child(3) > span { transition-delay: .58s; } .s-id.from-op .id-h .ln:nth-child(4) > span { transition-delay: .66s; }
.s-id.from-op .id-ar .aw:nth-child(1) > span { transition-delay: .54s; } .s-id.from-op .id-ar .aw:nth-child(2) > span { transition-delay: .62s; }
.s-id.from-op .id-ar .aw:nth-child(3) > span { transition-delay: .7s; } .s-id.from-op .id-ar .aw:nth-child(4) > span { transition-delay: .78s; }
.s-id.from-op .id-sub { transition-delay: .9s, .9s; } .s-id.from-op .id-sub-ar { transition-delay: 1s; }
.s-id.from-op .id-pillars li:nth-child(1) { transition-delay: 1.06s; } .s-id.from-op .id-pillars li:nth-child(2) { transition-delay: 1.14s; } .s-id.from-op .id-pillars li:nth-child(3) { transition-delay: 1.22s; }
@media (prefers-reduced-motion: reduce) { .id-mk { display: none; } }

/* ==========================================================================
   CHAPTER 02 — INSIDE MVS, CINEMATIC INDEX (2026-10-22)
   Three zones around the datum: the chapter's label above the title (left), the film (centre), and an index (right)
   whose header carries the film's real running time and whose active chapter fills as it plays. Nothing here is
   decorative progress: every bar reads the film's currentTime. The scroll zoom (--a, --b, --c) is untouched; the new
   pieces leave with the title and the index exactly as the old ones did.
   ========================================================================== */
.h-lab { display: none; }   /* the label now leads the column, above the title */
.h-sub { font-size: clamp(18px, 1.6vw, 25px); color: var(--ink-2); }
@media (min-width: 760px) { .h-under { max-width: calc(var(--apc) - var(--apw) / 2 - 30px - var(--m)); } }   /* the line never runs into the page margin */
.h-kick { position: absolute; z-index: 3; right: calc(100% - var(--apc) + var(--apw) / 2 + 30px); top: calc(var(--hd-h) + clamp(28px, 8svh, 84px)); display: grid; justify-items: end; gap: 10px; text-align: right; color: var(--ink-3); animation: fade-up .9s var(--e-out) calc(var(--d0) + .15s) backwards; }
.h-kick-n { display: flex; gap: 6px; align-items: baseline; color: var(--ink-4); }
.h-kick-n .t-index { margin: 0; }
.h-kick-l { font: 500 11px/1 var(--f-d); font-stretch: 125%; letter-spacing: .2em; text-transform: uppercase; color: var(--ink); }
.h-kick-m { max-width: 24ch; color: var(--ink-3); }
/* a single hairline on the lattice's 60°, from the label toward the film's edge */
.h-kick::after { content: ""; position: absolute; right: -22px; top: -2px; width: 1px; height: 40px; background: linear-gradient(to bottom, var(--gold), rgba(186, 150, 49, 0)); transform: skewX(-30deg); transform-origin: 50% 0; }

.h-idx { position: absolute; z-index: 3; left: calc(var(--apc) + var(--apw) / 2 + 30px); bottom: calc(100% - var(--dat) + 20px); width: min(292px, calc(100% - var(--apc) - var(--apw) / 2 - 30px - var(--m))); }
.h-idx .h-chap { position: static; left: auto; bottom: auto; width: auto; animation: none; }
.h-idx-h { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; row-gap: 12px; padding-bottom: 14px; color: var(--ink-3); animation: fade-in .9s var(--e-std) calc(var(--d0) + .9s) backwards; }
.h-idx-t { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.h-idx-tc { color: var(--ink-4); font-variant-numeric: tabular-nums; white-space: nowrap; }
.h-idx-tc b { font-weight: 400; color: var(--gold); }
.h-idx-bar { grid-column: 1 / -1; position: relative; height: 1px; background: var(--line-2); overflow: hidden; }
.h-idx-bar i { position: absolute; inset: 0; background: var(--gold); transform-origin: 0 50%; transform: scaleX(var(--fp, 0)); transition: transform .3s linear; }
.h-idx .h-chap li { animation: fade-up .7s var(--e-out) calc(var(--d0) + .95s + var(--i, 0) * 45ms) backwards; }
.h-idx .h-chap button { position: relative; grid-template-columns: 30px minmax(0, 1fr) auto; padding: clamp(5px, 1.05svh, 10px) 0; font-size: 12px; letter-spacing: .02em; }
.h-idx .h-chap button::before { content: ""; position: absolute; left: -12px; top: 50%; width: 5px; height: 1px; background: var(--gold); opacity: 0; transform: translateX(-4px); transition: opacity .3s var(--e-std), transform .4s var(--e-out); }
.h-idx .h-chap button.is-on::before { opacity: 1; transform: none; }
.h-idx .h-chap button::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--gold-2); transform-origin: 0 50%; transform: scaleX(0); transition: transform .3s linear; }
.h-idx .h-chap button.is-on::after { transform: scaleX(var(--cp, 0)); }
.h-idx .h-chap button:focus-visible { outline: 1px solid var(--gold); outline-offset: 3px; }
.h-idx .h-chap button em { transition: color var(--t-micro); }
.h-idx .h-chap button.is-on em { color: var(--ink-3); }
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .s-hero .h-kick { translate: calc(var(--a) * -9vw) 0; opacity: calc(1 - var(--a) * 1.6); }
  .s-hero .h-idx { left: calc(var(--apc) + (68% - var(--apc)) * var(--b) + (var(--apw) + (34% - var(--apw)) * var(--b)) / 2 + 30px); opacity: clamp(0, (.2 - var(--b, 0)) * 8, 1); }
  .s-hero .h-idx .h-chap { opacity: 1; }
  .s-hero .is-vision .h-idx { visibility: hidden; }
}
@media (max-width: 1199px) { .h-idx-h { grid-template-columns: minmax(0, 1fr); row-gap: 8px; } }   /* narrower index: title, time, bar stack */
/* tablet: the index stays beside the film, its timecodes give way to the names */
@media (min-width: 760px) and (max-width: 899px) {
  .h-idx .h-chap { display: block; }
  .h-idx .h-chap button { grid-template-columns: 26px minmax(0, 1fr); }
  .h-idx .h-chap button em, .h-idx-tc { display: none; }
  .h-idx-t { white-space: nowrap; }
}
/* phone: title, label, then the index beside the film, both standing on the datum; the film keeps its height */
@media (max-width: 759px) {
  .h-kick { right: auto; left: var(--m); top: calc(var(--hd-h) + 26px + var(--fs) * 1.72 + 14px); justify-items: start; text-align: left; gap: 6px; }
  .h-kick::after { display: none; }
  .h-kick-n { display: none; }
  .s-hero .ap { top: calc(var(--hd-h) + 26px + var(--fs) * 1.72 + 76px); height: calc(var(--dat) - var(--hd-h) - 26px - var(--fs) * 1.72 - 76px); }
  .h-idx { left: var(--m); top: calc(var(--hd-h) + 26px + var(--fs) * 1.72 + 76px); bottom: calc(100% - var(--dat)); width: calc(var(--apc) - var(--apw) / 2 - var(--m) - 14px); display: flex; flex-direction: column; }
  .h-idx-h { padding-bottom: 0; }
  .h-idx-t, .h-idx-tc { display: none; }
  .h-idx .h-chap { display: flex; flex: 1; flex-direction: column; border-top: 0; }
  .h-idx .h-chap li { flex: 1; display: flex; }
  .h-idx .h-chap button { grid-template-columns: 24px minmax(0, 1fr); align-items: center; padding: 0; font-size: 11.5px; }
  .h-idx .h-chap button em { display: none; }
  .h-idx .h-chap button::before { display: none; }
}

/* ==========================================================================
   CHAPTER 02 — THE STORYBOARD STAGE (2026-10-22, third pass)
   The film moves toward the centre of the stage, and the chapter index becomes a storyboard: nine stills taken from
   the film itself, each one a chapter control, filling the right of the stage between the header and the datum. The
   website's own section number (02 / 08) stays with the title; the film's nine chapters live with the film. The
   expanded state is unchanged: the film still ends centred at 68% at 34% of the width, so the "Who we are" text keeps
   its column. On phones the film leads at full height beside a column of chapter controls of at least 44 px.
   ========================================================================== */
.h-chap .h-th { display: none; }
.s-hero .h-chap button .h-cap { display: contents; color: inherit; }
.s-hero .h-chap button.is-on .h-cap, .s-hero .h-chap button:hover .h-cap { color: inherit; }
@media (min-width: 1024px) {
  .s-hero { --apc: 52%; }
  .h-idx { top: calc(var(--hd-h) + clamp(18px, 4svh, 48px)); width: min(470px, calc(100% - var(--apc) - var(--apw) / 2 - 30px - var(--m))); display: flex; flex-direction: column; }
  .h-idx .h-chap { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: clamp(8px, 1.2svh, 14px) 10px; border-top: 0; }
  .h-idx .h-chap li { display: flex; min-height: 0; }
  .s-hero .h-idx .h-chap button { display: flex; flex-direction: column; align-items: stretch; gap: 7px; width: 100%; height: 100%; min-height: 0; padding: 0; border: 0; font-size: 11px; color: var(--ink-3); }
  .s-hero .h-idx .h-chap button .h-cap { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; overflow: hidden; }
  .s-hero .h-idx .h-chap button .h-cap em { margin-left: auto; }
  .h-idx .h-th { display: block; position: relative; flex: 1; min-height: 0; overflow: hidden; background: var(--ob-2); }
  .h-idx .h-th img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(.45) brightness(.58); transform: scale(1.02); transition: filter .5s var(--e-std), transform 1s var(--e-out); }
  .h-idx .h-th::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--line); transition: border-color .4s var(--e-std); pointer-events: none; }
  .h-idx .h-chap button:hover .h-th img, .h-idx .h-chap button:focus-visible .h-th img { filter: grayscale(.1) brightness(.86); transform: scale(1.05); }
  .h-idx .h-chap button.is-on .h-th img { filter: none; transform: none; }
  .h-idx .h-chap button.is-on .h-th::after { border-color: var(--gold); }
  .h-idx .h-chap button::before { display: none; }
  .h-idx .h-chap button::after { bottom: -5px; }
  .h-idx .h-chap button:focus-visible { outline-offset: 4px; }
}
@media (min-width: 1024px) and (max-height: 700px), (min-width: 1024px) and (max-width: 1279px) { .s-hero .h-idx .h-chap button .h-cap em { display: none; } }
/* phones: the film leads at the height the screen allows, its chapters in a column beside it */
@media (max-width: 759px) {
  .s-hero { --kb: calc(var(--hd-h) + 26px + var(--fs) * 1.72 + 66px); --fa: calc(max(100svh, 620px) - var(--kb) - 112px);
    --fw: min(calc(var(--fa) * .5625), calc(100vw - 2 * var(--m) - 140px)); --fh: calc(var(--fw) / .5625); --dat: calc(var(--kb) + var(--fh)); }
  .s-hero .ap { left: var(--m); top: var(--kb); width: var(--fw); height: var(--fh); }
  .h-idx { left: calc(var(--m) + var(--fw) + 12px); right: var(--m); width: auto; top: var(--kb); bottom: calc(100% - var(--dat)); }
  .s-hero .h-idx .h-chap button { display: flex; align-items: center; gap: 9px; min-height: 0; }   /* nine equal rows on the film's height: 41 px at 390 wide, 53 px at 430 */
  .h-idx .h-th { display: block; position: relative; flex: none; width: 32px; align-self: stretch; margin: 4px 0; overflow: hidden; background: var(--ob-2); }
  .h-idx .h-th img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; filter: brightness(.7); }
  .h-idx .h-chap button.is-on .h-th img { filter: none; }
  .h-idx .h-chap button.is-on .h-th { outline: 1px solid var(--gold); outline-offset: -1px; }
  .s-hero .h-idx .h-chap button .h-cap { display: flex; gap: 6px; align-items: baseline; min-width: 0; white-space: nowrap; overflow: hidden; font-size: 10.5px; }
  .s-hero .h-idx .h-chap button .h-cap em { display: none; }
}
@media (max-width: 400px) { .s-hero .h-idx .h-chap button .h-cap > span { display: none; } }   /* the still is the index on the narrowest phones */

/* ==========================================================================
   FINAL QUALITY PASS (2026-10-22): WCAG 2.2 AA target size (2.5.8) for controls that sat below 24 px tall.
   ========================================================================== */
.hd-search, .hd-menu, .film-toggle { min-height: 32px; }
.t-go { min-height: 24px; align-items: center; }
.org-dh { min-height: 24px; }
.pr-meta a { display: inline-block; padding: 5px 0; }
.pr-meta { opacity: 1; }   /* the inactive places stay quieter through colour, not opacity, so every line keeps 4.5:1 */
.pr-pl:not(.is-on) .pr-meta a { color: var(--ink-3); }
.pl-open { padding-top: 6px; }
.hd-link { min-width: 24px; text-align: center; }
.hd-search { min-width: 32px; justify-content: center; }

/* ==========================================================================
   CHAPTER 02 — FINAL COMPOSITION (2026-10-22, quality pass)
   Desktop: the stage stands taller (the datum at 77%) and the film a little wider, so the band under the datum is a
   caption line rather than an empty third of the screen. Tablet portrait gets its own stage: title and label above,
   the film at the height the screen allows, its nine stills in a column beside it (the phone logic, scaled up).
   ========================================================================== */
@media (min-width: 1024px) { .s-hero { --dat: 77%; --apw: clamp(250px, 22.5vw, 400px); } }
@media (min-width: 760px) and (max-width: 899px) {
  .s-hero { --kb: calc(var(--hd-h) + 30px + var(--fs) * 1.72 + 78px); --fa: calc(max(100svh, 620px) - var(--kb) - 120px);
    --fw: min(calc(var(--fa) * .5625), calc(100vw - 2 * var(--m) - 230px)); --fh: calc(var(--fw) / .5625); --dat: calc(var(--kb) + var(--fh)); }
  .s-hero .h-en { right: auto; left: var(--m); bottom: auto; top: calc(var(--hd-h) + 30px); text-align: left; }
  .s-hero .h-ar, .s-hero .h-sub-ar, .s-hero .h-cue { display: none; }
  .h-kick { right: auto; left: var(--m); top: calc(var(--hd-h) + 30px + var(--fs) * 1.72 + 16px); justify-items: start; text-align: left; gap: 6px; }
  .h-kick::after, .h-kick-n { display: none; }
  .s-hero .ap { left: var(--m); top: var(--kb); width: var(--fw); height: var(--fh); }
  .s-hero .h-under { right: auto; left: var(--m); align-items: flex-start; top: calc(var(--dat) + 20px); max-width: none; }
  .h-idx { left: calc(var(--m) + var(--fw) + 18px); right: var(--m); width: auto; top: var(--kb); bottom: calc(100% - var(--dat)); display: flex; flex-direction: column; }
  .h-idx-h { padding-bottom: 10px; }
  .h-idx .h-chap { display: flex; flex: 1; flex-direction: column; border-top: 0; }
  .h-idx .h-chap li { flex: 1; display: flex; }
  .s-hero .h-idx .h-chap button { display: flex; align-items: center; gap: 12px; min-height: 0; padding: 0; font-size: 12px; }
  .h-idx .h-th { display: block; position: relative; flex: none; width: 46px; align-self: stretch; margin: 4px 0; overflow: hidden; background: var(--ob-2); }
  .h-idx .h-th img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.7); }
  .h-idx .h-chap button.is-on .h-th img { filter: none; }
  .h-idx .h-chap button.is-on .h-th { outline: 1px solid var(--gold); outline-offset: -1px; }
  .s-hero .h-idx .h-chap button .h-cap { display: flex; gap: 8px; align-items: baseline; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; }
  .s-hero .h-idx .h-chap button .h-cap em { display: inline; margin-left: auto; }
  .h-idx .h-chap button::before { display: none; }
}

/* ==========================================================================
   HERO WITHOUT THE OPENING (2026-10-22, final pass): returning visitors, deep links and slow connections (where the
   opening is skipped, identity.js) get the same reveal in a shorter rhythm, so the message arrives sooner.
   ========================================================================== */
.s-id:not(.from-op) .id-h .ln:nth-child(1) > span { transition-delay: .2s; } .s-id:not(.from-op) .id-h .ln:nth-child(2) > span { transition-delay: .26s; }
.s-id:not(.from-op) .id-h .ln:nth-child(3) > span { transition-delay: .32s; } .s-id:not(.from-op) .id-h .ln:nth-child(4) > span { transition-delay: .38s; }
.s-id:not(.from-op) .id-ar .aw:nth-child(1) > span { transition-delay: .3s; } .s-id:not(.from-op) .id-ar .aw:nth-child(2) > span { transition-delay: .36s; }
.s-id:not(.from-op) .id-ar .aw:nth-child(3) > span { transition-delay: .42s; } .s-id:not(.from-op) .id-ar .aw:nth-child(4) > span { transition-delay: .48s; }
.s-id:not(.from-op) .id-sub { transition-delay: .45s, .45s; } .s-id:not(.from-op) .id-sub-ar { transition-delay: .55s; }
.s-id:not(.from-op) .id-pillars li:nth-child(1) { transition-delay: .6s; } .s-id:not(.from-op) .id-pillars li:nth-child(2) { transition-delay: .66s; } .s-id:not(.from-op) .id-pillars li:nth-child(3) { transition-delay: .72s; }
/* a late page: the veil lifts at once (a short fade) and the hero reveal follows without waiting for the opening */
.op-late { --d0: .12s; }
.op-late .opening { animation: op-out .4s var(--e-std) 0s both; }
/* ==========================================================================
   HERO V (2026-10-22, premium finishing): the mark is the one large object. The English and Arabic headlines become
   two-line editorial blocks standing on the datum either side of it, and the company's name arrives under the bar as a
   quiet signature, where the opening's wordmark stood. Order: mark, English, Arabic, signature, sub-lines, pillars.
   Narrow screens: the headline pair sits above a larger, centred mark (identity.js places the mark below the type).
   ========================================================================== */
.s-id { --fs2: clamp(40px, min(4.7vw, 7.8svh), 94px); }
.id-h { font-size: var(--fs2); line-height: .94; }
.id-h .ln { white-space: nowrap; }
.id-ar { font-size: calc(var(--fs2) * .72); line-height: calc(var(--fs2) * .98); }
.id-ar .aw { white-space: nowrap; }
.id-sig { position: absolute; z-index: 3; left: calc((var(--mark-l) + var(--mark-r)) / 2); top: calc(var(--mark-bot) + var(--mw, 300px) * .045); translate: -50% 0; margin: 0;
  font: 500 clamp(10px, calc(var(--mw, 300px) * .036), 16px)/1 var(--f-d); font-stretch: 125%; letter-spacing: .42em; padding-left: .42em; white-space: nowrap; color: var(--gold);
  opacity: 0; clip-path: inset(0 50% 0 50%); }
.s-id.is-built .id-sig { opacity: 1; clip-path: inset(0); }
.s-id .id-sig { transition: opacity .7s var(--e-std) .42s, clip-path 1.1s var(--e-out) .42s; }
.s-id.from-op .id-sig { transition-delay: .72s, .72s; }
.js .s-id:not(.is-built) .id-sig { letter-spacing: .62em; padding-left: .62em; }
.js .s-id.is-built:not(.is-still) .id-sig { transition: opacity .7s var(--e-std) .42s, clip-path 1.1s var(--e-out) .42s, letter-spacing 1.5s var(--e-out) .42s, padding-left 1.5s var(--e-out) .42s; }
.js .s-id.from-op.is-built .id-sig { transition-delay: .72s, .72s, .72s, .72s; }
.no-js .id-sig { opacity: 1; clip-path: none; }
@media (max-width: 899px) {
  .s-id { --fs2: clamp(34px, 9.4vw, 60px); --mx: 50; --my: 46; }
  .id-shade { background: radial-gradient(120% 80% at 50% 50%, rgba(12, 13, 14, 0) 30%, rgba(12, 13, 14, .82) 100%); }
  .id-h { font-size: var(--fs2); line-height: .94; top: calc(var(--hd-h) + 22px); }
  .id-ar { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 0; left: auto; right: var(--m); width: auto; max-width: none; bottom: auto; top: calc(var(--hd-h) + 22px);
    font-size: calc(var(--fs2) * .72); line-height: calc(var(--fs2) * .98); }
  .id-ar .aw { padding-bottom: .3em; margin-bottom: -.3em; }
  .id-under { top: calc(var(--mark-bot) + var(--mw, 300px) * .045 + 40px); }
  .id-sub-ar { display: block; left: auto; right: var(--m); top: calc(var(--mark-bot) + var(--mw, 300px) * .045 + 40px); text-align: right; }
  .id-pillars { flex-direction: row; gap: 4px 22px; }
}
@media (max-width: 599px) {
  .s-id { --my: 42; }
  .id-ar { flex-direction: row; flex-wrap: wrap; gap: 0 .3em; top: calc(var(--hd-h) + 22px + var(--fs2) * 1.88 + 12px); font-size: calc(var(--fs2) * .64); line-height: 1.3; }
  .id-ar .aw { padding-bottom: .25em; margin-bottom: -.25em; }
  .id-sub { margin-bottom: 34px; }
  .id-sub-ar { top: calc(var(--mark-bot) + var(--mw, 300px) * .045 + 40px + 32px); }
  .id-pillars { flex-direction: column; gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .s-id .id-sig, .js .s-id.is-built .id-sig { transition: none; }
}
/* ==========================================================================
   HERO VI (2026-10-22): the identity at rest, and a clearer answer to the pointer.
   identity.js: after the reveal, a 60° sheen crosses a selection of the mark's scales about every ten seconds, and the
   quiet upper corners carry an occasional lattice signal (desktop only). lens.js: the headline letters and Arabic words
   lift further under the pointer, and a gold hairline under each line lights where the pointer is. On touch, a tap on a
   headline sends one light along its lines. None of it runs under reduced motion.
   ========================================================================== */
.s-id .id-h .ln, .s-id .id-ar .aw { position: relative; }
.s-id .id-h .ln::after, .s-id .id-ar .aw::after { content: ""; position: absolute; left: 0; right: 0; bottom: .1em; height: 1px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(226, 196, 112, .95), rgba(226, 196, 112, 0)) no-repeat; background-size: 7em 1px; background-position: calc(var(--lx, -10em) - 3.5em) 0;
  opacity: var(--lo, 0); }
.s-id .id-ar .aw::after { bottom: .32em; }
.s-id .id-h.is-swept .ln::after, .s-id .id-ar.is-swept .aw::after { animation: id-sweep 1.15s var(--e-out) both; }
.s-id .id-h.is-swept .ln:nth-child(2)::after, .s-id .id-ar.is-swept .aw:nth-child(2)::after { animation-delay: .14s; }
.s-id .id-h.is-swept .ln > span, .s-id .id-ar.is-swept .aw > span { animation: id-warm 1.3s var(--e-std) both; }
.s-id .id-h.is-swept .ln:nth-child(2) > span, .s-id .id-ar.is-swept .aw:nth-child(2) > span { animation-delay: .14s; }
@keyframes id-sweep { 0% { opacity: 0; background-position: -7em 0; } 25% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; background-position: calc(100% + 7em) 0; } }
@keyframes id-warm { 0%, 100% { color: inherit; } 40% { color: #F2E2B0; } }
@media (prefers-reduced-motion: reduce) {
  .s-id .id-h .ln::after, .s-id .id-ar .aw::after { display: none; }
  .s-id .id-h.is-swept .ln > span, .s-id .id-ar.is-swept .aw > span { animation: none; }
}
/* ==========================================================================
   PROJECT FOOTPRINT on the home (2026-10-22): after Selected Work, a band that leads into #/footprint. The strip is
   filled from site-data by views.js; its photographs load lazily.
   ========================================================================== */
.s-fp { position: relative; padding: clamp(70px, 13svh, 150px) var(--m); border-top: 1px solid var(--line); background: var(--ob); }
.fp-h { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(30px, 5vw, 90px); align-items: end; }
.fp-h-t { display: grid; gap: 22px; align-content: end; }
.fp-h-t .t-label { margin: 0; color: var(--ink-2); }
.fp-h-title { margin: 0; font: 300 clamp(40px, 4.6vw, 82px)/.92 var(--f-d); font-stretch: 72%; letter-spacing: -0.025em; color: var(--ink); text-wrap: balance; }
.fp-h-n { color: var(--gold); }
.fp-h-t .t-body { margin: 0; max-width: 40ch; color: var(--ink-2); }
.fp-h-go { justify-self: start; display: inline-flex; gap: 10px; align-items: center; min-height: 44px; font: 500 11px var(--f-d); font-stretch: 125%; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); border-bottom: 1px solid var(--gold); transition: color .25s; }
.fp-h-go:hover, .fp-h-go:focus-visible { color: var(--gold); }
.fp-h-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0 0 26px; list-style: none; }
.fp-h-strip li { display: grid; min-width: 0; }
.fp-h-strip li:nth-child(even) { transform: translateY(26px); }
.fp-h-v { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--ob-2); }
.fp-h-v img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.75) brightness(.86); }
.fp-h-a:hover .fp-h-v img, .fp-h-a:focus-visible .fp-h-v img { filter: none; }
.fp-h-strip .t-meta { color: var(--ink-3); }
@media (max-width: 899px) {
  .fp-h { grid-template-columns: minmax(0, 1fr); }
  .fp-h-strip li:nth-child(n+5) { display: none; }
}
@media (max-width: 560px) { .fp-h-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .fp-h-v img { transition: none; } }
/* ==========================================================================
   SELECTED WORK, ONE CARD SYSTEM (2026-10-22). Every card shares the same axes, top to bottom:
   number · pillar · period · link | (space) | one media frame of one height | title | location | role | scope.
   The frame height is common to all seven (--fh), so titles, roles and scope lines sit on the same lines from card to
   card; the title never overlaps the image; long titles wrap, balanced, at one size for all. The scope line shows the
   first three validated items and how many more the project page holds.
   ========================================================================== */
.s-work { --fh: auto; }
.s-work .pl { row-gap: 12px; }
.s-work .pl > .pl-top { grid-row: 1; }
.s-work .pl.pl > .pl-ph, .s-work .pl.pl > .pl-dwg, .s-work .pl.pl > .pl-hit { grid-row: 3; grid-column: 1; }   /* outranks the older per-type rows */
.s-work .pl > .pl-name { grid-row: 4; }
.s-work .pl > .pl-loc { grid-row: 5; }
.s-work .pl > .pl-role { grid-row: 6; }
.s-work .pl > .pl-sc { grid-row: 7; }
.s-work .pl-name { margin: 6px 0 0; padding-left: 0; font: 300 clamp(34px, 3.5vw, 60px)/.95 var(--f-d); font-stretch: 72%; letter-spacing: -0.022em; text-shadow: none; text-wrap: balance; color: var(--ink); }
.s-work .pl-loc { margin: 0; padding-left: 0; color: var(--ink-3); }
.s-work .pl-role { margin: 0; padding-left: 0; font: 400 15px/1.45 var(--f-d); font-stretch: 94%; color: var(--ink); }
.s-work .pl-sc { display: flex; flex-wrap: nowrap; overflow: hidden; white-space: nowrap; align-items: baseline; gap: 4px 0; margin: 0; padding: 10px 0 0; border-top: 1px solid var(--line); color: var(--ink-3); }
.s-work .pl-sc b { margin-right: 14px; font-weight: 400; color: var(--gold); }
.s-work .pl-sc span + span::before { content: "·"; margin: 0 9px; color: var(--ink-4); }
.s-work .pl-sc i { margin-left: 12px; font-style: normal; color: var(--ink-2); }
.s-work .pl-sc span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.s-work .pl-sc b, .s-work .pl-sc i { flex: none; }
.s-work .pl.is-photo .pl-ph { align-self: end; width: 100%; height: var(--fh); aspect-ratio: auto; max-height: none; }
.s-work .pl.is-photo .pl-ph img { object-position: 50% 55%; }
.s-work .pl.is-photo .pl-dwg { align-self: start; }
.s-work .pl-hit { align-self: end; height: var(--fh); }
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .s-work { --fh: clamp(170px, min(30.4vw, calc(83svh - 300px)), 600px); }
  .s-work .pl { grid-template-rows: auto minmax(0, 1fr) var(--fh) auto auto auto auto; }
  .s-work .pl.is-dip .pl-ph, .s-work .pl.is-dip .pl-dwg { grid-row: 3; height: var(--fh); align-self: end; margin-top: 0; }
  .s-work .pl.is-dip .pl-ph img { max-height: calc(var(--fh) - 70px); }
}
@media (min-width: 1680px) and (prefers-reduced-motion: no-preference) {
  .s-work { --fh: clamp(170px, min(517px, calc(83svh - 300px)), 600px); }
}
/* phones, tablets and reduced motion: cards sit in a swipe track; the frame is one ratio for all, and the title keeps
   room for two lines so the role and scope lines stay level from card to card */
@media (max-width: 899px), (prefers-reduced-motion: reduce) {
  .s-work .pl { grid-template-rows: auto auto auto auto auto auto auto; }
  .s-work .pl.is-photo .pl-ph { height: auto; aspect-ratio: 16 / 10; }
  .s-work .pl-hit { height: auto; }
  .s-work .pl-name { display: flex; align-items: flex-end; min-height: 1.9em; font-size: clamp(30px, 8.6vw, 44px); }
  .s-work .pl.is-dip .pl-ph, .s-work .pl.is-dip .pl-dwg { grid-row: auto; }
  .s-work .pl.is-dip .pl-dwg { grid-row: 2; }
  .s-work .pl.is-dip .pl-ph { grid-row: 3; }
}
@media (max-width: 599px) { .s-work .pl.is-photo .pl-dwg { width: 40%; padding: 8px 8px 8px; } .s-work .pl.is-photo .pl-tb { display: none; } .s-work .pl.is-photo .pl-dwg .dwg { max-height: 64px; } }
/* ==========================================================================
   CLIENTS & PARTNERS (2026-10-22). After the Project Footprint: the organisations named in the company profiles.
   Left, the statement and the three groups (the same counted bands as the Footprint strata); right, one group at a time.
   Logos sit on light plates in their own colours, each plate cut at 60° at one corner (the mark's own angle); a fine
   gold line draws along the cut on hover. The plates arrive once, in a short stagger. The MVS field runs behind.
   ========================================================================== */
.s-net { position: relative; padding: clamp(80px, 14svh, 160px) var(--m); border-top: 1px solid var(--line); background: var(--ob); overflow: hidden; }
.s-net .mvs-field { z-index: 0; }
.net-in { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); grid-template-rows: auto 1fr; gap: 34px clamp(34px, 5vw, 96px); align-items: start; }
.net-h { grid-column: 1; grid-row: 1; display: grid; gap: 20px; }
.net-h .t-label { margin: 0; color: var(--ink-2); }
.net-title { margin: 0; font-size: clamp(40px, 4.4vw, 80px); line-height: .92; text-wrap: balance; }
.net-lead { margin: 0; max-width: 38ch; }
.net-nav { grid-column: 1; grid-row: 2; align-self: start; display: grid; border-top: 1px solid var(--line-2); }
.net-b { position: relative; display: grid; grid-template-columns: 64px 1fr; align-items: baseline; gap: 12px; min-height: 52px; padding: 12px 0; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--ink-3); text-align: left; cursor: pointer; transition: color .3s var(--e-std); }
.net-b::before { content: ""; position: absolute; left: 0; top: -1px; height: 2px; width: 100%; background: var(--gold); transform: scaleX(0); transform-origin: 0 50%; transition: transform .5s var(--e-out); }
.net-b.is-on::before { transform: none; }
.net-b:hover, .net-b:focus-visible, .net-b.is-on { color: var(--ink); }
.net-b-n { font: 300 clamp(28px, 2.4vw, 40px)/1 var(--f-d); font-stretch: 72%; color: var(--ink); }
.net-b.is-on .net-b-n { color: var(--gold); }
.net-b-l { font: 500 11px/1.3 var(--f-d); font-stretch: 125%; letter-spacing: .14em; text-transform: uppercase; }
.net-p { grid-column: 2; grid-row: 1 / span 2; min-width: 0; }
.net-p[hidden] { display: none; }
.net-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 22px 14px; margin: 0; padding: 0; list-style: none; }
.net-t { display: grid; gap: 9px; min-width: 0; }
.net-plate { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 3 / 2; padding: 12%; background: #FFFFFF; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 12.7px) 100%, 0 100%); transition: transform .5s var(--e-out), box-shadow .5s var(--e-out); }
.net-plate img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.net-plate::after { content: ""; position: absolute; right: 0; bottom: 0; width: 26px; height: 26px; background: linear-gradient(120deg, transparent 47%, var(--gold) 48%, var(--gold) 52%, transparent 53%); opacity: 0; transition: opacity .4s var(--e-std); }
.net-n { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 400 11px/1.3 var(--f-m); color: var(--ink-3); transition: color .3s var(--e-std); }
.net-t:hover .net-plate { transform: translateY(-3px); }
.net-t:hover .net-plate::after { opacity: 1; }
.net-t:hover .net-n { color: var(--ink); }
/* the first arrival: plates rise in a short stagger (at most about 0.7 s in all) */
.js .s-net:not(.in) .net-t { opacity: 0; transform: translateY(16px); }
.net-t { transition: opacity .7s var(--e-out) calc(min(var(--i, 0), 28) * 24ms), transform .9s var(--e-out) calc(min(var(--i, 0), 28) * 24ms); }
.net-pts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px clamp(24px, 3vw, 48px); margin: 0; padding: 0; list-style: none; }
.net-pt { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 18px; align-items: center; padding-top: 18px; border-top: 1px solid var(--line-2); }
.net-plate.is-lg { aspect-ratio: 16 / 9; padding: 14%; }
.net-pt-t { display: grid; gap: 6px; }
.net-pt-t b { font: 400 20px/1.2 var(--f-d); font-stretch: 94%; color: var(--ink); }
.net-pt-d { font: 300 14px/1.5 var(--f-t); color: var(--ink-2); }
.net-brs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 3vw, 48px); margin: 0; padding: 0; list-style: none; }
.net-br { display: grid; gap: 4px; padding: 18px 0; border-top: 1px solid var(--line); }
.net-br b { font: 300 clamp(24px, 2.2vw, 34px)/1.05 var(--f-d); font-stretch: 76%; color: var(--ink); }
.net-note { margin: 26px 0 0; max-width: 80ch; color: var(--ink-3); }
.net-note a { color: var(--ink); border-bottom: 1px solid var(--gold); white-space: nowrap; }
.net-note a:hover, .net-note a:focus-visible { color: var(--gold); }
@media (max-width: 1279px) { .net-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 1023px) {
  .net-in { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .net-h, .net-nav, .net-p { grid-column: 1; grid-row: auto; }
  .net-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 0; }
  .net-b { grid-template-columns: 1fr; gap: 6px; padding: 14px 12px 14px 0; border-top: 1px solid var(--line-2); }
  .net-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .net-pts { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .net-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 10px; }
  .net-pt { grid-template-columns: minmax(0, 1fr); }
  .net-brs { grid-template-columns: minmax(0, 1fr); }
  .net-b-l { letter-spacing: .08em; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .net-t, .net-plate, .net-b::before { transition: none; }
  .js .s-net:not(.in) .net-t { opacity: 1; transform: none; }
}
.net-tail { grid-column: span 6; display: flex; align-items: flex-end; min-width: 0; }
.net-tail .net-note { margin: 0; padding: 0 0 26px; border-top: 1px solid var(--line); padding-top: 12px; width: 100%; }
/* slow connection (id-early, set by the head script when identity.js is late): the veil lifts and, on phones and
   tablets, the bilingual headline shows at once in its final place (its position does not depend on the mark there);
   the sub-lines, signature and pillars keep waiting for the mark, so nothing moves when it is built */
.id-early .opening { animation: op-out .35s var(--e-std) 0s both; }
/* the constrained path (no-opening: phones, narrow tablets, Save-Data): 523 facets each running their own transitions cost
   13 ms of style and layerizing on every frame. The mark rises from its base as one piece instead, so the frames stay light;
   the gold lattice and the shimmer run as before on their canvases. */
.no-opening .id-plates path { opacity: 1; transform: none; transition: none; }
.no-opening .id-base { opacity: 1; transition: none; }
.no-opening .s-id .id-svg { transition: clip-path 1.25s var(--e-out) .08s; }
.no-opening .s-id:not(.is-built) .id-svg { clip-path: inset(100% 0 0 0); }
.no-opening .s-id.is-built .id-svg { clip-path: inset(0); }
.no-opening .s-id.is-still .id-svg { transition: none; clip-path: none; }
@media (max-width: 899px) {
  .id-early .s-id .id-h .ln > span, .id-early .s-id .id-ar .aw > span { transform: none; transition: none; }
  /* the two lines flow as one text block, so the headline paints as one element (no mask to reveal on this path) */
  .id-early .s-id .id-h .ln, .id-early .s-id .id-h .ln > span { display: inline; overflow: visible; }
  .id-early .s-id .id-h .ln + .ln::before { content: "\A"; white-space: pre; }
}
/* a late page (id-quick): the type is placed from the mark's geometry and shown at once, before the mark is built */
.s-id.id-quick .id-h .ln > span, .s-id.id-quick .id-ar .aw > span { transform: none; transition: none; }
.s-id.id-quick .id-sub, .s-id.id-quick .id-pillars li { opacity: 1; transform: none; transition: none; }
.s-id.id-quick .id-sub-ar, .s-id.id-quick .id-ar { opacity: 1; transition: none; }
.js .s-id.id-quick .id-sig { opacity: 1; clip-path: inset(0); letter-spacing: .42em; padding-left: .42em; transition: none; }
@media (max-width: 899px) { .s-work .pl-sc { flex-wrap: wrap; white-space: normal; overflow: visible; row-gap: 6px; } .s-work .pl-sc span { overflow: visible; text-overflow: clip; } }
@media (max-width: 899px) { .s-work .pl-sc { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; row-gap: 4px; } .s-work .pl-sc b { grid-row: 1 / span 4; margin: 0; } .s-work .pl-sc span { grid-column: 2; } .s-work .pl-sc span + span::before { content: none; } .s-work .pl-sc i { grid-column: 2; margin: 0; } }
/* phones and tablets: the Sindalah card takes the same frame as the others (photograph full width, drawing as the inset) */
@media (max-width: 899px), (prefers-reduced-motion: reduce) {
  .s-work .pl.pl.is-dip > .pl-ph { grid-row: 3; position: relative; width: 100%; height: auto; aspect-ratio: 16 / 10; margin: 0; padding: 0; display: block; background: var(--ob-2); border: 0; overflow: hidden; }
  .s-work .pl.is-dip .pl-ph img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; }
  .s-work .pl.is-dip .pl-ph figcaption { position: absolute; z-index: 1; left: 12px; bottom: 10px; max-width: calc(100% - 24px); margin: 0; color: var(--ink-2); text-shadow: 0 0 10px rgba(12, 13, 14, .9); }
  .s-work .pl.pl.is-dip > .pl-dwg { grid-row: 3; z-index: 3; align-self: start; justify-self: end; width: 40%; height: auto; margin: 12px 12px 0 0; padding: 8px; background: rgba(12, 13, 14, .9); border-color: var(--line-2); }
  .s-work .pl.is-dip .pl-dwg .dwg { max-height: 64px; height: auto; }
  .s-work .pl.is-dip .pl-tb { display: none; }
}
/* ==========================================================================
   SAFE AREAS (2026-10-22). The viewport uses viewport-fit=cover, so the page reaches under the notch, the rounded
   corners and the home indicator. The side margin never goes inside the left/right insets (landscape phones), the
   header clears the top inset (standalone and landscape), and bottom-anchored lines clear the home indicator.
   Insets are 0 everywhere else, so desktop and portrait browser layouts are unchanged.
   ========================================================================== */
:root { --sa-t: env(safe-area-inset-top, 0px); --sa-r: env(safe-area-inset-right, 0px); --sa-b: env(safe-area-inset-bottom, 0px); --sa-l: env(safe-area-inset-left, 0px); }
:root { --m: max(clamp(20px, 4.45vw, 64px), calc(var(--sa-l) + 12px), calc(var(--sa-r) + 12px)); }
/* the header height includes the top inset, so every rule that clears the header (hero lines, mega menus, views) clears the notch too */
:root { --hd-h: calc(76px + var(--sa-t)); }
@media (max-width: 759px) { :root { --hd-h: calc(62px + var(--sa-t)); } }
.hd { padding-top: var(--sa-t); }
.hd-bar { height: calc(var(--hd-h) - var(--sa-t)); }
/* 320 px phones: the opening's meta row keeps the name and the counter; the place line is in the hero */
@media (max-width: 359px) { .op-meta span:last-child { display: none; } }
/* 320 px phones: the English sub-line takes two lines, so its Arabic echo and the pillar list step down by one */
@media (max-width: 359px) { .id-sub { margin-bottom: 60px; } .id-sub-ar { top: calc(var(--mark-bot) + var(--mw, 300px) * .045 + 40px + 58px); } }
/* short phones: the hero's company line would sit on the pillar list, and the footer carries it */
@media (max-width: 599px) and (max-height: 760px) { .id-meta { display: none; } }
.id-meta { bottom: calc(30px + var(--sa-b)); }
.id-cue { bottom: calc(26px + var(--sa-b)); }
.ft { padding-bottom: calc(var(--m) + var(--sa-b)); }
.ov-in { padding-bottom: calc(72px + var(--sa-b)); padding-top: calc(28px + var(--sa-t)); }
.sl-rail { left: max(8px, calc(var(--sa-l) + 4px), calc(var(--m) / 2 - 12px)); }
/* ==========================================================================
   IMAGE FOCUS (2026-10-22). One hover language for photograph frames (views.js focusHover): the image alone moves
   closer inside its fixed frame and follows the pointer; a gold datum with a 60° leg draws in at the frame's corner.
   Keyboard focus takes the same step, centred. Touch and reduced motion: no hover.
   ========================================================================== */
.fx-f { position: relative; overflow: hidden; }
.fx-f img { transition: scale .95s var(--e-out), transform .9s var(--e-out), filter .5s var(--e-std); }
.fx-f.is-f img { scale: var(--hs, 1.14); transition-duration: .75s, .9s, .5s; }
:focus-visible > .fx-f img { scale: 1.1; }
.fx-f::after { content: ""; position: absolute; right: 12px; bottom: 12px; z-index: 2; width: 66px; height: 24px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 66 24'%3E%3Cpath d='M9 23.5H65.5L52 .6' fill='none' stroke='%23D4B75E' stroke-width='1'/%3E%3Cpath d='M0 24 3.6 17.8 7.2 24Z' fill='%23D4B75E'/%3E%3C/svg%3E") right bottom / 100% 100% no-repeat; filter: drop-shadow(0 0 3px rgba(0, 0, 0, .6));
  opacity: 0; clip-path: inset(0 0 0 100%); transition: opacity .35s var(--e-std), clip-path .8s var(--e-out); }
.fx-f.is-f::after, :focus-visible > .fx-f::after { opacity: 1; clip-path: inset(0 0 0 0); transition-delay: .12s; }
.fp-h-v.fx-f::after, .fp-r-v.fx-f::after { right: 8px; bottom: 8px; width: 44px; height: 16px; }
@media (prefers-reduced-motion: reduce) { .fx-f img, .fx-f::after { transition: none; } }
/* Project Footprint, home band: each picture is a way into its project. The pictures arrive on a 60° wipe (the slant is
   57.7% of the frame's height; the frames are 4:5), one after another, and their names follow. */
.s-fp { isolation: isolate; }
.fp-h-a { display: grid; gap: 8px; align-content: start; color: inherit; }
.fp-h-c { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.45; transition: color .3s var(--e-std); }
.fp-h-a:hover .fp-h-c, .fp-h-a:focus-visible .fp-h-c { color: var(--ink); }
.fp-h-a:focus-visible { outline: 1px solid var(--gold); outline-offset: 5px; }
.fp-h-v { clip-path: polygon(0 0, 172.2% 0, 100% 100%, 0 100%); transition: clip-path 1.25s var(--e-io) calc(var(--si, 0) * 80ms + 60ms); }
.js .fp-h-strip:not(.in) .fp-h-v { clip-path: polygon(0 0, 0 0, -72.2% 100%, 0 100%); }
.fp-h-c { transition: color .3s var(--e-std), opacity .8s var(--e-out) calc(var(--si, 0) * 80ms + .55s), transform .9s var(--e-out) calc(var(--si, 0) * 80ms + .55s); }
.js .fp-h-strip:not(.in) .fp-h-c { opacity: 0; transform: translateY(8px); }
.fp-h-field { z-index: -1; }
@media (prefers-reduced-motion: reduce) { .fp-h-v, .fp-h-c { transition: none; } .js .fp-h-strip:not(.in) .fp-h-v { clip-path: none; } .js .fp-h-strip:not(.in) .fp-h-c { opacity: 1; transform: none; } }
/* the MVS field: whole plates that light now and then (field.js o.blink), one at a time, only while on screen */
.mvs-field .of-b { fill: rgba(212, 183, 94, .42); opacity: 0; animation: of-blink var(--dur, 14s) var(--e-io) var(--del, 0s) infinite; animation-play-state: paused; }
.mvs-field.in.is-live .of-b { animation-play-state: running; }
@keyframes of-blink { 0%, 84%, 100% { opacity: 0; } 90% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .mvs-field .of-b { display: none; } }

/* ==========================================================================
   Corporate identity in the hero (Phase 1 final correction, 2026-11-01).
   The approved cover identity of the three corporate portfolios: the full English name in Archivo Condensed, ivory;
   a gold hairline; the official Arabic legal name beneath it in IBM Plex Sans Arabic Light, set to the right. It replaces
   the small mono line and keeps the .id-meta box, so identity.js still fits the composition above it.
   ========================================================================== */
.id-co { display: block; width: max-content; max-width: calc(100% - 2 * var(--m)); color: var(--ink); opacity: 0; transition: opacity 1.2s var(--e-std) 1.4s; }
.s-id.is-built .id-co, .s-id.is-open .id-co, .no-js .id-co, .id-early .id-co { opacity: 1; }
.id-co-en { margin: 0; padding-bottom: 9px; border-bottom: 1px solid var(--gold); font: 400 clamp(20px, 1.8vw, 30px)/1.1 var(--f-d); font-stretch: 75%; letter-spacing: .004em; color: var(--ink); white-space: nowrap; }
.id-co-b { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; margin-top: 8px; }
.id-co-ar { margin: 0; font: 300 clamp(15px, 1.3vw, 21px)/1.45 var(--f-a); color: var(--ink-2); white-space: nowrap; }
.id-co-loc { color: var(--ink-3); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .id-co { opacity: 1; transition: none; } }
@media (max-width: 599px) and (max-height: 760px) { .id-meta.id-co { display: block; } .s-id { min-height: 790px; } }
@media (max-width: 380px) { .id-co-en { font-size: 19px; } .id-co-ar { font-size: 14.5px; } .id-co-b { gap: 10px; } }

/* gold-line field, stronger presence (2026-11-01 owner request): the quiet lattice steps up so the gold signals read against it */
.s-id { --lat-a: .036; }
@media (max-width: 899px) { .s-id { --lat-a: .032; } }
/* contact: the hand-off is stated before sending (publication pass 2026-11-01) */
.c-how { margin: 10px 0 0; color: var(--ink-3); }
.c-how a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
/* the mark is the approved cover artwork: each facet keeps its own tone at full strength; the flat master beneath closes the seams */
.id-plates path { --o: 1; stroke: none; shape-rendering: geometricPrecision; }
.id-base { fill: #BA9631; opacity: 0; transition: opacity .8s var(--e-out) 1.1s; }
.s-id.is-built .id-base { opacity: 1; }
.s-id.is-still .id-base, .s-id.from-op .id-base, .no-js .id-base { transition: none; opacity: 1; }