/* AyeAyeWebsites studio site — "the receipt is the website"
   Scene arc: night → dusk → ember → dawn → day (body background travels;
   each section's own text colours are static so contrast never wobbles). */

/* ---------- fonts ---------- */
@font-face {
  font-family: 'Zodiak'; font-weight: 900; font-style: normal; font-display: swap;
  src: url('../fonts/Zodiak-Black.woff2') format('woff2');
}
@font-face {
  font-family: 'Zodiak'; font-weight: 400; font-style: italic; font-display: swap;
  src: url('../fonts/Zodiak-Italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Supreme'; font-weight: 400; font-style: normal; font-display: swap;
  src: url('../fonts/Supreme-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Supreme'; font-weight: 500; font-style: normal; font-display: swap;
  src: url('../fonts/Supreme-Medium.woff2') format('woff2');
}

/* ---------- tokens ---------- */
:root {
  --night: oklch(0.16 0.025 285);
  --dusk:  oklch(0.23 0.06 312);
  --ember: oklch(0.31 0.075 350);
  --dawn:  oklch(0.86 0.05 75);
  --day:   oklch(0.955 0.018 85);

  --light: oklch(0.94 0.012 90);      /* text on dark scenes */
  --light-mute: oklch(0.78 0.02 90);
  --ink: oklch(0.20 0.025 290);       /* text on light scenes */
  --ink-mute: oklch(0.38 0.03 290);

  --sun: oklch(0.80 0.14 78);         /* accent on dark */
  --sun-deep: oklch(0.46 0.12 55);    /* accent on light, AA-safe */
  --accent: var(--sun);               /* accent as text/border on scene bg */
  --edge: 0.94 0.012 90;              /* L C H of hairlines on scene bg */
  --frame: oklch(0.3 0.02 300);       /* port screenshot frame */
  --glow-a: oklch(0.55 0.13 60 / 0.45);  /* hero sun aura, centre */
  --glow-b: oklch(0.4 0.1 45 / 0.18);    /* hero sun aura, falloff */

  --display: 'Zodiak', Georgia, serif;
  --text: 'Supreme', 'Helvetica Neue', sans-serif;

  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

  --gutter: clamp(1.25rem, 4vw, 4rem);
  --measure: 38rem;
}

/* ---------- light mode: the sun is already up ----------
   Pulling the bulb sets html[data-theme="light"]. The scene arc still runs,
   but the three dark scenes wear pale paper, text turns to ink, and accents
   switch to the AA-safe deep gold. Dawn/day sections are identical in both. */
html[data-theme="light"] {
  --night: oklch(0.975 0.012 90);
  --dusk:  oklch(0.945 0.028 80);
  --ember: oklch(0.915 0.045 60);
  --light: oklch(0.20 0.025 290);
  --light-mute: oklch(0.38 0.03 290);
  --accent: var(--sun-deep);
  --edge: 0.20 0.025 290;
  --frame: oklch(0.93 0.012 85);
  /* on paper the sun is brighter than the page, never darker */
  --glow-a: oklch(0.88 0.125 84 / 0.85);
  --glow-b: oklch(0.93 0.07 82 / 0.45);
}

/* ---------- base ---------- */
@view-transition { navigation: auto; }
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--text);
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  line-height: 1.6;
  background-color: var(--night);
  color: var(--light);
  transition: background-color 700ms var(--ease-out-quart);
  -webkit-font-smoothing: antialiased;
}
body[data-scene="night"] { background-color: var(--night); }
body[data-scene="dusk"]  { background-color: var(--dusk); }
body[data-scene="ember"] { background-color: var(--ember); }
body[data-scene="dawn"]  { background-color: var(--dawn); }
body[data-scene="day"]   { background-color: var(--day); }

/* grain — one inline turbulence tile, material not flat. Desktop only: the
   fixed blend layer costs compositing on exactly the low-end phones we target. */
@media (hover: hover) and (pointer: fine) {
  body::before {
    content: ''; position: fixed; inset: 0; z-index: 1; pointer-events: none;
    opacity: 0.05; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  html[data-theme="light"] body::before { opacity: 0.08; }
}

img { max-width: 100%; height: auto; display: block; }
main { position: relative; z-index: 2; }
section { padding: clamp(5rem, 14vh, 9rem) var(--gutter); }

/* Light scenes carry ink text AND their own solid background: the sunrise is a
   horizon line the paper sections bring with them, so dark-on-dark can never
   happen while the body colour is mid-transition. */
[data-scene="dawn"], [data-scene="day"] { color: var(--ink); }
section[data-scene="dawn"] {
  background: var(--dawn);
  border-radius: 28px 28px 0 0;
  margin-top: 4rem;
}
section[data-scene="day"], footer[data-scene="day"] { background: var(--day); }

h1, h2, h3 { font-family: var(--display); font-weight: 900; line-height: 1.04; margin: 0 0 1.5rem; text-wrap: balance; }
h2 { font-size: clamp(2rem, 1.2rem + 3.4vw, 3.75rem); letter-spacing: -0.01em; max-width: 24ch; }
p { margin: 0 0 1rem; max-width: var(--measure); }
ul, ol, dl { margin: 0; padding: 0; }

::selection { background: var(--sun); color: var(--ink); }

.skip {
  position: absolute; left: -200vw; top: 0; z-index: 100;
  background: var(--sun); color: var(--ink); padding: 0.75rem 1.25rem;
  font-weight: 500; text-decoration: none;
}
.skip:focus { left: 0; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
[data-scene="dawn"] :focus-visible, [data-scene="day"] :focus-visible,
body[data-scene="dawn"] .nav :focus-visible, body[data-scene="day"] .nav :focus-visible { outline-color: var(--sun-deep); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* ---------- nav (the one bounded glass surface) ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10;
  display: flex; align-items: center; gap: 1.5rem;
  padding: 0.85rem var(--gutter);
  color: var(--light);
  transition: color 700ms var(--ease-out-quart), background-color 700ms var(--ease-out-quart);
  background-color: oklch(0.16 0.025 285 / 0.55);
}
@supports (backdrop-filter: blur(1px)) {
  .nav { backdrop-filter: blur(14px); background-color: oklch(0.16 0.025 285 / 0.25); }
}
body[data-scene="dawn"] .nav, body[data-scene="day"] .nav {
  color: var(--ink);
  background-color: oklch(0.955 0.018 85 / 0.6);
}
@supports (backdrop-filter: blur(1px)) {
  body[data-scene="dawn"] .nav, body[data-scene="day"] .nav { background-color: oklch(0.955 0.018 85 / 0.3); }
}
html[data-theme="light"] .nav { color: var(--ink); background-color: oklch(0.955 0.018 85 / 0.6); }
@supports (backdrop-filter: blur(1px)) {
  html[data-theme="light"] .nav { background-color: oklch(0.955 0.018 85 / 0.3); }
}
html[data-theme="light"] .nav :focus-visible { outline-color: var(--sun-deep); }
.nav__mark, .footer__mark {
  font-family: var(--display); font-weight: 900; font-size: 1.2rem;
  text-decoration: none; color: inherit; letter-spacing: 0.01em;
}
.nav__mark span, .footer__mark span { font-style: italic; font-weight: 400; }
.nav nav { display: flex; gap: 1.25rem; margin-left: auto; }
.nav nav a {
  color: inherit; text-decoration: none; font-size: 0.95rem; font-weight: 500;
  opacity: 0.85; transition: opacity 150ms var(--ease-out-quart);
  padding-block: 0.4rem; display: inline-block;
}
.nav nav a:hover { opacity: 1; }
@media (max-width: 40rem) { .nav nav { display: none; } .nav { justify-content: space-between; } }

/* ---------- buttons ---------- */
.btn {
  display: inline-block; background: var(--sun); color: var(--ink);
  font-family: var(--text); font-weight: 500; text-decoration: none;
  padding: 0.9rem 1.6rem; border-radius: 999px;
  transition: transform 200ms var(--ease-out-quart), box-shadow 200ms var(--ease-out-quart),
              background-color 200ms var(--ease-out-quart), translate 280ms var(--ease-out-quart);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 30px oklch(0.8 0.14 78 / 0.25); }
.btn:active { transform: translateY(0); }
.btn--small { padding: 0.5rem 1.1rem; font-size: 0.9rem; }
.btn--ghost {
  background: transparent; color: var(--light);
  border: 1px solid oklch(var(--edge) / 0.35);
  box-shadow: none;
}
.btn--ghost:hover {
  border-color: var(--accent); color: var(--accent);
  box-shadow: 0 10px 30px oklch(0.8 0.14 78 / 0.12);
}
/* the deep-end door breathes: a soft sun glow swells and settles so the eye
   finds it. The glow is a pseudo-element and only its opacity animates. */
.btn--deep { position: relative; }
.btn--deep::before {
  content: ''; position: absolute; inset: -3px; border-radius: 999px;
  box-shadow: 0 0 18px oklch(0.8 0.14 78 / 0.5), 0 0 52px oklch(0.8 0.14 78 / 0.28);
  opacity: 0.18; pointer-events: none;
  animation: deep-breathe 3.8s ease-in-out infinite;
}
.btn--deep:hover::before, .btn--deep:focus-visible::before { animation: none; opacity: 1; }
html[data-theme="light"] .btn--deep::before {
  box-shadow: 0 0 18px oklch(0.62 0.13 60 / 0.55), 0 0 52px oklch(0.62 0.13 60 / 0.3);
}
@keyframes deep-breathe {
  0%, 100% { opacity: 0.18; }
  50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .btn--deep::before { animation: none; opacity: 0.6; }
}
.btn__note {
  display: inline-block; margin-left: 0.6rem;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase;
  opacity: 0.65; vertical-align: 1px;
}
.btn--big { font-size: 1.15rem; padding: 1.15rem 2.2rem; background: var(--ink); color: var(--day); }
.btn--big:hover { box-shadow: 0 12px 36px oklch(0.2 0.025 290 / 0.3); }

.link-arrow {
  color: inherit; font-weight: 500; text-decoration: none;
  border-bottom: 1px solid currentColor; padding-block: 0.35rem 2px;
  display: inline-block;
}
.link-arrow::after { content: ' \2192'; display: inline-block; transition: translate 200ms var(--ease-out-quart); }
.link-arrow:hover::after { translate: 4px 0; }

.kicker {
  font-size: 0.8rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 1.25rem;
}
[data-scene="dawn"] .kicker, [data-scene="day"] .kicker { color: var(--sun-deep); }

/* ---------- reveals (JS adds .in; no-JS sees everything) ---------- */
html.js .reveal { opacity: 0; translate: 0 26px; }
html.js .reveal.in {
  opacity: 1; translate: 0 0;
  transition: opacity 650ms var(--ease-out-quart), translate 650ms var(--ease-out-quart);
  transition-delay: calc(var(--i, 0) * 70ms);
}

/* masked kinetic lines: the words rise out of their own baselines */
.mask { overflow: clip; }
html.js .mask .mask__inner { display: inline-block; translate: 0 112%; }
html.js .mask.in .mask__inner {
  translate: 0 0;
  transition: translate 850ms var(--ease-out-expo);
  transition-delay: calc(var(--i, 0) * 110ms);
}

/* ---------- the rising sun (scroll progress as the page's own arc) ---------- */
.suntrack {
  display: none; position: fixed; z-index: 9;
  right: 1.4rem; top: 50%; translate: 0 -50%;
  height: 40vh; width: 1px;
  background: oklch(0.55 0.02 290 / 0.35);
  cursor: grab; touch-action: none;
  /* widen the hit area without widening the line */
  border-inline: 10px solid transparent; background-clip: padding-box;
}
.suntrack:active { cursor: grabbing; }
.suntrack__sun {
  position: absolute; left: 50%; width: 11px; height: 11px;
  border-radius: 50%; background: var(--sun);
  box-shadow: 0 0 12px oklch(0.8 0.14 78 / 0.7), 0 0 2px oklch(0.3 0.05 60 / 0.5);
  top: calc((1 - var(--scroll, 0)) * 100%);
  translate: -50% -50%;
}
@media (min-width: 64rem) { html.js .suntrack { display: block; } }

/* ---------- the light switch: a bulb on a cord, pull the string ----------
   The cord drops from the top edge, through the nav glass, and the bulb hangs
   in the hero's open top-right air where it can be seen and grabbed. */
.bulb {
  position: fixed; z-index: 9; top: 0; right: clamp(1.4rem, 5vw, 4.5rem);
  background: none; border: 0; margin: 0; padding: 0 0.7rem 0.5rem;
  cursor: grab; -webkit-tap-highlight-color: transparent; touch-action: none;
  display: grid; justify-items: center;
  translate: 0 var(--pull, 0px);
  transition: translate 220ms var(--ease-out-quart), opacity 200ms ease;
}
html:not(.js) .bulb { display: none; }
.bulb:active { cursor: grabbing; }
.bulb.pulling { transition: none; }
/* while the page scrolls the bulb tucks up into the ceiling; it drops back on pause */
.bulb.tucked {
  translate: 0 -130px; opacity: 0; pointer-events: none;
  transition: translate 280ms var(--ease-out-quart), opacity 160ms ease;
}
.bulb__cord { width: 2px; height: 88px; background: oklch(var(--edge) / 0.45); }
.bulb__lamp {
  width: 34px; height: 34px; border-radius: 50%; margin-top: 9px;
  position: relative;
  border: 2px solid oklch(var(--edge) / 0.65);
  background: radial-gradient(circle at 35% 30%, oklch(var(--edge) / 0.3), transparent 62%);
  transition: background-color 450ms var(--ease-out-quart), border-color 450ms var(--ease-out-quart),
              box-shadow 450ms var(--ease-out-quart);
}
/* the screw cap joining cord to glass */
.bulb__lamp::before {
  content: ''; position: absolute; left: 50%; top: -10px; translate: -50% 0;
  width: 13px; height: 10px; border-radius: 3px 3px 1px 1px;
  background: oklch(var(--edge) / 0.55);
}
/* a resting filament so the glass reads as a bulb even when off */
.bulb__lamp::after {
  content: ''; position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: 10px; height: 10px; border-radius: 50%;
  border: 1.5px solid oklch(var(--edge) / 0.4); border-top-color: transparent;
  transition: border-color 450ms var(--ease-out-quart);
}
html[data-theme="light"] .bulb__lamp {
  background: var(--sun); border-color: var(--sun);
  box-shadow: 0 0 22px oklch(0.8 0.14 78 / 0.85), 0 0 64px oklch(0.8 0.14 78 / 0.4);
}
html[data-theme="light"] .bulb__lamp::after { border-color: oklch(0.99 0.04 90 / 0.9); border-top-color: transparent; }
.bulb__string { width: 1.5px; height: 42px; background: oklch(var(--edge) / 0.5); margin-top: 3px; }
.bulb__bead { width: 9px; height: 9px; border-radius: 50%; background: oklch(var(--edge) / 0.75); margin-top: 1px; }
.bulb.sprung { animation: bulbspring 650ms var(--ease-out-quart); }
@keyframes bulbspring {
  0% { translate: 0 var(--pull-release, 22px); }
  45% { translate: 0 -7px; }
  72% { translate: 0 3px; }
  100% { translate: 0 0; }
}

/* ---------- magnetic buttons + press feedback ---------- */
.btn { translate: var(--mx, 0) var(--my, 0); }
.btn:active { transform: translateY(0) scale(0.97); }

/* ---------- port frame tilt (desktop pointer garnish) ---------- */
@media (hover: hover) and (pointer: fine) {
  html.js .port__frame {
    transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: transform 250ms var(--ease-out-quart);
  }
}

/* ---------- 1 · hero ---------- */
.hero {
  min-height: 100svh; display: flex; flex-direction: column; justify-content: center;
  position: relative; overflow: clip; padding-top: 5.5rem; padding-bottom: 4rem;
}
.hero__glow {
  position: absolute; width: 56rem; height: 56rem; border-radius: 50%;
  background: radial-gradient(closest-side, var(--glow-a), var(--glow-b) 55%, transparent 72%);
  bottom: -34rem; right: -14rem; pointer-events: none;
  translate: var(--gx, 0) var(--gy, 0);
  transition: translate 600ms var(--ease-out-quart);
}
/* a faint nautical chart etched into the hero air — drawn as a mask and
   filled with the theme's own hairline colour, so the night gets a star
   chart and the lit page gets an old map pressed into the paper */
.hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: oklch(var(--edge) / 0.11);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 700'%3E%3Cg fill='none' stroke='%23fff'%3E%3Cg opacity='.5'%3E%3Cpath d='M-50 620Q300 540 1050 600'/%3E%3Cpath d='M-50 540Q300 460 1050 520'/%3E%3Cpath d='M-50 460Q300 380 1050 440'/%3E%3C/g%3E%3Cpath d='M40 660C260 600 420 470 588 332' stroke-width='2' stroke-dasharray='2 10' stroke-linecap='round' opacity='.9'/%3E%3Ccircle cx='40' cy='660' r='5' opacity='.9'/%3E%3Cg opacity='.85'%3E%3Ccircle cx='760' cy='210' r='70' stroke-width='1.5'/%3E%3Ccircle cx='760' cy='210' r='110' opacity='.7'/%3E%3Ccircle cx='760' cy='210' r='170' opacity='.45'/%3E%3Ccircle cx='760' cy='210' r='258' opacity='.25'/%3E%3Cpath d='M760-60V480M490 210H1030' opacity='.5'/%3E%3Cpath d='M610 60 910 360M910 60 610 360' opacity='.3'/%3E%3C/g%3E%3Cg fill='%23fff' stroke='none'%3E%3Cpath d='M760 96 772 198 760 210 748 198Z'/%3E%3Cpath d='M760 324 772 222 760 210 748 222Z' opacity='.55'/%3E%3Cpath d='M646 210 748 198 760 210 748 222Z' opacity='.55'/%3E%3Cpath d='M874 210 772 198 760 210 772 222Z' opacity='.55'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") right -7rem top -3rem / 1060px auto no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 700'%3E%3Cg fill='none' stroke='%23fff'%3E%3Cg opacity='.5'%3E%3Cpath d='M-50 620Q300 540 1050 600'/%3E%3Cpath d='M-50 540Q300 460 1050 520'/%3E%3Cpath d='M-50 460Q300 380 1050 440'/%3E%3C/g%3E%3Cpath d='M40 660C260 600 420 470 588 332' stroke-width='2' stroke-dasharray='2 10' stroke-linecap='round' opacity='.9'/%3E%3Ccircle cx='40' cy='660' r='5' opacity='.9'/%3E%3Cg opacity='.85'%3E%3Ccircle cx='760' cy='210' r='70' stroke-width='1.5'/%3E%3Ccircle cx='760' cy='210' r='110' opacity='.7'/%3E%3Ccircle cx='760' cy='210' r='170' opacity='.45'/%3E%3Ccircle cx='760' cy='210' r='258' opacity='.25'/%3E%3Cpath d='M760-60V480M490 210H1030' opacity='.5'/%3E%3Cpath d='M610 60 910 360M910 60 610 360' opacity='.3'/%3E%3C/g%3E%3Cg fill='%23fff' stroke='none'%3E%3Cpath d='M760 96 772 198 760 210 748 198Z'/%3E%3Cpath d='M760 324 772 222 760 210 748 222Z' opacity='.55'/%3E%3Cpath d='M646 210 748 198 760 210 748 222Z' opacity='.55'/%3E%3Cpath d='M874 210 772 198 760 210 772 222Z' opacity='.55'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") right -7rem top -3rem / 1060px auto no-repeat;
}
@media (max-width: 40rem) {
  .hero::before {
    -webkit-mask-size: 740px auto; -webkit-mask-position: right -10rem top -2rem;
    mask-size: 740px auto; mask-position: right -10rem top -2rem;
  }
}
.hero h1 { margin: 0 0 2rem; }
.hero__line {
  display: block;
  font-size: clamp(3.2rem, 1rem + 12vw, 8.25rem);
  letter-spacing: -0.02em;
}
.hero__line--ital {
  font-weight: 400; font-style: italic; color: var(--accent);
  margin-left: clamp(1.5rem, 9vw, 9rem);
}
.hero__line:nth-child(3) { margin-left: clamp(3rem, 18vw, 18rem); }
.hero__sub { margin-left: clamp(0rem, 4vw, 4rem); }
.hero__cta { margin-left: clamp(0rem, 4vw, 4rem); }
@media (max-width: 30rem) {
  .hero__line { font-size: clamp(2.7rem, 13.5vw, 3.2rem); }
  .hero__line--ital { margin-left: 0.75rem; }
  .hero__line:nth-child(3) { margin-left: 1.75rem; }
  .hero__sub, .hero__cta { margin-left: 0; }
}
.hero__sub { font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem); color: var(--light-mute); }
.hero__sub strong { color: var(--light); }
.hero__cta { display: flex; align-items: center; gap: 1.75rem; flex-wrap: wrap; margin-top: 1.5rem; }

/* ---------- 2 · positioning ---------- */
.positioning { padding-block: clamp(7rem, 20vh, 13rem); position: relative; }
/* a sun-bleached sea behind the statement: a faint moonlit horizon at night,
   melting into the paper when the lights are on. Edges feather to nothing. */
.positioning::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: url('../img/sea-statement.jpg') center 62% / cover no-repeat;
  opacity: 0.13;
  -webkit-mask: linear-gradient(transparent, #000 22% 78%, transparent);
  mask: linear-gradient(transparent, #000 22% 78%, transparent);
}
html[data-theme="light"] .positioning::before { opacity: 0.5; }
.statement {
  position: relative;
  font-family: var(--display); font-weight: 400; font-style: italic;
  font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.5rem); line-height: 1.35;
  max-width: 30ch; margin: 0 auto;
}
.statement em { color: var(--accent); font-style: normal; }

/* ---------- 3 · problem (tick what sounds familiar) ---------- */
.problem { padding-block: clamp(3.5rem, 9vh, 6rem); position: relative; }
/* the phone: a mobile screen stuck on white, acting out the headline — dots
   blink in turn, the MB figure ticks up while the section is on screen.
   The screen is a depicted object, so its colours are fixed in both themes. */
.problem__loader {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  letter-spacing: 0.18em;
  width: max-content; max-width: 100%;
  margin: 1rem auto 3rem;
  display: grid; justify-items: center;
}
.problem__loader-tag {
  font-size: 0.78rem; letter-spacing: 0.22em;
  color: var(--accent); margin-bottom: 1rem;
}
.problem__phone {
  width: clamp(190px, 26vw, 230px);
  aspect-ratio: 9 / 16.5;
  border: 2px solid oklch(var(--edge) / 0.5);
  border-radius: 30px;
  background: oklch(0.99 0.003 90);
  box-shadow: 0 28px 70px oklch(0.1 0.02 300 / 0.35);
  position: relative;
  display: grid; align-content: center; justify-items: center; gap: 0.6rem;
}
/* notch and home indicator */
.problem__phone::before {
  content: ''; position: absolute; top: 13px; left: 50%; translate: -50% 0;
  width: 58px; height: 7px; border-radius: 999px;
  background: oklch(0.86 0.008 90);
}
.problem__phone::after {
  content: ''; position: absolute; bottom: 11px; left: 50%; translate: -50% 0;
  width: 66px; height: 4px; border-radius: 999px;
  background: oklch(0.86 0.008 90);
}
.problem__loader-line { font-size: 0.88rem; color: oklch(0.52 0.02 290); }
.problem__loader-burn { font-size: 0.68rem; color: oklch(0.66 0.02 290); }
.ld { animation: ld-blink 1.3s infinite; }
.ld:nth-of-type(2) { animation-delay: 0.22s; }
.ld:nth-of-type(3) { animation-delay: 0.44s; }
@keyframes ld-blink {
  0%, 55%, 100% { opacity: 0.15; }
  25% { opacity: 1; }
}
.problem h2 { max-width: 18ch; }
.problem__prompt { color: var(--light-mute); font-size: 0.95rem; margin-bottom: 0.25rem; }
.problem__list { list-style: none; max-width: var(--measure); }
.problem__list li { border-top: 1px solid oklch(var(--edge) / 0.15); }
.problem__tally {
  margin-top: 1.25rem; font-size: 1.05rem;
  display: flex; gap: 1rem; align-items: baseline; flex-wrap: wrap;
}
/* display:flex beats the UA [hidden] rule — restate it or the tally never hides */
.problem__tally[hidden] { display: none; }
.problem__tally .link-arrow { color: var(--accent); border-color: var(--accent); }

/* checkable statements (shared by problem list + quote builder) */
.check {
  display: flex; gap: 0.85rem; align-items: baseline; width: 100%;
  background: none; border: 0; cursor: pointer; text-align: left;
  font: inherit; color: var(--light-mute); font-size: 1.1rem;
  padding: 1.05rem 0.25rem;
  transition: color 200ms var(--ease-out-quart);
}
.check:hover { color: var(--light); }
.check__box {
  flex: 0 0 auto; width: 1.05rem; height: 1.05rem; translate: 0 2px;
  border: 1.5px solid currentColor; border-radius: 3px;
  display: inline-grid; place-items: center;
  font-size: 0.8rem; line-height: 1;
  transition: background-color 200ms var(--ease-out-quart), border-color 200ms var(--ease-out-quart);
}
.check[aria-pressed="true"] { color: var(--light); }
.check[aria-pressed="true"] .check__box { background: var(--sun); border-color: var(--sun); color: var(--ink); }
.check[aria-pressed="true"] .check__box::before { content: '\2713'; }
.check--ink { color: var(--ink-mute); font-size: 1rem; padding: 0.7rem 0.25rem; }
.check--ink:hover { color: var(--ink); }
.check--ink[aria-pressed="true"] { color: var(--ink); }
.check--ink[aria-pressed="true"] .check__box { background: var(--sun-deep); border-color: var(--sun-deep); color: var(--day); }

/* ---------- 4 · the standard: the till slip ---------- */
.standard__grid {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(19rem, 4fr);
  gap: clamp(2rem, 5vw, 5rem); align-items: center; max-width: 70rem;
}
.standard__intro p { color: var(--light-mute); }
.receipt {
  position: relative; justify-self: center;
  background: var(--day); color: var(--ink);
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 0.78rem; letter-spacing: 0.05em; line-height: 1.5;
  width: min(21rem, 100%); padding: 1.6rem 1.5rem 1.2rem;
  rotate: -1.6deg;
  box-shadow: 0 30px 70px oklch(0.08 0.02 300 / 0.55);
  font-variant-numeric: tabular-nums;
  transition: rotate 450ms var(--ease-out-quart), box-shadow 450ms var(--ease-out-quart);
}
/* it straightens for you when you reach for it */
.receipt:hover, .receipt:focus-within {
  rotate: 0deg;
  box-shadow: 0 36px 80px oklch(0.08 0.02 300 / 0.6);
}
/* and prints itself line by line as it arrives */
html.js .receipt .rl { opacity: 0; translate: 0 8px; }
html.js .receipt.in .rl {
  opacity: 1; translate: 0 0;
  transition: opacity 320ms var(--ease-out-quart), translate 320ms var(--ease-out-quart);
  transition-delay: calc(140ms + var(--i, 0) * 75ms);
}
.receipt__head {
  text-align: center; font-weight: 700; font-size: 0.95rem; letter-spacing: 0.12em;
  border-bottom: 2px dashed oklch(0.2 0.025 290 / 0.35);
  padding-bottom: 0.9rem; margin-bottom: 0.9rem; max-width: none;
}
.receipt__head span { display: block; font-weight: 400; font-size: 0.68rem; margin-top: 0.35rem; color: var(--ink-mute); }
.receipt ul { list-style: none; }
.receipt li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: 0.28rem 0; border-bottom: 1px dotted oklch(0.2 0.025 290 / 0.22);
}
.receipt li span:last-child { white-space: nowrap; }
.receipt__sub {
  margin: 0.9rem 0 0.2rem; max-width: none; font-size: 0.68rem;
  letter-spacing: 0.14em; color: var(--ink-mute);
}
.receipt__grand {
  display: flex; justify-content: space-between; max-width: none;
  font-weight: 700; font-size: 0.95rem; margin: 0.6rem 0 0.9rem;
  border-top: 2px solid var(--ink); padding-top: 0.5rem;
}
.receipt__tear {
  text-align: center; max-width: none; margin: 0; padding-top: 0.8rem;
  border-top: 2px dashed oklch(0.2 0.025 290 / 0.35);
  font-size: 0.66rem; letter-spacing: 0.14em; color: var(--ink-mute);
}
@media (max-width: 48rem) {
  .standard__grid { grid-template-columns: 1fr; }
  .receipt { rotate: -1deg; }
}

/* ---------- 5 · services (editorial index, two columns) ---------- */
.services__list {
  list-style: none; counter-reset: svc; max-width: 64rem;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(2rem, 5vw, 5rem);
}
.services__list li {
  counter-increment: svc;
  padding: 1.4rem 0 1.4rem 0; position: relative;
  border-top: 1px solid oklch(var(--edge) / 0.18);
  color: var(--light-mute);
}
.services__list li::before {
  content: counter(svc, decimal-leading-zero);
  display: block; margin-bottom: 0.3rem;
  font-family: var(--display); font-style: italic; font-weight: 400;
  font-size: 1.9rem; color: var(--accent); opacity: 0.9;
}
.services__list strong { color: var(--light); font-weight: 500; display: block; font-size: 1.1rem; }
@media (max-width: 40rem) { .services__list { grid-template-columns: 1fr; } }

/* ---------- 6 · voyage (signature: two ports of call) ---------- */
.voyage { padding-bottom: 0; }
.voyage__intro { margin-bottom: 3rem; }
.voyage__track { position: relative; height: 280svh; margin: 0 calc(-1 * var(--gutter)); }
.voyage__pin {
  position: sticky; top: 0; height: 100svh; overflow: clip;
  display: grid;
}
.voyage__sentinel { position: absolute; left: 0; width: 100%; pointer-events: none; }
.voyage__sentinel[data-port="1"] { top: 0; height: 42%; }
.voyage__sentinel[data-port="2"] { top: 42%; height: 58%; }

/* direct port controls inside the pinned panel */
.voyage__steps {
  position: absolute; z-index: 3; bottom: 1.1rem; left: var(--gutter);
  display: none; gap: 0.5rem;
}
html.js .voyage__steps { display: flex; }
.voyage__stepbtn {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 0.72rem; letter-spacing: 0.14em;
  background: none; color: var(--light-mute); cursor: pointer;
  border: 1px solid oklch(var(--edge) / 0.3); border-radius: 999px;
  padding: 0.45rem 0.9rem;
  transition: color 200ms var(--ease-out-quart), border-color 200ms var(--ease-out-quart), background-color 200ms var(--ease-out-quart);
}
.voyage__stepbtn:hover { color: var(--light); border-color: oklch(var(--edge) / 0.6); }
.voyage__pin[data-step="1"] .voyage__stepbtn[data-goto="1"],
.voyage__pin[data-step="2"] .voyage__stepbtn[data-goto="2"] {
  background: var(--sun); border-color: var(--sun); color: var(--ink);
}
html:not(.js) .voyage__steps { display: none; }
@media (prefers-reduced-motion: reduce) { html.js .voyage__steps { display: none; } }

.port {
  grid-area: 1 / 1; min-height: 0;
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(16rem, 4fr);
  gap: clamp(1.5rem, 3vw, 3rem); align-items: center; align-content: center;
  padding: clamp(4.5rem, 8vh, 6rem) var(--gutter) clamp(2rem, 5vh, 4rem);
}
.port__frame {
  border-radius: 10px; overflow: hidden;
  border: 1px solid oklch(var(--edge) / 0.2);
  box-shadow: 0 30px 80px oklch(0.1 0.02 300 / 0.5);
  background: var(--frame);
}
.port__label {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: 0.55rem 0.9rem;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 0.66rem; letter-spacing: 0.14em;
  color: var(--light-mute);
  border-bottom: 1px dotted oklch(var(--edge) / 0.3);
}
.port__no {
  font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 0.5rem;
}
.port h3 { font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.8rem); margin-bottom: 1rem; }
.port__notes ul { list-style: none; margin-bottom: 1.25rem; }
.port__notes li {
  padding: 0.55rem 0; color: var(--light-mute);
  border-top: 1px solid oklch(var(--edge) / 0.12); font-size: 0.98rem;
}

/* pinned crossfade + wipe, driven by data-step */
html.js .voyage__pin .port {
  transition: opacity 600ms var(--ease-out-quart), clip-path 800ms var(--ease-out-expo),
              visibility 0s linear 800ms;
}
html.js .voyage__pin[data-step="1"] .port--2,
html.js .voyage__pin[data-step="2"] .port--1 { opacity: 0; visibility: hidden; pointer-events: none; }
html.js .voyage__pin[data-step="1"] .port--2 { clip-path: inset(0 0 0 100%); }
html.js .voyage__pin[data-step="2"] .port--1 { clip-path: inset(0 100% 0 0); }
html.js .voyage__pin[data-step="1"] .port--1,
html.js .voyage__pin[data-step="2"] .port--2 {
  opacity: 1; clip-path: inset(0); visibility: visible;
  transition: opacity 600ms var(--ease-out-quart), clip-path 800ms var(--ease-out-expo),
              visibility 0s;
}

@media (max-width: 48rem) {
  .voyage__track { height: 220svh; }
  .port { grid-template-columns: 1fr; align-content: center; gap: 1.25rem; }
  .port__frame { max-height: 38svh; }
  .port__frame img { object-fit: cover; object-position: top; max-height: calc(38svh - 30px); }
  .port--2 .port__frame img { object-position: 0 18%; }
  .port h3 { margin-bottom: 0.5rem; }
  .port__notes li { font-size: 0.9rem; padding: 0.4rem 0; }
}

/* no-JS and reduced-motion: the voyage becomes a calm static spread */
html:not(.js) .voyage__track { height: auto; margin: 0; }
html:not(.js) .voyage__pin { position: static; height: auto; grid-template-rows: auto auto; }
html:not(.js) .voyage__pin .port { grid-area: auto; }
html:not(.js) .voyage__sentinel { display: none; }

/* the door to the deep end */
.voyage__deep {
  padding: 2.5rem 0 3.5rem; max-width: none;
  font-size: 1.05rem;
}
.voyage__deep .link-arrow { color: var(--accent); border-color: var(--accent); }
.voyage__deepnote {
  display: block; margin-top: 0.35rem;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--light-mute);
}

/* ---------- 7 · process (four columns marching to daylight) ---------- */
.steps {
  list-style: none; max-width: none;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 2.5rem);
}
.steps li { padding-top: 1.2rem; border-top: 2px solid oklch(0.2 0.025 290 / 0.3); }
.steps h3 { font-size: 1.3rem; margin-bottom: 0.5rem; }
.steps h3 span {
  display: block; font-style: italic; font-weight: 400; font-size: 1rem;
  color: var(--sun-deep); margin-bottom: 0.4rem;
}
.steps p { color: var(--ink-mute); font-size: 0.95rem; }
@media (max-width: 54rem) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 32rem) { .steps { grid-template-columns: 1fr; } }

/* ---------- 8 · offer ---------- */
.offer h2 { max-width: 20ch; }
.offer__body { color: var(--ink-mute); font-size: 1.1rem; }
.offer__terms {
  display: grid; grid-template-columns: minmax(14rem, 1fr) 2fr;
  gap: clamp(1.5rem, 4vw, 4rem); align-items: start;
  max-width: 52rem; margin: 2.5rem 0;
  border-top: 1px solid oklch(0.2 0.025 290 / 0.2); padding-top: 2rem;
}
.offer__label { font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute); }
.offer__figures s { color: var(--ink-mute); font-size: 1.05rem; display: block; }
/* the strike-through draws itself across the old rate */
html.js .offer__figures s {
  text-decoration: none; width: fit-content;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat; background-position: 0 58%;
  background-size: 0% 2px;
}
html.js .offer__terms.in .offer__figures s {
  background-size: 100% 2px;
  transition: background-size 700ms var(--ease-out-expo) 600ms;
}
.offer__figures strong {
  font-family: var(--display); font-weight: 900; font-size: clamp(2.6rem, 2rem + 2.5vw, 4rem);
  line-height: 1.1; display: block;
}
.offer__note { color: var(--sun-deep); font-weight: 500; font-size: 0.95rem; }
.offer__list { list-style: none; }
.offer__list li {
  padding: 0.8rem 0; border-bottom: 1px solid oklch(0.2 0.025 290 / 0.14);
  color: var(--ink-mute); font-size: 0.98rem;
}
.offer__list strong { color: var(--ink); font-weight: 500; }
@media (max-width: 40rem) { .offer__terms { grid-template-columns: 1fr; } }

/* the quote builder: two questions, the slip does the rest */
.quote {
  display: grid; grid-template-columns: minmax(14rem, 1fr) minmax(19rem, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem); align-items: center;
  max-width: 52rem; margin: 3rem 0 0;
  border-top: 1px solid oklch(0.2 0.025 290 / 0.2); padding-top: 2.25rem;
}
.quote__h { font-size: 1.6rem; margin-bottom: 0.4rem; }
.quote__hint { color: var(--ink-mute); font-size: 0.95rem; margin-bottom: 0.75rem; }
.receipt--quote {
  rotate: 1.4deg; width: min(19rem, 100%);
  font-size: 0.74rem; padding: 1.3rem 1.25rem 1rem;
  box-shadow: 0 22px 50px oklch(0.08 0.02 300 / 0.3);
}
.receipt--quote:hover, .receipt--quote:focus-within { rotate: 0deg; }
.receipt--quote li span s { color: var(--ink-mute); }
@media (max-width: 40rem) { .quote { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .receipt--quote:hover { rotate: 1.4deg; } }

.offer__cta { margin-top: 2.5rem; }
.offer__receipt { margin-top: 1.25rem; color: var(--ink-mute); font-size: 0.95rem; }
#receipt-line strong { color: var(--ink); }

/* ---------- 9 · footer ---------- */
.footer {
  padding: 3rem var(--gutter) 4rem; color: var(--ink);
  border-top: 1px solid oklch(0.2 0.025 290 / 0.15);
  display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: baseline; justify-content: space-between;
}
.footer__mark { font-size: 1.1rem; margin: 0; }
.footer nav { display: flex; gap: 1.1rem; flex-wrap: wrap; }
.footer nav a {
  color: var(--ink-mute); text-decoration: none; font-size: 0.9rem;
  padding-block: 0.45rem; display: inline-block;
}
.footer nav a:hover { color: var(--ink); }
.footer__legal { font-size: 0.85rem; color: var(--ink-mute); max-width: none; width: 100%; }

/* ---------- reduced motion: everything calms down ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body { transition: none; }
  html.js .reveal { opacity: 1; translate: none; transition: none; }
  html.js .mask .mask__inner { translate: none; transition: none; }
  html.js .receipt .rl { opacity: 1; translate: none; transition: none; }
  .receipt { transition: none; }
  .receipt:hover, .receipt:focus-within { rotate: -1.6deg; }
  html.js .offer__figures s { text-decoration: line-through; background-image: none; }
  .btn, .link-arrow::after { transition: none; }
  .btn:hover { transform: none; }
  .btn { translate: none; }
  .hero__glow { transition: none; translate: none; }
  html.js .suntrack { display: none; }
  .bulb { transition: none; }
  .bulb.sprung { animation: none; }
  .bulb__lamp { transition: none; }
  .ld { animation: none; opacity: 1; }
  html.js .port__frame { transform: none; transition: none; }
  .voyage__track { height: auto; margin: 0; }
  .voyage__pin { position: static; height: auto; overflow: visible; }
  .voyage__pin .port { grid-area: auto; opacity: 1 !important; clip-path: none !important; visibility: visible !important; transition: none; }
  .voyage__sentinel { display: none; }
}