/* happydale home v2: Lenis's register (black, edge-to-edge mark, caps chrome, pill actions) with our mark and smile;
   the origin story is AdHoc's tilted-card track on warm paper. */
@font-face { font-family: 'Comfortaa'; src: url(fonts/Comfortaa-wght.woff2) format('woff2'); font-weight: 300 700; font-display: swap; }
@font-face { font-family: 'Anton'; src: url(fonts/anton-latin-400-normal.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'Space Mono'; src: url(fonts/space-mono-latin-400-normal.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Space Mono'; src: url(fonts/space-mono-latin-700-normal.woff2) format('woff2'); font-weight: 700; font-display: swap; }

:root {
    --night: #050608; --ink: #14161a; --cream: #f3eee4; --paper: #ece3cf; --paper-2: #e3d8c0;
    --teal: #0abea2; --teal-ink: #04352d; --mute: rgba(243, 238, 228, 0.62);
    --display: 'Anton', 'Impact', sans-serif; --mono: 'Space Mono', ui-monospace, monospace; --brand: 'Comfortaa', system-ui, sans-serif;
    --gut: clamp(16px, 3vw, 40px);
}
* { box-sizing: border-box; }
html { background: var(--night); color: var(--cream); -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body { margin: 0; font: 400 15px/1.5 var(--mono); overflow-x: clip; }
a { color: inherit; }
ul, ol { list-style: none; margin: 0; padding: 0; }
img { display: block; max-width: 100%; height: auto; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.skip { position: absolute; left: var(--gut); top: -60px; z-index: 50; background: var(--teal); color: var(--night); padding: 10px 14px; font: 700 13px var(--mono); }
.skip:focus { top: 12px; }

/* ---- nav ---- */
.nav { position: fixed; inset: 0 0 auto; z-index: 20; padding: 18px var(--gut); mix-blend-mode: normal; }
.nav nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.nav ul { display: flex; align-items: center; gap: clamp(14px, 2vw, 28px); }
.nav li { display: flex; align-items: center; }
.nav-r { justify-content: flex-end; }
.nav a { font: 400 15px/1 var(--display); letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; padding: 8px 0; display: inline-block; }
.nav a:hover { color: var(--teal); }
/* Pause motion (WCAG 2.2.2): reads as a nav item, states itself with a dot */
.motion-btn { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 8px 0; font: 400 15px/1 var(--display); letter-spacing: 0.06em; text-transform: uppercase; }
.motion-btn::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 25%, transparent); }
.motion-btn[aria-pressed='true']::before { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
.motion-btn:hover { color: var(--teal); }
.motion-btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.motion-btn[hidden] { display: none; }
/* phones: the dot and "Motion" show; the verb stays in the accessible name ("Pause motion", WCAG 2.5.3) */
@media (max-width: 560px) {
    .motion-btn { min-height: 44px; padding: 0; }
    .motion-verb { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
.nav-mark { width: 40px; height: 40px; padding: 0 !important; }
.nav-mark svg { width: 40px; height: 40px; display: block; }
.nav-mark rect { fill: var(--teal); }
.nav-mark path { fill: none; stroke: var(--night); stroke-width: 4; stroke-linecap: round; }
.nav.on-paper { color: var(--ink); }
.nav.on-paper .nav-mark rect { fill: var(--ink); } .nav.on-paper .nav-mark path { stroke: var(--teal); }

/* ---- hero ---- */
.hero { position: relative; min-height: 100svh; display: grid; grid-template-rows: 1fr auto auto 1fr auto; padding: 0 var(--gut) 24px; overflow: hidden; isolation: isolate; }
.hero-sky { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.hero::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(ellipse 60% 35% at 50% 42%, rgba(10, 190, 162, 0.10), transparent 70%), linear-gradient(to bottom, transparent 70%, rgba(5, 6, 8, 0.9)); }
.hero-glow { position: absolute; z-index: -1; left: -10%; bottom: -30%; width: 70vw; height: 80vh; pointer-events: none;
    background: radial-gradient(ellipse at 40% 70%, rgba(10, 190, 162, 0.32), rgba(10, 190, 162, 0.08) 45%, transparent 70%); filter: blur(10px);
    animation: glow 9s ease-in-out infinite alternate; }
@keyframes glow { to { transform: translate(6vw, -4vh) scale(1.08); opacity: 0.8; } }
.word { grid-row: 2; position: relative; will-change: transform, opacity, filter; transform-origin: 50% 60%; margin: 0; font: 700 clamp(56px, 17.6vw, 330px)/0.86 var(--brand); letter-spacing: -0.045em; color: var(--cream);
    text-align: center; white-space: nowrap; }
/* the opening: after the warp a beam cuts the wordmark into the dark (src/laser.js draws it on .laser); when the
   metal has cooled the real word is switched on underneath and the canvas goes, then the rest of the hero arrives. */
.laser { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
/* hidden from the very first paint (the head script sets html.hd-intro), so nothing flashes before the scripts arrive;
   if they never arrive, the hero shows itself after 3 s */
.hd-intro .hero:not(.done):not(.reveal):not(.warping):not(.intro) :is(.word-inner, .hero-sub, .hero-foot, .smile) { opacity: 0; animation: fade 0.6s ease 3s forwards; }   /* scripts never ran */
.hero:is(.warping, .intro) :is(.word-inner, .hero-sub, .hero-foot) { opacity: 0; }
.hero:is(.warping, .intro) .smile { visibility: hidden; }
.hero.reveal .word-inner { opacity: 1; }
.hero.reveal .smile path { stroke-dasharray: 1; animation: smile-draw 0.7s cubic-bezier(0.6, 0, 0.2, 1) 0.1s both; }
.hero.reveal .hero-sub { animation: arrive 0.7s ease 0.5s both; opacity: 0; }
.hero.reveal .hero-foot { animation: arrive 0.7s ease 0.7s both; opacity: 0; }
/* its own name: a same-named animation (the 3 s fallback 'fade') keeps its load-time clock and ignores the new delay */
@keyframes arrive { to { opacity: 1; } }
@keyframes smile-draw { 0% { stroke-dashoffset: 1; opacity: 0; } 1% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 1; } }   /* a zero-length round cap is a dot: hidden until it draws */
.word { z-index: 1; }
.word-inner { display: inline-block; transform-origin: 50% 55%; }
.smile { position: absolute; left: 33%; width: 30%; top: 103%; height: auto; overflow: visible; }
.smile path { fill: none; stroke: var(--teal); stroke-width: 7; stroke-linecap: round; }
/* warm visits, skips and reduced motion: the end state, no film */
.hero.done .word-inner { opacity: 1; animation: none; }
.hero.done .smile path { stroke-dashoffset: 0; opacity: 1; animation: none; }
.hero.done .hero-sub, .hero.done .hero-foot { animation: none; opacity: 1; }
.hero-sub { grid-row: 3; justify-self: end; margin: clamp(56px, 7.5vw, 120px) 0 0; font: 400 clamp(20px, 3.2vw, 52px)/1 var(--display); letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--cream); transition: opacity 0.7s ease; }
@keyframes fade { to { opacity: 1; } }
.hero-foot { grid-row: 5; display: grid; grid-template-columns: auto 1fr auto; align-items: end; gap: clamp(16px, 4vw, 64px); transition: opacity 0.7s ease 0.15s; }
.scroll-cue { margin: 0; padding-left: 14px; border-left: 2px solid var(--teal); display: grid; font: 400 22px/1 var(--display); text-transform: uppercase; letter-spacing: 0.02em; }
.hero-note { margin: 0; font: 700 12px/1.45 var(--mono); text-transform: uppercase; letter-spacing: 0.04em; color: var(--mute); }
.pills { display: flex; gap: 14px; flex-wrap: wrap; justify-content: flex-end; }
.pill { display: inline-grid; grid-template-columns: 46px minmax(140px, 1fr); align-items: stretch; min-height: 50px; border-radius: 10px; background: var(--teal);
    color: var(--night); text-decoration: none; overflow: hidden; transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.25s; }
.pill-ic { display: grid; place-items: center; background: var(--night); color: var(--cream); margin: 3px; border-radius: 8px; font: 700 18px/1 var(--mono); }
.pill-t { display: grid; place-items: center; padding: 0 22px; font: 400 15px/1 var(--display); letter-spacing: 0.06em; text-transform: uppercase; }
.pill:hover { background: #2fe0c3; transform: translateY(-2px); }

/* ---- origin story ---- */
.story { position: relative; --bg: var(--paper); --fg: var(--ink); background-color: var(--bg); color: var(--fg);
    background-image: radial-gradient(rgba(20, 22, 26, 0.06) 1px, transparent 1px); background-size: 4px 4px; }
.story-pin { position: sticky; top: 0; height: 100svh; overflow: clip; }   /* clip, not hidden: focus cannot scroll it behind the camera */
/* the world: rows laid out in 2D; the camera (a transform on .world) follows a snake path set by the scroll */
.world { position: absolute; left: 0; top: 0; will-change: transform; }
.row { position: absolute; top: 0; left: 0; height: 100svh; display: flex; align-items: center; }
.r0 { padding-top: 150px; }
/* rows after the story: panels are placed one by one by the layout (absolute, a viewport each) */
.row[data-dir] { height: 0; width: 0; }
.row[data-dir] > .panel { position: absolute; }
.story-head { position: absolute; z-index: 2; left: 0; right: 0; top: 92px; }
.rail { position: absolute; z-index: 2; left: 0; right: 0; bottom: 24px; }
.story-head { display: grid; grid-template-columns: auto 1fr auto; align-items: end; gap: 24px clamp(20px, 4vw, 64px); padding: 0 var(--gut); }
.story-head h2 { margin: 0; font: 400 clamp(56px, 9vw, 150px)/0.85 var(--display); text-transform: uppercase; letter-spacing: -0.01em; display: flex; align-items: flex-start; gap: 10px; }
.badge { font: 700 15px/1 var(--mono); border: 2.5px solid currentColor; border-radius: 50%; width: 40px; height: 40px; display: grid; place-items: center; letter-spacing: 0; margin-top: 6px; }
.story-lede { margin: 0 0 8px; max-width: 30ch; font: 400 15px/1.5 var(--mono); }
.story-btns { display: flex; gap: 12px; }
.sbtn { display: inline-flex; align-items: center; gap: 18px; min-height: 52px; padding: 4px; border: 1.5px solid rgba(20, 22, 26, 0.35); border-radius: 10px; background: transparent;
    color: var(--ink); font: 400 15px/1 var(--display); letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; }
.sbtn span:not(.sbtn-ic) { padding: 0 14px; }
.sbtn-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 8px; background: var(--ink); color: var(--paper); font-size: 13px; }
.sbtn:disabled { opacity: 0.35; cursor: default; }
.sbtn:not(:disabled):hover { border-color: var(--ink); }

.track { display: flex; align-items: center; gap: 0; padding: 0 calc(50vw - clamp(125px, 12vw, 170px)) 0 clamp(24px, 6vw, 96px); will-change: transform; outline-offset: -6px; }
.card { flex: none; translate: 0 0; rotate: var(--lean, 0deg); transition: rotate 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); width: clamp(250px, 24vw, 340px); background: #f5f1e8; border-radius: 6px; padding: 14px 14px 22px;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05), 0 18px 40px -18px rgba(40, 30, 10, 0.45); transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
.card:hover { transform: rotate(0deg) translateY(-6px) !important; }
.card-pic { aspect-ratio: 5 / 4; overflow: hidden; border-radius: 3px; background: var(--ink); }
.card-pic img { width: 100%; height: 100%; object-fit: cover; }
.card-type { display: grid; place-content: center; text-align: center; color: var(--cream); background: radial-gradient(circle at 30% 20%, #23303a, #0b0d10 70%);
    font: 400 clamp(30px, 3vw, 44px)/0.95 var(--display); text-transform: uppercase; }
.card-type .x { color: var(--teal); font: 700 22px/1.2 var(--mono); }
/* Community spotlight posters: our own design (no EA marks), a spotlight beam on the experience name */
.spot { position: relative; display: grid; align-content: space-between; justify-items: start; gap: 8px; padding: 14px 16px; overflow: hidden; color: var(--cream);
    background: radial-gradient(ellipse 60% 90% at 78% -10%, rgba(10, 190, 162, 0.55), transparent 62%), conic-gradient(from 200deg at 78% -10%, transparent 0deg, rgba(143, 243, 226, 0.16) 18deg, transparent 36deg), linear-gradient(160deg, #10241f, #070a0c 70%); }
.spot.alt { background: radial-gradient(ellipse 60% 90% at 22% -10%, rgba(10, 190, 162, 0.55), transparent 62%), conic-gradient(from 150deg at 22% -10%, transparent 0deg, rgba(143, 243, 226, 0.16) 18deg, transparent 36deg), linear-gradient(200deg, #10241f, #070a0c 70%); }
.spot.dig { background: repeating-linear-gradient(170deg, rgba(243, 238, 228, 0.05) 0 2px, transparent 2px 14px), radial-gradient(ellipse 70% 60% at 50% 120%, rgba(10, 190, 162, 0.4), transparent 70%), linear-gradient(180deg, #1a1712, #070a0c); }
.spot-k { font: 700 9px/1 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: #8ff3e2; border: 1px solid rgba(143, 243, 226, 0.5); padding: 5px 7px; border-radius: 2px; }
.spot-t { font: 400 clamp(26px, 2.6vw, 40px)/0.88 var(--display); text-transform: uppercase; letter-spacing: 0.01em; text-shadow: 0 0 24px rgba(10, 190, 162, 0.35); }
.spot-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.spot-chips span { font: 700 9px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 7px; background: rgba(243, 238, 228, 0.1); border-radius: 2px; }
.card-pic.fit { background: linear-gradient(#f7f7f8, #dddee3); }   /* the badge's own backdrop, so the fit reads as one image */
.card-pic.brand { background: radial-gradient(circle at 50% 38%, #24d6b9, var(--teal) 55%, #07806d); display: grid; place-items: center; }
.card-pic.brand img { width: 46%; height: auto; object-fit: contain; border-radius: 22%; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset, 0 10px 24px -8px rgba(4, 53, 45, 0.55); }
.card-pic.ic-logo { background: radial-gradient(circle at 50% 40%, #fbf8f1, #e6ddc9 75%); display: grid; place-items: center; }   /* the wordmark is dark ink: it sits on paper */
.card-pic.ic-logo img { width: 82%; height: auto; object-fit: contain; }
.card-pic.fit img { object-fit: contain; }   /* a partner badge shows whole, never cropped */
.card-pic.sunset { background: linear-gradient(#7a2ea0, #f4d23a); }
.card-pic.sunset img { object-fit: contain; }   /* the whole wordmark, on its own gradient */
.card-link { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.card-link:hover { color: var(--teal); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.foot-note { font-size: 11px; }
.card-date { margin: 20px 4px 6px; font: 400 clamp(30px, 2.6vw, 40px)/1 var(--display); text-transform: uppercase; letter-spacing: -0.005em; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.card-text { margin: 0 4px; font: 400 14px/1.45 var(--mono); max-width: 30ch; }
.wip { font: 700 11px/1 var(--mono); letter-spacing: 0.06em; background: var(--teal); color: var(--night); padding: 6px 8px; border-radius: 4px; }
.tilt-a { transform: rotate(-4deg) translateY(30px); } .tilt-b { transform: rotate(3deg) translateY(-24px); } .tilt-c { transform: rotate(-2.5deg) translateY(40px); }
.tilt-d { transform: rotate(3.5deg) translateY(-18px); } .tilt-e { transform: rotate(-2deg) translateY(26px); }
.now { box-shadow: 0 0 0 3px var(--teal), 0 18px 40px -18px rgba(40, 30, 10, 0.45); }
.arrow { flex: none; width: clamp(90px, 9vw, 160px); margin: 0 clamp(4px, 1vw, 16px); }
.arrow svg { width: 100%; overflow: visible; }
.arrow path { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.rail { display: flex; justify-content: space-between; gap: 12px; padding: 0 var(--gut); font: 700 12px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.05em; color: #605e59; }   /* 5.07:1 on paper (WCAG 1.4.3) */
.rail span { transition: color 0.3s; position: relative; padding-top: 12px; }
.rail span.on { color: var(--ink); }
.rail span.on::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--teal); }

/* ---- panels: full-viewport sections on the same track ---- */
.panel { flex: none; width: 100vw; height: 100svh; display: grid; place-content: center; justify-items: center; text-align: center; gap: 10px; color: var(--fg); }
/* Nexus mirrors the IC layout: film left, words right */
.panel.nexus { background: var(--bg); grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); place-content: center; align-items: center; justify-items: start; text-align: left;
    gap: clamp(28px, 5vw, 80px); padding: 0 clamp(24px, 6vw, 96px); }
.nx-film { order: -1; position: relative; margin: 0; width: 100%; max-width: 78svh; aspect-ratio: 1; justify-self: center; }
/* the hero object floats: the render's black stage drops out (screen blend) over a soft teal halo */
.nx-film::before { content: ''; position: absolute; inset: 8%; z-index: 0; border-radius: 50%;
    background: radial-gradient(circle at 50% 55%, rgba(10, 190, 162, 0.32), rgba(10, 190, 162, 0.08) 45%, transparent 70%); filter: blur(8px); }
.nx-film video { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; display: block; mix-blend-mode: screen;
    -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 96%); mask-image: linear-gradient(to bottom, #000 72%, transparent 96%); }
.story-head, .rail { transition: opacity 0.2s linear; }
/* Internal Conflict: the map unrolls from its right edge as the panel glides in (--unroll 0..1, set from the scroll) */
.panel.ic { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); place-content: center; align-items: center; justify-items: start; text-align: left;
    gap: clamp(28px, 5vw, 80px); padding: 0 clamp(24px, 6vw, 96px); }
.ic-k { margin: 0 0 12px; font: 700 13px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.12em; color: var(--teal); }
.ic-t { margin: 0; font: 400 clamp(64px, 8.5vw, 150px)/0.86 var(--display); text-transform: uppercase; letter-spacing: -0.01em; }
.ic-line { margin: 18px 0 26px; font: 400 16px/1.5 var(--mono); max-width: 30ch; color: color-mix(in srgb, var(--fg) 75%, transparent); }
.ic-map { position: relative; margin: 0; width: 100%; aspect-ratio: 1120 / 860; max-height: 68svh; justify-self: stretch; }
.ic-sheet { position: absolute; inset: 0; border-radius: 4px; overflow: hidden; clip-path: inset(0 calc((1 - var(--unroll, 0)) * 100%) 0 0);
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.9); }
.ic-sheet img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.82) contrast(1.06); }
/* the front: two sides pushing the line back and forth across the map; drag or arrow keys move it (src/ic-front.js) */
.ic-front { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ic-map { cursor: ew-resize; user-select: none; -webkit-user-select: none; } .ic-map img { -webkit-user-drag: none; pointer-events: none; } .ic-map.dragging { cursor: grabbing; }
.ic-map:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; }
.ic-map.dragging .ic-front-line { stroke: #fff; }
.ic-front-a { fill: rgba(10, 190, 162, 0.16); } .ic-front-b { fill: rgba(220, 60, 50, 0.14); }
.ic-front-line { fill: none; stroke: #f3eee4; stroke-width: 2.5; stroke-dasharray: 14 9; stroke-linecap: round; }
.ic-front-glow { fill: none; stroke: rgba(255, 190, 120, 0.55); stroke-width: 10; filter: blur(4px); }
.ic-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(233, 228, 212, 0.16) 1px, transparent 1px), linear-gradient(90deg, rgba(233, 228, 212, 0.16) 1px, transparent 1px);
    background-size: 12.5% 16.2%; mix-blend-mode: overlay; }
.ic-hud { position: absolute; left: 14px; top: 12px; display: grid; gap: 4px; font: 700 11px/1 var(--mono); letter-spacing: 0.1em; color: #e9e4d4; text-shadow: 0 1px 2px #000; }
.ic-hud i { font-style: normal; opacity: 0.7; }
/* the paper roll: a cylinder of the sheet's own edge, riding the unroll line, shrinking to nothing as it lays flat */
.ic-roll { position: absolute; top: -1.5%; bottom: -1.5%; width: calc(28px * (1 - var(--unroll, 0)) + 2px); left: calc(var(--unroll, 0) * 100% - 2px);
    border-radius: 14px; opacity: calc(1 - var(--unroll, 0) * 0.9);
    background: linear-gradient(90deg, #1d2a17 0%, #6f7d55 35%, #c9caa5 52%, #6f7d55 70%, #1a2414 100%); box-shadow: -8px 0 18px rgba(0, 0, 0, 0.55); }
@media (max-width: 860px) { .panel.ic { grid-template-columns: 1fr; padding-block: 60px; } }
@media (prefers-reduced-motion: reduce) { .ic-sheet { clip-path: none; } .ic-roll { display: none; } }
.motion-off .ic-sheet { clip-path: none; } .motion-off .ic-roll { display: none; }
.panel.end { grid-template-columns: minmax(0, 1fr) minmax(320px, 460px); align-items: center; justify-items: start; gap: clamp(32px, 6vw, 96px); padding: 96px clamp(24px, 6vw, 96px) 48px; text-align: left; }
.end-copy { display: grid; justify-items: start; gap: 10px; }
.contact { display: grid; gap: 14px; width: 100%; padding: 24px; border-radius: 10px; background: rgba(12, 16, 18, 0.82); border: 1px solid rgba(243, 238, 228, 0.14);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: var(--cream); }
.contact-t { margin: 0; font: 400 clamp(26px, 2.4vw, 36px)/1 var(--display); text-transform: uppercase; }
.bubbles { margin: 0; padding: 0; border: 0; display: grid; gap: 8px; }
.bubbles legend { padding: 0; margin-bottom: 8px; font: 700 12px/1.3 var(--mono); text-transform: uppercase; letter-spacing: 0.08em; color: #c9c4ba; }
.bubbles .opt { text-transform: none; letter-spacing: 0; font-weight: 400; }
.bubble-row { display: flex; flex-wrap: wrap; gap: 8px; }
.bubble { position: relative; }
.bubble input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.bubble span { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1.5px solid rgba(243, 238, 228, 0.35);
    font: 700 13px/1 var(--mono); color: var(--cream); transition: background-color 0.2s, border-color 0.2s, color 0.2s; }
.bubble input:checked + span { background: var(--teal); border-color: var(--teal); color: #04201b; }
.bubble input:checked + span::before { content: '✓ '; white-space: pre; }
.bubble input:focus-visible + span { outline: 2px solid var(--teal); outline-offset: 3px; }
@media (hover: hover) { .bubble:hover span { border-color: var(--teal); } }
.field { display: grid; gap: 6px; }
.field label { font: 700 12px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.08em; color: #c9c4ba; }
.field input, .field textarea { font: 400 16px/1.4 var(--mono); color: var(--cream); background: #0b0e10; border: 1.5px solid #77736b; border-radius: 6px; padding: 10px 12px; resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-color: var(--teal); }
.field [aria-invalid='true'] { border-color: #ff8a7a; }
.err { margin: 0; font: 700 13px/1.4 var(--mono); color: #ff9d90; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.contact-send { min-height: 44px; padding: 0 22px; border: 0; border-radius: 8px; background: var(--teal); color: #04201b; font: 700 14px/1 var(--display); letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; }
.contact-send:focus-visible { outline: 2px solid var(--cream); outline-offset: 3px; }
.contact-send:disabled { opacity: 0.7; cursor: progress; }
.contact-note { margin: 0; font: 400 12px/1.4 var(--mono); color: #c9c4ba; } .contact-note a { color: var(--cream); }
.contact-status { margin: 0; min-height: 1.4em; font: 700 14px/1.4 var(--mono); }
.contact-status[data-kind='ok'] { color: #8ff3e2; } .contact-status[data-kind='error'] { color: #ff9d90; }
@media (max-width: 860px) { .panel.end { grid-template-columns: 1fr; } }
.static .panel.end { grid-template-columns: 1fr; }
.end-k { margin: 0; font: 700 13px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.1em; color: color-mix(in srgb, var(--fg) 62%, transparent); }
.end-t { margin: 0; font: 700 clamp(90px, 18vw, 280px)/0.9 var(--brand); letter-spacing: -0.05em; }
.end-sub { margin: 0 0 22px; font: 400 26px/1 var(--display); text-transform: uppercase; color: var(--teal); }
.foot { display: flex; justify-content: space-between; gap: 16px; padding: 22px var(--gut); border-top: 1px solid rgba(243, 238, 228, 0.12); font: 400 12px/1 var(--mono); color: var(--mute); }
.foot ul { display: flex; gap: 18px; }
.foot a { text-decoration: none; } .foot a:hover { color: var(--teal); }

/* ---- phones and reduced motion: no pin; the track is a native swipe row ---- */
@media (max-width: 860px) {
    .nav-l li:nth-child(2) { display: none; }
    .hero-foot { grid-template-columns: 1fr; justify-items: start; }
    .hero-note { display: none; }
    .pills { justify-content: flex-start; display: grid; width: 100%; }
    .pill { grid-template-columns: 46px 1fr; }
    .story-head { grid-template-columns: 1fr; }
}
.static .story-pin { position: relative; height: auto; min-height: 0; padding: 92px 0 0; }
.static .story-head, .static .rail { position: relative; top: auto; bottom: auto; }
.static .rail { padding-bottom: 32px; }
.static .world { position: relative; transform: none !important; }
.static .row { position: relative; top: auto; left: auto !important; height: auto; display: block; padding: 0; }
/* the path rows are 0x0 anchors for absolutely placed panels; stacked, they are ordinary blocks again */
.static .row[data-dir] { width: auto; }
.static .row[data-dir] > .panel { position: relative; }
.static .panel { --fg: var(--pfg); --bg: var(--pbg); width: 100%; height: auto; min-height: 70svh; padding: 72px var(--gut); background: var(--pbg); color: var(--pfg); }
.static .panel.ic, .static .panel.nexus { grid-template-columns: 1fr; }
.static .nx-film { order: 0; }
.static .track { overflow-x: auto; scroll-snap-type: x mandatory; padding-block: 50px; transform: none !important; scrollbar-width: none; }
.static .track::-webkit-scrollbar { display: none; }
.static .card { scroll-snap-align: center; }
@media (prefers-reduced-motion: reduce) {
    .word-inner { opacity: 1; animation: none; }
    .hero-sub, .hero-foot { animation: none; opacity: 1; }
    .smile path { animation: none; stroke-dashoffset: 0; opacity: 1; }
    .hero-glow { animation: none; }
    .card, .pill { transition: none; }
}
/* the same, when the visitor pressed Pause motion (the JS also sets this class under the OS setting) */
.motion-off .hero-glow { animation: none; }
.motion-off .card, .motion-off .pill { transition: none; }

/* ---- what we do / work / studio panels ---- */
.panel.do, .panel.studio { grid-template-columns: 1fr; place-content: center; justify-items: stretch; align-content: center; text-align: left;
    gap: clamp(24px, 4vh, 48px); padding: 110px clamp(24px, 6vw, 96px) 60px; }
.do-head { display: grid; gap: 14px; justify-items: start; }
.do-head .ic-t { font-size: clamp(54px, 7vw, 120px); }
.ic-k.ink { color: color-mix(in srgb, var(--fg) 80%, transparent); }
.draft { display: inline-block; margin-left: 10px; padding: 4px 7px; border: 1.5px dashed currentColor; border-radius: 4px; font: 700 10px/1 var(--mono); letter-spacing: 0.12em; vertical-align: 2px; }   /* full strength: 4.6:1 or better on every panel */
.do-list { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1.5px solid var(--fg); }
.do-list li { padding: 22px 22px 8px 0; border-right: 1px solid color-mix(in srgb, var(--fg) 20%, transparent); }
.do-list li + li { padding-left: 22px; }
.do-list li:last-child { border-right: 0; }
.do-n { font: 700 13px/1 var(--mono); color: var(--teal); }
.do-list h3, .st-list h3 { margin: 18px 0 10px; font: 400 clamp(26px, 2.4vw, 38px)/1 var(--display); text-transform: uppercase; }
.do-list p, .st-list p { margin: 0; font: 400 14px/1.5 var(--mono); max-width: 28ch; color: color-mix(in srgb, var(--fg) 75%, transparent); }
.wk-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 18px); align-items: start; }
.wk { background: #1f2227; border-radius: 6px; padding: 8px 8px 14px; box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.9); transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); }
.wk:nth-child(odd) { transform: rotate(-1.6deg) translateY(10px); } .wk:nth-child(even) { transform: rotate(1.4deg) translateY(-8px); }
.wk:hover { transform: rotate(0) translateY(-10px); }
.wk img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 3px; }
.wk-lane { margin: 10px 2px 2px; font: 700 10px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal); }
.wk h3 { margin: 4px 2px 6px; font: 400 clamp(16px, 1.3vw, 21px)/1 var(--display); text-transform: uppercase; }
.wk-d { margin: 0 2px; font: 400 11px/1.45 var(--mono); color: rgba(243, 238, 228, 0.65); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.st-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1.5px solid var(--fg); }
.st-list li { padding: 22px 22px 8px 0; }
.st-list li + li { padding-left: 22px; border-left: 1px solid color-mix(in srgb, var(--fg) 25%, transparent); }
@media (max-width: 860px) {
    .do-list, .st-list { grid-template-columns: 1fr; } .do-list li, .st-list li { border-right: 0; border-left: 0 !important; padding-left: 0 !important; border-bottom: 1px solid color-mix(in srgb, var(--fg) 20%, transparent); padding-bottom: 18px; }
    .wk-grid { grid-template-columns: repeat(2, 1fr); }
}
.panel.do .ic-k, .panel.do .do-n { color: #05665a; }   /* teal at text size on paper, over the halftone dots: 5.7:1 */

/* ---- Nexus: the centre of the glide. The hand turns with the scroll while the path holds; each callout locks onto a
   real part (projected from the render) and names a different trade. ---- */
.panel.nexus { display: block; background: transparent; padding: 0; overflow: hidden; }   /* the story colour shows through, so the hover smoke can sit behind the hand */
/* on the path Nexus is three screens wide; its view layer rides the camera (--view-x, set per frame) so the hand stays
   centred while the giant outline word glides past behind it */
.nx-view { position: absolute; top: 0; left: var(--view-x, 0px); width: 100vw; height: 100%; }
.static .nx-view { position: relative; left: auto; width: auto; height: auto; min-height: inherit; }
.panel.nexus .nx-top { position: absolute; left: 50%; top: 92px; translate: -50% 0; text-align: center; z-index: 3; }
.panel.nexus .nx-top .ic-k { margin: 0 0 6px; }
.nx-t { margin: 0; font: 400 clamp(36px, 3.6vw, 56px)/1 var(--display); letter-spacing: 0.32em; margin-right: -0.32em; text-transform: uppercase; }
.nx-ghost { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; z-index: 0; pointer-events: none;
    font: 400 82svh/1 var(--display); letter-spacing: 0.18em; white-space: nowrap;
    /* a solid, slightly raised wordmark behind the hand: greyish white face, a short stepped extrusion and a soft drop */
    /* fully opaque, so the hover smoke stays behind it; muted greyish white so the hand still reads in front */
    color: #7f908c; -webkit-text-stroke: 0;
    background: linear-gradient(180deg, #a9b8b4 0%, #7f908c 55%, #66766f 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 1px 0 #55625e) drop-shadow(0 2px 0 #4a5753) drop-shadow(0 3px 0 #404c48) drop-shadow(0 4px 0 #36423e) drop-shadow(0 6px 0 #2d3834) drop-shadow(0 18px 24px rgba(0, 0, 0, 0.55)); }
.static .nx-ghost { font-size: clamp(180px, 30vw, 520px); letter-spacing: -0.01em; }
.nx-stage { position: absolute; left: 50%; top: 52%; width: min(70svh, 52vw); aspect-ratio: 1; translate: -50% -50%; z-index: 1; }
.nx-canvas { width: 100%; height: 100%; display: block; }   /* frames carry their own alpha: the hand is solid to every edge */
.nx-lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; overflow: visible; }
.nx-lines g { opacity: 0; transition: opacity 0.5s ease 0.25s; } .nx-lines g.on { opacity: 1; }
.nx-lines g path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.9s cubic-bezier(0.6, 0, 0.2, 1) 0.2s; } .nx-lines g.on path { stroke-dashoffset: 0; }
.nx-lines path { fill: none; stroke: var(--teal); stroke-width: 1.4; opacity: 0.85; }
.nx-lines circle { fill: var(--bg); stroke: var(--teal); stroke-width: 2.5; }
.nx-calls { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.nx-c { position: absolute; width: min(300px, 22vw); opacity: 0; translate: -56px 0; transition: opacity 0.6s ease, translate 0.9s cubic-bezier(0.2, 0.8, 0.2, 1); }
.nx-c.on { opacity: 1; translate: 0 0; }
.nx-c.tl { left: clamp(24px, 6vw, 110px); top: 24%; } .nx-c.tr { right: clamp(24px, 6vw, 110px); top: 24%; text-align: right; }
.nx-c.bl { left: clamp(24px, 6vw, 110px); top: 62%; } .nx-c.br { right: clamp(24px, 6vw, 110px); top: 62%; text-align: right; }
.nx-n { font: 700 12px/1 var(--mono); color: var(--teal); letter-spacing: 0.1em; }
.nx-c { padding: 14px 16px 16px; border-radius: 8px; background: rgba(4, 22, 19, 0.78); border: 1px solid rgba(143, 243, 226, 0.18);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.6); }
.nx-top { padding: 10px 22px 12px; border-radius: 8px; background: rgba(4, 22, 19, 0.72); border: 1px solid rgba(143, 243, 226, 0.16);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.nx-c h3 { margin: 6px 0 8px; font: 400 clamp(26px, 2.4vw, 40px)/1 var(--display); text-transform: uppercase; }
.nx-c p { margin: 0; font: 400 14px/1.5 var(--mono); color: color-mix(in srgb, var(--fg) 72%, transparent); }
.nx-end { position: absolute; left: 50%; bottom: 64px; translate: -50% 10px; width: min(760px, 86vw); margin: 0; text-align: center; z-index: 3;
    font: 400 clamp(18px, 1.6vw, 24px)/1.4 var(--mono); opacity: 0; transition: opacity 0.7s ease, translate 0.9s cubic-bezier(0.2, 0.8, 0.2, 1); }
.nx-end b { color: var(--teal); font-weight: 700; }
.nx-end { padding: 12px 20px; border-radius: 8px; background: rgba(4, 22, 19, 0.78); border: 1px solid rgba(143, 243, 226, 0.16); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); width: auto; max-width: min(760px, 86vw); }
.nx-end.on { opacity: 1; translate: -50% 0; }
.nx-credit { position: absolute; left: 50%; bottom: 22px; translate: -50% 0; margin: 0; width: min(760px, 86vw); text-align: center; z-index: 3;
    font: 400 11px/1.4 var(--mono); color: color-mix(in srgb, var(--fg) 60%, transparent); }   /* 6:1 on the Nexus teal */
.static .panel.nexus { min-height: 100svh; position: relative; }
@media (max-width: 860px) {
    .panel.nexus .nx-top { position: relative; left: auto; top: auto; translate: none; width: 100%; box-sizing: border-box; padding: 72px var(--gut) 0; background: none; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }   /* phones: title, hand, callouts in one column */
    .nx-stage { position: relative; left: auto; top: auto; translate: none; width: min(86vw, 440px); margin: 4px auto 18px; }
    .nx-c { position: relative; inset: auto !important; width: auto; text-align: left !important; opacity: 1; translate: none; margin: 0 var(--gut) 18px; }
    .nx-calls { position: relative; padding: 0; margin: 0; }
    .nx-lines { display: none; }
    .nx-end, .nx-end.on, .nx-credit { position: relative; left: auto; bottom: auto; translate: none; opacity: 1; margin: 12px auto; }   /* .on would re-apply the desktop centring */
}

/* ---- Four lanes: a lit, lifting card under the pointer ---- */
.do-list li { position: relative; isolation: isolate; border-radius: 6px; transition: translate 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.35s; cursor: default; }
.do-list li::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; opacity: 0; transition: opacity 0.35s;
    background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(10, 190, 162, 0.22), rgba(10, 190, 162, 0.05) 45%, transparent 70%); }
.do-list li::after { content: '→'; position: absolute; right: 18px; top: 22px; font: 700 18px/1 var(--mono); color: #067565; opacity: 0; translate: -8px 0; transition: opacity 0.3s, translate 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); }
.do-list h3 { position: relative; transition: color 0.3s; }
.do-list h3::after { content: ''; position: absolute; left: 0; bottom: -6px; height: 3px; width: 0; background: var(--teal); transition: width 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
.do-n { display: inline-block; transition: scale 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); transform-origin: left; }
@media (hover: hover) and (pointer: fine) {
    .do-list li:hover { translate: 0 -8px; background-color: rgba(255, 255, 255, 0.45); }
    .do-list li:hover::before { opacity: 1; } .do-list li:hover::after { opacity: 1; translate: 0 0; }
    .do-list li:hover h3::after { width: 64px; } .do-list li:hover .do-n { scale: 1.5; }
}
.do-list li:focus-within { translate: 0 -8px; }
/* the halftone hover shader (src/lanes-shader.js) fills the panel behind the lanes; the lanes lift above it as frosted cards */
.panel.do { position: relative; }
/* on the path the lanes panel is two screens wide: its view rides the camera (--view-x) so the scroll holds here while
   the lanes are stepped through one to four (src/lanes-step.js sets .on on the current lane) */
.panel.do[data-span] { padding: 0; display: block; }
.do-view { position: absolute; top: 0; left: var(--view-x, 0px); width: 100vw; height: 100%; display: grid; grid-template-columns: 1fr;
    align-content: center; gap: clamp(24px, 4vh, 48px); padding: 110px clamp(24px, 6vw, 96px) 60px; text-align: left; }
.static .do-view { position: relative; left: auto; width: auto; height: auto; padding: 0; }
.do-list li.on { translate: 0 -8px; background-color: rgba(255, 255, 255, 0.45); }
.do-list li.on::before { opacity: 1; } .do-list li.on::after { opacity: 1; translate: 0 0; }
.do-list li.on h3::after { width: 64px; } .do-list li.on .do-n { scale: 1.5; }
.do-shader { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.panel.do.has-shader > :not(.do-shader) { position: relative; z-index: 1; }
@media (hover: hover) { .has-shader .do-list li::before { display: none; } .has-shader .do-list li:hover { background-color: rgba(239, 233, 220, 0.82); backdrop-filter: blur(2px); } }
.metal-layer { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }   /* under the panels' text, over the section colour */
.story-pin > .world { z-index: 1; }
.origin-layer { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; transition: opacity 0.4s; }
.static .origin-layer { display: none; }
.static .metal-layer { display: none; }

/* ---- The builds: four rows; hovering one brings its art in beside the pointer ---- */
.panel.work { position: relative; }
/* The builds: four blueprint sheets on a four-screen panel. The view rides the camera (--view-x) like Nexus; the grid
   paper is on the panel itself so the glide is felt. builds.js draws each sheet's lines with the scroll (pathLength 1,
   data-at="from to" in the sheet's own 0..1), holds it, then glides to the next sheet. Stacked page: every sheet drawn. */
.panel.work { background-color: #0b2a3a; background-image: linear-gradient(rgba(143, 243, 226, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(143, 243, 226, 0.06) 1px, transparent 1px); background-size: 24px 24px; }
.bp-view { position: absolute; top: 0; left: var(--view-x, 0px); width: 100vw; height: 100%; overflow: hidden; }
.bp-head { position: absolute; z-index: 2; left: var(--gut); top: clamp(84px, 11vh, 120px); }
.bp-head .ic-t { font-size: clamp(30px, 3.4vw, 56px); }
.bp-list { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
.bp { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(240px, 0.36fr) minmax(0, 1fr); align-items: center; gap: clamp(24px, 3vw, 56px);
    padding: clamp(176px, 22vh, 210px) var(--gut) clamp(32px, 6vh, 64px); will-change: translate; }
.bp-text { display: grid; gap: 12px; align-content: center; justify-items: start; text-align: left; }
.bp-n { margin: 0; font: 700 13px/1 var(--mono); letter-spacing: 0.12em; color: var(--teal); } .bp-n span { color: color-mix(in srgb, var(--fg) 45%, transparent); }
.bp-lane { margin: 0; font: 700 11px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: #8ff3e2; }
.bp h3 { margin: 0; font: 400 clamp(44px, 5.6vw, 96px)/0.9 var(--display); text-transform: uppercase; color: var(--fg); }
.bp-d { margin: 0; max-width: 34ch; font: 400 15px/1.55 var(--mono); color: color-mix(in srgb, var(--fg) 75%, transparent); }
.bp-sheet { margin: 0; min-width: 0; max-height: 100%; display: grid; place-items: center; }
.bp-sheet .bp-svg { max-height: calc(100svh - clamp(190px, 26vh, 280px)); width: auto; max-width: 100%; }
.bp-svg { display: block; width: 100%; height: auto; font-family: 'Space Mono', ui-monospace, monospace; }
.bp-svg :is(path, circle) { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.bp-svg .fr { stroke: rgba(143, 243, 226, 0.35); stroke-width: 1; }
.bp-svg .ln { stroke: #bff7ec; stroke-width: 1.5; }
.bp-svg .hid { stroke: rgba(191, 247, 236, 0.55); stroke-width: 1; stroke-dasharray: 5 4; }
.bp-svg .ctr { stroke: rgba(191, 247, 236, 0.35); stroke-width: 0.8; stroke-dasharray: 18 4 3 4; }
.bp-svg .dm, .bp-svg .ld { stroke: rgba(191, 247, 236, 0.7); stroke-width: 0.9; }
.bp-svg .wt { stroke: #3ab8ff; stroke-width: 1.6; }
.bp-svg .rb { stroke: #ff8a3d; stroke-width: 1.2; stroke-dasharray: 3 3; }
.bp-svg .ht { stroke: rgba(191, 247, 236, 0.4); stroke-width: 0.8; }
.bp-svg .dot { fill: #0abea2; stroke: none; }
.bp-svg text { fill: #bff7ec; font-size: 10px; letter-spacing: 0.08em; }
.bp-svg .tb { font-size: 11px; font-weight: 700; } .bp-svg .tb2 { fill: rgba(191, 247, 236, 0.6); font-size: 9px; }
.bp-svg .hd { font-size: 10px; font-weight: 700; fill: #8ff3e2; } .bp-svg .dt { fill: rgba(191, 247, 236, 0.85); font-size: 9.5px; }
.bp-svg .bp-art .ink { fill: #bff7ec; stroke: none; }
.bp-svg .amb-drawn path { fill: none; stroke: #bff7ec; stroke-linejoin: round; stroke-linecap: round; }
.bp-svg .amb-drawn .amb-ink { stroke-width: 1.4; fill: #0b2a3a; }
.bp-svg .amb-drawn .amb-ghost { stroke-width: 0.8; opacity: 0.22; fill: rgba(191, 247, 236, 0.06); }
.amb-on .bp-svg .amb-bee { animation: amb-bee ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes amb-bee { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 25% { transform: translate(calc(9px * var(--ux)), calc(-7px * var(--uy))) rotate(6deg); } 50% { transform: translate(calc(3px * var(--ux)), calc(-14px * var(--uy))) rotate(-4deg); } 75% { transform: translate(calc(-8px * var(--ux)), calc(-5px * var(--uy))) rotate(3deg); } }   /* sheet units, scaled into the trace's own */
.bp-svg .bp-scan { stroke: #8ff3e2; stroke-width: 1.5; opacity: 0; filter: drop-shadow(0 0 6px rgba(10, 190, 162, 0.9)); }
.bp-sheet img.bp-src { display: block; width: 100%; height: auto; max-height: calc(100svh - clamp(190px, 26vh, 280px)); object-fit: contain; }
.bp-svg .co { fill: #f3eee4; font-size: 11px; font-weight: 700; }

.static .bp-view { position: relative; left: auto; width: auto; height: auto; overflow: visible; }
.static .bp-head { position: static; }
.static .bp-list { position: static; display: grid; gap: 56px; margin-top: 28px; }
.static .bp { position: relative; inset: auto; translate: none !important; padding: 0; }
@media (max-width: 860px) { .bp { grid-template-columns: 1fr; } }
.motion-off :is(.do-list li, .nx-c, .nx-lines g) { transition: none; }

/* stacked page: the date rail belongs to the gliding timeline only (each card carries its own date) */
.static .rail { display: none; }
/* content glides and scrolls under the fixed bar: blur what passes behind it so text never collides (invisible over a plain ground) */
.nav::before { content: ''; position: absolute; inset: 0 0 -14px; z-index: -1; pointer-events: none;
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
/* phone footer: one column, nothing cut off */
@media (max-width: 640px) {
    .foot { flex-direction: column; align-items: flex-start; gap: 12px; line-height: 1.5; }
    .foot ul { flex-wrap: wrap; gap: 6px 18px; padding: 0; margin: 0; }
    .foot a { display: inline-block; padding: 6px 0; }
}
/* the card sits inside one viewport with room for the fixed bar, even when the footer pushes the panel up */
.contact { gap: 11px; padding: 20px 22px; }
.bubbles legend { margin-bottom: 6px; }
.bubble-row { gap: 6px; }
.field { gap: 5px; }
.field input, .field textarea { padding: 8px 12px; }
.panel.end { padding-top: 120px; }
/* short laptop screens (720-820 px tall): tighten the card so it clears the bar and the footer */
@media (min-width: 861px) and (max-height: 820px) {
    .contact { gap: 7px; padding: 16px 20px; }
    .contact-t { font-size: 24px; }
    .bubble span { min-height: 30px; padding: 0 12px; }
    .field input { padding: 6px 10px; }
    .field textarea { padding: 6px 10px; height: 64px; }
    .contact-send { min-height: 40px; }
    .panel.end { padding-top: 132px; padding-bottom: 8px; }
}
/* footer: the three items share one baseline */
.foot { align-items: center; }
.foot p, .foot ul { margin: 0; padding: 0; list-style: none; }
@media (max-width: 640px) { .foot { align-items: flex-start; } }
/* mid widths (laptop to small desktop): the lede keeps a readable measure instead of a one-word column */
@media (min-width: 861px) and (max-width: 1279px) {
    .story-head h2 { font-size: clamp(44px, 6vw, 150px); white-space: nowrap; }
    .story-lede { min-width: 24ch; font-size: 14px; }
}
/* very short screens (under 700 px tall): the contact card gives up its last spare pixels */
@media (min-width: 861px) and (max-height: 699px) {
    .contact { gap: 5px; padding: 12px 18px; }
    .contact-t { font-size: 20px; }
    .bubbles legend { margin-bottom: 4px; }
    .bubble span { min-height: 26px; font-size: 12px; }
    .field label { font-size: 11px; }
    .field textarea { height: 48px; }
    .contact-send { min-height: 36px; }
    .contact-status { min-height: 0; }
    .panel.end { padding-top: 120px; }
}
/* short screens: lift the four Nexus cards so the closing line below never runs into the bottom pair */
@media (min-width: 861px) and (max-height: 780px) {
    .nx-c.tl, .nx-c.tr { top: 19%; }
    .nx-c.bl, .nx-c.br { top: 51%; }
    .nx-c h3 { margin: 4px 0 6px; }
}
@media (min-width: 861px) and (max-height: 699px) {
    .nx-c.tl, .nx-c.tr { top: 17%; }
    .nx-c.bl, .nx-c.br { top: 47%; }
    .nx-c p { font-size: 13px; line-height: 1.45; }
    .nx-end { bottom: 62px; padding: 8px 16px; font-size: 14px; }
    .nx-credit { bottom: 14px; font-size: 11px; }
}
/* short screens: timeline cards shrink a step and sit below the Origin story header */
@media (min-width: 861px) and (max-height: 699px) {
    .card { width: clamp(200px, 19vw, 250px); padding: 10px 10px 14px; }
    .card-date { margin-top: 12px; font-size: 28px; }
    .card p:not(.card-date) { font-size: 13px; line-height: 1.4; }
    .track { padding-top: 24px; }
}