/* Level Up Data site styles.
   Palette: deep navy, cobalt, white, charcoal. No green, no orange. */
:root {
  --navy: #071932;
  --navy-deep: #040f20;
  --navy-raised: #0b2244;
  --cobalt: #006ffd;
  --cobalt-dark: #0052c2;
  --cobalt-soft: rgba(0, 111, 253, 0.16);
  --cobalt-bright: #5ba7ff;  /* small text on dark grounds: same hue, readable at pixel-font sizes */
  --white: #ffffff;
  --charcoal: #1b2635;
  --charcoal-2: #263346;
  --line: #21385c;
  --text: #eef3fb;
  --muted: #b3c1d6;
  --font-display: "Sora", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-body: "IBM Plex Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-pixel: "Press Start 2P", "Courier New", monospace;
  --measure: 62ch;
  --gutter: clamp(16px, 4vw, 48px);
  --max: 1240px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--navy);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--white); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: #cfe0ff; }
:focus-visible { outline: 3px solid var(--white); outline-offset: 3px; }
::selection { background: var(--cobalt); color: var(--white); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 4.6vw, 3.9rem); }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.6rem); }
h3 { font-size: clamp(1.15rem, 1.6vw, 1.4rem); }
p { margin: 0 0 1em; max-width: var(--measure); text-wrap: pretty; }
.lede { font-size: clamp(1.05rem, 1.4vw, 1.25rem); color: var(--muted); }
.muted { color: var(--muted); }

.pixel {
  font-family: var(--font-pixel);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  line-height: 1.8;
  text-transform: uppercase;
  color: var(--cobalt-bright);
}
.pixel.white { color: var(--white); }
.eyebrow { margin-bottom: 14px; }

.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.skip {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--white); color: var(--navy); padding: 10px 14px; font-weight: 600;
}
.skip:focus { top: 16px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(7, 25, 50, 0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap { display: flex; align-items: center; gap: 24px; min-height: 76px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.brand svg { width: 62px; height: auto; }
.brand-name { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; letter-spacing: 0.01em; }
.nav-toggle {
  margin-left: auto; display: none;
  background: transparent; color: var(--white); border: 2px solid var(--line);
  min-width: 48px; min-height: 44px; font: inherit; cursor: pointer;
}
.site-nav { margin-left: auto; display: flex; align-items: center; gap: 4px 26px; }
.site-nav a { text-decoration: none; padding: 10px 2px; font-weight: 500; color: var(--muted); }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--white); }
.site-nav .btn { margin-left: 10px; padding: 4px 34px 0; color: var(--white); font-weight: 400; }
.site-nav .btn:hover { color: var(--white); }

@media (max-width: 899px) {
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .js .site-nav { display: none; }
  .js .site-nav.open { display: flex; }
  .site-nav {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--navy-deep); border-bottom: 1px solid var(--line);
    padding: 8px var(--gutter) 20px;
  }
  .site-nav a { padding: 14px 4px; border-bottom: 1px solid var(--line); }
  .site-nav .btn { margin: 16px 0 0; justify-content: center; padding: 4px 34px 0; border-bottom: 0; }
}

/* ---------- Buttons: 8-bit game UI ---------- */
/* Primary = a chunky beveled pixel button with stepped corners (like the logo
   contour). Hover snaps the palette one step brighter and a menu-selector
   arrow blinks in. Press swaps the bevel so the button reads as pushed in.
   No eased transitions: state changes snap, the way 8-bit UI does. */
.btn {
  --btn-bg: var(--cobalt);
  --btn-hi: #4d9aff;
  --btn-lo: #0047b3;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 4px 34px 0;
  font-family: var(--font-pixel); font-weight: 400; font-size: 0.66rem;
  letter-spacing: 0.05em; text-transform: uppercase; line-height: 1.5; text-align: center;
  text-decoration: none; color: var(--white);
  background: var(--btn-bg); border: 0; cursor: pointer;
  clip-path: polygon(
    0 8px, 4px 8px, 4px 4px, 8px 4px, 8px 0,
    calc(100% - 8px) 0, calc(100% - 8px) 4px, calc(100% - 4px) 4px, calc(100% - 4px) 8px, 100% 8px,
    100% calc(100% - 8px), calc(100% - 4px) calc(100% - 8px), calc(100% - 4px) calc(100% - 4px), calc(100% - 8px) calc(100% - 4px), calc(100% - 8px) 100%,
    8px 100%, 8px calc(100% - 4px), 4px calc(100% - 4px), 4px calc(100% - 8px), 0 calc(100% - 8px));
  box-shadow: inset 4px 4px 0 0 var(--btn-hi), inset -4px -4px 0 0 var(--btn-lo);
  transition: none;
}
.btn::before { /* pixel selector arrow, drawn from 3px box-shadow "pixels" */
  content: ""; position: absolute; left: 13px; top: 50%; margin-top: -10px;
  width: 3px; height: 3px; background: transparent; opacity: 0;
  box-shadow:
    0 0, 0 3px, 0 6px, 0 9px, 0 12px, 0 15px, 0 18px,
    3px 3px, 3px 6px, 3px 9px, 3px 12px, 3px 15px,
    6px 6px, 6px 9px, 6px 12px,
    9px 9px;
}
.btn:hover, .btn:focus-visible { --btn-bg: #1a7dff; color: var(--white); }
.btn:hover::before, .btn:focus-visible::before { opacity: 1; animation: sel-blink 0.8s steps(1) infinite; }
.btn:active {
  transform: translate(3px, 3px);
  box-shadow: inset 4px 4px 0 0 var(--btn-lo), inset -4px -4px 0 0 var(--btn-hi);
}
@keyframes sel-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .btn:hover::before, .btn:focus-visible::before { animation: none; } }

/* Secondary = an RPG menu item: no box, just the label with its own selector. */
.btn.ghost {
  background: transparent; clip-path: none; box-shadow: none;
  padding: 4px 12px 0 34px; color: var(--muted);
}
.btn.ghost::before { opacity: 0.45; }
.btn.ghost:hover, .btn.ghost:focus-visible { color: var(--white); background: transparent; }
.btn.ghost:active { transform: translate(2px, 2px); box-shadow: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; }

/* ---------- Sections ---------- */
section { padding: clamp(48px, 7vw, 92px) 0; }
section + section { border-top: 1px solid var(--line); }
.section-head { max-width: 720px; margin-bottom: clamp(28px, 4vw, 48px); }

.grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.card {
  background: var(--charcoal); border: 2px solid var(--charcoal-2);
  padding: 26px 24px 24px; display: flex; flex-direction: column; gap: 10px;
  position: relative;
}
.card h3 { margin: 0; }
.card p { margin: 0; color: var(--muted); font-size: 0.98rem; }
.card .more { margin-top: auto; padding-top: 10px; font-weight: 600; text-decoration: none; }
.card .more::after { content: " \2192"; }
a.card { text-decoration: none; color: inherit; transition: border-color 160ms ease, transform 160ms ease, background-color 160ms ease; }
a.card:hover { border-color: var(--cobalt); transform: translateY(-3px); background: #1e2b3d; }
a.card:hover .more { color: #cfe0ff; }
a.card:focus-visible { border-color: var(--white); }
.card.spec { border-color: var(--cobalt); }
.card.spec::before {
  content: "Specialist service"; position: absolute; top: -12px; left: 20px;
  font-family: var(--font-pixel); font-size: 0.5rem; letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--cobalt); color: var(--white); padding: 6px 8px;
}

.steps { counter-reset: step; display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.steps li { list-style: none; border-top: 2px solid var(--cobalt); padding-top: 14px; }
.steps li::before {
  counter-increment: step; content: "0" counter(step);
  display: block; font-family: var(--font-pixel); font-size: 0.6rem; color: var(--cobalt-bright); margin-bottom: 10px;
}
.steps { padding: 0; margin: 0; }
.steps h3 { margin-bottom: 6px; }
.steps p { margin: 0; color: var(--muted); font-size: 0.98rem; }

.industries { display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 0; list-style: none; }
.industries li {
  border: 2px solid var(--line); padding: 10px 16px; font-family: var(--font-display); font-weight: 500; font-size: 0.95rem;
}

.split { display: grid; gap: 40px; grid-template-columns: 1.1fr 0.9fr; align-items: start; }
@media (max-width: 800px) { .split { grid-template-columns: 1fr; } }

.band { background: var(--navy-deep); }
.band-cobalt { background: var(--cobalt); color: var(--white); }
.band-cobalt .btn { --btn-bg: #ffffff; --btn-hi: #ffffff; --btn-lo: #9db8dd; color: var(--navy); }
.band-cobalt .btn:hover, .band-cobalt .btn:focus-visible { --btn-bg: #e9f2ff; color: var(--navy); }
.band-cobalt .btn.ghost { color: #dbe8ff; }
.band-cobalt .btn.ghost:hover { color: #ffffff; }
.band-cobalt .muted, .band-cobalt .lede { color: #dbe8ff; }

.notice {
  border: 2px dashed var(--line); padding: 14px 18px; color: var(--muted); font-size: 0.95rem;
  display: flex; gap: 12px; align-items: flex-start;
}
.notice .pixel { white-space: nowrap; padding-top: 3px; }
.placeholder { color: var(--cobalt); font-weight: 600; }

/* ---------- Forms ---------- */
form.stack { display: grid; gap: 16px; max-width: 560px; }
label { display: block; font-weight: 600; margin-bottom: 6px; }
input, textarea, select {
  width: 100%; font: inherit; color: var(--text);
  background: var(--navy-deep); border: 2px solid var(--line); padding: 12px 14px; min-height: 48px;
}
input:focus, textarea:focus, select:focus { border-color: var(--cobalt); outline: none; box-shadow: 0 0 0 3px var(--cobalt-soft); }
textarea { min-height: 140px; resize: vertical; }
.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; }
.check input { width: 20px; height: 20px; min-height: 0; margin-top: 4px; }
.form-status { color: var(--muted); font-size: 0.95rem; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); background: var(--navy-deep); padding: 48px 0 32px; color: var(--muted); font-size: 0.95rem; }
.site-footer .cols { display: grid; gap: 28px; grid-template-columns: 1.4fr 1fr 1fr; align-items: start; }
@media (max-width: 700px) { .site-footer .cols { grid-template-columns: 1fr; } }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; align-content: start; }
.site-footer .col-label { color: var(--cobalt-bright); font-size: 0.56rem; margin-bottom: 4px; }
.site-footer a { color: var(--muted); text-decoration: none; }
.site-footer a:hover { color: var(--white); }
[data-email-button] { font: inherit; color: var(--white); background: var(--navy-deep); border: 2px solid var(--cobalt-bright); padding: 6px 10px; cursor: pointer; }
[data-email-button]:hover { background: var(--cobalt-dark); }
.site-footer .legal { margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }

/* ---------- Hero + pinned stage ---------- */
.hero {
  padding: 0; border: 0;
  min-height: calc(100vh - 76px);
  display: grid;
  grid-template-columns: minmax(300px, 0.85fr) minmax(0, 1.5fr);
  gap: clamp(20px, 3vw, 48px);
  align-items: center;
  width: min(100% - 2 * var(--gutter), var(--max));
  margin-inline: auto;
}
.hero-copy { padding: clamp(28px, 4vw, 48px) 0; }
.hero-copy h1 { margin-bottom: 22px; }
.stage-captions { position: relative; min-height: 6.6em; margin: 0 0 22px; }
.stage-caption { margin: 0; }
.js .stage-caption { position: absolute; inset: 0; }
.stage-caption h2 { font-size: clamp(1.2rem, 1.9vw, 1.6rem); margin-bottom: 8px; }
.stage-caption p { margin: 0; color: var(--muted); }
.scroll-hint { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; color: var(--muted); }
.scroll-hint svg { width: 14px; height: 14px; fill: var(--cobalt); }
.stage-list { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 6px; }
.stage-list li { display: flex; gap: 10px; align-items: center; color: var(--muted); font-size: 0.9rem; }
.stage-list .dot { width: 8px; height: 8px; background: var(--line); flex: none; }
.stage-list li.on { color: var(--white); }
.stage-list li.on .dot { background: var(--cobalt); }

.scene-wrap { position: relative; width: 100%; aspect-ratio: 1200 / 640; }
.scene { width: 100%; height: 100%; }
.scene text { font-family: var(--font-pixel); fill: var(--white); }
.scene .pxl { shape-rendering: crispEdges; }
.scene .grid-dots { fill: #14305a; }

@media (max-width: 899px) {
  .hero { grid-template-columns: 1fr; align-items: start; min-height: 0; gap: 0; padding: 20px 0 16px; }
  .hero-copy { display: contents; }
  .hero-copy > * { order: 1; }
  .hero-copy h1 { font-size: clamp(1.9rem, 8vw, 2.4rem); margin-bottom: 12px; }
  .stage-captions { min-height: 6.2em; margin-bottom: 8px; }
  .stage-caption h2 { font-size: 1.15rem; }
  .stage-caption p, .stage-caption .lede { font-size: 0.98rem; }
  .scene-wrap { order: 2; margin: 4px 0 14px; }
  .btn-row { order: 3; }
  .btn-row .btn { flex: 1 1 auto; }
  .scroll-hint { order: 4; margin: 12px 0 0; }
  .stage-list { order: 5; grid-template-columns: repeat(4, auto); justify-content: start; gap: 4px 16px; margin-top: 10px; }
  .scene text.desk { display: none; }
}

/* Reduced motion: no pinning, static opening still, captions listed. */
@media (prefers-reduced-motion: reduce) {
  .js .stage-caption { position: static; }
  .stage-captions { display: grid; gap: 18px; }
  .scroll-hint { display: none; }
  .btn, a.card { transition: none; }
}

/* ---------- Training capacity illustration ---------- */
.seats { display: grid; grid-template-columns: repeat(4, 56px); gap: 12px; padding: 0; margin: 12px 0 0; list-style: none; }
.seats li { width: 56px; height: 56px; border: 2px solid var(--cobalt); background: var(--cobalt-soft); display: grid; place-items: center; }
.seats li svg { width: 26px; height: 26px; fill: var(--white); }

/* ---------- Logo review helpers (about page) ---------- */
.logo-block { background: var(--navy-deep); padding: 24px; border: 2px solid var(--line); }
.logo-block svg { width: 100%; height: auto; }

/* ================= Game-level homepage (v2) ================= */
.hero2 { padding: clamp(44px, 6vw, 80px) 0 0; }
.hero2 .wrap { display: flex; flex-direction: column; gap: 18px; max-width: 880px; }
.hero2 h1 { margin: 0; font-size: clamp(2.2rem, 5vw, 4.2rem); }
.hero2 .hl { color: #4d9aff; }
.hero2 .lede { margin: 0; max-width: 560px; }
.hero2 .btn-row { align-items: center; margin-top: 8px; }
.scroll-cue { color: var(--muted); }
.world-wrap { margin-top: clamp(8px, 2vw, 24px); }
#world { display: block; width: 100%; height: auto; }
#world text { font-size: 12px; }

.level-hud { position: sticky; top: 76px; z-index: 40; background: var(--navy-deep); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.hud-row { position: relative; display: flex; justify-content: space-between; gap: 8px; }
.level-hud a {
  font-family: var(--font-pixel); font-size: 0.6rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); text-decoration: none; padding: 18px 4px 16px; white-space: nowrap;
}
.level-hud a span { color: var(--cobalt); margin-right: 6px; }
.level-hud a.on, .level-hud a:hover { color: var(--white); }
.hud-marker { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--cobalt); }

.level { border-top: 1px solid var(--line); padding: clamp(56px, 7vw, 96px) 0; }
.level-grid { display: grid; grid-template-columns: minmax(280px, 0.85fr) minmax(0, 1.35fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.level-copy h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); }
.level-copy p { color: var(--muted); }
.scene-panel { background: var(--navy-deep); border: 2px solid var(--line); padding: 14px 14px 10px; }
.lvl-scene { display: block; width: 100%; height: auto; }
.panel-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 4px 4px; }
.replay {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px;
  background: transparent; border: 2px solid var(--line); color: var(--white);
  font-family: var(--font-display); font-weight: 600; font-size: 0.85rem; cursor: pointer;
}
.replay:hover { border-color: var(--white); background: rgba(255, 255, 255, 0.04); }

.section-light { background: #eaf2ff; color: #16283f; }
.section-light h2, .section-light h3 { color: #071932; }
.section-light .lede { color: #3d5573; }
.section-light .pixel { color: #0052c2; }
.section-light .card { background: #ffffff; border-color: #c9dcf8; }
.section-light .card p { color: #3d5573; }
.section-light .card h3 { color: #071932; }
.section-light a.card { color: #16283f; box-shadow: 4px 4px 0 0 #c9dcf8; }
.section-light a.card:hover { background: #f4f8ff; border-color: var(--cobalt); }
.section-light .card .more { color: #0052c2; }
.section-light .card.spec { border-color: var(--cobalt); }
.industry-line { margin: 28px 0 0; color: #3d5573; font-weight: 500; }

.people-box svg { max-width: 100%; height: auto; }
.muted-c { color: #dbe8ff; font-size: 0.95rem; margin: 0; }

@media (max-width: 899px) {
  .hero2 .btn-row .btn { flex: 1 1 auto; }
  .scroll-cue { display: none; }
  .level-grid { grid-template-columns: 1fr; align-items: start; }
  .level-copy h2 { margin-bottom: 8px; }
  .level-hud { top: 0; }
  .level-hud a { font-size: 0.5rem; padding: 14px 2px 12px; }
  #world text { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .replay { display: none; }
}

/* ================= v3: continuous morph quest ================= */
.quest { position: relative; height: 100vh; min-height: 620px; padding: 0; overflow: hidden; background: var(--navy); border: 0; }
#quest-scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#quest-scene text { text-transform: uppercase; }
.q-scan {
  position: absolute; inset: 0; pointer-events: none; z-index: 3; opacity: 0.35;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,0.025) 0 1px, transparent 1px 4px);
}
.q-overlay { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; pointer-events: none; }
.q-overlay::before { /* text-protection scrim: keeps the copy readable over the world at any width */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, rgba(4, 15, 32, 0.94) 0%, rgba(4, 15, 32, 0.85) 38%, rgba(4, 15, 32, 0.5) 54%, rgba(4, 15, 32, 0) 68%);
}
.q-copy { z-index: 1; }
.q-copy { position: relative; min-height: 20em; }
.q-cap { max-width: 500px; }
.quest-on .q-cap { position: absolute; top: 50%; left: 0; transform: translateY(-50%); padding-right: 24px; }
.q-cap h1 { font-size: clamp(2rem, 4vw, 3.6rem); margin-bottom: 16px; }
.q-cap h2 { font-size: clamp(1.6rem, 2.8vw, 2.5rem); }
.q-cap .hl { color: #4d9aff; }
.q-cap .lede, .q-cap .qp { color: var(--muted); font-size: clamp(1rem, 1.3vw, 1.2rem); }
.q-cap h1, .q-cap h2, .q-cap p { text-shadow: 0 2px 14px rgba(4, 15, 32, 0.95), 0 0 4px rgba(4, 15, 32, 0.8); }
.q-cap .btn-row { margin-top: 18px; pointer-events: auto; }
.q-cap a { pointer-events: auto; }
.scroll-cue { display: block; margin-top: 20px; color: var(--white); }

/* No JS / reduced motion: the business message reads first, then the still
   opening scene, then the four stages as labeled text. Nothing moves. */
html:not(.quest-on) .quest { height: auto; min-height: 0; overflow: visible; display: flex; flex-direction: column; }
html:not(.quest-on) .q-overlay, html:not(.quest-on) .q-copy { display: contents; }
html:not(.quest-on) .q-overlay::before { display: none; }
html:not(.quest-on) .q-scan { display: none; }
html:not(.quest-on) .q-cap[data-i="0"] {
  order: 0; max-width: var(--max); width: 100%; margin: 0 auto;
  padding: clamp(40px, 7vw, 72px) var(--gutter) 36px;
}
html:not(.quest-on) .q-cap[data-i="0"] .lede, html:not(.quest-on) .q-cap[data-i="0"] .q-cred { max-width: 60ch; }
html:not(.quest-on) .scroll-cue { display: none; }
html:not(.quest-on) .h-rotate { min-height: 0; }
html:not(.quest-on) #quest-scene { order: 1; position: relative; inset: auto; height: auto; aspect-ratio: 16 / 9; max-height: 60vh; }
html:not(.quest-on) .q-stages {
  order: 2; max-width: var(--max); width: 100%; margin: 0 auto;
  padding: 40px var(--gutter) 56px; display: grid; gap: 32px 40px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
html:not(.quest-on) .q-stages .q-cap { max-width: none; border-top: 2px solid var(--cobalt); padding-top: 14px; }
html:not(.quest-on) .q-stages h2 { font-size: 1.3rem; }
html:not(.quest-on) .q-cap h1, html:not(.quest-on) .q-cap h2, html:not(.quest-on) .q-cap p { text-shadow: none; }

@media (max-width: 899px) {
  .q-overlay::before { display: none; }
  .quest-on .q-cap {
    top: 86px; /* clear the 76px sticky header that overlaps the pinned scene */
    transform: none; left: 0; right: 0; max-width: none;
    background: rgba(4, 15, 32, 0.82); border: 1px solid var(--line);
    padding: 14px 16px 16px;
  }
  .q-cap h1 { font-size: clamp(1.7rem, 7.2vw, 2.2rem); margin-bottom: 10px; }
  .q-cap h2 { font-size: 1.35rem; }
  .q-cap .lede, .q-cap .qp { font-size: 0.97rem; }
  .q-cap .btn-row .btn { flex: 1 1 auto; min-height: 44px; }
  .q-overlay { align-items: flex-start; }
  .scroll-cue { margin-top: 12px; }
}

/* ---------- cycling headline prompt ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.h-rotate { min-height: 4.6em; }
.type-cursor {
  display: inline-block; width: 0.48em; height: 0.92em; margin-left: 0.08em;
  background: var(--white); transform: translateY(0.1em);
  animation: cursor-blink 1s steps(1) infinite;
}
@keyframes cursor-blink { 50% { opacity: 0; } }


@media (max-width: 899px) { .h-rotate { min-height: 5.8em; } }

/* ---------- brand lockup (staircase mark + wordmark) ---------- */
.brand-word {
  font-family: "Montserrat", "Sora", Arial, sans-serif;
  font-weight: 700; letter-spacing: -0.015em; color: var(--white); white-space: nowrap; line-height: 1;
}
.brand-word .up { color: var(--cobalt); }

/* ---------- review round: credibility line + skip link ---------- */
.q-cred {
  color: var(--muted); font-size: 0.92rem; max-width: 470px;
  border-left: 3px solid var(--cobalt); padding-left: 14px; margin: 2px 0 4px;
}
.q-skip {
  position: absolute; right: 22px; bottom: 16px; z-index: 4;
  font-family: var(--font-pixel); font-size: 0.56rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); text-decoration: none;
  background: rgba(4, 15, 32, 0.75); border: 1px solid var(--line); padding: 12px 14px;
}
.q-skip:hover, .q-skip:focus-visible { color: var(--white); border-color: var(--white); }
html:not(.quest-on) .q-skip { display: none; }
#questions .card h3 { font-size: 1.08rem; line-height: 1.4; }
#questions .card p { font-size: 0.95rem; }
.cred-short { display: none; }
@media (max-width: 899px) {
  /* Keep a trust line on phones: the short form, with the founder's name, instead of hiding it. */
  .cred-long, .quest-on .q-led { display: none; }
  .cred-short { display: inline; }
  .q-cred { font-size: 0.86rem; max-width: none; margin: 0 0 2px; }
  .quest-on .q-cap[data-i="0"] .lede { margin-bottom: 10px; }
  .q-skip { right: 12px; bottom: 10px; }
}
.q-led { color: var(--muted); font-size: 0.9rem; margin: 14px 0 0; }
.q-link { color: #cfe0ff; text-decoration-color: var(--cobalt); text-underline-offset: 3px; }
.q-link:hover { color: var(--white); }

/* ---------- revision 1: service deliverables ---------- */
.deliv { border-left: 3px solid var(--cobalt); padding-left: 14px; color: var(--text); font-size: 0.98rem; }
.deliv .pixel { display: block; margin-bottom: 6px; }
.photo-slot {
  min-height: 300px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: var(--navy-deep); border: 2px dashed var(--line); padding: 24px; text-align: center; color: var(--muted);
}

/* ---------- revision 1: products (cartridge frame, used lightly) ---------- */
.cart-label { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.cart-label .pixel { font-size: 0.6rem; }
.status { padding: 6px 8px 4px; border: 1px solid var(--line); color: var(--muted); background: var(--navy-deep); white-space: nowrap; }
.section-light .status { background: #eaf2ff; border-color: #c9dcf8; color: #0052c2; }
.carts { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.cart-card { border-top: 6px solid var(--cobalt); }
.cart-card h3 { font-size: 1.15rem; }
.cart {
  background: var(--navy-deep); border: 2px solid var(--line); border-top: 8px solid var(--cobalt);
  padding: 24px; display: flex; flex-direction: column; align-items: center; gap: 14px; min-height: 260px; justify-content: center;
}
.cart-art { width: min(100%, 320px); height: auto; }
.cart .pixel { font-size: 0.6rem; color: var(--cobalt-bright); }

/* ---------- revision 1: method example ---------- */
.method-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); counter-reset: none; }
.m-step { border-top: 2px solid var(--cobalt); padding-top: 14px; }
.m-step .pixel { font-size: 0.58rem; margin: 0 0 10px; }
.m-step h3 { font-size: 1.08rem; margin: 0 0 8px; }
.m-step p { margin: 0; color: var(--muted); font-size: 0.96rem; }
.m-step strong { color: var(--white); }

/* ================= revision 2: pixel component system =================
   One geometry for every panel: a stepped outer line on a 2px pixel grid, the body
   colour running right up to it, one quiet inner edge, one hard cobalt shadow.
   Roles differ by weight: selection tiles (bright line, lift on hover), dialogue
   panels (white line, attached pointer), inset panels (recessed, no outer line),
   product showcases (white line, large). Body copy stays in the readable fonts. */
:root {
  --frame-line-charcoal: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2718%27 height=%2718%27 viewBox=%270 0 18 18%27 shape-rendering=%27crispEdges%27%3E%3Cpath fill=%27%231b2635%27 d=%27M4 2h2v2h-2zM6 2h2v2h-2zM8 2h2v2h-2zM10 2h2v2h-2zM12 2h2v2h-2zM2 4h2v2h-2zM4 4h2v2h-2zM6 4h2v2h-2zM8 4h2v2h-2zM10 4h2v2h-2zM12 4h2v2h-2zM14 4h2v2h-2zM2 6h2v2h-2zM4 6h2v2h-2zM12 6h2v2h-2zM14 6h2v2h-2zM2 8h2v2h-2zM4 8h2v2h-2zM12 8h2v2h-2zM14 8h2v2h-2zM2 10h2v2h-2zM4 10h2v2h-2zM12 10h2v2h-2zM14 10h2v2h-2zM2 12h2v2h-2zM4 12h2v2h-2zM6 12h2v2h-2zM8 12h2v2h-2zM10 12h2v2h-2zM12 12h2v2h-2zM14 12h2v2h-2zM4 14h2v2h-2zM6 14h2v2h-2zM8 14h2v2h-2zM10 14h2v2h-2zM12 14h2v2h-2z%27/%3E%3Cpath fill=%27%237ab2ff%27 d=%27M4 0h2v2h-2zM6 0h2v2h-2zM8 0h2v2h-2zM10 0h2v2h-2zM12 0h2v2h-2zM2 2h2v2h-2zM14 2h2v2h-2zM0 4h2v2h-2zM16 4h2v2h-2zM0 6h2v2h-2zM16 6h2v2h-2zM0 8h2v2h-2zM16 8h2v2h-2zM0 10h2v2h-2zM16 10h2v2h-2zM0 12h2v2h-2zM16 12h2v2h-2zM2 14h2v2h-2zM14 14h2v2h-2zM4 16h2v2h-2zM6 16h2v2h-2zM8 16h2v2h-2zM10 16h2v2h-2zM12 16h2v2h-2z%27/%3E%3C/svg%3E");
  --frame-line-deep: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2718%27 height=%2718%27 viewBox=%270 0 18 18%27 shape-rendering=%27crispEdges%27%3E%3Cpath fill=%27%23040f20%27 d=%27M4 2h2v2h-2zM6 2h2v2h-2zM8 2h2v2h-2zM10 2h2v2h-2zM12 2h2v2h-2zM2 4h2v2h-2zM4 4h2v2h-2zM6 4h2v2h-2zM8 4h2v2h-2zM10 4h2v2h-2zM12 4h2v2h-2zM14 4h2v2h-2zM2 6h2v2h-2zM4 6h2v2h-2zM12 6h2v2h-2zM14 6h2v2h-2zM2 8h2v2h-2zM4 8h2v2h-2zM12 8h2v2h-2zM14 8h2v2h-2zM2 10h2v2h-2zM4 10h2v2h-2zM12 10h2v2h-2zM14 10h2v2h-2zM2 12h2v2h-2zM4 12h2v2h-2zM6 12h2v2h-2zM8 12h2v2h-2zM10 12h2v2h-2zM12 12h2v2h-2zM14 12h2v2h-2zM4 14h2v2h-2zM6 14h2v2h-2zM8 14h2v2h-2zM10 14h2v2h-2zM12 14h2v2h-2z%27/%3E%3Cpath fill=%27%237ab2ff%27 d=%27M4 0h2v2h-2zM6 0h2v2h-2zM8 0h2v2h-2zM10 0h2v2h-2zM12 0h2v2h-2zM2 2h2v2h-2zM14 2h2v2h-2zM0 4h2v2h-2zM16 4h2v2h-2zM0 6h2v2h-2zM16 6h2v2h-2zM0 8h2v2h-2zM16 8h2v2h-2zM0 10h2v2h-2zM16 10h2v2h-2zM0 12h2v2h-2zM16 12h2v2h-2zM2 14h2v2h-2zM14 14h2v2h-2zM4 16h2v2h-2zM6 16h2v2h-2zM8 16h2v2h-2zM10 16h2v2h-2zM12 16h2v2h-2z%27/%3E%3C/svg%3E");
  --frame-line-paper: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2718%27 height=%2718%27 viewBox=%270 0 18 18%27 shape-rendering=%27crispEdges%27%3E%3Cpath fill=%27%23ffffff%27 d=%27M4 2h2v2h-2zM6 2h2v2h-2zM8 2h2v2h-2zM10 2h2v2h-2zM12 2h2v2h-2zM2 4h2v2h-2zM4 4h2v2h-2zM6 4h2v2h-2zM8 4h2v2h-2zM10 4h2v2h-2zM12 4h2v2h-2zM14 4h2v2h-2zM2 6h2v2h-2zM4 6h2v2h-2zM12 6h2v2h-2zM14 6h2v2h-2zM2 8h2v2h-2zM4 8h2v2h-2zM12 8h2v2h-2zM14 8h2v2h-2zM2 10h2v2h-2zM4 10h2v2h-2zM12 10h2v2h-2zM14 10h2v2h-2zM2 12h2v2h-2zM4 12h2v2h-2zM6 12h2v2h-2zM8 12h2v2h-2zM10 12h2v2h-2zM12 12h2v2h-2zM14 12h2v2h-2zM4 14h2v2h-2zM6 14h2v2h-2zM8 14h2v2h-2zM10 14h2v2h-2zM12 14h2v2h-2z%27/%3E%3Cpath fill=%27%237ab2ff%27 d=%27M4 0h2v2h-2zM6 0h2v2h-2zM8 0h2v2h-2zM10 0h2v2h-2zM12 0h2v2h-2zM2 2h2v2h-2zM14 2h2v2h-2zM0 4h2v2h-2zM16 4h2v2h-2zM0 6h2v2h-2zM16 6h2v2h-2zM0 8h2v2h-2zM16 8h2v2h-2zM0 10h2v2h-2zM16 10h2v2h-2zM0 12h2v2h-2zM16 12h2v2h-2zM2 14h2v2h-2zM14 14h2v2h-2zM4 16h2v2h-2zM6 16h2v2h-2zM8 16h2v2h-2zM10 16h2v2h-2zM12 16h2v2h-2z%27/%3E%3C/svg%3E");
  --frame-white-charcoal: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2718%27 height=%2718%27 viewBox=%270 0 18 18%27 shape-rendering=%27crispEdges%27%3E%3Cpath fill=%27%231b2635%27 d=%27M4 2h2v2h-2zM6 2h2v2h-2zM8 2h2v2h-2zM10 2h2v2h-2zM12 2h2v2h-2zM2 4h2v2h-2zM4 4h2v2h-2zM6 4h2v2h-2zM8 4h2v2h-2zM10 4h2v2h-2zM12 4h2v2h-2zM14 4h2v2h-2zM2 6h2v2h-2zM4 6h2v2h-2zM12 6h2v2h-2zM14 6h2v2h-2zM2 8h2v2h-2zM4 8h2v2h-2zM12 8h2v2h-2zM14 8h2v2h-2zM2 10h2v2h-2zM4 10h2v2h-2zM12 10h2v2h-2zM14 10h2v2h-2zM2 12h2v2h-2zM4 12h2v2h-2zM6 12h2v2h-2zM8 12h2v2h-2zM10 12h2v2h-2zM12 12h2v2h-2zM14 12h2v2h-2zM4 14h2v2h-2zM6 14h2v2h-2zM8 14h2v2h-2zM10 14h2v2h-2zM12 14h2v2h-2z%27/%3E%3Cpath fill=%27%23ffffff%27 d=%27M4 0h2v2h-2zM6 0h2v2h-2zM8 0h2v2h-2zM10 0h2v2h-2zM12 0h2v2h-2zM2 2h2v2h-2zM14 2h2v2h-2zM0 4h2v2h-2zM16 4h2v2h-2zM0 6h2v2h-2zM16 6h2v2h-2zM0 8h2v2h-2zM16 8h2v2h-2zM0 10h2v2h-2zM16 10h2v2h-2zM0 12h2v2h-2zM16 12h2v2h-2zM2 14h2v2h-2zM14 14h2v2h-2zM4 16h2v2h-2zM6 16h2v2h-2zM8 16h2v2h-2zM10 16h2v2h-2zM12 16h2v2h-2z%27/%3E%3C/svg%3E");
  --frame-white-deep: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2718%27 height=%2718%27 viewBox=%270 0 18 18%27 shape-rendering=%27crispEdges%27%3E%3Cpath fill=%27%23040f20%27 d=%27M4 2h2v2h-2zM6 2h2v2h-2zM8 2h2v2h-2zM10 2h2v2h-2zM12 2h2v2h-2zM2 4h2v2h-2zM4 4h2v2h-2zM6 4h2v2h-2zM8 4h2v2h-2zM10 4h2v2h-2zM12 4h2v2h-2zM14 4h2v2h-2zM2 6h2v2h-2zM4 6h2v2h-2zM12 6h2v2h-2zM14 6h2v2h-2zM2 8h2v2h-2zM4 8h2v2h-2zM12 8h2v2h-2zM14 8h2v2h-2zM2 10h2v2h-2zM4 10h2v2h-2zM12 10h2v2h-2zM14 10h2v2h-2zM2 12h2v2h-2zM4 12h2v2h-2zM6 12h2v2h-2zM8 12h2v2h-2zM10 12h2v2h-2zM12 12h2v2h-2zM14 12h2v2h-2zM4 14h2v2h-2zM6 14h2v2h-2zM8 14h2v2h-2zM10 14h2v2h-2zM12 14h2v2h-2z%27/%3E%3Cpath fill=%27%23ffffff%27 d=%27M4 0h2v2h-2zM6 0h2v2h-2zM8 0h2v2h-2zM10 0h2v2h-2zM12 0h2v2h-2zM2 2h2v2h-2zM14 2h2v2h-2zM0 4h2v2h-2zM16 4h2v2h-2zM0 6h2v2h-2zM16 6h2v2h-2zM0 8h2v2h-2zM16 8h2v2h-2zM0 10h2v2h-2zM16 10h2v2h-2zM0 12h2v2h-2zM16 12h2v2h-2zM2 14h2v2h-2zM14 14h2v2h-2zM4 16h2v2h-2zM6 16h2v2h-2zM8 16h2v2h-2zM10 16h2v2h-2zM12 16h2v2h-2z%27/%3E%3C/svg%3E");
  --frame-white-paper: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2718%27 height=%2718%27 viewBox=%270 0 18 18%27 shape-rendering=%27crispEdges%27%3E%3Cpath fill=%27%23ffffff%27 d=%27M4 2h2v2h-2zM6 2h2v2h-2zM8 2h2v2h-2zM10 2h2v2h-2zM12 2h2v2h-2zM2 4h2v2h-2zM4 4h2v2h-2zM6 4h2v2h-2zM8 4h2v2h-2zM10 4h2v2h-2zM12 4h2v2h-2zM14 4h2v2h-2zM2 6h2v2h-2zM4 6h2v2h-2zM12 6h2v2h-2zM14 6h2v2h-2zM2 8h2v2h-2zM4 8h2v2h-2zM12 8h2v2h-2zM14 8h2v2h-2zM2 10h2v2h-2zM4 10h2v2h-2zM12 10h2v2h-2zM14 10h2v2h-2zM2 12h2v2h-2zM4 12h2v2h-2zM6 12h2v2h-2zM8 12h2v2h-2zM10 12h2v2h-2zM12 12h2v2h-2zM14 12h2v2h-2zM4 14h2v2h-2zM6 14h2v2h-2zM8 14h2v2h-2zM10 14h2v2h-2zM12 14h2v2h-2z%27/%3E%3Cpath fill=%27%23ffffff%27 d=%27M4 0h2v2h-2zM6 0h2v2h-2zM8 0h2v2h-2zM10 0h2v2h-2zM12 0h2v2h-2zM2 2h2v2h-2zM14 2h2v2h-2zM0 4h2v2h-2zM16 4h2v2h-2zM0 6h2v2h-2zM16 6h2v2h-2zM0 8h2v2h-2zM16 8h2v2h-2zM0 10h2v2h-2zM16 10h2v2h-2zM0 12h2v2h-2zM16 12h2v2h-2zM2 14h2v2h-2zM14 14h2v2h-2zM4 16h2v2h-2zM6 16h2v2h-2zM8 16h2v2h-2zM10 16h2v2h-2zM12 16h2v2h-2z%27/%3E%3C/svg%3E");
  --frame-cobalt-charcoal: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2718%27 height=%2718%27 viewBox=%270 0 18 18%27 shape-rendering=%27crispEdges%27%3E%3Cpath fill=%27%231b2635%27 d=%27M4 2h2v2h-2zM6 2h2v2h-2zM8 2h2v2h-2zM10 2h2v2h-2zM12 2h2v2h-2zM2 4h2v2h-2zM4 4h2v2h-2zM6 4h2v2h-2zM8 4h2v2h-2zM10 4h2v2h-2zM12 4h2v2h-2zM14 4h2v2h-2zM2 6h2v2h-2zM4 6h2v2h-2zM12 6h2v2h-2zM14 6h2v2h-2zM2 8h2v2h-2zM4 8h2v2h-2zM12 8h2v2h-2zM14 8h2v2h-2zM2 10h2v2h-2zM4 10h2v2h-2zM12 10h2v2h-2zM14 10h2v2h-2zM2 12h2v2h-2zM4 12h2v2h-2zM6 12h2v2h-2zM8 12h2v2h-2zM10 12h2v2h-2zM12 12h2v2h-2zM14 12h2v2h-2zM4 14h2v2h-2zM6 14h2v2h-2zM8 14h2v2h-2zM10 14h2v2h-2zM12 14h2v2h-2z%27/%3E%3Cpath fill=%27%230052c2%27 d=%27M4 0h2v2h-2zM6 0h2v2h-2zM8 0h2v2h-2zM10 0h2v2h-2zM12 0h2v2h-2zM2 2h2v2h-2zM14 2h2v2h-2zM0 4h2v2h-2zM16 4h2v2h-2zM0 6h2v2h-2zM16 6h2v2h-2zM0 8h2v2h-2zM16 8h2v2h-2zM0 10h2v2h-2zM16 10h2v2h-2zM0 12h2v2h-2zM16 12h2v2h-2zM2 14h2v2h-2zM14 14h2v2h-2zM4 16h2v2h-2zM6 16h2v2h-2zM8 16h2v2h-2zM10 16h2v2h-2zM12 16h2v2h-2z%27/%3E%3C/svg%3E");
  --frame-cobalt-deep: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2718%27 height=%2718%27 viewBox=%270 0 18 18%27 shape-rendering=%27crispEdges%27%3E%3Cpath fill=%27%23040f20%27 d=%27M4 2h2v2h-2zM6 2h2v2h-2zM8 2h2v2h-2zM10 2h2v2h-2zM12 2h2v2h-2zM2 4h2v2h-2zM4 4h2v2h-2zM6 4h2v2h-2zM8 4h2v2h-2zM10 4h2v2h-2zM12 4h2v2h-2zM14 4h2v2h-2zM2 6h2v2h-2zM4 6h2v2h-2zM12 6h2v2h-2zM14 6h2v2h-2zM2 8h2v2h-2zM4 8h2v2h-2zM12 8h2v2h-2zM14 8h2v2h-2zM2 10h2v2h-2zM4 10h2v2h-2zM12 10h2v2h-2zM14 10h2v2h-2zM2 12h2v2h-2zM4 12h2v2h-2zM6 12h2v2h-2zM8 12h2v2h-2zM10 12h2v2h-2zM12 12h2v2h-2zM14 12h2v2h-2zM4 14h2v2h-2zM6 14h2v2h-2zM8 14h2v2h-2zM10 14h2v2h-2zM12 14h2v2h-2z%27/%3E%3Cpath fill=%27%230052c2%27 d=%27M4 0h2v2h-2zM6 0h2v2h-2zM8 0h2v2h-2zM10 0h2v2h-2zM12 0h2v2h-2zM2 2h2v2h-2zM14 2h2v2h-2zM0 4h2v2h-2zM16 4h2v2h-2zM0 6h2v2h-2zM16 6h2v2h-2zM0 8h2v2h-2zM16 8h2v2h-2zM0 10h2v2h-2zM16 10h2v2h-2zM0 12h2v2h-2zM16 12h2v2h-2zM2 14h2v2h-2zM14 14h2v2h-2zM4 16h2v2h-2zM6 16h2v2h-2zM8 16h2v2h-2zM10 16h2v2h-2zM12 16h2v2h-2z%27/%3E%3C/svg%3E");
  --frame-cobalt-paper: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2718%27 height=%2718%27 viewBox=%270 0 18 18%27 shape-rendering=%27crispEdges%27%3E%3Cpath fill=%27%23ffffff%27 d=%27M4 2h2v2h-2zM6 2h2v2h-2zM8 2h2v2h-2zM10 2h2v2h-2zM12 2h2v2h-2zM2 4h2v2h-2zM4 4h2v2h-2zM6 4h2v2h-2zM8 4h2v2h-2zM10 4h2v2h-2zM12 4h2v2h-2zM14 4h2v2h-2zM2 6h2v2h-2zM4 6h2v2h-2zM12 6h2v2h-2zM14 6h2v2h-2zM2 8h2v2h-2zM4 8h2v2h-2zM12 8h2v2h-2zM14 8h2v2h-2zM2 10h2v2h-2zM4 10h2v2h-2zM12 10h2v2h-2zM14 10h2v2h-2zM2 12h2v2h-2zM4 12h2v2h-2zM6 12h2v2h-2zM8 12h2v2h-2zM10 12h2v2h-2zM12 12h2v2h-2zM14 12h2v2h-2zM4 14h2v2h-2zM6 14h2v2h-2zM8 14h2v2h-2zM10 14h2v2h-2zM12 14h2v2h-2z%27/%3E%3Cpath fill=%27%230052c2%27 d=%27M4 0h2v2h-2zM6 0h2v2h-2zM8 0h2v2h-2zM10 0h2v2h-2zM12 0h2v2h-2zM2 2h2v2h-2zM14 2h2v2h-2zM0 4h2v2h-2zM16 4h2v2h-2zM0 6h2v2h-2zM16 6h2v2h-2zM0 8h2v2h-2zM16 8h2v2h-2zM0 10h2v2h-2zM16 10h2v2h-2zM0 12h2v2h-2zM16 12h2v2h-2zM2 14h2v2h-2zM14 14h2v2h-2zM4 16h2v2h-2zM6 16h2v2h-2zM8 16h2v2h-2zM10 16h2v2h-2zM12 16h2v2h-2z%27/%3E%3C/svg%3E");
  --panel: var(--charcoal);
  --frame: var(--frame-line-charcoal);
  --frame-hot: var(--frame-white-charcoal);
  --outside: var(--navy);
}
.band { --outside: var(--navy-deep); }
.section-light { --outside: #eaf2ff; --panel: #ffffff; --frame: var(--frame-cobalt-paper); --frame-hot: var(--frame-cobalt-paper); }

.px {
  position: relative;
  border: 6px solid transparent;
  border-image: var(--frame) 6 stretch;
  background: var(--panel) padding-box;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.05);
  filter: drop-shadow(6px 6px 0 var(--cobalt-dark));
  padding: 20px 22px 20px;
}
.px-tab {
  position: absolute; top: -13px; left: 16px;
  font-family: var(--font-pixel); font-size: 0.56rem; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1;
  color: var(--white); background: var(--outside); padding: 4px 8px 3px;
  border: 2px solid var(--cobalt-bright);
}
.px-tag {
  display: inline-block; font-family: var(--font-pixel); font-size: 0.56rem; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1;
  color: var(--cobalt-bright); border: 2px solid var(--line); padding: 5px 7px 4px; background: var(--navy-deep);
  align-self: flex-start;
}

/* Problem tile: a selectable item. Illustration, compact tag, the problem, one line, one action. */
.px-tile { display: flex; flex-direction: column; gap: 10px; color: inherit; text-decoration: none; min-height: 100%; transition: transform 120ms steps(2), filter 120ms steps(2); }
.px-tile .px-art { width: 100%; height: auto; max-height: 170px; display: block; margin: 0 0 4px; }
.px-tile h3 { margin: 0; font-size: 1.1rem; line-height: 1.35; }
.px-tile p { margin: 0; color: var(--muted); font-size: 0.95rem; }
.px-tile .more { margin-top: auto; padding-top: 8px; font-weight: 600; color: var(--cobalt-bright); }
.px-tile .more::after { content: "\00a0\2192"; } /* the arrow stays with the last word */
.px-tile:hover, .px-tile:focus-visible { transform: translate(-2px, -2px); filter: drop-shadow(8px 8px 0 var(--cobalt)); border-image-source: var(--frame-hot); outline: none; }
.px-tile:focus-visible { box-shadow: inset 0 0 0 2px var(--white); }
.px-tile:hover .more, .px-tile:focus-visible .more { color: var(--white); }
/* Explicit four / two / one column layouts; never three plus one. */
.tiles { display: grid; gap: 28px 24px; grid-template-columns: repeat(4, minmax(0, 1fr)); padding-top: 6px; }
@media (max-width: 1099px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .tiles { grid-template-columns: 1fr; } }

/* Dialogue panel: a titled speech box with a pointer attached to its bottom edge. */
.px-dialog { --frame: var(--frame-white-charcoal); padding-top: 24px; }
.px-dialog p { margin: 0; font-size: 1.02rem; color: var(--text); }
.px-dialog::after {
  content: ""; position: absolute; left: 28px; bottom: -14px; width: 8px; height: 8px; background: var(--white);
  box-shadow: 8px 0 0 var(--white), 16px 0 0 var(--white), 0 -2px 0 var(--white), 8px -2px 0 var(--white), 16px -2px 0 var(--white), 0 8px 0 var(--white), 8px 8px 0 var(--white);
}

/* Inset panel: recessed, for lists of concrete things. */
.px-inset {
  position: relative; background: var(--navy-deep); border: 2px solid var(--line);
  box-shadow: inset 4px 4px 0 #02070f, inset -4px -4px 0 #1e3558;
  padding: 26px 22px 20px;
}
.px-inset .px-tab { background: var(--navy-deep); border-color: var(--line); color: var(--cobalt-bright); }
.px-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.px-list li { position: relative; padding-left: 26px; color: var(--text); font-size: 0.98rem; line-height: 1.45; }
.px-list li::before {
  content: ""; position: absolute; left: 0; top: 0.42em; width: 12px; height: 12px; background: var(--cobalt);
  box-shadow: inset 0 0 0 2px var(--navy-deep), inset 0 0 0 4px var(--cobalt-bright);
}

/* Service composition: text and dialogue left, illustration right, deliverables across. */
.svc .section-head { margin-bottom: 24px; }
.svc-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 30px 48px; align-items: start; }
.svc-grid.flip .svc-col:first-child { order: 2; }
.svc-col { display: flex; flex-direction: column; gap: 28px; }
.svc-text p { margin: 0 0 14px; }
.svc-text p:last-child { margin-bottom: 0; }
.svc-art { margin: 0; }
.svc-art svg { width: 100%; height: auto; display: block; }
.svc-art figcaption { font-family: var(--font-pixel); font-size: 0.52rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cobalt-bright); margin-top: 10px; }
.svc-dialog { margin-top: 4px; }
.svc-inset { grid-column: 1 / -1; order: 3; }
.svc-inset .px-list { grid-template-columns: repeat(2, 1fr); gap: 12px 40px; }
@media (max-width: 899px) {
  .svc-grid { grid-template-columns: 1fr; gap: 28px; }
  .svc-grid.flip .svc-col:first-child { order: 0; }
  .svc-inset .px-list { grid-template-columns: 1fr; }
  .px { padding: 18px 16px 16px; }
}

/* ---------- product showcases ---------- */
.prod-hero { padding-bottom: clamp(24px, 4vw, 40px); }
.prod-hero h1 { margin-bottom: 12px; }
.prod-name { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.7rem, 3vw, 2.4rem); letter-spacing: -0.01em; margin: 0 0 10px; color: var(--white); }
.section-light .prod-name { color: var(--navy); }
.show-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 40px 56px; align-items: center; }
.show-grid.flip .show-text { order: 2; }
.show-text h2 { margin-top: 0; }
.show-text .lede { margin-bottom: 18px; }
.show-list { margin: 0 0 22px; }
.section-light .px-list li { color: #16283f; }
.show-art { margin: 0; padding: 10px; --frame: var(--frame-white-deep); --panel: var(--navy-deep); }
.show-art svg { width: 100%; height: auto; display: block; }
.show-art figcaption { font-family: var(--font-pixel); font-size: 0.5rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cobalt-bright); padding: 10px 6px 2px; }
.section-light .show-art { --frame: var(--frame-cobalt-deep); }
.show-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.show-card { --frame: var(--frame-cobalt-paper); --panel: #ffffff; color: #16283f; display: flex; flex-direction: column; gap: 8px; padding: 14px 22px 22px; box-shadow: none; }
.show-card .show-art { padding: 0; filter: none; border: 0; margin: 0 0 10px; background: var(--navy-deep); }
.show-card .prod-name { font-size: 1.5rem; margin: 4px 0 0; }
.show-card h3 { margin: 0; font-size: 1.2rem; color: var(--navy); }
.show-card p { margin: 0; color: #3d5573; }
.show-card .more { margin-top: auto; padding-top: 10px; font-weight: 600; color: #0052c2; text-decoration: none; white-space: nowrap; }
.show-card .more::after { content: "\00a0\2192"; }
.show-card .more:hover { color: var(--cobalt); text-decoration: underline; }
@media (max-width: 899px) {
  .show-grid { grid-template-columns: 1fr; gap: 28px; }
  .show-grid.flip .show-text { order: 0; }
  .show-cards { grid-template-columns: 1fr; }
}
.show-card .show-art figcaption { color: #3d5573; background: #ffffff; padding: 8px 0 0; }


/* ---------- revision 2: the family applied everywhere ---------- */
/* Remaining .card panels adopt the frame; .cap is the capability panel variant. */
.card, .px.cap {
  background: var(--panel) padding-box; border: 6px solid transparent; border-image: var(--frame) 6 stretch;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.05); filter: drop-shadow(6px 6px 0 var(--cobalt-dark));
  padding: 20px 22px 20px; display: flex; flex-direction: column; gap: 10px; position: relative;
}
.card.spec::before { display: none; }
.card.spec, .px-tile.spec { --frame: var(--frame-white-charcoal); }
a.card:hover, a.card:focus-visible { border-image-source: var(--frame-hot); transform: translate(-2px, -2px); filter: drop-shadow(8px 8px 0 var(--cobalt)); background: var(--panel) padding-box; }
.px.cap h3 { margin: 4px 0 0; font-size: 1.12rem; }
.px.cap p { margin: 0; color: var(--muted); font-size: 0.96rem; }
.grid-3 { display: grid; gap: 28px 24px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1023px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599px) { .grid-3 { grid-template-columns: 1fr; } }
.routes .px-tile h3 { font-size: 1.15rem; margin-top: 2px; }

/* Forms: recessed panel, inset fields, pixel focus ring. */
form.stack.form-panel { max-width: none; gap: 18px; padding: 28px 22px 24px; }
.hubspot-inquiry { min-width: 0; max-width: 100%; padding: 22px; align-self: start; }
.hubspot-inquiry .hs-form-frame { min-height: 560px; background: #fff; color: #212d3a; }
.hubspot-inquiry > p { margin: 14px 0 0; font-size: 0.9rem; }
.hubspot-inquiry [hidden] { display: none !important; }
.hubspot-inquiry .hs-form-frame.is-stalled { min-height: 0; background: transparent; }
.inquiry-confirmation { padding: 16px 8px; }
.inquiry-confirmation h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
.inquiry-confirmation:focus { outline: 2px solid var(--cobalt-bright); outline-offset: 6px; }
@media (max-width: 599px) { .hubspot-inquiry { padding: 12px; } }
input, textarea, select {
  background: var(--navy); border: 2px solid var(--line); box-shadow: inset 3px 3px 0 #02070f;
  padding: 12px 14px; min-height: 48px; color: var(--text);
}
input:focus-visible, textarea:focus-visible, select:focus-visible { border-color: var(--cobalt-bright); outline: 2px solid var(--white); outline-offset: 2px; box-shadow: inset 3px 3px 0 #02070f; }
label { font-size: 0.95rem; }
.form-panel .btn { justify-self: start; }

/* Navigation: visible focus, pixel marker on the current page, framed phone menu. */
.site-nav a:focus-visible, .brand:focus-visible, .nav-toggle:focus-visible, .btn:focus-visible, .q-skip:focus-visible, .site-footer a:focus-visible {
  outline: 2px solid var(--white); outline-offset: 4px;
}
.site-nav a[aria-current="page"] { position: relative; }
.site-nav a[aria-current="page"]::after { content: ""; position: absolute; left: 2px; right: 2px; bottom: 2px; height: 3px; background: var(--cobalt); box-shadow: 3px 0 0 var(--cobalt-bright); }
.nav-toggle { border: 2px solid var(--line); background: var(--navy-deep); color: var(--white); font: 600 0.95rem var(--font-body); padding: 8px 14px; min-height: 44px; }
@media (max-width: 899px) {
  .site-nav { border-top: 4px solid var(--cobalt); box-shadow: 0 8px 0 0 var(--cobalt-dark); }
  .site-nav a[aria-current="page"]::after { bottom: 10px; left: 0; right: auto; width: 10px; height: 10px; top: 50%; transform: translateY(-50%); }
  .site-nav a[aria-current="page"] { padding-left: 20px; }
}

/* About: photo frame with a nameplate. */
.photo-frame { margin: 0; padding: 10px; --frame: var(--frame-white-charcoal); display: flex; flex-direction: column; gap: 0; }
.photo-frame .photo-slot { border: 2px dashed var(--line); min-height: 320px; margin: 0; }
.photo-frame .photo { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.nameplate { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 12px 6px 2px; }
.nameplate .pixel { font-size: 0.6rem; color: var(--white); }
.nameplate span:last-child { color: var(--muted); font-size: 0.9rem; }

/* Method flow and supporting figures. */
.flow { margin: 0 0 28px; }
.flow svg { width: min(100%, 760px); height: auto; display: block; }
.flow figcaption { color: var(--muted); font-size: 0.92rem; margin-top: 10px; max-width: 70ch; }
.method-grid { gap: 22px; }
.hero-art { margin-top: 36px; }
.hero-art svg { max-width: 760px; }
.band-art svg { width: 100%; }
.band-cobalt .svc-art figcaption { color: #dbe8ff; }
.svc-art.band-art { background: var(--navy-deep); padding: 12px; border: 2px solid #66a3ff; }
.svc-art.band-art figcaption { font-family: var(--font-body); font-size: 0.92rem; text-transform: none; letter-spacing: 0; color: #dbe8ff; }
[id] { scroll-margin-top: 88px; } /* anchors land below the sticky header */

/* ---------- revision 4: contained artwork region, static stills, motion control, logo entrance ---------- */
/* Motion mode: copy on the left, artwork in its own region on the right. Nothing essential is cropped:
   the camera fits each chapter's frame inside this region (preserveAspectRatio meet). */
.quest-on #quest-scene { left: auto; right: 2%; top: 7%; width: 60%; height: 86%; }
.quest-on .q-overlay::before { display: none; }
.quest-on .q-cap { max-width: 34%; }
@media (max-width: 899px) {
  .quest-on #quest-scene { left: 0; right: auto; top: 46%; width: 100%; height: 52%; }
  .quest-on .q-cap { max-width: none; }
}
html:not(.quest-on) #quest-scene { display: none; }

/* Static stills: in the HTML from the start, hidden only while motion is on. */
.q-still { margin: 0 0 14px; background: var(--navy-deep); border: 2px solid var(--line); overflow: hidden; }
.q-still svg { width: 100%; height: auto; display: block; }
.quest-on .q-still { display: none; }
html:not(.quest-on) .q-stages { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 40px; }
@media (max-width: 699px) { html:not(.quest-on) .q-stages { grid-template-columns: 1fr; } }
html:not(.quest-on) .q-cap[data-i="0"] { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 0 48px; align-items: start; }
html:not(.quest-on) .q-cap[data-i="0"] > * { grid-column: 1; }
html:not(.quest-on) .q-cap[data-i="0"] .q-still-open { grid-column: 2; grid-row: 1 / span 8; align-self: center; margin: 0; }
html:not(.quest-on) .q-cap { pointer-events: auto; }
@media (max-width: 899px) {
  html:not(.quest-on) .q-cap[data-i="0"] { grid-template-columns: 1fr; }
  html:not(.quest-on) .q-cap[data-i="0"] .q-still-open { grid-column: 1; grid-row: auto; margin-top: 24px; }
}

/* Animation on/off: always reachable. Bottom-left of the pinned scene; in flow when static. */
.q-controls { pointer-events: auto; }
.quest-on .q-controls { position: absolute; left: 22px; bottom: 16px; z-index: 4; }
html:not(.quest-on) .q-controls { order: 1; width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter) 8px; }
.q-motion {
  font-family: var(--font-pixel); font-size: 0.56rem; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1;
  color: var(--muted); background: rgba(4, 15, 32, 0.75); border: 1px solid var(--line); padding: 12px 14px; cursor: pointer;
}
.q-motion[aria-pressed="true"] { color: var(--white); border-color: var(--cobalt-bright); }
.q-motion:hover, .q-motion:focus-visible { color: var(--white); border-color: var(--white); outline: none; }
.q-motion:focus-visible { box-shadow: 0 0 0 2px var(--navy), 0 0 0 4px var(--white); }
.q-motion[disabled] { opacity: 0.6; cursor: default; }
@media (max-width: 899px) { .quest-on .q-controls { left: 12px; bottom: 10px; } }

/* The typing cursor exists only while the headline is typing. */
.type-cursor { display: none; }
.type-cursor.live { display: inline-block; }
.type-cursor.live.rest { display: none; }

/* Logo entrance: the two blocks of the mark travel one grid unit into place, once per session. */
.logo-in .brand svg path:first-child { animation: logo-a 520ms steps(5) both; }
.logo-in .brand svg path:last-child { animation: logo-b 520ms steps(5) both; }
@keyframes logo-a { from { transform: translate(-16px, 10px); } to { transform: translate(0, 0); } }
@keyframes logo-b { from { transform: translate(14px, -12px); } to { transform: translate(0, 0); } }
@media (prefers-reduced-motion: reduce) { .logo-in .brand svg path { animation: none; } }
.founder-h { font-size: 1.25rem; margin-top: 28px; }

/* ---------- contact: the embed inside the stepped pixel frame, higher on the page ---------- */
.contact-sec { padding-top: clamp(28px, 4vw, 44px); }
.contact-split { grid-template-columns: 0.95fr 1.05fr; gap: 40px 48px; }
.px-form { --frame: var(--frame-white-charcoal); padding: 26px 10px 10px; }
.px-form .hs-form-frame { min-height: 560px; background: #fff; border: 2px solid var(--line); box-shadow: inset 0 0 0 2px #ffffff, 4px 4px 0 var(--cobalt-dark); }
.px-form > p { margin: 12px 8px 4px; font-size: 0.9rem; }
.px-form .inquiry-confirmation { padding: 10px 12px 14px; }
@media (max-width: 899px) { .px-form { padding: 24px 8px 8px; } }

/* ---------- contact: native inquiry form in the pixel frame ---------- */
.inquiry { padding: 26px 22px 20px; }
.inquiry-fields { display: grid; gap: 14px; }
.form-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.inquiry-fields > div { min-width: 0; }
.inquiry input, .inquiry textarea { max-width: 100%; }
@media (max-width: 599px) { .form-row { grid-template-columns: 1fr; } }
.inquiry label { margin-bottom: 5px; }
.inquiry textarea { min-height: 110px; }
.inquiry .req { color: var(--cobalt-bright); font-weight: 400; font-size: 0.85rem; }
.inquiry .hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 4px; }
.form-actions .form-status { margin: 0; flex: 1 1 240px; }
.inquiry-alt { margin: 16px 0 0; font-size: 0.9rem; }
.inquiry .inquiry-confirmation { padding: 6px 2px 10px; }
.inquiry-confirmation:focus { outline: 2px solid var(--cobalt-bright); outline-offset: 6px; }
.inquiry [hidden] { display: none !important; }
@media (max-width: 800px) { .contact-split { grid-template-columns: 1fr; } }
/* Form fields: white paper inside the dark frame, pixel bevel, dark text. Applies to every form on the site. */
input, textarea, select {
  background: #ffffff; color: var(--navy); border: 2px solid var(--line);
  box-shadow: inset 3px 3px 0 #c9dcf8;
}
input::placeholder, textarea::placeholder { color: #6b7f9c; }
input:focus-visible, textarea:focus-visible, select:focus-visible {
  border-color: var(--cobalt); outline: 2px solid var(--white); outline-offset: 2px; box-shadow: inset 3px 3px 0 #c9dcf8, 0 0 0 4px var(--cobalt-soft);
}
select option { color: var(--navy); background: #ffffff; }