/* samdodsworth.com v2: gallery grammar, the focal line.
   Every object is authored at its native size and only ever scales DOWN from it, so text and
   vector stay sharp at every frame. Never add will-change: transform to a scaling object: it
   freezes the raster at whatever scale it was first painted and the grow-back goes soft.
   Colours are tokens; tune-boot.js sets them for day or night. */

:root {
  --sc-canvas:     #f3f2ee;
  --sc-surface:    #fbfaf7;
  --sc-ink:        #15141c;
  --sc-ink-soft:   #6a6779;
  --sc-accent:     #2a22c9;
  --sc-accent-ink: #f6f5ff;
  --sc-font-display: "Inter Tight", system-ui, sans-serif;
  --sc-font-text:    "Inter Tight", system-ui, sans-serif;
  --sc-font-mono:    "Geist Mono", ui-monospace, monospace;

  --dark:      #0e0d16;
  --dark-ink:  #eeedf4;
  --dark-soft: #9895ab;
  --paper-2:   #ebe9e3;
  --bar-h: 64px;
  /* spacing scale: every room uses these, nothing else */
  --pad-x: clamp(16px, 5vw, 72px);
  --pad-top: calc(var(--bar-h) + clamp(24px, 4vh, 40px));
  --pad-y: clamp(96px, 14vh, 160px);
  --gap-title: clamp(28px, 5vh, 56px);
  --gap-item: clamp(16px, 2vw, 28px);
  --shadow: rgba(21, 20, 28, 0.35);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}
:root[data-ground="night"] { --shadow: rgba(0, 0, 0, 0.6); --dark: #07060c; }

body { background: var(--sc-canvas); color: var(--sc-ink); font-family: var(--sc-font-text); transition: background-color 300ms, color 300ms; }
:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; border-radius: 4px; }

/* ---------------------------------------------------------------- bar -- */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; gap: 24px;
  height: var(--bar-h); padding: 0 clamp(16px, 3vw, 32px);
  color: var(--sc-ink); transition: color 240ms var(--ease-out);
}
.bar.is-dark { color: var(--dark-ink); }
.bar__mark { display: block; width: 38px; height: 34px; color: var(--sc-accent); }
.bar.is-dark .bar__mark { color: var(--dark-ink); }
.bar__mark svg { width: 100%; height: 100%; display: block; }
.bar__cta { margin-left: 16px; }
/* Melbourne, live: local time with a sun by day and a moon by night */
.bar__clock { display: flex; align-items: center; gap: 8px; margin: 0; font: 400 var(--sc-t-xs)/1 var(--sc-font-mono); white-space: nowrap; }
.bar__clock i { width: 8px; height: 8px; border-radius: 50%; background: var(--sc-accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--sc-accent) 18%, transparent); transition: background-color 400ms, box-shadow 400ms; }
.bar__clock[data-night] i { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
.bar__clock time { font-variant-numeric: tabular-nums; }
.bar.is-dark .bar__clock i { background: var(--dark-ink); }
.bar.is-dark .bar__clock[data-night] i { background: transparent; }
@media (max-width: 760px) { .bar__clock, .index__now { display: none; } .bar__cta { margin-left: 12px; } }

.index { display: flex; align-items: center; gap: 16px; min-width: 0; }
.index ol { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.index li.is-gap { width: 10px; }
.index a { display: grid; place-items: center; width: 14px; height: 28px; }
.index a i { display: block; width: 8px; height: 2px; border-radius: 1px; background: currentColor; opacity: 0.3; transition: transform 220ms var(--ease-out), opacity 220ms, background-color 220ms; }
.index a:hover i { opacity: 0.7; }
.index a.is-on i { transform: scaleX(2.2); opacity: 1; background: var(--sc-accent); }
.bar.is-dark .index a.is-on i { background: var(--dark-ink); }
.index__now, [data-rung] { transition: opacity 200ms var(--ease-out), filter 200ms var(--ease-out); }
.index__now { font: 500 var(--sc-t-xs)/1 var(--sc-font-mono); letter-spacing: 0.04em; white-space: nowrap; }
.index__now.is-swap, [data-rung].is-swap { opacity: 0; filter: blur(3px); }
@media (max-width: 760px) { .index ol { display: none; } }

/* ------------------------------------------------------------ the line -- */
.focal { position: fixed; inset: 0; z-index: 40; pointer-events: none; color: var(--sc-ink-soft); }
.focal i { position: absolute; background: currentColor; opacity: 0.55; transition: opacity 220ms var(--ease-out); }
body.is-axis-swap .focal i { opacity: 0; }
.focal i:first-child { left: 0; top: 50%; width: 20px; height: 1px; }
.focal i:last-child { right: 0; top: 50%; width: 20px; height: 1px; }
body[data-axis="x"] .focal i:first-child { left: 50%; top: var(--bar-h); width: 1px; height: 20px; }
body[data-axis="x"] .focal i:last-child { left: 50%; right: auto; top: auto; bottom: 0; width: 1px; height: 20px; }
body[data-tone="dark"] .focal { color: var(--dark-soft); }

/* ------------------------------------------------------------- object -- */
.obj { --f: 1; --fmin: 0.6; color: inherit; }
.obj[data-focal] { transform: scale(calc(var(--fmin) + (1 - var(--fmin)) * var(--f))); opacity: calc(0.3 + 0.7 * var(--f)); }
.obj__name { margin: 0; font: 500 var(--sc-t-2xl)/1 var(--sc-font-display); letter-spacing: -0.035em; text-wrap: balance; }
.obj__art svg { display: block; width: 100%; height: auto; }
.obj__line { margin: 14px 0 0; max-width: 34ch; font-size: var(--sc-t-lg); line-height: 1.4; color: var(--sc-ink-soft); }

/* Word rise: each word sits in a mask and rises in turn when its object takes focus. */
/* No mask: words fade up out of a soft blur, so nothing is ever cut off mid-glyph. */
[data-words] .w { display: inline-block; }
[data-words] .w > span { display: inline-block; opacity: 0; filter: blur(6px); transform: translateY(0.35em); transition: opacity 900ms var(--ease-out), filter 900ms var(--ease-out), transform 900ms var(--ease-out); transition-delay: calc(var(--i) * 40ms); }
.is-focus [data-words] .w > span, .was-focus [data-words] .w > span, .rail__head [data-words] .w > span, .rail__note .w > span { opacity: 1; filter: none; transform: none; }

/* Motion iconography: strokes draw in on focus, then one small geometric loop per icon. */
.obj__art .d { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1400ms var(--ease-out); }
.is-focus .obj__art .d, .was-focus .obj__art .d { stroke-dashoffset: 0; }
/* Before an object has had focus, its drawing waits as a faint full stroke, not an empty box. */
.obj__art .d { stroke-opacity: 0.3; } .was-focus .obj__art .d, .is-focus .obj__art .d { stroke-opacity: 1; }
.obj__art g[class^="m-"] { transform-box: fill-box; transform-origin: center; animation-play-state: paused; }
.is-focus .obj__art g[class^="m-"] { animation-play-state: running; }
.m-rise { animation: m-rise 2.4s var(--ease-out) infinite alternate; }
@keyframes m-rise { from { transform: translateY(0); } to { transform: translateY(70px); } }
.m-spin { transform-box: view-box !important; transform-origin: 110px 100px !important; animation: m-spin 6s linear infinite; }
@keyframes m-spin { to { transform: rotate(360deg); } }
.m-pulse { animation: m-pulse 2.8s ease-in-out infinite; }
@keyframes m-pulse { 50% { opacity: 0.45; } }
.m-bars { transform-origin: 50% 100% !important; animation: m-bars 3s var(--ease-out) infinite alternate; }
@keyframes m-bars { from { transform: scaleY(0.55); } to { transform: scaleY(1); } }
.m-fall { animation: m-fall 2.2s ease-in infinite; }
@keyframes m-fall { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateY(120px); opacity: 0; } }
.m-travel { animation: m-travel 3.6s ease-in-out infinite; }
@keyframes m-travel { 0% { transform: translateX(0); } 50% { transform: translateX(200px); } 100% { transform: translateX(0); } }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 22px; border-radius: 999px;
  border: 1px solid var(--sc-hairline-strong); background: none; color: inherit; text-decoration: none;
  font: 500 var(--sc-t-sm)/1 var(--sc-font-text); white-space: nowrap; cursor: pointer;
  transition: background-color 280ms var(--ease-out), color 280ms var(--ease-out), border-color 280ms var(--ease-out), transform 460ms var(--spring);
}
.btn--accent { background: var(--sc-accent); color: var(--sc-accent-ink); border-color: var(--sc-accent); }
.bar .btn { min-height: 40px; }
.bar.is-dark .btn--accent { background: var(--dark-ink); color: var(--dark); border-color: var(--dark-ink); }

.room__title { margin: 0; font: 500 var(--sc-t-3xl)/1.02 var(--sc-font-display); letter-spacing: -0.035em; }
.room__title span { color: var(--sc-ink-soft); }
.room__lede { margin: 18px 0 0; max-width: 34ch; font-size: var(--sc-t-lg); line-height: 1.45; color: var(--sc-ink-soft); }

/* ------------------------------------------------------- 1 object one -- */
.room--one { min-height: 100svh; display: grid; place-items: center; padding: var(--bar-h) var(--pad-x) 0; }
.obj--hero { --fmin: 0.74; display: grid; grid-template-columns: clamp(120px, 20vw, 280px) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; max-width: 72rem; width: 100%; }
.obj__art--mark { color: var(--sc-accent); }
.obj--hero .obj__name { font-size: clamp(3rem, 8.2vw, 7.6rem); letter-spacing: -0.045em; }
.obj--hero .obj__line { font-size: clamp(1.25rem, 2vw, 1.75rem); color: var(--sc-ink); max-width: 26ch; }
.obj__actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 32px 0 0; }
@media (max-width: 760px) {
  .obj--hero { grid-template-columns: 1fr; gap: 20px; }
  .obj--hero .obj__art--mark { display: none; }
  .obj__actions .btn { flex: 1 1 100%; }
}

/* ------------------------------------------------------- 2 what i do -- */
.room--dark { color: var(--dark-ink); --sc-ink-soft: var(--dark-soft); --sc-hairline: rgba(238, 237, 244, 0.14); --sc-hairline-strong: rgba(238, 237, 244, 0.28); }
.room--dark [data-sc-stage] { background: var(--dark); }
.rail { display: flex; align-items: center; gap: clamp(24px, 4vw, 64px); height: 100%; width: max-content; padding: var(--bar-h) calc(50vw - clamp(17rem, 30vw, 27rem) / 2) 0 clamp(16px, 6vw, 96px); }
.rail__head { flex: none; width: clamp(16rem, 30vw, 26rem); }
.rail__note { flex: none; width: clamp(14rem, 22vw, 20rem); margin: 0; font-size: var(--sc-t-lg); line-height: 1.45; color: var(--dark-soft); }
.obj--part { --fmin: 0.62; flex: none; width: clamp(17rem, 30vw, 27rem); }
.obj--part .obj__art { color: var(--dark-ink); padding: 18px; border: 1px solid var(--sc-hairline); border-radius: 16px; margin-bottom: 22px; background: rgba(238, 237, 244, 0.03); }

/* ----------------------------------------------------------- 4 ladder -- */
.obj--offer {
  width: min(88vw, 40rem);
  padding: clamp(22px, 3vw, 36px) clamp(22px, 3vw, 40px);
  background: var(--sc-surface); border: 1px solid var(--sc-hairline); border-radius: 22px;
  box-shadow: 0 30px 60px -36px var(--shadow);
  transform-origin: 50% 50%;
}
.offer__rung { margin: 0 0 14px; font: 400 var(--sc-t-xs)/1 var(--sc-font-mono); color: var(--sc-ink-soft); }
.obj--offer .obj__name { font-size: clamp(2rem, 4vw, 3.2rem); }
.offer__price { margin: 10px 0 0; font: 500 clamp(2.6rem, 6vw, 4.8rem)/1 var(--sc-font-display); letter-spacing: -0.04em; color: var(--sc-accent); font-variant-numeric: tabular-nums; }
.offer__price small { font-size: 0.32em; letter-spacing: 0; color: var(--sc-ink-soft); margin: 0 0.3em; }

/* A · rail on paper */
.lad-rail-stage { background: var(--sc-canvas); }
.rail--light .rail__head .room__lede { color: var(--sc-ink-soft); }
.rail--light .obj--offer { --fmin: 0.6; flex: none; width: clamp(18rem, 32vw, 30rem); }

/* B and C · decks laid out by site.js */
.lad-stage { background: var(--sc-canvas); }
.lad-head { position: absolute; z-index: 2; top: var(--pad-top); left: var(--pad-x); }
.lad-head .room__title { font-size: var(--sc-t-2xl); }
.lad-rung { margin: 14px 0 0; font: 400 var(--sc-t-xs)/1.4 var(--sc-font-mono); color: var(--sc-ink-soft); }
.lad-rung span { color: var(--sc-accent); }
.deck { position: absolute; left: 50%; top: 56%; width: 0; height: 0; }
.deck .obj--offer { position: absolute; left: 0; top: 0; opacity: calc(0.2 + 0.8 * var(--f)); }
.deck--x { top: 58%; }
.deck--x .obj--offer { width: min(78vw, 34rem); }
.ladder-b .lad-stage::before, .ladder-b .lad-stage::after { content: ""; position: absolute; z-index: 1; left: 0; right: 0; pointer-events: none; }
.ladder-b .lad-stage::before { top: 0; height: 32%; background: linear-gradient(var(--sc-canvas) 60%, transparent); }
.ladder-b .lad-stage::after { bottom: 0; height: 14%; background: linear-gradient(transparent, var(--sc-canvas)); }
@media (max-width: 760px) { .deck { top: 60%; } .deck--x .obj--offer { width: 80vw; } }

/* D · board: all nine in view, the focus walks across */
.board-stage { display: grid; grid-template-rows: auto 1fr; gap: clamp(16px, 3vh, 32px); padding: var(--pad-top) var(--pad-x) var(--gap-title); }
.board__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; }
.board__head .room__title { font-size: var(--sc-t-2xl); }
.board__head .lad-rung { margin: 0; }
.board { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: clamp(12px, 1.6vw, 24px); align-content: center; min-height: 0; }
.board__col { display: grid; align-content: start; gap: clamp(10px, 1.4vh, 16px); min-width: 0; }
.board__rung { margin: 0 0 2px; font: 400 var(--sc-t-xs)/1 var(--sc-font-mono); color: var(--sc-accent); }
.board .obj--offer {
  width: auto; padding: clamp(14px, 1.8vh, 22px) clamp(14px, 1.4vw, 22px); border-radius: 16px;
  transform: scale(calc(0.92 + 0.08 * var(--f))); opacity: calc(0.62 + 0.38 * var(--f));
  box-shadow: 0 24px 48px -32px rgba(21, 20, 28, calc(0.1 + 0.4 * var(--f)));
  border-color: color-mix(in oklab, var(--sc-accent) calc(var(--f) * 60%), var(--sc-hairline));
  transition: border-color 200ms;
}
.board .offer__rung { display: none; }
.board .obj--offer .obj__name { font-size: clamp(1.15rem, 1.7vw, 1.6rem); }
.board .offer__price { margin-top: 6px; font-size: clamp(1.5rem, 2.6vw, 2.4rem); }
.board .obj__line { margin-top: 8px; font-size: var(--sc-t-sm); line-height: 1.4; }
@media (max-width: 900px) {
  .board { grid-template-columns: 1fr 1fr; align-content: start; }
  /* Phones: names and prices only, on every card, so heights never shift as focus moves. */
  .board .obj__line { display: none; }
}

/* ---------------------------------------------------- 3 the numbers -- */
.room--numbers { background: var(--sc-canvas); }
.room--numbers .sc-wrap { padding-block: var(--pad-y); }
.numbers { --fmin: 0.8; display: grid; gap: var(--gap-title); }
.numbers__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-title) var(--gap-item); }
.num { position: relative; display: grid; gap: 12px; align-content: start; padding-top: clamp(20px, 3vh, 32px); min-width: 0; }
/* each figure sits on a hairline that fills with the accent as the count runs */
.num::before, .num::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--sc-hairline-strong); }
.num::after { height: 2px; top: -0.5px; background: var(--sc-accent); transform: scaleX(0); transform-origin: left; transition: transform 1600ms var(--ease-out); }
.numbers__row.sc-in .num::after { transform: none; }
.num:nth-child(2)::after { transition-delay: 120ms; } .num:nth-child(3)::after { transition-delay: 240ms; } .num:nth-child(4)::after { transition-delay: 360ms; }
.num__v { font: 500 clamp(3rem, 5.6vw, 6rem)/0.9 var(--sc-font-display); letter-spacing: -0.055em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.num__l { font: 400 var(--sc-t-xs)/1 var(--sc-font-mono); color: var(--sc-ink-soft); }
@media (max-width: 760px) { .numbers__row { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; } }

/* ---------------------------------------------------- 5 terms, record -- */
.room--terms { background: var(--sc-canvas); }
.terms { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.rules { margin: 0; padding: 0; list-style: none; }
.rules li { padding: 20px 0; border-top: 1px solid var(--sc-hairline-strong); font-size: var(--sc-t-lg); line-height: 1.5; color: var(--sc-ink-soft); }
.rules b { color: var(--sc-ink); font-weight: 500; }
.record { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px); margin-top: clamp(40px, 6vw, 80px); }
.record__title { margin: 0 0 18px; font: 400 var(--sc-t-xs)/1 var(--sc-font-mono); color: var(--sc-ink-soft); }
.record__cells { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--sc-hairline-strong); }
.record__cell { padding: 20px 20px 4px 0; }
.record__cell + .record__cell { padding-left: 20px; border-left: 1px solid var(--sc-hairline); }
.record__cell h4 { margin: 0; font: 500 var(--sc-t-lg)/1.2 var(--sc-font-display); letter-spacing: -0.015em; }
.stack { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 20px 0 0; list-style: none; border-top: 1px solid var(--sc-hairline-strong); }
.stack li { padding: 8px 14px; border: 1px solid var(--sc-hairline-strong); border-radius: 999px; font-size: var(--sc-t-sm); }
@media (max-width: 760px) {
  .terms, .record, .record__cells { grid-template-columns: minmax(0, 1fr); }
  .record__cell + .record__cell { padding-left: 0; border-left: 0; border-top: 1px solid var(--sc-hairline); }
}

/* ---------------------------------------------------------- 6 the wall -- */
.wall { background: var(--paper-2); overflow: hidden; }
.wall__grid {
  position: absolute; left: 0; top: 0;
  display: grid; grid-template-columns: repeat(7, clamp(13rem, 19vw, 18rem)); gap: clamp(20px, 2.4vw, 36px);
  padding: 26vh 14vw;
  /* corner to corner: the travel is the grid's own overhang, so more tiles means a longer journey */
  transform: translate(calc(var(--sc-p, 0) * (100vw - 100%)), calc(var(--sc-p, 0) * (100vh - 100%)));
}
.tile { --fmin: 0.6; padding: 18px 18px 20px; background: var(--sc-surface); border: 1px solid var(--sc-hairline); border-radius: 18px; transform-origin: center; }
.tile svg { display: block; width: 100%; height: auto; color: var(--sc-accent); margin-bottom: 12px; }
.tile .obj__name { font-size: var(--sc-t-lg); }
.tile__kind { margin: 6px 0 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.tile__price { margin: 8px 0 0; font: 500 var(--sc-t-2xl)/1 var(--sc-font-display); letter-spacing: -0.035em; color: var(--sc-accent); }
.tile--mark { display: grid; place-items: center; color: var(--sc-accent); }
.tile--stat, .tile--pain, .tile--gain { display: grid; align-content: space-between; gap: 18px; }
.tile__fig { margin: 0; font: 500 clamp(2.6rem, 4.4vw, 4.2rem)/1 var(--sc-font-display); letter-spacing: -0.045em; color: var(--sc-accent); font-variant-numeric: tabular-nums; }
.tile--stat .tile__kind { font-size: var(--sc-t-base); color: var(--sc-ink); }
.tile__tag { margin: 0; font: 400 var(--sc-t-xs)/1 var(--sc-font-mono); color: var(--sc-ink-soft); }
.tile__say { margin: 0; font: 500 var(--sc-t-lg)/1.2 var(--sc-font-display); letter-spacing: -0.015em; text-wrap: balance; }
.tile--pain { background: transparent; border-style: dashed; border-color: var(--sc-hairline-strong); }
.tile--pain .tile__say { color: var(--sc-ink-soft); }
.tile--gain { border-color: color-mix(in oklab, var(--sc-accent) 40%, var(--sc-hairline)); }
.tile--gain .tile__tag { color: var(--sc-accent); }
/* Animated squares: one small geometric loop per icon. */
.tile svg [class^="a-"] { transform-box: fill-box; transform-origin: center; }
.a-grow { transform-origin: left center !important; animation: a-grow 3.2s var(--ease-out) infinite alternate; }
@keyframes a-grow { from { transform: scaleX(0.35); } }
.a-blink { animation: m-pulse 1.6s ease-in-out infinite; }
.a-orbit { animation: m-spin 16s linear infinite; }
.a-bar { transform-origin: 50% 100% !important; animation: m-bars 2.4s var(--ease-out) infinite alternate; }
.a-drop, .p-drop { animation: a-drop 2.4s ease-in infinite; }
@keyframes a-drop {
  0% { transform: translate(0, 0); opacity: 0; }
  15% { opacity: 1; }
  50% { transform: translate(var(--dx), var(--dy-mid)); }
  85% { opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)); opacity: 0; }
}
.a-run { animation: a-run 3.6s ease-in-out infinite alternate; }
@keyframes a-run { to { transform: translateX(116px); } }
.a-run--short { animation-name: a-run-short; }
@keyframes a-run-short { to { transform: translateX(40px); } }
.a-flap { transform-origin: 50% 0 !important; animation: a-flap 2.8s ease-in-out infinite alternate; }
@keyframes a-flap { from { transform: scaleY(0.25); } }
.a-spin { animation: m-spin 9s linear infinite; }
.a-spin-r { animation: m-spin 6s linear infinite reverse; }
.a-dot { animation: a-dot 1.4s ease-in-out infinite; }
@keyframes a-dot { 0%, 60%, 100% { transform: translateY(0); opacity: 0.35; } 30% { transform: translateY(-6px); opacity: 1; } }
.a-scan { animation: a-scan 3.4s ease-in-out infinite alternate; }
@keyframes a-scan { to { transform: translate(64px, 18px); } }
.tile--mark svg { width: 60%; margin: 0; }

/* -------------------------------------------------------- 7 contact -- */
.room--contact { min-height: 100svh; display: grid; grid-template-rows: 1fr auto; padding: var(--pad-top) var(--pad-x) var(--gap-item); }
.contact { width: min(100%, 60rem); margin-inline: auto; display: grid; gap: var(--gap-title); align-content: center; }
.pipe { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; padding: 0; list-style: none; position: relative; }
.pipe::before { content: ""; position: absolute; left: 16.6%; right: 16.6%; top: 14px; height: 1px; background: var(--sc-hairline-strong); }
.pipe__node { position: relative; z-index: 1; display: grid; justify-items: center; gap: 12px; text-align: center; cursor: default; }
.pipe__dot {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--sc-canvas); border: 1px solid var(--sc-hairline-strong);
  transform: scale(0.55); transition: transform 500ms var(--ease-out), background-color 300ms, border-color 300ms;
}
.pipe__name { font: 400 var(--sc-t-xs)/1.2 var(--sc-font-mono); color: var(--sc-ink-soft); transition: color 300ms, transform 500ms var(--ease-out); transform: scale(0.92); }
.pipe__node.is-done { cursor: pointer; }
.pipe__node.is-done .pipe__dot { background: var(--sc-accent); border-color: var(--sc-accent); }
.pipe__node.is-on .pipe__dot { transform: none; background: var(--sc-accent); border-color: var(--sc-accent); box-shadow: 0 0 0 6px color-mix(in oklab, var(--sc-accent) 18%, transparent); }
.pipe__node.is-on .pipe__name { color: var(--sc-ink); transform: none; }
.contact__card { padding: clamp(22px, 4vw, 44px); background: var(--sc-surface); border: 1px solid var(--sc-hairline); border-radius: 26px; box-shadow: 0 40px 80px -50px var(--shadow); }
.step { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: 22px; animation: step-in 640ms var(--ease-out); transition: opacity 380ms var(--ease-out), transform 380ms var(--ease-out), filter 380ms var(--ease-out); }
.step.is-leaving { opacity: 0; transform: translateY(-6px); filter: blur(3px); }
.step[hidden] { display: none; }
@keyframes step-in { from { opacity: 0; transform: translateY(10px); filter: blur(4px); } }
.step__q { padding: 0; margin-bottom: clamp(20px, 3.4vh, 32px); font: 500 var(--sc-t-2xl)/1.05 var(--sc-font-display); letter-spacing: -0.03em; }
.choices { display: flex; flex-wrap: wrap; gap: 10px; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choice span { display: inline-flex; align-items: center; min-height: 46px; padding: 0 18px; border: 1px solid var(--sc-hairline-strong); border-radius: 999px; font-size: var(--sc-t-base); cursor: pointer; transition: background-color 320ms var(--ease-out), color 320ms var(--ease-out), border-color 320ms var(--ease-out), transform 320ms var(--ease-out), box-shadow 320ms var(--ease-out); }
@media (hover: hover) { .choice:hover span { transform: translateY(-2px); border-color: var(--sc-accent); box-shadow: 0 14px 28px -20px var(--shadow); } }
.choice--svc span { flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px; min-height: 58px; padding: 0 22px; border-radius: 18px; }
.choice--svc small { font: 400 var(--sc-t-xs)/1 var(--sc-font-mono); color: var(--sc-ink-soft); transition: color 160ms; }
.choice--svc input:checked + span small { color: inherit; opacity: 0.8; }
.choice input:checked + span { background: var(--sc-accent); color: var(--sc-accent-ink); border-color: var(--sc-accent); }
.choice input:focus-visible + span { outline: 2px solid var(--sc-accent); outline-offset: 3px; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: grid; gap: 8px; min-width: 0; }
.field--wide { grid-column: 1 / -1; }
.field > span { font: 400 var(--sc-t-xs)/1 var(--sc-font-mono); color: var(--sc-ink-soft); }
.field small { opacity: 0.7; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 12px 14px; border-radius: 12px;
  border: 1px solid var(--sc-hairline-strong); background: var(--sc-canvas); color: var(--sc-ink);
  font: 400 var(--sc-t-base)/1.4 var(--sc-font-text);
}
.field textarea { resize: vertical; }
.step__err { margin: 0; color: #b4231c; font-size: var(--sc-t-sm); }
:root[data-ground="night"] .step__err { color: #ff8a80; }
.step__nav { display: flex; flex-wrap: wrap; gap: 10px; }
.step__nav .btn--accent { margin-left: auto; }
.step__hint { margin: 0; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); line-height: 1.5; }
.summary { display: grid; gap: 0; margin: 0; }
.summary > div { display: grid; grid-template-columns: 7rem 1fr; gap: 16px; padding: 10px 0; border-top: 1px solid var(--sc-hairline); }
.summary dt { font: 400 var(--sc-t-xs)/1.5 var(--sc-font-mono); color: var(--sc-ink-soft); }
.summary dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 760px) { .fields { grid-template-columns: 1fr; } .step__nav .btn { flex: 1 1 auto; } .step__nav .btn--accent { margin-left: 0; } }

.foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; padding-top: 40px; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.foot a { color: inherit; text-decoration: none; }
.foot a:hover { color: var(--sc-ink); }

/* -------------------------------------------------------- colour panel -- */

/* -------------------------------------------------------- reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  .obj[data-focal] { transform: none; opacity: 1; }
  [data-words] .w > span { transform: none; transition: none; }
  .obj__art .d { stroke-dashoffset: 0; transition: none; }
  .num::after { transform: none; transition: none; }
  .obj__art g[class^="m-"] { animation: none; }
  .board .obj--offer { transform: none; opacity: 1; }
  .deck--static { position: static; width: auto; height: auto; display: grid; gap: 20px; padding: 200px var(--pad-x) 60px; overflow: auto; max-height: 100vh; }
  .deck--static .obj--offer { position: relative; transform: none !important; opacity: 1; width: auto; max-width: 40rem; }
  .wall__grid { position: relative; transform: none; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); padding: var(--pad-top) var(--pad-x) var(--pad-y); }
  .pipe__dot, .pipe__name, .step { transition: none; animation: none; }
}

/* -------------------------------------------------------- the smoothness rule --
   Nothing on this site changes in a single frame and nothing is hard-cropped.
   Rails and the wall fade at the viewport edges instead of cutting content off. */
.room--dark [data-sc-stage]::before, .room--dark [data-sc-stage]::after,
.lad-rail-stage::before, .lad-rail-stage::after {
  content: ""; position: absolute; z-index: 2; top: 0; bottom: 0; width: 8vw; pointer-events: none;
}
.room--dark [data-sc-stage]::before { left: 0; background: linear-gradient(90deg, var(--dark), transparent); }
.room--dark [data-sc-stage]::after { right: 0; background: linear-gradient(-90deg, var(--dark), transparent); }
.lad-rail-stage::before { left: 0; background: linear-gradient(90deg, var(--sc-canvas), transparent); }
.lad-rail-stage::after { right: 0; background: linear-gradient(-90deg, var(--sc-canvas), transparent); }
/* On the board every description stays readable; focus brings it to full strength. */
.board [data-words] .w > span { opacity: 1; filter: none; transform: none; }
.board .obj__line { opacity: calc(0.55 + 0.45 * var(--f)); }
.wall {
  -webkit-mask-image: radial-gradient(130% 120% at 50% 50%, #000 62%, transparent 100%);
          mask-image: radial-gradient(130% 120% at 50% 50%, #000 62%, transparent 100%);
}
.choice span, .field input, .field select, .field textarea, .stack li, .foot a, .index a i {
  transition: background-color 280ms var(--ease-out), color 280ms var(--ease-out), border-color 280ms var(--ease-out), box-shadow 280ms var(--ease-out), transform 220ms var(--ease-out), opacity 280ms var(--ease-out);
}
.is-retheming, .is-retheming *, .is-retheming *::before, .is-retheming *::after {
  transition-property: background-color, color, border-color, fill, stroke, box-shadow, opacity, transform, filter !important;
  transition-duration: 450ms !important;
  transition-timing-function: var(--ease-out) !important;
}
@media (prefers-reduced-motion: reduce) {
  [data-words] .w > span { opacity: 1; filter: none; }
  .step.is-leaving { opacity: 1; transform: none; filter: none; }
}

/* Lenis owns the scroll: the engine's html { scroll-behavior: smooth } would animate each of its frames again. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* ------------------------------------------------------------ hero verbs -- */
.obj__line--verbs { font-family: var(--sc-font-display); letter-spacing: -0.02em; }

/* ------------------------------------------------------------- passions -- */
.passions { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--gap-item); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--sc-hairline-strong); }
.passions li { display: flex; align-items: center; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--sc-hairline); font: 500 var(--sc-t-lg)/1.25 var(--sc-font-display); letter-spacing: -0.015em; }
.passions svg { flex: none; width: 32px; height: 32px; color: var(--sc-accent); }
.p-ring { transform-box: fill-box; transform-origin: center; animation: m-spin 12s linear infinite; }
.p-beat { transform-box: fill-box; transform-origin: center; animation: p-beat 2.8s ease-in-out infinite; }
@keyframes p-beat { 50% { transform: scale(0.6); opacity: 0.55; } }
.p-drop { --dx: 7px; --dy-mid: 15px; --dy: 31px; }
.p-drop--b { --dx: -7px; animation-delay: -1.2s; }
.p-travel { animation: p-travel 3.4s ease-in-out infinite; }
@keyframes p-travel { 50% { transform: translateX(12px); } }
.p-spin { transform-origin: 20px 20px; animation: m-spin 7s linear infinite; }
@media (max-width: 760px) { .passions { grid-template-columns: 1fr; } }

/* ------------------------------------------------- E · the services wall -- */
.build-stage { display: grid; grid-template-rows: auto 1fr; gap: var(--gap-title); padding: var(--pad-top) var(--pad-x) var(--gap-title); }
.build__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px var(--gap-item); }
.build__head .room__title { font-size: var(--sc-t-2xl); }
.build__head .lad-rung { margin: 0; }
.build { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-item); min-height: 0; }
.build__col { display: grid; grid-template-rows: minmax(0, 0.5fr) minmax(0, 3.7fr) minmax(0, 0.9fr); gap: var(--gap-item); min-height: 0; }
/* Categories read as one line, a label for the tall service card under them. */
.build .piece--cat { display: flex; flex-wrap: wrap; align-items: baseline; align-content: center; gap: 0 12px; }
.build .piece--cat .offer__rung { margin: 0; }
.build .piece--cat p:last-child { margin: 0; }
.slot { position: relative; min-height: 0; border: 1px dashed var(--sc-hairline-strong); border-radius: 16px; }
.piece {
  --a: 1; --f: 0;
  position: absolute; inset: 0; width: auto; overflow: hidden;
  display: grid; align-content: start; gap: 4px;
  padding: clamp(12px, 1.6vh, 20px) clamp(14px, 1.4vw, 20px);
  background: var(--sc-surface); border: 1px dashed color-mix(in oklab, var(--sc-accent) calc(var(--f) * 70%), var(--sc-hairline-strong));
  border-radius: 16px; color: var(--sc-ink); text-decoration: none;
  box-shadow: 0 24px 48px -34px rgba(21, 20, 28, calc(0.15 + 0.35 * var(--f)));
  /* travels in from the right like the rail, landing at native size: scale only ever rises to 1 */
  transform: translate(calc((1 - var(--a)) * 62vw), calc((1 - var(--a)) * 3vh)) scale(calc(0.62 + 0.38 * var(--a)));
  opacity: var(--a);
}
.piece .offer__rung { margin: 0 0 6px; }
.piece .obj__name, .piece h3 { margin: 0; font: 500 clamp(1rem, 1.5vw, 1.4rem)/1.1 var(--sc-font-display); letter-spacing: -0.02em; }
.piece .offer__price { margin-top: 4px; font-size: clamp(1.4rem, 2.4vw, 2.2rem); }
.piece .obj__line { margin-top: 6px; font-size: var(--sc-t-xs); line-height: 1.4; max-width: none; }
.piece [data-words] .w > span { opacity: 1; filter: none; transform: none; }
.piece--cat { background: var(--sc-canvas); }
.piece--cat h3 { font-size: clamp(1.3rem, 2vw, 1.9rem); }
.piece--cat p:last-child { margin: 6px 0 0; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.piece--cta { align-content: space-between; background: var(--sc-accent); color: var(--sc-accent-ink); border-color: var(--sc-accent); font: 500 var(--sc-t-lg)/1.1 var(--sc-font-display); }
.piece--cta svg { width: 26px; height: 26px; justify-self: end; }
.piece--note { align-content: end; background: transparent; box-shadow: none; }
.piece--unsure { align-content: space-between; background: var(--sc-canvas); font-size: var(--sc-t-sm); line-height: 1.4; color: var(--sc-ink-soft); }
.piece--unsure b { display: block; margin-bottom: 4px; font: 500 var(--sc-t-lg)/1.1 var(--sc-font-display); letter-spacing: -0.015em; color: var(--sc-ink); }

.piece--unsure .pill { position: absolute; top: clamp(14px, 1.9vh, 22px); right: clamp(14px, 1.4vw, 20px); padding: 5px 11px; border-radius: 999px; background: var(--sc-accent); color: var(--sc-accent-ink); font: 400 var(--sc-t-xs)/1 var(--sc-font-mono); }
.build .obj--svc .offer__rung { display: none; }
.build .obj--svc .obj__name { font-size: clamp(1.3rem, 2vw, 1.9rem); }
.build .obj--svc .obj__line { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
/* Second edge style: solid cards on crop marks, like a printer's layout sheet. */
:root[data-edge="marks"] .slot { border-color: transparent; }
:root[data-edge="marks"] .slot::before {
  content: ""; position: absolute; inset: -7px; pointer-events: none;
  --m: linear-gradient(var(--sc-ink-soft), var(--sc-ink-soft));
  --mk: 12px;
  background: var(--m) left top / var(--mk) 1px, var(--m) left top / 1px var(--mk), var(--m) right top / var(--mk) 1px, var(--m) right top / 1px var(--mk),
    var(--m) left bottom / var(--mk) 1px, var(--m) left bottom / 1px var(--mk), var(--m) right bottom / var(--mk) 1px, var(--m) right bottom / 1px var(--mk);
  background-repeat: no-repeat; opacity: 0.7;
}
:root[data-edge="marks"] .piece { border-style: solid; }
:root[data-edge="marks"] .piece--note { border-color: transparent; }

/* The four services: channels as bullets, each with a short line under it. */
.svc { display: grid; gap: 12px; margin: 18px 0 0; padding: 14px 0 0; list-style: none; border-top: 1px solid var(--sc-hairline); }
.svc li { display: grid; gap: 2px; }
.svc b { display: block; padding-left: 16px; text-indent: -16px; font: 500 var(--sc-t-base)/1.2 var(--sc-font-display); letter-spacing: -0.01em; }
.svc b::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 10px; border-radius: 50%; background: var(--sc-accent); vertical-align: 0.2em; }
.svc span { padding-left: 16px; font-size: var(--sc-t-xs); line-height: 1.35; color: var(--sc-ink-soft); }
.piece .svc { gap: clamp(6px, 1.2vh, 12px); margin-top: clamp(8px, 1.4vh, 14px); padding-top: clamp(8px, 1.4vh, 14px); }
.piece .svc b { font-size: clamp(0.85rem, 1.05vw, 1rem); }
@media (max-width: 900px), (max-height: 820px) { .piece .svc li:nth-child(n+5) { display: none; } }
@media (max-height: 820px) and (min-width: 901px) {
  .build .obj--svc .obj__line, .piece--cat .offer__rung { display: none; }
  .build__col { grid-template-rows: minmax(0, 0.5fr) minmax(0, 3.6fr) minmax(0, 1.05fr); }
  .piece--unsure { font-size: var(--sc-t-xs); }
  .piece .svc span { line-height: 1.25; }
  .piece .svc { gap: 5px; margin-top: 6px; padding-top: 8px; }
}
.piece--note p { margin: 0; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); line-height: 1.4; }
@media (max-width: 900px) {
  .build { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); }
  .build__col { gap: 14px; grid-template-rows: minmax(0, 0.55fr) minmax(0, 2.2fr) minmax(0, 1.1fr); }
  .build { gap: 18px; }
  :root[data-edge="marks"] .slot::before { inset: -5px; --mk: 7px; }
  .build .piece--cat { padding-block: 6px; }
  .build .piece--cat h3 { font-size: var(--sc-t-base); }
  .piece .svc li { line-height: 1.2; }
  .piece .obj__line, .piece--cat p:last-child, .piece .offer__rung, .piece .svc span, .unsure__more { display: none; }
  .piece .svc { gap: 2px; }
  .piece .svc b { font-size: var(--sc-t-xs); }
  .piece--unsure b { font-size: var(--sc-t-base); }
  .piece { padding: 10px 12px; gap: 2px; }
}


@media (prefers-reduced-motion: reduce) {
  .piece { transform: none; opacity: 1; }
  .p-ring, .p-beat, .p-drop, .p-travel, .p-spin, .tile svg [class^="a-"] { animation: none; }
}
.obj--hero .obj__line--verbs { max-width: none; }

/* ------------------------------------------------------------ tool ticker --
   Section-wide, under the two blocks. Brand glyphs (Simple Icons) are drawn as outlines; the edges fade. */
.tools {
  display: flex; overflow: hidden; margin-top: clamp(48px, 7vw, 96px); padding-block: 22px;
  border-block: 1px solid var(--sc-hairline);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.tools__row { flex: none; display: flex; gap: clamp(32px, 4vw, 56px); margin: 0; padding: 0 clamp(32px, 4vw, 56px) 0 0; list-style: none; animation: tools 70s linear infinite; }
.tools__row li { display: flex; align-items: center; gap: 10px; white-space: nowrap; font: 400 var(--sc-t-sm)/1 var(--sc-font-text); color: var(--sc-ink-soft); }
.tools svg { flex: none; width: 22px; height: 22px; fill: none; stroke: var(--sc-ink); stroke-width: 0.7; stroke-linejoin: round; }
.tools .tool__plain { stroke-width: 1.4; }
.tools:hover .tools__row { animation-play-state: paused; }
@keyframes tools { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) {
  .tools { -webkit-mask-image: none; mask-image: none; }
  .tools__row { flex: 1 1 auto; flex-wrap: wrap; gap: 16px 28px; padding-inline: var(--pad-x); animation: none; }
  .tools__row + .tools__row { display: none; }
}
@media (max-width: 900px) { .piece--unsure .pill { position: static; justify-self: start; } }
@media (max-height: 820px) and (min-width: 901px) { .piece--unsure { line-height: 1.3; } .piece--unsure b { margin-bottom: 2px; } }
@media (max-width: 900px) { .piece--note p { font-size: var(--sc-t-xs); line-height: 1.35; } }

/* hero: the current role, two lines in a small pill at the bottom right */
.room--one { position: relative; }
.now-pill {
  position: absolute; right: var(--pad-x); bottom: clamp(20px, 4vh, 40px);
  display: grid; gap: 4px; padding: 10px 16px; border-radius: 16px;
  border: 1px solid var(--sc-hairline-strong); background: var(--sc-surface);
  font: 400 var(--sc-t-xs)/1.35 var(--sc-font-mono); box-shadow: 0 18px 36px -28px var(--shadow);
  animation: step-in 900ms var(--ease-out) 600ms both;
}
.now-pill p { margin: 0; white-space: nowrap; }
.now-pill span { color: var(--sc-ink-soft); }
.now-pill a { color: var(--sc-accent); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 320ms var(--ease-out); }
.now-pill a:hover, .now-pill a:focus-visible { background-size: 100% 1px; }
@media (prefers-reduced-motion: reduce) { .now-pill { animation: none; } .choice:hover span { transform: none; } }
@media (max-width: 760px) { .now-pill { bottom: 84px; } }

/* ------------------------------------------------------------- buttons --
   One interaction for every button and call to action. The letters ripple once on the way in, a soft
   light follows the pointer, the button leans a few pixels toward it, and a press springs back with
   a ring that widens and fades. */
:root { --spring: cubic-bezier(0.2, 0.9, 0.3, 1.3); }
.btn, .piece--cta, .piece--unsure { --mx: 50%; --my: 50%; }
.btn { position: relative; isolation: isolate; transform: translate(var(--tx, 0px), var(--ty, 0px)) scale(var(--s, 1)); }
.btn:active { --s: 0.965; }
.btn::before, .piece--cta::before, .piece--unsure::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(140px circle at var(--mx) var(--my), color-mix(in oklab, currentColor 16%, transparent), transparent 70%);
  opacity: 0; transition: opacity 360ms var(--ease-out);
}
.piece--cta::before, .piece--unsure::before { z-index: 0; }
.btn::after, .piece--cta::after, .piece--unsure::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.is-press::after { animation: btn-ring 640ms var(--ease-out); }
@keyframes btn-ring { from { box-shadow: 0 0 0 0 color-mix(in oklab, var(--sc-accent) 45%, transparent); } to { box-shadow: 0 0 0 12px color-mix(in oklab, var(--sc-accent) 0%, transparent); } }
.btn__l { display: inline-flex; }
.btn__l > span { display: inline-block; white-space: pre; }
.is-wave .btn__l > span { animation: btn-wave 560ms var(--ease-out) calc(var(--i) * 16ms) both; }
@keyframes btn-wave { 40% { transform: translateY(-3px); } 100% { transform: none; } }
.piece--cta svg { transition: transform 460ms var(--spring); }
.piece--unsure .pill { transition: transform 460ms var(--spring); }
.piece--cta:active, .piece--unsure:active { filter: brightness(0.96); }
@media (hover: hover) {
  .btn:hover::before, .piece--cta:hover::before, .piece--unsure:hover::before { opacity: 1; }
  .piece--cta:hover svg { transform: translate(3px, -3px); }
  .piece--unsure:hover .pill { transform: translateX(-3px) scale(1.04); }
}
.foot a { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 360ms var(--ease-out), color 280ms var(--ease-out); }
.foot a:hover, .foot a:focus-visible { background-size: 100% 1px; }

/* contact: the line fills to the active step and the active dot breathes */
.pipe::after { content: ""; position: absolute; left: 16.6%; width: 66.8%; top: 14px; height: 1px; background: var(--sc-accent); transform: scaleX(var(--prog, 0)); transform-origin: left; transition: transform 800ms var(--ease-out); }
.pipe__dot { position: relative; }
.pipe__node.is-on .pipe__dot { animation: pipe-breathe 2.6s ease-in-out infinite; }
.pipe__node.is-on .pipe__dot::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid var(--sc-accent); animation: pipe-ping 2.6s var(--ease-out) infinite; }
@keyframes pipe-breathe { 50% { box-shadow: 0 0 0 10px color-mix(in oklab, var(--sc-accent) 10%, transparent); } }
@keyframes pipe-ping { from { transform: scale(1); opacity: 0.6; } 70%, to { transform: scale(2.3); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .btn { transform: none; }
  .is-wave .btn__l > span, .is-press::after, .pipe__node.is-on .pipe__dot, .pipe__node.is-on .pipe__dot::after { animation: none; }
  .pipe::after { transition: none; }
}
.piece--cta > *, .piece--unsure > * { position: relative; }

/* ------------------------------------------------------------- the mark --
   The hero mark has a heartbeat: a lub-dub, then rest. Any mark on the page squashes and springs
   back when pressed, with one ring of the accent widening out behind it. */
.obj__art--mark { position: relative; cursor: pointer; }
.obj__art--mark svg { transform-origin: 50% 60%; animation: mark-beat 2.4s ease-in-out infinite; }
@keyframes mark-beat { 0%, 40%, 100% { transform: scale(1); } 8% { transform: scale(1.045); } 16% { transform: scale(0.995); } 24% { transform: scale(1.03); } }
.obj__art--mark.is-boop, .bar__mark.is-boop svg, .tile--mark.is-boop svg { animation: mark-boop 720ms var(--spring); }
@keyframes mark-boop { 0% { transform: scale(1); } 22% { transform: scale(1.12, 0.86); } 46% { transform: scale(0.94, 1.08); } 72% { transform: scale(1.03, 0.98); } 100% { transform: scale(1); } }
.bar__mark, .tile--mark { position: relative; cursor: pointer; }
.obj__art--mark::after, .bar__mark::after, .tile--mark::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 70%; aspect-ratio: 1; border-radius: 50%;
  border: 1.5px solid var(--sc-accent); opacity: 0; transform: translate(-50%, -50%) scale(0.4); pointer-events: none;
}
.is-boop::after { animation: mark-ring 760ms var(--ease-out); }
@keyframes mark-ring { 0% { opacity: 0.6; transform: translate(-50%, -50%) scale(0.4); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.5); } }
@media (prefers-reduced-motion: reduce) {
  .obj__art--mark svg, .obj__art--mark.is-boop, .bar__mark.is-boop svg, .tile--mark.is-boop svg, .is-boop::after { animation: none; }
}

/* names, headers and titles are display type, not text to copy */
h1, h2, h3, .room__title, .obj__name, .num__v, .tile__fig, .step__q { -webkit-user-select: none; user-select: none; }

/* ----------------------------------------------------------- day / night --
   A sun that becomes a moon: the rays fold away, the disc grows and a shadow slides across it. */
.bar__tools { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.mode { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border-radius: 50%; border: 1px solid var(--sc-hairline-strong); background: transparent; color: inherit; cursor: pointer; transition: border-color 280ms var(--ease-out), transform 460ms var(--spring); }
.mode:hover { border-color: currentColor; }
.mode:active { transform: scale(0.92); }
.mode svg { width: 20px; height: 20px; overflow: visible; }
.mode__disc, .mode__cut, .mode__rays { transform-box: fill-box; transform-origin: center; transition: transform 700ms var(--spring), opacity 400ms var(--ease-out); }
.mode__cut { transform: translate(6px, -6px); }
:root[data-mode="night"] .mode__disc { transform: scale(1.5); }
:root[data-mode="night"] .mode__cut { transform: translate(-5px, 3px); }
:root[data-mode="night"] .mode__rays { transform: rotate(-60deg) scale(0.4); opacity: 0; }
:root[data-mode="night"] .step__err { color: #ff8a80; }

/* --------------------------------------------------------- tell me about you -- */
.ask { display: grid; gap: clamp(22px, 3.4vh, 30px); }
.ask__row { display: grid; grid-template-columns: 11rem minmax(0, 1fr); align-items: center; gap: 12px 24px; }
.ask__label { margin: 0; font: 400 var(--sc-t-xs)/1.3 var(--sc-font-mono); color: var(--sc-ink-soft); }
.ask__label small { display: block; opacity: 0.7; }
.seg { position: relative; display: inline-flex; justify-self: start; padding: 4px; border: 1px solid var(--sc-hairline-strong); border-radius: 999px; }
.seg__glide { position: absolute; left: 0; top: 4px; bottom: 4px; width: 0; border-radius: 999px; background: var(--sc-accent); transition: transform 520ms var(--spring), width 520ms var(--spring); }
.seg__opt { position: relative; }
.seg__opt input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.seg__opt span { position: relative; display: block; padding: 10px 16px; border-radius: 999px; font-size: var(--sc-t-sm); white-space: nowrap; transition: color 320ms var(--ease-out); }
.seg__opt input:checked + span { color: var(--sc-accent-ink); }
.seg__opt input:focus-visible + span { outline: 2px solid var(--sc-accent); outline-offset: 2px; }
.budget { display: grid; gap: 10px; max-width: 34rem; }
.budget__v { font: 500 var(--sc-t-xl)/1 var(--sc-font-display); letter-spacing: -0.02em; }
.budget__ends { display: flex; justify-content: space-between; font: 400 var(--sc-t-xs)/1 var(--sc-font-mono); color: var(--sc-ink-soft); }
.budget input { --fill: 50%; -webkit-appearance: none; appearance: none; width: 100%; height: 22px; margin: 0; background: transparent; cursor: pointer; }
.budget input::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--sc-accent) var(--fill), var(--sc-hairline-strong) var(--fill)); }
.budget input::-moz-range-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--sc-accent) var(--fill), var(--sc-hairline-strong) var(--fill)); }
.budget input::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -9px; border-radius: 50%; background: var(--sc-surface); border: 2px solid var(--sc-accent); box-shadow: 0 6px 16px -8px var(--shadow); transition: transform 320ms var(--spring); }
.budget input::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--sc-surface); border: 2px solid var(--sc-accent); }
.budget input:active::-webkit-slider-thumb { transform: scale(1.15); }
.budget input:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 4px; border-radius: 4px; }
@media (max-width: 760px) {
  .ask__row { grid-template-columns: minmax(0, 1fr); }
  .seg { display: flex; justify-self: stretch; }
  .seg__opt { flex: 1 1 0; }
  .seg__opt span { padding: 10px 4px; text-align: center; font-size: var(--sc-t-xs); }
  /* the hero title keeps clear of the focal ticks at the screen edges */
  .room--one { padding-inline: 36px; }
}
@media (prefers-reduced-motion: reduce) { .seg__glide, .mode__disc, .mode__cut, .mode__rays { transition: none; } }