@font-face { font-family: 'Unbounded'; src: url('fonts/unbounded-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url('fonts/figtree-400.woff2') format('woff2'); font-weight: 400 700; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url('fonts/geist-mono-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }

:root {
  --ink: #0F0F11;
  --ink-2: #17171A;
  --ink-3: #232328;
  --bone: #F2EFE8;
  --bone-60: rgba(242, 239, 232, 0.6);
  --bone-38: rgba(242, 239, 232, 0.38);
  --acid: #D8F24B;
  --ink-60: rgba(15, 15, 17, 0.62);
  --ink-38: rgba(15, 15, 17, 0.38);
  --display: 'Unbounded', system-ui, sans-serif;
  --body: 'Figtree', system-ui, sans-serif;
  --mono: 'Geist Mono', ui-monospace, monospace;
  --ease-in: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-hover: cubic-bezier(0.44, 0, 0.56, 1);
  --dur-in: 800ms;
  --dur-hover: 300ms;
  --pad: clamp(18px, 4vw, 56px);
  --rhythm: clamp(72px, 9vw, 120px);
  --maxw: 1360px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--ink); color: var(--bone);
  font-family: var(--body); font-size: clamp(1rem, 1.05vw, 1.0625rem); line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--acid); outline-offset: 3px; }
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

h1, h2, h3 { font-family: var(--display); font-weight: 500; letter-spacing: -0.035em; line-height: 0.96; margin: 0; text-wrap: balance; }
.d1 { font-size: clamp(2.3rem, 4.8vw, 4.4rem); }
.d2 { font-size: clamp(2rem, 4.6vw, 3.9rem); }
.d3 { font-size: clamp(1.35rem, 2.1vw, 1.85rem); letter-spacing: -0.03em; }
p { margin: 0; }
.lede { font-size: clamp(1.05rem, 1.35vw, 1.2rem); color: var(--bone-60); line-height: 1.5; max-width: 46ch; }
.lab { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bone-38); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 999px;
  font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase;
  text-decoration: none; border: 1px solid transparent; white-space: nowrap;
  transition: transform var(--dur-hover) var(--ease-hover), background-color var(--dur-hover) var(--ease-hover), color var(--dur-hover) var(--ease-hover);
}
.btn--acid { background: var(--acid); color: var(--ink); }
.btn--ghost { border-color: rgba(242, 239, 232, 0.24); color: var(--bone); }
.btn--ink { background: var(--ink); color: var(--bone); }
.btn:hover { transform: translateY(-2px); }
.btn--ghost:hover { background: rgba(242, 239, 232, 0.08); }

/* ---------- header ---------- */
.hdr {
  position: fixed; inset: 0 0 auto; z-index: 60; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 14px var(--pad);
  opacity: 0; transition: opacity 600ms var(--ease-in);
}
.hdr::before { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(15, 15, 17, 0.62); backdrop-filter: blur(14px); }
.no-js .hdr, .hdr.on { opacity: 1; }
.mark { display: flex; align-items: center; text-decoration: none; }
.mark b { font-family: var(--display); font-size: 1.02rem; letter-spacing: -0.04em; }
.hdr nav { display: flex; align-items: center; gap: 26px; }
.hdr nav > a:not(.btn), .who__btn { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(216, 242, 75, 0.78); text-decoration: none; transition: color var(--dur-hover) var(--ease-hover); }
.hdr nav > a:not(.btn):hover, .who__btn:hover { color: var(--acid); }


/* ---------- the wall: hero + volume in one sticky stage ---------- */
.rig { position: relative; }
.stage {
  position: sticky; top: 0; height: 100svh; overflow: clip;
  display: grid; grid-template-rows: minmax(0, 1fr); padding: 72px var(--pad) clamp(16px, 2.4vh, 26px);
}
.wall {
  position: relative; width: 100%; height: 100%; max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: clamp(8px, 1vw, 14px);
}
.scr {
  position: relative; overflow: hidden; border-radius: 6px; background: var(--ink-2);
  height: 100%; text-decoration: none; color: inherit; display: block;
  transition: opacity 700ms var(--ease-in), transform 700ms var(--ease-in);
  transform-origin: 50% 50%;
}
.scr img { width: 100%; height: auto; transition: transform 900ms var(--ease-hover); }
/* only the cards on show for this volume, and only when you point at one */
.stage[data-v] .scr.is-on:hover img,
.stage[data-v] .scr.is-on:focus-visible img { transform: translate3d(0, var(--reach, 0px), 0); transition: transform 8.5s linear; }
.scr__tag {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 9px;
  padding: 10px 13px; background: rgba(10, 10, 12, 0.9);
  font-family: var(--mono); font-size: clamp(0.46rem, 0.72vw, 0.6rem);
  letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap;
  opacity: 0; transition: opacity var(--dur-hover) var(--ease-hover);
}
.scr__tag b { order: 1; font-weight: 400; color: var(--bone); flex: 0 1 auto; }
.scr__tag em { order: 3; font-style: normal; color: var(--bone-60); flex: 1 0 100%; }
.scr__tag i { order: 2; font-style: normal; color: var(--acid); flex: none; margin-left: auto; }
.scr:hover .scr__tag, .scr:focus-visible .scr__tag, .stage[data-v] .scr.is-on .scr__tag { opacity: 1; }
.scr::after {
  content: ''; position: absolute; inset: 0; z-index: 2; border-radius: 6px;
  box-shadow: inset 0 0 0 1px rgba(242, 239, 232, 0.1);
  background: var(--ink); opacity: 0; transition: opacity 700ms var(--ease-in);
}
/* recomposition: the two at this volume fly out over the other four */
.scr.is-off { opacity: 0.16; z-index: 1; }
.scr.is-off::after { opacity: 0.55; }
.scr.is-on { z-index: 11; box-shadow: 0 34px 80px rgba(0, 0, 0, 0.6); }
.scr.is-on::after { opacity: 0; }

/* hero copy sits over the bottom of the wall, then hands over to the volume copy */
.deck {
  position: absolute; z-index: 12; left: var(--pad); right: var(--pad);
  top: clamp(84px, 12.5vh, 128px);
  display: flex; flex-direction: column; align-items: center;
  pointer-events: none; opacity: 0; transform: translateY(-16px);
  transition: opacity 520ms var(--ease-in), transform 520ms var(--ease-in);
}
.deck::after {
  content: ''; position: absolute; z-index: -1; inset: -36px -8% -40px -8%;
  background: radial-gradient(ellipse 100% 100% at 50% 50%, rgba(10, 10, 12, 0.92) 0%, rgba(10, 10, 12, 0.82) 42%, rgba(10, 10, 12, 0.42) 74%, rgba(10, 10, 12, 0) 100%);
}
.seg { pointer-events: auto; }
.deck__intro { max-width: 56ch; margin: 0 auto 16px; text-align: center; color: var(--bone); font-size: clamp(1rem, 1.35vw, 1.22rem); line-height: 1.45; }
.deck__intro b { color: var(--bone); font-weight: 600; }
.deck__layer { transition: opacity 500ms var(--ease-in), transform 500ms var(--ease-in); }
.deck__layer[aria-hidden='true'] { opacity: 0; transform: translateY(10px); pointer-events: none; position: absolute; inset: auto 0 clamp(20px, 3vh, 34px); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 48px); align-items: end; max-width: var(--maxw); margin: 0 auto; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.vol__grid { display: grid; gap: clamp(8px, 1.4vh, 14px); justify-items: center; text-align: center; max-width: var(--maxw); margin: 0 auto; }
.vol__name { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.vol__name .lab { color: var(--acid); }
.vol__name h2 { color: var(--acid); }
.vol__body { max-width: 62ch; margin: 0 auto; color: rgba(242, 239, 232, 0.72); }
@media (max-width: 860px) {
  .hero__grid, .vol__grid { grid-template-columns: 1fr; gap: 14px; }
  .wall { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .stage { padding-top: 64px; }
  /* the tier is already set in huge type in the band below, so the pill drops it */
  .scr.is-off { opacity: 0.1; }
  .scr__tag { gap: 7px; padding: 8px 10px; font-size: 0.48rem; letter-spacing: 0.04em; }
  .scr__tag em { display: none; }
  /* name and volume on their own lines in every card, so a long name never makes one tag taller than its neighbours */
  .scr__tag { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 3px; }
  .scr__tag b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .scr__tag i { margin-left: 0; }
  .seg button { padding: 9px 13px; font-size: 0.68rem; }
}

/* the segmented volume control */
.seg { display: inline-flex; align-self: center; padding: 4px; border-radius: 999px; background: rgba(242, 239, 232, 0.07); box-shadow: inset 0 0 0 1px rgba(242, 239, 232, 0.16); gap: 2px; margin-bottom: 16px; }
.seg button {
  appearance: none; border: 0; background: transparent; color: rgba(242, 239, 232, 0.8); cursor: pointer;
  font-family: var(--mono); font-size: 0.78rem; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 11px 19px; border-radius: 999px;
  transition: background-color var(--dur-hover) var(--ease-hover), color var(--dur-hover) var(--ease-hover);
}
.seg button[aria-pressed='true'] { background: var(--acid); color: var(--ink); }
.seg button:hover { color: var(--bone); }
.seg button[aria-pressed='true']:hover { color: var(--ink); }

/* scroll track that drives the stage */
.rig__track > div { height: 60svh; }
/* On a phone a fling crosses two tier boundaries at once, so each step of the
   track is a snap point a fling cannot pass. One swipe, one tier. */
@media (max-width: 860px) {
  /* Each step snaps at its END, which is where its tier is fully on screen (snapping at the start
     put every point a screen late, two of them past the hero). The last step is a short hold with
     no snap point, so once Statement lands the next swipe moves the page on. */
  .rig__track > div { height: 46svh; scroll-snap-align: end; }
  .rig__track > div:last-child { height: 12svh; scroll-snap-align: none; }
  /* only while a snapping track is on screen (main.js sets the class); page-wide it tugged the rest of the page */
  html.snapping { scroll-snap-type: y proximity; }
}
@media (max-width: 860px) and (prefers-reduced-motion: reduce) { html.snapping { scroll-snap-type: none; } }
.no-js .rig__track { display: none; }

/* ---------- scrubbed statement ---------- */
.say { padding: var(--rhythm) 0; text-align: center; }
.say h2 { max-width: 22ch; margin: 0 auto; perspective: 900px; }
.say .lede { margin-left: auto; margin-right: auto; }
.say .end__cta { justify-content: center; }

/* ---------- pricing ---------- */
.price { background: var(--bone); color: var(--ink); padding: var(--rhythm) 0; }
.price .lede { color: var(--ink-60); }
.price__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 48px); align-items: end; margin-bottom: clamp(30px, 4vw, 54px); }
.price .lab { color: var(--ink-38); }
.tiers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); }
.tier { background: var(--ink); color: var(--bone); border: 0; border-radius: 12px; padding: clamp(22px, 2.4vw, 32px); display: flex; flex-direction: column; gap: 14px; }
.tier__top { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.tier__fig { font-family: var(--display); font-size: clamp(1.6rem, 2.6vw, 2.2rem); letter-spacing: -0.04em; }
.tier p { color: rgba(242, 239, 232, 0.74); }
.tier ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; font-size: 0.96rem; color: #FFFFFF; }
.tier li { padding-left: 26px; position: relative; }
.tier li::before {
  content: ''; position: absolute; left: 4px; top: 0.3em; width: 6px; height: 11px;
  border: solid var(--acid); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.tier li.lead { padding-left: 0; color: var(--bone); }
.tier li.lead::before { display: none; }
.tier .btn { align-self: flex-start; margin-top: auto; }
.tier .btn--ghost { border-color: rgba(242, 239, 232, 0.3); }

/* premium: the loud one, and the only place concepts are mentioned */
.prem { grid-column: 1 / -1; background: var(--ink); color: var(--bone); border: 0; border-radius: 12px; padding: clamp(24px, 3vw, 44px); display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(22px, 3vw, 48px); align-items: center; }
.prem p { color: rgba(242, 239, 232, 0.8); }
.prem ul { color: #FFFFFF; }
.prem__left h3 { color: var(--acid); }
.prem__left { display: flex; flex-direction: column; gap: 14px; }
.prem__flag { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; background: var(--acid); color: var(--ink); padding: 6px 11px; border-radius: 999px; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; }
.prem .tier__fig { color: var(--bone); }
.prem .btn { margin-top: 4px; }

/* the three-concept moment */
.three { display: flex; flex-direction: column; gap: 6px; justify-content: center; }
.three__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: center; padding: 48px 0; }
.cc {
  position: relative; border-radius: 8px; overflow: hidden; background: var(--ink-2);
  box-shadow: inset 0 0 0 1px rgba(242, 239, 232, 0.12); aspect-ratio: 5 / 7; opacity: 0.72;
  transition: transform 800ms var(--ease-in), opacity 800ms var(--ease-in);
}
.cc__n { position: absolute; inset: auto auto 8px 8px; z-index: 3; font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.1em; color: var(--bone-60); background: rgba(15,15,17,0.72); padding: 4px 7px; border-radius: 999px; }
.cc--b .cc__n { color: var(--ink); background: rgba(242,239,232,0.82); }
.cc__sk { position: absolute; inset: 0; }
.cc__sk span { position: absolute; display: block; }
/* concept 01: a dark, loud direction */
.cc--a { background: #1B1B20; }
.cc--a .cc__sk span:nth-child(1) { left: 9%; top: 11%; width: 64%; height: 9px; background: var(--bone); }
.cc--a .cc__sk span:nth-child(2) { left: 9%; top: 20%; width: 40%; height: 9px; background: var(--bone); }
.cc--a .cc__sk span:nth-child(3) { left: 0; top: 44%; width: 74%; height: 34%; background: var(--acid); }
.cc--a .cc__sk span:nth-child(4) { left: 9%; bottom: 11%; width: 46%; height: 5px; background: rgba(242,239,232,0.45); }
/* concept 03: a quiet, light direction */
.cc--b { background: var(--bone); }
.cc--b .cc__sk span:nth-child(1) { left: 0; top: 0; width: 100%; height: 46%; background: #2B2B31; }
.cc--b .cc__sk span:nth-child(2) { left: 10%; top: 56%; width: 72%; height: 8px; background: rgba(15,15,17,0.82); }
.cc--b .cc__sk span:nth-child(3) { left: 10%; top: 68%; width: 50%; height: 8px; background: rgba(15,15,17,0.82); }
.cc--b .cc__sk span:nth-child(4) { left: 10%; bottom: 12%; width: 30%; height: 14px; border-radius: 999px; background: var(--acid); }
.cc img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.cc--win { opacity: 1; }
.cc--win { box-shadow: inset 0 0 0 1px var(--acid); }
.cc--win .cc__n { color: var(--acid); }

.three.is-in .cc { animation: ccTurn 7s var(--ease-in) 1 both; }
.three.is-in .cc:nth-child(2) { animation-name: ccWin; animation-delay: 2.2s; }
.three.is-in .cc:nth-child(3) { animation-delay: 4.4s; }
@keyframes ccTurn {
  0%   { transform: scale(1); opacity: 0.72; z-index: 1; }
  16%  { transform: scale(1.32); opacity: 1; z-index: 3; }
  26%  { transform: scale(1.32); opacity: 1; z-index: 3; }
  39%  { transform: scale(1); opacity: 0.72; z-index: 1; }
  100% { transform: scale(1); opacity: 0.72; z-index: 1; }
}
/* the chosen one stays a step forward when the pass is over */
@keyframes ccWin {
  0%   { transform: scale(1); opacity: 0.72; z-index: 1; }
  16%  { transform: scale(1.32); opacity: 1; z-index: 3; }
  26%  { transform: scale(1.32); opacity: 1; z-index: 3; }
  39%  { transform: scale(1.06); opacity: 1; z-index: 2; }
  100% { transform: scale(1.06); opacity: 1; z-index: 2; }
}
.three__cap { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bone-38); }
@media (max-width: 900px) {
  .tiers { grid-template-columns: 1fr; }
  .prem { grid-template-columns: 1fr; }
  .price__head { grid-template-columns: 1fr; gap: 14px; }
}

/* ---------- process ---------- */
.proc { padding: var(--rhythm) 0; }
.proc__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(26px, 3.5vw, 46px); }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 1.6vw, 22px); border-top: 1px solid rgba(242, 239, 232, 0.16); }
.step { padding-top: 18px; border-top: 2px solid transparent; display: grid; gap: 8px; align-content: start; transition: border-color 600ms var(--ease-in); }
.step.is-in { border-top-color: var(--acid); }
.step p { color: var(--bone-60); font-size: 0.96rem; }
@media (max-width: 820px) { .steps { grid-template-columns: repeat(2, 1fr); } }

/* ---------- contact ---------- */
.end { background: var(--acid); color: var(--ink); padding: var(--rhythm) 0; }
.end__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 48px); align-items: start; }
.end p { color: rgba(15, 15, 17, 0.7); }
.end .lab { color: rgba(15, 15, 17, 0.5); }
.end__cta { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 860px) { .end__grid { grid-template-columns: 1fr; gap: 16px; } }

footer { padding: 26px 0 34px; }
.foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.foot a { color: var(--bone-60); text-decoration: none; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; }
.foot a:hover { color: var(--bone); }

/* ---------- entrances ---------- */
.up { opacity: 0; transform: translateY(40px); transition: opacity var(--dur-in) var(--ease-in), transform var(--dur-in) var(--ease-in); }
.up.is-in { opacity: 1; transform: none; }
.no-js .up { opacity: 1; transform: none; }
.hero__grid .up:nth-child(2) { transition-delay: 200ms; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition-duration: 1ms !important; }
  .up, .h1__sub { opacity: 1; transform: none; }
  .say h2 span { opacity: 1; }
  .scr img { transform: none !important; }
}

/* ---------- the opener: a real site, full bleed, docking into the wall ---------- */
.opener {
  position: fixed; inset: 0; z-index: 50; overflow: hidden; transform-origin: 0 0; background: var(--ink);
  transition: transform 1250ms var(--ease-in), clip-path 1250ms var(--ease-in), opacity 340ms linear;
}
.opener img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.opener.gone { opacity: 0; pointer-events: none; }
.no-js .opener { display: none; }

.stage.pre .lead { opacity: 0; }
.stage.pre .scr:not(.lead) { opacity: 0; transform: translateY(26px) scale(0.955); }
.stage.pre .deck { opacity: 0; }
.deck { transition: opacity 520ms var(--ease-in); }   /* matches .hero-over, so they cross */
.wall .scr:nth-child(2) { transition-delay: 60ms; }
.wall .scr:nth-child(3) { transition-delay: 140ms; }
.wall .scr:nth-child(4) { transition-delay: 220ms; }
.wall .scr:nth-child(5) { transition-delay: 300ms; }
.wall .scr:nth-child(6) { transition-delay: 380ms; }
.stage[data-v] .deck { opacity: 1; transform: none; }
.no-js .deck { position: static; opacity: 1; transform: none; }
.stage[data-v] .scr { transition-delay: 0ms; }
.scr.is-on, .scr.is-off { transition-delay: 0ms; }
/* while a volume is up, the dimmed thumbnails behind are scenery: clicking the strip above or
   below the deck used to open whichever demo happened to be under the pointer */
.stage:not([data-v]) .scr { pointer-events: none; }
.stage[data-v] .scr:not(.is-on) { pointer-events: none; }
.no-js .deck__layer[aria-hidden='true'] { position: static; opacity: 1; transform: none; margin-top: 18px; }
@media (prefers-reduced-motion: reduce) { .opener { display: none; } }

/* ---------- the headline rides over the wall, then gets out of the way ---------- */
.hero-over {
  position: absolute; z-index: 11; left: var(--pad); right: var(--pad); top: 50%;
  transform: translateY(-50%); text-align: center; pointer-events: none;
  transition: opacity 520ms var(--ease-in), transform 520ms var(--ease-in);
}
.hero-over h1 { color: var(--acid); }
.h1__sub {
  display: block; margin: clamp(14px, 1.9vh, 24px) auto 0; max-width: 38ch;
  font-family: var(--body); font-weight: 500; font-size: clamp(1rem, 1.5vw, 1.28rem);
  line-height: 1.38; letter-spacing: 0; color: var(--bone);
  opacity: 0; transform: translateY(20px);
  transition: opacity var(--dur-in) var(--ease-in), transform var(--dur-in) var(--ease-in);
}
#h1.is-in .h1__sub { opacity: 1; transform: none; transition-delay: 200ms; }
.no-js .h1__sub { opacity: 1; transform: none; }
.hero-over .lede { margin: 18px auto 0; max-width: 46ch; color: rgba(242, 239, 232, 0.72); }
.hero-over .lab { margin-bottom: 12px; color: rgba(242, 239, 232, 0.66); }
.stage::after {
  content: ''; position: absolute; inset: 0; z-index: 10; pointer-events: none;
  background: radial-gradient(ellipse 120% 78% at 50% 50%, rgba(10, 10, 12, 0.86) 0%, rgba(10, 10, 12, 0.78) 38%, rgba(10, 10, 12, 0.5) 70%, rgba(10, 10, 12, 0.3) 100%);
  transition: opacity 520ms var(--ease-in);
}
.stage.moved::after, .stage.pre::after { opacity: 0; }
.stage.moved .hero-over { opacity: 0; transform: translateY(calc(-50% - 26px)); }
/* .hero-over is pointer-events: none, but .hero__act turns it back on for the two buttons.
   Once the hero has faded they are invisible and still the top hit target over the wall, so a
   click on a demo thumbnail landed on "See the prices" and jumped to #pricing instead. */
.stage.moved .hero__act { pointer-events: none; }
.no-js .stage::after, .no-js .hero-over { position: static; background: none; opacity: 1; transform: none; }

/* ==========================================================================
   Site pages (the landing page at /quote keeps everything above)
   ========================================================================== */

/* the homepage hero uses the wall without the pinned volume story */
.rig--hero .stage { position: relative; }
.rig--hero .rig__track { display: none; }

/* page heads */
.phead { padding: clamp(104px, 13vh, 150px) 0 clamp(38px, 5vw, 64px); }
.phead__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 56px); align-items: end; }
.phead__grid:not(:has(.art)) { align-items: start; }
.phead h1 { max-width: 16ch; }
@media (max-width: 860px) { .phead__grid { grid-template-columns: 1fr; gap: 16px; } }

/* a section on the bone ground */
.bone { background: var(--bone); color: var(--ink); padding: var(--rhythm) 0; }
.bone .lede, .bone p { color: var(--ink-60); }
.bone .lab { color: var(--ink-38); }
.bone h1, .bone h2, .bone h3 { color: var(--ink); }

/* three proofs */
.proofs { display: grid; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); gap: clamp(12px, 1.6vw, 22px); }
.proof { background: var(--ink-2); border-radius: 12px; padding: clamp(20px, 2.2vw, 30px); display: grid; gap: 10px; align-content: start; }
.proof h3 { font-size: clamp(1.15rem, 1.7vw, 1.45rem); }
.proof p { color: var(--bone-60); font-size: 0.96rem; }
.proof__n { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em; color: var(--acid); }
@media (max-width: 620px) { .proofs { grid-template-columns: 1fr; } }

/* the work grid */
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 26px); }
.card { display: block; text-decoration: none; color: inherit; }
.card__frame { display: block; position: relative; overflow: hidden; border-radius: 10px; background: var(--ink-2); aspect-ratio: 16 / 11; box-shadow: inset 0 0 0 1px rgba(242, 239, 232, 0.1); }
.card__frame img { width: 100%; height: auto; will-change: transform; transition: transform 900ms var(--ease-hover); }
.card:hover .card__frame img, .card:focus-visible .card__frame img { transform: translate3d(0, var(--reach, 0px), 0); transition: transform 11s linear; }
.card__meta { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding-top: 14px; }
.card__name { display: block; font-family: var(--display); font-weight: 500; font-size: clamp(1.1rem, 1.6vw, 1.4rem); letter-spacing: -0.03em; }
.card__kind { display: block; color: var(--bone-60); font-size: 0.94rem; }
.tag { display: inline-block; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; background: rgba(242, 239, 232, 0.1); color: var(--bone-60); }
.tag--3 { background: var(--acid); color: var(--ink); }
.tag--2 { background: rgba(216, 242, 75, 0.2); color: var(--acid); }
@media (max-width: 760px) { .grid { grid-template-columns: 1fr; } }

/* the volume explainer, as static columns */
.vols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 22px); }
.vol { border-radius: 12px; padding: clamp(20px, 2.2vw, 30px); background: var(--ink-2); display: grid; gap: 12px; align-content: start; }
.vol h3 { color: var(--acid); font-size: clamp(1.3rem, 2vw, 1.75rem); }
.vol p { color: var(--bone-60); font-size: 0.96rem; }
@media (max-width: 820px) { .vols { grid-template-columns: 1fr; } }

/* numbered rows, used by the process page */
.rows { border-top: 1px solid rgba(242, 239, 232, 0.16); }
.row { display: grid; grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(14px, 2.4vw, 40px); padding: clamp(20px, 2.4vw, 32px) 0; border-bottom: 1px solid rgba(242, 239, 232, 0.16); align-items: start; }
.row p { color: var(--bone-60); }
.row .lab { padding-top: 0.35em; }
@media (max-width: 820px) { .row { grid-template-columns: 1fr; gap: 8px; } .row .lab { padding-top: 0; } }

/* question and answer */
.qa { border-top: 1px solid rgba(242, 239, 232, 0.16); }
.qa details { border-bottom: 1px solid rgba(242, 239, 232, 0.16); }
.qa summary { cursor: pointer; list-style: none; padding: clamp(16px, 2vw, 24px) 0; display: flex; align-items: center; justify-content: space-between; gap: 20px; font-family: var(--display); font-weight: 500; font-size: clamp(1.02rem, 1.5vw, 1.25rem); letter-spacing: -0.025em; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: ''; width: 11px; height: 11px; flex: none; border: solid var(--acid); border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-3px, -3px); transition: transform var(--dur-hover) var(--ease-hover); }
.qa details[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.qa p { color: var(--bone-60); padding-bottom: clamp(16px, 2vw, 24px); max-width: 74ch; }

/* the form */
.form { display: grid; gap: 16px; }
.form .btn { justify-self: start; }
.field { display: grid; gap: 7px; }
.field > span { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bone-60); }
.field input, .field textarea, .field select {
  font: inherit; color: var(--bone); background: var(--ink-2); border: 1px solid rgba(242, 239, 232, 0.18);
  border-radius: 10px; padding: 13px 15px; width: 100%;
  transition: border-color var(--dur-hover) var(--ease-hover);
}
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--acid); }
.field textarea { min-height: 150px; resize: vertical; }
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 640px) { .pair { grid-template-columns: 1fr; } }
.pot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.note { font-size: 0.9rem; color: var(--bone-38); }
.msg { border-radius: 10px; padding: 14px 16px; font-size: 0.95rem; }
.msg--ok { background: rgba(216, 242, 75, 0.14); color: var(--acid); }
.msg--bad { background: rgba(255, 120, 100, 0.14); color: #FFB3A7; }

/* two-column body */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(22px, 3.4vw, 60px); align-items: start; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }
.stack { display: grid; gap: clamp(14px, 2vw, 22px); }
.rule { height: 1px; background: rgba(242, 239, 232, 0.16); }
.sec { padding: var(--rhythm) 0; }
.sec__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(24px, 3.2vw, 44px); }
.sec__head .lab + h2 { margin-top: 12px; }
.sec__head:has(> .lede) { align-items: flex-start; }
.prose p + p { margin-top: 1em; }
.prose h2 { margin: 1.6em 0 0.5em; font-size: clamp(1.2rem, 1.8vw, 1.5rem); }
.prose { color: var(--bone-60); max-width: 76ch; }

.hl { color: var(--acid); }

/* ---------- titles carry the acid, except where the ground is light ---------- */
h1, h2 { color: var(--acid); }
.bone h1, .bone h2, .price__head h2, .end h2 { color: var(--ink); }
.tier h2, .tier h3 { color: var(--bone); }
.prem__left h2, .prem__left h3 { color: var(--acid); }
.qa summary { color: var(--bone); }

/* the proofs sit on bone so the page is not one long black run */
.sec--bone { background: var(--bone); color: var(--ink); }
.sec--bone .lab { color: var(--ink-38); }
.sec--bone .lede { color: var(--ink-60); }
.sec--bone h2 { color: var(--ink); }
.sec--bone .proof { background: var(--ink); }
.sec--bone .proof h3 { color: var(--acid); }
.sec--bone .proof p { color: var(--bone-60); }


/* ---------- the curtain: a full block of colour that splits and retracts ---------- */
.curtain { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
.curtain__half {
  position: absolute; left: 0; right: 0; height: 50%; background: var(--ink); overflow: hidden;
  will-change: transform; transition: transform 1000ms var(--ease-in);
}
.curtain__half--t { top: 0; }
.curtain__half--b { bottom: 0; }
.curtain__seam {
  position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: var(--acid);
  transform: translateY(-1px) scaleX(0); transform-origin: 50% 50%;
  transition: transform 620ms var(--ease-in), opacity 300ms linear;
}
.curtain.armed .curtain__seam { transform: translateY(-1px) scaleX(1); }
.curtain.open .curtain__half--t { transform: translateY(-100%); }
.curtain.open .curtain__half--b { transform: translateY(100%); }
.curtain.open .curtain__seam { opacity: 0; }

/* the wordmark is cut by the same line, so each half leaves with its own half of it */
.curtain__logo {
  position: absolute; left: 50%; white-space: nowrap;
  font-family: var(--display); font-weight: 500; letter-spacing: -0.045em;
  font-size: clamp(2.6rem, 9.5vw, 7.5rem); color: var(--bone); line-height: 1;
  opacity: 0; transition: opacity 520ms var(--ease-in);
}
.curtain.armed .curtain__logo { opacity: 1; }
.curtain__half--t .curtain__logo { bottom: 0; transform: translate(-50%, 50%); }
.curtain__half--b .curtain__logo { top: 0; transform: translate(-50%, -50%); }
@media (prefers-reduced-motion: reduce) { .curtain { display: none; } }

/* ---------- the statement: every word rides up out of its own mask ---------- */
.say .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.06em; }
.say .wi {
  display: inline-block; transform-origin: 50% 100%;
  transform: translateY(104%) rotateX(-62deg); opacity: 0;
  transition: transform 980ms var(--ease-in), opacity 520ms linear;
}
.say h2.lit .wi { transform: none; opacity: 1; }
.no-js .say .wi { transform: none; opacity: 1; }

/* ---------- the proofs unroll, then their contents arrive ---------- */
.proof { transition: clip-path 780ms var(--ease-in); }
.proof.armed { clip-path: inset(0 0 100% 0); }
.proof > * { transition: opacity 520ms var(--ease-in), transform 520ms var(--ease-in); }
.proof.armed > * { opacity: 0; transform: translateY(16px); }
.proof.armed.is-in { clip-path: inset(0 0 0 0); }
.proof.armed.is-in > * { opacity: 1; transform: none; }
.proof.armed.is-in > *:nth-child(2) { transition-delay: 170ms; }
.proof.armed.is-in > *:nth-child(3) { transition-delay: 290ms; }
@media (prefers-reduced-motion: reduce) { .proof { clip-path: none; } .proof > * { opacity: 1; transform: none; } }

.tier__note { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--acid); margin-top: -6px; }
.addons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); margin-top: clamp(12px, 1.4vw, 20px); }
.addon { background: var(--ink); color: var(--bone); border-radius: 12px; padding: clamp(18px, 2vw, 26px); display: grid; gap: 7px; align-content: start; }
.price .addon .lab, .addon .lab { color: var(--acid); }
.price .addon .addon__fig, .addon__fig { font-family: var(--display); font-weight: 500; font-size: clamp(1.25rem, 1.9vw, 1.7rem); letter-spacing: -0.04em; color: var(--bone); line-height: 1; }
.price .addon p, .addon p { color: rgba(242, 239, 232, 0.84); font-size: 0.93rem; }
@media (max-width: 720px) { .addons { grid-template-columns: 1fr; } }

/* ---------- vertical pages ---------- */
.needs { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.needs li { position: relative; padding-left: 28px; color: var(--bone); font-size: 1rem; }
.needs li::before {
  content: ''; position: absolute; left: 5px; top: 0.34em; width: 6px; height: 11px;
  border: solid var(--acid); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.card__note { display: block; margin-top: 8px; color: var(--bone-60); font-size: 0.94rem; max-width: 60ch; }
.verts { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: clamp(18px, 2vw, 28px); }
.verts a { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bone-60); text-decoration: none; }
.verts a:hover { color: var(--acid); }

/* ---------- every tier card has the same anatomy ---------- */
.tier__flag {
  align-self: flex-start; display: inline-flex; align-items: center;
  padding: 7px 13px; border-radius: 999px; background: var(--acid); color: var(--ink);
  font-family: var(--mono); font-weight: 400; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
}
.tier .tier__flag, .tier__flag--on, .prem__left .tier__flag--on { background: var(--acid); color: var(--ink); }
.tier .tier__fig { margin: 4px 0 0; font-family: var(--display); font-weight: 500; letter-spacing: -0.045em; line-height: 1; color: var(--bone); }
.prem .tier__pitch, .tier__pitch { margin-top: 10px; font-family: var(--display); font-weight: 500; font-size: clamp(1.7rem, 3.4vw, 2.9rem); line-height: 0.98; letter-spacing: -0.04em; color: var(--acid); }

/* ---------- card and step headings carry the acid too ---------- */
h3 { color: var(--acid); }
.bone h3, .sec--bone h3, .end h3, .price__head h3 { color: var(--ink); }
.sec--bone .proof h3, .sec--bone .vol h3, .sec--bone .stp h3 { color: var(--acid); }
.tier .tier__flag, .tier__flag { color: var(--ink); }

/* ---------- the sites at each volume, as a readable list ---------- */
.vol__lab { margin-top: 6px; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bone-38); }
.vol__list { list-style: none; margin: 4px 0 0; padding: 0; }
.vol__list li + li { border-top: 1px solid rgba(242, 239, 232, 0.12); }
.vol__list a {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 0; color: var(--bone); text-decoration: none; font-size: 0.97rem;
  transition: color var(--dur-hover) var(--ease-hover);
}
.vol__list a::after {
  content: ''; flex: none; width: 7px; height: 7px; opacity: 0.45;
  border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(-45deg);
  transition: transform var(--dur-hover) var(--ease-hover), opacity var(--dur-hover) var(--ease-hover);
}
.vol__list a:hover, .vol__list a:focus-visible { color: var(--acid); }
.vol__list a:hover::after { opacity: 1; transform: rotate(-45deg) translate(2px, 2px); }

/* ---------- the ten days, as a line that draws itself ---------- */
.tl { position: relative; }
.tl__row {
  display: grid; grid-template-columns: 82px 22px minmax(0, 0.8fr) minmax(0, 1.4fr);
  column-gap: clamp(12px, 1.8vw, 26px); align-items: start;
  padding: clamp(16px, 2vw, 26px) 0;
}
.tl__day { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bone-38); padding-top: 0.55em; transition: color 500ms var(--ease-in); }
.tl__row.is-in .tl__day { color: var(--acid); }
.tl__mark { position: relative; align-self: stretch; }
.tl__mark::before {
  content: ''; position: absolute; left: 9px; top: 0; bottom: calc(-1 * clamp(32px, 4vw, 52px)); width: 2px;
  background: rgba(242, 239, 232, 0.14); transition: background-color 600ms var(--ease-in);
}
.tl__row.is-in .tl__mark::before { background: var(--acid); }
.tl__row:last-child .tl__mark::before { bottom: auto; height: 22px; }
.tl__mark::after {
  content: ''; position: absolute; left: 3px; top: 8px; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid rgba(242, 239, 232, 0.24); background: var(--ink);
  transition: border-color 500ms var(--ease-in), background-color 500ms var(--ease-in), transform 500ms var(--ease-in);
}
.tl__row.is-in .tl__mark::after { border-color: var(--acid); background: var(--acid); transform: scale(1.15); }
.tl__title { font-size: clamp(1.4rem, 2.4vw, 2rem); letter-spacing: -0.035em; }
.tl__body { color: var(--bone-60); }
.tl__row .tl__title, .tl__row .tl__body { opacity: 0; transform: translateY(14px); transition: opacity 620ms var(--ease-in), transform 620ms var(--ease-in); }
.tl__row.is-in .tl__title, .tl__row.is-in .tl__body { opacity: 1; transform: none; }
.tl__row.is-in .tl__body { transition-delay: 110ms; }
.no-js .tl__row .tl__title, .no-js .tl__row .tl__body { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .tl__row .tl__title, .tl__row .tl__body { opacity: 1; transform: none; } }
@media (max-width: 860px) {
  .tl__row { grid-template-columns: 62px 20px minmax(0, 1fr); row-gap: 6px; }
  .tl__body { grid-column: 3; }
}

/* ---------- the stages, one screen at a time, driven by the scroll ---------- */
.pin { position: relative; }
.pin__stage { position: sticky; top: 0; min-height: 100svh; display: flex; align-items: center; padding: 84px 0 clamp(30px, 5vh, 60px); }
.pin__grid { display: grid; grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr); gap: clamp(26px, 4vw, 70px); align-items: center; }
.pin__rail { list-style: none; margin: clamp(22px, 3vw, 38px) 0 0; padding: 0; display: grid; gap: 2px; }
.pin__rail li {
  display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: baseline; gap: 10px;
  padding: 11px 0; border-top: 1px solid rgba(242, 239, 232, 0.12);
  font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--bone-38); transition: color 420ms var(--ease-in);
}
.pin__rail li b { font-weight: 400; }
.pin__rail li.is-on { color: var(--acid); }
.pin__panels { position: relative; min-height: clamp(300px, 34vh, 400px); }
.st { position: absolute; inset: 0; opacity: 0; transform: translateY(22px); pointer-events: none;
  transition: opacity 560ms var(--ease-in), transform 560ms var(--ease-in); }
.st.is-on { opacity: 1; transform: none; pointer-events: auto; }
.st__n { font-family: var(--display); font-weight: 500; font-size: clamp(2.6rem, 5.5vw, 4.6rem); line-height: 0.85; letter-spacing: -0.05em; color: var(--acid); }
.st__title { font-size: clamp(2rem, 4.4vw, 3.6rem); letter-spacing: -0.04em; margin-top: 6px; }
.st__body { color: var(--bone-60); font-size: clamp(1rem, 1.3vw, 1.18rem); max-width: 48ch; margin-top: 14px; }
.st.is-on .st__body { transition-delay: 100ms; }
.pin__track > div { height: 46svh; }
.no-js .pin__stage { position: relative; min-height: 0; }
.no-js .pin__panels { min-height: 0; }
.no-js .st { position: static; opacity: 1; transform: none; margin-bottom: 30px; }
.no-js .pin__track { display: none; }
@media (max-width: 860px) {
  .pin__grid { grid-template-columns: 1fr; gap: 20px; }
  .pin__rail { display: none; }
  .pin__panels { min-height: 300px; }
  .pin__track > div { height: 62svh; scroll-snap-align: start; scroll-snap-stop: always; }
}
@media (prefers-reduced-motion: reduce) { .st { transition-duration: 1ms; } }

/* ---------- a bone band of the three facts that matter ---------- */
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .grid--3 { grid-template-columns: 1fr; } }

/* ---------- the stage shows the site being made ---------- */
.st { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(18px, 2.6vw, 40px); align-items: center; display: grid; }
.st__vis { position: relative; }
.fr { position: relative; border-radius: 10px; overflow: hidden; background: var(--ink-2); box-shadow: inset 0 0 0 1px rgba(242, 239, 232, 0.14); aspect-ratio: 16 / 11; }
.fr__bar { position: absolute; inset: 0 0 auto; height: 26px; background: rgba(242, 239, 232, 0.08); display: flex; align-items: center; padding: 0 10px; z-index: 2; }
.fr__bar::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: rgba(242, 239, 232, 0.28); box-shadow: 12px 0 0 rgba(242, 239, 232, 0.28), 24px 0 0 rgba(242, 239, 232, 0.28); }
.fr__bar b { margin-left: 44px; font-family: var(--mono); font-weight: 400; font-size: 0.62rem; letter-spacing: 0.06em; color: var(--acid); }
.fr__in { position: absolute; inset: 26px 0 0; padding: clamp(14px, 2vw, 22px); display: grid; gap: 10px; align-content: start; }
.sk { display: block; height: 9px; border-radius: 3px; background: rgba(242, 239, 232, 0.13); }
.sk--w60 { width: 60%; } .sk--w40 { width: 40%; } .sk--w75 { width: 75%; }
.sk--block { height: 42%; border-radius: 6px; }
.fr__three { position: absolute; inset: 26px 0 0; padding: 12px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.fr__three img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; border-radius: 4px; }
.fr__three img:nth-child(2) { box-shadow: 0 0 0 2px var(--acid); }
.fr__one { position: absolute; inset: 26px 0 0; overflow: hidden; }
.fr__one img { width: 100%; height: auto; }
.fr__lines { position: absolute; inset: 0; display: grid; align-content: center; gap: 12px; padding: 0 14%; }
.fr__lines i { display: block; height: 10px; border-radius: 3px; background: var(--acid); opacity: 0.85; }
.fr__lines i:nth-child(2) { width: 72%; } .fr__lines i:nth-child(3) { width: 48%; }
.fr--live { box-shadow: inset 0 0 0 1px var(--acid); }
.pinmark { position: absolute; left: var(--x); top: var(--y); width: 16px; height: 16px; border-radius: 50%; background: var(--acid); box-shadow: 0 0 0 5px rgba(216, 242, 75, 0.22); }
@media (max-width: 860px) {
  .st { grid-template-columns: 1fr; gap: 16px; }
  .st__vis { display: none; }
}

/* ---------- six steps, each with a drawing made for it ---------- */
.steps6 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 22px); }
.stp { background: var(--ink); border-radius: 12px; padding: clamp(20px, 2.2vw, 30px); display: grid; align-content: start; gap: 6px; }
.stp__art { margin-bottom: clamp(10px, 1.4vw, 18px); }
.dw { display: block; width: 100%; max-width: 132px; height: auto; overflow: visible; }
.dw .p { fill: none; stroke: var(--acid); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.stp__n { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em; color: var(--bone-38); }
.stp__t { font-size: clamp(1.3rem, 2vw, 1.7rem); }
.stp__b { color: var(--bone-60); font-size: 0.96rem; }
/* each path draws itself when its card arrives */
.stp .dw .p, .art .dw .p { stroke-dasharray: var(--len, 300); stroke-dashoffset: var(--len, 300); }
.stp.is-in .dw .p, .art.is-in .dw .p { stroke-dashoffset: 0; transition: stroke-dashoffset 800ms var(--ease-in); }
.stp .dw .p:nth-child(2), .art .dw .p:nth-child(2) { transition-delay: 110ms; }
.stp .dw .p:nth-child(3), .art .dw .p:nth-child(3) { transition-delay: 210ms; }
.stp .dw .p:nth-child(4), .art .dw .p:nth-child(4) { transition-delay: 300ms; }
.stp .dw .p:nth-child(5), .art .dw .p:nth-child(5) { transition-delay: 380ms; }
.no-js .stp .dw .p, .no-js .art .dw .p { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) { .stp .dw .p, .art .dw .p { stroke-dashoffset: 0; } }
@media (max-width: 980px) { .steps6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .steps6 { grid-template-columns: 1fr; } }

/* ---------- a drawing of its own on every vertical page ---------- */
.art { margin-bottom: clamp(16px, 2vw, 26px); }
.art .dw { max-width: clamp(190px, 22vw, 260px); }
@media (max-width: 860px) { .art .dw { max-width: 170px; } }

/* work cards sitting on the bone ground */
.sec--bone .card__name { color: var(--ink); }
.sec--bone .card__kind { color: var(--ink-60); }

/* the trade sits on its own line so "for" is never left hanging */
.vnm { display: block; }

/* where a page has one example, the button fills the empty column */
.more { background: var(--ink-2); border-radius: 12px; padding: clamp(22px, 2.6vw, 34px); display: grid; align-content: center; justify-items: start; gap: 12px; }
.sec--bone .more { background: var(--ink); }
.more__t { font-family: var(--display); font-weight: 500; letter-spacing: -0.03em; font-size: clamp(1.2rem, 1.8vw, 1.55rem); color: var(--acid); }
.more__b { color: var(--bone-60); font-size: 0.95rem; max-width: 34ch; }
@media (max-width: 760px) { .more { padding: 24px; } }

/* a two-sentence page heading needs room the 16ch cap will not give it */
.d1--two { font-size: clamp(1.85rem, 3.5vw, 3.3rem); max-width: none; }

/* a drawing that runs the width of the row rather than hiding in one column */
.art--wide { margin: clamp(18px, 2.4vw, 34px) 0 clamp(20px, 2.6vw, 34px); }
.art--wide .dw { max-width: none; width: 100%; }
.art--wide .dw .p { stroke-width: 5; }

/* ---------- who we build for ---------- */
.who { position: static; }
.who.is-open .who__btn { color: var(--acid); }
.who__btn { display: flex; align-items: center; gap: 8px; background: none; border: 0; padding: 0; cursor: pointer; }
.who__btn::after { content: ''; width: 6px; height: 6px; margin-top: -3px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform var(--dur-hover) var(--ease-hover); }
.who.is-open .who__btn::after { transform: rotate(225deg) translate(-2px, -2px); }
.mega {
  position: absolute; top: 100%; left: 0; right: 0; background: var(--ink-2);
  border-top: 1px solid rgba(242, 239, 232, 0.1); box-shadow: 0 16px 34px rgba(0, 0, 0, 0.32);
  padding: clamp(18px, 2.2vw, 30px) 0 clamp(22px, 2.6vw, 34px);
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-8px);
  transition: opacity var(--dur-hover) var(--ease-hover), transform var(--dur-hover) var(--ease-hover), visibility 0s linear var(--dur-hover);
}
.who.is-open > .mega { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition-delay: 0s; }
@media (hover: hover) {
  .who:hover > .mega, .who:focus-within > .mega { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition-delay: 0s; }
}
.mega__in {
  width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad);
  display: grid; grid-template-columns: minmax(0, 2.7fr) minmax(0, 1fr); gap: clamp(14px, 1.8vw, 28px);
}
.mega__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; }
.hdr .mega .mw {
  display: grid; grid-template-columns: 42px minmax(0, 1fr); column-gap: 14px; align-items: center;
  padding: 11px 12px; border-radius: 10px; text-decoration: none; text-transform: none;
  font-family: var(--body); letter-spacing: 0; color: var(--bone);
  transition: background var(--dur-hover) var(--ease-hover);
}
.hdr .mega .mw:hover { background: rgba(242, 239, 232, 0.07); }
.mw__ic { grid-row: 1 / 3; }
.mw__ic svg { display: block; width: 100%; height: auto; }
.mw__ic svg * { fill: none; stroke: var(--acid); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.mw__t { font-family: var(--display); font-weight: 500; letter-spacing: -0.03em; font-size: 1rem; line-height: 1.2; color: var(--bone); }
.mw__k { font-size: 0.78rem; color: var(--bone-38); }
.hdr .mega .ask {
  display: grid; align-content: center; gap: 9px; padding: clamp(16px, 1.6vw, 24px); border-radius: 12px;
  background: var(--ink); text-decoration: none; text-transform: none; font-family: var(--body); letter-spacing: 0;
  transition: background var(--dur-hover) var(--ease-hover);
}
.hdr .mega .ask:hover { background: #101013; }
.ask__t { font-family: var(--display); font-weight: 500; letter-spacing: -0.03em; font-size: 1.15rem; color: var(--acid); }
.ask__b { font-size: 0.86rem; line-height: 1.5; color: var(--bone-60); }
.ask__c { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--acid); }
.ask__c::after { content: ' \2192'; }

/* ---------- the bar on a phone ---------- */
.burger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 38px; height: 34px; padding: 0; background: none; border: 0; cursor: pointer; }
.burger span { display: block; width: 22px; height: 2px; border-radius: 2px; background: var(--bone); transition: transform var(--dur-hover) var(--ease-hover), opacity var(--dur-hover) var(--ease-hover); }
.hdr.open .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hdr.open .burger span:nth-child(2) { opacity: 0; }
.hdr.open .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.hdr__cta { display: none; }
@media (max-width: 800px) {
  .hdr { padding: 10px var(--pad); }
  .burger { display: flex; }
  .mark, .hdr__cta, .burger { position: relative; z-index: 2; }
  .hdr__cta { display: inline-flex; margin-left: auto; }
  .hdr nav .btn--acid { display: none; }
  .hdr nav {
    position: fixed; inset: 0; display: block;
    padding: 76px var(--pad) 48px; background: var(--ink); overflow-y: auto; overscroll-behavior: contain;
    opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-10px);
    transition: opacity var(--dur-hover) var(--ease-hover), transform var(--dur-hover) var(--ease-hover), visibility 0s linear var(--dur-hover);
  }
  .hdr.open nav { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition-delay: 0s; }
  .hdr nav > a:not(.btn), .who__btn {
    display: flex; width: 100%; padding: 15px 0; font-size: 0.82rem;
    border-bottom: 1px solid rgba(242, 239, 232, 0.1); color: var(--acid);
  }
  .who__btn { justify-content: space-between; }
  .mega { position: static; display: none; opacity: 1; visibility: visible; pointer-events: auto; transform: none; box-shadow: none; background: none; border-top: 0; padding: 6px 0 14px; }
  .who.is-open > .mega { display: block; }
  .mega__in { grid-template-columns: 1fr; gap: 12px; padding: 0; }
  .mega__grid { grid-template-columns: 1fr; gap: 0; }
  .hdr .mega .mw { padding: 10px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .mega, .hdr nav, .burger span, .who__btn::after { transition-duration: 1ms; }
}

/* ---------- the areas we cover, as plain chips ---------- */
.areas { display: flex; flex-wrap: wrap; gap: 8px; }
.areas span { display: inline-flex; padding: 8px 13px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(242, 239, 232, 0.16); font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bone-60); }
.sec--bone .areas span { box-shadow: inset 0 0 0 1px rgba(15, 15, 17, 0.18); color: var(--ink); }
@media (max-width: 620px) { .areas span { padding: 7px 11px; font-size: 0.66rem; } }

/* ---------- the quote form, on the acid closer ---------- */
.end__grid--form { align-items: start; }
.end__tel { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.form--onink .field > span { color: rgba(15, 15, 17, 0.66); }
.form--onink .field input, .form--onink .field textarea, .form--onink .field select {
  background: rgba(15, 15, 17, 0.06); border-color: rgba(15, 15, 17, 0.22); color: var(--ink);
}
.form--onink .field input:focus, .form--onink .field textarea:focus, .form--onink .field select:focus { border-color: var(--ink); }
.form--onink .field textarea { min-height: 116px; }
.form--onink .note { color: rgba(15, 15, 17, 0.62); }
.form--onink .msg--ok { color: var(--ink); }
.form--onink .msg--bad { color: #8C1C13; }


/* ---------- the landing page asks for the click ---------- */
.hero__act { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: clamp(18px, 2.4vh, 28px); pointer-events: auto; }
.btn--wire { border-color: rgba(242, 239, 232, 0.4); color: var(--bone); }
.btn--wire:hover { background: rgba(242, 239, 232, 0.1); }
.hdr__tel { display: none; align-items: center; justify-content: center; width: 42px; height: 42px; margin-left: auto; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(242, 239, 232, 0.34); }
.hdr__tel svg { width: 20px; height: 20px; fill: none; stroke: var(--acid); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hdr__tel + .hdr__cta { margin-left: 8px; }
@media (max-width: 800px) { .hdr__tel { display: inline-flex; } }
@media (max-width: 380px) { .hdr__cta { padding: 12px 14px; } }
.lastcall { background: var(--ink); padding: clamp(46px, 6vw, 74px) 0; }
.lastcall__grid { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; }
.lastcall h2 { color: var(--acid); }
.lastcall__act { display: flex; flex-wrap: wrap; gap: 10px; }

/* The H1 is the page's largest paint, so it paints with the first frame: at opacity 0 the speed test
   timed it after every wall thumbnail had loaded. The curtain covers it on arrival either way,
   and it still rises into place. */
#h1.up, #h1 .h1__sub { opacity: 1; }

/* ---------- who we build for: one card per trade, the menu's icons at size ---------- */
.trades { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); }
.trade { display: flex; flex-direction: column; gap: 12px; padding: clamp(22px, 2.4vw, 32px); border-radius: 12px; background: var(--ink-2); color: var(--bone); text-decoration: none; transition: background-color var(--dur-hover) var(--ease-hover), opacity var(--dur-in) var(--ease-in), transform var(--dur-in) var(--ease-in); transition-delay: 0s, calc(var(--i, 0) * 120ms), calc(var(--i, 0) * 120ms); }
.trade:hover, .trade:focus-visible { background: var(--ink-3); }
.trade:focus-visible { outline: 2px solid var(--acid); outline-offset: 3px; }
.trade__ic { width: clamp(64px, 6vw, 84px); margin-bottom: 8px; }
.trade__ic svg { display: block; width: 100%; height: auto; }
.trade__ic svg * { fill: none; stroke: var(--acid); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.trade__k { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bone-38); }
.trade__t { font-size: clamp(1.4rem, 2vw, 1.85rem); letter-spacing: -0.035em; }
.trade__b { color: var(--bone-60); font-size: 0.96rem; line-height: 1.55; flex: 1; }
.trade__go { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--acid); margin-top: 8px; }
.trade__go::after { content: ' \2192'; display: inline-block; transition: transform var(--dur-hover) var(--ease-hover); }
.trade:hover .trade__go::after { transform: translateX(4px); }
/* the tenth card is the way in for everyone else: full width, outlined in acid */
.trade--ask { grid-column: 1 / -1; background: transparent; box-shadow: inset 0 0 0 1.5px var(--acid); color: var(--bone); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; align-items: center; gap: 12px 40px; }
.trade--ask:hover, .trade--ask:focus-visible { background: rgba(216, 242, 75, 0.06); }
.trade--ask .trade__k { color: var(--bone-38); grid-column: 1; grid-row: 1; align-self: end; }
.trade--ask .trade__t { grid-column: 1; grid-row: 2; align-self: start; color: var(--acid); }
.trade--ask .trade__b { grid-column: 2; grid-row: 1 / 3; }
.trade--ask .trade__go { grid-column: 3; grid-row: 1 / 3; margin: 0; }
@media (max-width: 960px) { .trades { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .trades { grid-template-columns: 1fr; }
  .trade--ask { grid-template-columns: 1fr; }
  .trade--ask > * { grid-column: 1 !important; grid-row: auto !important; }
}
@media (prefers-reduced-motion: reduce) { .trade, .trade__go::after { transition: none; } }

/* the "every trade" link sits under the trade grid; the Not on the list panel keeps the right column */
.mega__grid { grid-column: 1; grid-row: 1; }
.hdr .mega .ask { grid-column: 2; grid-row: 1 / 3; }
.hdr .mega .mega__all { grid-column: 1; grid-row: 2; justify-self: start; padding: 4px 12px; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--acid); text-decoration: none; }
.hdr .mega .mega__all::after { content: ' \2192'; }
.hdr .mega .mega__all:hover { color: var(--bone); }
@media (max-width: 860px) {
  .mega__grid, .hdr .mega .ask, .hdr .mega .mega__all { grid-column: 1; grid-row: auto; }
  .hdr .mega .mega__all { padding: 4px 0; }
}

/* =========================================================================
   2026-10-09: "One site, built to bring the work in" and "Every site on this page"
   reworked so each claim is shown, not told (Rob: "rather dull given this is our sales piece").
   Default state is the finished state; .armed (set by JS) holds the start, .is-in plays it,
   so nothing is hidden without JS. Transform/opacity throughout.
   ========================================================================= */

/* ---- bento: four unequal tiles, each with a live demo ---- */
.proofs.bento { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.bento .proof { grid-column: span 5; display: flex; flex-direction: column; gap: 22px; padding: 0; overflow: hidden; }
.bento .proof--wide { grid-column: span 7; flex-direction: row; align-items: stretch; }
.bento .proof__txt { display: grid; gap: 10px; align-content: start; padding: clamp(22px, 2.4vw, 32px); }
.bento .proof--wide .proof__txt { flex: 1 1 52%; align-content: end; }
.bento .proof:not(.proof--wide) .proof__txt { padding-top: 0; }
.demo { position: relative; flex: 0 0 auto; }
.bento .proof--wide .demo { flex: 1 1 48%; }
.bento .proof:not(.proof--wide) .demo { margin: clamp(22px, 2.4vw, 32px) clamp(22px, 2.4vw, 32px) 0; }

/* 01 fan: five real homepages deal out of a pile */
.fan { min-height: 300px; }
.fan__c {
  position: absolute; left: 50%; top: 50%; width: 74%; height: auto; aspect-ratio: 16 / 10; object-fit: cover;
  border-radius: 8px; box-shadow: 0 18px 40px -14px rgba(0, 0, 0, 0.7);
  transform: translate(-50%, -50%) translateX(calc((var(--k) - 2) * 15%)) rotate(calc((var(--k) - 2) * 7deg)) translateY(calc(var(--k) * 4px - 8px));
  transition: transform 900ms var(--ease-in); transition-delay: calc(var(--k) * 110ms);
}
.fan__c:nth-child(3) { z-index: 3; }
.fan__c:nth-child(2), .fan__c:nth-child(4) { z-index: 2; }
.proof.armed:not(.is-in) .fan__c { transform: translate(-50%, -50%) rotate(0deg); }
@media (hover: hover) {
  .proof--fan:hover .fan__c { transition-delay: 0s; }
  .fan__c:hover { z-index: 5; transform: translate(-50%, -50%) translateX(calc((var(--k) - 2) * 15%)) translateY(-14px) rotate(calc((var(--k) - 2) * 7deg)) scale(1.04); }
}

/* 02 calendar: ten working days fill in, the tenth goes live */
.cal { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.cal__d { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; min-height: 64px; padding: 10px; border-radius: 6px; background: var(--ink-3); font-family: var(--mono); }
.cal__d::before { content: ""; position: absolute; inset: 0; background: rgba(216, 242, 75, 0.16); transform-origin: left; transition: transform 420ms var(--ease-in); transition-delay: calc(200ms + var(--k) * 120ms); }
.cal__d b, .cal__d i { position: relative; font-weight: 400; font-style: normal; font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bone-60); }
.cal__d--live { background: var(--acid); transition: transform 500ms var(--ease-in), opacity 500ms var(--ease-in); transition-delay: 1400ms; }
.cal__d--live::before { display: none; }
.cal__d--live b, .cal__d--live i { color: var(--ink); }
.proof.armed:not(.is-in) .cal__d::before { transform: scaleX(0); }
.proof.armed:not(.is-in) .cal__d--live { opacity: 0; transform: scale(0.8); }

/* 03 search: a query types itself, then the result arrives */
.srch { display: grid; gap: 12px; }
.srch__bar { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 999px; background: var(--bone); color: var(--ink); font-size: 0.95rem; }
.srch__bar svg { width: 16px; height: 16px; flex: none; color: var(--ink-60); }
.srch__caret { width: 1.5px; height: 1.1em; background: var(--ink); margin-left: -6px; animation: caret 900ms steps(1) 6; }
@keyframes caret { 50% { opacity: 0; } }
.srch__res { padding: 14px 16px; border-radius: 10px; background: var(--ink-3); transition: transform 600ms var(--ease-in), opacity 600ms var(--ease-in); transition-delay: 1500ms; }
.srch__url { font-size: 0.78rem; color: var(--bone-60); }
.srch__t { margin-top: 4px; font-size: 1rem; color: #9DB8FF; }
.srch__d { margin-top: 4px; font-size: 0.86rem; color: var(--bone-60); line-height: 1.45; }
.proof.armed:not(.is-in) .srch__res { opacity: 0; transform: translateY(14px); }

@media (max-width: 1000px) {
  .bento .proof, .bento .proof--wide { grid-column: span 12; }
}
@media (max-width: 620px) {
  .proofs.bento { grid-template-columns: 1fr; }
  .bento .proof--wide { flex-direction: column; }
  .bento .proof--wide .demo { order: -1; margin: 22px 22px 0; }
  .ph { padding: 0; }
  .fan { min-height: 220px; }
  .fan__c { width: 62%; transform: translate(-50%, -50%) translateX(calc((var(--k) - 2) * 11%)) rotate(calc((var(--k) - 2) * 5deg)) translateY(calc(var(--k) * 4px - 8px)); }
}

/* ---- the statement between two drifting rows of our own sites ---- */
.say--mq { position: relative; padding: clamp(40px, 5vw, 72px) 0; overflow: hidden; }
.say--mq .wrap { padding-top: clamp(48px, 6vw, 88px); padding-bottom: clamp(48px, 6vw, 88px); }
.mq { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.mq__track { display: flex; gap: 14px; width: max-content; animation: mq 70s linear infinite; }
.mq--b .mq__track { animation-direction: reverse; animation-duration: 80s; }
.mq img { width: clamp(200px, 19vw, 300px); height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 8px; opacity: 0.82; transition: opacity var(--dur-hover) var(--ease-hover); }
.mq img:hover { opacity: 1; }
@keyframes mq { to { transform: translateX(calc(-50% - 7px)); } }
/* keeps moving under the pointer (Rob, 2026-10-09); the Pause button is the WCAG 2.2.2 control */
.say--mq.is-paused .mq__track { animation-play-state: paused; }
.mq__pause { position: absolute; right: var(--pad); bottom: 14px; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bone-60); background: none; border: 1px solid rgba(242, 239, 232, 0.2); border-radius: 999px; padding: 6px 12px; cursor: pointer; }
.mq__pause:hover { color: var(--bone); }
@media (prefers-reduced-motion: reduce) {
  .mq__track { animation: none; }
  .mq__pause { display: none; }
  .fan__c, .cal__d::before, .cal__d--live, .srch__res { transition: none; }
  .srch__caret { animation: none; }
}

/* 04 phone + speed score, third pass 2026-10-09 (Rob: "looks very clunky").
   One scene: a slim black handset turned gently in perspective, a static glass sheen on the screen,
   a soft floor shadow, and a compact score card overlapping its lower corner. Transform/opacity
   entrances only; the 3D turn itself is static. */
.ph { display: flex; align-items: center; justify-content: center; padding: clamp(28px, 3vw, 44px) clamp(40px, 5vw, 72px) clamp(28px, 3vw, 44px) clamp(22px, 2.4vw, 32px); }
.ph__scene { position: relative; perspective: 1600px; padding: 0 0 0 clamp(36px, 4vw, 64px); }
.ph__frame {
  position: relative; width: clamp(150px, 13vw, 186px); aspect-ratio: 480 / 942; border-radius: 30px; padding: 5px;
  background: #050506;
  box-shadow: inset 0 0 0 1px rgba(242, 239, 232, 0.22), inset 0 0 0 3px #050506, inset 0 0 0 4px rgba(242, 239, 232, 0.06),
              28px 44px 60px -28px rgba(0, 0, 0, 0.9);
  transform: rotateY(-20deg) rotateX(6deg) rotateZ(1.5deg);
  transition: transform 1100ms var(--ease-in), opacity 700ms var(--ease-in);
}
.ph__frame img { box-sizing: border-box; width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 25px; border-top: 24px solid #F4F3EF; background: #F4F3EF; }
.ph__frame::after { content: ""; position: absolute; inset: 5px; border-radius: 25px; pointer-events: none;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.04) 28%, rgba(255, 255, 255, 0) 46%); }
.ph__notch { position: absolute; z-index: 2; top: 12px; left: 50%; width: 30%; height: 15px; margin-left: -15%; border-radius: 999px; background: #050506; }
.ph__scene::after { content: ""; position: absolute; left: 22%; right: -6%; bottom: -26px; height: 34px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0)); z-index: -1; }

.ph__score {
  position: absolute; left: 0; bottom: 14%; z-index: 3; display: flex; align-items: center; gap: 12px;
  padding: 12px 16px 12px 12px; border-radius: 14px; background: #1E1E23;
  box-shadow: inset 0 0 0 1px rgba(242, 239, 232, 0.12), 0 18px 36px -14px rgba(0, 0, 0, 0.8);
  transition: transform 800ms var(--ease-in), opacity 800ms var(--ease-in); transition-delay: 450ms;
}
.ph__score svg { width: 52px; height: 52px; transform: rotate(-90deg); flex: none; }
.ph__track, .ph__bar { fill: none; stroke-width: 11; }
.ph__track { stroke: rgba(242, 239, 232, 0.1); }
.ph__bar { stroke: var(--acid); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 10; transition: stroke-dashoffset 1400ms var(--ease-in) 700ms; }
.ph__num { font-family: var(--display); font-size: 1.7rem; line-height: 1; letter-spacing: -0.04em; color: var(--acid); }
.ph__num b { font-weight: 500; }
.ph__lab { margin-top: 4px; font-size: 0.78rem; line-height: 1.3; color: var(--bone-60); white-space: nowrap; }

.proof.armed:not(.is-in) .ph__frame { opacity: 0; transform: translateY(50px) rotateY(-6deg) rotateX(0deg); }
.proof.armed:not(.is-in) .ph__score { opacity: 0; transform: translateX(-24px); }
.proof.armed:not(.is-in) .ph__bar { stroke-dashoffset: 100; }
.bento .proof--ph .proof__txt { align-content: center; }
@media (max-width: 620px) {
  .ph { padding: 30px 22px 6px; }
  .ph__frame { width: 160px; }
}
@media (prefers-reduced-motion: reduce) { .ph__frame, .ph__score, .ph__bar { transition: none; } }

/* score card sits under the phone, never over it (Rob, 2026-10-09: "now it overlaps the phone") */
.ph__scene { display: flex; flex-direction: column; align-items: center; gap: clamp(16px, 1.8vw, 24px); padding: 0; }
.ph__score { position: relative; left: auto; bottom: auto; }

/* Uniform bento (Rob, 2026-10-09: "content is everywhere in the blocks"): two equal columns, every
   tile the same shape, demo in an equal-height stage on top, number, title and copy below. */
.proofs.bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bento .proof, .bento .proof--wide { grid-column: auto; flex-direction: column; align-items: stretch; gap: 0; }
.bento .demo, .bento .proof--wide .demo, .bento .proof:not(.proof--wide) .demo { flex: none; height: clamp(230px, 22vw, 300px); margin: clamp(22px, 2.4vw, 32px) clamp(22px, 2.4vw, 32px) 0; display: flex; align-items: center; justify-content: center; }
.bento .proof__txt, .bento .proof--wide .proof__txt, .bento .proof:not(.proof--wide) .proof__txt { flex: 1; align-content: start; padding: clamp(22px, 2.4vw, 32px); }
.bento .fan { min-height: 0; }
.bento .cal { width: 100%; align-content: center; }
.bento .srch { width: 100%; align-content: center; }
.mock { position: relative; }
.mock img { height: 100%; width: auto; max-width: 100%; object-fit: contain; transition: transform 900ms var(--ease-in), opacity 700ms var(--ease-in); }
.mock__chip { position: absolute; left: 0; bottom: 4px; display: inline-flex; align-items: baseline; gap: 8px; padding: 8px 12px; border-radius: 999px; background: #1E1E23; box-shadow: inset 0 0 0 1px rgba(242,239,232,.12); font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bone-60); transition: opacity 700ms var(--ease-in) 400ms; }
.mock__chip b { font-family: var(--display); font-size: 1.05rem; letter-spacing: -0.03em; text-transform: none; font-weight: 500; color: var(--acid); }
.proof.armed:not(.is-in) .mock img { opacity: 0; transform: translateY(30px); }
.proof.armed:not(.is-in) .mock__chip { opacity: 0; }
@media (max-width: 760px) {
  .proofs.bento { grid-template-columns: 1fr; }
  .bento .demo, .bento .proof--wide .demo, .bento .proof:not(.proof--wide) .demo { height: 220px; order: 0; margin: 22px 22px 0; }
}
@media (prefers-reduced-motion: reduce) { .mock img, .mock__chip { transition: none; } }
.proofs.bento .proof .demo.cal { display: grid; grid-template-columns: repeat(5, 1fr); align-content: center; }
.proofs.bento .proof .demo.srch { display: grid; align-content: center; justify-content: stretch; }
.bento .fan__c { width: 56%; }
.mock__chip { position: static; justify-self: start; margin-top: 8px; }
.proofs.bento .proof .demo.cal, .proofs.bento .proof .demo.srch { width: auto; }
.mock__chip { border-radius: 14px; }
@media (max-width: 760px) { .proofs.bento .proof .demo.srch { height: auto; min-height: 220px; } }

/* =========================================================================
   THE TOUR (2026-10-09). Rob: "far too basic, elevate it as far as possible".
   One idea organises the section: it pins, and the reader scrolls through the four
   promises inside one showcase screen, each one enacted (the deck riffles, the site is
   wiped in from its wireframe over ten days, the result climbs to #1, the score counts
   to 90+). Base layout = four stacked chapters in their finished state (phones, reduced
   motion, no JS). .is-pinned (set by JS) turns it into the pinned stage. Every scrubbed
   property is a transform or opacity driven by --t (0 to 1) per chapter.
   ========================================================================= */
.tour { position: relative; }
.tour__stage { display: grid; gap: clamp(40px, 6vw, 72px); }
.tour__frame, .tour__rail { display: none; }
.ch { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.ch__n { font-family: var(--display); font-size: clamp(5rem, 10vw, 9.5rem); line-height: 0.82; letter-spacing: -0.06em; color: transparent; -webkit-text-stroke: 1.5px var(--ink); }
.ch__h { margin-top: clamp(14px, 2vw, 26px); font-size: clamp(1.9rem, 3.4vw, 3.1rem); line-height: 0.98; color: var(--ink); max-width: 12ch; }
.ch__p { margin-top: 18px; font-size: clamp(1rem, 1.2vw, 1.12rem); line-height: 1.6; color: var(--ink-60); max-width: 40ch; }

/* the showcase screen each scene lives in */
.ch { --t: 1; }
.sc { position: relative; height: clamp(320px, 34vw, 500px); border-radius: 22px; background: var(--ink); overflow: hidden; color: var(--bone);
  box-shadow: 0 40px 80px -40px rgba(15, 15, 17, 0.55); }
.sc::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(242,239,232,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(242,239,232,.045) 1px, transparent 1px);
  background-size: 48px 48px; -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 78%); mask-image: radial-gradient(ellipse at center, #000 30%, transparent 78%); }
.sc__tag { position: absolute; z-index: 5; top: 18px; left: 20px; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--acid); }
.sc__tag::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 9px; border-radius: 50%; background: var(--acid); vertical-align: 1px; }

/* 01 deck: the top card flies off as you scroll, the next steps up */
.deck__c { --d: calc(var(--k) - var(--t) * 5); --out: clamp(0, calc(var(--d) * -1), 1); --in: clamp(0, var(--d), 5);
  position: absolute; left: 50%; top: 52%; width: 58%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 10px;
  box-shadow: 0 24px 50px -18px rgba(0,0,0,.85), 0 0 0 1px rgba(242,239,232,.08);
  z-index: calc(10 - var(--k));
  transform: translate(-50%, -50%) translateX(calc(var(--out) * -95%)) translateY(calc(var(--in) * -16px)) rotate(calc(var(--out) * -16deg + var(--in) * 2.5deg)) scale(calc(1 - var(--in) * 0.06));
  opacity: calc(1 - var(--out) * 0.9 - var(--in) * 0.12); }
.sc--deck .deck__c:last-of-type { --out: 0; }

/* 02 build: a wireframe wiped across into the real site; ten day markers fill to Live */
.build__win { position: absolute; left: 7%; right: 7%; top: 14%; bottom: 22%; border-radius: 12px; overflow: hidden; background: #1b1b1f; box-shadow: 0 0 0 1px rgba(242,239,232,.1), 0 30px 60px -30px rgba(0,0,0,.9); }
.build__bar { height: 26px; display: flex; align-items: center; gap: 6px; padding: 0 12px; background: #26262b; }
.build__bar i { width: 8px; height: 8px; border-radius: 50%; background: #45454c; }
.build__bar b { margin-left: 12px; flex: 1; height: 11px; border-radius: 6px; background: #33333a; }
.build__view { position: absolute; inset: 26px 0 0; overflow: hidden; }
.wire { position: absolute; inset: 0; padding: 4%; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 8% 9% 6% 1fr 9%; gap: 4%; }
.wire span { border: 1.5px dashed rgba(242,239,232,.28); border-radius: 6px; }
.wire__nav { grid-column: 1 / -1; }
.wire__h { grid-column: 1 / 3; } .wire__h--s { grid-column: 1 / 2; }
.wire__img { grid-column: 1 / -1; }
.wire__c { grid-row: 5; }
.wire__btn { display: none; }
.real { position: absolute; inset: 0; overflow: hidden; transform: translateX(calc((var(--t) - 1) * 100%)); }
.real__in { position: absolute; inset: 0; transform: translateX(calc((1 - var(--t)) * 100%)); }
.real img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.real::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 3px; background: var(--acid); box-shadow: 0 0 18px 2px rgba(216,242,75,.6); opacity: calc(1 - var(--t) * var(--t) * var(--t)); }
.days { position: absolute; left: 7%; right: 7%; bottom: 7%; display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; }
.days span { padding: 7px 0; border-radius: 5px; text-align: center; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bone-38); background: var(--ink-3); transition: background-color 200ms, color 200ms; }
.days span.on { background: rgba(216,242,75,.18); color: var(--bone); }
.days span:last-child.on { background: var(--acid); color: var(--ink); }
.tour:not(.armed) .days span { background: rgba(216,242,75,.18); color: var(--bone); }
.tour:not(.armed) .days span:last-child { background: var(--acid); color: var(--ink); }

/* 03 rank: the query types itself, then your result climbs from fourth to first */
.rank__bar { position: absolute; left: 7%; right: 7%; top: 15%; display: flex; align-items: center; gap: 10px; padding: 13px 18px; border-radius: 999px; background: var(--bone); color: var(--ink); font-size: 0.98rem; }
.rank__bar svg { width: 16px; height: 16px; flex: none; color: var(--ink-60); }
.rank__caret { width: 1.5px; height: 1.1em; background: var(--ink); margin-left: -6px; }
.rank__list { --row: clamp(62px, 6.4vw, 84px); position: absolute; left: 7%; right: 7%; top: calc(15% + 70px); height: calc(var(--row) * 4); }
.rank__r { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--row) - 10px); border-radius: 10px; background: var(--ink-2); box-shadow: inset 0 0 0 1px rgba(242,239,232,.06); padding: 12px 16px; display: grid; align-content: center; gap: 7px;
  transform: translateY(calc((var(--j) + var(--t)) * var(--row))); }
.rank__r i { display: block; height: 7px; border-radius: 4px; background: rgba(242,239,232,.12); }
.rank__r i:nth-child(1) { width: 32%; } .rank__r i:nth-child(2) { width: 58%; background: rgba(242,239,232,.2); } .rank__r i:nth-child(3) { width: 78%; }
.rank__r--us { z-index: 2; background: #1E1E23; box-shadow: inset 0 0 0 1.5px var(--acid), 0 18px 40px -16px rgba(0,0,0,.8); gap: 3px; padding-right: 64px;
  transform: translateY(calc((1 - var(--t)) * 3 * var(--row))); }
.rank__url { font-size: 0.74rem; color: var(--bone-60); }
.rank__t { font-size: 0.98rem; color: #A9C1FF; }
.rank__d { font-size: 0.8rem; color: var(--bone-60); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank__pos { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-family: var(--display); font-size: 1.5rem; letter-spacing: -0.04em; color: var(--acid); opacity: calc(var(--t) * 2 - 1); }

/* 04 speed: the device mockup rises in, the score counts up and the ring draws */
.speed__mock { position: absolute; left: 4%; bottom: -2%; width: 66%; height: auto;
  transform: translateY(calc((1 - var(--t)) * 60px)) scale(calc(0.92 + var(--t) * 0.08)); opacity: calc(0.2 + var(--t) * 0.8); transform-origin: bottom left; }
.speed__score { position: absolute; right: 6%; top: 50%; transform: translateY(-50%); display: grid; justify-items: center; gap: 10px; text-align: center; width: 24%; }
.speed__score svg { width: 100%; height: auto; transform: rotate(-90deg); }
.speed__track, .speed__bar { fill: none; stroke-width: 9; }
.speed__track { stroke: var(--ink-3); }
.speed__bar { stroke: var(--acid); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 10; transition: stroke-dashoffset 220ms linear; }
.speed__num { position: absolute; top: 0; left: 0; right: 0; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-family: var(--display); font-size: clamp(1.6rem, 2.6vw, 2.5rem); letter-spacing: -0.05em; color: var(--acid); }
.speed__num b { font-weight: 500; }
.speed__lab { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bone-60); line-height: 1.5; }

/* ---------- pinned stage ---------- */
.tour.is-pinned { height: 460svh; margin-top: clamp(8px, 2vw, 24px); }
.tour.is-pinned .tour__stage { position: sticky; top: 0; height: 100svh; padding: 96px 0 40px; gap: 0 clamp(32px, 5vw, 80px);
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: minmax(0, 1fr) auto; align-items: center; }
.tour.is-pinned .ch { display: contents; }
.tour.is-pinned .ch__txt { grid-area: 1 / 1; transition: opacity 500ms var(--ease-in), transform 700ms var(--ease-in); }
.tour.is-pinned .sc { grid-area: 1 / 2; height: min(100%, 560px); width: 100%; transition: opacity 600ms var(--ease-in), transform 800ms var(--ease-in); }
.tour.is-pinned .tour__frame { display: block; grid-area: 1 / 2; height: min(100%, 560px); width: 100%; border-radius: 22px; background: var(--ink); box-shadow: 0 40px 80px -40px rgba(15,15,17,.55); }
.tour.is-pinned .ch:not(.is-on) .ch__txt { opacity: 0; transform: translateY(26px); pointer-events: none; }
.tour.is-pinned .ch:not(.is-on) .sc { opacity: 0; transform: scale(0.97); }
.tour.is-pinned .sc { box-shadow: none; }
.tour.is-pinned .tour__rail { display: grid; grid-area: 2 / 1 / 3 / 3; grid-template-columns: repeat(4, 1fr); gap: 10px; padding-top: 28px; }
.tour__rail span { position: relative; height: 3px; border-radius: 2px; background: rgba(15,15,17,.14); overflow: hidden; }
.tour__rail i { position: absolute; inset: 0; background: var(--ink); transform-origin: left; transform: scaleX(var(--f, 0)); }

@media (max-width: 900px) {
  .ch { grid-template-columns: 1fr; }
  .ch__n { font-size: clamp(4rem, 18vw, 6rem); }
  .sc { height: clamp(280px, 80vw, 420px); }
  .deck__c { width: 70%; }
  .speed__mock { width: 80%; left: -4%; }
  .speed__score { width: 30%; right: 4%; top: 36%; }
  .rank__d { display: none; }
}
@media (prefers-reduced-motion: reduce) { .tour__stage * { transition: none !important; } }
.sc--deck { --t: 0; }   /* the deck rests stacked; JS riffles it once on arrival */
@media (max-width: 900px) { .rank__t { font-size: 0.86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rank__url { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } }
.deck__c { height: auto; }

/* 2026-10-09 offer update: trust strip, Why grid, price note (existing .lab / .proof / .lede styles) */
.trust { margin-top: 22px; color: var(--bone-60); letter-spacing: 0.1em; }
.why__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.why__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.why--row { padding: clamp(40px, 5vw, 64px) 0; }
.why__cta { margin-top: clamp(24px, 3vw, 36px); }
.price__note { margin-top: clamp(18px, 2vw, 26px); font-size: 0.95rem; color: var(--ink-60); }
@media (max-width: 1000px) { .why__grid, .why__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .why__grid, .why__grid--4 { grid-template-columns: 1fr; } }
/* phone link in the header at phone widths: keep it round and keep the menu button on screen */
.hdr__tel { flex: none; }
@media (max-width: 440px) { .hdr { gap: 10px; } .hdr__cta { padding: 11px 14px; font-size: 0.68rem; } }
@media (max-width: 380px) { .hdr { padding-left: 14px; padding-right: 14px; gap: 8px; } .hdr__cta { padding: 10px 11px; font-size: 0.62rem; letter-spacing: 0.04em; } .hdr__tel { width: 38px; height: 38px; } }

/* tour without the pin (Rob, 2026-10-09: a second scroll-through section "is too much"):
   alternating rows with a tighter rhythm; scenes play once on arrival (main.js) */
.tour__stage { gap: clamp(56px, 7vw, 104px); }
.ch:nth-of-type(even) .ch__txt { order: 2; }
.ch .sc { height: clamp(300px, 30vw, 440px); }
.tour .days span.on { background: rgba(216,242,75,.18); color: var(--bone); }
.tour .days span:last-child.on { background: var(--acid); color: var(--ink); }
@media (max-width: 900px) { .ch:nth-of-type(even) .ch__txt { order: 0; } }

/* trust strip as pills (Rob, 2026-10-09: the caps line "looks rubbish") */
.trust { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 22px 0 0; padding: 0; letter-spacing: 0; }
.trust li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 11px; border-radius: 999px; background: rgba(15, 15, 17, 0.86); box-shadow: inset 0 0 0 1px rgba(242, 239, 232, 0.2), 0 8px 20px -10px rgba(0,0,0,.8); font-size: 0.86rem; color: var(--bone); white-space: nowrap; }
.trust svg { width: 14px; height: 14px; flex: none; fill: none; stroke: var(--acid); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 620px) { .trust { gap: 6px; } .trust li { font-size: 0.78rem; padding: 6px 11px 6px 9px; } }

/* landing: the promises as a ruled row inside the showcase (Rob, 2026-10-09: "so bland") */
.promise { list-style: none; margin: clamp(32px, 4vw, 56px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid rgba(242, 239, 232, 0.16); text-align: left; }
.promise li { display: grid; align-content: start; gap: 8px; padding: 22px clamp(14px, 1.8vw, 26px) 4px; }
.promise li + li { border-left: 1px solid rgba(242, 239, 232, 0.16); }
.promise__n { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em; color: var(--acid); }
.promise b { font-family: var(--display); font-weight: 500; font-size: clamp(1.05rem, 1.5vw, 1.35rem); line-height: 1.08; letter-spacing: -0.03em; color: var(--bone); }
.promise__p { font-size: 0.9rem; color: var(--bone-60); }
@media (max-width: 900px) { .promise { grid-template-columns: 1fr 1fr; } .promise li:nth-child(3) { border-left: 0; } .promise li:nth-child(n+3) { border-top: 1px solid rgba(242, 239, 232, 0.16); } }
@media (max-width: 520px) { .promise { grid-template-columns: 1fr; } .promise li + li { border-left: 0; border-top: 1px solid rgba(242, 239, 232, 0.16); } }
#heroA { color: var(--bone); text-shadow: 0 0 2px rgba(15,15,17,.95), 0 1px 14px rgba(15,15,17,.95), 0 0 30px rgba(15,15,17,.8); }
/* mockup sits centred in the screen, not on its bottom edge (Rob, 2026-10-09) */
.speed__mock { top: 52%; bottom: auto; transform-origin: center left;
  transform: translateY(calc(-50% + (1 - var(--t)) * 60px)) scale(calc(0.92 + var(--t) * 0.08)); }
@media (max-width: 900px) { .speed__mock { width: 72%; left: 0; top: 46%; } .speed__score { width: 25%; right: 5%; top: auto; bottom: 9%; transform: none; } .speed__lab { font-size: 0.56rem; } }

/* "Custom coded", drawn (Rob, 2026-10-09: repeating the sites "doesnt work", add our own graphic).
   A code window types HTML; each line builds its part of the page beside it. Finished state by
   default; .armed + .is-in (main.js) replays it once on arrival. Transform/opacity only. */
.say--code { padding: clamp(64px, 8vw, 120px) 0 clamp(56px, 7vw, 100px); }
.say--code .wrap { padding-top: clamp(40px, 5vw, 72px); padding-bottom: 0; }
.cg { width: min(1180px, calc(100% - 2 * var(--pad))); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.05fr) 64px minmax(0, 1fr); align-items: center; gap: 0; text-align: left; }
.cg__code, .cg__page { border-radius: 14px; overflow: hidden; background: var(--ink-2); box-shadow: inset 0 0 0 1px rgba(242,239,232,.1), 0 40px 80px -40px rgba(0,0,0,.9); }
.cg__bar { height: 30px; display: flex; align-items: center; gap: 6px; padding: 0 14px; background: var(--ink-3); }
.cg__bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(242,239,232,.18); }
.cg__bar span { margin-left: 12px; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.06em; color: var(--bone-60); }
.cg__bar b { margin-left: 12px; flex: 1; height: 12px; border-radius: 6px; background: rgba(242,239,232,.08); }
.cg__lines { list-style: none; margin: 0; padding: 18px 0; counter-reset: ln; font-family: var(--mono); font-size: clamp(0.7rem, 0.92vw, 0.84rem); line-height: 1.9; color: var(--bone); }
.cg__lines li { counter-increment: ln; padding: 0 18px 0 0; white-space: pre; overflow: hidden; text-overflow: ellipsis; transition: opacity 260ms var(--ease-in), transform 260ms var(--ease-in); transition-delay: calc(var(--l) * 230ms); }
.cg__lines li::before { content: counter(ln); display: inline-block; width: 44px; padding-right: 14px; text-align: right; color: rgba(242,239,232,.26); }
.cg__lines k { color: #FF8A5C; } .cg__lines a { color: #9DB8FF; } .cg__lines s { text-decoration: none; color: var(--acid); } .cg__lines n { color: var(--acid); } .cg__lines c { color: rgba(242,239,232,.38); }
.cg__arrow { display: grid; place-items: center; height: 100%; }
.cg__arrow span { position: relative; width: 36px; height: 2px; background: var(--acid); }
.cg__arrow span::after { content: ""; position: absolute; right: -1px; top: -4px; border: solid var(--acid); border-width: 0 2px 2px 0; width: 8px; height: 8px; transform: rotate(-45deg); }
.cg__view { position: relative; aspect-ratio: 16 / 11; padding: 5% 6%; display: grid; grid-template-rows: auto auto auto 1fr auto; gap: 5%; background: var(--bone); }
.cg__p { transition: opacity 420ms var(--ease-in), transform 520ms var(--ease-in); }
.cg__p--1 { display: flex; align-items: center; gap: 10px; }
.cg__logo { width: 22%; height: 10px; border-radius: 3px; background: var(--ink); }
.cg__links { display: flex; gap: 8px; margin-left: auto; } .cg__links i { width: 26px; height: 6px; border-radius: 3px; background: rgba(15,15,17,.25); }
.cg__call { width: 15%; height: 16px; border-radius: 999px; background: var(--ink); }
.cg__p--2 { display: grid; gap: 7px; } .cg__p--2 span { height: clamp(12px, 1.6vw, 20px); border-radius: 4px; background: var(--ink); } .cg__p--2 span:first-child { width: 86%; } .cg__p--2 span:last-child { width: 60%; }
.cg__p--3 span { display: block; width: 48%; height: 7px; border-radius: 4px; background: rgba(15,15,17,.32); }
.cg__p--4 { border-radius: 8px; min-height: 60px; background:
  radial-gradient(circle at 74% 30%, rgba(216,242,75,.9) 0 13%, transparent 14%),
  repeating-linear-gradient(135deg, rgba(15,15,17,.9) 0 10px, rgba(15,15,17,.82) 10px 20px); }
.cg__p--5 { display: flex; gap: 10px; } .cg__p--5 span { width: 24%; height: 22px; border-radius: 999px; background: var(--ink); } .cg__p--5 span:first-child { background: rgba(15,15,17,.16); transition: background-color 400ms var(--ease-in); }
.cg.is-in .cg__p--5 span:first-child, .cg:not(.armed) .cg__p--5 span:first-child { background: var(--acid); box-shadow: inset 0 0 0 1px rgba(15,15,17,.25); transition-delay: 2.5s; }
/* replay: lines type in, each part arrives when its line does */
.cg.armed:not(.is-in) .cg__lines li { opacity: 0; transform: translateX(-10px); }
.cg.armed:not(.is-in) .cg__p { opacity: 0; transform: translateY(14px); }
.cg__p--1 { transition-delay: 300ms; } .cg__p--2 { transition-delay: 800ms; } .cg__p--3 { transition-delay: 1050ms; } .cg__p--4 { transition-delay: 1300ms; } .cg__p--5 { transition-delay: 1550ms; }
@media (max-width: 900px) {
  .cg { grid-template-columns: 1fr; gap: 14px; }
  .cg__arrow { height: 28px; transform: rotate(90deg); }
}
@media (prefers-reduced-motion: reduce) { .cg__lines li, .cg__p, .cg__p--5 span { transition: none !important; } }

/* drawn icons on the Why cards and the landing promises (Rob, 2026-10-09: "add some graphics in");
   same line language as the menu icons; they draw themselves in once (no JS: drawn) */
.why__ic { display: block; width: clamp(84px, 7.5vw, 112px); height: auto; margin-bottom: clamp(18px, 2vw, 28px); overflow: visible; }
.why__ic * { fill: none; stroke: var(--acid); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.promise .why__ic { width: 72px; margin-bottom: 14px; }
.why .proof { position: relative; overflow: hidden; }
.why .proof::after { content: ""; position: absolute; right: -40px; top: -40px; width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(closest-side, rgba(216,242,75,.12), rgba(216,242,75,0)); pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .js-draw .why__ic * { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1100ms var(--ease-in); }
  .js-draw .is-drawn .why__ic * { stroke-dashoffset: 0; }
}

/* the rendered page now shows exactly what the code says (Rob, 2026-10-09: the abstract bars did not read) */
.cg__view { grid-template-rows: auto auto auto 1fr auto; gap: 4%; color: var(--ink); font-family: var(--body); }
.cg__p--1 { gap: 14px; }
.cg__brand { font-family: var(--display); font-size: clamp(0.62rem, 0.9vw, 0.82rem); letter-spacing: -0.03em; }
.cg__links { gap: 12px; } .cg__links i { width: auto; height: auto; background: none; font-style: normal; font-size: clamp(0.5rem, 0.66vw, 0.66rem); color: rgba(15,15,17,.6); }
.cg__call { width: auto; height: auto; padding: 5px 10px; border-radius: 999px; background: var(--ink); color: var(--bone); font-size: clamp(0.5rem, 0.66vw, 0.66rem); white-space: nowrap; }
.cg__h1 { font-family: var(--display); font-weight: 500; font-size: clamp(1rem, 2.1vw, 1.75rem); line-height: 1; letter-spacing: -0.04em; max-width: 16ch; }
.cg__lede { font-size: clamp(0.62rem, 0.9vw, 0.86rem); color: rgba(15,15,17,.62); }
.cg__p--4 { background: none; min-height: 0; border-radius: 8px; overflow: hidden; }
.cg__p--4 img { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }
.cg__p--5 span { width: auto; height: auto; }
.cg__btn { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 999px; font-family: var(--mono); font-size: clamp(0.48rem, 0.62vw, 0.62rem); letter-spacing: 0.08em; text-transform: uppercase; background: rgba(15,15,17,.12); color: var(--ink); }
.cg__btn--2 { background: transparent; box-shadow: inset 0 0 0 1px rgba(15,15,17,.3); }
.cg.is-in .cg__p--5 .cg__btn:first-child, .cg:not(.armed) .cg__p--5 .cg__btn:first-child { background: var(--acid); }
.cg__p--5 .cg__btn--2 { background: transparent; color: var(--ink); }
/* the landing form sits on ink, like the contact page (Rob, 2026-10-09: acid was the wrong ground for a form) */
.end--dark { background: var(--ink); color: var(--bone); border-top: 1px solid rgba(242,239,232,.08); }
.end--dark h2 { color: var(--acid); }
.end--dark p { color: var(--bone-60); }
.end--dark .end__tel { color: var(--acid); }
.end__tel { white-space: nowrap; }

/* =========================================================================
   Pricing and the four-promise section (Rob, 2026-10-09): cards "a bit flat", the cream "very
   plain", and use the full screen rather than margins either side.
   ========================================================================= */
/* A) wider: both sections run nearly edge to edge */
.price > .wrap, .sec--bone[aria-labelledby="wd"] > .wrap { max-width: 1760px; padding-left: clamp(18px, 3.4vw, 64px); padding-right: clamp(18px, 3.4vw, 64px); }

/* B) not plain cream: a fine drafting grid, faded at the edges, plus a soft acid wash */
.price, .sec--bone[aria-labelledby="wd"] { position: relative; isolation: isolate; overflow: hidden; }
.price::before, .sec--bone[aria-labelledby="wd"]::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(15,15,17,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(15,15,17,.07) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 85%); mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 85%);
}
.price::after, .sec--bone[aria-labelledby="wd"]::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none; width: 70vw; height: 70vw; right: -24vw; top: -30vw; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(216,242,75,.32), rgba(216,242,75,0));
}
/* the pricing section: an ink plinth behind the top of the cards so they sit on depth, not on cream */
.price .tiers { position: relative; }
.price .tiers::before { content: ""; position: absolute; z-index: -1; left: clamp(-64px, -3.4vw, -18px); right: clamp(-64px, -3.4vw, -18px); top: -28px; height: 46%; border-radius: 28px; background: rgba(15,15,17,.055); }

/* cards with depth: a lit top edge, a faint inner grid, a real shadow, a lift on hover */
.tier, .prem {
  position: relative; overflow: hidden; border-radius: 18px;
  background: linear-gradient(165deg, #1F1F24 0%, #121215 46%, #0C0C0E 100%);
  box-shadow: inset 0 1px 0 rgba(242,239,232,.14), inset 0 0 0 1px rgba(242,239,232,.06), 0 30px 60px -32px rgba(15,15,17,.55), 0 10px 20px -14px rgba(15,15,17,.4);
  transition: transform var(--dur-hover) var(--ease-hover), box-shadow var(--dur-hover) var(--ease-hover);
}
.tier::before, .prem::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(rgba(242,239,232,.07) 1px, transparent 1.4px); background-size: 18px 18px;
  -webkit-mask-image: linear-gradient(200deg, #000, transparent 55%); mask-image: linear-gradient(200deg, #000, transparent 55%); }
.tier::after, .prem::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--acid), rgba(216,242,75,0) 70%); opacity: .0; transition: opacity var(--dur-hover) var(--ease-hover); }
.tier > *, .prem > * { position: relative; z-index: 1; }
.tier .tier__fig { font-size: clamp(2.6rem, 4.4vw, 4rem); }
.tier .tier__note { padding-bottom: 14px; border-bottom: 1px dashed rgba(242,239,232,.16); }
@media (hover: hover) {
  .tiers > .tier:hover, .tiers > .prem:hover { transform: translateY(-6px); box-shadow: inset 0 1px 0 rgba(242,239,232,.2), inset 0 0 0 1px rgba(216,242,75,.25), 0 40px 70px -30px rgba(15,15,17,.65), 0 12px 24px -14px rgba(15,15,17,.45); }
  .tiers > .tier:hover::after, .tiers > .prem:hover::after { opacity: 1; }
}
.prem::after { opacity: 1; }

/* the promise scenes: same depth on their screens */
.tour .sc { border-radius: 22px; box-shadow: inset 0 1px 0 rgba(242,239,232,.12), 0 40px 80px -36px rgba(15,15,17,.6), 0 12px 24px -16px rgba(15,15,17,.4); background: linear-gradient(165deg, #1C1C21, #0E0E10 60%); }
@media (prefers-reduced-motion: reduce) { .tier, .prem { transition: none; } }

/* landing promises as four cards in the homepage Why style (Rob, 2026-10-09) */
.promise { border-top: 0; gap: clamp(12px, 1.6vw, 22px); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.promise li, .promise li + li { position: relative; overflow: hidden; border: 0; border-radius: 12px; background: var(--ink-2); padding: clamp(22px, 2.4vw, 30px); gap: 10px; }
.promise li::after { content: ""; position: absolute; right: -40px; top: -40px; width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(closest-side, rgba(216,242,75,.12), rgba(216,242,75,0)); pointer-events: none; }
.promise .why__ic { width: clamp(72px, 6vw, 96px); margin-bottom: clamp(14px, 1.6vw, 22px); }
.promise__n { color: var(--bone-38); }
.promise b { color: var(--acid); font-size: clamp(1.1rem, 1.5vw, 1.4rem); }
.promise__p { font-size: 0.94rem; line-height: 1.5; }
@media (max-width: 900px) { .promise { grid-template-columns: 1fr 1fr; } .promise li:nth-child(n) { border: 0; } }
@media (max-width: 520px) { .promise { grid-template-columns: 1fr; } }
/* headline first, then the graphic acting it out (Rob, 2026-10-09: "what am I looking at after the hero?") */
.say--code .wrap { padding-top: 0; }
.say--code .cg { width: 100%; margin: clamp(36px, 4.5vw, 64px) auto 0; }
.say--code h2 + .cg + .lede, .say--code .cg + .lede { margin-top: clamp(28px, 3vw, 44px) !important; }
/* the acid glow echoes at every chapter, on the scene's side, not once at the top (Rob, 2026-10-09) */
.tour .ch { position: relative; isolation: isolate; }
.tour .ch::before { content: ""; position: absolute; z-index: -1; pointer-events: none; width: min(62vw, 900px); aspect-ratio: 1; top: 50%; right: -18%; transform: translateY(-50%);
  background: radial-gradient(closest-side, rgba(216,242,75,.30), rgba(216,242,75,.10) 45%, rgba(216,242,75,0)); }
.tour .ch:nth-of-type(even)::before { right: auto; left: -18%; }
@media (max-width: 900px) { .tour .ch::before { width: 120vw; right: -40%; top: 70%; } .tour .ch:nth-of-type(even)::before { left: auto; right: -40%; } }
.tour .ch::before { width: min(78vw, 1150px); right: -30%; background: radial-gradient(closest-side, rgba(216,242,75,.55), rgba(216,242,75,.2) 42%, rgba(216,242,75,0) 75%); }
.tour .ch:nth-of-type(even)::before { left: -30%; }
.sec--bone[aria-labelledby="wd"]::before { -webkit-mask-image: linear-gradient(transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(transparent, #000 8%, #000 92%, transparent); }
.sec--bone[aria-labelledby="wd"]::after { display: none; }

/* the rendered page as a real, cinematic hero (Rob, 2026-10-09: "the end result looks quite basic") */
.cg { perspective: 1800px; position: relative; isolation: isolate; }
.cg::before { content: ""; position: absolute; z-index: -1; left: 30%; right: -6%; top: -18%; bottom: -18%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(216,242,75,.20), rgba(216,242,75,0)); pointer-events: none; }
.cg__code { transform: rotateY(9deg) rotateX(2deg); transform-origin: right center; }
.cg__page { transform: rotateY(-9deg) rotateX(2deg); transform-origin: left center; background: #0c0c0e;
  box-shadow: inset 0 0 0 1px rgba(242,239,232,.12), 0 50px 90px -40px rgba(0,0,0,.95), 0 0 0 1px rgba(216,242,75,.06); }
.cg__view { position: relative; display: block; padding: 0; aspect-ratio: 16 / 11; background: #0c0c0e; color: var(--bone); overflow: hidden; }
.cg__p--4 { position: absolute; inset: 0; border-radius: 0; }
.cg__p--4 img { position: absolute; top: 0; right: -14%; width: 128%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.cg__p--4::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(10,10,12,.94) 0%, rgba(10,10,12,.78) 34%, rgba(10,10,12,.2) 66%, rgba(10,10,12,.05) 100%),
              linear-gradient(180deg, rgba(10,10,12,.55) 0%, rgba(10,10,12,0) 22%, rgba(10,10,12,0) 70%, rgba(10,10,12,.6) 100%); }
.cg__p--1 { position: absolute; left: 4.5%; right: 4.5%; top: 5%; display: flex; align-items: center; gap: 14px; padding: 8px 10px 8px 14px; border-radius: 999px;
  background: rgba(20,20,24,.55); box-shadow: inset 0 0 0 1px rgba(242,239,232,.14); }
.cg__brand { color: var(--bone); }
.cg__links i { color: rgba(242,239,232,.7); }
.cg__call { background: transparent; color: var(--acid); box-shadow: inset 0 0 0 1px rgba(216,242,75,.6); }
.cg__copy { position: absolute; left: 7%; bottom: 10%; width: 56%; display: grid; gap: 10px; }
.cg__open { display: inline-flex; align-items: center; gap: 7px; justify-self: start; padding: 4px 10px; border-radius: 999px; background: rgba(242,239,232,.1); font-family: var(--mono); font-size: clamp(0.46rem, 0.6vw, 0.6rem); letter-spacing: 0.08em; text-transform: uppercase; color: var(--bone); }
.cg__open i { width: 6px; height: 6px; border-radius: 50%; background: var(--acid); box-shadow: 0 0 8px var(--acid); }
.cg__h1 { color: var(--bone); font-size: clamp(1.3rem, 2.7vw, 2.4rem); line-height: .96; letter-spacing: -0.045em; max-width: 11ch; }
.cg__lede { color: rgba(242,239,232,.78); }
.cg__p--5 { display: flex; gap: 8px; margin-top: 4px; }
.cg__btn { background: rgba(242,239,232,.16); color: var(--bone); padding: 7px 13px; }
.cg__p--5 .cg__btn--2 { background: rgba(20,20,24,.4); color: var(--bone); box-shadow: inset 0 0 0 1px rgba(242,239,232,.35); }
.cg.is-in .cg__p--5 .cg__btn:first-child, .cg:not(.armed) .cg__p--5 .cg__btn:first-child { background: var(--acid); color: var(--ink); }
.cg__p--0 { transition-delay: 600ms; }
.cg.armed:not(.is-in) .cg__p--4 { opacity: 0; transform: scale(1.06); }
@media (max-width: 900px) { .cg__code, .cg__page { transform: none; } .cg__copy { width: 74%; } .cg__links { display: none; } }
@media (prefers-reduced-motion: reduce) { .cg__code, .cg__page { transform: none; } }
/* even chapters mirror the columns too, so every scene gets the wide column (Rob: 2 and 4 "squashed") */
.tour .ch:nth-of-type(even) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.tour .ch:nth-of-type(even) .ch__txt { padding-left: clamp(0px, 2vw, 32px); }
@media (max-width: 900px) { .tour .ch:nth-of-type(even) { grid-template-columns: 1fr; } .tour .ch:nth-of-type(even) .ch__txt { padding-left: 0; } }

/* "Best for" on every package (Rob, 2026-10-09), and /pricing rows with a device mockup */
.tier__best { margin: 0; padding: 14px 16px; border-radius: 10px; background: rgba(216,242,75,.07); box-shadow: inset 0 0 0 1px rgba(216,242,75,.18); font-size: 0.95rem; line-height: 1.5; color: rgba(242,239,232,.86) !important; }
.tier__best span { display: block; margin-bottom: 4px; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--acid); }
.tier--row { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(24px, 4vw, 64px); align-items: center; padding: clamp(26px, 3.4vw, 52px); }
.tier--row .tier__txt { display: flex; flex-direction: column; gap: 14px; }
.tier--row .tier__media img { width: 100%; height: auto; border-radius: 12px; }
.tier--flip .tier__media { order: -1; }
@media (max-width: 900px) { .tier--row { grid-template-columns: 1fr; } .tier--flip .tier__media { order: 0; } .tier--row .tier__media { order: -1; } }

.steps { border-top: 0; }   /* Rob, 2026-10-09: no thin line joining the step rules */
/* "What happens next" beside the landing form (Rob, 2026-10-09: fill the empty space) */
.nx { list-style: none; margin: clamp(36px, 4.5vw, 64px) 0 0; padding: 0; display: grid; gap: 0; max-width: 460px; }
.nx li { position: relative; display: grid; grid-template-columns: 64px 1fr; gap: 18px; padding-bottom: 30px; }
.nx li:not(:last-child)::before { content: ""; position: absolute; left: 31px; top: 66px; bottom: 4px; width: 2px; background: linear-gradient(var(--acid), rgba(216,242,75,.15)); }
.nx__dot { position: relative; width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; background: var(--ink-2); box-shadow: inset 0 0 0 1px rgba(216,242,75,.28), 0 0 28px -6px rgba(216,242,75,.35); }
.nx__ic { width: 32px; height: 32px; }
.nx__ic * { fill: none; stroke: var(--acid); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.nx__n { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em; color: var(--bone-38) !important; padding-top: 6px; }
.nx__t { margin-top: 4px; font-family: var(--display); font-weight: 500; font-size: clamp(1.1rem, 1.5vw, 1.35rem); letter-spacing: -0.03em; color: var(--bone) !important; }
.nx__p { margin-top: 6px; font-size: 0.95rem; line-height: 1.55; }
@media (max-width: 860px) { .nx { margin: 24px 0 8px; } }

/* =========================================================================
   Every cream section gets the new style (Rob, 2026-10-09): near full width, drafting grid
   with an acid glow on the ground, dark cards with depth and a corner glow.
   ========================================================================= */
.sec--bone { position: relative; isolation: isolate; overflow: hidden; }
.sec--bone > .wrap { max-width: 1760px; padding-left: clamp(18px, 3.4vw, 64px); padding-right: clamp(18px, 3.4vw, 64px); }
.sec--bone::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(15,15,17,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(15,15,17,.07) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: linear-gradient(transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(transparent, #000 10%, #000 90%, transparent);
}
.sec--bone::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none; width: min(70vw, 1000px); aspect-ratio: 1; right: -22%; top: 50%; transform: translateY(-50%); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(216,242,75,.42), rgba(216,242,75,.12) 45%, rgba(216,242,75,0) 75%);
}
.sec--bone .proof {
  position: relative; overflow: hidden; border-radius: 18px;
  background: linear-gradient(165deg, #1F1F24 0%, #121215 46%, #0C0C0E 100%);
  box-shadow: inset 0 1px 0 rgba(242,239,232,.14), inset 0 0 0 1px rgba(242,239,232,.06), 0 30px 60px -32px rgba(15,15,17,.55), 0 10px 20px -14px rgba(15,15,17,.4);
  transition: transform var(--dur-hover) var(--ease-hover), box-shadow var(--dur-hover) var(--ease-hover);
}
.sec--bone .proof::before { content: ""; position: absolute; right: -40px; top: -40px; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(closest-side, rgba(216,242,75,.14), rgba(216,242,75,0)); pointer-events: none; }
.sec--bone .proof > * { position: relative; }
.sec--bone .proof__n { color: var(--bone-38); }
@media (hover: hover) { .sec--bone .proof:hover { transform: translateY(-5px); box-shadow: inset 0 1px 0 rgba(242,239,232,.2), inset 0 0 0 1px rgba(216,242,75,.25), 0 40px 70px -30px rgba(15,15,17,.65); } }
@media (prefers-reduced-motion: reduce) { .sec--bone .proof { transition: none; } }
/* portfolio: smaller cards, three across, four on wide screens (Rob, 2026-10-09: less to scroll) */
.grid--port { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.4vw, 22px); }
.grid--port .card__frame { aspect-ratio: 16 / 10; }
.grid--port .card__meta { padding-top: 10px; gap: 6px 12px; }
.grid--port .card__name { font-size: clamp(1rem, 1.3vw, 1.2rem); }
.grid--port .card__kind { font-size: 0.86rem; }
@media (min-width: 1680px) { .grid--port { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1000px) { .grid--port { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .grid--port { grid-template-columns: 1fr; } }
/* process cards on cream get the same depth as the other cream cards */
.sec--bone .stp { position: relative; overflow: hidden; border-radius: 18px; background: linear-gradient(165deg, #1F1F24 0%, #121215 46%, #0C0C0E 100%);
  box-shadow: inset 0 1px 0 rgba(242,239,232,.14), inset 0 0 0 1px rgba(242,239,232,.06), 0 30px 60px -32px rgba(15,15,17,.55), 0 10px 20px -14px rgba(15,15,17,.4); }
.sec--bone .stp::before { content: ""; position: absolute; right: -40px; top: -40px; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(closest-side, rgba(216,242,75,.14), rgba(216,242,75,0)); pointer-events: none; }
.sec--bone .stp > * { position: relative; }
.grid--port .card__meta { flex-wrap: nowrap; } .grid--port .card__kind { flex: 1; min-width: 0; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .grid--port .card__name { white-space: nowrap; }

/* FAQ takes half the height: two columns of questions on wide screens, tighter rows (Rob, 2026-10-09) */
@media (min-width: 1000px) {
  .qa { columns: 2; column-gap: clamp(28px, 4vw, 64px); border-top: 0; }
  .qa details { break-inside: avoid; border-top: 1px solid rgba(242, 239, 232, 0.16); border-bottom: 0; }
}
.qa summary { padding: clamp(13px, 1.4vw, 18px) 0; font-size: clamp(0.98rem, 1.2vw, 1.12rem); }
.qa p { padding-bottom: clamp(14px, 1.6vw, 20px); font-size: 0.96rem; }

/* closing bands on ink, never acid (Rob, 2026-10-09: "acid background is a nono") */
.end { background: var(--ink); color: var(--bone); border-top: 1px solid rgba(242,239,232,.08); position: relative; isolation: isolate; overflow: hidden; }
.end::after { content: ""; position: absolute; z-index: -1; pointer-events: none; width: min(60vw, 900px); aspect-ratio: 1; right: -18%; top: 50%; transform: translateY(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(216,242,75,.16), rgba(216,242,75,0)); }
.end h2 { color: var(--acid) !important; }
.end p { color: var(--bone-60); }
.end .lab { color: var(--bone-38); }
.end .end__cta .btn--ink:first-child { background: var(--acid); color: var(--ink); }
.end .end__cta .btn--ink:not(:first-child) { background: transparent; color: var(--bone); border-color: rgba(242,239,232,.3); }
.end .end__tel { color: var(--acid); }

/* =========================================================================
   Inner-page heroes, elevated (Rob, 2026-10-09: "these heroes are lacking").
   Full width, drafting grid and acid glow on ink, bigger type, trust pills, a bespoke
   visual on the key pages, and a staggered load (pure CSS, motion guarded).
   ========================================================================= */
.phead--x { position: relative; isolation: isolate; overflow: hidden; min-height: min(78svh, 760px); display: flex; align-items: center; padding: clamp(120px, 15vh, 170px) 0 clamp(56px, 7vw, 96px); }
.phead--x::before { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background-image: linear-gradient(rgba(242,239,232,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(242,239,232,.05) 1px, transparent 1px); background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 85% 75% at 60% 45%, #000 25%, transparent 80%); mask-image: radial-gradient(ellipse 85% 75% at 60% 45%, #000 25%, transparent 80%); }
.phead--x::after { content: ""; position: absolute; z-index: -1; pointer-events: none; width: min(80vw, 1100px); aspect-ratio: 1; right: -16%; top: 50%; transform: translateY(-50%); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(216,242,75,.22), rgba(216,242,75,.06) 50%, rgba(216,242,75,0) 75%); }
.phead--x > .wrap { max-width: 1760px; padding-left: clamp(18px, 3.4vw, 64px); padding-right: clamp(18px, 3.4vw, 64px); width: 100%; }
.phead--x .phead__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: clamp(32px, 5vw, 96px); }
.phead--solo .phead__grid { grid-template-columns: minmax(0, 1fr); }
.phead--x .phead__l { display: grid; gap: clamp(16px, 1.8vw, 24px); justify-items: start; }
.phead--x .lab { color: var(--acid); }
.phead--x .lab::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 10px; border-radius: 50%; background: var(--acid); vertical-align: 2px; }
.phead--x h1 { font-size: clamp(2.8rem, 6.2vw, 6.2rem); line-height: .94; max-width: 13ch; }
.phead--solo h1 { max-width: 18ch; }
.phead--x .lede { max-width: 52ch; color: rgba(242,239,232,.72); }
.trust--left { justify-content: flex-start; margin-top: 4px; }
/* staggered load: label, headline, lede and visual, pills (CSS only; finished state without motion) */
@media (prefers-reduced-motion: no-preference) {
  .ph-in { animation: ph-rise 900ms var(--ease-in) both; animation-delay: calc(var(--i, 0) * 200ms + 120ms); }
  .phead--x h1.ph-in { --d: 80px; }
}
@keyframes ph-rise { from { opacity: 0; transform: translateY(var(--d, 40px)); } }

/* visuals */
.phead__r { position: relative; display: flex; justify-content: center; }
.hv { position: relative; width: 100%; max-width: 640px; }
.hv__tag { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--acid); }
.hv__tag::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 9px; border-radius: 50%; background: var(--acid); vertical-align: 1px; }
/* pricing: three price tickets, fanned */
.hv--tickets { height: clamp(300px, 30vw, 420px); }
.tk { position: absolute; left: 50%; top: 50%; width: min(78%, 400px); padding: clamp(18px, 2vw, 26px); border-radius: 18px; display: grid; gap: 6px;
  background: linear-gradient(165deg, #232328, #141417 60%); box-shadow: inset 0 1px 0 rgba(242,239,232,.14), inset 0 0 0 1px rgba(242,239,232,.07), 0 30px 60px -28px rgba(0,0,0,.9);
  transform: translate(-50%, -50%) translate(calc((var(--k) - 1) * 13%), calc((var(--k) - 1) * 28%)) rotate(calc((var(--k) - 1) * -5deg)); }
.tk__n { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bone-60); }
.tk b { font-family: var(--display); font-weight: 500; font-size: clamp(2rem, 3.4vw, 3rem); letter-spacing: -0.045em; line-height: 1; color: var(--bone); }
.tk__b { font-size: 0.9rem; color: var(--bone-60); }
.tk--on { box-shadow: inset 0 0 0 1.5px var(--acid), 0 34px 70px -28px rgba(0,0,0,.95), 0 0 40px -10px rgba(216,242,75,.35); }
.tk--on b { color: var(--acid); }
/* work: fanned real homepages */
.hv--deck { height: clamp(300px, 30vw, 440px); }
.hd__c { position: absolute; left: 50%; top: 50%; width: 72%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 12px;
  box-shadow: 0 30px 60px -24px rgba(0,0,0,.9), 0 0 0 1px rgba(242,239,232,.08);
  transform: translate(-50%, -50%) translateX(calc((var(--k) - 2) * 14%)) translateY(calc((var(--k) - 2) * -6%)) rotate(calc((var(--k) - 2) * 6deg)); }
/* process: the ten days */
.hv--days { display: grid; gap: 18px; padding: clamp(22px, 2.6vw, 34px); border-radius: 22px; background: linear-gradient(165deg, #1F1F24, #0E0E10 60%); box-shadow: inset 0 1px 0 rgba(242,239,232,.12), 0 40px 80px -36px rgba(0,0,0,.9); }
.hdays { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.hdays span { padding: 16px 0; border-radius: 10px; text-align: center; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bone); background: rgba(216,242,75,.12); }
.hdays span:last-child { background: var(--acid); color: var(--ink); box-shadow: 0 0 30px -6px rgba(216,242,75,.6); }
@media (prefers-reduced-motion: no-preference) { .hdays span { animation: ph-rise 500ms var(--ease-in) both; animation-delay: calc(700ms + var(--k) * 110ms); } }
.hrow { display: flex; flex-wrap: wrap; gap: 6px; }
.hrow span { padding: 6px 11px; border-radius: 999px; font-size: 0.8rem; color: var(--bone-60); box-shadow: inset 0 0 0 1px rgba(242,239,232,.16); }
/* contact: a direct-line card */
.hv--card { display: grid; gap: 12px; padding: clamp(26px, 3vw, 40px); border-radius: 22px; background: linear-gradient(165deg, #1F1F24, #0E0E10 60%); box-shadow: inset 0 1px 0 rgba(242,239,232,.12), inset 0 0 0 1px rgba(216,242,75,.14), 0 40px 80px -36px rgba(0,0,0,.9); }
.hc__big { font-family: var(--display); font-weight: 500; font-size: clamp(2rem, 4vw, 3.4rem); letter-spacing: -0.045em; color: var(--acid); text-decoration: none; white-space: nowrap; }
.hc__mail { font-size: clamp(1rem, 1.4vw, 1.25rem); color: var(--bone); text-decoration: none; border-bottom: 1px solid rgba(242,239,232,.25); justify-self: start; }
.hc__note { display: flex; align-items: center; gap: 9px; font-size: 0.92rem; color: var(--bone-60); }
.hc__note i { width: 8px; height: 8px; border-radius: 50%; background: var(--acid); box-shadow: 0 0 10px var(--acid); }
/* industry pages: the drawn icon in a glowing tile */
.hv--art { max-width: 420px; aspect-ratio: 4 / 3; display: grid; place-items: center; border-radius: 26px; background: linear-gradient(165deg, #1F1F24, #0E0E10 60%);
  box-shadow: inset 0 1px 0 rgba(242,239,232,.12), inset 0 0 0 1px rgba(216,242,75,.12), 0 40px 80px -36px rgba(0,0,0,.9), 0 0 80px -30px rgba(216,242,75,.35); }
.hv--art .art { width: 64%; }
.hv--art .art svg { width: 100%; height: auto; }

@media (max-width: 900px) {
  .phead--x { min-height: 0; }
  .phead--x .phead__grid { grid-template-columns: 1fr; }
  .hv--tickets, .hv--deck { height: 280px; }
  .hv--art { max-width: 300px; }
}

/* build scene sizes to the screenshot, so the real site shows in full (Rob, 2026-10-09: "stop it cropping the page") */
.ch .sc--build, .sc--build { height: auto; display: flex; flex-direction: column; gap: clamp(14px, 1.6vw, 22px); padding: clamp(52px, 5vw, 64px) 7% clamp(22px, 2.4vw, 32px); }
.sc--build .build__win { position: relative; inset: auto; flex: none; }
.sc--build .build__view { position: relative; inset: auto; aspect-ratio: 1100 / 688; }
.sc--build .days { position: static; }

/* tour numbers light up: the outline fills with acid and glows as each scene plays (Rob, 2026-10-09).
   Lit by default; only rewound to an outline when the tour is armed. Opacity only. */
.ch__n { position: relative; isolation: isolate; width: fit-content; }
.ch__n::before { content: ""; position: absolute; z-index: -1; inset: -10% -18%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(216,242,75,.55), rgba(216,242,75,0)); }
.ch__n::after { content: attr(data-n); position: absolute; inset: 0; color: var(--acid); -webkit-text-stroke: 1.5px var(--ink); }
.tour.armed .ch__n::before, .tour.armed .ch__n::after { opacity: 0; transition: opacity 1100ms var(--ease-in) 250ms; }
.tour.armed .ch__n::before { transition-duration: 1600ms; }
.tour.armed .ch.lit .ch__n::before, .tour.armed .ch.lit .ch__n::after { opacity: 1; }

/* pricing hero: fan the tickets out so every price reads (Rob, 2026-10-09) */
.hv--tickets { --o: clamp(106px, 9.2vw, 136px); height: calc(var(--o) * 2 + 170px); }
.tk { width: min(72%, 380px); transform: translate(-50%, -50%) translate(calc((var(--k) - 1) * 16%), calc((var(--k) - 1) * var(--o))) rotate(calc((var(--k) - 1) * -3deg)); }
@media (max-width: 900px) { .hv--tickets { --o: 112px; height: calc(var(--o) * 2 + 160px); } .tk { width: 74%; } }

/* proof of work on the landing page (Rob, 2026-10-09): four live sites, desktop with the phone over its corner */
.pwgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.pw { position: relative; display: grid; gap: 14px; align-content: start; padding: clamp(14px, 1.6vw, 22px) clamp(14px, 1.6vw, 22px) clamp(20px, 2.2vw, 28px); border-radius: 22px;
  background: linear-gradient(165deg, #1F1F24, #0E0E10 60%); color: var(--bone);
  box-shadow: inset 0 1px 0 rgba(242,239,232,.12), 0 40px 80px -40px rgba(14,14,16,.55); }
.pw__shot { position: relative; display: block; margin-bottom: 12px; border-radius: 12px; }
.pw__d { display: block; width: 100%; height: auto; aspect-ratio: 1100 / 688; object-fit: cover; object-position: top; border-radius: 12px; box-shadow: 0 0 0 1px rgba(242,239,232,.08); }
.pw__p { position: absolute; right: 4%; bottom: -10%; width: 21%; height: auto; aspect-ratio: 480 / 942; object-fit: cover; object-position: top; border-radius: 14px;
  box-shadow: 0 0 0 4px #0E0E10, 0 0 0 5px rgba(242,239,232,.16), 0 24px 40px -12px rgba(0,0,0,.85); }
.pw__meta { display: flex; justify-content: space-between; align-items: end; gap: 16px; padding: 0 6px; padding-right: 27%; }
.pw__t { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--acid) !important; }
.pw__n { margin-top: 6px; font-size: clamp(1.35rem, 2.1vw, 1.9rem); line-height: 1; letter-spacing: -0.035em; color: var(--bone) !important; }
.pw__score { display: flex; align-items: center; gap: 9px; flex: none; }
.pw__score b { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; font-family: var(--display); font-weight: 500; font-size: 1.05rem; letter-spacing: -0.03em; color: var(--acid);
  box-shadow: inset 0 0 0 2px var(--acid), 0 0 22px -6px rgba(216,242,75,.55); }
.pw__score span { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.1em; line-height: 1.4; text-transform: uppercase; color: var(--bone-60) !important; }
.pw__w { padding: 0 6px; font-size: 0.95rem; color: var(--bone-60) !important; }
.pw__go { justify-self: start; margin: 4px 6px 0; display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; border-radius: 999px; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--bone); text-decoration: none; box-shadow: inset 0 0 0 1px rgba(242,239,232,.3); transition: background-color var(--dur-hover) var(--ease-hover), color var(--dur-hover) var(--ease-hover); }
.pw__go svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.pw__go:hover, .pw__go:focus-visible { background: var(--acid); color: var(--ink); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .pw__d, .pw__p { transition: transform 700ms var(--ease-hover); }
  .pw__shot:hover .pw__d { transform: scale(1.015); }
  .pw__shot:hover .pw__p { transform: translateY(-8px); }
}
@media (max-width: 860px) {
  .pwgrid { grid-template-columns: 1fr; }
  .pw__meta { padding-right: 25%; }
}

/* footer on phones: logo, then the links in two columns, the email last under a rule (Rob, 2026-10-09: "a mess") */
@media (max-width: 760px) {
  .foot { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 20px; align-items: start; }
  .foot .mark { grid-column: 1 / -1; margin-bottom: 14px; }
  .foot a:not(.mark) { padding: 9px 0; }
  .foot a[href^="mailto:"] { grid-column: 1 / -1; margin-top: 12px; padding-top: 18px; border-top: 1px solid rgba(242,239,232,.1); }
}
/* the search result needs room for its two lines on phones */
@media (max-width: 900px) {
  .rank__list { --row: 78px; }
  .ch .sc--rank { height: 390px; }
}

/* work page on phones: each site is its own tile, the name sits clearly under its own screenshot (Rob, 2026-10-09) */
@media (max-width: 760px) {
  .grid--port { gap: 26px; }
  .grid--port .card { padding: 8px 8px 18px; border-radius: 16px; background: var(--ink-2); box-shadow: inset 0 0 0 1px rgba(242,239,232,.08); }
  .grid--port .card__frame { border-radius: 10px; }
  .grid--port .card__meta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 16px 8px 0; align-items: center; }
  .grid--port .card__name { grid-column: 1; font-size: 1.4rem; }
  .grid--port .card__kind { grid-column: 1; grid-row: 2; justify-self: start; margin: 0; text-align: left; }
  .grid--port .card__meta .tag { grid-column: 2; grid-row: 1 / span 2; }
}
/* proof section: the acid glow sits top right, behind the heading, not lost behind the cards */
.proofwork::after { top: max(-300px, -20vw); transform: none; }
/* proof cards on phones: the meta starts below the overlapping phone, so the trade label keeps one line */
@media (max-width: 860px) {
  .pw__shot { margin-bottom: 30px; }
  .pw__meta { padding-right: 6px; }
  .pw__t { white-space: nowrap; }
}

/* =========================================================================
   Landing page, shorter on phones (Rob, 2026-10-09: "a long way to scroll before a form")
   ========================================================================= */
/* pricing: the inclusions fold away on phones behind "What's included"; desktop shows them as before */
.tier__inc > p { margin: 0 0 16px; }
.tier__inc summary { display: none; }
@media (max-width: 760px) {
  .tier__note { display: none; }
  .tier__inc summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; list-style: none; padding: 12px 0; border-top: 1px solid rgba(242,239,232,.14);
    font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bone); }
  .tier__inc summary::-webkit-details-marker { display: none; }
  .tier__inc summary::after { content: ""; width: 9px; height: 9px; border: solid var(--acid); border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-2px, -2px); transition: transform var(--dur-hover) var(--ease-hover); }
  .tier__inc[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
  .tier__inc[open] summary { margin-bottom: 8px; }
}

/* call back: name, number, done */
.cb { position: relative; isolation: isolate; overflow: hidden; background: var(--ink); color: var(--bone); padding: clamp(64px, 8vw, 120px) 0; }
.cb::before { content: ""; position: absolute; z-index: -1; pointer-events: none; width: min(70vw, 900px); aspect-ratio: 1; left: -18%; top: 50%; transform: translateY(-50%); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(216,242,75,.16), rgba(216,242,75,0)); }
.cb__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(28px, 5vw, 96px); align-items: center; }
.cb .lab { color: var(--acid); }
.cb h2 { color: var(--bone); }
.cb .lede { color: rgba(242,239,232,.72); max-width: 44ch; margin-top: 14px; }
.cb__form { padding: clamp(20px, 2.6vw, 34px); border-radius: 22px; background: linear-gradient(165deg, #1F1F24, #121215 60%);
  box-shadow: inset 0 1px 0 rgba(242,239,232,.12), inset 0 0 0 1px rgba(216,242,75,.14), 0 40px 80px -40px rgba(0,0,0,.9); }
.cb__go { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 20px; }
.cb__go .note { margin: 0; flex: 1 1 220px; font-size: 0.88rem; color: var(--bone-60); }
.cb__go .note a { color: var(--bone); }
.cb .msg:empty { display: none; }
@media (max-width: 860px) { .cb__in { grid-template-columns: 1fr; } }

/* hero stat row (Rob, 2026-10-10: option A, but not as a boxed panel). Oversized numerals in an open
   row under a fine rule, hairlines between, mono labels under. Replaces the pill trust bar. */
.stats { list-style: none; margin: clamp(26px, 3.6vh, 40px) auto 0; padding: clamp(14px, 2vh, 20px) 0 0; display: grid; grid-template-columns: repeat(4, auto); justify-content: center;
  border-top: 1px solid rgba(242,239,232,.18); width: min(100%, 760px); pointer-events: auto; }
.stats li { display: grid; gap: 6px; justify-items: center; padding: 0 clamp(16px, 2.6vw, 40px); text-align: center; }
.stats li + li { border-left: 1px solid rgba(242,239,232,.14); }
.stats b { font-family: var(--display); font-weight: 500; font-size: clamp(1.9rem, 3.2vw, 3rem); line-height: .9; letter-spacing: -0.05em; color: var(--bone); }
.stats li:first-child b { color: var(--acid); }
.stats span { font-family: var(--mono); font-size: clamp(0.6rem, 0.7vw, 0.68rem); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(242,239,232,.62); white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
  .stage--ready .stats li { animation: ph-rise 700ms var(--ease-in) both; animation-delay: calc(520ms + var(--k) * 110ms); }
}
@media (max-width: 620px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 16px; width: 100%; }
  .stats li { padding: 0 10px; }
  .stats li:nth-child(3) { border-left: 0; }
  .stats span { white-space: normal; }
}
/* a soft ink wash behind the hero copy, so the stat labels read over the brighter tiles (static, no blur) */
.hero-over { isolation: isolate; }
.hero-over::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: min(1100px, 120%); height: 150%; transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(closest-side, rgba(10,10,12,.86), rgba(10,10,12,.62) 55%, rgba(10,10,12,0)); }
@media (max-width: 620px) { .hero-over::before { width: 150%; height: 130%; } }
@media (max-width: 620px) { .stats li + li { border-left: 0; } }

/* proof cards on the homepage: dark ground, with a link to the full work page under them */
.proofwork--ink { position: relative; isolation: isolate; overflow: hidden; }
.proofwork--ink::after { content: ""; position: absolute; z-index: -1; pointer-events: none; width: min(70vw, 1000px); aspect-ratio: 1; right: -22%; top: max(-300px, -20vw); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(216,242,75,.14), rgba(216,242,75,0)); }
.proofwork--ink > .wrap { max-width: 1760px; padding-left: clamp(18px, 3.4vw, 64px); padding-right: clamp(18px, 3.4vw, 64px); }
.proofwork--ink h2 { color: var(--bone); }
.proofwork--ink .pw { background: linear-gradient(165deg, #222228, #141417 60%); box-shadow: inset 0 1px 0 rgba(242,239,232,.14), inset 0 0 0 1px rgba(242,239,232,.07), 0 40px 80px -40px rgba(0,0,0,.9); }
.pw__all { display: flex; justify-content: center; margin-top: clamp(28px, 3.4vw, 48px); }

/* work page cards at every size (Rob, 2026-10-10: "close together", text overlapping). Each site is a tile:
   screenshot, then the name with the trade under it. Volume tags are gone from the site. */
.grid--port { column-gap: clamp(18px, 2vw, 32px); row-gap: clamp(26px, 3vw, 44px); }
.grid--port .card { padding: 8px 8px 18px; border-radius: 16px; background: var(--ink-2); box-shadow: inset 0 0 0 1px rgba(242,239,232,.08); }
.grid--port .card__frame { border-radius: 10px; }
.grid--port .card__meta { display: grid; gap: 4px; padding: 14px 8px 0; flex-wrap: initial; }
.grid--port .card__name { white-space: normal; font-size: clamp(1.15rem, 1.4vw, 1.4rem); }
.grid--port .card__kind { flex: initial; text-align: left; white-space: normal; overflow: visible; justify-self: start; margin: 0; }
/* the hero sentence explains the headline now, so it runs longer: wider measure, a touch lighter */
.hero-over .h1__sub { max-width: 54ch; font-weight: 400; font-size: clamp(1rem, 1.35vw, 1.2rem); color: rgba(242,239,232,.86); }
/* stat row: hidden from the first paint until the hero is ready, then it rises once. Before this it painted,
   vanished when the rise began and came back (Rob, 2026-10-10, on phones). Same pattern as .up: no-js and
   reduced motion never hide it. */
@media (prefers-reduced-motion: no-preference) {
  html:not(.no-js) .stats li { opacity: 0; }
  html:not(.no-js) .stage--ready .stats li { opacity: 1; }
}
/* phones up to 420px: the header row (logo, phone, CTA, menu) needed 393px on a 390px screen, and a fixed
   header that wide lets the page slide sideways (Rob, 2026-10-10). Tighter gaps and a smaller CTA keep it inside;
   the body clips any stray pixels sideways (clip, not hidden, so sticky and scroll-driven pieces keep working). */
@media (max-width: 420px) {
  .hdr { gap: 8px; padding-left: 16px; padding-right: 16px; }
  .hdr__tel { width: 38px; height: 38px; }
  .hdr__cta { padding: 10px 12px; font-size: 0.64rem; letter-spacing: 0.06em; }
}
html, body { overflow-x: clip; }

/* Landing page hero: the entrance runs in CSS from the first paint instead of waiting for main.js to add
   .is-in (Rob, 2026-10-14: the hero label was the LCP and sat at opacity 0 for 2 to 4s on a slow phone,
   mobile Lighthouse ~71). Same staggered rise, 200ms apart; reduced motion shows it all at once. */
.lp #heroOver .up, .lp #h1 .h1__sub { opacity: 1; transform: none; transition: none; }
@media (prefers-reduced-motion: no-preference) {
  .lp #heroA { animation: ph-rise 700ms var(--ease-in) both; }
  .lp #h1 { --d: 60px; animation: ph-rise 900ms var(--ease-in) 200ms both; }
  .lp #h1 .h1__sub { animation: ph-rise 800ms var(--ease-in) 400ms both; }
  .lp #heroOver .hero__act { animation: ph-rise 800ms var(--ease-in) 600ms both; }
}