/* Express Ice events v1: page styles. The engine (scrollcraft.css) is the
   floor and stays untouched; this file themes it and styles our own markup.
   Mobile first: 390px is the design width, 360px the floor. */

@font-face {
  font-family: "Archivo";
  src: url(fonts/archivo-latin-var.woff2) format("woff2");
  font-weight: 400 800;
  font-stretch: 75% 100%;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Metric-matched fallback so the swap does not reflow the hero much. */
@font-face { font-family: "Archivo Fallback"; src: local("Arial"); size-adjust: 97%; ascent-override: 92%; descent-override: 22%; line-gap-override: 0%; }

:root {
  --night: #0A0A0C;
  --night-2: #141417;
  --deep: #050506;
  --frost: #EFEFF2;
  --paper: #FFFFFF;
  --ink-light: #F2F2F4;
  --ink-light-soft: #ABABB5;
  --ink-dark: #111114;
  --ink-dark-soft: #4E4E58;
  /* BLUE build (round 7): electric blue from the Pretorius Ice logo on black.
     Names kept as --copper* so every rule still resolves. */
  --neon-rgb: 30 160 255;            /* #1EA0FF electric blue */
  --deep-rgb: 10 94 184;             /* #0A5EB8 blue text on white (6:1) */
  --copper: rgb(var(--neon-rgb));
  --copper-deep: rgb(var(--deep-rgb));
  --copper-ink: #03101E;
  --glow: 0 0 18px rgb(var(--neon-rgb) / 0.55), 0 0 2px rgb(var(--neon-rgb) / 0.9);
  --ph: #F5C542;

  --sc-canvas: var(--night);
  --sc-surface: var(--night-2);
  --sc-ink: var(--ink-light);
  --sc-ink-soft: var(--ink-light-soft);
  --sc-accent: var(--copper);
  --sc-accent-ink: var(--copper-ink);
  --sc-font-display: "Archivo", "Archivo Fallback", system-ui, sans-serif;
  --sc-font-text: "Archivo", "Archivo Fallback", system-ui, sans-serif;
  --sc-shadow-color: 150 30% 3%;

  --r-sm: 8px; --r: 12px; --r-lg: 18px;
  --gut: clamp(1rem, 4.5vw, 4.5rem);
  --maxw: 76rem;
  --plate: clamp(4rem, 9vw, 8.5rem);
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --dock-h: 0px;
}

html { background: var(--night); }
body {
  background: var(--night);
  color: var(--ink-light);
  font-family: var(--sc-font-text);
  font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  line-height: 1.58;
  letter-spacing: 0;
  font-stretch: 100%;
}
[hidden] { display: none !important; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ic { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
p, h1, h2, h3, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
img { height: auto; }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
.plate { position: relative; padding-block: var(--plate); overflow-x: clip; }

/* Grounds. Hard cuts, no drift. Restate `color` with the tokens (taste.md). */
.g-night  { background: var(--night);   --sc-ink: var(--ink-light); --sc-ink-soft: var(--ink-light-soft); --accent-text: var(--copper); color: var(--ink-light); }
.g-night2 { background: var(--night-2); --sc-ink: var(--ink-light); --sc-ink-soft: var(--ink-light-soft); --accent-text: var(--copper); color: var(--ink-light); }
.g-deep   { background: var(--deep);    --sc-ink: var(--ink-light); --sc-ink-soft: var(--ink-light-soft); --accent-text: var(--copper); color: var(--ink-light); }
.g-frost  { background: var(--frost);   --sc-ink: var(--ink-dark);  --sc-ink-soft: var(--ink-dark-soft);  --accent-text: var(--copper-deep); color: var(--ink-dark); }
.g-frost ::selection { background: var(--copper-deep); color: #fff; }
.g-frost :focus-visible { outline-color: var(--copper-deep); }

/* Type. Bigger than the engine default (Hancke round 1): headline, then sub, then CTA. Hero +10% again in express-ice round 5. */
.h2, .hero__h1, .problem__h, .worries, .card__name, .card__count, .night__clock, .what__big, .step__h, .quote__text, .numbers dd, .close__title {
  font-family: var(--sc-font-display);
  font-stretch: 84%;
  text-wrap: balance;
}
.h2 { font-size: clamp(2.2rem, 1.5rem + 3.4vw, 4.4rem); font-weight: 760; line-height: 1.0; letter-spacing: -0.022em; }
.h2--xl { font-size: clamp(2.8rem, 1.6rem + 5.6vw, 6.2rem); letter-spacing: -0.03em; }
.lede { font-size: clamp(1.2rem, 1.05rem + 0.8vw, 1.6rem); line-height: 1.4; font-weight: 500; color: var(--sc-ink); text-wrap: pretty; max-width: 34ch; }
.kicker { font-size: 0.9375rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-text, var(--copper)); }

/* Buttons: one style everywhere. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  min-height: 56px; padding: 0 1.6rem;
  border: 0; border-radius: var(--r); cursor: pointer; text-decoration: none;
  background: var(--copper); color: var(--copper-ink);
  font: 700 1.125rem/1.1 var(--sc-font-text); letter-spacing: 0.005em;
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.25) inset, 0 10px 24px -12px rgb(var(--neon-rgb) / 0.65), 0 2px 6px rgb(0 0 0 / 0.25);
  transition: transform 140ms var(--ease), filter 160ms var(--ease), box-shadow 160ms var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.btn .ic { width: 1.15em; height: 1.15em; stroke-width: 2.2; }
.btn:active { transform: translateY(1px) scale(0.985); }
.btn[disabled] { cursor: progress; filter: saturate(0.6) brightness(0.92); }
.btn:focus-visible { outline: 3px solid var(--ink-light); outline-offset: 3px; }
.g-frost .btn:focus-visible, .formcard .btn:focus-visible { outline-color: var(--ink-dark); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { filter: brightness(1.07); transform: translateY(-1px); }
}
.btn--full { width: 100%; }
.textlink {
  display: inline-flex; align-items: center; gap: 0.45em; min-height: 44px;
  color: var(--accent-text, var(--copper)); font-weight: 700; text-decoration: underline; text-underline-offset: 0.25em; text-decoration-thickness: 1.5px;
}

/* Placeholders: dashed outline only with ?ph=1 (round 4: off by default). */
.show-ph .ph { outline: 1.5px dashed var(--ph); outline-offset: 2px; border-radius: 3px; }
.show-ph [data-ai] { outline: 0; }
.show-ph .photo { position: relative; }
.show-ph .photo::after {
  content: "AI image"; position: absolute; left: 10px; top: 10px; z-index: 2;
  padding: 3px 8px; border-radius: 6px; font: 700 0.6875rem/1.3 var(--sc-font-text); letter-spacing: 0.04em;
  background: var(--ph); color: #1B1606; pointer-events: none;
}
/* Proof slots: shown as intentional frames in preview; hidden in production until filled. */
body:not(.show-ph) .slot[data-empty] { display: none !important; }
/* Round 4: gaps with no real value yet (brackets) stay hidden unless ?ph=1. */
body:not(.show-ph) .todo { display: none !important; }
/* Sample proof (round 3, Hancke asked to see the look): tagged in preview, never shown off localhost. */
.no-samples [data-sample] { display: none !important; }
.show-ph [data-sample] { position: relative; }
.show-ph [data-sample]::before {
  content: "Sample"; position: absolute; right: 10px; top: 10px; z-index: 3;
  padding: 3px 8px; border-radius: 6px; font: 700 0.6875rem/1.3 var(--sc-font-text); letter-spacing: 0.04em;
  background: var(--ph); color: #1B1606; pointer-events: none;
}
.wordmark { font-family: var(--sc-font-display); font-stretch: 100%; font-weight: 700; font-size: 0.875rem; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.72; }

/* ============================================================== HERO == */
.hero {
  position: relative; isolation: isolate; overflow: clip;
  height: 100vh; height: 100svh; min-height: 600px; max-height: 1100px;
  background: var(--night); color: var(--ink-light);
}
.hero__scene { position: absolute; inset: 0; z-index: 0; }
.hero__far { position: absolute; left: -2%; right: -2%; top: -9%; height: 118%; }
.hero__far picture, .hero__far img, .hero__lean--far { display: block; width: 100%; height: 100%; }
.hero__far img { object-fit: cover; object-position: 55% 38%; max-width: none; }
.hero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to bottom, rgb(10 10 12 / 0.88) 0%, rgb(10 10 12 / 0.35) 30%, rgb(10 10 12 / 0) 46%),
    linear-gradient(to top, rgb(10 10 12 / 0.97) 0%, rgb(10 10 12 / 0.9) 26%, rgb(10 10 12 / 0.35) 40%, rgb(10 10 12 / 0) 52%);
}
/* Phones: the floor fade doubles as the plate under the promise and button, so
   the cubes and vapour never sit under words. It lives on .hero (not on the
   copy), so the contrast pass measures it. */
@media (max-width: 860px) {
  .hero::after { height: 34%; background: linear-gradient(to top, var(--night) 0%, rgb(10 10 12 / 0.93) 52%, rgb(10 10 12 / 0) 100%); }
}
.hero::after { /* floor fade into the next plate (devices.md: fade the section floor) */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 14%; z-index: 6; pointer-events: none;
  background: linear-gradient(to top, var(--night), rgb(10 10 12 / 0));
}
.hero__copy {
  position: relative; height: 100%;
  display: flex; flex-direction: column;
  padding: calc(max(14px, env(safe-area-inset-top)) + 2.4rem) var(--gut) max(1.25rem, env(safe-area-inset-bottom));
}
.hero__h1 { position: relative; z-index: 7; font-weight: 800; margin: 0; }
.hero__h1a { display: block; font-size: clamp(1.6rem, 1.15rem + 1.9vw, 2.65rem); font-weight: 600; line-height: 1.12; letter-spacing: -0.01em; color: var(--ink-light-soft); font-stretch: 92%; }
.hero__h1b { display: block; margin-top: 0.08em; font-size: clamp(3.35rem, 1.85rem + 7vw, 7.3rem); line-height: 0.95; letter-spacing: -0.035em; color: var(--ink-light); font-stretch: 80%; }
.hero__mid { position: relative; flex: 1 1 auto; min-height: 150px; }
.hero__bag {
  position: absolute; z-index: 3; top: 0; bottom: 4%; left: 22%; right: 0; margin-inline: auto;
  aspect-ratio: 880 / 1366; max-width: 70%;
}
.hero__bag picture, .hero__bag img, .hero__lean--bag { display: block; width: 100%; height: 100%; }
/* The keyed bag carries the copper rim light into its plastic; pull it back toward clear ice. */
.hero__bag img { object-fit: contain; object-position: 50% 100%; max-width: none; filter: saturate(0.5) brightness(1.06) contrast(1.04) drop-shadow(0 18px 30px rgb(0 0 0 / 0.55)); }
.hero__mist {
  position: absolute; z-index: 4; left: -30%; right: -30%; bottom: -6%; height: 42%;
  mix-blend-mode: screen; opacity: 0.55; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 55% 60%, #000 30%, transparent 100%); mask-image: radial-gradient(ellipse 50% 50% at 55% 60%, #000 30%, transparent 100%);
}
.hero__mist img { width: 100%; height: 100%; object-fit: cover; max-width: none; animation: mist-drift 22s ease-in-out infinite alternate; }
.hero.is-off .hero__mist img { animation-play-state: paused; }
@keyframes mist-drift { from { transform: translate3d(-4%, 0, 0) scale(1.05); } to { transform: translate3d(4%, -3%, 0) scale(1.12); } }
/* Near plane: a keyed heap of frosted cubes, solid down to the frame edge. The
   bag's base sinks into it, so no contact point floats as the planes separate. */
.hero__cubes {
  position: absolute; z-index: 5; left: -6%; right: -6%; bottom: -5%;
  aspect-ratio: 1600 / 510; pointer-events: none;
}
.hero__cubes picture, .hero__cubes img, .hero__lean--cubes { display: block; width: 100%; height: 100%; }
.hero__cubes img { object-fit: cover; object-position: 50% 100%; max-width: none; filter: saturate(0.6) brightness(0.92) blur(0.6px);
  /* The near plane rises faster than the page; its lower edge dissolves into the
     night so it never shows as a hard line mid-scroll (devices.md, layered scenes). */
  -webkit-mask-image: linear-gradient(to top, transparent 0%, rgb(0 0 0 / 0.5) 18%, #000 42%); mask-image: linear-gradient(to top, transparent 0%, rgb(0 0 0 / 0.5) 18%, #000 42%); }
.hero__low { position: relative; z-index: 7; }
.hero__promise { font-family: var(--sc-font-display); font-stretch: 90%; font-size: clamp(1.6rem, 1.25rem + 1.45vw, 2.45rem); font-weight: 700; line-height: 1.14; letter-spacing: -0.015em; text-wrap: balance; }
.hero__sub { margin-top: 0.55rem; font-size: clamp(1.08rem, 1rem + 0.35vw, 1.3rem); line-height: 1.45; color: var(--ink-light-soft); max-width: 36ch; text-wrap: pretty; }
.btn--hero { margin-top: 1.1rem; width: 100%; }
.hero__lean { will-change: transform; transform: translate3d(calc(var(--mx, 0) * var(--lx, 0px)), calc(var(--my, 0) * var(--ly, 0px)), 0); }
.hero__lean--far { --lx: -10px; --ly: -6px; }
.hero__lean--bag { --lx: 14px; --ly: 8px; }
.hero__lean--cubes { --lx: 26px; --ly: 12px; }

@media (max-height: 700px) and (max-width: 860px) {
  .hero__copy { padding-top: calc(max(12px, env(safe-area-inset-top)) + 1.8rem); }
  .hero__h1b { font-size: clamp(2.85rem, 1.5rem + 6.6vw, 3.4rem); }
  .hero__h1a { font-size: 1.42rem; }
  .hero__promise { font-size: 1.48rem; }
  .hero__sub { font-size: 1.04rem; }
  .btn--hero { margin-top: 0.8rem; }
}

@media (min-width: 861px) {
  .hero { min-height: 640px; }
  .hero__far img { object-position: 60% 50%; }
  .hero__scrim {
    background:
      linear-gradient(to right, rgb(10 10 12 / 0.92) 0%, rgb(10 10 12 / 0.72) 30%, rgb(10 10 12 / 0.18) 55%, rgb(10 10 12 / 0) 70%),
      linear-gradient(to top, rgb(10 10 12 / 0.6) 0%, rgb(10 10 12 / 0) 35%);
  }
  .hero__copy { display: block; padding: 0; }
  .hero__h1 { position: absolute; z-index: 2; left: var(--gut); top: 24vh; width: min(66vw, 62rem); }
  .hero__h1b { white-space: nowrap; }
  .hero__mid { position: absolute; inset: 0; min-height: 0; }
  .hero__bag { top: 13%; bottom: 7%; left: auto; right: 9vw; margin: 0; max-width: none; }
  .hero__mist { left: 38%; right: -6%; bottom: -4%; height: 44%; opacity: 0.5; }
  .hero__cubes { left: auto; right: -3%; bottom: -6%; width: 52%;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 26%); mask-image: linear-gradient(to right, transparent 0%, #000 26%); }
  .hero__low { position: absolute; z-index: 7; left: var(--gut); bottom: 11vh; width: min(50vw, 44rem); }
  .btn--hero { width: auto; margin-top: 1.6rem; }
}

/* ============================================================== MENU == */
.menu__head { display: grid; gap: 0.6rem; }
.menu__lede { font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem); font-weight: 600; color: var(--sc-ink-soft); }
.cards { margin-top: clamp(1.6rem, 3vw, 2.6rem); display: grid; gap: 1rem; }
.card { position: relative; border-radius: var(--r-lg); scroll-margin-top: 1rem; }
.card__in {
  position: relative; height: 100%; overflow: hidden;
  display: flex; flex-direction: column;
  padding: 1.35rem 1.25rem 1.25rem; border-radius: var(--r-lg);
  background: var(--paper); color: var(--ink-dark);
  border: 1.5px solid transparent;
  box-shadow: 0 1px 2px rgb(17 17 20 / 0.08), 0 14px 34px -20px rgb(17 17 20 / 0.3);
  transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease);
  cursor: pointer;
}
.card__name { font-size: 1rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; font-stretch: 100%; color: var(--ink-dark-soft); }
.card__count { margin-top: 0.35rem; font-size: clamp(2.1rem, 1.7rem + 1.8vw, 3rem); font-weight: 800; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.card__people { display: block; margin-top: 0.2rem; font-size: 1.05rem; font-weight: 600; letter-spacing: 0; color: var(--ink-dark-soft); font-stretch: 100%; }
.card__for { margin-top: 0.55rem; font-weight: 600; }
.rows { margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid rgb(17 17 20 / 0.1); display: grid; gap: 0.62rem; flex: 1 1 auto; align-content: start; }
.rows li { display: grid; grid-template-columns: 1.6rem 1fr; gap: 0.6rem; align-items: center; font-size: 1rem; line-height: 1.3; }
.rows .ic { width: 1.45rem; height: 1.45rem; color: var(--copper-deep); }
.card .btn { margin-top: 1.2rem; }
.card--large .card__in { background: #121215; color: var(--ink-light); }
.card--large .card__photo { position: absolute; inset: 0; z-index: 0; }
.card--large .card__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgb(10 10 12 / 0.72) 0%, rgb(10 10 12 / 0.88) 42%, rgb(10 10 12 / 0.96) 100%); }
.card--large .card__photo img { width: 100%; height: 100%; object-fit: cover; }
.card--large .card__in > :not(.card__photo) { position: relative; z-index: 1; }
.card--large .card__name, .card--large .card__people { color: var(--ink-light-soft); }
.card--large .rows { border-top-color: rgb(242 242 244 / 0.14); }
.card--large .rows .ic { color: var(--copper); }
.card__huge { font-size: 1.28em; color: var(--copper); }
@media (hover: hover) and (pointer: fine) { .card__in:hover { border-color: rgb(var(--deep-rgb) / 0.55); } }
@media (min-width: 861px) {
  .cards { grid-template-columns: 1fr 1fr 1.18fr; align-items: stretch; gap: 1.2rem; }
}
.order .card__in { box-shadow: 0 2px 6px rgb(0 0 0 / 0.3), 0 24px 50px -26px rgb(0 0 0 / 0.75); }
.order .card--large .card__in { border-color: rgb(242 242 244 / 0.16); }
@media (hover: hover) and (pointer: fine) { .order .card__in:hover { border-color: var(--copper); } }
.menu__foot { margin-top: 1.2rem; color: var(--ink-light-soft); font-size: 1rem; }
.menu__foot a { color: var(--copper); font-weight: 700; display: inline-block; min-height: 44px; line-height: 44px; }

/* ====================================================== WHAT YOU GET ==
   Round 3: How it works, Speed, Freezers and the guarantee merge here.
   Left: what we bring. Right: the promise, with the ice night. */
.what { overflow: clip; }
.what__bg { position: absolute; inset: 0 0 auto 0; height: min(70svh, 44rem); z-index: 0; opacity: 0.4;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgb(0 0 0 / 0.6) 45%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, rgb(0 0 0 / 0.6) 45%, transparent 100%); }
.what__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 40%; }
.what__grid { position: relative; z-index: 1; display: grid; gap: 2.6rem; }
.what__get { display: grid; gap: 0.7rem; align-content: start; }
.what__get .h2 { max-width: 12ch; }
.what__lede { font-size: clamp(1.1rem, 1.02rem + 0.4vw, 1.3rem); font-weight: 600; color: var(--ink-light); max-width: 30ch; }
.gets { margin-top: 1.1rem; display: grid; gap: 1.15rem; }
.gets li { display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; align-items: start; scroll-margin-top: 1.5rem; }
.gets .ic { box-sizing: border-box; width: 3rem; height: 3rem; padding: 0.68rem; border-radius: 50%; border: 1.5px solid rgb(var(--neon-rgb) / 0.55); background: rgb(var(--neon-rgb) / 0.08); color: var(--copper); stroke-width: 1.6; }
.gets h3 { font-size: clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem); font-weight: 750; line-height: 1.2; letter-spacing: -0.01em; color: var(--ink-light); padding-top: 0.15rem; }
.gets p { margin-top: 0.15rem; color: var(--ink-light-soft); }
.what__promise { display: grid; gap: 1rem; align-content: start; scroll-margin-top: 1rem; }
.what__big { font-size: clamp(2.6rem, 1.6rem + 4.4vw, 5rem); font-weight: 800; line-height: 0.98; letter-spacing: -0.03em; color: var(--ink-light); margin-top: -0.4rem; }
.what__promise .btn { margin-top: 0.4rem; justify-self: start; }
@media (max-width: 860px) {
  .what__promise { padding-top: 2.2rem; border-top: 1px solid rgb(242 242 244 / 0.12); }
  .what__promise .btn { width: 100%; }
}
@media (min-width: 861px) {
  .what__grid { grid-template-columns: 1fr 1.2fr; gap: 3rem 5rem; align-items: start; }
}

.promise { display: grid; gap: 0.7rem; }
.promise li { position: relative; padding-left: 1.9rem; font-size: clamp(1.1rem, 1.02rem + 0.4vw, 1.3rem); line-height: 1.4; }
.promise li::before { content: ""; position: absolute; left: 0; top: 0.28em; width: 1.15rem; height: 1.15rem; border-radius: 50%; border: 2px solid var(--copper); background: radial-gradient(circle, var(--copper) 0 34%, transparent 36%); }
.promise strong { font-weight: 750; }
.terms { font-size: 0.9rem; color: var(--ink-light-soft); }

/* ============================================================= PROOF ==
   Round 3: the real 4.8 Google rating leads. Quotes and numbers are samples. */
.proof__head { display: grid; gap: 0.6rem; }
.proof__head .h2 { max-width: 16ch; }
.stars { display: flex; gap: 0.2rem; margin-top: 0.4rem; color: var(--copper-deep); }
.stars .ic { width: 2rem; height: 2rem; fill: currentColor; stroke: none; }
.stars__last { display: inline-flex; }
.stars__last .ic { -webkit-mask-image: linear-gradient(to right, #000 80%, rgb(0 0 0 / 0.2) 80%); mask-image: linear-gradient(to right, #000 80%, rgb(0 0 0 / 0.2) 80%); }
.proof__count { font-weight: 600; color: var(--ink-dark-soft); }
.proof__grid { margin-top: clamp(1.6rem, 3vw, 2.6rem); display: grid; gap: 1rem; }
.quote { margin: 0; display: flex; flex-direction: column; gap: 0.9rem; padding: 1.2rem; border-radius: var(--r-lg); background: var(--paper); box-shadow: 0 1px 2px rgb(17 17 20 / 0.08), 0 14px 34px -22px rgb(17 17 20 / 0.3); }
.quote__photo { margin: -1.2rem -1.2rem 0; border-radius: var(--r-lg) var(--r-lg) 0 0; overflow: hidden; }
.quote__photo img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.quote__text { font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.45rem); font-weight: 600; line-height: 1.35; font-stretch: 92%; }
.quote__who { display: grid; gap: 0.2rem; font-size: 0.9375rem; font-weight: 700; }
.quote:not(.quote--main) { justify-content: center; }
.quote__event { font-weight: 500; color: var(--ink-dark-soft); }
.numbers { margin: 1rem 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1rem; padding: 1.3rem 1.2rem; border-radius: var(--r-lg); background: var(--ink-dark); color: var(--ink-light); }
.numbers div { display: flex; flex-direction: column-reverse; gap: 0.25rem; }
.numbers div:last-child { grid-column: 1 / -1; padding-top: 1rem; border-top: 1px solid rgb(242 242 244 / 0.12); }
.numbers dt { font-size: 0.9375rem; font-weight: 600; color: var(--ink-light-soft); line-height: 1.35; }
.numbers dd { margin: 0; font-size: clamp(2rem, 1.5rem + 2vw, 3.2rem); font-weight: 800; line-height: 1; letter-spacing: -0.03em; color: var(--copper); font-variant-numeric: tabular-nums; }
.numbers dd small { font-size: 0.45em; font-weight: 700; letter-spacing: 0; color: var(--ink-light); }
.show-ph .numbers[data-sample]::before { top: 10px; right: 10px; }
@media (min-width: 861px) {
  .proof__head { grid-template-columns: 1fr auto; align-items: end; gap: 0.4rem 3rem; }
  .proof__head .h2 { grid-row: 1 / span 2; }
  .stars { justify-content: flex-end; }
  .proof__count { text-align: right; }
  .proof__grid { grid-template-columns: 1.4fr 1fr; grid-template-rows: auto auto; }
  .quote--main { grid-row: 1 / span 2; }
  .numbers { grid-template-columns: 1fr 1fr 1.6fr; padding: 1.6rem 2rem; gap: 2rem; }
  .numbers div:last-child { grid-column: auto; padding-top: 0; border-top: 0; padding-left: 2rem; border-left: 1px solid rgb(242 242 244 / 0.12); }
}

/* ============================================================= CLOSE ==
   Round 3: sits inside the "Get my ice plan" section, under the cards. */
.close__grid { display: grid; gap: 1.6rem; margin-top: clamp(2.6rem, 6vw, 4.5rem); padding-top: clamp(2.6rem, 6vw, 4.5rem); border-top: 1px solid rgb(242 242 244 / 0.1); }
.close__head { display: grid; gap: 0.8rem; }
.close__urgency { color: var(--ink-light-soft); font-weight: 600; max-width: 40ch; }
.close__title { font-size: clamp(2rem, 1.5rem + 2.4vw, 3.4rem); font-weight: 780; line-height: 1.02; letter-spacing: -0.022em; }
.close__more { display: grid; gap: 0.9rem; align-content: start; }
.close__h3 { font-size: 1.15rem; font-weight: 750; }
.next { counter-reset: n; display: grid; gap: 0.7rem; }
.next li { counter-increment: n; display: grid; grid-template-columns: 2.2rem 1fr; gap: 0.6rem; align-items: center; font-weight: 600; }
.next li::before { content: counter(n); display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; border: 1.5px solid var(--copper); color: var(--copper); font-weight: 800; font-size: 0.95rem; }
.close__call { color: var(--ink-light-soft); }
.close__call a { color: var(--ink-light); font-weight: 700; display: inline-block; min-height: 44px; line-height: 44px; }
.rating { display: flex; align-items: center; gap: 0.5rem; padding: 0.8rem 1rem; border-radius: var(--r); border: 1px solid rgb(242 242 244 / 0.14); font-weight: 600; color: var(--ink-light-soft); justify-self: start; }
.rating strong { color: var(--ink-light); font-size: 1.15rem; }
.rating__stars .ic { display: block; width: 1.3rem; height: 1.3rem; fill: var(--copper); stroke: none; }
@media (min-width: 861px) {
  .close__grid { grid-template-columns: 1fr 30rem; grid-template-rows: auto 1fr; gap: 1.6rem 4.5rem; align-items: start; }
  .close__head { grid-column: 1; grid-row: 1; }
  .formcard { grid-column: 2; grid-row: 1 / span 2; }
  .close__more { grid-column: 1; grid-row: 2; }
}
/* The order sheet (form). Light card on the night ground. */
.formcard {
  scroll-margin-top: 12px;
  background: var(--paper); color: var(--ink-dark);
  --sc-ink: var(--ink-dark); --sc-ink-soft: var(--ink-dark-soft); --accent-text: var(--copper-deep);
  border-radius: var(--r-lg); padding: clamp(1.15rem, 3vw, 2rem);
  box-shadow: 0 2px 6px rgb(0 0 0 / 0.3), 0 30px 60px -28px rgb(0 0 0 / 0.7);
}
.formcard ::selection { background: var(--copper-deep); color: #fff; }
.progress { display: grid; gap: 0.45rem; margin-bottom: 1rem; }
.progress__t { font-size: 0.8125rem; font-weight: 750; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-dark-soft); }
.progress__bar { height: 6px; border-radius: 99px; background: rgb(17 17 20 / 0.1); overflow: hidden; }
.progress__bar i { display: block; height: 100%; width: 100%; border-radius: inherit; background: var(--copper); transform-origin: 0 50%; transform: scaleX(0.4); transition: transform 320ms var(--ease); }
.step__h { font-size: clamp(1.5rem, 1.3rem + 0.9vw, 2rem); font-weight: 780; line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 1rem; outline: none; }
.q { border: 0; margin: 0 0 1rem; padding: 0; min-width: 0; }
.q__l, .f label { display: block; padding: 0; margin-bottom: 0.4rem; font-weight: 700; font-size: 1rem; }
.opt { font-weight: 500; color: var(--ink-dark-soft); }
.taps { display: grid; gap: 0.5rem; }
.taps--2 { grid-template-columns: 1fr 1fr; }
.taps--3 { grid-template-columns: 1fr 1fr 1fr; }
.taps--4 { grid-template-columns: repeat(4, 1fr); }
.taps--5 { grid-template-columns: repeat(3, 1fr); }
.tap {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  min-height: 64px; padding: 0.55rem 0.3rem; border-radius: var(--r-sm);
  border: 1.5px solid color-mix(in oklab, var(--ink-dark) 22%, white); background: #fff; cursor: pointer;
  transition: border-color 140ms var(--ease), background-color 140ms var(--ease);
}
.tap--sm { min-height: 48px; }
.tap input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.tap__t { font-weight: 750; font-size: 1rem; line-height: 1.15; }
.tap__s { margin-top: 0.15rem; font-size: 0.8125rem; color: var(--ink-dark-soft); line-height: 1.2; }
.tap:has(input:checked) { border-color: var(--copper-deep); background: color-mix(in oklab, var(--copper) 15%, white); box-shadow: 0 0 0 1px var(--copper-deep) inset; }
.tap:has(input:focus-visible) { outline: 2px solid var(--copper-deep); outline-offset: 2px; }
.f { margin-bottom: 1rem; min-width: 0; }
.f2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
.f input, .f textarea {
  display: block; width: 100%; min-height: 52px; padding: 0.7rem 0.9rem; border-radius: var(--r-sm);
  border: 1.5px solid color-mix(in oklab, var(--ink-dark) 28%, white); background: #fff; color: var(--ink-dark);
  font: 500 1.0625rem/1.3 var(--sc-font-text);
}
.f textarea { min-height: 88px; resize: vertical; }
.f input:focus, .f textarea:focus { outline: 2px solid var(--copper-deep); outline-offset: 1px; border-color: var(--copper-deep); }
.f.is-invalid input { border-color: #B42318; }
.f.is-valid input { border-color: #2E7D4F; }
.hint { margin-top: 0.35rem; font-size: 0.875rem; line-height: 1.4; color: var(--ink-dark-soft); }
.err { margin-top: 0.35rem; font-size: 0.9rem; font-weight: 650; color: #B42318; }
.err:empty { display: none; }
.notice { margin-top: 0.7rem; font-size: 0.8125rem; line-height: 1.4; color: var(--ink-dark-soft); text-align: center; }
.notice a, .consent a { color: inherit; font-weight: 600; }
.consent { display: flex; gap: 0.7rem; align-items: flex-start; margin-top: 0.4rem; font-size: 0.9375rem; line-height: 1.4; cursor: pointer; min-height: 44px; }
.consent input { flex: none; width: 24px; height: 24px; margin: 0; accent-color: var(--copper-deep); }
.form__nav { display: flex; align-items: center; gap: 0.8rem; margin-top: 1.1rem; }
.form__nav .btn { flex: 1 1 auto; }
.back { min-height: 48px; padding: 0 0.6rem; border: 0; background: none; color: var(--ink-dark-soft); font: 700 1rem var(--sc-font-text); text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; }
.fail { margin-top: 1rem; padding: 0.9rem 1rem; border-radius: var(--r-sm); background: #FDECEA; color: #6E1A12; font-size: 0.95rem; }
.fail a { color: inherit; font-weight: 800; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ============================================================ FOOTER == */
.foot { background: var(--deep); color: var(--ink-light-soft); padding: 2.4rem 0 calc(2.4rem + var(--dock-pad, 0px)); font-size: 0.9375rem; }
.foot__in { display: grid; gap: 0.6rem; }
.foot .wordmark { color: var(--ink-light); opacity: 0.9; }
.foot__links { display: flex; flex-wrap: wrap; gap: 0 1.4rem; }
.foot__links a { display: inline-block; min-height: 44px; line-height: 44px; color: var(--ink-light); }
.foot__small { font-size: 0.8125rem; }

/* ============================================================== DOCK == */
.dock {
  position: fixed; z-index: 60; left: 0; right: 0; bottom: 0;
  padding: 0.55rem var(--gut) max(0.6rem, env(safe-area-inset-bottom));
  background: rgb(10 10 12 / 0.94); border-top: 1px solid rgb(242 242 244 / 0.1);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 -10px 30px rgb(0 0 0 / 0.35);
  transform: translate3d(0, 110%, 0); transition: transform 280ms var(--ease);
}
.dock[data-state="on"] { transform: none; }
.dock__strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-bottom: 0.5rem; }
.dock__strip i { display: block; height: 5px; border-radius: 3px; background: rgb(242 242 244 / 0.14); overflow: hidden; position: relative; }
.dock__strip i::after { content: ""; position: absolute; inset: 0; background: var(--copper); transform-origin: 0 50%; transform: scaleX(var(--f, 0)); }
.dock__row { display: grid; grid-template-columns: auto 1fr; gap: 0.6rem; }
.dock__call {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; min-height: 52px; min-width: 52px; padding: 0 1rem;
  border-radius: var(--r); border: 1.5px solid rgb(242 242 244 / 0.3); color: var(--ink-light); text-decoration: none; font-weight: 700;
}
.dock__num { display: none; }
.dock__cta { min-height: 52px; }
@media (min-width: 861px) {
  .dock { left: auto; right: 1.2rem; bottom: 1.2rem; width: auto; padding: 0.55rem 0.6rem 0.6rem; border: 1px solid rgb(242 242 244 / 0.12); border-radius: var(--r-lg); }
  .dock__strip { margin-bottom: 0.45rem; }
  .dock__row { grid-template-columns: auto auto; gap: 0.4rem; align-items: center; }
  .dock__call { order: 2; border: 0; min-height: 48px; padding: 0 0.7rem; justify-content: center; font-weight: 600; font-size: 0.9375rem; color: var(--ink-light-soft); }
  .dock__cta { min-height: 48px; font-size: 1rem; padding: 0 1.2rem; }
  .dock__callt { display: none; }
  .dock__num { display: inline; }
}

/* ============================================================ COOKIE == */
.cookie {
  position: fixed; z-index: 61; left: 0.5rem; right: 0.5rem; bottom: calc(var(--dock-h) + 0.4rem);
  display: flex; align-items: center; gap: 0.5rem; min-height: 56px; padding: 0.3rem 0.35rem 0.3rem 0.8rem;
  border-radius: var(--r); background: var(--night-2); color: var(--ink-light); font-size: 0.8125rem; line-height: 1.3;
  border: 1px solid rgb(242 242 244 / 0.14); box-shadow: 0 16px 40px rgb(0 0 0 / 0.45);
  transition: bottom 280ms var(--ease);
}
.cookie[hidden] { display: none; }
.cookie p { flex: 1 1 auto; }
.cookie a { color: var(--ink-light); }
.cookie__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 0.35rem; flex: none; }
.cookie button { min-height: 44px; min-width: 92px; padding: 0 0.6rem; border-radius: var(--r-sm); border: 1.5px solid rgb(242 242 244 / 0.4); background: transparent; color: var(--ink-light); font: 700 0.95rem var(--sc-font-text); cursor: pointer; }
@media (min-width: 861px) { .cookie { right: auto; left: 1.4rem; bottom: 1.4rem; max-width: 26rem; } }

/* ============================================================= PHONES ==
   Tighter rhythm on phones (round 2 QA fix 4, trimmed to the 5 sections of round 3). */
@media (max-width: 860px) {
  :root { --plate: 2.75rem; }
  .h2 { font-size: clamp(2rem, 1.5rem + 3vw, 2.6rem); }
  .lede { font-size: 1.15rem; }
  .problem { padding-top: 1.5rem; }
  .worries { margin-top: 1.1rem; }
  .worries li { font-size: clamp(2.1rem, 1.6rem + 3vw, 2.5rem); }
  .problem__turn { margin-top: 1.2rem; }
  .what__grid { gap: 2.2rem; }
  .gets { margin-top: 0.8rem; gap: 0.9rem; }
  .gets li { grid-template-columns: 2.6rem 1fr; gap: 0.8rem; }
  .gets .ic { width: 2.6rem; height: 2.6rem; padding: 0.58rem; }
  .gets h3 { font-size: 1.15rem; padding-top: 0.1rem; }
  .gets p { font-size: 1rem; }
  .what__big { font-size: clamp(2.4rem, 1.6rem + 4vw, 2.9rem); }
  .promise { gap: 0.5rem; }
  .stars .ic { width: 1.7rem; height: 1.7rem; }
  .proof__grid { margin-top: 1.1rem; gap: 0.7rem; }
  .quote { padding: 1rem; gap: 0.6rem; }
  .quote__photo { margin: -1rem -1rem 0; }
  .quote__text { font-size: 1.1rem; }
  .numbers { margin-top: 0.7rem; padding: 1rem; }
  .menu__head { gap: 0.4rem; }
  .cards { margin-top: 1.1rem; gap: 0.8rem; }
  .card__in { padding: 1.05rem 1.05rem 1rem; }
  .card__count { font-size: 2.1rem; }
  .card__for { margin-top: 0.35rem; }
  .rows { margin-top: 0.7rem; padding-top: 0.7rem; gap: 0.42rem; }
  .rows li { font-size: 0.97rem; }
  .card .btn { margin-top: 0.9rem; min-height: 52px; }
  .menu__foot { margin-top: 0.6rem; font-size: 0.95rem; }
  .close__grid { gap: 1.1rem; }
  .close__head { gap: 0.5rem; }
  .step__h { margin-bottom: 0.8rem; }
  .q, .f { margin-bottom: 0.8rem; }
  .progress { margin-bottom: 0.7rem; }
  .close__more { gap: 0.6rem; }
  .next { gap: 0.45rem; }
  .foot { padding-top: 1.6rem; }
  .foot__in { gap: 0.35rem; }
}
/* ========================================================== WHAT WE DO ==
   Round 6: the problem section folds in here. Each of the four worries is
   asked, then answered. Then why us. Then the promise (right column). */
.asks { margin-top: 1.4rem; border-top: 1px solid rgb(238 242 238 / 0.12); }
.asks > li { padding: 1.05rem 0 1.15rem; border-bottom: 1px solid rgb(238 242 238 / 0.12); scroll-margin-top: 1.5rem; }
.asks__q { font-family: var(--sc-font-display); font-stretch: 84%; font-size: clamp(1.4rem, 1.15rem + 1.1vw, 2rem); font-weight: 760; line-height: 1.08; letter-spacing: -0.02em; color: var(--ink-light-soft); text-wrap: balance; }
.asks__q--last { color: var(--copper); }
.asks__a { margin-top: 0.65rem; display: grid; grid-template-columns: 2.6rem 1fr; gap: 0.85rem; align-items: start; }
.asks__a .ic { box-sizing: border-box; width: 2.6rem; height: 2.6rem; padding: 0.58rem; border-radius: 50%; border: 1.5px solid color-mix(in oklab, var(--copper) 55%, transparent); background: color-mix(in oklab, var(--copper) 8%, transparent); color: var(--copper); stroke-width: 1.6; }
.asks h3 { font-size: clamp(1.15rem, 1.08rem + 0.4vw, 1.4rem); font-weight: 750; line-height: 1.2; letter-spacing: -0.01em; color: var(--ink-light); padding-top: 0.1rem; }
.asks__a p { margin-top: 0.15rem; color: var(--ink-light-soft); }
.whyus__h { margin-top: 1.7rem; font-size: 0.9375rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-light-soft); }
.whyus { margin-top: 0.7rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.whyus li { padding: 0.55rem 0.9rem; border-radius: 99px; border: 1px solid color-mix(in oklab, var(--copper) 45%, transparent); background: color-mix(in oklab, var(--copper) 9%, transparent); font-weight: 650; font-size: 0.95rem; line-height: 1.3; color: var(--ink-light); }
@media (min-width: 861px) { .what__get { position: static; } }

/* Date note (QA fix 5): not blocking, just a nudge to call. */
.datenote { margin-top: -0.3rem; margin-bottom: 0.9rem; padding: 0.6rem 0.75rem; border-radius: var(--r-sm); background: #FFF4E8; border: 1px solid #F0C7A6; font-size: 0.9375rem; line-height: 1.4; color: #5A2A0E; }
.datenote a { color: inherit; font-weight: 800; display: inline-block; min-height: 44px; line-height: 44px; }
.datenote[hidden] { display: none !important; }

/* Desktop floating dock: off while the cards or the form are on screen (QA fix 3). */
.dock[data-state="off"] { pointer-events: none; }

/* Reduced motion: keep meaning, drop movement. */
@media (prefers-reduced-motion: reduce) {
  .hero__mist img { animation: none; }
  .hero__lean { transform: none; }
  .dock { transition: none; }
}
/* Engine fail-safe: if the page script never runs, show every reveal. */
html:not(.sc-ready) [data-sc-in], html:not(.sc-ready) [data-sc-stagger] > *, html:not(.sc-ready) [data-sc-cue] { animation: fs 0s linear 3s forwards; }
@keyframes fs { to { opacity: 1; transform: none; } }

/* ================================================================ BLUE ==
   Round 7 (Hancke): electric blue from the logo, on black. "Ice is
   minimalistic": fewer parts, thin lines, flat grounds. One glow, on the
   word "ice". No chart, no icon badges, no card photo, no tilt. */
.neon-word { color: var(--copper); text-shadow: 0 0 26px rgb(var(--neon-rgb) / 0.55), 0 0 2px rgb(var(--neon-rgb) / 0.85); }
.foot .wordmark .neon-word { text-shadow: 0 0 10px rgb(var(--neon-rgb) / 0.5); }
.btn { box-shadow: 0 0 0 1px rgb(255 255 255 / 0.14) inset, 0 0 30px -8px rgb(var(--neon-rgb) / 0.6); }
.formcard .btn { box-shadow: 0 0 0 1px rgb(255 255 255 / 0.14) inset, 0 8px 22px -12px rgb(var(--neon-rgb) / 0.7); }
@media (prefers-reduced-motion: no-preference) {
  /* The word switches on like cold light: two quick flickers, then steady. */
  .hero__h1 .neon-word { animation: ice-on 1.3s steps(1, end) 0.45s both; }
}
@keyframes ice-on { 0% { opacity: 0.15; text-shadow: none; } 10% { opacity: 1; } 16% { opacity: 0.3; text-shadow: none; } 24% { opacity: 1; } 30% { opacity: 0.7; } 38%, 100% { opacity: 1; } }

/* Hero: the real bag sits in the cave. Pull its colour out, light it blue. */
.hero__far img { object-position: 62% 50%; }
.hero__bag img { filter: saturate(0.15) brightness(1.04) contrast(1.08) drop-shadow(0 0 34px rgb(var(--neon-rgb) / 0.32)) drop-shadow(0 18px 30px rgb(0 0 0 / 0.6)); }
.hero__cubes img { filter: saturate(0.15) brightness(0.8) contrast(1.05) blur(0.6px); }
.hero__mist { opacity: 0.4; }
@media (max-width: 860px) {
  .hero__far img { object-position: 50% 60%; }
}

/* What we do: question as a small label, answer as the line you read. */
.what { background: var(--deep); }
.asks { border-top-color: rgb(242 242 244 / 0.1); }
.asks > li { border-bottom-color: rgb(242 242 244 / 0.1); padding: 1.1rem 0 1.2rem; }
.asks__q { font-family: var(--sc-font-text); font-stretch: 100%; font-size: 1rem; font-weight: 600; line-height: 1.3; letter-spacing: 0; color: var(--ink-light-soft); }
.asks__q--last { color: var(--copper); }
.asks__a { display: block; margin-top: 0.3rem; }
.asks h3 { font-family: var(--sc-font-display); font-stretch: 84%; font-size: clamp(1.55rem, 1.25rem + 1.2vw, 2.2rem); font-weight: 760; line-height: 1.05; letter-spacing: -0.02em; padding-top: 0; }
.asks__a p { margin-top: 0.35rem; }
.whyus { display: grid; gap: 0.5rem; }
.whyus li { position: relative; padding: 0 0 0 1.5rem; border: 0; border-radius: 0; background: none; font-size: 1.05rem; }
.whyus li::before { content: ""; position: absolute; left: 0; top: 0.68em; width: 0.85rem; height: 1.5px; background: var(--copper); }
.promise li { padding-left: 1.5rem; }
.promise li::before { top: 0.7em; width: 0.85rem; height: 1.5px; border: 0; border-radius: 0; background: var(--copper); }
@media (min-width: 861px) {
  /* No chart now, so the guarantee holds still while the answers scroll past. */
  .what__promise { position: sticky; top: 14vh; padding-left: 3.5rem; border-left: 1px solid rgb(var(--neon-rgb) / 0.3); }
}
@media (max-width: 860px) {
  .what__promise { border-top-color: rgb(var(--neon-rgb) / 0.3); }
}

/* Proof (Hancke likes it): same layout on black. Round 8 (#69): Google's gold
   stars, not brand blue, and the photo in its own colours (no blue tint). */
.proof .proof__count, .proof .quote__event { color: var(--ink-light-soft); }
.stars { color: #FBBC04; filter: none; }
.rating__stars .ic { fill: #FBBC04; }
/* Round 8 (#71): headline "Big event, hot sun. / Who's watching the ice? / We are."
   The answer sits on its own line, set like the first line but in full white. */
.hero__h1c { display: block; margin-top: 0.12em; font-size: clamp(1.6rem, 1.15rem + 1.9vw, 2.65rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.01em; color: var(--ink-light); font-stretch: 92%; }
@media (max-width: 860px) { .hero__h1c { font-size: 1.42rem; } }
/* #72: all three lines one size, one weight, white; the blue glow sits on "We are." */
.hero__h1 .hero__h1a, .hero__h1 .hero__h1b, .hero__h1 .hero__h1c {
  display: block; margin-top: 0; font-size: clamp(2.5rem, 1.3rem + 4.6vw, 5.2rem); font-weight: 800;
  line-height: 1; letter-spacing: -0.03em; font-stretch: 80%; color: var(--ink-light);
}
@media (max-width: 860px) { .hero__h1 .hero__h1a, .hero__h1 .hero__h1b, .hero__h1 .hero__h1c { font-size: 2.55rem; white-space: normal; } }
@media (min-width: 861px) { .hero__h1 .hero__h1b { white-space: nowrap; } }
/* #74 (replaces #73's drawn glacier.svg): "We are." filled with the hero's own ice
   cave photo (crop around the tunnel light, lifted so it reads on black), a pale
   edge and a soft blue glow. Flat blue stays as the fallback. */
.hero__h1c .neon-word {
  color: var(--copper);
  background: url(assets/cave-text-1200.webp) 40% 50% / cover no-repeat, var(--copper);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0.7px rgb(214 242 255 / 0.6);
  text-shadow: none;
  filter: drop-shadow(0 0 16px rgb(var(--neon-rgb) / 0.5)) drop-shadow(0 0 2px rgb(var(--neon-rgb) / 0.7));
  padding-right: 0.06em;
}
/* Round 8 (#70): the long hero sub became one proof line. */
.hero__rating { display: flex; width: max-content; align-items: center; gap: 0.4rem; margin-top: 0.55rem; font-size: clamp(1.02rem, 0.98rem + 0.25vw, 1.15rem); font-weight: 600; color: var(--ink-light-soft); }
.hero__rating .ic { width: 1.15em; height: 1.15em; fill: #FBBC04; stroke: none; }
.quote { background: transparent; border: 1px solid rgb(242 242 244 / 0.12); box-shadow: none; }
.quote__photo { position: relative; margin: -1.2rem -1.2rem 0; }
.numbers { background: transparent; border-radius: 0; border-top: 1px solid rgb(242 242 244 / 0.12); border-bottom: 1px solid rgb(242 242 244 / 0.12); padding-inline: 0; }
@media (max-width: 860px) { .quote__photo { margin: -1rem -1rem 0; } }

/* Size cards: outlines only. Large gets the blue line. */
.order .card__in { background: transparent; color: var(--ink-light); border: 1px solid rgb(242 242 244 / 0.16); box-shadow: none; }
.order .card__name, .order .card__people { color: var(--ink-light-soft); }
.order .card__for { font-weight: 500; color: var(--ink-light-soft); }
.order .rows { border-top-color: rgb(242 242 244 / 0.12); }
.order .rows li { grid-template-columns: 1fr; }
.order .card--large .card__in { background: rgb(var(--neon-rgb) / 0.05); border-color: rgb(var(--neon-rgb) / 0.65); }
.card__huge { text-shadow: none; }
.order .card:not(.card--large) .btn { background: transparent; color: var(--ink-light); box-shadow: 0 0 0 1px rgb(var(--neon-rgb) / 0.7) inset; }
@media (hover: hover) and (pointer: fine) {
  .order .card__in:hover { border-color: var(--copper); }
  .order .card:not(.card--large) .btn:hover { background: rgb(var(--neon-rgb) / 0.12); filter: none; }
}

/* Date note in the form: blue, not orange. */
.datenote { background: #EAF5FF; border-color: #A9D6FF; color: #08355E; }

/* ============================================================== MOTION ==
   Round 6 asked for scroll motion; round 7 asked for calm. Kept: fades and
   short rises tied to scroll, and the stars. Dropped: slides, pops, drift. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .asks > li, .whyus, .what__big, .promise, .quote, .numbers, .card, .close__title, .proof__head .h2 { animation: vt-rise linear both; animation-timeline: view(); animation-range: entry 5% cover 28%; }
    .stars .ic { animation: vt-star linear both; animation-timeline: view(); animation-range: entry 30% cover 34%; }
    .stars .ic:nth-child(2) { animation-range: entry 45% cover 37%; }
    .stars .ic:nth-child(3) { animation-range: entry 60% cover 40%; }
    .stars .ic:nth-child(4) { animation-range: entry 75% cover 43%; }
    .stars__last .ic { animation-range: entry 90% cover 46%; }
    .quote--main .quote__photo { animation: vt-wipe linear both; animation-timeline: view(); animation-range: entry 0% cover 36%; }
  }
}
@keyframes vt-rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes vt-star { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: none; } }
@keyframes vt-wipe { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }

/* ============================================================ ROUND 9 ==
   Phone check (Hancke, real handset): the cookie banner sat on the hero button
   and the bag and cubes ran under the promise line. Built phone-first: the
   hero keeps a floor strip clear while the cookie choice is open, the scene is
   clipped to its own box, and short screens get a smaller type tier. */
.cookie button { min-width: 0; padding: 0 0.8rem; font-size: 0.9rem; }
@media (max-width: 860px) {
  .hero { min-height: 500px; }
  .hero__copy { transition: padding-bottom 220ms var(--ease); }
  .cookie-pending .hero__copy { padding-bottom: calc(4.9rem + env(safe-area-inset-bottom, 0px)); }
  .hero__mid { margin-bottom: 0.7rem; }
  .hero__bag { top: -5%; bottom: auto; height: 97%; }
  .hero__cubes { bottom: 0; }
  .hero__mist { bottom: 0; }
  .hero__low { padding-top: 0.2rem; }
}
@media (max-width: 380px) {
  .cookie-pending .hero__copy { padding-bottom: calc(5.8rem + env(safe-area-inset-bottom, 0px)); }
  .cookie { font-size: 0.78rem; }
}
@media (max-width: 860px) and (max-height: 660px) {
  .hero__copy { padding-top: calc(max(10px, env(safe-area-inset-top)) + 1.3rem); }
  .hero__h1 .hero__h1a, .hero__h1 .hero__h1b, .hero__h1 .hero__h1c { font-size: 2.15rem; }
  .hero__mid { min-height: 110px; }
  .hero__promise { font-size: 1.3rem; }
  .hero__rating { margin-top: 0.35rem; font-size: 0.98rem; }
  .btn--hero { margin-top: 0.65rem; }
}