/* Lucky Detour — house look: street-sign orange on near-black, pushed to studio grade */
:root {
  --bg: #0a0a0a;
  --bg-2: #101010;
  --ink: #f4efe6;
  --mute: #8d8a84;
  --hair: rgba(255, 255, 255, .09);
  --orange: #FF8C00;
  --teal: #3CC8D8;
  --mono: "Space Mono", ui-monospace, Menlo, monospace;
  --sans: "Work Sans", -apple-system, "Helvetica Neue", sans-serif;
  --gut: clamp(20px, 5vw, 72px);
  --top-h: 140px; /* the big picture above phone width sets its own, below */
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg); color: var(--ink); font-family: var(--sans); font-weight: 300;
  line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--orange); color: #000; }
.wrap { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 var(--gut); }

/* ---- type ---- */
/* eyebrows: terminal paths in the rail's own style, bigger (Jeff 2026-09-22) */
.eyebrow {
  font-family: var(--mono); font-weight: 700; font-size: clamp(1.05rem, 1.7vw, 1.45rem); letter-spacing: -.02em;
  color: var(--orange); margin-bottom: 28px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.eyebrow .pn__fam { color: var(--ink); } /* the ~/ in the site's cream, the third colour (Jeff 2026-09-22) */
.eyebrow .pn__cur { background: var(--orange); }
.h2 { font-weight: 800; font-size: clamp(2.2rem, 6vw, 5rem); line-height: .98; letter-spacing: -.035em; margin-bottom: 32px; text-wrap: balance; }
.lede { font-size: clamp(1.05rem, 1.6vw, 1.35rem); color: #c9c5bd; max-width: 40em; }
.fine { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--mute); margin-top: 28px; max-width: 60em; }

/* ---- status signs: road-sign plates ---- */
.sign {
  display: inline-block; font-family: var(--mono); font-weight: 700; font-size: 10px; letter-spacing: .2em;
  text-transform: uppercase; padding: 5px 10px 4px; border-radius: 4px; border: 1.5px solid currentColor; line-height: 1;
}
.sign--running { background: var(--orange); color: #000; border-color: var(--orange); }
.sign--proven { color: var(--ink); }
.sign--build { color: var(--teal); border-style: dashed; }

/* ---- the LD tile ---- */
.tile { display: inline-block; width: 1em; height: 1em; flex: 0 0 auto; border-radius: 23%; }
.sign--flag { color: #000; background: var(--ink); border-color: var(--ink); }

/* ---- product names ---- */
.pn { font-family: var(--mono); font-weight: 700; letter-spacing: -.04em; white-space: nowrap; }
.pn__fam { color: rgba(255, 255, 255, .28); font-weight: 400; }
.pn__cur { display: inline-block; width: .5em; height: .95em; margin-left: .12em; vertical-align: -.1em; animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ---- header: logo, the way to the other tour, and the rail ---- */
.top { position: fixed; inset: 0 0 auto 0; z-index: 40; background: linear-gradient(#0a0a0af2, #0a0a0a00); }
.top::before { content: ""; position: absolute; inset: 0; background: rgba(10, 10, 10, .93); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); border-bottom: 1px solid var(--hair); opacity: 0; transition: opacity .12s; z-index: -1; } /* .12 s: a fast wheel flick cannot beat it (Jeff) */
.top--solid::before { opacity: 1; }
.top__bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px var(--gut) 8px; }
.top__logo { position: relative; display: block; flex: 0 0 auto; transition: opacity .3s; }
.top__logo img { height: 72px; width: auto; }
.top__right { display: flex; align-items: center; gap: 10px; min-width: 0; }
.top__tour, .top__hello {
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em; white-space: nowrap;
  padding: 10px 14px; border: 1px solid var(--hair); border-radius: 100px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: .25s;
}
.top__hello { letter-spacing: .2em; text-transform: uppercase; background: var(--orange); border-color: var(--orange); color: #0a0a0a; font-weight: 700; box-shadow: 0 6px 24px rgba(255, 140, 0, .25); } /* filled orange like NEXT STOP (Jeff 2026-09-22) */
.top__tour { color: var(--orange); border-color: rgba(255, 140, 0, .4); letter-spacing: .2em; text-transform: uppercase; } /* same face as SAY HELLO (Jeff, hero round) */
.top__tour .pn__fam { color: rgba(255, 255, 255, .4); }
.top__tour:hover { background: var(--orange); color: #000; border-color: var(--orange); }
.top__hello:hover { background: var(--ink); border-color: var(--orange); color: var(--orange); box-shadow: 0 10px 30px rgba(255, 140, 0, .4); } /* hover: orange letters on cream, orange outline (Jeff 2026-09-22) */
.top__tour:hover .pn__fam { color: rgba(0, 0, 0, .55); }

/* the sheen: one band of light across the street sign, masked to its shape */
.sheen {
  position: absolute; inset: 0; pointer-events: none;
  -webkit-mask: url(../logo.svg) center / contain no-repeat; mask: url(../logo.svg) center / contain no-repeat;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .85) 50%, transparent 58%) 130% 0 / 300% 100% no-repeat;
}
@keyframes sheen { from { background-position: 130% 0; } to { background-position: -30% 0; } }
/* the header sign's hover: the splash's laser, small. An orange line traces the sign's outline once and retires (Jeff 2026-09-22: rhyme with the splash) */
.laser { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.laser__line, .laser__tip { stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; }
.laser__line { stroke: #FF8C00; stroke-width: 34; }
.laser__tip { stroke: #FFE2B8; stroke-width: 46; stroke-dasharray: 0.03 0.97; stroke-dashoffset: 1.03; }
.top__logo.laser-once .laser, .top__logo:hover .laser { filter: drop-shadow(0 0 3px rgba(255, 140, 0, .9)) drop-shadow(0 0 9px rgba(255, 140, 0, .45)); }
.top__logo.laser-once .laser__line, .top__logo:hover .laser__line { opacity: 1; animation: draw .8s cubic-bezier(.45, 0, .25, 1) forwards, vanish .35s ease-out .95s forwards; }
.top__logo.laser-once .laser__tip, .top__logo:hover .laser__tip { opacity: 1; animation: drawtip-sm .8s cubic-bezier(.45, 0, .25, 1) forwards, vanish .12s ease-out .8s forwards; }
@keyframes drawtip-sm { to { stroke-dashoffset: 0.03; } }

/* splash, the ident. Phases are classes on .splash, set by site.js on a clock:
   s-proj (old film: the L-arrow grey and flickering)  ->  s-etch (a laser draws the L, then the arrow; the fill pours in)
   ->  s-morph (the L-arrow grows and its arrowhead BECOMES the sign's; the body elongates left out of it; the letters etch in, right to left)
   ->  s-set (extrusion pops, one sheen)  ->  splash-out on <html> (the sign drives off right; the same sign comes round into the header from the left). */
.splash { display: none; }
.splashing .splash, .splash-out .splash { display: grid; place-items: center; position: fixed; inset: 0; z-index: 200; background: #000; overflow: hidden; }
.splash-out .splash { background: transparent; transition: background 1.1s ease .55s; pointer-events: none; } /* the black holds until the arrow is off frame (.5 s), then the film dissolves up (Jeff 2026-09-21) */
.splash__stage { position: relative; display: grid; place-items: center; width: min(78vw, 1100px); }
@media (max-width: 720px) { .splash__stage { width: 84vw; } }
.splash__stage > * { grid-area: 1 / 1; }
.splash__icon { width: 38%; height: auto; opacity: 0; overflow: visible; transform-origin: 50% 50%; }
.splash__icon .ic-o { fill: #EF6B01; fill-opacity: 0; }
.splash__icon .ic-k { fill: #000; stroke: #FF8C00; stroke-width: 0; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.splash__logo { position: relative; width: 100%; opacity: 0; transform-origin: 50% 50%; will-change: transform; }
.splash__sign { display: block; width: 100%; height: auto; overflow: visible; }
/* the film is 16:9 with the L at 60 % of frame height; the vector L is 900.29/1968 of the stage width, both centred,
   so the film runs 135.545 % of the stage width and its L lands on the vector L to the pixel (checked 2026-09-21) */
.splash__film { display: none; width: 135.545%; max-width: none; height: auto; }
.splash__grain {
  position: absolute; inset: -10%; pointer-events: none; opacity: 0; mix-blend-mode: screen;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .6  0 0 0 0 .6  0 0 0 0 .6  0 0 0 .22 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>") repeat;
}

/* 1 · old film */
.s-proj .splash__icon { opacity: 1; filter: grayscale(1) brightness(.75) contrast(1.15) blur(.3px); animation: gate .9s steps(1, end) 1, weave .9s linear 1; }
.s-proj .splash__icon .ic-o { fill-opacity: 1; }
.s-proj .splash__grain { opacity: .6; animation: grain .25s steps(1, end) infinite; }
@keyframes gate { 0% { opacity: 0; } 8% { opacity: .9; } 14% { opacity: .2; } 22% { opacity: 1; } 30% { opacity: .55; } 38% { opacity: 1; } 55% { opacity: .8; } 62% { opacity: 1; } 100% { opacity: 1; } }
@keyframes weave { 0% { transform: translate(0, 0); } 20% { transform: translate(1px, -2px); } 40% { transform: translate(-1px, 1px); } 60% { transform: translate(2px, 1px); } 80% { transform: translate(-1px, -1px); } 100% { transform: translate(0, 0); } }
@keyframes grain { 0% { transform: translate(0, 0); } 25% { transform: translate(-4%, 3%); } 50% { transform: translate(3%, -5%); } 75% { transform: translate(-2%, -2%); } 100% { transform: translate(4%, 4%); } }

/* 2 · the laser etch. The grey icon stays. In its exact place the sign svg shows sg-morph, the L-arrow as one clean
   silhouette: an orange line traces it in one pass with a cyan-white point at the tip, and the orange heats up behind
   the line so the laser TURNS the old grey mark orange; the black inner lines come with it; the line retires. */
.splash__sign .sg-morph { fill: #EF6B01; fill-opacity: 0; stroke: #FF8C00; stroke-width: 0; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.splash__sign .sg-tip { fill: none; stroke: #BFF6FF; stroke-width: 0; stroke-linecap: round; stroke-dasharray: 0.012 0.988; stroke-dashoffset: 1.012; }
.splash__sign .sg-ick { opacity: 0; }
.splash__sign .sg-cap { opacity: 0; } /* the fold shows it */
/* the full sign's own paths never show in the splash any more (the L-arrow is the whole ident); kept for the video slot */
.splash__sign .sg-body, .splash__sign .sg-line, .splash__sign .sg-l { opacity: 0; }
.s-etch .splash__icon { opacity: 1; filter: grayscale(1) brightness(.75) contrast(1.15); animation: vanish .35s ease-out .95s forwards; }
.s-etch .splash__icon .ic-o { fill-opacity: 1; }
.s-etch .splash__logo, .s-hold .splash__logo, .s-fold .splash__logo { opacity: 1; }
.s-etch .splash__sign { filter: drop-shadow(0 0 10px rgba(255, 140, 0, .7)) drop-shadow(0 0 30px rgba(255, 140, 0, .3)); }
.s-etch .splash__sign .sg-morph { stroke-width: 11; animation: draw 1s cubic-bezier(.45, 0, .25, 1) forwards, pour .8s ease-in .25s forwards, retire .3s ease-out 1.05s forwards; }
.s-etch .splash__sign .sg-tip { stroke-width: 16; filter: drop-shadow(0 0 6px #3CC8D8) drop-shadow(0 0 14px #3CC8D8); animation: drawtip 1s cubic-bezier(.45, 0, .25, 1) forwards, vanish .15s ease-out 1s forwards; }
.s-etch .splash__sign .sg-ick { animation: pour-in .3s ease-out .95s forwards; }
.s-etch .splash__grain { opacity: 0; transition: opacity .5s; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes drawtip { to { stroke-dashoffset: 0.012; } }
@keyframes pour { to { fill-opacity: 1; } }
@keyframes pour-in { to { opacity: 1; } }
@keyframes retire { to { stroke-width: 0; } }
@keyframes vanish { to { opacity: 0; } }

/* 2b · the 3D beat, when line-data names a film: it plays in place of the hold (a real orbit of the L), then hands back */
.s-film .splash__icon, .s-film .splash__logo { opacity: 0; }
.s-film .splash__film { display: block; }

/* 3 · the hold: the finished L pops solid (an extruded edge) and turns once about its own axis */
.s-hold .splash__sign .sg-morph, .s-fold .splash__sign .sg-morph, .splash-out .splash__sign .sg-morph { fill-opacity: 1; stroke-width: 0; stroke-dashoffset: 0; }
.s-hold .splash__sign .sg-tip, .s-fold .splash__sign .sg-tip, .splash-out .splash__sign .sg-tip { opacity: 0; }
.s-hold .splash__sign .sg-ick, .s-fold .splash__sign .sg-ick, .splash-out .splash__sign .sg-ick { opacity: 1; }
.s-hold .splash__sign, .s-fold .splash__sign, .splash-out .splash__sign { filter: drop-shadow(1px 1px 0 #7c3a05) drop-shadow(1px 1px 0 #7c3a05) drop-shadow(1px 1px 0 #6a3104) drop-shadow(1px 1px 0 #572803) drop-shadow(2px 3px 0 rgba(0, 0, 0, .55)) drop-shadow(0 0 14px rgba(255, 140, 0, .35)); }
.splash__stage { perspective: 1400px; }
.s-hold .splash__stage { animation: settle .4s cubic-bezier(.3, 1.4, .5, 1) 1; }
@keyframes settle { from { transform: scale(1.035); } to { transform: scale(1); } }
.s-hold .splash__logo { transform-style: preserve-3d; animation: orbit .9s cubic-bezier(.45, 0, .25, 1) .25s 1; }
@keyframes orbit { from { transform: rotateY(0); } to { transform: rotateY(360deg); } }

/* 4 · the fold: the stem retracts down into the shaft (JS slides the clip window), leaving a plain arrow pointing right */
.s-fold .splash__logo { opacity: 1; }

/* 5 · the detour (splash-out): the arrow shoots off to the right, the way it points; the black lifts and the film comes up;
   the sign comes round from the left into its place in the header */
.splash-out .splash__icon { display: none; }
.splash-out .splash__logo { opacity: 1; animation: shoot .5s cubic-bezier(.7, 0, 1, .55) forwards; }
@keyframes shoot { to { transform: translateX(130vw) scale(1.06); } }
.splashing .top__logo { opacity: 0; }
.splash-out .top__logo { animation: comeround .6s cubic-bezier(.15, .8, .25, 1) .8s both; }
@keyframes comeround { from { opacity: 0; transform: translateX(-160px); } to { opacity: 1; transform: none; } }
.splashing .punch__film, .splashing .punch .wrap, .splashing .rail, .splashing .top__right, .splashing .nextstop { opacity: 0 !important; animation: none !important; }
.splashing .foot, .splashing .stop:not(.stop--punch) { visibility: hidden; }
.booting #tour, .booting .foot { visibility: hidden; } /* nothing paints until site.js has built the page (the empty page's footer flashed on a refresh, Jeff 2026-09-22) */ /* nothing below the hero can flash before the splash mounts (Jeff 2026-09-22) */
.splashing body { overflow: hidden; }


/* the rail: which tour you are on, where you were / are / next */
.rail { display: flex; align-items: center; gap: 14px; padding: 0 0 0 var(--gut); height: 44px; transition: opacity 1s .3s; }
.top__right { transition: opacity 1s .3s; }
.rail__path { flex: 0 0 auto; font-size: 12px; }
.rail__path .pn__fn { color: var(--orange); letter-spacing: -.02em; }
.rail__path .pn__fam { color: var(--ink); font-weight: 700; }
.rail__path .pn__cur { background: var(--orange); }
.rail__track {
  position: relative; flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 2px; height: 100%; overflow-x: auto; scrollbar-width: none;
  padding: 0 var(--gut) 0 6px; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22px, #000 calc(100% - 40px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 22px, #000 calc(100% - 40px), transparent 100%);
}
.rail__track::-webkit-scrollbar { display: none; }
.rail__track a {
  position: relative; flex: 0 0 auto; display: flex; align-items: center; gap: 7px; height: 100%; padding: 0 10px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #6f6c67; transition: color .3s;
}
.rail__track a i { font-style: normal; font-size: 9px; opacity: .7; }
.rail__track a::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 2px; background: var(--a, var(--orange)); transform: scaleX(0); transition: transform .4s cubic-bezier(.2, .7, .1, 1); }
.rail__track a:hover { color: var(--ink); }
.rail__track a.was { color: #a39f98; }
.rail__track a.on { color: var(--a, var(--orange)); }
.rail__track a.on::after { transform: scaleX(1); }
.rail__sep { flex: 0 0 auto; font-family: var(--mono); font-size: 10px; color: #4a4844; }
/* Hero round (Jeff): no empty band top-right and no stops ever clipped. Above phone width the big picture's header is ONE row:
   the sign, then the rail filling the middle and wrapping onto a second line when the window is tight, then the two buttons. */
@media (min-width: 641px) {
  .page-big .top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "logo rail right"; align-items: center; column-gap: clamp(16px, 2.5vw, 40px); padding: 12px var(--gut) 10px; }
  .page-big .top__bar { display: contents; }
  .page-big .top__logo { grid-area: logo; }
  .page-big .top__right { grid-area: right; }
  /* Jeff 2026-09-22: the two rows are always centred, and ~/big-picture sits next to the stops (not the sign), at the middle of the rows */
  .page-big .rail { grid-area: rail; height: auto; min-height: 44px; padding: 0; gap: 14px; justify-content: center; align-items: center; container-type: inline-size; }
  .page-big .rail__path { height: 28px; display: flex; align-items: center; font-size: 13.5px; } /* a touch bigger: it qualifies the rail (Jeff 2026-09-22) */
  @container (max-width: 1400px) { .page-big .rail__track { max-width: 700px; } } /* below the one-line width the stops wrap as two even lines, never one stop alone */
  .page-big .rail__track { flex: 0 1 auto; box-sizing: content-box; flex-wrap: wrap; justify-content: center; overflow: visible; height: auto; padding: 0; row-gap: 2px; -webkit-mask-image: none; mask-image: none; }
  .page-big .rail__track a { height: 28px; }
}

/* ---- the big picture: one stop per screen ---- */
.stop { position: relative; min-height: 100svh; display: flex; flex-direction: column; padding: calc(var(--top-h) + 40px) 0 34px; scroll-margin-top: 0; border-top: 1px solid var(--hair); overflow: clip; } /* clip, not hidden: a sticky child needs the page as its scroller */
.stop > .wrap { position: relative; margin-top: auto; margin-bottom: auto; } /* centred in the room above the NEXT STOP button */
.h2--mid { font-size: clamp(2rem, 4.6vw, 3.9rem); line-height: 1.02; max-width: 17em; }
/* NEXT STOP floats at the foot of the window for as long as its stop is on screen, then leaves with the stop (Jeff 2026-09-22:
   a long stop must never hide the way down); on a short stop it simply sits at the foot */
.nextstop {
  opacity: 0; pointer-events: none; /* shown by .stop--lead (site.js): only the stop at the top of the window has a button */
  position: sticky; bottom: 34px; z-index: 6; align-self: center; margin-top: 28px; display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
  font-family: var(--mono); font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink);
  padding: 14px 24px; border: 1px solid var(--orange); border-radius: 100px; background: var(--orange); color: #0a0a0a; box-shadow: 0 6px 24px rgba(255, 140, 0, .25); transition: .25s;
}
/* filled orange so the way down is unmissable (Jeff, hero round); on hover it goes cream with a black arrow and lifts a touch */
.stop--lead .nextstop { opacity: 1; pointer-events: auto; }
.nextstop span { color: rgba(0, 0, 0, .66); font-weight: 400; } /* "Next stop" lighter, the stop's name bold (Jeff 2026-09-22: easier to read on the way down) */
.nextstop i { font-style: normal; color: #0a0a0a; animation: nudge 2.4s ease-in-out infinite; }
.nextstop:hover { background: var(--ink); border-color: var(--orange); color: var(--orange); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(255, 140, 0, .4); }
.nextstop:hover span { color: rgba(255, 140, 0, .75); } .nextstop:hover i { color: var(--orange); }
@keyframes nudge { 50% { transform: translateY(4px); } }

/* tap for detail */
.more { margin-top: 22px; max-width: 40em; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.more summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 0; font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: #b8b4ac; }
.more summary::-webkit-details-marker { display: none; }
.more summary::after { content: "+"; font-size: 18px; color: var(--orange); transition: transform .3s; }
.more[open] summary::after { transform: rotate(45deg); }
.more p { padding: 0 0 18px; color: #c9c5bd; }

/* old way / new way, side by side */
/* the pair: two separate rounded boxes with the sign's L-arrow between them (Jeff 2026-09-22). The old way is small, dim and
   deliberately long; the WarpDrive way is bright, bordered orange, and the laser runs round it once on reveal and on hover. */
.versus { position: relative; display: grid; grid-template-columns: 1fr 64px 1fr; align-items: stretch; gap: 0; margin: 36px auto 0; max-width: 1060px; } /* centred in the wrap, so the arrow sits over the NEXT STOP button (Jeff 2026-09-25) */
.versus > div { padding: clamp(18px, 2.4vw, 30px); border-radius: 16px; }
.versus__old { color: #8f8b84; font-size: .92rem; line-height: 1.5; border: 1px solid var(--hair); background: rgba(255, 255, 255, .015); }
.versus__new { position: relative; color: var(--ink); font-weight: 400; font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.45; background: linear-gradient(135deg, rgba(255, 140, 0, .24), rgba(255, 140, 0, .05) 70%); box-shadow: inset 0 0 0 1px rgba(255, 140, 0, .7), 0 30px 80px -40px rgba(255, 140, 0, .45); }
.versus__tag { font-family: var(--sans); font-weight: 600; font-size: clamp(1.05rem, 1.4vw, 1.25rem); letter-spacing: -.01em; color: #b8b4ac; margin-bottom: 10px; } /* the sans, not the mono's bold cut (Jeff: it read weak); never upper-cased */
.versus__new .versus__tag { color: var(--orange); font-weight: 700; }
.versus__arrow { display: grid; place-items: center; padding: 0 !important; }
.versus__arrow svg { display: block; width: 46px; height: 55px; filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .6)); }
.laser--box { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.laser--box rect { fill: none; stroke: #FF8C00; stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; filter: drop-shadow(0 0 4px rgba(255, 140, 0, .9)) drop-shadow(0 0 10px rgba(255, 140, 0, .5)); }
.versus.in .laser--box rect { opacity: 1; animation: draw 1.1s cubic-bezier(.45, 0, .25, 1) .5s forwards, vanish .4s ease-out 1.8s forwards; } /* once, as it comes into view */
.versus__new:hover .laser--box rect { opacity: 1; animation: draw-again .8s cubic-bezier(.45, 0, .25, 1) forwards, vanish-again .35s ease-out .95s forwards; } /* its own keyframe names: re-declaring the same ones would not restart */
@keyframes draw-again { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes vanish-again { to { opacity: 0; } }

/* ---- 1 · the punch ---- */
.stop--punch { border-top: 0; }
.punch__film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .82; transition: opacity 1.8s ease; }
.punch__film--still { background-size: cover; background-position: center; }
.punch__shade { position: absolute; inset: 0; background:
    linear-gradient(90deg, #0a0a0af0 0%, #0a0a0ab8 38%, #0a0a0a40 72%, #0a0a0a1a 100%),
    linear-gradient(0deg, #0a0a0a 0%, #0a0a0a00 30%),
    linear-gradient(180deg, #0a0a0acc 0%, #0a0a0a00 24%); }
.stop--punch .wrap { transition: opacity 1.2s .5s; }
.punch__h { font-weight: 800; font-size: clamp(2.5rem, min(7vw, 11.5vh), 6.6rem); line-height: .94; letter-spacing: -.045em; max-width: 12em; text-wrap: balance; text-shadow: 0 2px 40px rgba(0, 0, 0, .5); animation: rise 1.2s cubic-bezier(.2, .7, .1, 1) both; }
.punch__h span { display: block; text-wrap: balance; }
.punch__sub span { display: block; } .punch__sub span + span { margin-top: .3em; } /* one sentence per line (Jeff 2026-09-22) */
.punch__sub { margin-top: 32px; font-size: clamp(1.05rem, 1.7vw, 1.45rem); color: #ddd8cf; max-width: 33em; text-shadow: 0 1px 20px rgba(0, 0, 0, .7); animation: rise 1.2s .15s cubic-bezier(.2, .7, .1, 1) both; }
.nb { white-space: nowrap; }
@keyframes rise { from { opacity: 0; transform: translateY(28px); } }

/* ---- 2 · the proof ---- */
.proof__grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.proof__poster { position: relative; display: block; border-radius: 10px; overflow: hidden; box-shadow: 0 60px 120px -50px rgba(255, 140, 0, .5); } /* the glow is the house orange (Jeff 2026-09-22) */
.proof__poster img { display: block; width: 100%; height: auto; transition: transform 1.2s cubic-bezier(.2, .7, .1, 1); }
.proof__poster:hover img { transform: scale(1.03); }
.proof__txt .h2 { font-size: clamp(2rem, 3.6vw, 3.4rem); margin-bottom: 18px; text-wrap: balance; }
.proof__title { font-family: var(--mono); font-weight: 700; font-size: 1.1rem; color: var(--orange); margin-bottom: 10px; }
.proof__meta { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; color: #b8b4ac; }
.proof__meta i { font-style: normal; color: var(--orange); padding: 0 .2em; }
.proof__note { margin-top: 22px; max-width: 30em; color: #ddd8cf; }
.proof__about { margin-top: 18px; color: #c9c5bd; font-size: .98rem; line-height: 1.55; }
.proof__about b { display: block; font-family: var(--sans); font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em; color: var(--orange); margin-bottom: 6px; }
.btn.proof__btn { display: none; } /* the viewer is the button on a desktop; the phone gets the button under it */
.tags { margin: 0; } /* one line under the card's title, the proof's meta face (Jeff 2026-09-23) */
.tags .tags__spec { color: var(--teal); }
.nb { white-space: nowrap; } /* a dot and the word after it travel together */
.btn { display: inline-flex; gap: 12px; align-items: center; margin-top: 28px; padding: 16px 26px; background: var(--orange); color: #000; font-weight: 600; border-radius: 100px; transition: .25s; }
.btn:hover { background: var(--ink); color: var(--orange); box-shadow: inset 0 0 0 1px var(--orange); }
.btn span { transition: transform .25s; } .btn:hover span { transform: translateX(4px); }
.play { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; background: var(--orange); border: 1px solid var(--orange); box-shadow: 0 8px 30px rgba(0, 0, 0, .45); transition: .3s; } /* orange, white triangle (Jeff 2026-09-22) */
.play::after { content: ""; position: absolute; left: 31px; top: 25px; border: 13px solid transparent; border-left: 20px solid #fff; border-right: 0; transition: border-color .3s; }
a:hover > .play, button:hover > .play { background: var(--ink); border-color: var(--orange); transform: scale(1.08); }
a:hover > .play::after, button:hover > .play::after { border-left-color: var(--orange); }

/* ---- 3 · the shift ---- */
.shift__h { font-size: clamp(1.9rem, 4.4vw, 3.8rem); line-height: 1; max-width: 18em; }
.shift__looked { margin-top: 34px; font-family: var(--sans); font-weight: 600; font-size: clamp(1.1rem, 1.6vw, 1.4rem); letter-spacing: -.01em; color: var(--orange); } /* same retirement of the mono bold (Jeff 2026-09-22) */
.map__label { margin-top: clamp(44px, 6vw, 72px); margin-bottom: 14px; font-family: var(--sans); font-weight: 600; font-size: clamp(1.05rem, 1.4vw, 1.25rem); letter-spacing: -.01em; color: #b8b4ac; } /* the map's heading, above the phase names; never upper-cased (the mark) */
.stop--shift .versus { margin-top: clamp(44px, 6vw, 72px); } /* the pair sits under the map since 2026-09-24 */
/* the line map, public version (Jeff 2026-09-22): the eight tiles in production order under their phase, with a status; no names */
.map { display: grid; grid-template-columns: repeat(8, 1fr); gap: 12px; margin-top: 14px; max-width: 1100px; }
.map__group { grid-column: span var(--n); display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.map__phase { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); white-space: nowrap; padding: 0 0 8px 2px; border-bottom: 1px solid var(--hair); line-height: 1.5; } /* the stage, two lines: its number in orange, its name in cream (Jeff 2026-09-25: more prominent, and the word Stage) */
.map__phase b { display: block; font-weight: 700; font-size: 9px; letter-spacing: .22em; color: var(--orange); }
.map__tiles { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 8px; }
.map__st { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 16px 8px 14px; border: 1px solid var(--hair); border-radius: 14px; background: rgba(255, 255, 255, .02); min-width: 0; }
.map__st .tile { font-size: clamp(40px, 4.6vw, 60px); box-shadow: 0 12px 28px -12px color-mix(in srgb, var(--a) 70%, transparent); }
.map__cap { font-family: var(--sans); font-weight: 500; font-size: clamp(.8rem, 1vw, .95rem); color: var(--ink); text-align: center; line-height: 1.15; margin-top: -2px; } /* what a tile is, not what it is called (Jeff 2026-09-24) */
.map__st .sign { font-size: 8px; letter-spacing: .14em; padding: 4px 6px 3px; }
/* the door is a request: the orange plate opens onto the form */
.door { margin-top: 28px; border-radius: 20px; overflow: hidden; }
.door summary {
  list-style: none; cursor: pointer; display: flex; justify-content: center; align-items: center; gap: 20px; flex-wrap: wrap;
  padding: clamp(22px, 3vw, 36px) clamp(22px, 3.4vw, 44px); background: var(--orange); color: #000; transition: .3s;
}
.door summary::-webkit-details-marker { display: none; }
.door summary:hover, .door[open] summary { background: var(--ink); }
.door__path { font-family: var(--mono); font-weight: 700; font-size: clamp(.9rem, 1.3vw, 1.1rem); opacity: .6; }
.door__go { font-weight: 800; font-size: clamp(1.7rem, 4vw, 3.2rem); letter-spacing: -.04em; line-height: 1; }
.door__go i { font-style: normal; display: inline-block; transition: transform .3s; }
.door summary:hover .door__go i { transform: translateX(8px); }
.door[open] .door__go i { transform: rotate(90deg); }
.door__form { padding: clamp(22px, 3vw, 36px) clamp(22px, 3.4vw, 44px); border: 1px solid var(--hair); border-top: 0; border-radius: 0 0 20px 20px; background: rgba(255, 255, 255, .02); }
.door__sub { color: #c9c5bd; max-width: 40em; margin-bottom: 24px; }
.door__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 22px; max-width: 800px; }
.door__fields label { display: flex; flex-direction: column; gap: 7px; font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--mute); }
.door__fields label.wide { grid-column: 1 / -1; }
.door__fields input, .door__fields textarea { font: 400 1rem/1.4 var(--sans); color: var(--ink); background: rgba(255, 255, 255, .04); border: 1px solid var(--hair); border-radius: 8px; padding: 12px 14px; width: 100%; resize: vertical; }
.door__fields input:focus, .door__fields textarea:focus { outline: 0; border-color: var(--orange); }
.door .btn { margin-top: 22px; }
.door__note { margin-top: 14px; font-family: var(--mono); font-size: 12px; color: var(--orange); }
.door__note a { text-decoration: underline; text-underline-offset: 3px; }

/* ---- 4 · copyright, 5 · footprint: a main column and a side column ---- */
.cols { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(28px, 4vw, 64px); margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--hair); max-width: 1100px; }
.cols__tag { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--mute); }
.cols__tag--gap { margin-top: 30px; }
.cols__p { color: #c9c5bd; max-width: 34em; }
.ticks, .dashes, .nos { list-style: none; }
.ticks li, .dashes li { position: relative; padding: 9px 0 9px 28px; border-bottom: 1px solid var(--hair); }
.ticks li { font-weight: 400; font-size: clamp(1rem, 1.3vw, 1.15rem); color: var(--ink); }
.ticks li::before { content: ""; position: absolute; left: 2px; top: 1.05em; width: 12px; height: 6px; border-left: 2px solid var(--orange); border-bottom: 2px solid var(--orange); transform: rotate(-45deg); }
.dashes li { color: #b8b4ac; font-size: .98rem; }
.dashes li::before { content: ""; position: absolute; left: 2px; top: 1.35em; width: 12px; border-top: 2px dashed var(--teal); }
.nos li { font-weight: 800; font-size: clamp(1.5rem, 2.6vw, 2.3rem); line-height: 1.12; letter-spacing: -.03em; }
.closer { margin-top: 34px; font-family: var(--sans); font-weight: 600; font-size: clamp(1.05rem, 1.5vw, 1.3rem); letter-spacing: -.01em; color: var(--orange); } /* every stop's outro line is orange (Jeff 2026-09-25: one look for all of them) */ /* the sans: the mono's bold cut is retired from lines and labels (Jeff 2026-09-22) */
.plans { margin-top: 26px; }
.plans .cols__tag { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.closer--orange { color: var(--orange); }
.foot__concede { font-size: clamp(1.2rem, 2.2vw, 1.8rem); font-weight: 400; color: var(--ink); max-width: 30em; }
.foot__industry { margin-top: 28px; }
/* the studies' figures, big (Jeff 2026-09-22): the industry's numbers, each pointing at its note below */
.figs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px 28px; margin-top: 44px; max-width: 1100px; }
.fig { min-width: 0; }
.fig__box { padding-top: 14px; border-top: 2px solid var(--orange); }
.fig__n { font-weight: 800; font-size: clamp(2.4rem, 4.8vw, 4.4rem); line-height: .95; letter-spacing: -.04em; color: var(--ink); }
.fig__n sup, .figs__aside sup { font-family: var(--mono); font-weight: 400; font-size: .3em; color: var(--mute); vertical-align: top; margin-left: 4px; }
.figs__aside sup { font-size: 10px; }
.fig__u { margin-top: 10px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--orange); }
.fig__w { margin: 0 0 10px; font-family: var(--sans); font-weight: 600; font-size: 1rem; line-height: 1.3; color: var(--ink); min-height: 2.6em; display: flex; align-items: flex-end; } /* the heading, above the rule; the four rules line up */
.figs__aside { margin-top: 22px; color: #c9c5bd; max-width: 40em; }
.stop--footprint .cols { margin-top: 44px; }
.stop--footprint .figs { margin-top: 52px; }
.stop--footprint .versus { margin-top: 60px; max-width: 1100px; }
.stop--footprint .closer { margin-top: 40px !important; }
.stop--footprint .notes { margin-top: 60px; }
.versus sup { font-family: var(--mono); font-weight: 400; font-size: .6em; color: var(--mute); vertical-align: top; margin-left: 3px; }
.versus__old p + p { margin-top: .7em; }
.tm { font-size: .42em; font-weight: 400; letter-spacing: 0; vertical-align: .95em; margin-left: .06em; } /* the ™, small, wherever the mark is written */
.stop--footprint .closer { margin-top: 22px; }
.notes { margin-top: 48px; padding-top: 18px; border-top: 1px solid var(--hair); max-width: 1100px; }
.notes__label { font-family: var(--mono); font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--mute); margin-bottom: 10px; }
.notes ol { padding-left: 1.4em; }
.notes li { font-family: var(--mono); font-size: 10.5px; line-height: 1.6; letter-spacing: .02em; color: var(--mute); padding: 3px 0; max-width: 70em; }
.notes li::marker { color: var(--orange); }
.notes a { text-decoration: underline; text-decoration-color: var(--hair); text-underline-offset: 3px; }
.notes a:hover { color: var(--orange); }

/* glimpse motion */
.g-row { animation: pulse 3.2s ease-in-out infinite; }
.g-cell { animation: pulse 4.4s ease-in-out infinite; }
.g-bar { animation: bar 1.4s ease-in-out infinite alternate; }
.g-glow { animation: pulse 5s ease-in-out infinite; }
.g-stack { animation: pulse 2s ease-in-out infinite; }
.g-head { animation: head 6s linear infinite; }
.g-film { animation: film 9s linear infinite; }
.g-path { animation: dash 3s linear infinite; }
.g-walk { offset-path: path("M70 150C120 140 140 90 200 70S250 120 255 150"); animation: walk 6s ease-in-out infinite alternate; }
.g-walk2 { offset-path: path("M98 98C140 100 170 108 250 132"); animation: walk 7s ease-in-out infinite alternate; }
.g-cone { transform-origin: 196px 150px; animation: cone 7s ease-in-out infinite alternate; }
.g-head2 { animation: head2 7s ease-in-out infinite alternate; }
.g-dolly { animation: dolly 12s ease-in-out infinite alternate; }
.g-scrub { transform-origin: 24px 0; animation: scrub 12s linear infinite; }
.g-wipe { animation: wipe 7s ease-in-out infinite alternate; }
.g-wipeline { animation: wipeline 7s ease-in-out infinite alternate; }
@keyframes cone { from { transform: rotate(-4deg); } to { transform: rotate(14deg); } }
@keyframes head2 { to { transform: translateX(150px); } }
@keyframes dolly { from { transform: translateX(14px) scale(1.02); } to { transform: translateX(-22px) scale(1.1); } }
@keyframes scrub { from { transform: scaleX(.1); } to { transform: scaleX(2.45); } }
@keyframes wipe { from { transform: translateX(250px); } to { transform: translateX(70px); } }
@keyframes wipeline { from { transform: translateX(250px); } to { transform: translateX(70px); } }
@keyframes pulse { 50% { opacity: .35; } }
@keyframes bar { to { transform: scaleY(.35); } }
@keyframes head { to { transform: translateX(260px); } }
@keyframes film { to { transform: translateX(-74px); } }
@keyframes dash { to { stroke-dashoffset: -22; } }
@keyframes walk { from { offset-distance: 0%; } to { offset-distance: 100%; } }

/* ---- 6 · night shift ---- */
.stop--night { background: #050507; }
.night__sky {
  position: absolute; inset: 0;
  background:
    radial-gradient(1px 1px at 12% 22%, #fff8, transparent), radial-gradient(1px 1px at 31% 64%, #fff6, transparent),
    radial-gradient(1.5px 1.5px at 57% 18%, #fff9, transparent), radial-gradient(1px 1px at 72% 48%, #fff5, transparent),
    radial-gradient(1px 1px at 88% 27%, #fff7, transparent), radial-gradient(1px 1px at 44% 82%, #fff4, transparent),
    radial-gradient(1.5px 1.5px at 93% 76%, #fff6, transparent), radial-gradient(1px 1px at 6% 71%, #fff5, transparent),
    radial-gradient(90% 60% at 50% 115%, rgba(255, 140, 0, .22), transparent 70%);
}
.night .wrap { position: relative; }
.night__l { font-weight: 300; font-size: clamp(1.3rem, 2.6vw, 2.2rem); line-height: 1.25; color: #8e8b94; max-width: 24em; margin-bottom: 40px; letter-spacing: -.015em; }
.night__l--1, .night__l--2 { font-weight: 800; font-size: clamp(2.3rem, 6.4vw, 5.6rem); line-height: .98; letter-spacing: -.04em; color: var(--ink); max-width: 12em; margin-bottom: 18px; }
.night__l--2 { color: var(--orange); margin-bottom: 64px; }
.night__coda { font-size: clamp(1.15rem, 2vw, 1.6rem); color: var(--ink); margin-bottom: 28px; }
.night__note { color: #8e8b94; max-width: 36em; padding-left: 20px; border-left: 1px dashed var(--teal); }

/* ---- 7 · what we make ---- */
.stop--make { background: var(--bg-2); }
.formats { font-size: 13px; margin-bottom: 8px; }
.work__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 48px; }
.card__media { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: #161616; border: 1px solid var(--hair); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.2, .7, .1, 1); }
.card__media:hover img { transform: scale(1.04); }
.card__blank { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(80% 80% at 30% 20%, #242424, #0e0e0e); }
.card__blank span { font-weight: 800; font-size: clamp(1.4rem, 2.4vw, 2rem); letter-spacing: -.03em; color: rgba(255, 255, 255, .16); }
.card__t { font-weight: 600; font-size: 1.2rem; margin: 18px 0 8px; letter-spacing: -.01em; }
/* ---- the groups of the what-we-make screen: one heading style, a hairline above each (Jeff 2026-09-23; the boxed hybrid was a straggler) ---- */
.made { margin-top: clamp(40px, 5vw, 64px); padding-top: clamp(28px, 3.5vw, 44px); border-top: 1px solid var(--hair); }
.made__h { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; font-family: var(--sans); font-weight: 600; font-size: clamp(1.05rem, 1.4vw, 1.25rem); color: var(--ink); }
.made .work__grid { margin-top: 28px; }
.made__pilots { margin-top: 30px; max-width: 44em; } /* the pilots line: a bold lead-in and its sign, inside the group */
.made__pilots b { font-weight: 600; color: var(--ink); }
.made__pilots .sign { margin: 0 6px 0 2px; vertical-align: .18em; }
.made--split { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(24px, 4vw, 64px); align-items: center; }
.made__p { font-size: clamp(1.05rem, 1.5vw, 1.3rem); color: var(--ink); max-width: 36em; }
/* the layer stack: four plates of the same frame; the back plate sits up and left, the composite in front; fans out on reveal, further on hover */
.stack { position: relative; aspect-ratio: 16 / 9; margin: 24% 0 0 15%; --fan: 1; } /* the margin is the room the back plates fan into */
.stack:hover { --fan: 1.2; }
.plate { position: absolute; inset: 0; z-index: var(--k); border-radius: 8px; overflow: hidden; border: 1px solid var(--hair); background: #161616; box-shadow: 0 18px 44px rgba(0, 0, 0, .55);
  transform: translate(0, 0); transition: transform 1.2s cubic-bezier(.2, .7, .1, 1); cursor: pointer; }
.plate img { width: 100%; height: 100%; object-fit: cover; display: block; }
.reveal.in .plate { transform: translate(calc((var(--n) - 1 - var(--k)) * -5% * var(--fan)), calc((var(--n) - 1 - var(--k)) * -13% * var(--fan))); } /* each step clears a label */
.plate__l { position: absolute; left: 12px; top: 8px; font-family: var(--mono); font-weight: 700; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink); background: rgba(10, 10, 10, .72); padding: 5px 9px 4px; border-radius: 4px; border: 1px solid var(--hair); cursor: pointer; transition: .25s; }
.plate__l[aria-pressed="true"] { color: #000; background: var(--orange); border-color: var(--orange); } /* the plate in front wears the orange label */
.plate:hover .plate__l { border-color: var(--orange); }
/* placeholder plates until the four stills arrive: each layer gets a look of its own */
.plate--blank.plate--0 { background: linear-gradient(160deg, #2a2620, #141311 60%); }
.plate--blank.plate--1 { background: #0b0b0b radial-gradient(55% 70% at 58% 55%, #efe9dc 0, #efe9dc 38%, #0b0b0b 40%); }
.plate--blank.plate--2 { background: linear-gradient(160deg, #3a2210, #180f08 60%); }
.plate--blank.plate--3 { background: linear-gradient(160deg, #2a2620, #1a120a 60%); }
.textlink { display: inline-block; margin-top: 16px; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; color: var(--teal); border-bottom: 1px solid currentColor; padding-bottom: 3px; }
.textlink:hover { color: var(--ink); }
.ba { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; border: 1px solid var(--hair); background: #161616; }
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba__b { clip-path: inset(0 calc(100% - var(--p)) 0 0); }
.ba__bar { position: absolute; top: 0; bottom: 0; left: var(--p); width: 2px; margin-left: -1px; background: #fff; pointer-events: none; }
.ba__bar::after { content: "\2194"; position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; background: var(--orange); color: #000; display: grid; place-items: center; font-size: 18px; font-weight: 600; }
.ba__l { position: absolute; bottom: 12px; font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; padding: 5px 9px 4px; border-radius: 4px; background: rgba(10, 10, 10, .7); backdrop-filter: blur(8px); pointer-events: none; }
.ba__l--b { left: 12px; } .ba__l--a { right: 12px; color: var(--orange); }
.ba input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }

/* ---- 8 · the stories: warm paper tone; the one picture is a page, not a machine ---- */
.stop--stories { background: linear-gradient(160deg, rgba(255, 140, 0, .07), transparent 55%); }
/* two paragraphs and the page being written (round 7d, 2026-09-24) */
.stories__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.stories__txt .lede + .lede { margin-top: 22px; }
.st__glimpse.stories__page { max-width: 340px; width: 100%; justify-self: end; aspect-ratio: 8.5 / 11; } /* a sheet of paper, portrait (Jeff 2026-09-24); doubled selector: .st__glimpse's 16:10 is declared later */
.stories__page:hover { transform: perspective(900px) rotateY(0) rotateX(0); }
.g-cur { animation: blink 1.1s steps(2, start) infinite; } /* the site's own blink keyframe */

/* ---- 9 · who, and hello ---- */
.stop--hello { padding-bottom: 60px; }
/* the founders, without names (Jeff 2026-09-22): one shared intro, then the bio facts as a two-column list */
.founders { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--hair); max-width: 1100px; }
.facts { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 56px; }
.facts li { padding-left: 22px; border-left: 1px solid rgba(255, 255, 255, .22); color: #c9c5bd; font-size: clamp(1rem, 1.3vw, 1.15rem); max-width: 30em; }
.more--tight { margin-top: 26px; }
.more--tight summary > span { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.more--tight .dashes li:last-child { border-bottom: 0; }
.jobs { margin-top: 48px; padding: 4px 0 4px 22px; border-left: 2px solid var(--orange); font-size: clamp(1.05rem, 1.5vw, 1.3rem); color: var(--ink); max-width: 38em; }
.hello { margin-top: 48px; padding: clamp(90px, 12vw, 170px) 0 40px; border-top: 1px solid var(--hair); text-align: center; scroll-margin-top: calc(var(--top-h) + 24px); } /* the hairline and the landing for the header's Say hello (Jeff 2026-09-24) */
.hello__h { font-weight: 800; font-size: clamp(3rem, 11vw, 10rem); letter-spacing: -.05em; line-height: .9; }
.hello__mail { display: inline-block; margin-top: 36px; font-family: var(--mono); font-size: clamp(1rem, 2vw, 1.4rem); color: var(--orange); border-bottom: 1px solid currentColor; padding-bottom: 4px; }
.hello__mail:hover { color: var(--ink); }

.foot { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 48px var(--gut) 56px; border-top: 1px solid var(--hair); text-align: center; }
.foot p { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; color: #b8b4ac; }
.foot .foot__c { color: var(--mute); font-size: 10px; }
.foot__tiles { display: flex; gap: 10px; font-size: 30px; margin-bottom: 10px; flex-wrap: wrap; justify-content: center; }

/* ==== PAGE 2 · THE LOT TOUR ==== */
.page-lot { --top-h: 142px; --tram-h: 64px; }
@media (min-width: 641px) { .page-big { --top-h: 104px; } }
.rail--lot { height: 68px; align-items: flex-end; padding-bottom: 8px; }
.rail--lot .rail__path { padding-bottom: 9px; }
.rail--lot .rail__track { align-items: flex-end; gap: 0; }
.rail__group { flex: 0 0 auto; display: flex; flex-direction: column; gap: 5px; padding: 0 4px 0 0; }
.rail__group + .rail__group { padding-left: 14px; margin-left: 10px; border-left: 1px solid var(--hair); }
.rail__phase { font-family: var(--mono); font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--mute); white-space: nowrap; }
.rail__tiles { display: flex; align-items: center; gap: 2px; }
.rail--lot .rail__track a { height: 36px; padding: 0 8px; opacity: .42; transition: opacity .3s, color .3s; text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 700; }
.rail--lot .rail__track a .tile { font-size: 24px; transition: transform .4s cubic-bezier(.2, .7, .1, 1), box-shadow .4s; }
.rail--lot .rail__track a b { display: none; font-weight: 700; }
.rail--lot .rail__track a.was { opacity: .62; }
.rail--lot .rail__track a:hover { opacity: .9; }
.rail--lot .rail__track a.on { opacity: 1; color: var(--a); }
.rail--lot .rail__track a.on b { display: inline; }
.rail--lot .rail__track a.on .tile { transform: scale(1.18); box-shadow: 0 6px 22px -4px color-mix(in srgb, var(--a) 80%, transparent); }
.rail--lot .rail__track a::after { bottom: -8px; }

.lot { min-height: 100svh; padding: calc(var(--top-h) + 22px) 0 calc(var(--tram-h) + 56px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; }
.lot > .wrap { flex: 1; display: flex; flex-direction: column; }
.mode { display: flex; align-items: center; gap: 12px 22px; flex-wrap: wrap; padding-bottom: 20px; border-bottom: 1px solid var(--hair); }
.mode[hidden] { display: none; }
.mode__sw { display: inline-flex; padding: 3px; border: 1px solid var(--hair); border-radius: 100px; background: rgba(255, 255, 255, .03); }
.mode__sw button { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; padding: 9px 15px 8px; border-radius: 100px; color: var(--mute); transition: .25s; white-space: nowrap; }
.mode__sw button:hover { color: var(--ink); }
.mode__sw button[aria-pressed="true"] { background: var(--orange); color: #000; font-weight: 700; }
.is-live .mode__sw button[aria-pressed="true"] { background: var(--teal); }
.mode__intro { font-size: .95rem; color: var(--mute); max-width: 34em; transition: color .4s; }
.is-live .mode__intro { color: var(--ink); }

.stage { flex: 1; display: flex; align-items: center; touch-action: pan-y; }
.st { display: grid; grid-template-columns: 300px 1fr; gap: 44px; align-items: center; padding: 44px 0; }
.st--solo { width: 100%; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 80px); padding: clamp(20px, 3vw, 44px) 0; animation: stIn .55s cubic-bezier(.2, .7, .1, 1) both; }
.st--from-right { --from: 36px; } .st--from-left { --from: -36px; }
@keyframes stIn { from { opacity: 0; transform: translateX(var(--from, 0)); } }
.st__glimpse {
  position: relative; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden;
  background: linear-gradient(145deg, #171717, #0d0d0d); border: 1px solid var(--hair);
  box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--a) 45%, transparent), inset 0 1px 0 rgba(255, 255, 255, .06);
  transform: perspective(900px) rotateY(7deg) rotateX(2deg); transition: transform .8s cubic-bezier(.2, .7, .1, 1);
}
.st:hover .st__glimpse { transform: perspective(900px) rotateY(0) rotateX(0); }
.st__glimpse svg { width: 100%; height: 100%; filter: blur(.6px); }
.st__glimpse::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255, 255, 255, .08), transparent 35%), radial-gradient(120% 90% at 50% 50%, transparent 55%, #0a0a0a 100%); }
.st__welcome { font-family: var(--mono); font-size: 12px; color: var(--mute); margin-bottom: 18px; }
.st__welcome::before { content: "> "; color: var(--orange); }
.st__top { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.st__num { font-family: var(--mono); font-size: 11px; color: var(--a); letter-spacing: .16em; text-transform: uppercase; }
.st__name { font-size: clamp(1.7rem, 4vw, 3.4rem); line-height: 1; margin-bottom: 16px; display: flex; align-items: center; gap: .38em; font-weight: 700; }
.st__name .tile { width: 1.25em; height: 1.25em; box-shadow: 0 10px 30px -8px color-mix(in srgb, var(--a) 60%, transparent); }
.st__signs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.st__tag { font-family: var(--mono); font-weight: 700; font-size: clamp(1rem, 1.4vw, 1.25rem); letter-spacing: -.01em; color: var(--a); margin-bottom: 14px; }
.st__mode { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--teal); margin-bottom: 10px; }
.st--flag { position: relative; }
.st--flag::before { content: ""; position: absolute; inset: 0 -28px; border: 1px solid rgba(255, 140, 0, .35); border-radius: 22px; background: linear-gradient(135deg, rgba(255, 140, 0, .07), transparent 60%); pointer-events: none; }
.st--flag > * { position: relative; }
.st__does { font-size: clamp(1rem, 1.35vw, 1.2rem); color: #d6d2ca; max-width: 34em; }
.st__facts { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--hair); max-width: 34em; }
.st__facts dt { font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--mute); margin-bottom: 6px; }
.st__facts dd { font-size: .95rem; color: var(--ink); font-weight: 400; }
.st__facts .st__old { color: #9a968f; font-weight: 300; }
.st__old span { font-family: var(--mono); font-size: 11px; color: #b8b4ac; white-space: nowrap; }

/* the tram bar: back, and the next stop */
.tram {
  position: fixed; inset: auto 0 0 0; z-index: 50; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  height: calc(var(--tram-h) + env(safe-area-inset-bottom)); padding: 0 var(--gut) env(safe-area-inset-bottom);
  background: rgba(10, 10, 10, .86); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); border-top: 1px solid var(--hair);
}
.tram a { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px; white-space: nowrap; border-radius: 100px; transition: .25s; }
.tram a i { font-style: normal; }
.tram__prev { color: var(--mute); padding: 12px 14px; border: 1px solid var(--hair); }
.tram__prev:hover { color: var(--ink); border-color: var(--ink); }
.tram__next { padding: 13px 20px; background: var(--a, var(--orange)); color: #000; font-weight: 700; min-width: 0; }
.tram__next .pn { letter-spacing: -.03em; }
.tram__next .pn__fam { color: rgba(0, 0, 0, .5); }
.tram__lead { font-weight: 400; letter-spacing: .04em; }
.tram__next:hover { background: var(--ink); }
.tram__next i { transition: transform .25s; } .tram__next:hover i { transform: translateX(4px); }
.page-lot .foot { padding-bottom: calc(56px + var(--tram-h) + env(safe-area-inset-bottom)); }

/* ---- lightbox ---- */
.box { position: fixed; inset: 0; z-index: 100; background: rgba(0, 0, 0, .92); display: grid; place-items: center; padding: 5vw; }
.box[hidden] { display: none; }
.box__in { width: min(100%, calc((100svh - 10vw - 150px) * 16 / 9)); }
.box__frame { width: 100%; aspect-ratio: 16 / 9; }
.box__cap { margin-top: 18px; }
.box__cap h3 { font-weight: 800; font-size: 1.4rem; letter-spacing: -.03em; margin-bottom: 10px; }
.box__cap .fine { margin-top: 12px; }
.box__frame iframe { width: 100%; height: 100%; border: 0; border-radius: 8px; }
.box__x { position: absolute; top: 18px; right: 24px; font-size: 40px; line-height: 1; color: #fff; }

/* ---- reveal ---- */
.reveal { opacity: 0; transform: translateY(32px); transition: opacity 1s cubic-bezier(.2, .7, .1, 1), transform 1s cubic-bezier(.2, .7, .1, 1); }
.reveal.in { opacity: 1; transform: none; }

/* ---- phone and tablet ---- */
@media (max-width: 980px) {
  .proof__grid, .founders, .made--split, .cols, .stories__grid { grid-template-columns: 1fr; }
  .st__glimpse.stories__page { justify-self: start; max-width: 300px; }
  .stack { margin: 22% 0 8px 15%; }
  .plate__l { font-size: 8px; left: 8px; top: 6px; padding: 4px 6px 3px; }
  .work__grid { grid-template-columns: 1fr; gap: 22px; }
  .map { grid-template-columns: repeat(4, 1fr); }
  .st--solo { grid-template-columns: 1fr; gap: 26px; }
  .st--solo .st__glimpse { max-width: 460px; transform: none; }
  .stage { align-items: flex-start; }
}
@media (max-width: 640px) {
  :root { --top-h: 118px; }
  .page-lot { --top-h: 128px; }
  /* the phone keeps the two-row header with the sideways rail */
  .top__bar { padding: 10px var(--gut) 4px; }
  .top__logo img { height: 50px; }
  .top__hello { display: none; }
  .rail { gap: 8px; }
  .rail__path { font-size: 11px; }
  .rail__track a { font-size: 10px; padding: 0 8px; }
  .stop { padding: calc(var(--top-h) + 28px) 0 22px; }
  .nextstop { bottom: 22px; }
  .h2 { margin-bottom: 22px; }
  .versus { grid-template-columns: 1fr; }
  .versus__arrow { height: 64px; }
  .versus__arrow svg { width: 36px; height: 43px; transform: rotate(90deg); }
  .btn.proof__btn { display: inline-flex; margin-top: 20px; }
  .figs { grid-template-columns: 1fr 1fr; gap: 18px 16px; margin-top: 32px; }

  .versus > div { padding: 16px 18px; font-size: .95rem; }
  .map { grid-template-columns: repeat(4, 1fr); gap: 8px; } /* two rows: development + pre-production, production + post */
  .map__tiles { gap: 6px; }
  .map__st { gap: 8px; padding: 10px 4px 9px; border-radius: 12px; }
  .map__phase { font-size: 8.5px; letter-spacing: .08em; padding-bottom: 6px; }
  .map__phase b { font-size: 7.5px; letter-spacing: .12em; }
  .map__st .tile { font-size: 40px; }
  .map__st .sign { font-size: 6.5px; letter-spacing: .08em; padding: 3px 4px 2px; border-width: 1px; }
  .door__fields { grid-template-columns: 1fr; }
  .work__grid { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 32px calc(var(--gut) * -1) 0; padding: 0 var(--gut); scrollbar-width: none; }
  .work__grid::-webkit-scrollbar { display: none; }
  .work__grid .card { flex: 0 0 78%; scroll-snap-align: center; }
  .founders { margin-top: 32px; padding-top: 24px; }
  .facts { grid-template-columns: 1fr; gap: 14px; }
  .jobs { margin-top: 36px; }
  .punch__shade { background:
    linear-gradient(0deg, #0a0a0a 0%, #0a0a0ad9 38%, #0a0a0a59 70%, #0a0a0a99 100%); }
  .stop--punch { justify-content: flex-end; }
  .st--flag::before { inset: -10px -12px; }
  .st--solo { gap: 20px; padding-top: 16px; }
  .st--solo .st__glimpse { aspect-ratio: auto; height: 19svh; min-height: 120px; max-width: none; }
  .st__welcome { margin-bottom: 12px; }
  .st__name { margin-bottom: 12px; }
  .st__signs { margin-bottom: 14px; }
  .lot { padding-top: calc(var(--top-h) + 14px); }
  .mode { padding-bottom: 14px; }
  .mode__sw { width: 100%; }
  .mode__sw button { flex: 1; padding: 10px 8px 9px; font-size: 10px; letter-spacing: .06em; }
  .mode__intro { font-size: .85rem; }
  .tram__prev span { display: none; }
  .tram__lead { display: none; }
  .tram__next--end .tram__lead { display: inline; }
  .tram a.tram__next--end { font-size: 10.5px; line-height: 1.35; padding: 8px 16px; white-space: normal; display: block; text-align: left; border-radius: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}