/* ============================================================
   MJOHN SOLUTIONS  ·  Website Theme  v3.0.0  ("Mission Control")
   Technology. Media. Production.
   ------------------------------------------------------------
   A NEW look, built alongside v2 (style.css) without replacing it.
   No glass, no blur, no floating pill. Solid instrument panels
   framed by HUD corner brackets and hairline gridlines, with a
   live, reactive hero. Blue = technology, Amber = moments.
   Do not overwrite older theme files: ship new looks as new
   versioned files (theme-v4.css, ...).
   ============================================================ */

:root {
  --ink-0: #04050a;
  --ink-1: #070912;
  --ink-2: #0a0d18;
  --panel: #0b0e1a;
  --panel-2: #0e1220;
  --line: rgba(140, 170, 220, 0.14);
  --line-2: rgba(140, 170, 220, 0.28);

  --text: #eef3fb;
  --text-soft: #aeb9cd;
  --muted: #6c7890;

  --blue: #2ba9e0;
  --blue-hi: #62cbff;
  --blue-deep: #1668c9;

  --amber: #f0b357;
  --amber-hi: #ffd089;
  --amber-deep: #d98c2b;

  --grad-tech: linear-gradient(100deg, var(--blue-hi), var(--blue) 48%, var(--blue-deep));
  --grad-warm: linear-gradient(100deg, var(--amber-hi), var(--amber) 48%, var(--amber-deep));
  --grad-mix: linear-gradient(100deg, var(--blue-hi), var(--blue) 40%, var(--amber) 92%);

  --font-display: 'Space Grotesk', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', Consolas, monospace;

  --nav-h: 64px;
  --wrap: 1240px;
  --gutter: clamp(20px, 4vw, 46px);
  --drawer-w: min(80vw, 340px);

  /* Sharper, instrument-panel geometry (v2 was soft/rounded) */
  --r-lg: 6px;
  --r-md: 4px;
  --r-sm: 3px;

  --accent: var(--blue);
  --accent-hi: var(--blue-hi);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--ink-0);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
::selection { background: var(--blue); color: #03101c; }

/* ---------- Site background: static gridlines + drifting glow + vignette ---------- */
body::before {
  content: '';
  position: fixed;
  inset: -20%;
  z-index: -3;
  background:
    radial-gradient(42% 34% at 84% 4%, rgba(22, 104, 201, 0.20), transparent 68%),
    radial-gradient(38% 32% at 2% 32%, rgba(43, 169, 224, 0.10), transparent 70%),
    radial-gradient(34% 30% at 82% 92%, rgba(217, 140, 43, 0.09), transparent 70%),
    var(--ink-0);
  animation: drift 30s ease-in-out infinite alternate;
}
@keyframes drift {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(2%, -1.6%, 0) scale(1.05); }
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(rgba(140, 170, 220, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(140, 170, 220, 0.045) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 92%);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 92%);
}

/* ---------- Scanline film over everything (very subtle) ---------- */
.scanlines {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0,
    rgba(0, 0, 0, 0) 2px,
    rgba(0, 0, 0, 0.16) 3px
  );
  mix-blend-mode: overlay;
  opacity: 0.35;
}

/* ---------- Scroll progress rail ---------- */
.scan-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  z-index: 120;
  background: var(--grad-mix);
  box-shadow: 0 0 12px rgba(92, 198, 255, 0.5);
}

/* ---------- Custom targeting cursor (desktop, pointer devices only) ---------- */
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  border: 1px solid rgba(98, 203, 255, 0.55);
  border-radius: 50%;
  pointer-events: none;
  z-index: 130;
  mix-blend-mode: screen;
  transition: width 0.18s, height 0.18s, margin 0.18s, border-color 0.18s, opacity 0.3s;
  opacity: 0;
}
.cursor-ring::before {
  content: '';
  position: absolute;
  inset: 50%;
  width: 3px;
  height: 3px;
  margin: -1.5px 0 0 -1.5px;
  background: var(--blue-hi);
  border-radius: 50%;
}
.cursor-ring.hot { width: 46px; height: 46px; margin: -23px 0 0 -23px; border-color: rgba(255, 208, 137, 0.8); }
@media (hover: none), (pointer: coarse) { .cursor-ring { display: none; } }

/* ---------- Type ---------- */
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.04; letter-spacing: -0.03em; font-weight: 700; }
.display { font-size: clamp(46px, 8vw, 116px); letter-spacing: -0.045em; line-height: 0.96; }
h2 { font-size: clamp(30px, 4.6vw, 58px); }
h3 { font-size: clamp(19px, 2.2vw, 26px); }
p { color: var(--text-soft); max-width: 64ch; }
.lead { font-size: clamp(17px, 1.55vw, 20px); color: var(--text-soft); }

.grad-text {
  background: var(--grad-tech);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: grad-slide 7s linear infinite;
}
.grad-text.warm { background: var(--grad-warm); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; }
@keyframes grad-slide { to { background-position: 220% 0; } }

/* Mono marker used site-wide: [ SEC.0X // LABEL ] */
.marker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--blue-hi);
}
.marker::before { content: '['; color: var(--muted); }
.marker::after { content: ']'; color: var(--muted); }
.marker .n { color: var(--muted); }
.marker.warm { color: var(--amber-hi); }

/* Section header with a hairline rule that runs to the edge */
.sec-head { margin-bottom: clamp(30px, 5vw, 56px); }
.sec-head .rule { display: flex; align-items: center; gap: 18px; margin-bottom: 22px; }
.sec-head .rule::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line-2), transparent); }
.sec-head h2 { max-width: 20ch; }
.sec-head p { margin-top: 14px; max-width: 60ch; }

/* ---------- HUD corner brackets (4 explicit spans) ---------- */
.hud { position: relative; }
.hud > .c {
  position: absolute;
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--accent-hi);
  opacity: 0.55;
  pointer-events: none;
  transition: opacity 0.3s, width 0.3s, height 0.3s;
  z-index: 3;
}
.hud > .c.tl { top: 10px; left: 10px; border-right: 0; border-bottom: 0; }
.hud > .c.tr { top: 10px; right: 10px; border-left: 0; border-bottom: 0; }
.hud > .c.bl { bottom: 10px; left: 10px; border-right: 0; border-top: 0; }
.hud > .c.br { bottom: 10px; right: 10px; border-left: 0; border-top: 0; }
.hud.warm > .c { border-color: var(--amber-hi); }
.hud:hover > .c { opacity: 1; width: 22px; height: 22px; }

/* 2-corner lightweight frame for smaller panels */
.frame { position: relative; }
.frame::before, .frame::after {
  content: '';
  position: absolute;
  width: 14px; height: 14px;
  border-color: var(--accent-hi);
  border-style: solid;
  opacity: 0.5;
  pointer-events: none;
  transition: opacity 0.25s;
}
.frame::before { top: 9px; left: 9px; border-width: 1.5px 0 0 1.5px; }
.frame::after { bottom: 9px; right: 9px; border-width: 0 1.5px 1.5px 0; }
.frame:hover::before, .frame:hover::after { opacity: 1; }
.frame.warm::before, .frame.warm::after { border-color: var(--amber-hi); }

/* ---------- Layout ---------- */
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
section { position: relative; padding: clamp(66px, 8.5vw, 124px) 0; }
.divider { height: 1px; background: linear-gradient(90deg, transparent, var(--line-2), transparent); }

/* ---------- Buttons (sharp, HUD styled) ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 28px;
  border-radius: var(--r-md);
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  border: 0;
  transition: transform 0.16s, box-shadow 0.25s, background 0.2s, color 0.2s, border-color 0.2s;
  will-change: transform;
}
.btn:active { transform: translateY(0) scale(0.98); }
.btn-primary { background: var(--grad-tech); color: #03101c; }
.btn-primary:hover { box-shadow: 0 0 30px 2px rgba(92, 198, 255, 0.4); }
.btn-warm { background: var(--grad-warm); color: #1c1002; }
.btn-warm:hover { box-shadow: 0 0 30px 2px rgba(240, 179, 87, 0.36); }
.btn-ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--line-2);
}
.btn-ghost:hover { border-color: var(--blue-hi); color: var(--blue-hi); box-shadow: inset 0 0 0 1px rgba(92, 198, 255, 0.25); }
.btn .arr { transition: transform 0.2s; }
.btn:hover .arr { transform: translateX(4px); }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

.text-link { display: inline-flex; align-items: center; gap: 8px; color: var(--blue-hi); font-weight: 600; font-size: 14.5px; font-family: var(--font-mono); letter-spacing: 0.06em; }
.text-link .arr { transition: transform 0.2s; }
.text-link:hover .arr { transform: translateX(4px); }
.text-link.warm { color: var(--amber-hi); }

/* ---------- Nav: solid instrument bar (NOT a floating pill) ---------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: rgba(4, 5, 10, 0.92);
  border-bottom: 1px solid var(--line);
  transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.nav::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(92, 198, 255, 0.6), transparent);
  opacity: 0;
  transition: opacity 0.3s;
}
.nav.scrolled { background: rgba(3, 4, 8, 0.97); box-shadow: 0 10px 34px rgba(0, 0, 0, 0.5); }
.nav.scrolled::after { opacity: 1; }
.nav-inner {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 var(--gutter);
}
.brand { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.brand img {
  height: 32px; width: auto;
  /* logo art is dark-on-light; lift to white for dark UI (swap when a real white logo exists) */
  filter: invert(1) hue-rotate(180deg) saturate(1.4) brightness(1.1);
}
.brand .sys {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.22em;
  color: var(--muted);
  border-left: 1px solid var(--line-2);
  padding-left: 12px;
  text-transform: uppercase;
}
.brand .sys b { color: var(--blue-hi); font-weight: 600; }
.nav-spacer { flex: 1; }
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links a {
  padding: 9px 14px;
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--menu-text, var(--text-soft));
  transition: color 0.2s, background 0.2s;
}
.nav-links a:hover { color: var(--menu-text-hover, var(--text)); background: rgba(255, 255, 255, 0.05); }
.nav-links a.active { color: var(--menu-active, var(--blue-hi)); }
.nav-cta {
  margin-left: 10px;
  padding: 10px 18px !important;
  background: var(--grad-tech);
  color: #03101c !important;
  font-weight: 700 !important;
  border-radius: var(--r-md);
  box-shadow: 0 0 0 0 rgba(92, 198, 255, 0);
  transition: box-shadow 0.25s !important;
}
.nav-cta:hover { box-shadow: 0 0 22px 2px rgba(92, 198, 255, 0.4); }
.nav-burger { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 10px 12px; }
.nav-burger span { width: 22px; height: 2px; border-radius: 2px; background: var(--burger-color, var(--text)); transition: transform 0.3s, opacity 0.3s; }
@media (max-width: 940px) {
  .nav-burger { display: flex; }
  .nav .nav-links { display: none; }
  .brand .sys { display: none; }
}

/* ---------- Mobile drawer ---------- */
.drawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: var(--drawer-w);
  z-index: 200;
  transform: translateX(102%);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  background: var(--drawer-bg, linear-gradient(200deg, var(--panel-2), var(--ink-1)));
  border-left: 1px solid var(--line-2);
  display: flex;
  flex-direction: column;
  padding: 24px 24px 28px;
  overflow-y: auto;
}
.drawer .brand img { height: 28px; }
.drawer-links { margin-top: 30px; display: flex; flex-direction: column; }
.drawer-links a {
  display: flex; align-items: baseline; gap: 14px;
  padding: 15px 4px;
  border-bottom: 1px solid var(--line);
  color: var(--drawer-text, var(--text));
  font-family: var(--font-display);
  font-size: 19px; font-weight: 600;
  transition: color 0.2s, padding-left 0.25s;
}
.drawer-links a .idx { font-family: var(--font-mono); font-size: 10.5px; color: var(--muted); }
.drawer-links a:hover { color: var(--blue-hi); padding-left: 12px; }
.drawer-cta { margin-top: 26px; }
.drawer-meta { margin-top: auto; padding-top: 28px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); line-height: 2; }
.drawer-meta a { color: var(--blue-hi); }
.backdrop { position: fixed; inset: 0; z-index: 150; background: rgba(2, 3, 6, 0.66); opacity: 0; pointer-events: none; transition: opacity 0.35s; }
.page { transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
body.menu-open { overflow: hidden; }
body.menu-open .page, body.menu-open .nav { transform: translateX(calc(var(--drawer-w) * -0.5)); }
body.menu-open .drawer { transform: translateX(0); }
body.menu-open .backdrop { opacity: 1; pointer-events: auto; }
body.menu-open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.menu-open .nav-burger span:nth-child(2) { opacity: 0; }
body.menu-open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: calc(var(--nav-h) + 64px) 0 90px;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.hero-canvas { position: absolute; inset: 0; z-index: 0; opacity: 0.9; }
.hero-vignette {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(80% 70% at 30% 45%, transparent 40%, rgba(4, 5, 10, 0.7) 100%);
}
.hero-grid {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(140, 170, 220, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(140, 170, 220, 0.05) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(70% 60% at 50% 40%, #000 20%, transparent 100%);
  -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000 20%, transparent 100%);
}
.hero-inner { position: relative; z-index: 5; width: 100%; max-width: 940px; }
.hero .display { margin: 20px 0 26px; max-width: 13ch; }
.hero .lead { max-width: 50ch; margin-bottom: 34px; }

/* decode/scramble eyebrow: each glyph fades in */
.decode .g { opacity: 0; }
.decode.done .g { opacity: 1; transition: opacity 0.02s; }

/* headline line-reveal (clip + slide up), preserves gradient word */
.hero-title .ln { display: block; overflow: hidden; }
.hero-title .ln > span { display: block; transform: translateY(105%); animation: lineUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.hero-title .ln:nth-child(2) > span { animation-delay: 0.12s; }
.hero-title em { font-style: normal; }
@keyframes lineUp { to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .hero-title .ln > span { transform: none; animation: none; } }

.hud-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 40px; }
.hud-chip {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 15px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: rgba(10, 13, 24, 0.6);
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-soft);
}
.hud-chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--blue-hi); box-shadow: 0 0 10px rgba(92, 198, 255, 0.85); animation: pulse-dot 2.4s ease-in-out infinite; }
.hud-chip.warm::before { background: var(--amber); box-shadow: 0 0 10px rgba(240, 179, 87, 0.85); }
@keyframes pulse-dot { 50% { opacity: 0.3; } }

.scroll-hint {
  position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 6;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.3em; color: var(--muted);
}
.scroll-hint::after { content: ''; width: 1px; height: 30px; background: linear-gradient(var(--blue-hi), transparent); animation: hint-pulse 1.8s ease-in-out infinite; }
@keyframes hint-pulse { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }

/* ---------- Status + marquee strip ---------- */
.statusbar {
  display: flex; align-items: center; gap: 18px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: rgba(6, 8, 14, 0.7);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted);
}
.statusbar .badge { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; padding: 12px var(--gutter); border-right: 1px solid var(--line); color: var(--text-soft); }
.statusbar .badge b { color: var(--blue-hi); font-weight: 600; }
.marquee { overflow: hidden; flex: 1; }
.marquee-track { display: flex; gap: 52px; width: max-content; animation: mq 38s linear infinite; white-space: nowrap; }
.marquee-track span { color: var(--text-soft); }
.marquee-track .d { color: var(--blue-hi); }
.marquee-track .d.w { color: var(--amber); }
@keyframes mq { to { transform: translateX(-50%); } }
.statusbar:hover .marquee-track { animation-play-state: paused; }
@media (max-width: 720px) { .statusbar .badge { display: none; } }

/* ---------- Reveals ---------- */
.reveal { opacity: 0; transform: translateY(32px); transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1), transform 0.85s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal.in { opacity: 1; transform: none; }
.reveal-l { opacity: 0; transform: translateX(-40px); transition: opacity 0.85s ease, transform 0.85s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal-l.in { opacity: 1; transform: none; }
.reveal-r { opacity: 0; transform: translateX(40px); transition: opacity 0.85s ease, transform 0.85s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal-r.in { opacity: 1; transform: none; }
/* Once .split stacks to one column (900px and below), a sideways slide starts
   40px past the screen edge and the page scrolls horizontally until it animates
   in: 20px of wobble on a 390px phone. Slide up instead, like .reveal does. */
@media (max-width: 900px) {
  .reveal-l, .reveal-r { transform: translateY(32px); }
  .reveal-l.in, .reveal-r.in { transform: none; }
}

/* ---------- Split + framed visual ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 68px); align-items: center; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
.visual {
  position: relative; border-radius: var(--r-md); border: 1px solid var(--line);
  aspect-ratio: 4 / 3; overflow: hidden;
  background:
    radial-gradient(70% 90% at 28% 18%, rgba(43, 169, 224, 0.16), transparent 60%),
    radial-gradient(60% 70% at 86% 88%, rgba(22, 104, 201, 0.12), transparent 65%),
    var(--panel);
}
.visual .grid-tex {
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(140, 170, 220, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(140, 170, 220, 0.06) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(90% 90% at 50% 50%, #000 20%, transparent 100%);
  -webkit-mask-image: radial-gradient(90% 90% at 50% 50%, #000 20%, transparent 100%);
}
.visual .ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--muted); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; text-align: center; padding: 20px; }

/* ---------- Stats ---------- */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 760px) { .stats { grid-template-columns: 1fr; } }
.stat {
  position: relative; padding: 34px 28px;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel);
  overflow: hidden;
}
.stat .scan { position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--blue-hi), transparent); animation: sweep 3.4s ease-in-out infinite; }
@keyframes sweep { 0%, 100% { opacity: 0.2; transform: translateX(-30%); } 50% { opacity: 1; transform: translateX(30%); } }
.stat b { display: block; font-family: var(--font-display); font-size: clamp(42px, 5.2vw, 66px); font-weight: 700; letter-spacing: -0.03em; background: var(--grad-tech); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.stat span { font-size: 13.5px; color: var(--muted); }

/* ---------- Divisions board (6 interactive tiles) ---------- */
.board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 900px) { .board { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .board { grid-template-columns: 1fr; } }
.tile {
  position: relative;
  display: flex; flex-direction: column;
  min-height: 260px;
  padding: 26px 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--panel);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.25s, border-color 0.25s, box-shadow 0.3s, background 0.25s;
}
.tile .reticle {
  position: absolute; inset: 0; opacity: 0; transition: opacity 0.3s; pointer-events: none;
  background: radial-gradient(260px 200px at var(--mx, 50%) var(--my, 30%), rgba(92, 198, 255, 0.16), transparent 68%);
}
.tile:hover { transform: translateY(-6px); border-color: rgba(92, 198, 255, 0.5); box-shadow: 0 26px 60px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(92, 198, 255, 0.14); }
.tile:hover .reticle { opacity: 1; }
.tile.warm .reticle { background: radial-gradient(260px 200px at var(--mx, 50%) var(--my, 30%), rgba(240, 179, 87, 0.16), transparent 68%); }
.tile.warm:hover { border-color: rgba(240, 179, 87, 0.55); box-shadow: 0 26px 60px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(240, 179, 87, 0.14); }
.tile .idx { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.24em; color: var(--muted); }
.tile.warm .idx { color: var(--amber-hi); }
.tile:not(.warm) .idx { color: var(--blue-hi); }
.tile h3 { margin: 16px 0 10px; }
.tile p { font-size: 13.5px; color: var(--muted); margin-bottom: 18px; }
.tile .go { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue-hi); }
.tile.warm .go { color: var(--amber-hi); }
.tile .go .arr { transition: transform 0.2s; }
.tile:hover .go .arr { transform: translateX(5px); }
.tile .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.tile .tags i { font-style: normal; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-soft); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 4px 8px; }

/* ---------- Statement band ---------- */
.band { position: relative; padding: clamp(84px, 12vw, 150px) 0; overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(7, 9, 15, 0.55); }
.band .glow { position: absolute; inset: -30% -10%; background: radial-gradient(46% 60% at 30% 50%, rgba(43, 169, 224, 0.16), transparent 65%), radial-gradient(40% 50% at 82% 60%, rgba(240, 179, 87, 0.08), transparent 65%); }
.band-quote { position: relative; font-family: var(--font-display); font-size: clamp(27px, 4.2vw, 54px); font-weight: 700; letter-spacing: -0.02em; max-width: 22ch; line-height: 1.12; }

/* ---------- Process pipeline ---------- */
.pipeline { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 900px) { .pipeline { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .pipeline { grid-template-columns: 1fr; } }
.node { position: relative; padding: 28px 24px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel); overflow: hidden; transition: border-color 0.25s, transform 0.25s; }
.node:hover { border-color: rgba(92, 198, 255, 0.45); transform: translateY(-4px); }
.node .step { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); display: inline-flex; align-items: center; gap: 8px; }
.node .step::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--blue-hi); box-shadow: 0 0 12px rgba(92, 198, 255, 0.7); }
.node h3 { margin: 14px 0 10px; }
.node p { font-size: 13.5px; color: var(--muted); }

/* ---------- Industries grid ---------- */
.ind-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 860px) { .ind-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .ind-grid { grid-template-columns: 1fr; } }
.ind {
  position: relative; padding: 24px 22px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel);
  transition: border-color 0.2s, transform 0.2s, background 0.2s;
}
.ind:hover { border-color: rgba(92, 198, 255, 0.5); transform: translateY(-4px); background: var(--panel-2); }
.ind .no { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; color: var(--muted); }
.ind b { display: block; font-family: var(--font-display); font-size: 17px; margin: 12px 0 6px; }
.ind span { font-size: 13px; color: var(--muted); }

/* ---------- CTA banner ---------- */
.cta {
  position: relative; overflow: hidden;
  border: 1px solid var(--line-2); border-radius: var(--r-lg);
  padding: clamp(46px, 6vw, 84px) clamp(28px, 5vw, 72px);
  background:
    radial-gradient(620px 300px at 84% 0%, rgba(43, 169, 224, 0.20), transparent 65%),
    radial-gradient(520px 320px at 8% 100%, rgba(240, 179, 87, 0.12), transparent 62%),
    var(--panel);
}
.cta .scan { position: absolute; top: 0; left: 8%; right: 8%; height: 1px; background: linear-gradient(90deg, transparent, var(--blue-hi), transparent); }
.cta h2 { max-width: 20ch; margin: 14px 0; position: relative; }
.cta .lead { position: relative; max-width: 52ch; }
.cta .btn-row { margin-top: 28px; position: relative; }

/* ---------- Footer ---------- */
footer { border-top: 1px solid var(--line); background: rgba(5, 6, 12, 0.9); padding: clamp(48px, 7vw, 80px) 0 30px; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 38px; margin-bottom: 46px; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) {
  /* One stacked column of left-aligned links leaves a wide empty gutter on a
     phone and reads as misaligned. Centre the whole footer at this width. */
  .footer-grid { grid-template-columns: 1fr; text-align: center; justify-items: center; gap: 30px; }
  .footer-brand, .footer-col { width: 100%; }
  .footer-brand p { text-align: center; }
  .footer-social { justify-content: center; }
  .footer-col a { padding: 8px 0; }
  .footer-col a:hover { padding-left: 0; }   /* the hover nudge fights centring */
  .footer-bottom { flex-direction: column; justify-content: center; text-align: center; gap: 12px; }
  .footer-bottom .legal { justify-content: center; }
}
.footer-brand img { height: 38px; width: auto; filter: invert(1) hue-rotate(180deg) saturate(1.4) brightness(1.1); }
.footer-brand p { font-size: 13.5px; margin-top: 15px; }
.footer-tag { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--blue-hi); margin-top: 16px; }
.footer-col b { display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); margin-bottom: 15px; }
.footer-col a { display: block; padding: 6px 0; font-size: 14px; color: var(--text-soft); transition: color 0.2s, padding-left 0.2s; }
.footer-col a:hover { color: var(--blue-hi); padding-left: 5px; }
.footer-bottom { border-top: 1px solid var(--line); padding-top: 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--muted); }
.footer-bottom .legal { display: flex; gap: 18px; }
.footer-bottom a:hover { color: var(--blue-hi); }
.ver-stamp { color: var(--blue-hi); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 4px 9px; letter-spacing: 0.14em; }

/* Social icons (footer) - color driven by --social-color or per-brand inline */
.footer-social { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.footer-social .soc {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  color: var(--social-color, var(--blue-hi));
  transition: color 0.2s, border-color 0.2s, transform 0.2s, background 0.2s;
}
.footer-social .soc:hover { border-color: currentColor; transform: translateY(-2px); background: rgba(255, 255, 255, 0.03); }
.footer-social .soc svg { width: 18px; height: 18px; display: block; }

/* ============================================================
   Inner-page components (v3 language). Styles the existing
   build.js markup so every page adopts the Mission Control look:
   solid panels, hairline borders, HUD corner ticks, mono markers.
   ============================================================ */

/* Eyebrow == bracketed mono marker */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.26em; text-transform: uppercase; color: var(--blue-hi); margin-bottom: 18px;
}
.eyebrow::before { content: '['; color: var(--muted); }
.eyebrow::after { content: ']'; color: var(--muted); }
.eyebrow.warm { color: var(--amber-hi); }

/* Section head */
.section-head { max-width: 780px; margin-bottom: clamp(30px, 5vw, 56px); }
.section-head h2 { max-width: 20ch; }
.section-head p { margin-top: 14px; }
.center { text-align: center; }
.center .section-head { margin-left: auto; margin-right: auto; }
.center .eyebrow { justify-content: center; }

/* Background layers (static in v3; parallax dropped) */
.layer { position: absolute; inset: -12% -6%; pointer-events: none; }
.layer-glow-blue { background: radial-gradient(520px 400px at 80% 22%, rgba(43,169,224,0.22), transparent 65%), radial-gradient(380px 360px at 92% 66%, rgba(22,104,201,0.16), transparent 62%); }
.layer-glow-warm { background: radial-gradient(460px 360px at 12% 82%, rgba(240,179,87,0.14), transparent 64%); }
.layer-grid {
  background-image: linear-gradient(rgba(140,170,220,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(140,170,220,0.05) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(72% 60% at 55% 40%, #000 25%, transparent 100%);
  -webkit-mask-image: radial-gradient(72% 60% at 55% 40%, #000 25%, transparent 100%);
}

/* Page hero (inner pages) */
.page-hero { position: relative; overflow: hidden; padding: calc(var(--nav-h) + clamp(72px,10vw,120px)) 0 clamp(44px,6vw,80px); border-bottom: 1px solid var(--line); }
.page-hero .wrap { position: relative; z-index: 3; }
.page-hero h1 { font-size: clamp(38px, 6vw, 76px); letter-spacing: -0.035em; max-width: 16ch; }
.page-hero .lead { margin-top: 18px; max-width: 60ch; }
.breadcrumb { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 24px; }
.breadcrumb a:hover { color: var(--blue-hi); }
.breadcrumb .sep { opacity: 0.4; }

/* Generic card (solid HUD panel with corner tick) */
.card {
  position: relative; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 30px 26px; overflow: hidden;
  transition: transform 0.25s, border-color 0.25s, box-shadow 0.3s, background 0.25s;
}
.card::after { content: ''; position: absolute; top: 10px; left: 10px; width: 13px; height: 13px; border-top: 1.5px solid var(--blue-hi); border-left: 1.5px solid var(--blue-hi); opacity: 0.32; transition: opacity 0.25s; }
.card:hover { transform: translateY(-5px); border-color: rgba(92,198,255,0.45); box-shadow: 0 24px 55px rgba(0,0,0,0.5); }
.card:hover::after { opacity: 1; }
.card.warm-hover::after { border-color: var(--amber-hi); }
.card.warm-hover:hover { border-color: rgba(240,179,87,0.5); }
.card h3 { margin-bottom: 10px; }
.card p { font-size: 14px; }
.card .num { font-family: var(--font-mono); font-size: 10.5px; color: var(--muted); letter-spacing: 0.24em; display: block; margin-bottom: 16px; }
.card-glow { position: absolute; inset: 0; opacity: 0; transition: opacity 0.3s; pointer-events: none; background: radial-gradient(340px 220px at var(--mx,50%) var(--my,0%), rgba(92,198,255,0.12), transparent 70%); }
.card:hover .card-glow { opacity: 1; }
.card.warm-hover .card-glow { background: radial-gradient(340px 220px at var(--mx,50%) var(--my,0%), rgba(240,179,87,0.12), transparent 70%); }

/* Grids */
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* Chips (mono, readable) */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  padding: 8px 15px; border: 1px solid var(--line); border-radius: var(--r-sm);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.02em; color: var(--text-soft);
  background: transparent; cursor: pointer; transition: all 0.2s;
}
.chip:hover { border-color: var(--blue-hi); color: var(--blue-hi); }
.chip.active { background: var(--grad-tech); border-color: transparent; color: #03101c; font-weight: 700; }
.chip.static { cursor: default; }
.chip.static:hover { border-color: var(--line); color: var(--text-soft); }

/* Service list */
.svc-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 20px; }
@media (max-width: 900px) { .svc-columns { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .svc-columns { grid-template-columns: 1fr; } }
.svc-item {
  display: flex; align-items: center; gap: 12px; padding: 13px 15px;
  border: 1px solid var(--line); border-radius: var(--r-sm); font-size: 13.5px; color: var(--text-soft);
  background: var(--panel); transition: border-color 0.2s, color 0.2s, transform 0.2s, background 0.2s;
}
.svc-item::before { content: '\25B9'; color: var(--blue-hi); }
.svc-item:hover { border-color: rgba(92,198,255,0.5); color: var(--text); transform: translateX(4px); background: var(--panel-2); }
.warm-theme .svc-item::before { color: var(--amber); }
.warm-theme .svc-item:hover { border-color: rgba(240,179,87,0.5); }

/* Related cards */
.related { border-top: 1px solid var(--line); }
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 860px) { .related-grid { grid-template-columns: 1fr; } }
.related-card {
  position: relative; padding: 22px; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--panel); transition: border-color 0.2s, transform 0.2s, background 0.2s;
}
.related-card:hover { border-color: rgba(92,198,255,0.5); transform: translateY(-4px); background: var(--panel-2); }
.related-card b { display: block; font-family: var(--font-display); font-size: 17px; margin-bottom: 6px; }
.related-card span { font-size: 13px; color: var(--muted); }

/* Tabs */
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 38px; }
.tab-panels { position: relative; }
.tab-panel { display: none; }
.tab-panel.active { display: block; animation: panel-in 0.45s cubic-bezier(0.16,1,0.3,1); }
@keyframes panel-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Portfolio */
.folio-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 980px) { .folio-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .folio-grid { grid-template-columns: 1fr; } }
.folio-card { position: relative; border-radius: var(--r-md); border: 1px solid var(--line); overflow: hidden; background: var(--panel); transition: transform 0.25s, border-color 0.25s, box-shadow 0.3s; }
.folio-card:hover { transform: translateY(-5px); border-color: rgba(92,198,255,0.45); box-shadow: 0 22px 50px rgba(0,0,0,0.45); }
.folio-card.hide { display: none; }
.folio-media { aspect-ratio: 16/11; position: relative; display: flex; align-items: center; justify-content: center; background: radial-gradient(80% 100% at 20% 0%, rgba(43,169,224,0.14), transparent 55%), var(--panel-2); color: var(--muted); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; }
.folio-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.folio-card.warm .folio-media { background: radial-gradient(80% 100% at 20% 0%, rgba(240,179,87,0.14), transparent 55%), var(--panel-2); }
.folio-body { padding: 20px 20px 22px; }
.folio-body .cat { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--blue-hi); }
.folio-card.warm .folio-body .cat { color: var(--amber-hi); }
.folio-body b { display: block; font-family: var(--font-display); font-size: 18px; margin: 8px 0 6px; }
.folio-body p { font-size: 13px; color: var(--muted); }

/* Accordion */
.acc { border-top: 1px solid var(--line); }
.acc-item { border-bottom: 1px solid var(--line); }
.acc-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 4px; background: none; border: 0; cursor: pointer; color: var(--text); font-family: var(--font-display); font-size: clamp(16px,1.8vw,19px); font-weight: 600; text-align: left; transition: color 0.2s; }
.acc-q:hover { color: var(--blue-hi); }
.acc-q .plus { font-size: 22px; color: var(--blue-hi); transition: transform 0.3s; flex: 0 0 auto; }
.acc-item.open .acc-q .plus { transform: rotate(45deg); }
.acc-a { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; }
.acc-a p { padding: 0 4px 22px; font-size: 15px; }

/* Forms */
.form-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); padding: clamp(24px,4vw,44px); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 700px) { .form-grid { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 8px; }
.field.full { grid-column: 1 / -1; }
.field label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.field input, .field select, .field textarea { padding: 13px 15px; background: var(--ink-1); border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--text); font-family: var(--font-body); font-size: 15px; transition: border-color 0.2s, box-shadow 0.2s; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue-hi); box-shadow: 0 0 0 3px rgba(92,198,255,0.14); }
.field textarea { resize: vertical; min-height: 120px; }
.form-note { font-size: 13px; color: var(--muted); margin-top: 16px; }
.more-fields { display: none; }
.more-fields.open { display: contents; }
.toggle-more { background: none; border: 0; cursor: pointer; color: var(--blue-hi); font-family: var(--font-mono); font-weight: 600; font-size: 13px; padding: 4px 0; text-align: left; letter-spacing: 0.04em; }

/* 404 */
.err-hero { min-height: 84svh; display: flex; align-items: center; text-align: center; overflow: hidden; position: relative; }
.err-hero .wrap { position: relative; z-index: 3; }
.err-code { font-family: var(--font-display); font-size: clamp(110px, 24vw, 300px); font-weight: 700; line-height: 1; background: var(--grad-tech); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: -0.05em; }

/* Placeholder marker */
.ph-note { display: inline-block; padding: 3px 10px; border: 1px dashed rgba(240,179,87,0.5); border-radius: var(--r-sm); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; color: var(--amber); background: rgba(240,179,87,0.06); }

/* Visual frame: corner ticks + inner grid (about page + home split) */
.visual::before, .visual::after { content: ''; position: absolute; width: 20px; height: 20px; border-color: rgba(92,198,255,0.6); border-style: solid; z-index: 2; }
.visual::before { top: 13px; left: 13px; border-width: 1.5px 0 0 1.5px; }
.visual::after { bottom: 13px; right: 13px; border-width: 0 1.5px 1.5px 0; }
.visual.warm::before, .visual.warm::after { border-color: rgba(240,179,87,0.6); }
.visual-inner-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(140,170,220,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(140,170,220,0.06) 1px, transparent 1px); background-size: 32px 32px; mask-image: radial-gradient(90% 90% at 50% 50%, #000 20%, transparent 100%); -webkit-mask-image: radial-gradient(90% 90% at 50% 50%, #000 20%, transparent 100%); }

/* Warm theme (photography-flavored pages): amber accents */
.warm-theme .eyebrow { color: var(--amber-hi); }
.warm-theme .card::after { border-color: var(--amber-hi); }
.warm-theme .card:hover { border-color: rgba(240,179,87,0.45); }
.warm-theme .chip.active { background: var(--grad-warm); color: #1c1002; }
.warm-theme .breadcrumb a:hover { color: var(--amber-hi); }

/* ---------- Phone layout: centre the page content ----------
   On a narrow screen every block becomes one column, and left-aligned text
   with a wide empty right gutter reads as misaligned. Centre the hero, the
   section headings and the calls to action. Body copy inside cards stays
   left-aligned, because centred multi-line paragraphs are harder to read. */
@media (max-width: 640px) {
  .hero-inner { text-align: center; }

  /* Every inner page (booking, portfolio, gallery, about, contact...) uses
     .page-hero, not .hero-inner. Missing it left those heroes left-aligned
     while the home page was centred. */
  .page-hero .wrap { text-align: center; }
  .page-hero h1, .page-hero .lead { max-width: 100%; margin-left: auto; margin-right: auto; }
  .page-hero .breadcrumb, .page-hero .eyebrow, .page-hero .btn-row { justify-content: center; }

  /* The display face is set tight (line-height under 1). At phone sizes that
     makes stacked lines look like they are colliding, so give it some air. */
  .display, .page-hero h1 { line-height: 1.08; }
  .hero .display, .hero .lead { max-width: 100%; margin-left: auto; margin-right: auto; }
  .hero .btn-row, .hero .hud-row { justify-content: center; }
  .hero .marker, .hero .eyebrow { justify-content: center; }

  .sec-head { text-align: center; }
  .sec-head h2, .sec-head p { max-width: 100%; margin-left: auto; margin-right: auto; }
  .sec-head .rule { justify-content: center; }
  .sec-head .rule::after { display: none; }

  .cta { text-align: center; }
  .cta .btn-row { justify-content: center; }

  .btn-row .btn { width: 100%; justify-content: center; }
}

/* The footer wordmark replaces the logo image. */
.footer-name { display: inline-block; font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text); }
.footer-name:hover { color: var(--blue-hi); }

/* ---------- Open gallery + lightbox ---------- */
.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 980px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } }
.gallery-item { margin: 0; }
.gallery-media { aspect-ratio: 1/1; position: relative; overflow: hidden; border-radius: var(--r-sm, 10px); border: 1px solid var(--line); background: var(--panel-2); display: flex; align-items: center; justify-content: center; color: var(--muted); font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; transition: transform 0.25s, border-color 0.25s; }
.gallery-media[data-media-filled] { cursor: zoom-in; }
.gallery-media[data-media-filled]:hover { transform: translateY(-3px); border-color: rgba(92,198,255,0.45); }
.gallery-media img, .gallery-media video { width: 100%; height: 100%; object-fit: cover; display: block; }

.gallery-group { margin-bottom: 34px; }
.gallery-group-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.gallery-group-head b { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--blue-hi); white-space: nowrap; }
.gallery-rule { flex: 1; height: 1px; background: var(--line); }
@media (max-width: 560px) { .gallery-group-head { justify-content: center; } .gallery-rule { display: none; } }

.lightbox { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; padding: 24px; background: rgba(4,8,16,0.92); backdrop-filter: blur(4px); cursor: zoom-out; }
.lightbox.open { display: flex; }
.lightbox-stage { max-width: min(1200px, 94vw); max-height: 88vh; display: flex; align-items: center; justify-content: center; }
.lightbox-stage img, .lightbox-stage video { max-width: 100%; max-height: 88vh; width: auto; height: auto; border-radius: var(--r-md); box-shadow: 0 30px 80px rgba(0,0,0,0.6); }
.lightbox-close { position: absolute; top: 18px; right: 22px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .reveal-l, .reveal-r { opacity: 1; transform: none; transition: none; }
  .marquee-track, .grad-text, body::before, .stat .scan, .hud-chip::before { animation: none !important; }
  .cursor-ring { display: none; }
  * { animation-duration: 0.01ms !important; }
}

/* Video media slots fill their frame exactly like images do. */
.folio-media video, [data-media] video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.media-hint { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; opacity: 0.55; text-align: center; padding: 0 10px; }

/* ---------------------------------------------------------------------------
   Legal documents (Privacy, Terms)

   The display headings are sized for hero sections (h2 reaches 58px), which is
   far too loud for a thirteen-section policy. This scope resets the typography
   to something a person can actually read end to end, and auto-numbers the
   sections with a CSS counter so the numbering can never drift from the order.
   --------------------------------------------------------------------------- */
.legal-doc { max-width: 760px; counter-reset: legal-section; }

.legal-doc > p:first-of-type {
  color: var(--muted);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-family: var(--font-mono);
  margin: 0 0 34px;
}

.legal-doc h2 {
  counter-increment: legal-section;
  font-family: var(--font-display);
  font-size: 21px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 46px 0 14px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.legal-doc h2:first-of-type { margin-top: 8px; }

.legal-doc h2::before {
  content: counter(legal-section);
  display: inline-block;
  min-width: 30px;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.02em;
}

.legal-doc h3 {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text);
  margin: 28px 0 10px;
}

.legal-doc p,
.legal-doc li {
  font-size: 15px;
  line-height: 1.75;
  color: var(--text-soft);
  max-width: 68ch;
}
.legal-doc p { margin: 0 0 16px; }

/* The theme sets ul { list-style: none } globally, so restore real bullets. */
.legal-doc ul { list-style: disc; margin: 0 0 20px; padding-left: 22px; }
.legal-doc li { margin-bottom: 10px; }
.legal-doc li::marker { color: var(--accent); }

.legal-doc strong { color: var(--text); font-weight: 600; }

.legal-doc a {
  color: var(--accent-hi);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.legal-doc a:hover { color: var(--text); }

@media (max-width: 640px) {
  .legal-doc h2 { font-size: 19px; margin-top: 36px; padding-top: 20px; }
  .legal-doc p, .legal-doc li { font-size: 14.5px; }
}

/* ---------------------------------------------------------------------------
   Legal page layout: trust strip + sticky contents + document
   --------------------------------------------------------------------------- */
.legal-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
  margin: 0 0 46px;
}
.legal-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 18px 18px 20px;
  transition: border-color 0.25s ease;
}
.legal-card:hover { border-color: var(--line-2); }
.legal-card-icon {
  display: inline-flex;
  width: 34px; height: 34px;
  align-items: center; justify-content: center;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-2);
  color: var(--accent);
  margin-bottom: 12px;
}
.legal-card-icon svg { width: 18px; height: 18px; }
.legal-card h3 {
  font-family: var(--font-body);
  font-size: 14px; font-weight: 600; letter-spacing: 0.01em;
  color: var(--text);
  margin: 0 0 6px;
}
.legal-card p {
  font-size: 13px; line-height: 1.6;
  color: var(--text-soft);
  margin: 0; max-width: none;
}

.legal-layout { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 56px; align-items: start; }

.legal-toc-inner {
  position: sticky; top: calc(var(--nav-h) + 24px);
  border-left: 1px solid var(--line);
  padding-left: 18px;
}
.legal-toc h2 {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 14px; padding: 0; border: 0;
}
.legal-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.legal-toc li { margin: 0 0 2px; }
.legal-toc a {
  display: flex; gap: 10px;
  font-size: 13px; line-height: 1.45;
  color: var(--text-soft);
  text-decoration: none;
  padding: 6px 0;
  transition: color 0.2s ease;
}
.legal-toc a span {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  flex: none; padding-top: 1px;
}
.legal-toc a:hover { color: var(--text); }
.legal-toc a:hover span { color: var(--accent); }

/* Anchored sections must not hide under the fixed nav when jumped to. */
.legal-doc h2 { scroll-margin-top: calc(var(--nav-h) + 20px); }

@media (max-width: 980px) {
  .legal-layout { grid-template-columns: 1fr; gap: 30px; }
  .legal-toc-inner {
    position: static;
    border-left: 0; padding-left: 0;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 18px;
  }
  .legal-toc ol { columns: 2; column-gap: 24px; }
}
@media (max-width: 560px) {
  .legal-toc ol { columns: 1; }
}

/* "Start Your Project" in the menu. ".nav-links a:hover" is more specific
   than ".nav-cta" and swapped the blue for a near-transparent grey, leaving
   dark text on a dark bar. Keep the button's own colours on hover. */
.nav-links a.nav-cta,
.nav-links a.nav-cta:hover { background: var(--grad-tech); color: #03101c !important; }
.nav-links a.nav-cta:hover { box-shadow: 0 0 22px 2px rgba(92, 198, 255, 0.45); filter: brightness(1.08); }

/* Inner-page headers. The first version left a tall empty band under the
   menu, a very large title, and another tall gap before the content. The
   owner asked for all three to come in. The home page's big hero is separate
   (.hero) and is not changed here. */
.page-hero { padding: calc(var(--nav-h) + clamp(26px, 3.5vw, 44px)) 0 clamp(26px, 3vw, 40px); }
.page-hero h1 { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.1; max-width: 24ch; }
.page-hero .lead { margin-top: 12px; }
.page-hero .breadcrumb { margin-bottom: 12px; }
.page-hero + section { padding-top: clamp(32px, 4vw, 52px); }

/* Inner-page headers are centred at every width, as the home page's hero is.
   Before, they were centred only on phones. */
.page-hero .wrap { text-align: center; }
.page-hero h1, .page-hero .lead { margin-left: auto; margin-right: auto; }
.page-hero .breadcrumb, .page-hero .btn-row { justify-content: center; }