/* ============================================================
   REFLEXION DIGITAL — Brutalist Creative-Agency System
   Recolor of the onism/Rick-Allan reference to brand navy/cyan
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  --bg:        #040b16;   /* near-black navy */
  --bg-2:      #0d1b36;   /* brand navy */
  --bg-3:      #07101f;
  --ink:       #f4f1ea;   /* bone white display */
  --ink-soft:  #e7e3d9;
  --muted:     #8fa0b0;   /* secondary text */
  --muted-2:   #5d6f80;
  --accent:    #49f4fe;   /* brand cyan */
  --accent-dim:#1d6f78;
  --line:      rgba(143,160,176,.18);
  --line-2:    rgba(73,244,254,.30);

  --font-display: "Anton", Impact, sans-serif;
  --font-body:    "Outfit", system-ui, sans-serif;
  --font-mono:    "Space Mono", ui-monospace, monospace;

  --frame: 14px;          /* viewport frame inset */
  --ease:  cubic-bezier(.22,1,.36,1);
  --maxw:  1680px;
}

/* ---------- Reset ---------- */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%;
  overflow-x: clip; overscroll-behavior-x: none; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink-soft);
  line-height: 1.5;
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  overscroll-behavior-x: none;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
::selection { background: var(--accent); color: var(--bg); }

/* ---------- Custom scrollbar ---------- */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--bg-2); border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--accent-dim); }

/* ============================================================
   FRAME — fixed bordered edge around the viewport
   ============================================================ */
/* frame border removed per request — markup kept, visually hidden */
.frame { display: none; }

/* top scrim — keeps the fixed clock / MENU / logo legible as content scrolls under */
body::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: 100px; z-index: 140;
  pointer-events: none; background: linear-gradient(180deg, var(--bg) 14%, rgba(4,11,22,0) 100%); }
@media (max-width: 680px){ body::before { height: 84px; } }
.frame::before {
  content: "";
  position: absolute;
  inset: var(--frame);
  border: 1px solid var(--line-2);
}
.frame__edge {
  position: absolute;
  background-image: repeating-linear-gradient(90deg,
    var(--accent) 0 6px, transparent 6px 14px);
  opacity: .35;
}
.frame__edge--top    { top: calc(var(--frame) - 1px); left: var(--frame); right: var(--frame); height: 2px; }
.frame__edge--bottom { bottom: calc(var(--frame) - 1px); left: var(--frame); right: var(--frame); height: 2px;
  background-image: repeating-linear-gradient(90deg, var(--accent) 0 6px, transparent 6px 14px); }

/* ============================================================
   TOP BAR
   ============================================================ */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 150;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(var(--frame) + 14px) calc(var(--frame) + 26px);
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted);
}
.topbar__clocks { display: flex; gap: 28px; }
.topbar__clock b { color: var(--ink); font-weight: 700; margin-left: 6px; }
.topbar__right { display: flex; align-items: center; gap: 30px; }
.topbar__mail span { color: var(--accent); }
.menu-toggle {
  font-family: var(--font-mono); font-size: 15px; letter-spacing: .16em;
  color: var(--ink); display: flex; align-items: center; gap: 11px;
  text-transform: uppercase; padding: 6px 2px;
}
.menu-toggle__dot {
  width: 9px; height: 9px; background: var(--accent); border-radius: 50%;
  box-shadow: 0 0 10px var(--accent);
  animation: pulse 2.4s var(--ease) infinite;
}
@keyframes pulse { 0%,100%{ transform: scale(1); opacity: 1; } 50%{ transform: scale(1.6); opacity: .5; } }
.menu-toggle:hover .menu-toggle__label { color: var(--accent); }
.menu-toggle__label { transition: color .3s; }

/* Brand mark (top-left) */
.brandmark {
  position: fixed; z-index: 150;
  top: calc(var(--frame) + 44px); left: calc(var(--frame) + 26px);
}
.brandmark img { height: 78px; width: auto; opacity: .95; }
@media (max-width: 680px){ .brandmark img { height: 26px; } }

/* ============================================================
   MENU OVERLAY
   ============================================================ */
.overlay {
  position: fixed; inset: 0; z-index: 300;
  background: var(--bg-2);
  display: flex; flex-direction: column; justify-content: flex-start;
  padding: clamp(30px, 7vh, 90px) clamp(40px, 9vw, 120px);
  overflow-y: auto;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .8s var(--ease);
  visibility: hidden;
}
/* safe centering: centers when there's room, top-aligns (scrollable) when not */
.overlay::before { content: ""; margin-top: auto; }
.overlay::after { content: ""; margin-bottom: auto; }
.overlay.is-open { clip-path: inset(0 0 0 0); visibility: visible; }
.overlay__close {
  position: absolute; top: calc(var(--frame) + 30px); right: calc(var(--frame) + 26px);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink);
}
.overlay__close:hover { color: var(--accent); }
.overlay__index { font-family: var(--font-mono); font-size: 11px; color: var(--accent); letter-spacing: .1em; margin-bottom: 30px; }
.overlay__nav { display: flex; flex-direction: column; }
.overlay__link {
  font-family: var(--font-display);
  /* capped by viewport height so all 6 links fit on shorter desktop windows */
  font-size: min(clamp(48px, 11vw, 150px), 10.5vh);
  line-height: .95; color: var(--ink);
  text-transform: uppercase; letter-spacing: .01em;
  position: relative; width: max-content; max-width: 100%;
  transition: color .35s var(--ease), transform .35s var(--ease);
  opacity: 0; transform: translateY(40px);
}
.overlay.is-open .overlay__link { opacity: 1; transform: translateY(0); }
.overlay.is-open .overlay__link:nth-child(1){ transition-delay: .15s; }
.overlay.is-open .overlay__link:nth-child(2){ transition-delay: .23s; }
.overlay.is-open .overlay__link:nth-child(3){ transition-delay: .31s; }
.overlay.is-open .overlay__link:nth-child(4){ transition-delay: .39s; }
.overlay__link:hover { color: var(--accent); transform: translateX(24px); }
.overlay__link small {
  font-family: var(--font-mono); font-size: 12px; vertical-align: super;
  color: var(--muted); margin-left: 10px; letter-spacing: .05em;
}
.overlay__foot {
  display: flex; flex-wrap: wrap; gap: 24px 36px; margin-top: clamp(40px,6vw,72px);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
}
.overlay__foot a:hover { color: var(--accent); }

/* ============================================================
   LAYOUT
   ============================================================ */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 calc(var(--frame) + 26px); }
.section { position: relative; padding: clamp(52px,6vw,88px) 0; }
.section--tight { padding: clamp(40px,4vw,60px) 0; }

/* index labels ([ 00X — ... ]) removed site-wide per request */
.ix { display: none !important; }
.ix-legacy {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em;
  color: var(--accent); text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px;
}
.ix::before { display: none; }

.eyebrow {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--muted);
}

/* Display headings */
.display {
  font-family: var(--font-display);
  line-height: .9; letter-spacing: .005em; text-transform: uppercase;
  color: var(--ink);
}
.display--xl { font-size: clamp(56px, 13vw, 230px); }
.display--lg { font-size: clamp(42px, 8vw, 120px); }
.display--md { font-size: clamp(34px, 5vw, 76px); }

.lead { font-size: clamp(17px,1.5vw,21px); color: var(--muted); max-width: 46ch; line-height: 1.55; }

/* ============================================================
   HERO
   ============================================================ */
.hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end;
  padding-bottom: clamp(0px,2vw,30px); overflow: hidden; }

/* logo hero: full-bleed background video with the brand mark centered */
.hero--logo { justify-content: center; align-items: center; text-align: center; padding-bottom: 0; }
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.hero__scrim { position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(circle at 50% 50%, rgba(4,11,22,.42), rgba(4,11,22,.74) 78%); }
.hero__logo { position: relative; z-index: 1; width: min(82vw, 900px); }
.hero__logo img { display: block; width: 100%; height: auto; }
@media (max-width: 680px){ .hero__logo { width: 90vw; } }

/* ---- scroll-pin hero + rising page flow ---- */
.page-flow { position: relative; z-index: 1; background: var(--bg); }
@media (min-width: 681px) and (prefers-reduced-motion: no-preference) {
  .hero { position: sticky; top: 0; height: 100svh; z-index: 0; }
}
/* traveling wordmark → top-bar brandmark (JS-enabled only) */
.herofly {
  position: fixed; inset: 0; height: 100svh; z-index: 160;
  display: none; place-items: center; pointer-events: none;
}
.herofly img {
  width: min(82vw, 900px); height: auto;
  transform-origin: 0 0; will-change: transform; backface-visibility: hidden;
}
html.js-herofly .herofly { display: grid; }
html.js-herofly .hero__logo { visibility: hidden; }
/* when the traveling logo is active it IS the corner logo — hide the static
   brandmark (kept in place, opacity 0, so it still measures the landing spot
   and stays clickable as the link under the parked logo) */
html.js-herofly .brandmark { opacity: 0; }
@media (max-width: 680px){ .herofly { display: none !important; } }
@media (prefers-reduced-motion: reduce){ .herofly { display: none !important; } }
.hero__bg {
  position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(120% 90% at 78% 38%, rgba(73,244,254,.16), transparent 55%),
    radial-gradient(140% 120% at 60% 50%, var(--bg-2), var(--bg) 62%),
    var(--bg);
}
.hero__grid-lines { position: absolute; inset: 0; z-index: -1; opacity: .5;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 100% 50%, 25% 100%;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
}
.hero__figure {
  position: absolute; right: 0; bottom: 0; top: 0; width: 38%;
  background: linear-gradient(180deg, transparent, rgba(4,11,22,.4)), var(--bg-3);
  border-left: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  z-index: -1; overflow: hidden;
}
.hero__top {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 40px;
  align-items: end; margin-bottom: clamp(24px,4vw,54px); max-width: 1000px;
}
.hero__top h2 { font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(26px,3vw,46px); line-height: .95; color: var(--ink); }
.hero__copyright { font-family: var(--font-mono); font-size: 11px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .08em; }
.hero__rule { height: 1px; background: var(--line); margin: 18px 0 0; }

.hero__headline { position: relative; }
.hero__headline .display--xl { display: block; }

/* grain-distorted text */
.grain-text { filter: url(#grainFilter); }

.hero__cta-row { position: relative; margin-top: clamp(18px,2vw,8px); }

/* CTA pill */
.cta {
  display: inline-flex; align-items: center; gap: 18px;
  padding: 16px 22px 16px 16px;
  background: rgba(244,241,234,.06); backdrop-filter: blur(6px);
  border: 1px solid var(--line-2); border-radius: 999px;
  font-family: var(--font-mono); font-size: 13px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink);
  transition: background .35s var(--ease), border-color .35s, transform .35s var(--ease);
}
.cta__icon {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--accent); color: var(--bg);
  display: grid; place-items: center; flex: none;
  font-size: 22px; line-height: 1;
  transition: transform .45s var(--ease);
}
.cta:hover { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.cta:hover .cta__icon { background: var(--bg); color: var(--accent); transform: rotate(45deg); }

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  overflow: hidden; padding: 22px 0; background: var(--bg-3); }
.marquee__track { display: flex; gap: 60px; width: max-content;
  animation: scrollx 28s linear infinite; }
.marquee__track span { font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(22px,2.6vw,40px); color: var(--ink); white-space: nowrap;
  display: inline-flex; align-items: center; gap: 60px; }
.marquee__track span::after { content: "✦"; color: var(--accent); font-size: .6em; }
@keyframes scrollx { to { transform: translateX(-50%); } }

/* ============================================================
   SECTION HEAD
   ============================================================ */
.head { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); gap: 40px;
  align-items: end; margin-bottom: clamp(40px,5vw,72px); }
@media (max-width: 860px){ .head { grid-template-columns: 1fr; gap: 20px; } }
/* centered variant: label, title, and lead stacked on the center axis */
.head--center { grid-template-columns: 1fr; text-align: center; gap: 0; }
.head--center .ix { justify-content: center; }
.head--center .lead { max-width: 52ch; margin: 22px auto 0; }

/* ============================================================
   PROBLEM GRID
   ============================================================ */
.grid-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line); }
@media (max-width: 980px){ .grid-cards { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 620px){ .grid-cards { grid-template-columns: 1fr; } }
.card {
  background: var(--bg); padding: clamp(26px,3vw,42px); min-height: 250px;
  display: flex; flex-direction: column; justify-content: space-between;
  position: relative; transition: background .4s var(--ease);
}
.card:hover { background: var(--bg-2); }
.card__num { font-family: var(--font-mono); font-size: 12px; color: var(--accent); letter-spacing: .1em; }
.card__title { font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(22px,2.2vw,32px); line-height: .98; color: var(--ink); margin-top: 30px; }
.card__body { color: var(--muted); font-size: 15px; margin-top: 14px; line-height: 1.55; }

/* ============================================================
   PILLARS
   ============================================================ */
.pillars { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.pillar {
  display: grid; grid-template-columns: 90px minmax(0,.9fr) minmax(0,1.1fr); gap: 40px;
  align-items: start; padding: clamp(30px,4vw,56px) 0; border-bottom: 1px solid var(--line);
  transition: padding-left .4s var(--ease);
}
.pillar:hover { padding-left: 18px; }
.pillar__no { font-family: var(--font-mono); font-size: 13px; color: var(--accent); padding-top: 10px; }
.pillar__title { font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(30px,4vw,62px); line-height: .92; color: var(--ink); }
.pillar__body { color: var(--muted); font-size: clamp(15px,1.3vw,17px); line-height: 1.6; padding-top: 8px; }
@media (max-width: 860px){ .pillar { grid-template-columns: 1fr; gap: 14px; } }

/* ============================================================
   SERVICES PREVIEW / CHIPS
   ============================================================ */
.verticals { display: grid; grid-template-columns: repeat(2,1fr); gap: 1px; background: var(--line);
  border: 1px solid var(--line); margin-bottom: 40px; }
@media (max-width: 620px){ .verticals { grid-template-columns: 1fr; } }
.vertical { background: var(--bg); padding: clamp(24px,3vw,40px); display: flex; align-items: baseline;
  justify-content: space-between; gap: 20px; transition: background .35s, color .35s; }
.vertical:hover { background: var(--accent); }
.vertical:hover * { color: var(--bg) !important; }
.vertical__name { font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(28px,3.4vw,52px); line-height: .9; color: var(--ink); }
.vertical__tag { font-family: var(--font-mono); font-size: 12px; color: var(--muted); white-space: nowrap; }

/* channel index — numbered spec-sheet rows in place of pill chips */
.chips { display: grid; grid-template-columns: repeat(3, 1fr);
  column-gap: clamp(24px, 4vw, 64px); counter-reset: chip;
  border-top: 1px solid var(--line); }
.chip { font-family: var(--font-mono); font-size: 12px; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-soft);
  display: flex; align-items: baseline; gap: 12px;
  padding: 13px 0; border-bottom: 1px solid var(--line);
  transition: color .3s; }
.chip::before { counter-increment: chip; content: counter(chip, decimal-leading-zero);
  color: var(--accent); font-size: 10px; letter-spacing: .08em; }
.chip:hover { color: var(--accent); }
@media (max-width: 980px){ .chips { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px){ .chips { grid-template-columns: 1fr; } }

/* ============================================================
   STATS
   ============================================================ */
.stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--line);
  border: 1px solid var(--line); }
@media (max-width: 860px){ .stats { grid-template-columns: repeat(2,1fr); } }
.stat { background: var(--bg); padding: clamp(28px,3vw,46px); }
.stat__num { font-family: var(--font-display); font-size: clamp(48px,7vw,104px); line-height: .85;
  color: var(--ink); }
.stat__num .u { color: var(--accent); }
.stat__label { font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); margin-top: 16px; }
.banner { margin-top: 1px; background: var(--accent); color: var(--bg);
  padding: clamp(22px,2.4vw,34px) clamp(24px,3vw,46px);
  display: flex; flex-wrap: wrap; gap: 16px 40px; align-items: baseline; justify-content: space-between; }
.banner b { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(24px,3vw,44px); }
.banner span { font-family: var(--font-mono); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }

/* ============================================================
   TEAM
   ============================================================ */
.team { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--line);
  border: 1px solid var(--line); }
@media (max-width: 760px){ .team { grid-template-columns: 1fr; } }
.member { background: var(--bg); }
.member__media { aspect-ratio: 4/5; background:
    repeating-linear-gradient(45deg, var(--bg-2) 0 12px, var(--bg-3) 12px 24px);
  position: relative; display: grid; place-items: center; }
.member__media::after { content: "◐"; color: var(--muted-2); font-size: 56px; }
.member__info { padding: 22px clamp(20px,2.4vw,30px) 30px; display: flex; align-items: baseline;
  justify-content: space-between; gap: 14px; }
.member__name { font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(22px,2.2vw,32px); color: var(--ink); line-height: .95; }
.member__role { font-family: var(--font-mono); font-size: 11px; color: var(--accent);
  text-transform: uppercase; letter-spacing: .06em; }
.member__bio { padding: 0 clamp(20px,2.4vw,30px) 30px; margin-top: -6px;
  color: var(--muted); font-size: 14px; line-height: 1.6; }

/* org tree — circuit-board org chart; traces draw in on scroll, power pulses run the lines */
.orgtree { position: relative; }
/* faint motherboard texture behind the board */
.orgtree::before { content: ""; position: absolute; inset: -30px -10px; pointer-events: none; opacity: .35;
  background-size: 260px 260px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cg fill='none' stroke='rgba(143,160,176,0.13)' stroke-width='1'%3E%3Cpath d='M20 0v40h60v50'/%3E%3Cpath d='M180 260v-50h-40v-60'/%3E%3Cpath d='M260 90h-50v70'/%3E%3Cpath d='M0 200h60'/%3E%3C/g%3E%3Cg fill='none' stroke-width='1'%3E%3Crect x='77' y='87' width='6' height='6' stroke='rgba(73,244,254,0.18)'/%3E%3Crect x='137' y='147' width='6' height='6' stroke='rgba(73,244,254,0.18)'/%3E%3Crect x='57' y='197' width='6' height='6' stroke='rgba(143,160,176,0.2)'/%3E%3C/g%3E%3C/svg%3E"); }
.orgtree__stem { width: 1px; height: clamp(48px,6vw,72px); background: var(--line); margin: 0 auto;
  position: relative; transform: scaleY(0); transform-origin: top; transition: transform .45s linear; }
.orgtree.on .orgtree__stem { transform: scaleY(1); }
/* power pulse running down the stem */
.orgtree__stem::after { content: ""; position: absolute; top: 0; left: -1px; width: 3px; height: 12px;
  background: var(--accent); box-shadow: 0 0 10px var(--accent); opacity: 0; }
.orgtree.on .orgtree__stem::after { animation: tracePulse 2.6s linear 1.4s infinite; }
@keyframes tracePulse {
  0% { top: -4%; opacity: 0; }
  10% { opacity: 1; }
  85% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}
@keyframes spinePulse {
  0% { top: -12px; opacity: 0; }
  10% { opacity: 1; }
  85% { opacity: 1; }
  100% { top: calc(100% - 46px); opacity: 0; }
}
.orgtree__branches { display: grid; grid-template-columns: repeat(3,1fr);
  gap: 0 clamp(16px,2.2vw,32px); position: relative; padding-top: clamp(28px,3.4vw,40px); }
/* horizontal rail connecting the three branches, spanning column centers */
.orgtree__rail { position: absolute; top: 0; left: calc(100% / 6); right: calc(100% / 6);
  height: 1px; background: var(--line);
  transform: scaleX(0); transform-origin: center; transition: transform .4s linear .45s; }
.orgtree.on .orgtree__rail { transform: scaleX(1); }
.branch { position: relative; }
/* tick from the rail down to each branch head */
.branch::before { content: ""; position: absolute; top: calc(-1 * clamp(28px,3.4vw,40px));
  left: 50%; width: 1px; height: clamp(28px,3.4vw,40px); background: var(--line);
  transform: scaleY(0); transform-origin: top; transition: transform .3s linear; }
/* rail div is the first grid child, so branches are children 2-4 */
.branch:nth-child(2)::before { transition-delay: .85s; }
.branch:nth-child(3)::before { transition-delay: .95s; }
.branch:nth-child(4)::before { transition-delay: 1.05s; }
.orgtree.on .branch::before { transform: scaleY(1); }
/* solder pad at the rail junction */
.branch::after { content: ""; position: absolute; top: calc(-1 * clamp(28px,3.4vw,40px) - 3px);
  left: 50%; margin-left: -3px; width: 6px; height: 6px; background: var(--bg);
  border: 1px solid var(--accent); box-shadow: 0 0 8px rgba(73,244,254,.35);
  opacity: 0; transition: opacity .3s ease .85s; }
.orgtree.on .branch::after { opacity: 1; }
.branch__head { border: 1px solid var(--line); background: var(--bg-2); position: relative;
  padding: 16px clamp(14px,1.6vw,20px); text-align: center;
  opacity: 0; transform: translateY(6px);
  transition: opacity .4s var(--ease) 1.2s, transform .4s var(--ease) 1.2s, border-color .4s ease 1.5s; }
.orgtree.on .branch__head { opacity: 1; transform: none; border-color: var(--line-2); }
.branch__dept { font-family: var(--font-mono); font-size: 11px; color: var(--accent);
  text-transform: uppercase; letter-spacing: .08em; display: block; }
.branch__lead { font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(16px,1.5vw,20px); color: var(--ink); display: block; margin-top: 6px; }
/* bus spine down each column; every member hangs off it */
.branch__list { position: relative; margin-top: 14px; padding-left: 26px; display: grid; gap: 10px; }
.branch__list::before { content: ""; position: absolute; left: 8px; top: -14px; bottom: 34px;
  width: 1px; background: var(--line);
  transform: scaleY(0); transform-origin: top; transition: transform .5s linear 1.5s; }
.orgtree.on .branch__list::before { transform: scaleY(1); }
/* power pulse running down the bus */
.branch__list::after { content: ""; position: absolute; left: 7px; top: -12px; width: 3px; height: 12px;
  background: var(--accent); box-shadow: 0 0 10px var(--accent); opacity: 0; }
.orgtree.on .branch__list::after { animation: spinePulse 3s linear 2.1s infinite; }
.branch:nth-child(3) .branch__list::after { animation-delay: 3s; }
.branch:nth-child(4) .branch__list::after { animation-delay: 3.9s; }
/* sub-team divider inside a branch list — a label, not a person: no trace, no pad */
.branch__sub { font-family: var(--font-mono); font-size: 10px; color: var(--accent);
  text-transform: uppercase; letter-spacing: .1em; padding: 12px 0 0 2px;
  opacity: 0; transition: opacity .5s ease 1.9s; }
.orgtree.on .branch__sub { opacity: 1; }
.mini { position: relative; display: flex; align-items: center; gap: 12px; background: var(--bg);
  border: 1px solid var(--line); padding: 10px 12px;
  opacity: 0; transform: translateX(-8px);
  transition: opacity .45s var(--ease), transform .45s var(--ease),
    border-color .4s ease-out, box-shadow .4s ease-out, background-color .4s ease-out; }
.mini.on { opacity: 1; transform: none; }
/* the bus pulse lights each card as it passes */
.mini.lit { border-color: var(--line-2); background-color: #081426;
  box-shadow: 0 0 16px rgba(73,244,254,.14), inset 0 0 22px rgba(73,244,254,.05); }
.mini.lit::after { opacity: 1; box-shadow: 0 0 12px rgba(73,244,254,.75); }
.mini.lit::before { background: var(--line-2); }
/* trace from the bus into the card */
.mini::before { content: ""; position: absolute; left: -18px; top: 50%; width: 18px; height: 1px;
  background: var(--line); transform: scaleX(0); transform-origin: left; transition: transform .25s linear; }
.mini.on::before { transform: scaleX(1); }
/* solder pad where the trace meets the bus */
.mini::after { content: ""; position: absolute; left: -21px; top: 50%; margin-top: -3px;
  width: 6px; height: 6px; background: var(--bg); border: 1px solid var(--accent);
  opacity: 0; transition: opacity .3s ease .2s; }
.mini.on::after { opacity: 1; box-shadow: 0 0 8px rgba(73,244,254,.35); }
.mini img { width: 48px; height: 60px; object-fit: cover; flex: none; display: block; }
.mini__ph { width: 48px; height: 60px; flex: none; border: 1px solid var(--line);
  background: repeating-linear-gradient(45deg, var(--bg-2) 0 8px, var(--bg-3) 8px 16px);
  display: grid; place-items: center; font-family: var(--font-mono); font-size: 9px;
  color: var(--muted-2); text-transform: uppercase; }
.mini__name { font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(15px,1.4vw,18px); color: var(--ink); line-height: 1; }
.mini__role { font-family: var(--font-mono); font-size: 10px; color: var(--accent);
  text-transform: uppercase; letter-spacing: .06em; display: block; margin-top: 5px; }
@media (max-width: 1100px){
  .orgtree__branches { grid-template-columns: repeat(2,1fr); gap: 28px clamp(16px,2.5vw,28px); padding-top: 0; }
  .orgtree__rail, .branch::before, .branch::after { display: none; }
  .orgtree__stem { display: none; }
}
@media (max-width: 760px){
  .orgtree__branches { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce){
  .orgtree__stem, .orgtree__rail, .branch::before, .branch__list::before,
  .mini::before { transform: none; }
  .branch__head, .branch::after, .mini, .mini::after, .branch__sub { opacity: 1; transform: none; }
  .orgtree__stem::after, .branch__list::after { display: none; }
}

/* media placeholder generic */
.media-ph { position: relative; background:
    repeating-linear-gradient(45deg, var(--bg-2) 0 14px, var(--bg-3) 14px 28px);
  display: grid; place-items: center; border: 1px solid var(--line); }
.media-ph__tag { font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em;
  color: var(--muted); text-transform: uppercase;
  border: 1px solid var(--line-2); border-radius: 999px; padding: 8px 16px; }
.media-ph__tag::before { content: "▶ "; color: var(--accent); }

/* ============================================================
   CONTACT / CTA SECTION
   ============================================================ */
.cta-block { text-align: center; padding: clamp(60px,7vw,104px) 0; position: relative; }
.cta-block .display--lg { margin: 0 auto; max-width: 16ch; }
.cta-block .cta { margin-top: 40px; }
/* any section with a photo backdrop behind its content */
.section--media { overflow: hidden; isolation: isolate; }
.section--media .section__bg { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: -2; filter: brightness(.42) saturate(.7) contrast(1.05); }
.section--media::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(4,11,22,.94) 0%, rgba(4,11,22,.72) 50%, rgba(4,11,22,.96) 100%); }
/* CTA with a photo backdrop behind the headline */
.cta-block--media { overflow: hidden; isolation: isolate;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cta-block--media .cta-block__bg { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: -2; filter: brightness(.5) saturate(.8) contrast(1.05); }
.cta-block--media::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(4,11,22,.92) 0%, rgba(4,11,22,.55) 52%, rgba(4,11,22,.94) 100%); }

/* contact page form */
.contact-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(40px,6vw,90px); }
@media (max-width: 860px){ .contact-grid { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 26px; }
.field label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); }
.field input, .field textarea, .field select {
  background: transparent; border: none; border-bottom: 1px solid var(--line);
  color: var(--ink); font-family: var(--font-body); font-size: 17px; padding: 12px 0;
  transition: border-color .3s; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--accent); }
.field textarea { resize: vertical; min-height: 110px; }
.field select option { background: var(--bg-2); }
.submit { margin-top: 10px; }

.info-list { display: flex; flex-direction: column; gap: 26px; }
.info-row { border-top: 1px solid var(--line); padding-top: 18px; }
.info-row .k { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent); display: block; margin-bottom: 8px; }
.info-row .v { font-size: clamp(18px,2vw,24px); color: var(--ink); }
.info-row a.v:hover { color: var(--accent); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { border-top: 1px solid var(--line); background: var(--bg-3); padding: clamp(60px,7vw,110px) 0 40px; }
.footer__big { font-family: var(--font-display); text-transform: uppercase; color: var(--ink);
  font-size: clamp(54px,13vw,200px); line-height: .82; letter-spacing: .01em; }
.footer__big .o { color: var(--accent); }
.footer__cols { display: grid; grid-template-columns: repeat(4,1fr); gap: 30px;
  margin-top: clamp(40px,5vw,70px); border-top: 1px solid var(--line); padding-top: 40px; }
@media (max-width: 760px){ .footer__cols { grid-template-columns: repeat(2,1fr); } }
.footer__col h4 { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 16px; }
.footer__col a, .footer__col p { display: block; color: var(--ink-soft); font-size: 14px; margin-bottom: 10px; }
.footer__col a:hover { color: var(--accent); }
.footer__bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px;
  margin-top: 50px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted-2); }

/* ============================================================
   BEFORE / AFTER REVEAL SLIDER
   ============================================================ */
.ba-section { padding: clamp(70px,9vw,150px) 0; }
.ba {
  position: relative; aspect-ratio: 16/9; overflow: hidden;
  border: 1px solid var(--line); background: var(--bg-3);
  user-select: none; touch-action: pan-y; cursor: ew-resize;
}
@media (max-width: 620px){ .ba { aspect-ratio: 3/4; } }
.ba__pane { position: absolute; inset: 0; display: grid; place-items: center; }
.ba__pane--after  { z-index: 1; background: radial-gradient(circle at 50% 42%, rgba(73,244,254,.20), #07101f 70%); }
.ba__pane--before { z-index: 2; background: repeating-linear-gradient(45deg, #0a1322 0 18px, #0d1b36 18px 36px);
  clip-path: inset(0 calc(100% - var(--pos,50%)) 0 0); }
.ba__pane img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* registration tuned for the current empty/full waiting-room pair (template-matched).
   The AI "full" image is framed ~10% tighter than the real photo, so we zoom the
   empty image in to match. Re-tune (or remove) if either image is replaced. */
.ba__pane--before img { transform-origin: 50% 50%; transform: translateX(15px) scale(1.10); }
.ba__ph { z-index: 0; font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); border: 1px solid var(--line-2);
  border-radius: 999px; padding: 9px 18px; }
/* divider + grip */
.ba__handle { position: absolute; top: 0; bottom: 0; left: var(--pos,50%); z-index: 3;
  width: 2px; background: var(--accent); transform: translateX(-1px);
  box-shadow: 0 0 18px rgba(73,244,254,.55); }
.ba__grip { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 56px; height: 56px; border-radius: 50%; background: var(--accent); color: var(--bg);
  display: grid; place-items: center; cursor: ew-resize; box-shadow: 0 6px 26px rgba(0,0,0,.45); }
.ba__grip::before { content: "⟷"; font-family: var(--font-mono); font-weight: 700; font-size: 20px; }
.ba__handle:focus-visible { outline: none; }
.ba__handle:focus-visible .ba__grip { outline: 3px solid var(--ink); outline-offset: 3px; }
/* corner tags */
.ba__tag { position: absolute; bottom: 18px; z-index: 4; font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink);
  background: rgba(4,11,22,.6); border: 1px solid var(--line-2); padding: 7px 14px;
  border-radius: 999px; backdrop-filter: blur(4px); }
.ba__tag--l { left: 18px; }
.ba__tag--r { right: 18px; }
.ba__hint { display: flex; align-items: center; gap: 10px; margin-top: 22px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted-2); }
.ba__hint::before { display: none; }

/* ============================================================
   INNER PAGES — page hero, breadcrumb, sub-grid, prose, blog
   ============================================================ */
/* compact hero for inner pages (service hubs, subpages, blog, legal) */
.page-hero { position: relative; padding: clamp(150px,20vh,250px) 0 clamp(40px,6vw,80px); overflow: hidden; }
.page-hero__bg { position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(110% 90% at 80% 20%, rgba(73,244,254,.12), transparent 55%),
    radial-gradient(130% 120% at 50% 40%, var(--bg-2), var(--bg) 62%), var(--bg); }
.page-hero .lead { max-width: 60ch; margin-top: 26px; }
.page-hero .cta { margin-top: 44px; }
/* hero with a full-bleed background image (real footage, color + navy scrim) */
.page-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.page-hero__scrim { position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(4,11,22,.58) 0%, rgba(4,11,22,.74) 55%, rgba(5,17,31,.93) 100%); }
.page-hero--media { padding-top: clamp(170px,22vh,280px); }
/* subtle fade of the hero image out toward the left edge (behind the text) */
.page-hero--media .page-hero__img {
  -webkit-mask-image: linear-gradient(to left, #000 42%, rgba(0,0,0,0) 90%);
          mask-image: linear-gradient(to left, #000 42%, rgba(0,0,0,0) 90%);
}

/* breadcrumb */
.crumbs { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 22px; display: flex; flex-wrap: wrap; gap: 8px; }
.crumbs a { color: var(--muted); } .crumbs a:hover { color: var(--accent); }
.crumbs span { color: var(--accent); }
.crumbs .sep { color: var(--muted-2); }

/* sub-service link grid (hub → children) */
.sub-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--line);
  border: 1px solid var(--line); }
@media (max-width:900px){ .sub-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width:560px){ .sub-grid { grid-template-columns: 1fr; } }
.sub-link { background: var(--bg); padding: clamp(24px,3vw,38px); display: flex; flex-direction: column;
  justify-content: space-between; min-height: 180px; transition: background .35s var(--ease); }
.sub-link:hover { background: var(--bg-2); }
.sub-link__no { font-family: var(--font-mono); font-size: 12px; color: var(--accent); }
.sub-link__name { font-family: var(--font-display); text-transform: uppercase; line-height: .98;
  font-size: clamp(20px,2vw,28px); color: var(--ink); margin-top: 24px; }
.sub-link__arrow { font-family: var(--font-mono); color: var(--muted); margin-top: 12px; }
.sub-link:hover .sub-link__arrow { color: var(--accent); }

/* prose — readable article/legal body */
.prose { max-width: 74ch; }
.prose > * + * { margin-top: 1.1em; }
.prose p, .prose li { color: var(--ink-soft); font-size: clamp(16px,1.3vw,18px); line-height: 1.7; }
.prose h2 { font-family: var(--font-display); text-transform: uppercase; color: var(--ink);
  font-size: clamp(26px,3.2vw,44px); line-height: 1; margin-top: 1.6em; letter-spacing: .01em; }
.prose h3 { font-family: var(--font-body); font-weight: 600; color: var(--ink);
  font-size: clamp(19px,1.8vw,24px); margin-top: 1.5em; }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.prose ul, .prose ol { padding-left: 1.3em; } .prose li { margin-top: .5em; }
.prose strong { color: var(--ink); }
.prose blockquote { border-left: 2px solid var(--accent); padding-left: 22px; color: var(--muted);
  font-style: italic; }

/* article meta line */
.article-meta { font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); display: flex; flex-wrap: wrap; gap: 18px; margin-top: 18px; }
.article-meta b { color: var(--accent); font-weight: 700; }

/* blog index grid */
.post-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--line);
  border: 1px solid var(--line); }
@media (max-width:900px){ .post-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width:560px){ .post-grid { grid-template-columns: 1fr; } }
.post-card { background: var(--bg); padding: clamp(26px,3vw,40px); display: flex; flex-direction: column;
  justify-content: space-between; min-height: 280px; transition: background .35s var(--ease); }
.post-card:hover { background: var(--bg-2); }
.post-card__tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.post-card__title { font-family: var(--font-display); text-transform: uppercase; line-height: 1;
  font-size: clamp(20px,2vw,28px); color: var(--ink); margin-top: 26px; }
.post-card__more { font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; color: var(--muted); margin-top: 20px; }
.post-card:hover .post-card__more { color: var(--accent); }

/* faq / accordion-ish list reused as definition blocks */
.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); padding: clamp(20px,2.4vw,30px) 0; }
.faq__q { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(18px,1.8vw,26px);
  color: var(--ink); line-height: 1.05; }
.faq__a { color: var(--muted); margin-top: 12px; line-height: 1.6; max-width: 70ch; }

/* ============================================================
   FEATURE / IMAGE BLOCKS (stock imagery, treated to fit)
   ============================================================ */
/* duotone-ish treatment keeps stock photos on-brand (editorial, not generic) */
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line);
  border: 1px solid var(--line); }
.feature--flip .feature__media { order: 2; }
@media (max-width: 860px){ .feature { grid-template-columns: 1fr; } .feature--flip .feature__media { order: 0; } }
.feature__media { position: relative; min-height: 360px; background: var(--bg-3); overflow: hidden; }
.feature__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.06) brightness(.72); }
/* video in a feature stays in COLOR (real footage), navy gradient overlay handles the mood */
.feature__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* portrait video: frame it like a phone reel, centered, no crop, no full-cell overlay */
.feature__media--portrait { display: grid; place-items: center; min-height: 480px;
  padding: clamp(24px,3vw,44px); background: var(--bg-3); }
.feature__media--portrait::after { display: none; }
.feature__media--portrait video { position: static; inset: auto; width: auto; height: 100%;
  max-height: 520px; aspect-ratio: 9/16; object-fit: cover; border-radius: 8px;
  border: 1px solid var(--line-2); box-shadow: 0 24px 60px rgba(0,0,0,.5); }
.feature__media::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(12,27,54,.30), rgba(4,11,22,.55)); }
.feature__body { padding: clamp(30px,4vw,58px); display: flex; flex-direction: column;
  justify-content: center; background: var(--bg); }
.feature__body .ix { margin-bottom: 16px; }
.feature__body h3 { font-family: var(--font-display); text-transform: uppercase; color: var(--ink);
  font-size: clamp(28px,3.4vw,50px); line-height: .95; }
.feature__body p { color: var(--muted); margin-top: 16px; line-height: 1.6; max-width: 46ch; }

.img-band { position: relative; height: clamp(240px,30vw,400px); overflow: hidden;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.img-band img, .img-band video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) brightness(.55) contrast(1.05); }
.img-band::after { content: ""; position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(circle at 50% 45%, rgba(73,244,254,.12), transparent 60%),
    linear-gradient(180deg, rgba(4,11,22,.55), rgba(4,11,22,.72)); }
.img-band__cap { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center;
  text-align: center; padding: 0 24px; }

/* process steps */
.steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--line);
  border: 1px solid var(--line); }
@media (max-width: 900px){ .steps { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 520px){ .steps { grid-template-columns: 1fr; } }
.step { background: var(--bg); padding: clamp(26px,3vw,40px); min-height: 220px; display: flex;
  flex-direction: column; justify-content: space-between; transition: background .35s var(--ease); }
.step:hover { background: var(--bg-2); }
.step__no { font-family: var(--font-mono); font-size: 12px; color: var(--accent); }
.step__title { font-family: var(--font-display); text-transform: uppercase; color: var(--ink);
  font-size: clamp(20px,2vw,28px); line-height: .98; margin-top: 26px; }
.step__body { color: var(--muted); font-size: 14px; line-height: 1.55; margin-top: 12px; }

/* ============================================================
   REEL TILE — 3 vertical videos side by side in ONE tile,
   playing together on a synced 6s loop
   ============================================================ */
.reel-tile { display: flex; gap: 0; max-width: 840px; margin: 0 auto; overflow: hidden;
  border: 1px solid var(--line-2); border-radius: 6px; background: var(--bg-3);
  box-shadow: 0 30px 80px rgba(0,0,0,.42); }
.reel-cell { flex: 1 1 0; position: relative; aspect-ratio: 9/16; min-width: 0; }
.reel-cell + .reel-cell { border-left: 1px solid rgba(255,255,255,.07); }
.reel-cell video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* ============================================================
   REVEAL ANIMATION
   ============================================================ */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal[data-d="1"]{ transition-delay: .08s; }
.reveal[data-d="2"]{ transition-delay: .16s; }
.reveal[data-d="3"]{ transition-delay: .24s; }

@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
  .reveal{ opacity: 1; transform: none; }
}

/* ============================================================
   RESPONSIVE — top bar / hero
   ============================================================ */
@media (max-width: 980px){
  .topbar__clocks .topbar__clock--usa { display: none; }
  .hero__figure { width: 46%; opacity: .5; }
  .hero__top { grid-template-columns: 1fr; gap: 18px; }
}
@media (max-width: 680px){
  :root { --frame: 8px; }
  .topbar { padding: 18px 18px; font-size: 10px; }
  .topbar__mail { display: none; }
  .topbar__clocks { gap: 16px; }
  .brandmark { top: 50px; left: 18px; }
  .wrap { padding: 0 18px; }
  .hero__top h2 { font-size: 30px; }

  /* mobile hero: map becomes a dimmed full-bleed background behind the text */
  .hero { justify-content: flex-end; }
  .hero--logo { justify-content: center; }
  .hero__figure {
    display: flex; position: absolute; inset: 0; width: 100%;
    border-left: none; opacity: 1; z-index: -1;
  }
  .hero__figure video, .hero__figure img { opacity: .5; }
  .hero__figure:has(video)::before, .hero__figure:has(img)::before {
    background: linear-gradient(180deg,
      rgba(4,11,22,.66) 0%, rgba(4,11,22,.58) 45%, rgba(4,11,22,.80) 72%, rgba(4,11,22,.95) 100%);
  }
  .hero__figure video, .hero__figure img { opacity: .42; }
  .hero__grid-lines { opacity: .2; }
}

/* ============================================================
   HERO HEADLINE — mask reveal + parallax hooks
   ============================================================ */
.hero__line { display: block; overflow: hidden; }
.hero__line > span { display: block; transform: translateY(115%);
  transition: transform 1.1s var(--ease); }
.hero.is-ready .hero__line:nth-child(1) > span { transform: translateY(0); transition-delay: .15s; }
.hero.is-ready .hero__line:nth-child(2) > span { transform: translateY(0); transition-delay: .27s; }
.hero__figure, .hero__headline { will-change: transform; }

/* ============================================================
   SELECTED WORK — horizontal drag strip
   ============================================================ */
.work { padding: clamp(48px,5.5vw,84px) 0; overflow: hidden; }
/* work carousel: centered active card, arrows + dots (no free scroll) */
.work__viewport { overflow: hidden; }
.work__rail {
  display: flex; gap: 24px; width: max-content;
  transition: transform .65s var(--ease); will-change: transform;
}
.work-card.is-off { opacity: .35; cursor: pointer; }
.work__viewport + .testi-fan__nav { margin-top: clamp(26px,3vw,40px); }
.work-card { flex: 0 0 clamp(280px, 32vw, 460px);
  background: var(--bg-3); border: 1px solid var(--line); overflow: hidden;
  transition: border-color .4s var(--ease), transform .5s var(--ease), opacity .5s var(--ease); }
.work-card:hover { border-color: var(--line-2); transform: translateY(-6px); }
.work-card__media { aspect-ratio: 4/3; position: relative; overflow: hidden;
  background: repeating-linear-gradient(45deg, var(--bg-2) 0 16px, var(--bg-3) 16px 32px); }
.work-card__media::after { content: "▶ media"; position: absolute; left: 16px; bottom: 16px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); border: 1px solid var(--line-2); border-radius: 999px; padding: 6px 13px; }
.work-card__media .tag { position: absolute; top: 16px; left: 16px; font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .1em; color: var(--accent); }
.work-card__info { padding: 22px clamp(18px,2vw,26px) 26px; display: flex; align-items: baseline;
  justify-content: space-between; gap: 16px; }
.work-card__title { font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(22px,2vw,30px); line-height: .96; color: var(--ink); }
.work-card__meta { font-family: var(--font-mono); font-size: 11px; color: var(--muted);
  text-transform: uppercase; white-space: nowrap; }
.work__hint { display: flex; align-items: center; gap: 10px; margin-top: 28px;
  padding: 0 calc(var(--frame) + 26px); font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); }
.work__hint::before { display: none; }

/* hero figure as video / image slot */
.hero__figure video, .work-card__media video, .member__media video { width: 100%; height: 100%;
  object-fit: cover; display: block; }
.hero__figure .media-ph__tag { position: relative; z-index: 1; }

/* real media: image/video fills the slot, placeholder treatment auto-suppressed when present */
.hero__figure img, .hero__figure video, .work-card__media img, .work-card__media video, .member__media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1;
}
/* vertical reel in a landscape card: bias the crop toward the top (faces) */
.work-card__media video { object-position: center 22%; }
.hero__figure:has(img) .media-ph__tag, .hero__figure:has(video) .media-ph__tag { display: none; }
.work-card__media:has(img)::after, .work-card__media:has(video)::after { display: none; }
.work-card__media:has(img), .work-card__media:has(video) { background: #05070d; }
.member__media:has(img)::after { display: none; }
.member__media:has(img) { background: #05070d; }
/* legibility gradient + index tag float above the photo/video */
.work-card__media:has(img)::before, .work-card__media:has(video)::before { content: ""; position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(to top, rgba(4,11,22,.88), rgba(4,11,22,0) 58%); }
.work-card__media .tag { z-index: 3; }
/* hero figure: cinematic left-edge fade so the headline stays readable */
.hero__figure:has(img)::before, .hero__figure:has(video)::before { content: ""; position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(90deg, var(--bg) 0%, rgba(4,11,22,.35) 26%, rgba(4,11,22,0) 60%); }


/* ============================================================
   ASSET SLOTS — striped placeholders to be filled from shoots
   (drop the file in /assets/ and replace the .media-ph with
   an <img> or <video>; the slot classes keep the layout)
   ============================================================ */
.ph-slot { margin-top: clamp(26px,3vw,42px); }
.media-ph--169 { aspect-ratio: 16/9; }
.media-ph--band { aspect-ratio: 32/11; min-height: 200px; }
.media-ph .media-ph__tag { text-align: center; padding: 14px 18px; }

/* ============================================================
   TESTIMONIAL RAIL — client words: drag sideways, click to play
   ============================================================ */
.testi__rail { display: flex; gap: 14px; overflow-x: auto; overscroll-behavior-x: contain; cursor: grab;
  scroll-snap-type: x proximity; padding-bottom: 12px; scrollbar-width: none; }
.testi__rail::-webkit-scrollbar { display: none; }
.testi__rail.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.testi__rail.is-dragging * { pointer-events: none; }
.testi-card { flex: 0 0 clamp(300px,36vw,540px); scroll-snap-align: start;
  background: var(--bg-3); border: 1px solid var(--line); overflow: hidden;
  transition: border-color .4s var(--ease); }
.testi-card:hover { border-color: var(--line-2); }
.testi-card__media { position: relative; aspect-ratio: 16/9; background: #000; cursor: pointer; }
.testi-card__media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.testi-card__play { position: absolute; inset: 0; display: grid; place-items: center;
  background: linear-gradient(to top, rgba(4,11,22,.55), rgba(4,11,22,.05) 60%);
  transition: opacity .3s ease; }
.testi-card__play span { width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: var(--bg); font-size: 19px; padding-left: 4px;
  box-shadow: 0 0 24px rgba(73,244,254,.35); transition: transform .3s var(--ease); }
.testi-card:hover .testi-card__play span { transform: scale(1.08); }
.testi-card.is-playing .testi-card__play { opacity: 0; pointer-events: none; }
.testi-card__info { padding: 16px clamp(14px,1.6vw,20px) 18px; display: flex;
  align-items: baseline; justify-content: space-between; gap: 12px; }
.testi-card__name { font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(17px,1.6vw,22px); color: var(--ink); line-height: 1; }
.testi-card__meta { font-family: var(--font-mono); font-size: 10px; color: var(--accent);
  text-transform: uppercase; letter-spacing: .07em; white-space: nowrap; }

/* ---- fan carousel layout for the testimonial cards ---- */
.testi-fan { position: relative; }
.testi-fan__stage { position: relative; height: clamp(430px, 46vw, 680px); }
.testi-fan__stage .testi-card { position: absolute; left: 50%; top: 0;
  width: clamp(230px, 24vw, 340px); opacity: 0; border-radius: 10px;
  transform: translate(-50%, 8rem) scale(.6);
  transition: transform .55s cubic-bezier(.3,1.35,.4,1), opacity .4s ease;
  will-change: transform; }
.testi-fan__stage .testi-card.is-hidden { pointer-events: none; }
.testi-fan__nav { display: flex; align-items: center; justify-content: center;
  gap: clamp(18px,2.4vw,30px); margin-top: 20px; position: relative; z-index: 20; }
.testi-fan__arrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); border: 1px solid var(--line);
  padding: 10px 18px; background: var(--bg);
  transition: color .3s ease, border-color .3s ease; }
.testi-fan__arrow:hover { color: var(--accent); border-color: var(--line-2); }
.testi-fan__dots { display: flex; gap: 7px; }
.testi-fan__dots span { width: 10px; height: 2px; background: rgba(143,160,176,.3);
  transition: background .3s ease, transform .3s ease; }
.testi-fan__dots span.on { background: var(--accent); transform: scaleX(1.7); }
.testi-fan__stage .testi-card__media { aspect-ratio: 4 / 7; }
.testi-fan__stage .testi-card__info { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  padding: 40px 16px 16px;
  background: linear-gradient(to top, rgba(4,11,22,.88), rgba(4,11,22,0)); }
@media (max-width: 640px){ .testi-fan__stage { height: clamp(430px, 120vw, 560px); } }

/* ---- manifesto big-number stack (The Standard section) ---- */
/* ---- stat cycler: one giant stat at a time, auto-rotating ----
   no-JS / reduced-motion fallback: all four stats render stacked;
   html.js-stats (set by script.js) switches to the one-at-a-time view */
.statcycle { text-align: center; }
.statcycle__row { display: flex; justify-content: center; align-items: baseline; gap: 18px; }
.statcycle__bars { justify-content: center; }
.statcycle__index { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em;
  color: var(--muted); display: none; }
html.js-stats .statcycle__index { display: inline; }
.statcycle__items { margin-top: clamp(22px,3vw,40px); }
.statcycle__item { margin-bottom: clamp(28px,3.5vw,48px); }
.statcycle__item:last-child { margin-bottom: 0; }
html.js-stats .statcycle__item { display: none; margin-bottom: 0; }
html.js-stats .statcycle__item.is-on { display: block; animation: statIn .55s var(--ease) both; }
@keyframes statIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.statcycle__val { font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(64px,10.5vw,180px); line-height: .95; color: var(--ink); }
.statcycle__val .u { color: var(--accent); }
.statcycle__label { font-family: var(--font-mono); font-size: 12px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .09em; margin-top: 14px; }
.statcycle__bars { display: none; gap: 8px; margin-top: clamp(22px,3vw,36px); }
html.js-stats .statcycle__bars { display: flex; }
.statcycle__bars span { width: 34px; height: 2px; background: var(--line); transition: background .3s; }
.statcycle__bars span.on { background: var(--accent); }

/* ---- mobile: tighten vertical run-up before section labels ----
   placed at end of file so it wins over the base .work/.cta-block rules */
@media (max-width: 680px){
  .section { padding-top: 34px; padding-bottom: 34px; }
  .section--tight { padding-top: 26px; padding-bottom: 26px; }
  .work { padding-top: 30px; padding-bottom: 30px; }
  .cta-block { padding-top: 40px; padding-bottom: 40px; }
}

/* ---- contact page: welcome video (portrait, before the form) ---- */
.contact-video {
  width: min(330px, 80vw); margin: 0 auto; aspect-ratio: 9 / 16;
  border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  background: #05070d; box-shadow: 0 24px 70px rgba(0,0,0,.45);
}
.contact-video video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- topbar clock: visitor-local time + city ---- */
.topbar__clock .clk-city { margin-right: 6px; }
.topbar__clock .clk-time { color: var(--ink); font-weight: 700; }
.topbar__clock .clk-tz { margin-left: 6px; }

/* ambient (autoplay) fan: cards are always playing, so no play badge */
.testi-fan__stage[data-ambient] .testi-card__play { display: none; }

/* GHL lead-form embed: reserve height so the column doesn't collapse
   before the embed script sizes the iframe */
.lead-embed iframe { min-height: 520px; display: block; }