/* ============================================================
   LOOK LAUNDRY — design system
   Palette sampled directly from the client's own logo:
   navy #001F5D · azure #0A97CC · sky #5FC8E8 · orange #ED5B09
   Bricolage Grotesque (display) · Familjen Grotesk (body) · M PLUS Rounded 1c (labels)
   ============================================================ */

:root {
  --ink: #001F5D;        /* their navy — LOOK letters, outer ring */
  --ink-2: #062A70;      /* one step up, for banded sections */
  --tide: #0A97CC;       /* their azure — the word LAUNDRY */
  --tide-deep: #0A7BA8;  /* darker azure: passes AA as text on white */
  --aqua: #5FC8E8;       /* their sky blue — bubbles, splashes */
  --foam: #F2F7FB;       /* cool off-white */
  --linen: #FFFFFF;
  --zest: #ED5B09;       /* their orange — DRYER label, self-service icon */
  --zest-dry: #ED5B09;
  --ink-60: rgba(0, 31, 93, 0.62);
  --ink-14: rgba(0, 31, 93, 0.14);
  --foam-80: rgba(242, 247, 251, 0.8);

  --font-display: "Bricolage Grotesque", "Avenir Next", "Segoe UI", sans-serif;
  --font-body: "Familjen Grotesk", "Avenir Next", "Segoe UI", sans-serif;
  /* Labels are rounded, not monospaced — the mono read cold and technical
     against a business built on soap and bubbles. */
  --font-label: "M PLUS Rounded 1c", "Avenir Next", "Segoe UI", sans-serif;

  --w-content: 1160px;
  --pad-x: clamp(20px, 5vw, 64px);
  --radius: 18px;
  --stitch: 1.5px dashed rgba(0, 31, 93, 0.28);
  --stitch-aqua: 1.5px dashed rgba(95, 200, 232, 0.4);
  --shadow-card: 0 2px 6px rgba(0, 31, 93, 0.05), 0 18px 44px -18px rgba(0, 31, 93, 0.18);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--foam);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

em { font-style: italic; }

.skip-link {
  position: absolute; left: -9999px; top: 8px; z-index: 300;
  background: var(--ink); color: var(--linen); padding: 10px 18px; border-radius: 8px;
}
.skip-link:focus { left: 8px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-body); font-weight: 600; font-size: 16px;
  padding: 13px 26px; border-radius: 999px; border: 1.5px solid transparent;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: transform 0.2s var(--ease-out), background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.btn:active { transform: scale(0.97); }
.btn-lg { padding: 16px 34px; font-size: 17px; }
.btn-solid { background: var(--tide); color: var(--ink); }   /* navy on azure = 4.6:1 */
.btn-solid:hover { background: var(--aqua); box-shadow: 0 8px 28px -8px rgba(10, 151, 204, 0.65); }
.btn-ghost { background: transparent; color: var(--foam); border-color: rgba(242, 247, 251, 0.4); }
.btn-ghost:hover { border-color: var(--aqua); color: var(--aqua); }
.btn-ghost-ink { background: transparent; color: var(--ink); border-color: var(--ink-14); }
.btn-ghost-ink:hover { border-color: var(--ink); }
.btn-aqua { background: var(--aqua); color: var(--ink); }
.btn-aqua:hover { background: var(--linen); box-shadow: 0 8px 28px -8px rgba(95, 200, 232, 0.55); }

:is(a, button, summary, input, [tabindex]):focus-visible {
  outline: 2.5px solid var(--tide); outline-offset: 3px; border-radius: 6px;
}

/* ---------- header ---------- */
.site-head {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 14px var(--pad-x);
  transition: background 0.35s, box-shadow 0.35s, padding 0.35s;
}
.site-head.is-scrolled {
  background: rgba(242, 247, 251, 0.88);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--ink-14);
  padding-top: 10px; padding-bottom: 10px;
}

/* The client's badge, cut out by tools/cut-logo.py. One size per breakpoint, not
   shrinking on scroll: hash jumps offset by the header's height as measured. */
.brand { display: block; text-decoration: none; }
.brand-badge { display: block; width: auto; height: 56px; }

/* Padding replaces most of the old 30px gap — the bubble needs somewhere to
   sit, and the apparent spacing between labels stays about the same. */
.site-nav { display: flex; gap: 4px; }
.site-nav a {
  position: relative; isolation: isolate;
  color: var(--foam); text-decoration: none; font-weight: 500; font-size: 15.5px;
  opacity: 0.85; padding: 9px 15px; border-radius: 999px;
  transition: color 0.35s, opacity 0.2s;
}
/* The bubble. isolation:isolate on the link keeps this z-index:-1 inside the
   link's own stacking context — without it the pseudo drops behind the
   header's frosted background once .is-scrolled paints one. */
.site-nav a::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  background: rgba(242, 247, 251, 0.18);
  box-shadow: inset 0 0 0 1px rgba(242, 247, 251, 0.34);
  opacity: 0; transform: scale(0.8);
  transition: opacity 0.2s var(--ease-out), transform 0.34s var(--ease-out),
              background 0.35s, box-shadow 0.35s;
}
.site-nav a:hover, .site-nav a:focus-visible { opacity: 1; }
.site-nav a:hover::before, .site-nav a:focus-visible::before { opacity: 1; transform: scale(1); }
.site-head.is-scrolled .site-nav a { color: var(--ink); }
/* On the frosted light header the bubble goes azure instead of white. */
.site-head.is-scrolled .site-nav a::before {
  background: rgba(10, 151, 204, 0.1);
  box-shadow: inset 0 0 0 1px rgba(10, 151, 204, 0.3);
}

.head-actions { display: flex; align-items: center; gap: 14px; }
.btn-head { padding: 11px 22px; font-size: 15px; }
.menu-btn { display: none; }

/* ---------- eyebrows / sections ---------- */
/* No leading rule — the label carries itself and the dash only added clutter. */
.eyebrow {
  font-family: var(--font-label); font-weight: 500; font-size: 12px; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--tide-deep);
  display: inline-block;
}
.eyebrow-dark { color: var(--aqua); }

.section { padding: clamp(84px, 11vw, 150px) var(--pad-x); }
.section-head { max-width: var(--w-content); margin: 0 auto clamp(40px, 5vw, 68px); }
.section-title {
  font-family: var(--font-display); font-weight: 780; font-size: clamp(38px, 5.2vw, 68px);
  line-height: 1.02; letter-spacing: -0.025em; margin-top: 18px;
}
.section-title em { color: var(--tide-deep); font-style: normal; }
.on-dark { color: var(--foam); }
.on-dark em { color: var(--aqua); }
.section-sub { margin-top: 16px; max-width: 520px; color: var(--ink-60); font-size: 18px; }

/* ---------- hero ---------- */
.hero {
  position: relative; min-height: 100svh; display: flex; align-items: center;
  background: var(--ink); overflow: hidden;
}
.washwater, .bubblefield { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 2; opacity: 0;
  transition: opacity 1.1s var(--ease-out);
}
.hero-video.is-ready { opacity: 1; }
/* The shader sits under the video as the fallback if it never plays. */
.washwater { z-index: 0; }
.bubblefield { z-index: 3; }
/* Keeps the headline readable over whatever the footage is doing. */
.hero-scrim {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(100deg, rgba(0, 22, 53, 0.92) 0%, rgba(0, 22, 53, 0.72) 34%, rgba(0, 22, 53, 0.18) 62%, rgba(0, 22, 53, 0.35) 100%),
    linear-gradient(to top, rgba(0, 22, 53, 0.55) 0%, transparent 34%);
}
.washwater.is-fallback {
  background: radial-gradient(120% 90% at 70% 20%, #0B3D7A 0%, var(--ink) 55%),
    radial-gradient(80% 60% at 20% 85%, rgba(10, 151, 204, 0.35) 0%, transparent 60%);
}
.hero-inner {
  position: relative; z-index: 3; max-width: var(--w-content); width: 100%;
  margin: 0 auto; padding: 140px var(--pad-x) 110px;
}
.hero-title {
  font-family: var(--font-display); font-weight: 750; color: var(--foam);
  font-size: clamp(54px, 8.8vw, 118px); line-height: 1.0; letter-spacing: -0.025em;
  margin-top: 26px;
}
/* No wavy underline in the hero — over moving footage it crowds the frame. */
.hero-title em { color: var(--aqua); font-style: normal; }
.hero-sub {
  margin-top: 28px; max-width: 470px; color: rgba(242, 247, 251, 0.82); font-size: 18.5px;
}
.hero-ctas { margin-top: 38px; display: flex; flex-wrap: wrap; gap: 14px; }
/* Replaced a row of dot-separated micro-claims. Four short boasts strung on
   middots is the cheapest pattern in web design, and two of the four were
   invented anyway. One glass strip answering the question people actually
   arrive with — do you come to my street — reads as considered instead. */
.hero-serving {
  margin-top: 42px; display: inline-flex; align-items: center; gap: 13px;
  padding: 12px 22px 12px 18px; border-radius: 999px;
  background: rgba(242, 247, 251, 0.09);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(95, 200, 232, 0.24);
  color: rgba(242, 247, 251, 0.8); font-size: 15.5px; line-height: 1.4;
}
.hero-serving strong { color: var(--foam); font-weight: 600; }
.serving-dot {
  flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--aqua);
  box-shadow: 0 0 0 0 rgba(95, 200, 232, 0.55);
  animation: servingPulse 2.6s var(--ease-out) infinite;
}
@keyframes servingPulse {
  0% { box-shadow: 0 0 0 0 rgba(95, 200, 232, 0.5); }
  70% { box-shadow: 0 0 0 9px rgba(95, 200, 232, 0); }
  100% { box-shadow: 0 0 0 0 rgba(95, 200, 232, 0); }
}


/* ---------- first-order offer ---------- */
.offer-pill {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 30px;
  padding: 9px 20px 9px 12px; border-radius: 999px;
  background: rgba(255, 194, 75, 0.13); border: 1px solid rgba(255, 194, 75, 0.4);
  color: rgba(242, 247, 251, 0.9); font-size: 14.5px;
}
.offer-amt {
  background: var(--zest); color: var(--ink); font-weight: 700; font-size: 13.5px;
  padding: 4px 12px; border-radius: 999px;
}
.sub-offer { color: var(--tide-deep); }

/* ---------- guarantee ----------
   Stays light so the page keeps alternating, so the photo is high-key and
   sits under a white scrim rather than a navy one. */
.guarantee { background: var(--linen); position: relative; overflow: hidden; }
.guarantee::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: url("../assets/img/promise-bg.jpg") center / cover no-repeat;
  /* The plate is deliberately high-key, so it needs contrast to read at all. */
  opacity: 0.95; filter: contrast(1.12) saturate(1.08);
}
/* Heavy at the top where the heading and copy sit, then opens right up across
   the middle so the folds are actually visible behind the cards. */
.guarantee::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(255, 255, 255, 0.93) 0%,
    rgba(255, 255, 255, 0.80) 18%,
    rgba(255, 255, 255, 0.30) 42%,
    rgba(255, 255, 255, 0.26) 74%,
    rgba(255, 255, 255, 0.72) 100%);
}
.guarantee > * { position: relative; z-index: 2; }
.guar-inner { max-width: var(--w-content); margin: 0 auto; }
.guar-head { max-width: 640px; margin-bottom: clamp(36px, 4.5vw, 56px); }
.guar-list {
  list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px;
}
/* Near-solid white + blur: the old foam wash disappeared against the photo. */
.guar-list li {
  background: rgba(255, 255, 255, 0.84); border-radius: var(--radius); padding: 30px 28px;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 31, 93, 0.07); box-shadow: var(--shadow-card);
  transition: border-color 0.3s, transform 0.3s var(--ease-out), background 0.3s;
}
.guar-list li:hover {
  border-color: rgba(10, 151, 204, 0.35); transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.94);
}
.guar-list svg {
  width: 32px; height: 32px; fill: none; stroke: var(--tide);
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 14px;
}
.guar-list h3 { font-size: 19px; font-weight: 650; letter-spacing: -0.01em; margin-bottom: 8px; }
.guar-list p { color: var(--ink-60); font-size: 15.5px; }

/* ---------- estimator ---------- */
.estimator { background: var(--ink); position: relative; overflow: hidden; }
/* Flat-lay of folded stacks — the literal subject of this calculator. */
.estimator::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: url("../assets/img/estimator-bg.jpg") center / cover no-repeat;
  opacity: 0.55;
}
.estimator::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(0, 22, 53, 0.94) 0%, rgba(0, 22, 53, 0.62) 26%, rgba(0, 22, 53, 0.58) 74%, rgba(0, 22, 53, 0.92) 100%);
}
.estimator > * { position: relative; z-index: 2; }
.estimator .section-head { color: var(--foam); }
.estimator .section-title { color: var(--foam); }
.estimator .section-title em { color: var(--aqua); }
.estimator .eyebrow { color: var(--aqua); }
.estimator .eyebrow::before { border-top: var(--stitch-aqua); }
.estimator .section-sub { color: rgba(242, 247, 251, 0.72); max-width: 580px; }

.est-wrap {
  max-width: var(--w-content); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 26px;
  align-items: start;
}
.est-panel {
  /* Opaque enough to hold the item rows over the photo behind it. */
  background: rgba(0, 24, 60, 0.72); border: 1px solid rgba(95, 200, 232, 0.22);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-radius: var(--radius); padding: 26px 26px 12px;
}
.est-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-bottom: 24px; }
.est-preset-label {
  font-family: var(--font-label); font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; color: rgba(242, 247, 251, 0.5); margin-right: 4px;
}
.est-preset {
  background: transparent; border: 1.5px solid rgba(242, 247, 251, 0.22); color: rgba(242, 247, 251, 0.85);
  font-family: var(--font-body); font-size: 14px; font-weight: 600;
  padding: 8px 16px; border-radius: 999px; cursor: pointer;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.est-preset:hover { border-color: var(--aqua); color: var(--aqua); }
.est-preset.is-on { border-color: var(--tide); background: rgba(10, 151, 204, 0.18); color: var(--aqua); }

.est-items { list-style: none; }
.est-item {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 14px;
  padding: 13px 0; border-bottom: 1px solid rgba(242, 247, 251, 0.08);
}
.est-items li:last-child { border-bottom: none; }
.est-name { color: var(--foam); font-weight: 600; font-size: 15.5px; }
.est-each {
  display: block; font-family: var(--font-label); font-size: 11px;
  letter-spacing: 0.08em; color: rgba(242, 247, 251, 0.42); margin-top: 2px;
}
.est-stepper { display: flex; align-items: center; gap: 4px; }
.est-btn {
  width: 36px; height: 36px; border-radius: 50%; cursor: pointer;
  background: rgba(242, 247, 251, 0.07); border: 1.5px solid rgba(242, 247, 251, 0.2);
  color: var(--foam); font-size: 19px; line-height: 1;
  display: grid; place-items: center;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.est-btn:hover:not(:disabled) { border-color: var(--tide); background: rgba(10, 151, 204, 0.22); color: var(--aqua); }
.est-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.est-count {
  min-width: 42px; text-align: center; color: var(--foam);
  font-weight: 700; font-size: 17px; font-variant-numeric: tabular-nums;
}

.est-result {
  background: var(--linen); border-radius: var(--radius); padding: 30px 28px 26px;
  text-align: center; position: sticky; top: 92px;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.5);
}
.est-hamper { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.est-bag {
  position: relative; width: 92px; height: 104px; overflow: hidden;
  border: 3px solid var(--ink); border-radius: 8px 8px 14px 14px;
  background: var(--foam); display: grid; place-items: center;
}
.est-fill {
  position: absolute; left: 0; right: 0; bottom: 0; height: 0%;
  background: linear-gradient(180deg, var(--aqua), var(--tide));
  transition: height 0.55s var(--ease-out);
}
.est-bag-label {
  position: relative; font-family: var(--font-display); font-weight: 750;
  font-size: 40px; color: var(--ink); font-variant-numeric: tabular-nums;
}
.est-bag-cap {
  font-family: var(--font-label); font-size: 11px; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--tide-deep);
}
.est-weight { margin-top: 16px; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.est-loads { color: var(--ink-60); font-weight: 500; font-size: 16px; }

.est-compare {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 20px 0 14px;
}
.est-opt {
  border: 1.5px solid var(--ink-14); border-radius: 12px; padding: 14px 8px 12px;
  transition: border-color 0.3s, background 0.3s;
}
.est-opt.is-best { border-color: var(--tide); background: rgba(10, 151, 204, 0.07); box-shadow: 0 0 0 1px var(--tide); }
.est-opt-name {
  font-family: var(--font-label); font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-60);
}
.est-opt-price { font-size: 25px; font-weight: 700; letter-spacing: -0.02em; margin-top: 5px; }
.est-opt-sub { font-size: 12.5px; color: var(--ink-60); margin-top: 2px; }
.est-verdict {
  font-size: 14.5px; color: var(--ink-60); min-height: 42px;
  display: grid; place-items: center; padding: 0 4px;
}
.est-verdict strong { color: var(--tide-deep); }
.est-cta { width: 100%; margin-top: 4px; }
.est-fine { font-size: 12px; color: var(--ink-60); opacity: 0.75; margin-top: 12px; }

/* ---------- ticker ---------- */
.ticker {
  overflow: hidden; background: var(--linen);
  border-top: var(--stitch); border-bottom: var(--stitch);
  padding: 15px 0;
}
.ticker-track {
  display: flex; gap: 54px; width: max-content; will-change: transform;
  font-family: var(--font-label); font-size: 13.5px; letter-spacing: 0.34em;
  color: var(--ink-60); text-transform: uppercase; white-space: nowrap;
}
.ticker-track .tk-sep { color: var(--tide); letter-spacing: 0; }

/* ---------- how / timeline ----------
   Navy so the page alternates cleanly. Before this, ticker → how → services
   were three light blocks in a row; everything after already alternated. */
.head-link {
  display: inline-block; margin-top: 20px; text-decoration: none; font-weight: 600;
  font-size: 16px; color: var(--tide-deep); border-bottom: 1.5px solid transparent;
  transition: border-color 0.2s, color 0.2s;
}
.head-link:hover { border-bottom-color: currentColor; }
.how .head-link { color: var(--aqua); }

.how { background: var(--ink); }
.how .section-title { color: var(--foam); }
.how .section-title em { color: var(--aqua); }
.how .eyebrow { color: var(--aqua); }
.how .timeline::before { border-top: var(--stitch-aqua); }
.how .tl-time { color: var(--aqua); background: var(--ink); }
.how .tl-time::before { box-shadow: 0 0 0 4px rgba(95, 200, 232, 0.22); }
.timeline {
  max-width: var(--w-content); margin: 0 auto; list-style: none;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px;
  position: relative;
}
.timeline::before {
  content: ""; position: absolute; top: 13px; left: 4%; right: 4%;
  border-top: var(--stitch); z-index: 0;
}
.tl-item { position: relative; z-index: 1; }
.tl-time {
  font-family: var(--font-label); font-weight: 500; font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--tide-deep); background: var(--foam); display: inline-block; padding-right: 14px;
  margin-bottom: 20px; position: relative;
}
.tl-time::before {
  content: ""; display: inline-block; width: 11px; height: 11px; border-radius: 50%;
  background: var(--tide); margin-right: 12px; box-shadow: 0 0 0 4px rgba(10, 151, 204, 0.18);
}
.tl-card {
  background: var(--linen); border-radius: var(--radius); padding: 30px 28px 34px;
  box-shadow: var(--shadow-card); height: 100%; overflow: hidden;
}
.tl-photo { margin: -30px -28px 22px; aspect-ratio: 16 / 10; overflow: hidden; }
.tl-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tl-card h3 { font-size: 20px; font-weight: 650; letter-spacing: -0.01em; margin-bottom: 10px; }
.tl-card p { color: var(--ink-60); font-size: 16px; }

/* ---------- order tracker ---------- */
.track {
  max-width: var(--w-content); margin: clamp(56px, 6vw, 88px) auto 0;
  background: rgba(242, 247, 251, 0.05); border: 1px solid rgba(95, 200, 232, 0.18);
  border-radius: var(--radius); padding: clamp(28px, 3.4vw, 40px) clamp(24px, 3vw, 40px);
}
.track-head { text-align: center; margin-bottom: clamp(28px, 3vw, 38px); }
/* On the how-it-works page the rail sits straight under the section heading,
   which already carries its own bottom margin — don't stack two gaps. */
.section-head + .track { margin-top: 0; }
.track-title {
  font-family: var(--font-display); font-weight: 700; color: var(--foam);
  font-size: clamp(22px, 2.4vw, 30px); letter-spacing: -0.015em; line-height: 1.15;
}
.track-sub { color: rgba(242, 247, 251, 0.6); font-size: 15.5px; margin-top: 8px; }

.track-rail {
  list-style: none; display: grid; grid-template-columns: repeat(4, 1fr);
  position: relative; margin-bottom: clamp(26px, 3vw, 36px);
}
/* connector sits behind the dots */
.track-rail::before {
  content: ""; position: absolute; top: 11px; left: 12.5%; right: 12.5%;
  border-top: 2px dashed rgba(95, 200, 232, 0.28);
}
.track-step button {
  background: none; border: none; padding: 0; cursor: pointer; width: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  font-family: var(--font-label); font-weight: 500; font-size: 12.5px;
  letter-spacing: 0.08em; color: rgba(242, 247, 251, 0.55);
  transition: color 0.3s;
}
.track-dot {
  width: 22px; height: 22px; border-radius: 50%; position: relative; z-index: 1;
  background: var(--ink); border: 2px solid rgba(95, 200, 232, 0.4);
  transition: background 0.35s, border-color 0.35s, box-shadow 0.35s, transform 0.35s var(--ease-out);
}
.track-step.is-done button { color: rgba(242, 247, 251, 0.8); }
.track-step.is-done .track-dot { background: var(--tide); border-color: var(--tide); }
.track-step.is-current button { color: var(--aqua); }
.track-step.is-current .track-dot {
  background: var(--aqua); border-color: var(--aqua); transform: scale(1.18);
  box-shadow: 0 0 0 6px rgba(95, 200, 232, 0.18);
}
.track-step button:hover .track-dot { border-color: var(--aqua); }

.track-phone { display: grid; place-items: center; }
.track-bubble {
  position: relative; max-width: 460px; width: 100%;
  background: var(--linen); color: var(--ink); border-radius: 16px 16px 16px 5px;
  padding: 16px 20px 14px; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.55);
}
.track-from {
  font-family: var(--font-label); font-weight: 500; font-size: 10.5px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--tide-deep); margin-bottom: 6px;
}
.track-msg { font-size: 16.5px; line-height: 1.5; min-height: 2.9em; }
.track-time { font-size: 12.5px; color: var(--ink-60); margin-top: 6px; }
.track-bubble.is-swapping .track-msg, .track-bubble.is-swapping .track-time { opacity: 0; }
.track-msg, .track-time { transition: opacity 0.22s; }

/* ---------- services ---------- */
.services { background: var(--linen); }
.svc-grid {
  max-width: var(--w-content); margin: 0 auto;
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 22px;
}
.svc-card {
  grid-column: span 4; background: var(--foam); border-radius: var(--radius);
  padding: 34px 30px 30px; display: flex; flex-direction: column; gap: 12px;
  border: 1px solid transparent; overflow: hidden;
  transition: transform 0.35s var(--ease-out), border-color 0.35s, box-shadow 0.35s;
}
.svc-photo { margin: -34px -30px 10px; aspect-ratio: 16 / 9; overflow: hidden; }
.svc-flag-photo { overflow: hidden; }
.svc-photo img, .svc-flag-photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.6s var(--ease-out);
}
.svc-card:hover .svc-photo img,
.svc-card:hover .svc-flag-photo img { transform: scale(1.045); }
.svc-card:hover { transform: translateY(-5px); border-color: rgba(10, 151, 204, 0.35); box-shadow: var(--shadow-card); }
/* The two wide cards (Pickup & Delivery, Commercial) share one split layout so
   they read as a matched pair. Only the flagship is navy. */
.svc-flagship, .svc-wide {
  grid-column: span 8; padding: 0;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0;
}
.svc-flagship { background: var(--ink); color: var(--foam); }
.svc-flag-body { padding: 34px 30px 30px; display: flex; flex-direction: column; gap: 12px; }
.svc-flag-photo { min-height: 240px; }
.svc-icon { width: 40px; height: 40px; fill: none; stroke: var(--tide); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.svc-flagship .svc-icon { stroke: var(--aqua); }
/* Service names are the scanning layer — sized up for legibility. */
.svc-card h3 {
  font-family: var(--font-display); font-size: 30px; font-weight: 720;
  letter-spacing: -0.02em; line-height: 1.12; margin-top: 8px;
}
.svc-card p { color: var(--ink-60); font-size: 16px; flex-grow: 1; }
.svc-flagship p { color: rgba(242, 247, 251, 0.75); }
.svc-link {
  background: none; border: none; padding: 0; cursor: pointer; text-align: left;
  font-family: var(--font-body); font-weight: 600; font-size: 15.5px; color: var(--tide-deep);
  text-decoration: none; width: fit-content; transition: color 0.2s;
}
.svc-link:hover { color: var(--ink); }
.svc-flagship .svc-link { color: var(--aqua); }
.svc-flagship .svc-link:hover { color: var(--linen); }

/* ---------- standard / drum ---------- */
.standard { background: var(--ink); }
.standard-grid {
  max-width: var(--w-content); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 6vw, 90px);
  align-items: center;
}
.drum-wrap { max-width: 510px; margin: 0 auto; width: 100%; position: relative; }
.drum-port {
  position: absolute; inset: 7.5%; border-radius: 50%; overflow: hidden;
  z-index: 2; opacity: 0; transition: opacity 1s var(--ease-out);
  box-shadow: 0 24px 60px -14px rgba(0, 0, 0, 0.6), inset 0 0 0 3px rgba(46, 99, 168, 0.55);
}
.drum-port.is-ready { opacity: 1; }
.drum-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.drum-svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 24px 60px rgba(0, 0, 0, 0.45)); }
.standard-list { list-style: none; margin-top: 34px; display: grid; gap: 22px; }
.standard-list li {
  color: rgba(242, 247, 251, 0.78); font-size: 17px; padding-left: 30px; position: relative;
}
.standard-list li::before {
  content: ""; position: absolute; left: 0; top: 7px; width: 12px; height: 12px;
  border-radius: 50%; border: 2.5px solid var(--tide);
}
.standard-list strong { color: var(--foam); font-weight: 650; }

/* ---------- pricing ---------- */
.pricing { background: var(--foam); }
.tag-row {
  max-width: var(--w-content); margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; align-items: stretch;
}
.price-tag {
  position: relative; background: var(--linen); border-radius: 14px;
  padding: 46px 30px 32px; box-shadow: var(--shadow-card);
  border: 1px solid rgba(0, 31, 93, 0.06);
  display: flex; flex-direction: column;
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s;
}
.price-tag:hover { transform: translateY(-6px) rotate(-0.4deg); box-shadow: 0 6px 14px rgba(0, 31, 93, 0.06), 0 30px 60px -20px rgba(0, 31, 93, 0.28); }
.price-tag::before {
  content: ""; position: absolute; inset: 9px; border-radius: 9px;
  border: var(--stitch); pointer-events: none; opacity: 0.55;
}
.tag-grommet {
  position: absolute; top: 17px; left: 50%; transform: translateX(-50%);
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--foam); box-shadow: inset 0 0 0 3.5px rgba(0, 31, 93, 0.35);
}
.tag-flag {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--zest); color: var(--ink); font-family: var(--font-label);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 5px 14px; border-radius: 999px; white-space: nowrap;
}
.tag-popular { border-color: rgba(10, 151, 204, 0.5); }
.tag-count { font-family: var(--font-display); font-size: 31px; font-weight: 700; letter-spacing: -0.015em; text-align: center; }
.tag-loads { font-family: var(--font-label); font-size: 12.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tide-deep); text-align: center; margin-top: 6px; }
.tag-price { text-align: center; margin: 22px 0 4px; font-size: 44px; font-weight: 700; letter-spacing: -0.03em; }
.tag-price span { font-size: 15px; font-weight: 500; color: var(--ink-60); letter-spacing: 0; }
.tag-list { list-style: none; margin: 20px 0 26px; display: grid; gap: 10px; flex-grow: 1; }
.tag-list li { font-size: 15.5px; color: var(--ink-60); padding-left: 24px; position: relative; }
.tag-list li::before { content: "✓"; position: absolute; left: 0; color: var(--tide); font-weight: 700; }
.tag-btn { width: 100%; }
.pricing-alt {
  max-width: var(--w-content); margin: 44px auto 0; text-align: center;
  font-size: 16px; color: var(--ink-60);
  border-top: var(--stitch); padding-top: 28px;
}
.pricing-alt strong { color: var(--ink); }

/* ---------- commercial ---------- */
/* Short bands: a headline, one line of copy and a button do not need the
   same 150px the content-heavy sections get, or they float. */
.commercial {
  background: var(--ink-2); position: relative; overflow: hidden;
  padding-top: clamp(72px, 7.5vw, 104px); padding-bottom: clamp(72px, 7.5vw, 104px);
}
.commercial::after {
  content: ""; position: absolute; right: -140px; top: -140px; width: 480px; height: 480px;
  border-radius: 50%; border: 90px solid rgba(10, 151, 204, 0.08); pointer-events: none;
  z-index: 2;
}
.commercial-video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  /* The band is 2.46:1 over 16:9 footage, so cover throws away 28% of the
     height. Centred, that ate the tops of the steam plumes and kept a strip of
     dark wet floor that carries nothing. Bias the window upward instead. */
  object-position: 50% 8%;
  /* The plumes are backlit wisps against near-black; without a push they sink
     into the scrim entirely. */
  filter: contrast(1.14) brightness(1.12) saturate(1.06);
  z-index: 0; opacity: 0; transition: opacity 1.1s var(--ease-out);
}
.commercial-video.is-ready { opacity: 1; }
/* Copy is centred here, so the scrim has to protect the middle, not one edge. */
.commercial-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    /* Tight enough to hold the centred copy and no tighter — the old 62%/78%
       ellipse was still 42% opaque out at the corners, which is where all the
       steam is. */
    radial-gradient(46% 66% at 50% 52%, rgba(6, 42, 112, 0.9) 0%, rgba(6, 42, 112, 0.66) 48%, rgba(6, 42, 112, 0.1) 100%),
    /* The top band was the real culprit: 55% navy laid straight over the
       plumes. The bottom band stays — it grounds the section against the FAQ. */
    linear-gradient(to bottom, rgba(6, 42, 112, 0.2) 0%, transparent 20%, transparent 76%, rgba(6, 42, 112, 0.58) 100%);
}
.commercial-inner { max-width: 760px; margin: 0 auto; text-align: center; position: relative; z-index: 1; }
.commercial-inner .eyebrow { justify-content: center; }
/* Opened the scrim to let the steam through, so the copy needs its own
   headroom rather than relying on a heavy plate behind it. */
.commercial-sub { color: rgba(242, 247, 251, 0.88); font-size: 18px; margin: 20px auto 34px; max-width: 560px; }

/* ---------- faq ---------- */
.faq { background: var(--linen); }
.faq-list { max-width: 780px; margin: 0 auto; }
.faq-item { border-bottom: var(--stitch); }
.faq-item summary {
  list-style: none; cursor: pointer; padding: 24px 44px 24px 4px;
  font-size: 19px; font-weight: 600; letter-spacing: -0.01em; position: relative;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  font-size: 26px; font-weight: 400; color: var(--tide); transition: transform 0.3s var(--ease-out);
}
.faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-item p { padding: 0 44px 26px 4px; color: var(--ink-60); max-width: 640px; }

/* ---------- final cta ---------- */
.final-cta {
  position: relative; overflow: hidden; text-align: center;
  /* The footer follows immediately in the same navy and adds its own 70px on
     top, so a full bottom pad here just doubles up into dead space. */
  padding: clamp(84px, 9vw, 124px) var(--pad-x) clamp(46px, 4.5vw, 64px);
  background:
    radial-gradient(90% 130% at 50% 115%, rgba(10, 151, 204, 0.55) 0%, transparent 62%),
    radial-gradient(70% 90% at 82% -10%, rgba(18, 54, 92, 0.9) 0%, transparent 60%),
    var(--ink);
}
/* Warm tungsten plate on a navy section: cool and desaturate it a touch so it
   sits inside the palette, then scrim the middle where the copy lands. */
/* This plate is symmetrical and already centred, so no offset hack is needed.
   White-on-black also needs far less correction than the warm walnut version. */
.close-video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: 50% 46%;
  z-index: 0; opacity: 0;
  filter: saturate(0.9) brightness(0.96);
  transition: opacity 1.2s var(--ease-out);
}
.close-video.is-ready { opacity: 1; }
.close-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(0, 24, 62, 0.94) 0%, rgba(0, 24, 62, 0.72) 38%, rgba(0, 24, 62, 0.66) 66%, rgba(0, 24, 62, 0.9) 100%),
    radial-gradient(70% 60% at 50% 30%, rgba(0, 24, 62, 0.5) 0%, transparent 70%);
}
.final-inner { position: relative; z-index: 2; }

.final-title {
  font-family: var(--font-display); font-weight: 720; color: var(--foam);
  font-size: clamp(38px, 5.6vw, 72px); line-height: 1.02; letter-spacing: -0.02em;
}
.final-title em {
  color: var(--aqua); font-style: normal;
  text-decoration: underline; text-decoration-style: wavy;
  text-decoration-color: rgba(95, 200, 232, 0.45);
  text-decoration-thickness: 0.045em; text-underline-offset: 0.16em;
}
.final-sub { color: rgba(242, 247, 251, 0.75); font-size: 18.5px; margin: 20px 0 36px; }
.final-sub a {
  color: var(--foam); font-weight: 600; text-decoration: underline;
  text-decoration-color: rgba(95, 200, 232, 0.45); text-underline-offset: 0.18em;
}
.final-sub a:hover { color: var(--aqua); }
.final-inner .eyebrow { margin-bottom: 18px; }

.final-bubbles span {
  position: absolute; bottom: -60px; border-radius: 50%;
  border: 1.5px solid rgba(95, 200, 232, 0.35);
  background: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, 0.16), rgba(95, 200, 232, 0.04) 60%);
  animation: rise 13s linear infinite;
}
.final-bubbles span:nth-child(1) { left: 8%; width: 34px; height: 34px; animation-duration: 15s; }
.final-bubbles span:nth-child(2) { left: 22%; width: 18px; height: 18px; animation-delay: 3s; }
.final-bubbles span:nth-child(3) { left: 46%; width: 26px; height: 26px; animation-delay: 6.5s; animation-duration: 17s; }
.final-bubbles span:nth-child(4) { left: 64%; width: 14px; height: 14px; animation-delay: 1.5s; }
.final-bubbles span:nth-child(5) { left: 80%; width: 40px; height: 40px; animation-delay: 8s; animation-duration: 19s; }
.final-bubbles span:nth-child(6) { left: 92%; width: 20px; height: 20px; animation-delay: 5s; }
@keyframes rise {
  0% { transform: translateY(0) translateX(0); opacity: 0; }
  8% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(-115vh) translateX(24px); opacity: 0; }
}

/* ---------- footer ---------- */
.site-foot {
  background: var(--ink); color: rgba(242, 247, 251, 0.72);
  padding: 54px var(--pad-x) 34px;
  /* CTA and footer share a navy — without this they merge into one slab. */
  border-top: 1px solid rgba(95, 200, 232, 0.16);
}
.foot-grid {
  max-width: var(--w-content); margin: 0 auto;
  display: grid; grid-template-columns: 1.5fr 1.3fr 1.3fr 1.4fr; gap: 44px;
  padding-bottom: 40px; border-bottom: var(--stitch-aqua);
}
/* The badge carries the tagline, so there is no separate line under it. */
.foot-logo { display: block; width: 200px; height: auto; }
/* Contact detail moved down from the closing section so the footage there is
   unobstructed. Merged, not duplicated — address and hours already lived here. */
.foot-head {
  font-family: var(--font-label); font-weight: 500; font-size: 11.5px;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--aqua);
  margin-bottom: 14px; display: flex; align-items: center; gap: 9px;
}
.foot-icon {
  width: 17px; height: 17px; flex: none; fill: none; stroke: var(--aqua);
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
.foot-col p { font-size: 15.5px; line-height: 1.75; }
.foot-col a { color: var(--foam); text-decoration: none; }
.foot-col a:hover { color: var(--aqua); }
.foot-note { font-size: 14px !important; line-height: 1.6 !important; color: rgba(242, 247, 251, 0.58); margin-top: 8px; }
.foot-note strong { color: var(--foam); }
.foot-link {
  display: inline-block; margin-top: 10px; font-weight: 600; font-size: 14.5px;
  color: var(--aqua) !important;
}
.foot-social { margin-top: 14px; }
/* The client publishes no social profiles yet. Dead href="#" links jump the
   page to the top when clicked, which reads as broken in a demo — these are
   labels until there are real URLs to point at. */
.foot-social span { color: rgba(242, 247, 251, 0.5); }
.foot-cta { margin-top: 18px; padding: 11px 22px; font-size: 15px; }
.foot-care { font-family: var(--font-label); font-size: 13px; line-height: 1.9; }
.foot-hours {
  display: grid; grid-template-columns: auto 1fr; gap: 2px 14px;
  margin-top: 16px; font-size: 14px;
}
.foot-hours span:nth-child(odd) { color: var(--aqua); }
.foot-fine {
  max-width: var(--w-content); margin: 24px auto 0; font-size: 13px; opacity: 0.6;
  display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap;
}

/* ---------- wizard ---------- */
.wizard { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; }
.wizard[hidden] { display: none; }
.wizard-backdrop {
  position: absolute; inset: 0; background: rgba(7, 16, 31, 0.66);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.wizard-panel {
  position: relative; width: min(620px, 100%); max-height: min(88vh, 780px); overflow-y: auto;
  background: var(--linen); border-radius: 22px; padding: 42px 44px 38px;
  box-shadow: 0 40px 120px -20px rgba(0, 0, 0, 0.5);
}
.wizard-x {
  position: absolute; top: 16px; right: 18px; width: 40px; height: 40px;
  border: none; background: var(--foam); border-radius: 50%; font-size: 22px; line-height: 1;
  cursor: pointer; color: var(--ink); transition: background 0.2s;
}
.wizard-x:hover { background: var(--ink-14); }
.wizard-eyebrow { margin-bottom: 10px; }
.wizard-title {
  font-family: var(--font-display); font-weight: 680; font-size: clamp(25px, 4vw, 32px);
  letter-spacing: -0.02em; line-height: 1.1;
}
.wizard-title em { color: var(--tide-deep); font-style: normal; }

.wiz-progress {
  list-style: none; display: flex; gap: 8px; margin: 26px 0 28px;
  font-family: var(--font-label); font-size: 11.5px; letter-spacing: 0.2em; text-transform: uppercase;
}
.wiz-progress li {
  flex: 1; text-align: center; padding-bottom: 10px; color: var(--ink-60); opacity: 0.55;
  border-bottom: 2.5px dashed var(--ink-14); transition: color 0.3s, border-color 0.3s, opacity 0.3s;
}
.wiz-progress li.is-active { color: var(--tide-deep); border-bottom: 2.5px solid var(--tide); opacity: 1; }
.wiz-progress li.is-done { color: var(--ink); border-bottom: 2.5px solid var(--ink); opacity: 0.8; }

.wiz-stage { border: none; display: none; }
.wiz-stage.is-active { display: block; animation: stageIn 0.4s var(--ease-out); }
@keyframes stageIn { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }

.field { margin-bottom: 18px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field-row .field-zip { max-width: 100%; }
.field label { display: block; font-weight: 600; font-size: 14.5px; margin-bottom: 7px; }
.label-opt { font-weight: 400; color: var(--ink-60); }
.field input {
  width: 100%; padding: 13px 15px; font: inherit; font-size: 16px;
  border: 1.5px solid var(--ink-14); border-radius: 10px; background: var(--foam);
  transition: border-color 0.2s, background 0.2s;
}
.field input:focus { border-color: var(--tide); background: var(--linen); outline: none; }
.field-hint { font-size: 13px; color: var(--ink-60); margin-top: 6px; }
.field-err { display: none; font-size: 13.5px; color: #C6473E; margin-top: 6px; font-weight: 500; }
.field.has-err input { border-color: #C6473E; }
.field.has-err .field-err { display: block; }

.aud-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 22px; }
.aud-card {
  position: relative; display: flex; flex-direction: column; gap: 3px; cursor: pointer;
  border: 1.5px solid var(--ink-14); border-radius: 14px; padding: 18px 18px 16px;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.aud-card input { position: absolute; opacity: 0; pointer-events: none; }
.aud-card svg { width: 30px; height: 30px; fill: none; stroke: var(--ink-60); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 8px; transition: stroke 0.2s; }
.aud-name { font-weight: 650; font-size: 16.5px; }
.aud-desc { font-size: 13.5px; color: var(--ink-60); }
.aud-card:has(input:checked) { border-color: var(--tide); background: rgba(10, 151, 204, 0.06); box-shadow: 0 0 0 1px var(--tide); }
.aud-card:has(input:checked) svg { stroke: var(--tide-deep); }

.plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px; }
.plan-card {
  position: relative; cursor: pointer; text-align: center;
  border: 1.5px solid var(--ink-14); border-radius: 14px; padding: 24px 10px 18px;
  display: flex; flex-direction: column; gap: 4px;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s, transform 0.2s var(--ease-out);
}
.plan-card:hover { transform: translateY(-2px); }
.plan-card input { position: absolute; opacity: 0; pointer-events: none; }
.plan-flag {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  background: var(--zest); font-family: var(--font-label); font-size: 9.5px;
  letter-spacing: 0.14em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px;
}
.plan-count { font-family: var(--font-display); font-size: 20px; font-weight: 680; }
.plan-loads { font-family: var(--font-label); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tide-deep); }
.plan-price { font-weight: 700; font-size: 19px; margin-top: 6px; }
.plan-card:has(input:checked) { border-color: var(--tide); background: rgba(10, 151, 204, 0.07); box-shadow: 0 0 0 1px var(--tide); }
.window-block { margin: 4px 0 18px; }
.window-label {
  font-family: var(--font-label); font-size: 11.5px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--tide-deep); margin-bottom: 10px;
}
.window-row { display: flex; gap: 10px; flex-wrap: wrap; }
.window-chip { position: relative; cursor: pointer; }
.window-chip input { position: absolute; opacity: 0; pointer-events: none; }
.window-chip span {
  display: inline-block; padding: 10px 20px; border-radius: 999px;
  border: 1.5px solid var(--ink-14); font-weight: 600; font-size: 14.5px;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.window-chip:hover span { border-color: var(--tide); }
.window-chip:has(input:checked) span {
  border-color: var(--tide); background: rgba(10, 151, 204, 0.09); color: var(--tide-deep);
  box-shadow: 0 0 0 1px var(--tide);
}
.window-chip:has(input:focus-visible) span { outline: 2.5px solid var(--tide); outline-offset: 2px; }

.plan-fine { font-size: 13.5px; color: var(--ink-60); margin-bottom: 4px; }

/* ---------- commercial quote stage ----------
   Reuses .window-block / .window-chip so the radio and checkbox rows look
   like the pickup-window chips the consumer path already uses. */
.quote-lede {
  font-size: 15.5px; color: var(--ink-60); margin-bottom: 22px;
  padding-bottom: 20px; border-bottom: var(--stitch);
}
.wiz-stage[data-stage="quote"] .window-block { margin-bottom: 22px; }
.wiz-stage[data-stage="quote"] .window-row { gap: 8px; }
.wiz-stage[data-stage="quote"] .window-chip span { padding: 9px 15px; font-size: 14.5px; }
.quote-hint { margin-top: 10px; font-size: 13px; color: var(--ink-60); }


.wiz-nav { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-top: 26px; }
.wiz-nav-center { justify-content: center; }
.wiz-nav-end { justify-content: flex-end; }
/* The mailer's answer when a booking could not be sent; filled by wizard.js. */
.wiz-err { font-size: 14px; color: #C6473E; font-weight: 500; margin-top: 16px; }
/* Bot honeypot: a field people never see or tab to. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.wiz-reassure {
  font-size: 13.5px; color: var(--ink-60); margin-top: 16px;
  padding-left: 26px; position: relative;
}
.wiz-reassure::before {
  content: "✓"; position: absolute; left: 4px; top: 0;
  color: var(--tide); font-weight: 700;
}
.wiz-reassure strong { color: var(--ink); }

/* recurring toggle */
.repeat-row {
  display: grid; grid-template-columns: auto 1fr; gap: 13px; align-items: start;
  cursor: pointer; border: 1.5px solid var(--ink-14); border-radius: 14px;
  padding: 16px 18px; margin-bottom: 16px; transition: border-color 0.2s, background 0.2s;
}
.repeat-row input { position: absolute; opacity: 0; pointer-events: none; }
.repeat-box {
  width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--ink-14);
  display: grid; place-items: center; margin-top: 1px; transition: border-color 0.2s, background 0.2s;
}
.repeat-box::after {
  content: "✓"; color: var(--linen); font-size: 14px; font-weight: 700;
  opacity: 0; transform: scale(0.6); transition: opacity 0.2s, transform 0.2s var(--ease-out);
}
.repeat-row:has(input:checked) { border-color: var(--tide); background: rgba(10, 151, 204, 0.06); }
.repeat-row:has(input:checked) .repeat-box { background: var(--tide); border-color: var(--tide); }
.repeat-row:has(input:checked) .repeat-box::after { opacity: 1; transform: scale(1); }
.repeat-row:has(input:focus-visible) { outline: 2.5px solid var(--tide); outline-offset: 3px; }
.repeat-text { font-size: 14px; color: var(--ink-60); line-height: 1.5; }
.repeat-text strong { color: var(--ink); display: inline; }
.repeat-text strong:first-child { display: block; font-size: 15.5px; margin-bottom: 2px; }

/* order summary on the account stage */
.acct-summary {
  background: var(--foam); border-radius: 12px; padding: 14px 16px; margin-bottom: 20px;
  font-size: 14.5px; color: var(--ink-60); border-left: 3px solid var(--tide);
}
.acct-summary strong { color: var(--ink); }

/* waitlist stage */
.wiz-waitlist { text-align: center; }
.wait-mark { width: 62px; height: 62px; margin: 4px auto 16px; display: block; }
.wait-title {
  font-family: var(--font-display); font-size: 26px; font-weight: 680;
  letter-spacing: -0.02em; line-height: 1.12;
}
.wait-title em { color: var(--tide-deep); font-style: normal; }
.wait-copy { color: var(--ink-60); margin: 10px auto 22px; max-width: 400px; font-size: 15.5px; }
.wiz-waitlist .field { text-align: left; }

.wiz-done { text-align: center; padding: 18px 0 8px; }
.done-mark { width: 76px; height: 76px; margin: 0 auto 20px; display: block; }
.done-title { font-family: var(--font-display); font-size: 27px; font-weight: 680; letter-spacing: -0.02em; }
.done-copy { color: var(--ink-60); margin-top: 10px; }

body.wizard-open { overflow: hidden; }

/* ---------- reveals ---------- */
.reveal, .reveal-hero { will-change: transform, opacity; }
html.no-motion :is(.reveal, .reveal-hero) { opacity: 1 !important; transform: none !important; }

/* ---------- responsive ---------- */
/* ============================================================
   HOW IT WORKS PAGE
   Own hero (still, not the shader), the six-beat walkthrough, the
   bag explainer, the first-pickup checklist and the business flow.
   Tones keep alternating down the page: hero dark -> walk light ->
   bag dark -> first light -> tracker dark -> business light ->
   faq white -> closing dark.
   ============================================================ */

/* current page in the nav */
.site-nav a[aria-current="page"] { opacity: 1; color: var(--aqua); }
.site-head.is-scrolled .site-nav a[aria-current="page"] { color: var(--tide-deep); }

/* ---------- page hero ---------- */
.page-hero {
  position: relative; display: flex; align-items: flex-end;
  min-height: min(76svh, 720px); background: var(--ink); overflow: hidden;
}
.page-hero-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 62% 58%;
}
/* The porch shot is bright on the right and in shade on the left, so the
   scrim leans the same way the photograph already does. */
.page-hero-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(96deg, rgba(0, 22, 53, 0.93) 0%, rgba(0, 22, 53, 0.76) 32%, rgba(0, 22, 53, 0.2) 64%, rgba(0, 22, 53, 0.34) 100%),
    linear-gradient(to top, rgba(0, 22, 53, 0.6) 0%, transparent 44%);
}
.page-hero-inner {
  position: relative; z-index: 2; max-width: var(--w-content); width: 100%;
  margin: 0 auto; padding: 150px var(--pad-x) clamp(54px, 6vw, 84px);
}
.page-hero-title {
  font-family: var(--font-display); font-weight: 750; color: var(--foam);
  font-size: clamp(40px, 6.4vw, 86px); line-height: 1.02; letter-spacing: -0.025em;
  margin-top: 22px;
}
.page-hero-title em { color: var(--aqua); font-style: normal; }
.page-hero-sub {
  margin-top: 24px; max-width: 560px; color: rgba(242, 247, 251, 0.82); font-size: 18.5px;
}
.page-hero-ctas { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 14px; }
.page-hero-facts {
  margin-top: 44px; padding-top: 24px; list-style: none;
  border-top: var(--stitch-aqua); display: flex; flex-wrap: wrap; gap: 14px 54px;
}
.page-hero-facts li { display: flex; flex-direction: column; gap: 2px; }
.page-hero-facts strong {
  font-family: var(--font-display); font-weight: 700; font-size: 20px;
  color: var(--foam); letter-spacing: -0.01em;
}
.page-hero-facts span {
  font-family: var(--font-label); font-weight: 500; font-size: 12.5px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--aqua);
}

/* ---------- the walkthrough ---------- */
.walk { background: var(--foam); }
.walk-list {
  max-width: var(--w-content); margin: 0 auto;
  display: flex; flex-direction: column; gap: clamp(56px, 6.5vw, 96px);
}
.walk-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 4vw, 64px);
  align-items: center;
}
/* Alternate which side the photograph sits on, so six rows don't march. */
.walk-row:nth-child(even) .walk-photo { order: 2; }
.walk-photo {
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-card);
  aspect-ratio: 4 / 3; background: var(--ink-14);
}
.walk-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.walk-when {
  font-family: var(--font-label); font-weight: 500; font-size: 12.5px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--tide-deep);
  display: flex; align-items: center; gap: 12px;
}
.walk-when::before {
  content: ""; width: 11px; height: 11px; border-radius: 50%; flex: none;
  background: var(--tide); box-shadow: 0 0 0 4px rgba(10, 151, 204, 0.18);
}
.walk-copy h3 {
  font-family: var(--font-display); font-weight: 720; letter-spacing: -0.02em;
  font-size: clamp(26px, 2.9vw, 36px); line-height: 1.1; margin: 16px 0 14px;
}
.walk-copy p { color: var(--ink-60); margin-bottom: 12px; max-width: 46ch; }
.walk-points {
  list-style: none; margin-top: 20px; padding-top: 18px; border-top: var(--stitch);
  display: flex; flex-direction: column; gap: 9px;
}
.walk-points li {
  position: relative; padding-left: 26px; font-size: 15.5px; font-weight: 500;
}
.walk-points li::before {
  content: ""; position: absolute; left: 2px; top: 8px;
  width: 9px; height: 9px; border-radius: 50%;
  border: 2px solid var(--tide);
}

/* ---------- what fits in a bag ---------- */
.bag { background: var(--ink); }
.bag-sub { color: rgba(242, 247, 251, 0.72); max-width: 600px; }
/* The flat lay is a wide, quiet plate — it earns the full column width, with
   the two cards sitting under it rather than beside it. Side by side the photo
   column ran out long before the cards did and left a navy hole. */
.bag-wrap {
  max-width: var(--w-content); margin: 0 auto;
  display: flex; flex-direction: column; gap: clamp(26px, 3vw, 44px);
}
.bag-photo {
  border-radius: var(--radius); overflow: hidden;
  border: 1px solid rgba(95, 200, 232, 0.2);
}
/* The flat lay was shot with a lot of table under it — crop to the goods. */
.bag-photo img {
  /* height:auto is load-bearing — the width/height attributes are a
     presentational hint that otherwise beats the aspect-ratio crop. */
  width: 100%; height: auto; display: block; aspect-ratio: 25 / 11;
  object-fit: cover; object-position: 50% 34%;
}
.bag-photo figcaption {
  padding: 14px 20px; font-size: 14.5px; color: rgba(242, 247, 251, 0.66);
  background: rgba(242, 247, 251, 0.05);
}
.bag-side { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.bag-card {
  background: rgba(242, 247, 251, 0.06); border: 1px solid rgba(95, 200, 232, 0.2);
  border-radius: var(--radius); padding: clamp(24px, 2.6vw, 32px);
}
.bag-card-quiet { background: transparent; border-style: dashed; }
.bag-card-head {
  font-family: var(--font-display); font-weight: 700; color: var(--foam);
  font-size: 20px; letter-spacing: -0.015em; margin-bottom: 18px;
}
.bag-fill { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.bag-fill li {
  display: flex; align-items: baseline; gap: 14px;
  color: rgba(242, 247, 251, 0.82); font-size: 16px;
  padding-bottom: 10px; border-bottom: 1px dashed rgba(95, 200, 232, 0.18);
}
.bag-fill li:last-child { border-bottom: none; padding-bottom: 0; }
.bag-fill span {
  font-family: var(--font-display); font-weight: 720; font-size: 21px;
  color: var(--aqua); min-width: 34px;
}
.bag-note { margin-top: 16px; font-size: 14.5px; color: rgba(242, 247, 251, 0.6); }
.bag-cta { margin-top: 22px; }
.bag-out { list-style: none; display: flex; flex-direction: column; gap: 14px; }
.bag-out li { color: rgba(242, 247, 251, 0.7); font-size: 15.5px; }
.bag-out strong { color: var(--foam); font-weight: 650; }

/* ---------- first pickup checklist ---------- */
/* Doorstep plate: the bag is bottom-right, so the scrim is heaviest top-left
   where the heading sits, and the cards sit on the pale wall above the step. */
.first { background: var(--linen); position: relative; overflow: hidden; }
.first::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: url("../assets/img/first-bg.jpg") center 62% / cover no-repeat;
  opacity: 0.9; filter: contrast(1.06);
}
.first::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(255, 255, 255, 0.93) 0%,
    rgba(255, 255, 255, 0.82) 22%,
    rgba(255, 255, 255, 0.5) 46%,
    rgba(255, 255, 255, 0.4) 100%);
}
.first > * { position: relative; z-index: 2; }
.first-list {
  max-width: var(--w-content); margin: 0 auto; list-style: none;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
/* Glass, not paint — there is a photograph behind these now. */
.first-item {
  background: rgba(255, 255, 255, 0.84); border-radius: var(--radius);
  padding: 30px 26px 32px; border: 1px solid rgba(0, 31, 93, 0.1);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.first-item svg {
  width: 30px; height: 30px; fill: none; stroke: var(--tide-deep);
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 16px;
}
.first-item h3 { font-size: 19px; font-weight: 650; letter-spacing: -0.01em; margin-bottom: 9px; }
.first-item p { color: var(--ink-60); font-size: 15.5px; }

/* ---------- business flow ---------- */
/* Counter plate: the folded stacks run across the middle, so the cards get a
   heavier wash than the heading does. */
.bizflow { background: var(--foam); position: relative; overflow: hidden; }
.bizflow::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: url("../assets/img/biz-bg.jpg") center 46% / cover no-repeat;
  /* The plate is deliberately high-key; without a contrast push it reads as fog. */
  opacity: 1; filter: contrast(1.14) saturate(1.16);
}
.bizflow::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(242, 247, 251, 0.9) 0%,
    rgba(242, 247, 251, 0.5) 26%,
    rgba(242, 247, 251, 0.24) 60%,
    rgba(242, 247, 251, 0.7) 100%);
}
.bizflow > * { position: relative; z-index: 2; }
/* Cards need a real ground now that there is a photograph behind them. */
.biz-item { backdrop-filter: blur(2px); }
.biz-list {
  max-width: var(--w-content); margin: 0 auto; list-style: none;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.biz-item {
  background: var(--linen); border-radius: var(--radius); padding: 32px 30px 36px;
  box-shadow: var(--shadow-card);
}
.biz-when {
  font-family: var(--font-label); font-weight: 500; font-size: 12px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--zest);
}
.biz-item h3 {
  font-family: var(--font-display); font-weight: 700; font-size: 22px;
  letter-spacing: -0.015em; margin: 12px 0 10px;
}
.biz-item p { color: var(--ink-60); font-size: 16px; }
.biz-cta {
  max-width: var(--w-content); margin: clamp(36px, 4vw, 52px) auto 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px 26px;
}
.biz-note { color: var(--ink-60); font-size: 15.5px; }
.biz-note a { color: var(--tide-deep); font-weight: 600; }

/* ---------- faq on this page ---------- */
.faq-page { background: var(--linen); }

@media (max-width: 980px) {
  /* how-it-works page */
  .walk-row { grid-template-columns: 1fr; gap: 26px; }
  .walk-row:nth-child(even) .walk-photo { order: 0; }
  .walk-photo { aspect-ratio: 16 / 9; }
  .walk-copy p { max-width: none; }
  .bag-side { grid-template-columns: 1fr; }
  .first-list { grid-template-columns: repeat(2, 1fr); }
  .biz-list { grid-template-columns: 1fr; }
  .est-wrap { grid-template-columns: 1fr; }
  .est-result { position: static; }
  .svc-card, .svc-flagship, .svc-wide { grid-column: span 6; }
  .standard-grid { grid-template-columns: 1fr; }
  .drum-wrap { max-width: 330px; }
  .tag-row { grid-template-columns: 1fr; max-width: 440px; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  .brand-badge { height: 48px; }
  .foot-logo { width: 170px; }
  /* how-it-works page */
  .page-hero { min-height: 84svh; }
  .page-hero-inner { padding-top: 116px; }
  /* Portrait crops away the shaded left side the scrim was leaning on. */
  .page-hero-scrim {
    background: linear-gradient(to bottom,
      rgba(0, 22, 53, 0.9) 0%,
      rgba(0, 22, 53, 0.72) 34%,
      rgba(0, 22, 53, 0.56) 68%,
      rgba(0, 22, 53, 0.84) 100%);
  }
  .page-hero-ctas .btn { width: 100%; }
  .page-hero-facts { gap: 18px 30px; }
  .bag-photo img { aspect-ratio: 16 / 11; object-position: 50% 36%; }
  /* Portrait zooms right past the bag — recentre on it. */
  .first::before { background-position: 60% 62%; }
  .first-list { grid-template-columns: 1fr; }
  .site-nav {
    position: fixed; top: 62px; left: 12px; right: 12px; z-index: 99;
    flex-direction: column; gap: 4px; padding: 14px;
    background: var(--linen); border-radius: 16px; box-shadow: var(--shadow-card);
    transform: translateY(-12px); opacity: 0; pointer-events: none;
    transition: transform 0.3s var(--ease-out), opacity 0.3s;
  }
  .site-nav a { color: var(--ink) !important; padding: 12px 14px; border-radius: 10px; font-size: 17px; }
  .site-nav a:hover { background: var(--foam); }
  body.nav-open .site-nav { transform: none; opacity: 1; pointer-events: auto; }
  .menu-btn {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 42px; height: 42px; align-items: center;
    background: transparent; border: 1.5px solid rgba(242, 247, 251, 0.35); border-radius: 50%;
    cursor: pointer; transition: border-color 0.35s;
  }
  .site-head.is-scrolled .menu-btn { border-color: var(--ink-14); }
  .menu-btn span { display: block; width: 16px; height: 2px; background: var(--foam); transition: background 0.35s, transform 0.3s; }
  .site-head.is-scrolled .menu-btn span { background: var(--ink); }
  body.nav-open .menu-btn span:first-child { transform: translateY(3.5px) rotate(45deg); }
  body.nav-open .menu-btn span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
  .btn-head { display: none; }

  .hero-inner { padding-top: 120px; padding-bottom: 90px; }
  .eyebrow { font-size: 10.5px; letter-spacing: 0.2em; }
  /* Portrait crops away the dark left third the clip was framed for, so the
     copy ends up over fabric — darken vertically instead. */
  .hero-scrim {
    background: linear-gradient(to bottom,
      rgba(0, 22, 53, 0.90) 0%,
      rgba(0, 22, 53, 0.74) 42%,
      rgba(0, 22, 53, 0.66) 70%,
      rgba(0, 22, 53, 0.88) 100%);
  }
  .guar-list { grid-template-columns: 1fr; }
  .offer-pill { font-size: 13px; padding-right: 14px; }
  .est-panel { padding: 20px 18px 8px; }
  .est-compare { grid-template-columns: 1fr; }
  .est-preset-label { width: 100%; margin-bottom: 2px; }
  .hero-ctas .btn { width: 100%; }
  .hero-serving { margin-top: 34px; padding: 11px 18px 11px 15px; font-size: 14.5px; align-items: flex-start; }
  .serving-dot { margin-top: 6px; }
  /* Rail goes vertical on mobile so the labels never collide. */
  .track-rail { grid-template-columns: 1fr; gap: 18px; }
  .track-rail::before { top: 12px; bottom: 12px; left: 11px; right: auto; border-top: none; border-left: 2px dashed rgba(95, 200, 232, 0.28); }
  .track-step button { flex-direction: row; justify-content: flex-start; gap: 16px; font-size: 14px; }
  .track-bubble { border-radius: 16px; }
  .track-msg { min-height: 0; }
  .timeline { grid-template-columns: 1fr; gap: 26px; }
  /* No vertical rail in portrait. It needed a 30px indent on every card to
     clear the dots, which left the timeline sitting 30px right of every other
     block on the page (L50/R20 against L20/R20 everywhere else). The inline
     dot on each time label already carries the sequence. */
  .timeline::before { content: none; }
  .tl-item { padding-left: 0; }
  /* height:100% equalises the three cards on desktop. In one column it makes
     each card 100% of a row it does not start at the top of, so every card
     overflowed its row by the height of the time label above it and the next
     label painted over the card before it. */
  .tl-card { height: auto; }
  .svc-card, .svc-flagship, .svc-wide { grid-column: span 12; }
  .svc-flagship, .svc-wide { grid-template-columns: 1fr; }
  .svc-flag-photo { order: -1; min-height: 0; height: 200px; }
  .field-row { grid-template-columns: 1fr; }
  .plan-grid { grid-template-columns: 1fr; }
  .aud-toggle { grid-template-columns: 1fr; }
  .wizard { padding: 0; align-items: end; }
  .wizard-panel { width: 100%; max-height: 94dvh; border-radius: 22px 22px 0 0; padding: 34px 24px 30px; }
  .foot-grid { grid-template-columns: 1fr; gap: 30px; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001s !important; transition-duration: 0.001s !important; }
  .final-bubbles { display: none; }
}