/* Sentinel website — Operator (green) design system. Round 4 full build.
   Tokens and visual language follow the Round 3 Operator mock-up (10 Oct 2026). */
@property --scan { syntax: "<percentage>"; inherits: true; initial-value: 56%; }

:root {
  --bg: #0B0D0E; --bg-2: #101417; --panel: #13181B; --panel-2: #181E22;
  --line: rgba(232,236,230,.12); --line-2: rgba(232,236,230,.24);
  --text: #E8ECE6; --soft: #C5CCC6; --muted: #A3ABA4;
  --accent: #3EE57E; --accent-hi: #7DF0A4; --accent-rgb: 62,229,126; --on-accent: #0B0D0E;
  --danger: #FF8A7A;
  --display: "Chakra Petch", "Arial Narrow", sans-serif;
  --sans: "Barlow", "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --max: 1440px; --gutter: clamp(20px, 4vw, 56px); --header-h: 72px; --cut: 12px;
  --focus: var(--accent-hi);
  --grade: grayscale(.82) sepia(.42) hue-rotate(62deg) saturate(1.45) contrast(1.12) brightness(.8);
  --tile-gap: 8px;
  /* Channel and surface tokens (v0.3): every colour below :root reads from these, so a theme only overrides tokens. */
  --bg-rgb: 11,13,14; --text-rgb: 232,236,230; --accent-hi-rgb: 125,240,164; --deeper-rgb: 5,6,7; --deepest-rgb: 3,6,4;
  --deep: #07090A; --deeper: #050607; --deepest: #030604; --field: #0A0C0D; --panel-0: #0E1214; --bar: #15191C;
  --dark-hover: #22282C; --sprocket: #1D2326; --on-accent-soft: #0B1A10;
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 18px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
img, svg, video { max-width: 100%; }
img { display: block; height: auto; }
a { color: inherit; text-underline-offset: 4px; text-decoration-thickness: 1px; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
::selection { background: var(--accent); color: var(--on-accent); }
[hidden] { display: none !important; }
.site-footer ul, .site-nav__list, .eb, .cards, .project-grid, .route, .principles, .netmap__legend ol, .svc-index ol, .breadcrumb ol { list-style: none; margin: 0; padding: 0; }
.no-js [data-js-only] { display: none !important; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.container { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.skip-link { position: absolute; left: 12px; top: -100px; z-index: 1000; padding: 12px 18px; background: var(--accent); color: var(--on-accent); font-family: var(--mono); font-weight: 700; text-decoration: none; }
.skip-link:focus { top: 12px; }

/* ---------- Review bar ---------- */
.review-bar { background: var(--bar); border-bottom: 1px solid var(--line); font-size: 13.5px; line-height: 1.45; color: var(--soft); }
.review-bar .container { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding-block: 9px; }
.review-bar strong { font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-hi); }
.review-bar__note { flex: 1 1 420px; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(var(--bg-rgb),.92); border-bottom: 1px solid var(--line); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.site-header__inner { display: flex; align-items: center; gap: 20px; min-height: var(--header-h); }
/* Logo v1.0 SVGs keep their clear space (¼ of the canvas height on every side). The negative inline margin lets that
   empty zone overlap the gutter, so the emblem aligns with the content edge while nothing intrudes on the clear space. */
.brand { --logo-h: 64px; display: inline-flex; align-items: center; flex-shrink: 0; margin-inline: calc(var(--logo-h) / -4); }
.brand img { display: block; height: var(--logo-h); width: auto; }
@media (max-width: 480px) { .brand { --logo-h: 56px; } }
.hdr-clock { display: none; margin-left: 28px; margin-right: auto; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px; letter-spacing: .1em; color: var(--muted); white-space: nowrap; }
.hdr-clock span { color: var(--text); font-variant-numeric: tabular-nums; }
.js .hdr-clock { display: inline-flex; }
.site-nav { margin-left: auto; }
.js .hdr-clock + .site-nav { margin-left: 0; }
.site-nav__list { display: flex; align-items: center; gap: 4px; }
.site-nav__list > li > a:not(.btn) { display: inline-flex; align-items: baseline; gap: 6px; padding: 10px 12px; font-family: var(--mono); font-size: 12.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; color: var(--soft); }
.site-nav__list > li > a:not(.btn):hover { color: #fff; }
.site-nav__list > li > a[aria-current] { color: #fff; box-shadow: inset 0 -2px 0 var(--accent); }
.nav-i { color: var(--accent-hi); font-size: 10px; }
.site-nav__cta { margin-left: 12px; }
.nav-toggle { display: none; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; margin-left: auto; background: transparent; border: 1px solid var(--line-2); font-family: var(--mono); font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.nav-toggle__bars { position: relative; width: 18px; height: 12px; }
.nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: currentColor; transition: transform .2s ease, top .2s ease; }
.nav-toggle__bars::before { top: 1px; } .nav-toggle__bars::after { top: 9px; }
.nav-open .nav-toggle__bars::before { top: 5px; transform: rotate(45deg); }
.nav-open .nav-toggle__bars::after { top: 5px; transform: rotate(-45deg); }
.hdr-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none; }
.hdr-progress span { display: block; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left center; }
/* Round 11: six menu items (Investors added). The clock needs the room of a 1440 px screen; between 1024 and 1279 px the
   menu numbers are dropped so the full call to action still fits on one line. */
@media (max-width: 1439px) { .js .hdr-clock { display: none; } .js .hdr-clock + .site-nav { margin-left: auto; } }
@media (min-width: 1024px) and (max-width: 1279px) {
  .site-nav__list > li > a:not(.btn) { padding: 10px 7px; letter-spacing: .08em; }
  .site-nav__list > li > a:not(.btn) .nav-i { display: none; }
  .site-nav__cta { margin-left: 8px; }
}
@media (max-width: 1023px) {
  .js .nav-toggle { display: inline-flex; }
  .js .site-header { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(var(--bg-rgb),.97); }
  .js .site-nav { position: fixed; inset: var(--nav-top, 72px) 0 0 0; z-index: 49; display: none; overflow-y: auto; background: var(--bg); border-top: 1px solid var(--line); padding: 8px var(--gutter) 40px; }
  .js.nav-open .site-nav { display: block; }
  .js.nav-open body { overflow: hidden; }
  .js .site-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .js .site-nav__list > li { border-bottom: 1px solid var(--line); }
  .js .site-nav__list > li.site-nav__cta { border: 0; margin: 24px 0 0; }
  .js .site-nav__list > li > a:not(.btn) { display: flex; padding: 18px 0; font-family: var(--display); font-size: 28px; font-weight: 600; letter-spacing: .02em; color: var(--text); }
  .js .site-nav__list > li > a[aria-current] { box-shadow: none; color: var(--accent-hi); }
  .js .nav-i { font-family: var(--mono); font-size: 12px; margin-right: 12px; }
  .js .site-nav .btn--header { width: 100%; min-height: 56px; font-size: 13px; }
  .no-js .site-header__inner { flex-wrap: wrap; padding-block: 12px; }
  .no-js .site-nav__list { flex-wrap: wrap; }
}

/* ---------- Buttons & links ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; padding: 0 24px; font-family: var(--mono); font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; text-align: center; border: 0; cursor: pointer;
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut))); transition: background-color .2s ease, color .2s ease, box-shadow .2s ease; }
.btn--primary { background: var(--accent); color: var(--on-accent); }
.btn--primary:hover { background: var(--accent-hi); }
.btn--outline { position: relative; clip-path: none; background: rgba(var(--text-rgb),.03); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); }
.btn--outline::before { content: ""; position: absolute; top: -1px; left: -1px; width: 10px; height: 10px; border-top: 2px solid var(--accent); border-left: 2px solid var(--accent); }
.btn--outline:hover { box-shadow: inset 0 0 0 1px var(--accent); color: var(--accent-hi); }
.btn--dark { background: var(--bg); color: #fff; }
.btn--dark:hover { background: var(--dark-hover); }
.btn--header { min-height: 42px; padding: 0 16px; font-size: 12px; white-space: nowrap; background: var(--accent); color: var(--on-accent); --cut: 9px; }
.btn--header:hover { background: var(--accent-hi); }
.btn--small { min-height: 44px; padding: 0 16px; font-size: 12px; }
.btn[disabled] { opacity: .6; cursor: progress; }
.link-cmd { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-hi); text-decoration: none; }
.link-cmd:hover { text-decoration: underline; }
.arw { position: relative; display: inline-block; width: 18px; height: 10px; flex-shrink: 0; transition: transform .2s ease; }
.arw::before { content: ""; position: absolute; left: 0; right: 1px; top: 50%; height: 1.5px; margin-top: -.75px; background: currentColor; }
.arw::after { content: ""; position: absolute; right: 1px; top: 50%; width: 7px; height: 7px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: translateY(-50%) rotate(45deg); }
a:hover .arw, a:focus-visible .arw, button:hover .arw { transform: translateX(4px); }

/* ---------- Section furniture ---------- */
.section { position: relative; padding-block: clamp(72px, 8.5vw, 124px); border-top: 1px solid var(--line); }
.sec-label { display: flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.sec-label__n { color: var(--accent-hi); }
.h2 { font-family: var(--display); font-weight: 700; font-size: clamp(32px, 4.2vw, 64px); line-height: 1; text-transform: uppercase; max-width: 18ch; }
.h2--m { font-size: clamp(28px, 3.2vw, 48px); }
.lead { font-size: clamp(19px, 1.5vw, 22px); line-height: 1.5; color: var(--text); }
.muted { color: var(--muted); }
.stack { display: grid; gap: 20px; align-content: start; justify-items: start; }
.grid-12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px; }
.notice { display: flex; align-items: baseline; gap: 14px; margin-top: 32px; font-size: 15px; line-height: 1.5; color: var(--muted); max-width: 90ch; }
.notice__tag { flex-shrink: 0; padding: 3px 7px; background: var(--accent); color: var(--on-accent); font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.notice--panel { margin: 0 0 36px; padding: 18px 22px; background: var(--panel); border-left: 3px solid var(--accent); max-width: none; font-size: 16px; }
.status-chip { display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px; font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; background: rgba(var(--bg-rgb),.78); border: 1px solid rgba(var(--accent-rgb),.5); color: var(--accent-hi); }
.status-chip::before { content: ""; width: 6px; height: 6px; background: var(--accent); }

/* ---------- HUD frame for images ---------- */
.hud { position: relative; overflow: hidden; background: var(--deeper); isolation: isolate; margin: 0; }
.hud > picture, .hud > img, .hud > picture > img, .hud > svg.il { position: absolute; inset: 0; width: 100%; height: 100%; }
.hud img { width: 100%; height: 100%; object-fit: cover; }
.hud::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;  /* Round 13a W32: scanline overlay removed */
  background: linear-gradient(180deg, rgba(0,0,0,.30), transparent 22%, transparent 76%, rgba(0,0,0,.40)), radial-gradient(ellipse 85% 85% at 50% 50%, transparent 62%, rgba(0,0,0,.32)); }
.hud--clean::after { background: radial-gradient(ellipse 85% 85% at 50% 50%, transparent 60%, rgba(0,0,0,.35)); }
.hud__br { position: absolute; inset: 10px; pointer-events: none; z-index: 3; }
.hud__br i { position: absolute; width: 16px; height: 16px; border: 0 solid rgba(var(--text-rgb),.7); }
.hud__br i:nth-child(1) { top: 0; left: 0; border-top-width: 2px; border-left-width: 2px; border-color: var(--accent); }
.hud__br i:nth-child(2) { top: 0; right: 0; border-top-width: 2px; border-right-width: 2px; }
.hud__br i:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 2px; border-left-width: 2px; }
.hud__br i:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px; border-color: var(--accent); }
.hud__lbl { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--text); text-shadow: 0 1px 2px rgba(0,0,0,.9); white-space: nowrap; }
.hud__lbl b { color: var(--accent-hi); font-weight: 700; }
.hud__tl { top: 18px; left: 22px; } .hud__tr { top: 18px; right: 22px; }
.hud__bl { bottom: 18px; left: 22px; color: rgba(var(--text-rgb),.8); } .hud__brl { bottom: 18px; right: 22px; color: rgba(var(--text-rgb),.8); }
.rec::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #FF4D3D; box-shadow: 0 0 8px #FF4D3D; }
@keyframes blink { to { visibility: hidden; } }
.tc { font-variant-numeric: tabular-nums; }
/* Round 13a W30: colour photographs by default; the grade is only a short transition as an image enters the view. */
.grade img { filter: none; transition: filter .9s ease, transform 1.2s cubic-bezier(.2,.7,.2,1); }
.js .reveal:not(.is-in) .grade img { filter: var(--grade); }
/* Round 13a W33: Ken Burns loop removed (less constant motion). */
.media-pending { position: absolute; z-index: 4; left: 22px; bottom: 18px; }
figcaption.cap { margin-top: 10px; font-size: 14px; line-height: 1.45; color: var(--muted); }

/* ---------- Home hero A · monitor wall ---------- */
.hero { position: relative; display: flex; flex-direction: column; min-height: max(660px, calc(100svh - 108px)); overflow: hidden;
  background: radial-gradient(ellipse 60% 70% at 78% 45%, rgba(var(--accent-rgb),.10), transparent 70%), var(--bg); }
.hero__grid { position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 75% 80% at 62% 45%, #000 25%, transparent 80%); mask-image: radial-gradient(ellipse 75% 80% at 62% 45%, #000 25%, transparent 80%); }
.hero--wall::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, var(--bg) 0, rgba(var(--bg-rgb),.94) 30%, rgba(var(--bg-rgb),.25) 52%, transparent 70%); }
.hero__xh { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s ease; z-index: 1; }
.has-pointer .hero__xh { opacity: 1; }
.xh-v, .xh-h { position: absolute; background: rgba(var(--accent-rgb),.32); }
.xh-v { top: 0; bottom: 0; width: 1px; left: var(--cx, 50%); }
.xh-h { left: 0; right: 0; height: 1px; top: var(--cy, 50%); }
.wall { position: absolute; z-index: 0; top: 26px; bottom: 72px; right: var(--gutter); width: min(58vw, 900px); display: grid; gap: var(--tile-gap);
  grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; grid-template-areas: "b a a" "c a a" "d a a";
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 20%); mask-image: linear-gradient(90deg, transparent 0, #000 20%); }
.wall .tile:nth-child(1) { grid-area: a; } .wall .tile:nth-child(2) { grid-area: b; } .wall .tile:nth-child(3) { grid-area: c; } .wall .tile:nth-child(4) { grid-area: d; }
.tile { border: 1px solid rgba(var(--accent-rgb),.22); }
.tile .hud__lbl { font-size: 10.5px; letter-spacing: .1em; }
.tile .hud__tl { top: 12px; left: 14px; } .tile .hud__tr { top: 12px; right: 14px; } .tile .hud__bl { bottom: 12px; left: 14px; } .tile .hud__brl { bottom: 12px; right: 14px; }
.tile .hud__br { inset: 6px; } .tile .hud__br i { width: 11px; height: 11px; }
.tile--main { border-color: rgba(var(--accent-rgb),.45); }
.radar canvas { width: 100%; height: 100%; display: block; }
.hero__inner { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; justify-content: center; padding-block: 72px 96px; }
.hero--wall .hero__inner { max-width: min(46vw, 720px); margin-left: 0; }
.eb { display: flex; flex-wrap: wrap; gap: 8px 26px; font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--soft); }
.eb__item { display: inline-flex; gap: 8px; }
.eb__i { color: var(--accent-hi); }
.hero__title { margin-top: 30px; font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: clamp(34px, 4.5vw, 78px); line-height: .96; text-shadow: 0 0 28px rgba(var(--bg-rgb),.9), 0 0 3px rgba(var(--bg-rgb),.95); }
.hero__title .ln { position: relative; display: block; }
.hero__title .ln--accent { color: var(--accent); }
.js .hero__title .ln::after { content: ""; position: absolute; inset: 0 0 .1em; background: var(--accent); transform: scaleX(0); transform-origin: left center; animation: wipe 1.1s cubic-bezier(.7,0,.2,1) both; pointer-events: none; }
.js .hero__title .ln > span { animation: show 1.1s step-end both; }
.js .hero__title .ln:nth-child(2)::after, .js .hero__title .ln:nth-child(2) > span { animation-delay: .18s; }
@keyframes wipe { 0% { transform: scaleX(0); transform-origin: left center; } 45% { transform: scaleX(1); transform-origin: left center; } 46% { transform-origin: right center; } 100% { transform: scaleX(0); transform-origin: right center; } }
@keyframes show { 0% { opacity: 0; } 46% { opacity: 1; } }
.hero__bottom { margin-top: 36px; display: grid; grid-template-columns: minmax(0, 600px); gap: 30px; }
.hero__intro { font-size: clamp(18px, 1.4vw, 21px); line-height: 1.55; color: var(--soft); max-width: 56ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__hud { position: relative; z-index: 2; border-top: 1px solid var(--line); background: rgba(var(--bg-rgb),.72); }
.hero__hud-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 36px; min-height: 48px; padding-block: 10px; padding-right: 190px; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.hero__hud-inner span span { color: var(--text); }

/* Motion toggle */
.motion-toggle { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 14px; background: rgba(var(--bg-rgb),.85); border: 1px solid var(--line-2); color: var(--text); font-family: var(--mono); font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.motion-toggle:hover { border-color: var(--accent); }
.motion-toggle__i { display: inline-flex; gap: 3px; width: 12px; height: 12px; align-items: stretch; }
.motion-toggle__i::before, .motion-toggle__i::after { content: ""; width: 4px; background: currentColor; }
.motion-toggle.is-paused .motion-toggle__i { gap: 0; }
.motion-toggle.is-paused .motion-toggle__i::before { width: 0; height: 0; background: none; border-left: 11px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.motion-toggle.is-paused .motion-toggle__i::after { display: none; }
.no-js .motion-toggle { display: none; }
.motion-toggle--hero { position: absolute; z-index: 3; right: var(--gutter); bottom: 4px; }
.motion-toggle--float { position: absolute; z-index: 6; right: var(--gutter); bottom: 20px; }

/* Round 13a W33: the services ticker was removed. */

/* ---------- Home: briefing ---------- */
.brief__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px; }
.brief__grid > .sec-label { grid-column: 1 / -1; }
.brief__head { grid-column: 1 / 7; }
.brief__body { grid-column: 7 / 13; display: grid; gap: 20px; align-content: start; }
.brief__body p:not(.lead) { color: var(--muted); }
.brief__body .btn { justify-self: start; margin-top: 8px; }
.readouts { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 48px; }
.readout { position: relative; border-top: 1px solid var(--line-2); padding-top: 18px; }
.readout::before { content: ""; position: absolute; top: -1px; left: 0; width: 48px; height: 2px; background: var(--accent); }
.readout dt { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.readout dd { display: block; margin-top: 6px; font-family: var(--display); font-weight: 600; font-size: clamp(56px, 7vw, 112px); line-height: 1; font-variant-numeric: tabular-nums; }

/* ---------- Modules (service pillars) ---------- */
.sec-bar { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 32px; padding-bottom: 20px; margin-bottom: 40px; border-bottom: 1px solid var(--line); }
.sec-title { display: flex; align-items: baseline; gap: 14px; font-family: var(--display); font-weight: 700; font-size: clamp(26px, 2.4vw, 34px); text-transform: uppercase; }
.sec-title .sec-label__n { font-family: var(--mono); font-size: 13px; letter-spacing: .14em; }
.modules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.module { position: relative; display: flex; flex-direction: column; padding: 0 28px 34px; background: linear-gradient(180deg, rgba(var(--text-rgb),.04), rgba(var(--text-rgb),.01)); border: 1px solid var(--line); overflow: hidden; color: inherit; text-decoration: none; transition: border-color .3s ease, background-color .3s ease; }
.module::after { content: ""; position: absolute; left: 0; right: 0; top: -45%; height: 45%; background: linear-gradient(180deg, transparent, rgba(var(--accent-rgb),.14), transparent); opacity: 0; pointer-events: none; z-index: 6; }
.module:hover { border-color: var(--line-2); background-color: rgba(var(--accent-rgb),.03); }
.module:hover::after { opacity: 1; animation: scanline 1.3s cubic-bezier(.4,0,.2,1) 1; }
@keyframes scanline { from { top: -45%; } to { top: 100%; } }
.module__frame { position: absolute; inset: -1px; pointer-events: none; z-index: 5; }
.module__frame i { position: absolute; width: 16px; height: 16px; border: 0 solid var(--accent); }
.module__frame i:nth-child(1) { top: 0; left: 0; border-top-width: 2px; border-left-width: 2px; }
.module__frame i:nth-child(2) { top: 0; right: 0; border-top-width: 2px; border-right-width: 2px; }
.module__frame i:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 2px; border-left-width: 2px; }
.module__frame i:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px; }
.module__media { position: relative; margin: 0 -28px 24px; aspect-ratio: 16 / 10; }
.module__media > .hud { position: absolute; inset: 0; }
.module__id { position: absolute; z-index: 4; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; padding: 16px 28px; font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .14em; color: var(--soft); text-shadow: 0 1px 2px #000; }
.module__state { display: inline-flex; align-items: center; gap: 8px; color: var(--accent-hi); }
.module__state::before { content: ""; width: 6px; height: 6px; background: var(--accent); }
.module__title { margin-top: 18px; font-family: var(--display); font-weight: 600; font-size: clamp(22px, 2vw, 28px); line-height: 1.08; text-transform: uppercase; }
.module__text { margin-top: 14px; color: var(--muted); font-size: 17px; }
.module__cta { margin-top: auto; padding-top: 22px; }

/* ---------- Field-log reel ---------- */
.reel-sec { padding-block: clamp(56px, 6vw, 88px); border-top: 1px solid var(--line); overflow: hidden; }
.reel-sec__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 32px; margin-bottom: 28px; }
.reel-sec__title { font-family: var(--display); font-weight: 700; font-size: clamp(24px, 2.6vw, 40px); text-transform: uppercase; line-height: 1; }
.reel-sec__title span { color: var(--accent); }
.reel { position: relative; background: var(--deeper); border-block: 1px solid var(--line); padding: 26px var(--gutter); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-color: var(--line-2) transparent; }
.reel::before, .reel::after { content: ""; position: absolute; left: 0; right: 0; height: 12px; pointer-events: none; background: radial-gradient(circle at 9px 6px, var(--sprocket) 3.5px, transparent 4px) 0 0 / 26px 12px repeat-x; }
.reel::before { top: 7px; } .reel::after { bottom: 7px; }
.reel__track { display: flex; gap: 14px; width: max-content; }
.reel__run { display: flex; gap: 14px; }
@keyframes reel { to { transform: translateX(-50%); } }
.frame { flex: none; width: clamp(240px, 26vw, 400px); scroll-snap-align: start; }
.frame .hud { aspect-ratio: 3 / 2; }
.frame__cap { display: grid; gap: 4px; margin-top: 10px; }
.frame__cap b { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-hi); }
.frame__cap span { font-size: 15px; line-height: 1.4; color: var(--soft); }

/* ---------- Cards ---------- */
.files__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px 32px; align-items: end; }
.files__head > .sec-label { grid-column: 1 / -1; }
.files__head .h2 { grid-column: 1 / 8; }
.files__intro { grid-column: 8 / 13; display: grid; gap: 20px; justify-items: start; color: var(--muted); }
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 56px; }
.card__link, .project-card__link { position: relative; display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; background: var(--panel); border: 1px solid var(--line); transition: border-color .25s ease; }
.card__link:hover, .project-card__link:hover { border-color: var(--accent); }
.card__media { overflow: hidden; }
.card__media .hud { aspect-ratio: 16 / 10; }
.project-card__link .hud { aspect-ratio: 3 / 2; border-bottom: 1px solid var(--line); }
.card__link:hover .hud img, .project-card__link:hover .hud img { transform: scale(1.04); }
.card__link .hud::before, .project-card__link .hud::before { content: ""; position: absolute; z-index: 4; left: 0; right: 0; top: -40%; height: 40%; pointer-events: none; opacity: 0; background: linear-gradient(180deg, transparent, rgba(var(--accent-rgb),.25), transparent); }
.card__link:hover .hud::before, .project-card__link:hover .hud::before { opacity: 1; animation: scanline 1.2s cubic-bezier(.4,0,.2,1) 1; }
.card__body, .project-card__body { padding: 24px 26px 28px; display: flex; flex-direction: column; flex: 1; }
.card__meta { display: flex; align-items: baseline; gap: 6px 12px; font-size: 15px; line-height: 1.4; color: var(--soft); }
.card__file { flex: none; font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .12em; color: var(--accent-hi); }
.card__title { margin-top: 14px; font-family: var(--display); font-weight: 600; font-size: clamp(22px, 2vw, 28px); line-height: 1.1; text-transform: uppercase; }
.project-card__body .card__title { font-size: 22px; }
.card__text { margin-top: 10px; color: var(--muted); font-size: 17px; }
.project-card__body .card__text { font-size: 16px; }
.card__cta { display: inline-flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 22px; font-family: var(--mono); font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-hi); }

/* ---------- Montage (communications) ---------- */
.montage-sec__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px; align-items: center; }
.montage-sec__text { grid-column: 1 / 6; display: grid; gap: 20px; align-content: start; justify-items: start; }
.montage-sec__text p { color: var(--muted); }
.montage-sec .h2 { font-size: clamp(30px, 3.1vw, 48px); }
.montage { grid-column: 6 / 13; position: relative; height: clamp(420px, 40vw, 600px); }
.montage > * { position: absolute; box-shadow: 0 30px 60px rgba(0,0,0,.55); }
.montage .m1 { left: 0; top: 6%; width: 56%; height: 58%; }
.montage .m2 { position: absolute; right: 0; top: 0; width: 40%; height: 64%; border: 1px solid rgba(var(--accent-rgb),.35); background: var(--deep); }
.montage .m3 { left: 18%; bottom: 0; width: 54%; height: 40%; }
.montage .m1 > .hud, .montage .m3 > .hud, .montage .m2 > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.montage__stamp { position: absolute; z-index: 6; right: 4%; bottom: 10%; padding: 10px 14px; border: 2px solid var(--accent); color: var(--accent-hi); font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .16em; transform: rotate(-4deg); background: rgba(var(--bg-rgb),.8); box-shadow: none; }

/* ---------- Approach route + plan/live compare ---------- */
.approach__h { margin-top: 24px; }
.compare { margin-top: 56px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px 32px; align-items: end; }
.compare .scan { grid-column: 1 / 10; aspect-ratio: 16 / 8; border: 1px solid rgba(var(--accent-rgb),.35); }
.compare__side { grid-column: 10 / 13; display: grid; gap: 14px; font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.compare__side b { display: block; color: var(--accent-hi); font-size: 13px; margin-bottom: 4px; }
.compare__side p { border-top: 1px solid var(--line-2); padding-top: 12px; }
.route { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin-top: 72px; padding-top: 48px; }
.route::before, .route::after { content: ""; position: absolute; top: 8px; left: 0; right: 0; height: 2px; background: var(--line-2); }
.route::after { background: var(--accent); transform: scaleX(var(--p, 0)); transform-origin: left center; box-shadow: 0 0 16px rgba(var(--accent-rgb),.6); }
.no-js .route::after, .reduce-motion .route::after { transform: none; }
.route__step { position: relative; }
.route__node { position: absolute; top: -48px; left: 0; width: 18px; height: 18px; background: var(--bg); border: 2px solid var(--line-2); transform: rotate(45deg); transition: background-color .3s ease, border-color .3s ease; z-index: 1; }
.route__step.is-active .route__node, .reduce-motion .route__node, .no-js .route__node { background: var(--accent); border-color: var(--accent); }
.route__wp { font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .16em; color: var(--accent-hi); }
.route__title { margin-top: 10px; font-family: var(--display); font-weight: 600; font-size: clamp(21px, 1.8vw, 25px); line-height: 1.12; text-transform: uppercase; }
.route__step p { margin-top: 10px; color: var(--muted); font-size: 17px; }

/* Scan transition (plan -> live) */
.scan { position: relative; overflow: hidden; background: var(--deepest); --scan: 56%; }
.scan__a, .scan__b { position: absolute; inset: 0; }
.scan__a img, .scan__b img, .scan__a picture, .scan__b picture { width: 100%; height: 100%; object-fit: cover; display: block; }
.scan__a { background: var(--deepest); }
.scan__a::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: screen; background-image: linear-gradient(rgba(var(--accent-rgb),.10) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--accent-rgb),.10) 1px, transparent 1px); background-size: 40px 40px; }
.scan__a .bp { filter: url(#op-blueprint); }
.scan__a .render { filter: saturate(.25) contrast(1.05) brightness(.95) sepia(.3) hue-rotate(60deg); }
.scan__b { clip-path: inset(0 0 0 var(--scan)); }
.scan__b .soft { filter: saturate(.72) contrast(1.06) brightness(.86); }
.scan__line { position: absolute; z-index: 3; top: 0; bottom: 0; left: var(--scan); width: 2px; margin-left: -1px; background: var(--accent); box-shadow: 0 0 22px 3px rgba(var(--accent-rgb),.65); pointer-events: none; }
.scan__line::before { content: ""; position: absolute; top: 0; bottom: 0; right: 2px; width: 90px; background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb),.16)); }
.scan__tag { position: absolute; z-index: 4; top: 18px; padding: 5px 9px; font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.scan__tag--a { left: 18px; color: var(--accent-hi); background: rgba(var(--deepest-rgb),.8); border: 1px solid rgba(var(--accent-rgb),.5); }
.scan__tag--b { right: 18px; color: var(--on-accent); background: var(--accent); }
.scan__chip { position: absolute; z-index: 4; top: var(--chip-y, 30%); left: var(--scan); transform: translate(-50%, -50%); padding: 5px 9px; white-space: nowrap; font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--on-accent); background: var(--accent); pointer-events: none; }
.scan--intro { animation: scanintro 2.4s cubic-bezier(.4,0,.2,1) 1 both; }  /* Round 13a W33: plays once, on first view */
@keyframes scanintro { from { --scan: 100%; } to { --scan: 56%; } }
.scan__range { position: absolute; inset: 0; z-index: 6; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.scan__range:focus-visible ~ .scan__line { outline: 3px solid var(--focus); outline-offset: 4px; }
.scan.is-user { animation: none; }

/* ---------- Network map ---------- */
.netmap__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px; align-items: center; }
.netmap__legend { grid-column: 1 / 5; }
.netmap__legend .h2 { font-size: clamp(26px, 2.4vw, 38px); margin: 18px 0 26px; }
.netmap__legend ol { border-top: 1px solid var(--line); }
.netmap__legend li { display: grid; grid-template-columns: 40px 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 16px; color: var(--soft); }
.netmap__legend li > span { font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--accent-hi); letter-spacing: .1em; padding-top: 3px; }
.netmap__legend li strong { display: block; font-family: var(--display); font-weight: 600; font-size: 19px; text-transform: uppercase; color: var(--text); letter-spacing: .02em; }
.netmap__map { grid-column: 5 / 13; position: relative; }
.map { width: 100%; height: auto; display: block; overflow: visible; }
.nm-grat { stroke: rgba(var(--text-rgb),.08); stroke-width: 1; }
.nm-grat-l { fill: rgba(var(--text-rgb),.4); font: 600 10px var(--mono); letter-spacing: .1em; }
.nm-land { fill: rgba(var(--accent-rgb),.05); stroke: rgba(var(--accent-rgb),.75); stroke-width: 1.6; stroke-linejoin: round; }
.nm-land-glow { fill: none; stroke: rgba(var(--accent-rgb),.25); stroke-width: 8; filter: blur(6px); }
.nm-link { stroke: rgba(var(--accent-rgb),.55); stroke-width: 1.2; stroke-dasharray: 4 5; fill: none; }
.nm-link--far { stroke: rgba(var(--text-rgb),.45); }
@keyframes dash { to { stroke-dashoffset: -400; } }
.nm-pt { fill: var(--accent); }
.nm-ring { fill: none; stroke: var(--accent); stroke-width: 1.4; opacity: .55; }
.nm-pin { --d: 0s; }
.nm-pin .nm-ring { animation-delay: inherit; }
@keyframes ping { from { transform: scale(.4); opacity: .9; } to { transform: scale(2.6); opacity: 0; } }
.nm-hub { fill: var(--bg); stroke: var(--accent); stroke-width: 2; }
.nm-l { fill: var(--text); font: 700 12px var(--mono); letter-spacing: .12em; }
.nm-s { fill: rgba(var(--text-rgb),.62); font: 600 10px var(--mono); letter-spacing: .1em; }
.nm-far { fill: var(--accent-hi); font: 700 11px var(--mono); letter-spacing: .14em; }
.nm-l, .nm-s, .nm-far { paint-order: stroke; stroke: var(--bg); stroke-width: 4px; stroke-linejoin: round; }
.map--compact .nm-l { font-size: 15px; }

/* ---------- Closing CTA ---------- */
.closing { position: relative; overflow: hidden; background: var(--accent); color: var(--on-accent); }
.closing__stripes { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(-45deg, rgba(var(--bg-rgb),.07) 0 2px, transparent 2px 16px); }
.closing__wrap { display: grid; grid-template-columns: 1.1fr .9fr; min-height: 480px; }
.closing__wrap--solo { grid-template-columns: 1fr; min-height: 0; }
.closing__wrap--solo .closing__inner { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); column-gap: clamp(32px, 5vw, 96px); align-items: end; padding-right: 0; }
.closing__wrap--solo .closing__tag { grid-column: 1 / -1; }
.closing__inner { position: relative; display: grid; gap: 24px; align-content: center; padding-block: clamp(72px, 8vw, 120px); padding-right: 48px; }
.closing__tag { font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.closing__title { font-family: var(--display); font-weight: 700; font-size: clamp(40px, 6vw, 96px); line-height: .95; text-transform: uppercase; max-width: 14ch; }
.closing__side { display: grid; gap: 22px; justify-items: start; max-width: 56ch; }
.closing__side p { font-size: 19px; line-height: 1.5; color: var(--on-accent-soft); font-weight: 500; }
.closing a:focus-visible, .closing button:focus-visible { outline-color: var(--bg); }
.closing__photo { position: relative; min-height: 360px; }
.closing__photo .hud { position: absolute; inset: 0; }
.closing__photo img { filter: grayscale(1) contrast(1.15) brightness(.9); }
.closing__photo .hud::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--accent); mix-blend-mode: multiply; opacity: .9; }
.attribution { font-size: 15px; color: var(--on-accent-soft); max-width: 80ch; }

/* ---------- Footer ---------- */
.site-footer { background: var(--deep); border-top: 1px solid var(--line); padding: 64px 0 32px; font-size: 16px; }
.footer-sig { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-hi); margin-bottom: 40px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1.2fr 1fr; gap: 40px; }
/* Full horizontal lockup from 64 px emblem height (logo usage guide), so MANAGEMENT · DUBAI stays legible. */
.footer-brand img { --logo-h: 128px; display: block; height: var(--logo-h); width: auto; max-width: none; margin: calc(var(--logo-h) / -4); }
.footer-brand p { margin-top: 18px; color: var(--muted); max-width: 42ch; }
.footer-h { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; }
.footer-col li { margin-bottom: 10px; }
.footer-col a { color: var(--text); text-decoration: none; }
.footer-col a:hover { color: var(--accent-hi); text-decoration: underline; }
.footer-col p { color: var(--soft); margin-bottom: 12px; }
.pending { font-size: 14px; color: var(--muted) !important; }
.footer-contact { font-size: 15px; }
.footer-contact span { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--soft); }
.footer-contact a { overflow-wrap: break-word; }
.pending span { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--soft); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }

/* ---------- Page hero (inner pages) ---------- */
.page-hero { position: relative; overflow: hidden; padding-block: clamp(72px, 9vw, 130px); background: radial-gradient(ellipse 50% 80% at 85% 50%, rgba(var(--accent-rgb),.10), transparent 70%), var(--bg); }
.page-hero__radar, .page-hero__art { position: absolute; top: 50%; right: max(-4vw, -80px); width: min(620px, 50vw); aspect-ratio: 1; transform: translateY(-50%); pointer-events: none; }
.page-hero__art { width: min(720px, 52vw); aspect-ratio: auto; opacity: .9; }
.page-hero__inner { position: relative; z-index: 2; }
.page-hero__title { margin-top: 26px; font-family: var(--display); font-weight: 700; font-size: clamp(40px, 6.4vw, 104px); line-height: .95; text-transform: uppercase; max-width: 13ch; text-shadow: 0 0 28px rgba(var(--bg-rgb),.9); }
.page-hero__intro { margin-top: 28px; max-width: 58ch; font-size: clamp(18px, 1.4vw, 21px); color: var(--soft); }

/* ---------- Projects page ---------- */
.projects { padding-block: clamp(48px, 6vw, 80px) clamp(72px, 8vw, 120px); border-top: 1px solid var(--line); }
.filter-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; padding-block: 16px; margin-bottom: 32px; border-block: 1px solid var(--line); }
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filter { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; background: transparent; color: var(--text); border: 1px solid var(--line-2); font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; text-decoration: none; transition: background-color .2s ease, border-color .2s ease, color .2s ease; }
.filter:hover { border-color: var(--accent); }
.filter__n { color: var(--muted); }
.filter[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.filter[aria-pressed="true"] .filter__n { color: var(--on-accent); }
.filter-status { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.project-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.empty-state { padding: 48px 24px; text-align: center; border: 1px dashed var(--line-2); display: grid; gap: 14px; justify-items: center; }
.empty-state h2 { font-family: var(--display); text-transform: uppercase; font-size: 26px; }

/* ---------- Case study ---------- */
.case-hero { position: relative; overflow: hidden; min-height: max(620px, calc(100svh - 108px)); display: flex; flex-direction: column; justify-content: flex-end; background: var(--deeper); --chip-y: 30%; }
.case-hero__media { position: absolute; inset: 0; }
.case-hero__media .scan, .case-hero__media > svg.il { position: absolute; inset: 0; width: 100%; height: 100%; }
.case-hero::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(0deg, rgba(var(--deeper-rgb),.96) 0, rgba(var(--deeper-rgb),.75) 34%, rgba(var(--deeper-rgb),.1) 70%), linear-gradient(90deg, rgba(var(--deeper-rgb),.6), transparent 60%); }
.case-hero__inner { position: relative; z-index: 3; padding-block: 120px 56px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px 32px; align-items: end; }
.case-hero__main { grid-column: 1 / 9; }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 6px 10px; font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.breadcrumb li + li::before { content: "/"; margin-right: 10px; color: var(--accent-hi); }
.breadcrumb a { color: var(--soft); }
.case-hero__meta { margin-top: 26px; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.45; color: var(--soft); text-shadow: 0 1px 12px rgba(var(--bg-rgb),.9); }
.case-hero__title { margin-top: 18px; font-family: var(--display); font-weight: 700; font-size: clamp(40px, 6.6vw, 112px); line-height: .92; text-transform: uppercase; text-shadow: 0 0 30px rgba(var(--deeper-rgb),.8); overflow-wrap: anywhere; hyphens: manual; }
.case-hero__title--long { font-size: clamp(32px, 4.4vw, 72px); }  /* Round 13a W35 */
.case-hero__intro { margin-top: 22px; max-width: 58ch; font-size: clamp(18px, 1.4vw, 21px); color: var(--soft); }
.case-panel { grid-column: 9 / 13; background: rgba(var(--bg-rgb),.84); border: 1px solid rgba(var(--accent-rgb),.35); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.case-panel__head { display: flex; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-hi); }
.case-panel dl { padding: 6px 16px; }
.case-panel dl div { display: grid; grid-template-columns: 104px 1fr; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.case-panel dl div:last-child { border-bottom: 0; }
.case-panel dt { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding-top: 2px; }
.case-panel__map { border-top: 1px solid var(--line); padding: 10px 16px 14px; }
.case-sec { padding-block: clamp(64px, 7vw, 108px); border-top: 1px solid var(--line); }
.case-sec__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 28px 32px; align-items: start; }
.case-sec__label { grid-column: 1 / 5; }
.case-sec__label h2 { margin-top: 14px; font-family: var(--display); font-weight: 700; font-size: clamp(28px, 2.8vw, 42px); line-height: 1; text-transform: uppercase; }
.case-sec__body { grid-column: 5 / 13; font-size: clamp(19px, 1.5vw, 23px); line-height: 1.5; max-width: 46ch; }
.case-sec__wide { grid-column: 1 / -1; margin-top: 24px; }
.case-sec__wide .hud { aspect-ratio: 21 / 8; }
.case-sec__pair { grid-column: 1 / -1; display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; margin-top: 24px; }
.case-sec__pair .hud { aspect-ratio: 4 / 3; }
.case-sec__pair--one { grid-template-columns: 1fr; }
.case-sec__pair--one .hud { aspect-ratio: 21 / 9; }
.diagram { grid-column: 1 / -1; margin-top: 16px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px; align-items: center; border: 1px solid var(--line); background: radial-gradient(ellipse 60% 70% at 35% 50%, rgba(var(--accent-rgb),.08), transparent 70%), var(--field); padding: 24px; }
.diagram > svg { grid-column: 1 / 9; width: 100%; height: auto; display: block; }
.diagram > svg.il { aspect-ratio: auto; }
.diagram--full > svg { grid-column: 1 / -1; }
.diagram__note { grid-column: 9 / 13; font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); display: grid; gap: 10px; }
.an-plate { fill: rgba(var(--accent-rgb),.05); stroke: rgba(var(--accent-rgb),.7); stroke-width: 1.4; }
.an-plate--top { fill: rgba(var(--accent-rgb),.16); stroke: var(--accent); stroke-width: 2; }
.an-grid { stroke: rgba(var(--accent-rgb),.18); stroke-width: 1; }
.an-lead { stroke: rgba(var(--text-rgb),.45); stroke-width: 1; fill: none; }
.an-axis { stroke: rgba(var(--accent-rgb),.35); stroke-width: 1; stroke-dasharray: 3 5; }
.an-dot { fill: var(--accent); }
.an-n { fill: var(--accent-hi); font: 700 13px var(--mono); letter-spacing: .12em; }
.an-l { fill: var(--text); font: 600 22px var(--display); letter-spacing: .03em; }
.an-s { fill: rgba(var(--text-rgb),.6); font: 600 11px var(--mono); letter-spacing: .12em; }
.an-icon { fill: none; stroke: var(--accent-hi); stroke-width: 1.6; }
.an-layer { animation: layer-in 1s cubic-bezier(.2,.7,.2,1) both; animation-delay: var(--d, 0s); }
@keyframes layer-in { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
.video-sec, .gallery-sec { padding-block: clamp(64px, 7vw, 108px); border-top: 1px solid var(--line); }
.video { position: relative; aspect-ratio: 16 / 9; border: 1px solid rgba(var(--accent-rgb),.35); }
.video > .hud { position: absolute; inset: 0; }
.video__play { position: absolute; z-index: 5; left: 50%; top: 50%; width: 112px; height: 112px; margin: -56px 0 0 -56px; border-radius: 50%; border: 2px solid rgba(var(--accent-rgb),.6); background: rgba(var(--bg-rgb),.55); display: grid; place-items: center; box-shadow: 0 0 0 10px rgba(var(--accent-rgb),.08); opacity: .7; }
.video__play::before { content: ""; margin-left: 8px; border-left: 30px solid rgba(var(--accent-rgb),.7); border-top: 18px solid transparent; border-bottom: 18px solid transparent; }
.video__pending { position: absolute; z-index: 5; left: 50%; top: calc(50% + 78px); transform: translateX(-50%); }
.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: clamp(180px, 17vw, 260px); gap: 12px; margin-top: 32px; }
.gallery__item { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.gallery__item .hud { position: absolute; inset: 0; }
.gallery__item:hover .hud img { transform: scale(1.03); transition: transform .8s ease; }
.gallery--7 .gallery__item:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.gallery--7 .gallery__item:nth-child(7) { grid-column: 1 / -1; grid-row: span 2; }
.gallery--3 { grid-template-columns: 2fr 1fr; }
.gallery--3 .gallery__item:nth-child(1) { grid-row: span 2; }
.gallery--2 { grid-template-columns: 1fr 1fr; grid-auto-rows: clamp(220px, 26vw, 380px); }
.related { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.related a { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 18px; border: 1px solid var(--line-2); font-family: var(--mono); font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text); text-decoration: none; }
.related a:hover { border-color: var(--accent); color: var(--accent-hi); }
.related-sec h2 { font-family: var(--display); font-weight: 700; font-size: clamp(24px, 2.2vw, 32px); text-transform: uppercase; }
.next-project { border-top: 1px solid var(--line); }
.next-project__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; padding-block: 40px; }
.next-project a.next-project__link { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 28px; color: var(--text); text-decoration: none; }
.next-project__label { font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-hi); }
.next-project__title { font-family: var(--display); font-weight: 700; font-size: clamp(26px, 3.4vw, 52px); text-transform: uppercase; line-height: 1; }
.next-project a.next-project__link:hover .next-project__title { color: var(--accent-hi); }

/* ---------- Services page ---------- */
.svc-index { position: relative; z-index: 3; border-top: 1px solid var(--line); background: var(--bg-2); }
.svc-index ol { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.svc-index li + li { border-left: 1px solid var(--line); }
.svc-index a { display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 18px 16px 20px; text-decoration: none; color: var(--soft); font-size: 15px; line-height: 1.3; transition: background-color .2s ease, color .2s ease; }
.svc-index a:hover { background: rgba(var(--accent-rgb),.06); color: #fff; }
.svc-index .ico { width: 26px; height: 26px; }
.svc-index__n { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .14em; color: var(--accent-hi); }
.ico { fill: none; stroke: var(--accent-hi); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ico .fill { fill: var(--accent-hi); stroke: none; }
.svc { padding-block: clamp(72px, 8vw, 120px); border-top: 1px solid var(--line); }
.svc__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px 32px; align-items: start; }
.svc__text { grid-column: 1 / 7; display: grid; gap: 22px; align-content: start; }
.svc__visual { grid-column: 7 / 13; position: sticky; top: calc(var(--header-h) + 24px); }
.svc:nth-of-type(even) .svc__text { grid-column: 7 / 13; grid-row: 1; }
.svc:nth-of-type(even) .svc__visual { grid-column: 1 / 7; grid-row: 1; }
.svc__name { display: flex; align-items: center; gap: 14px; font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.svc__name .ico { width: 30px; height: 30px; }
.svc__heading { font-family: var(--display); font-weight: 700; font-size: clamp(30px, 3.4vw, 54px); line-height: 1; text-transform: uppercase; }
.svc__body { display: grid; gap: 16px; color: var(--soft); }
.svc__body p:first-child { color: var(--text); font-size: clamp(19px, 1.4vw, 21px); line-height: 1.5; }
.scope { border-top: 1px solid var(--line); padding-top: 18px; }
.scope__h { font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-hi); margin-bottom: 12px; }
.scope ul { display: flex; flex-wrap: wrap; gap: 8px; }
.scope li { padding: 7px 12px; border: 1px solid var(--line-2); background: rgba(var(--text-rgb),.02); font-size: 15px; line-height: 1.3; color: var(--soft); }
.scope li::first-letter { text-transform: uppercase; }
.svc__related { font-size: 16px; color: var(--muted); }
.svc__related strong { display: block; font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-hi); margin-bottom: 8px; }
.svc__related a { color: var(--text); }
.svc__related a:hover { color: var(--accent-hi); }
.svc__visual .hud, .svc__visual .art { aspect-ratio: 4 / 3; border: 1px solid rgba(var(--accent-rgb),.25); }
.svc__visual .art { aspect-ratio: 5 / 3; }
.scope ul { list-style: none; margin: 0; padding: 0; }
.art { position: relative; overflow: hidden; background: radial-gradient(ellipse 70% 70% at 50% 50%, rgba(var(--accent-rgb),.07), transparent 70%), var(--field); }
.art > svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---------- About page ---------- */
.about-bg__grid, .company__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px; align-items: start; }
.about-bg__text { grid-column: 1 / 6; display: grid; gap: 20px; }
.about-bg__text p:not(.lead) { color: var(--muted); }
.about-bg__media { grid-column: 7 / 13; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.about-bg__media .hud { aspect-ratio: 4 / 5; }
.about-bg__media figure:nth-child(2) { margin-top: 64px; }
.principles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 48px; counter-reset: p; }
.principle { position: relative; padding: 28px 24px 30px; border: 1px solid var(--line); background: var(--panel); }
.principle__n { font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .16em; color: var(--accent-hi); }
.principle h3 { margin-top: 48px; font-family: var(--display); font-weight: 600; font-size: 22px; line-height: 1.12; text-transform: uppercase; }
.principle p { margin-top: 12px; color: var(--muted); font-size: 16.5px; }
.company__card { grid-column: 1 / 6; padding: 28px; border: 1px solid rgba(var(--accent-rgb),.35); background: var(--panel); }
.company__card h3 { font-family: var(--display); font-size: 26px; text-transform: uppercase; }
.company__card p { margin-top: 8px; color: var(--soft); }
.company__text { grid-column: 7 / 13; display: grid; gap: 22px; justify-items: start; color: var(--soft); }

/* ---------- Contact page ---------- */
.contact { padding-block: clamp(56px, 7vw, 100px) clamp(72px, 8vw, 120px); }
.contact__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px 32px; align-items: start; }
.contact__aside { grid-column: 1 / 5; display: grid; gap: 24px; position: sticky; top: calc(var(--header-h) + 24px); }
.contact__block { border: 1px solid var(--line); background: var(--panel); }
.contact__block-h { padding: 12px 16px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-hi); }
.contact__block dl { padding: 4px 16px 8px; }
.contact__block dl div { display: grid; grid-template-columns: 96px 1fr; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15.5px; }
.contact__block dl div:last-child { border-bottom: 0; }
.contact__block dd a { color: var(--text); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; overflow-wrap: break-word; }
.contact__block dd a:hover { color: var(--accent-hi); text-decoration-color: currentColor; }
@media (max-width: 420px) { .contact__block dl div { grid-template-columns: 1fr; gap: 4px; } .contact__block dt { padding-top: 0; } }
.contact__block dt { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding-top: 3px; }
.contact__radar { aspect-ratio: 1; max-width: 360px; width: 100%; opacity: .9; }
.form-wrap { grid-column: 6 / 13; }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 20px; padding: clamp(22px, 3vw, 40px); border: 1px solid var(--line); background: linear-gradient(180deg, rgba(var(--text-rgb),.035), rgba(var(--text-rgb),.01)); position: relative; }
.form::before { content: ""; position: absolute; top: -1px; left: -1px; width: 18px; height: 18px; border-top: 2px solid var(--accent); border-left: 2px solid var(--accent); }
.form__hint { grid-column: 1 / -1; font-size: 14.5px; color: var(--muted); }
.field { display: grid; gap: 8px; align-content: start; }
.field--full { grid-column: 1 / -1; }
.field label { font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--soft); }
.field .req { color: var(--accent-hi); }
.field input, .field select, .field textarea { width: 100%; min-height: 52px; padding: 12px 14px; background: var(--field); border: 1px solid var(--line-2); border-radius: 0; color: var(--text); font-size: 17px; line-height: 1.4; transition: border-color .2s ease, box-shadow .2s ease; }
.field textarea { min-height: 180px; resize: vertical; }
.field select { appearance: none; -webkit-appearance: none; padding-right: 44px; background-image: linear-gradient(45deg, transparent 50%, var(--accent-hi) 50%), linear-gradient(135deg, var(--accent-hi) 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: rgba(var(--text-rgb),.4); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.25); }
.field__help { font-size: 14.5px; color: var(--muted); }
.field__error { display: flex; gap: 8px; font-size: 14.5px; font-weight: 600; color: var(--danger); }
.field__error::before { content: "!"; display: inline-grid; place-items: center; width: 18px; height: 18px; flex-shrink: 0; border: 1.5px solid currentColor; font-family: var(--mono); font-size: 11px; }
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-color: var(--danger); }
.hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.form__privacy, .form__note { grid-column: 1 / -1; font-size: 15px; color: var(--muted); }
.form__privacy a { color: var(--accent-hi); }
.form__actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.form__status { font-family: var(--mono); font-size: 13px; letter-spacing: .06em; color: var(--soft); }
.form__alert { grid-column: 1 / -1; padding: 14px 18px; border-left: 3px solid var(--danger); background: rgba(255,138,122,.08); color: var(--text); font-size: 16px; }
.form__alert:focus { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ---------- Legal templates, thank-you, 404 ---------- */
.legal { padding-block: clamp(56px, 7vw, 100px); }
.legal__banner { display: flex; gap: 14px; align-items: baseline; padding: 18px 22px; margin-bottom: 40px; border: 1px dashed rgba(var(--accent-rgb),.55); background: rgba(var(--accent-rgb),.05); color: var(--soft); font-size: 16px; max-width: 900px; }
.legal__intro { max-width: 900px; margin-bottom: 28px; }
.legal__table { max-width: 900px; border-top: 1px solid var(--line); }
.legal__row { display: grid; grid-template-columns: minmax(180px, 1fr) 2fr; gap: 12px 24px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.legal__row dt { font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding-top: 4px; }
.legal__row dd { color: var(--text); }
.legal__row .pending-val { display: inline-block; margin-top: 4px; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; color: var(--accent-hi); }
.legal__sections { max-width: 900px; display: grid; gap: 0; border-top: 1px solid var(--line); }
.legal__sections section { min-width: 0; padding: 22px 0; border-bottom: 1px solid var(--line); }
.legal__sections h2 { font-family: var(--display); font-size: 22px; text-transform: uppercase; }
.legal__sections p { margin-top: 8px; color: var(--soft); }
.legal__sections .pending-text { color: var(--accent-hi); font-family: var(--mono); font-size: 13px; letter-spacing: .04em; }
.store-table { width: 100%; max-width: 900px; border-collapse: collapse; margin-top: 24px; font-size: 15.5px; }
.store-table th, .store-table td { text-align: left; vertical-align: top; padding: 12px 14px 12px 0; border-bottom: 1px solid var(--line); }
.store-table th { font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.store-table code { font-family: var(--mono); font-size: 13px; color: var(--accent-hi); }
.table-scroll { overflow-x: auto; }
.system { position: relative; overflow: hidden; min-height: max(560px, calc(100svh - 260px)); display: grid; align-items: center; padding-block: 80px; }
.system__radar { position: absolute; top: 50%; right: max(-8vw, -120px); width: min(720px, 70vw); aspect-ratio: 1; transform: translateY(-50%); pointer-events: none; opacity: .85; }
.system__inner { position: relative; z-index: 2; display: grid; gap: 24px; justify-items: start; max-width: 760px; }
.system__code { font-family: var(--mono); font-size: 13px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-hi); }
.system__title { font-family: var(--display); font-weight: 700; font-size: clamp(40px, 6vw, 92px); line-height: .95; text-transform: uppercase; }
.system__text { font-size: clamp(18px, 1.4vw, 21px); color: var(--soft); max-width: 56ch; }
.system__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.preview-note { padding: 14px 18px; border: 1px dashed rgba(var(--accent-rgb),.6); background: rgba(var(--accent-rgb),.06); font-size: 15.5px; color: var(--soft); max-width: 70ch; }

/* ---------- Lightbox ---------- */
.lightbox { position: fixed; inset: 0; z-index: 200; display: grid; grid-template-rows: auto 1fr auto; background: rgba(var(--deeper-rgb),.96); padding: 16px var(--gutter) 20px; }
.lightbox__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.lightbox__stage { position: relative; display: grid; place-items: center; min-height: 0; padding-block: 16px; }
.lightbox__stage img { max-width: 100%; max-height: calc(100svh - 190px); width: auto; height: auto; object-fit: contain; box-shadow: 0 0 0 1px rgba(var(--accent-rgb),.3); }
.lightbox__cap { text-align: center; color: var(--soft); font-size: 15px; min-height: 1.5em; }
.lightbox__btn { min-width: 44px; min-height: 44px; padding: 0 14px; background: rgba(var(--bg-rgb),.9); border: 1px solid var(--line-2); color: var(--text); font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.lightbox__btn:hover { border-color: var(--accent); color: var(--accent-hi); }
.lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); }
.lightbox__prev { left: 0; } .lightbox__next { right: 0; }

/* ---------- Illustrations ---------- */
.il { display: block; width: 100%; height: 100%; background: radial-gradient(ellipse 70% 70% at 50% 45%, rgba(var(--accent-rgb),.08), transparent 70%), var(--deep); }
.il-grid { stroke: rgba(var(--accent-rgb),.07); stroke-width: 1; }
.il-tag { fill: var(--accent-hi); font: 700 13px var(--mono); letter-spacing: .14em; }
.il-plate { fill: rgba(var(--accent-rgb),.05); stroke: rgba(var(--accent-rgb),.6); stroke-width: 1.4; }
.il-fgrid { stroke: rgba(var(--accent-rgb),.16); stroke-width: 1; }
.il-solid.il-top { fill: rgba(var(--accent-rgb),.12); stroke: rgba(var(--accent-rgb),.8); stroke-width: 1.3; }
.il-solid.il-side-l { fill: rgba(var(--accent-rgb),.05); stroke: rgba(var(--accent-rgb),.55); stroke-width: 1.1; }
.il-solid.il-side-r { fill: rgba(var(--accent-rgb),.025); stroke: rgba(var(--accent-rgb),.45); stroke-width: 1.1; }
.il-accent.il-top { fill: rgba(var(--accent-rgb),.55); stroke: var(--accent-hi); stroke-width: 1.3; }
.il-accent.il-side-l { fill: rgba(var(--accent-rgb),.3); stroke: var(--accent); }
.il-accent.il-side-r { fill: rgba(var(--accent-rgb),.18); stroke: var(--accent); }
.il-screen { fill: rgba(var(--accent-rgb),.22); stroke: var(--accent-hi); stroke-width: 1.2; animation: flicker 4s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes flicker { 0%, 100% { fill-opacity: .55; } 50% { fill-opacity: 1; } }
.il-line { fill: none; stroke: rgba(var(--text-rgb),.45); stroke-width: 1.4; }
.il-beam { stroke: rgba(var(--accent-rgb),.35); stroke-width: 14; stroke-linecap: round; opacity: .35; animation: beam 5s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes beam { 0%, 100% { opacity: .12; } 50% { opacity: .45; } }
.il-route-base { fill: none; stroke: rgba(var(--text-rgb),.12); stroke-width: 6; stroke-linecap: round; }
.il-route { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 8 10; animation: dash 14s linear infinite; }
.il-mover { fill: var(--accent-hi); filter: drop-shadow(0 0 6px rgba(var(--accent-rgb),.9)); }
.il-ring { fill: none; stroke: var(--accent); stroke-width: 1.4; transform-box: fill-box; transform-origin: center; animation: ping 3.2s ease-out infinite; animation-delay: var(--d, 0s); }
.il-ring-s { fill: none; stroke: rgba(var(--text-rgb),.14); stroke-width: 1.2; }
.il-core { fill: var(--accent); filter: drop-shadow(0 0 12px rgba(var(--accent-rgb),.8)); }
.il-node { fill: var(--bg); stroke: var(--accent); stroke-width: 2; }
.il-dot { fill: var(--accent); }
.il-lead { fill: none; stroke: rgba(var(--text-rgb),.45); stroke-width: 1; }
.il-n { fill: var(--accent-hi); font: 700 14px var(--mono); letter-spacing: .12em; }
.il-l { fill: var(--text); font: 600 21px var(--display); letter-spacing: .04em; }
.il-s { fill: rgba(var(--text-rgb),.6); font: 600 12px var(--mono); letter-spacing: .12em; }
.il-n, .il-l, .il-s { paint-order: stroke; stroke: var(--deep); stroke-width: 5px; stroke-linejoin: round; }
.il-axis { stroke: rgba(var(--text-rgb),.3); stroke-width: 2; }
.il-axis--fill { stroke: var(--accent); stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: draw 4s cubic-bezier(.4,0,.2,1) .3s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.il-tick { stroke: rgba(var(--text-rgb),.3); stroke-width: 1.5; }
.il-bar { fill: rgba(var(--accent-rgb),.28); stroke: rgba(var(--accent-rgb),.7); transform-box: fill-box; transform-origin: bottom; animation: grow 1.4s cubic-bezier(.2,.7,.2,1) both; animation-delay: var(--d, 0s); }
@keyframes grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.il-panel { fill: var(--panel-0); stroke: rgba(var(--accent-rgb),.55); stroke-width: 1.4; }
.il-img { fill: rgba(var(--accent-rgb),.14); }
.il-img--live { fill: rgba(var(--accent-rgb),.26); }
.il-txt { fill: rgba(var(--text-rgb),.55); }
.il-txt--dim { fill: rgba(var(--text-rgb),.22); }
.il-card, .il-phone, .il-plan { animation: float 6s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.il-rec { fill: #FF4D3D; animation: blink 1.4s steps(2, start) infinite; }
.il-zone { fill: rgba(var(--accent-rgb),.04); stroke: rgba(var(--accent-rgb),.4); stroke-width: 1.2; stroke-dasharray: 6 6; }
.il-zone--live { fill: rgba(var(--accent-rgb),.07); stroke: rgba(var(--accent-rgb),.7); }
.il-hex { fill: rgba(var(--accent-rgb),.08); stroke: rgba(var(--accent-rgb),.75); stroke-width: 1.5; }
.il-hex--core { fill: rgba(var(--accent-rgb),.2); stroke: var(--accent); stroke-width: 2; }
.il-link { stroke: rgba(var(--accent-rgb),.55); stroke-width: 1.4; stroke-dasharray: 5 6; animation: dash 16s linear infinite; }
.il-staff circle:first-child { fill: var(--bg); stroke: var(--accent-hi); stroke-width: 2; }
.il-staff > circle:only-child { fill: var(--bg); stroke: var(--accent-hi); stroke-width: 2; }
.il-truck rect { fill: var(--accent); stroke: var(--deep); stroke-width: 1.5; }
.il-accent-block { fill: rgba(var(--accent-rgb),.14); stroke: rgba(var(--accent-rgb),.6); }

/* ---------- Reveal on scroll ---------- */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* ---------- Motion controls ---------- */
.motion-paused *, .motion-paused *::before, .motion-paused *::after { animation-play-state: paused !important; }
.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after { animation: none !important; transition-duration: .01ms !important; }
.reduce-motion .reel { overflow-x: auto; }
.reduce-motion .js .reveal, .reduce-motion .reveal { opacity: 1; transform: none; }
.reduce-motion .il-axis--fill { stroke-dashoffset: 0; }
.reduce-motion .scan--intro { --scan: 56%; }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .svc-index ol { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .svc-index li:nth-child(4) { border-left: 0; }
  .svc-index li:nth-child(n+4) { border-top: 1px solid var(--line); }
  .principles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .wall { width: 56vw; }
  .montage-sec__text, .montage { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .hero--wall::before { display: none; }
  .hero--wall .hero__inner { max-width: none; padding-top: 8px; }
  /* Round 13a W34: headline, intro and CTAs first; the wall follows as one horizontally scrollable row. */
  .hero--wall .hero__inner { order: 1; }
  .wall { order: 2; position: relative; inset: auto; width: auto; height: auto; margin: 0 0 24px; padding: 0 var(--gutter) 6px; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-mask-image: none; mask-image: none; scrollbar-width: thin; }
  .wall .tile { flex: none; width: min(78vw, 420px); aspect-ratio: 3 / 2; scroll-snap-align: start; }
  .hero__hud { order: 3; }
  .tile .hud__lbl { font-size: 10px; }
  .hero__bottom { grid-template-columns: 1fr; }
  .brief__grid, .files__head, .montage-sec__grid, .compare, .netmap__grid, .case-sec__grid, .diagram, .case-hero__inner, .svc__grid, .about-bg__grid, .company__grid, .contact__grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .brief__head, .brief__body, .files__head .h2, .files__intro, .montage-sec__text, .montage, .compare .scan, .compare__side, .netmap__legend, .netmap__map,
  .case-hero__main, .case-panel, .case-sec__label, .case-sec__body, .diagram > svg, .diagram__note, .svc__text, .svc__visual, .svc:nth-of-type(even) .svc__text, .svc:nth-of-type(even) .svc__visual,
  .about-bg__text, .about-bg__media, .company__card, .company__text, .contact__aside, .form-wrap { grid-column: 1 / -1; grid-row: auto; }
  .svc__visual, .contact__aside { position: static; }
  .modules { grid-template-columns: 1fr; }
  .route { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; }
  .route::before, .route::after { display: none; }
  .route__step { padding-top: 34px; border-top: 2px solid var(--line-2); }
  .route__step.is-active { border-top-color: var(--accent); }
  .route__node { top: -10px; }
  .compare .scan { aspect-ratio: 4 / 3; }
  .closing__wrap { grid-template-columns: 1fr; }
  .closing__inner { padding-right: 0; }
  .closing__wrap--solo .closing__inner { grid-template-columns: 1fr; }
  .closing__photo { min-height: 280px; }
  .case-hero { --chip-y: 9%; }
  .case-hero__cam { display: none; }
  .case-hero__inner { padding-top: 160px; }
  .case-sec__pair { grid-template-columns: 1fr; }
  .case-sec__wide .hud, .case-sec__pair--one .hud { aspect-ratio: 4 / 3; }
  .diagram { padding: 16px; }
  .gallery, .gallery--3 { grid-template-columns: 1fr 1fr; grid-auto-rows: 44vw; }
  .gallery--7 .gallery__item:nth-child(1), .gallery--3 .gallery__item:nth-child(1) { grid-column: 1 / -1; grid-row: span 1; }
  .page-hero__radar { top: -10%; right: -40vw; width: 100vw; transform: none; opacity: .4; }
  .page-hero__art { position: relative; top: auto; right: auto; width: 100%; transform: none; margin-top: 32px; opacity: 1; }
  .system__radar { opacity: .35; right: -30vw; width: 110vw; }
  .contact__radar { display: none; }
  .about-bg__media figure:nth-child(2) { margin-top: 32px; }
}
@media (max-width: 760px) {
  .cards { grid-template-columns: 1fr; }
  .readouts { gap: 12px; }
  .readout dd { font-size: 48px; }
  .readout dt { font-size: 10.5px; letter-spacing: .1em; }
  .hero__hud-inner { padding-right: 0; padding-bottom: 52px; gap: 6px 22px; }
  .hero__hud-inner > span:nth-child(2) { display: none; }
  .svc-index ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-index li { border-left: 0 !important; border-top: 1px solid var(--line); }
  .svc-index li:nth-child(even) { border-left: 1px solid var(--line) !important; }
  .form { grid-template-columns: 1fr; }
  .legal__row { grid-template-columns: 1fr; gap: 4px; }
  .montage { height: 118vw; }
  .montage .m1 { width: 72%; height: 44%; } .montage .m2 { width: 48%; height: 48%; top: 30%; } .montage .m3 { left: 0; width: 62%; height: 32%; }
}
@media (max-width: 640px) {
  .project-grid, .footer-grid, .route, .principles { grid-template-columns: 1fr; }
  .hero__inner { padding-block: 48px 56px; }
  .hero__title { font-size: 10.2vw; }
  .page-hero__title { font-size: 11vw; }
  .case-hero__title { font-size: 11vw; }
  .case-hero__title--long { font-size: 8.2vw; }
  .system__title { font-size: 11vw; }
  .btn { width: 100%; }
  .site-nav .btn, .hero__actions, .system__actions { width: 100%; }
  .ticker__run span { font-size: 16px; }
  .video__play { width: 76px; height: 76px; margin: -38px 0 0 -38px; }
  .video__play::before { border-left-width: 22px; border-top-width: 13px; border-bottom-width: 13px; }
  .video__pending { top: calc(50% + 52px); }
  .hud__brl { display: none; }
  .gallery, .gallery--2, .gallery--3 { grid-template-columns: 1fr; grid-auto-rows: 64vw; }
  .gallery--7 .gallery__item:nth-child(7) { grid-column: auto; grid-row: auto; }
  .about-bg__media { grid-template-columns: 1fr; }
  .about-bg__media figure:nth-child(2) { margin-top: 0; }
  .next-project__bar .btn { width: auto; }
  .filters { display: grid; grid-template-columns: 1fr; width: 100%; }
  .filter { justify-content: space-between; }
  .lightbox__nav { top: auto; bottom: 0; transform: none; }
  .scope li { font-size: 14.5px; }
}

/* ---------- Print ---------- */
@media print {
  .review-bar, .site-header, .ticker, .reel-sec, .motion-toggle, .wall, .hero__hud, .closing__photo, .nav-toggle, .lightbox { display: none !important; }
  body { background: #fff; color: #000; }
  .closing { background: #fff; color: #000; }
}

/* Illustration-led case heroes (no cleared photography yet) */
.case-hero--illus .case-hero__cam { display: none; }
.case-hero__note { position: absolute; z-index: 3; top: 16px; left: var(--gutter); margin: 0; font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.case-hero__note b { color: var(--accent-hi); font-weight: 700; }
.case-hero--illus .case-hero__media > svg { opacity: .55; }
/* fade the lower band, where the hero text and facts panel sit, so no half-covered labels show */
.case-hero--illus .case-hero__media > svg { -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 48%, transparent 80%); mask-image: linear-gradient(180deg, #000 0%, #000 48%, transparent 80%); }
/* on narrow screens the hero text covers most of the canvas: keep the drawing as texture only.
   The accessible label stays on the SVG; the visible "Illustrative graphic" tag stays on the in-page diagram. */
@media (max-width: 760px) {
  .case-hero--illus .case-hero__media > svg { opacity: .32; }
  .case-hero--illus .case-hero__media > svg text { display: none; }
  .case-hero__note { font-size: 9px; letter-spacing: .1em; }
}

/* ==========================================================================
   Round 5 — reference expansion components (chapters, documented scope,
   further experience, team timeline). Colours read from tokens only.
   ========================================================================== */
.case-facts { padding: 24px 28px; border: 1px solid var(--line); border-left: 3px solid var(--accent); background: var(--panel); }
.case-facts__h { font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-hi); }
.case-facts ul { margin: 12px 0 0; padding-left: 1.1em; display: grid; gap: 8px; }
.case-facts li { color: var(--text); font-size: 16.5px; line-height: 1.5; }
.chapters-sec .h2 { margin-top: 12px; }
.chapters { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.chapters--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.chapters--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.chapter { position: relative; padding: 26px 24px 28px; border: 1px solid var(--line); background: var(--panel); }
.chapter::before { content: ""; position: absolute; left: -1px; top: -1px; width: 36px; height: 3px; background: var(--accent); }
.chapter__label { font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-hi); }
.chapter__title { margin-top: 28px; font-family: var(--display); font-weight: 600; font-size: 22px; line-height: 1.12; text-transform: uppercase; }
.chapter p:last-child { margin-top: 12px; color: var(--muted); font-size: 16.5px; }
.related-sec__h2 { margin-top: 40px; }
.further .lead { margin-top: 16px; max-width: 70ch; }
.further__list { list-style: none; margin: 36px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.further__item { padding: 24px; border: 1px dashed var(--line-2); }
.further__period { font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .14em; color: var(--accent-hi); }
.further__item h3 { margin-top: 14px; font-family: var(--display); font-weight: 600; font-size: 22px; text-transform: uppercase; }
.further__item p:last-child { margin-top: 10px; color: var(--muted); }
.team-timeline .lead { margin-top: 16px; max-width: 70ch; }
.team-timeline__list { list-style: none; margin: 40px 0 0; padding: 0; border-left: 1px solid var(--line-2); display: grid; gap: 0; }
.team-timeline__item { position: relative; display: grid; grid-template-columns: 180px 1fr; gap: 24px; padding: 16px 0 16px 28px; border-bottom: 1px solid var(--line); }
.team-timeline__item::before { content: ""; position: absolute; left: -5px; top: 24px; width: 9px; height: 9px; background: var(--accent); }
.team-timeline__year { font-family: var(--mono); font-size: 13px; font-weight: 700; letter-spacing: .12em; color: var(--accent-hi); }
.team-timeline__text { font-size: 17px; }
@media (max-width: 900px) {
  .chapters, .chapters--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .further__list { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .chapters, .chapters--3, .chapters--2 { grid-template-columns: 1fr; }
  .team-timeline__item { grid-template-columns: 1fr; gap: 4px; }
}

/* ---------- Investor area (Round 11, 12 Oct 2026): sign-in gate and list of briefings ---------- */
.inv-gate { padding-block: clamp(48px, 6vw, 88px) clamp(72px, 8vw, 120px); }
.inv-gate__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px 32px; align-items: start; }
.inv-gate__form { grid-column: 1 / 8; }
.inv-gate__aside { grid-column: 9 / 13; display: grid; gap: 24px; }
.inv-gate__aside-body { display: grid; gap: 20px; justify-items: start; padding: 18px 16px 20px; color: var(--soft); font-size: 16px; }
.inv-form { grid-template-columns: minmax(0, 1fr); }
.inv-form__code { font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-hi); }
.inv-form__status { padding: 14px 18px; border-left: 3px solid var(--accent); background: rgba(var(--accent-rgb),.08); color: var(--text); font-size: 16px; }
.inv-form .field input { font-family: var(--mono); font-size: 18px; letter-spacing: .08em; }
.inv-form .form__note a { color: var(--accent-hi); }
.inv-hub { padding-block: 0 clamp(72px, 8vw, 120px); }
.inv-hub__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.inv-hub__bar .status-chip { margin: 0; }
.cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 40px; }
.inv-card__kicker { margin-top: 8px; font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-hi); }
.inv-cards .card__text { font-size: 16.5px; }
.inv-empty { margin-top: 40px; padding: 18px 22px; border: 1px dashed var(--line-2); color: var(--muted); }
.inv-notice { margin: 48px 0 0; }
@media (max-width: 1100px) {
  .cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .inv-gate__grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .inv-gate__form, .inv-gate__aside { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .cards--3 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .inv-hub__bar .btn { width: auto; }
}

/* ---------- Round 13a (16 Oct 2026, refinement proposal v0.2) ---------- */
/* W02 montage link row */
.montage-links { display: grid; gap: 0; width: 100%; border-top: 1px solid var(--line); }
.montage-links li { border-bottom: 1px solid var(--line); }
.montage-links a { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 12px 2px; font-size: 17px; font-weight: 600; line-height: 1.35; color: var(--text); }
.montage-links a:hover, .montage-links a:focus-visible { color: var(--accent-hi); }
/* W14 contact reply time */
.contact__reply { padding: 12px 16px 16px; border-top: 1px solid var(--line); font-size: 15.5px; color: var(--soft); }
/* W17 optional project details */
.form__more { grid-column: 1 / -1; border: 1px solid var(--line); background: rgba(var(--text-rgb),.02); }
.form__more-sum { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 12px 16px; cursor: pointer; list-style: none; font-size: 16px; font-weight: 600; color: var(--text); }
.form__more-sum::-webkit-details-marker { display: none; }
.form__more-sum::before { content: "+"; display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none; border: 1.5px solid var(--accent); font-family: var(--mono); font-size: 15px; line-height: 1; color: var(--accent-hi); }
.form__more[open] > .form__more-sum::before { content: "\2212"; }
.form__more-sum:hover { color: var(--accent-hi); }
.form__more-sum:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.form__more-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 20px; padding: 8px 16px 20px; }
@media (max-width: 760px) { .form__more-grid { grid-template-columns: 1fr; } }
/* W35 long page-hero titles one step smaller */
.page-hero__title--long { font-size: clamp(36px, 5.2vw, 84px); max-width: 16ch; }
/* W33 calm motion: decorative illustration loops stop; the illustrations read as static graphics.
   Kept: one-shot reveals and drawing, the hero title wipe, count-up, the first-view scan transition and the live DXB clock. */
.il-screen, .il-beam, .il-route, .il-ring, .il-card, .il-phone, .il-plan, .il-rec, .il-link { animation: none; }