/* ════════════════════════════════════════════════════════════
   FOGLINE POST — design system
   Soul: rounded, calm, premium, photography-first.
   Margins are king. Cards never move on hover.
   ════════════════════════════════════════════════════════════ */

:root {
  --page-width: min(1240px, calc(100vw - 64px));

  /* palette — SF fog + golden-hour amber */
  --white: #ffffff;
  --fog: #f5f4f1;          /* soft section background */
  --fog-2: #ecebe6;
  --ink: #16181d;          /* primary text */
  --muted: #5d6168;
  --line: rgba(22, 24, 29, 0.1);
  --dark: #101319;         /* footer / dark sections */
  --dark-2: #161b24;
  --amber: #c98a4b;        /* accent — golden hour */
  --amber-soft: #e8d9c6;
  --amber-ink: #9c6630;
  --amber-light: #d99e5e;  /* lighter end of every amber gradient */
  --green: #4e7a5a;
  --green-soft: #cfe3d6;   /* success text on dark surfaces */
  --red: #b3543f;          /* negative / "not included" states */
  --ink-hover: #23262e;    /* primary button hover */
  --on-dark: #eef0f3;      /* body text on ink & night surfaces */
  --white-warm: #fbfaf8;   /* warm top of section gradients */
  --sky-soft: #cfe0ea;     /* fog-video poster fallback */

  --radius-xl: 36px;
  --radius-lg: 28px;
  --radius-md: 22px;
  --radius-sm: 14px;
  --radius-round: 999px;
  --shadow: 0 18px 44px rgba(16, 19, 25, 0.1);
  --shadow-tight: 0 8px 22px rgba(16, 19, 25, 0.12);

  --font-head: "Poppins", "Inter", sans-serif;
  --font-body: "Inter", sans-serif;
  --font-accent: "Space Grotesk", sans-serif;

  /* type scale */
  --fs-hero: clamp(2.7rem, 4.6vw, 3.9rem);
  --fs-hero-sub: clamp(1.05rem, 1.6vw, 1.3rem);
  --fs-display: clamp(2.4rem, 3.6vw, 3.2rem);
  --fs-section: clamp(2rem, 3vw, 2.6rem);
  --fs-section-sm: clamp(1.55rem, 2.3vw, 2rem);
  --fs-card-title: clamp(1.25rem, 1.8vw, 1.55rem);
  --fs-kicker: 0.75rem;
  --fs-body: 0.97rem;
  --fs-body-sm: 0.9rem;
  --fs-button: 0.92rem;
  --fs-small: 0.75rem;
  --fs-nav: 0.9rem;

  /* spacing tokens — one rhythm everywhere */
  --space-section: clamp(72px, 9vw, 128px);
  --space-gap: clamp(16px, 2.2vw, 28px);
  --space-inset: clamp(20px, 2.6vw, 34px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  overflow-x: hidden;
}

img { display: block; width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { border: 0; background: none; cursor: pointer; padding: 0; }
:where(a, button, input, textarea, select, summary):focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 3px;
}

.page { width: var(--page-width); margin: 0 auto; }

/* ── reveal-on-scroll ─────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ── kickers & headings ───────────────────────────────────── */
.kicker {
  font-family: var(--font-accent);
  font-size: var(--fs-kicker);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--amber-ink);
  margin: 0 0 14px;
}
.section-title {
  font-family: var(--font-head);
  font-size: var(--fs-section);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0 0 14px;
}
.section-lede {
  color: var(--muted);
  max-width: 56ch;
  margin: 0;
}

/* ── header ───────────────────────────────────────────────── */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  pointer-events: none;
  transition: padding 0.24s ease;
}
.header-shell {
  pointer-events: auto;
  width: var(--page-width);
  margin: 14px auto 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 10px 12px 10px 22px;
  border-radius: var(--radius-round);
  /* Keep the glass appearance without live-sampling the page below. A fixed
     backdrop-filter can be invalidated as scrolling content (especially the
     scrubbed home video) repaints, which is what caused the header flash. */
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.6) 48%, rgba(248, 245, 240, 0.66)),
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.78), transparent 46%),
    radial-gradient(circle at 92% 16%, rgba(201, 138, 75, 0.12), transparent 44%);
  background-color: rgba(250, 249, 247, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 10px 30px rgba(16, 19, 25, 0.07);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.site-header.is-scrolled .header-shell {
  background-color: rgba(250, 249, 247, 0.9);
  box-shadow: 0 12px 34px rgba(16, 19, 25, 0.12);
}
.brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 10px;
  font-family: var(--font-accent);
  font-weight: 700;
  font-size: 1.04rem;
  letter-spacing: 0.06em;
}
.brand .brand-post { color: var(--amber-ink); font-weight: 500; }
.brand-logo {
  display: block;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  object-fit: contain;
  border-radius: 50%;
}
.brand-name { white-space: nowrap; }
.main-nav { display: flex; align-items: center; gap: 4px; }
.main-nav a {
  font-size: var(--fs-nav);
  color: var(--muted);
  padding: 8px 14px;
  border-radius: var(--radius-round);
  transition: color 0.2s ease, background 0.2s ease;
}
.main-nav a:hover { color: var(--ink); background: rgba(22, 24, 29, 0.05); }
.main-nav a.is-active { color: var(--ink); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-head);
  font-size: var(--fs-button);
  font-weight: 500;
  padding: 12px 24px;
  border-radius: var(--radius-round);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1.5px); }
.btn-primary {
  background: var(--ink);
  color: var(--white);
  box-shadow: 0 10px 24px rgba(16, 19, 25, 0.22);
}
.btn-primary:hover { background: var(--ink-hover); }
.btn-amber {
  background: linear-gradient(135deg, var(--amber), var(--amber-light));
  color: #fff;
  box-shadow: 0 10px 26px rgba(201, 138, 75, 0.38);
}
.btn-ghost {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--line);
  color: var(--ink);
}
.btn-ghost:hover { background: var(--white); }
.btn-light {
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.25);
}
.btn-lg { padding: 15px 30px; font-size: 1rem; }

/* mobile nav */
.nav-toggle {
  display: none;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: rgba(22, 24, 29, 0.06);
  position: relative;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 16px; height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.nav-toggle span::before { transform: translate(-50%, calc(-50% - 5px)); }
.nav-toggle span::after { transform: translate(-50%, calc(-50% + 5px)); }
.nav-toggle.is-open span { background: transparent; }
.nav-toggle.is-open span::before { transform: translate(-50%, -50%) rotate(45deg); }
.nav-toggle.is-open span::after { transform: translate(-50%, -50%) rotate(-45deg); }
.mobile-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 220px;
  /* This menu belongs to the same fixed header, so keep it out of the live
     backdrop render pass as well. */
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(252, 249, 244, 0.94)),
    radial-gradient(circle at 12% 0%, rgba(255, 255, 255, 0.82), transparent 48%);
  background-color: rgba(252, 250, 247, 0.96);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
  padding: 10px;
  display: none;
  flex-direction: column;
  gap: 2px;
}
.mobile-menu.is-open { display: flex; }
.mobile-menu a {
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
}
.mobile-menu a:hover { background: var(--fog); }
.mobile-menu a:last-child {
  margin-top: 6px;
  background: linear-gradient(135deg, var(--amber), var(--amber-light));
  color: #fff;
  box-shadow: 0 10px 26px rgba(201, 138, 75, 0.3);
  text-align: center;
}
.mobile-menu a:last-child:hover { background: linear-gradient(135deg, var(--amber-light), var(--amber)); }

/* ── hero ─────────────────────────────────────────────────── */
.hero {
  position: relative;
  padding: clamp(150px, 18vw, 210px) 0 var(--space-section);
  background:
    radial-gradient(1100px 540px at 80% -10%, rgba(201, 138, 75, 0.14), transparent 65%),
    radial-gradient(900px 500px at 8% 0%, rgba(93, 97, 104, 0.1), transparent 60%),
    linear-gradient(180deg, var(--white-warm) 0%, var(--white) 85%);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.hero h1 {
  font-family: var(--font-head);
  font-size: var(--fs-hero);
  font-weight: 600;
  line-height: 1.07;
  letter-spacing: -0.018em;
  margin: 0 0 20px;
}
.hero h1 em {
  font-style: normal;
  background: linear-gradient(120deg, var(--amber-ink), var(--amber));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-sub {
  font-size: var(--fs-hero-sub);
  color: var(--muted);
  max-width: 46ch;
  margin: 0 0 30px;
}
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.hero-note {
  margin-top: 18px;
  font-size: var(--fs-body-sm);
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 8px;
}
.hero-note .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 4px rgba(78, 122, 90, 0.16);
  animation: pulse 2.4s infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(78, 122, 90, 0.16); }
  50% { box-shadow: 0 0 0 7px rgba(78, 122, 90, 0.07); }
}

/* hero compare card */
.hero-visual { position: relative; }
.hero-visual .ba-frame { box-shadow: var(--shadow); }
.hero-chip {
  position: absolute;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  border-radius: var(--radius-round);
  padding: 9px 18px;
  font-family: var(--font-accent);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  box-shadow: var(--shadow-tight);
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 5;
}
.hero-chip.chip-tl { top: -16px; left: -14px; }
.hero-chip.chip-br { bottom: -16px; right: -14px; }
.hero-chip .chip-icon { color: var(--amber-ink); }

/* ── stat strip ───────────────────────────────────────────── */
.stat-strip { padding: 0 0 var(--space-section); }
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-gap);
}
.stat-card {
  background: var(--fog);
  border-radius: var(--radius-lg);
  padding: var(--space-inset);
  text-align: left;
}
.stat-value {
  font-family: var(--font-accent);
  font-size: clamp(1.9rem, 3vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
  margin: 0 0 8px;
}
.stat-value .unit { font-size: 0.55em; color: var(--amber-ink); margin-left: 2px; }
.stat-label { color: var(--muted); font-size: var(--fs-body-sm); margin: 0; }

/* ── before/after lab ─────────────────────────────────────── */
.section { padding: 0 0 var(--space-section); }
.section-head { margin-bottom: clamp(30px, 4vw, 48px); }

.style-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: var(--space-gap);
}
/* tabs on the left, the Match My Style CTA pushed to the right; wraps on phones */
.style-lab-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: var(--space-gap);
}
.style-lab-bar .style-tabs { margin-bottom: 0; }
.style-tab {
  font-family: var(--font-head);
  font-size: 0.88rem;
  font-weight: 500;
  padding: 10px 20px;
  border-radius: var(--radius-round);
  background: var(--fog);
  color: var(--muted);
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.style-tab:hover { color: var(--ink); }
.style-tab:focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 3px;
}
.style-tab.is-active {
  background: var(--ink);
  color: var(--white);
  box-shadow: 0 8px 20px rgba(16, 19, 25, 0.2);
}

/* The Lab sits between two arrows, so the frame gives up the width they need
   and the whole row still fits inside the page column. */
.lab-stage {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(8px, 1.2vw, 16px);
}
.lab-nav {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-round);
  background: var(--white);
  color: var(--ink);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.lab-nav:hover { background: var(--fog); border-color: var(--muted); transform: translateY(-1px); }
.lab-nav .fp-icon { width: 20px; height: 20px; }
.lab-count {
  font-family: var(--font-accent);
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
@media (max-width: 720px) {
  .lab-stage { gap: 6px; }
  .lab-nav { width: 36px; height: 36px; }
  .lab-nav .fp-icon { width: 17px; height: 17px; }
}

/* Short copy on phones, full copy from 721px up. */
.narrow-only { display: none; }
/* The Lab should read in one screen: cap the frame height so the chips, the
   image and the caption all land above the fold. */
.lab-stage .ba-frame {
  aspect-ratio: 3 / 2;
  max-height: 56svh;
  width: min(100%, calc(56svh * 1.5));
  justify-self: center;
}
/* From tablet up the image is the point: it fills the window height and the
   whole column, cropping rather than letterboxing, and the heading scrolls
   away above it so the chips, image and caption own the screen. */
@media (min-width: 721px) {
  #styles { padding-block: clamp(24px, 3vw, 44px); }
  #styles .section-head { margin-bottom: clamp(12px, 1.4vw, 20px); }
  #styles .section-title { font-size: clamp(1.7rem, 2.4vw, 2.2rem); }
  #styles .section-lede { font-size: var(--fs-body-sm); max-width: 78ch; }
  #styles .style-lab-bar { margin-bottom: clamp(10px, 1.2vw, 16px); }
  .lab-stage + .ba-caption { margin-top: clamp(8px, 1vw, 14px); }
  .lab-stage { align-items: stretch; }
  .lab-nav { align-self: center; }
  .lab-stage .ba-frame {
    aspect-ratio: auto;
    width: 100%;
    /* the window minus the chip row, the caption and their gaps */
    height: calc(100svh - 190px);
    /* but never so tall that the crop turns portrait on a narrow screen */
    max-height: calc((min(100vw, 1304px) - 220px) / 1.15);
  }
  /* the header already carries a Free Sample Edit CTA, so the Lab drops its own */
  .style-lab-bar .btn { display: none; }
}
@media (max-width: 720px) {
  .wide-only { display: none; }
  .narrow-only { display: inline; }
  /* one scrollable line of chips instead of three wrapped rows */
  .style-lab-bar { gap: 8px; }
  .style-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent);
            mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent);
  }
  .style-tabs::-webkit-scrollbar { display: none; }
  .style-tab { flex: none; scroll-snap-align: center; padding: 8px 14px; font-size: 0.82rem; }
  .style-lab-bar .btn { width: 100%; text-align: center; }
  #styles { padding-block: clamp(40px, 8vw, 64px); }
  #styles .section-head { margin-bottom: 14px; }
  .lab-stage .ba-frame { max-height: 46svh; width: min(100%, calc(46svh * 1.5)); }
  .ba-tag { bottom: 10px; font-size: 0.64rem; padding: 5px 10px; letter-spacing: 0.1em; }
  .ba-tag-before { left: 10px; }
  .ba-tag-after { right: 10px; }
  .ba-caption { margin-top: 10px; gap: 10px; font-size: 0.82rem; }
}

.ba-frame {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--fog-2);
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
  cursor: ew-resize;
  isolation: isolate;
}
.ba-frame img {
  position: absolute;
  inset: 0;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  transition: filter 0.45s ease;
}
/* A <picture> must lay out exactly like the bare <img> it wraps. */
picture { display: contents; }
/* "before" pane — simulated flat RAW look (replace with real exports later) */
.ba-before { filter: saturate(0.62) contrast(0.86) brightness(1.04) sepia(0.05); }
.ba-after-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  clip-path: inset(0 0 0 var(--ba-pos, 50%));
  pointer-events: none;
}
.ba-after-wrap img { width: 100%; }
/* The Lab runs on real exports: the before pane is the untouched file and each tab swaps in
   the matching finished image, so neither pane is filtered. */
#styleLabFrame .ba-before,
#styleLabFrame .ba-after { filter: none; }

.ba-handle {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--ba-pos, 50%);
  width: 2px;
  background: rgba(255, 255, 255, 0.95);
  z-index: 4;
  pointer-events: none;
}
.ba-handle::after {
  content: "◂ ▸";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3);
  display: grid;
  place-items: center;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: var(--ink);
}
.ba-tag {
  position: absolute;
  bottom: 16px;
  z-index: 3;
  font-family: var(--font-accent);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: var(--radius-round);
  background: rgba(16, 19, 25, 0.55);
  color: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  pointer-events: none;
}
.ba-tag-before { left: 16px; }
.ba-tag-after { right: 16px; }

.ba-caption {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 14px;
  color: var(--muted);
  font-size: var(--fs-body-sm);
}
.ba-caption strong { color: var(--ink); font-weight: 600; }

/* ── process timeline ─────────────────────────────────────── */
.process { background: var(--fog); border-radius: var(--radius-xl); padding: var(--space-inset); }
.process-inner { padding: clamp(16px, 2.5vw, 36px); }
.process-steps {
  position: relative;
  display: grid;
  gap: clamp(24px, 3vw, 36px);
  margin-top: clamp(28px, 4vw, 44px);
}
.process-steps::before {
  content: "";
  position: absolute;
  left: 27px;
  top: 14px;
  bottom: 14px;
  width: 2px;
  background: var(--line);
}
.process-steps .progress-line {
  position: absolute;
  left: 27px;
  top: 14px;
  width: 2px;
  height: 0;
  background: linear-gradient(180deg, var(--amber), var(--amber-ink));
  transition: height 0.4s ease;
}
.step {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 20px;
  align-items: start;
}
.step-num {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--white);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  font-family: var(--font-accent);
  font-weight: 700;
  font-size: 1.05rem;
  position: relative;
  z-index: 1;
  transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
.step.is-active .step-num {
  background: var(--amber);
  border-color: var(--amber);
  color: #fff;
  box-shadow: 0 8px 20px rgba(201, 138, 75, 0.4);
}
.step-body h3 {
  font-family: var(--font-head);
  font-size: var(--fs-card-title);
  font-weight: 600;
  margin: 4px 0 8px;
}
.step-body p { color: var(--muted); margin: 0; max-width: 62ch; }
.step-meta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
  font-family: var(--font-accent);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--amber-ink);
  background: rgba(201, 138, 75, 0.12);
  padding: 7px 14px;
  border-radius: var(--radius-round);
}

/* ── calculator ───────────────────────────────────────────── */
.calc-card {
  background: var(--dark);
  color: var(--on-dark);
  border-radius: var(--radius-xl);
  padding: clamp(28px, 4vw, 52px);
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.calc-card .kicker { color: var(--amber); }
.calc-card h2 { color: #fff; }
.calc-card .section-lede { color: rgba(238, 240, 243, 0.65); }

.calc-slider-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 26px 0 12px;
  font-size: var(--fs-body-sm);
  color: rgba(238, 240, 243, 0.7);
}
.calc-slider-label output {
  font-family: var(--font-accent);
  font-size: 1.6rem;
  font-weight: 700;
  color: #fff;
}
input[type="range"].calc-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: var(--radius-round);
  background: linear-gradient(90deg, var(--amber) var(--fill, 40%), rgba(255, 255, 255, 0.16) var(--fill, 40%));
  outline: none;
  cursor: pointer;
}
input[type="range"].calc-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
  border: none;
}
input[type="range"].calc-range::-moz-range-thumb {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: #fff;
  border: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}
.calc-toggles { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.calc-toggle {
  font-size: 0.85rem;
  padding: 9px 18px;
  border-radius: var(--radius-round);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(238, 240, 243, 0.75);
  transition: all 0.2s ease;
}
.calc-toggle.is-on {
  background: var(--amber);
  border-color: var(--amber);
  color: #fff;
}
.calc-result {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  padding: clamp(22px, 3vw, 34px);
}
.calc-result-rows { display: grid; gap: 14px; }
.calc-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  font-size: var(--fs-body-sm);
  color: rgba(238, 240, 243, 0.7);
}
.calc-row strong {
  font-family: var(--font-accent);
  color: #fff;
  font-size: 1.05rem;
  font-weight: 600;
}
.calc-row.calc-total {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 16px;
  margin-top: 4px;
}
.calc-row.calc-total strong { font-size: 2rem; color: var(--amber); }
.calc-delivery {
  margin-top: 18px;
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  background: rgba(78, 122, 90, 0.16);
  border: 1px solid rgba(78, 122, 90, 0.3);
  font-size: var(--fs-body-sm);
  color: var(--green-soft);
}
.calc-delivery strong { color: #fff; }

/* ── guarantee cards ──────────────────────────────────────── */
.guarantee-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-gap);
}
.g-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-inset);
  transition: box-shadow 0.25s ease;
}
.g-card:hover { box-shadow: var(--shadow-tight); }
.g-icon {
  width: 52px; height: 52px;
  border-radius: var(--radius-sm);
  background: rgba(201, 138, 75, 0.12);
  display: grid;
  place-items: center;
  font-size: 1.3rem;
  margin-bottom: 18px;
}
/* two-tone line icons: linework takes the text colour it sits in, the accent is amber */
.fp-icon {
  --icon-accent: var(--amber);
  width: 1.25em; height: 1.25em;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fp-icon .ic-a { stroke: var(--icon-accent); }
.fp-icon .ic-f { fill: var(--icon-accent); stroke: none; }
.fp-icon .ic-fs { fill: var(--icon-accent); }
.fp-icon .ic-k { fill: currentColor; stroke: none; }
/* colour is set on the icon itself so container text colours (muted spans, amber chips) can't leak in */
.g-icon .fp-icon { width: 26px; height: 26px; color: var(--ink); }
.cred-item .cred-icon { display: flex; margin-top: 1px; }
.cred-item .fp-icon { width: 22px; height: 22px; color: var(--ink); }
.cred-item .cred-icon.cred-icon--num {
  width: 26px; height: 26px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--amber);
  color: var(--white);
  font-family: var(--font-accent);
  font-size: 0.8rem;
  font-weight: 700;
}
.extra-card .extra-icon { display: flex; }
.extra-card .fp-icon { width: 26px; height: 26px; color: var(--ink); }
.hero-chip .chip-icon { display: flex; }
.hero-chip .fp-icon { width: 16px; height: 16px; color: var(--ink); }
.calc-toggle .fp-icon { width: 15px; height: 15px; vertical-align: -3px; }
.calc-toggle.is-on .fp-icon { --icon-accent: currentColor; }
.calc-delivery .fp-icon { width: 18px; height: 18px; vertical-align: -4px; margin-right: 4px; }
.g-card h3 {
  font-family: var(--font-head);
  font-size: 1.12rem;
  font-weight: 600;
  margin: 0 0 8px;
}
.g-card p { color: var(--muted); font-size: var(--fs-body-sm); margin: 0; }
/* a quiet in-copy link: keeps the text colour, marked only by a thin amber underline */
.link-subtle {
  text-decoration: underline;
  text-decoration-color: var(--amber);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}
.link-subtle:hover, .link-subtle:focus-visible { color: var(--ink); text-decoration-color: var(--amber-ink); }

/* human badge */
.human-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--ink);
  color: #fff;
  border-radius: var(--radius-round);
  padding: 12px 22px;
  font-family: var(--font-accent);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.human-badge .pulse-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--amber);
  animation: pulse 2.4s infinite;
}

/* ── pricing ──────────────────────────────────────────────── */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-gap);
  align-items: stretch;
}
.price-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-inset);
  display: flex;
  flex-direction: column;
  position: relative;
  transition: box-shadow 0.25s ease;
}
.price-card:hover { box-shadow: var(--shadow-tight); }
.price-card.is-featured {
  background: var(--dark);
  color: var(--on-dark);
  border-color: transparent;
  box-shadow: var(--shadow);
}
.price-card.is-featured .price-amount, .price-card.is-featured h3 { color: #fff; }
.price-card.is-featured .price-desc, .price-card.is-featured li { color: rgba(238, 240, 243, 0.72); }
.price-flag {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--amber), var(--amber-light));
  color: #fff;
  font-family: var(--font-accent);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 7px 16px;
  border-radius: var(--radius-round);
  box-shadow: 0 6px 16px rgba(201, 138, 75, 0.4);
  white-space: nowrap;
}
.price-card h3 {
  font-family: var(--font-head);
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0 0 4px;
}
.price-desc { color: var(--muted); font-size: var(--fs-body-sm); margin: 0 0 20px; }
.price-amount {
  font-family: var(--font-accent);
  font-size: 2.6rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  margin: 0;
}
.price-per {
  font-size: var(--fs-body-sm);
  color: var(--amber-ink);
  font-weight: 600;
  margin: 8px 0 22px;
}
.price-card.is-featured .price-per { color: var(--amber); }
.price-card ul {
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
  display: grid;
  gap: 11px;
  font-size: var(--fs-body-sm);
  color: var(--muted);
}
.price-card li { display: flex; gap: 10px; align-items: flex-start; }
.price-card li::before {
  content: "✓";
  color: var(--amber-ink);
  font-weight: 700;
  flex-shrink: 0;
}
.price-card.is-featured li::before { color: var(--amber); }
.price-card .btn { margin-top: auto; width: 100%; }

.pricing-extras {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-gap);
  margin-top: var(--space-gap);
}
.extra-card {
  background: var(--fog);
  border-radius: var(--radius-md);
  padding: 22px var(--space-inset);
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: var(--fs-body-sm);
}
.extra-card .extra-icon { font-size: 1.4rem; }
.extra-card strong { display: block; font-family: var(--font-head); font-weight: 600; font-size: 0.98rem; color: var(--ink); }
.extra-card span { color: var(--muted); }

/* ── comparison table ─────────────────────────────────────── */
.compare-wrap { overflow-x: auto; border-radius: var(--radius-lg); border: 1px solid var(--line); }
.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-body-sm);
  min-width: 720px;
  background: var(--white);
}
.compare-table th, .compare-table td {
  padding: 16px 20px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}
.compare-table thead th {
  font-family: var(--font-accent);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--fog);
}
.compare-table .col-us {
  background: rgba(201, 138, 75, 0.07);
  font-weight: 600;
}
.compare-table thead .col-us { color: var(--amber-ink); }
.compare-table .yes { color: var(--green); font-weight: 700; }
.compare-table .no { color: var(--red); }
.compare-table .meh { color: var(--muted); }

/* ── founder note ─────────────────────────────────────────── */
.founder-card {
  background: var(--fog);
  border-radius: var(--radius-xl);
  padding: clamp(28px, 4vw, 56px);
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.founder-photo {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--fog-2);
}
.founder-photo img { height: 100%; object-fit: cover; }
.founder-quote {
  font-family: var(--font-head);
  font-size: clamp(1.2rem, 1.9vw, 1.5rem);
  font-weight: 500;
  line-height: 1.45;
  margin: 0 0 22px;
}
.founder-quote em { color: var(--amber-ink); font-style: normal; }
.founder-sig { display: flex; align-items: center; gap: 14px; }
.founder-sig .sig-name { font-family: var(--font-accent); font-weight: 700; }
.founder-sig .sig-role { color: var(--muted); font-size: var(--fs-body-sm); }

/* ── FAQ ──────────────────────────────────────────────────── */
.faq-list { display: grid; gap: 12px; max-width: 860px; }
.faq-item {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: box-shadow 0.25s ease;
}
.faq-item[open] { box-shadow: var(--shadow-tight); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 20px var(--space-inset);
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-family: var(--font-accent);
  font-size: 1.3rem;
  color: var(--amber-ink);
  transition: transform 0.25s ease;
  flex-shrink: 0;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item .faq-body {
  padding: 0 var(--space-inset) 22px;
  color: var(--muted);
  font-size: var(--fs-body-sm);
  max-width: 70ch;
}

/* ── footer / contact ─────────────────────────────────────── */
.site-footer {
  background: var(--dark);
  color: var(--on-dark);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  margin-top: var(--space-section);
  padding: var(--space-section) 0 36px;
}
.footer-cta { text-align: center; max-width: 720px; margin: 0 auto clamp(48px, 6vw, 80px); }
.footer-cta .kicker { color: var(--amber); }
.footer-cta h2 {
  font-family: var(--font-head);
  font-size: var(--fs-display);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0 0 16px;
  color: #fff;
}
.footer-cta p { color: rgba(238, 240, 243, 0.65); margin: 0 0 30px; }
.footer-grid {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 30px;
  font-size: var(--fs-body-sm);
  color: rgba(238, 240, 243, 0.55);
}
.footer-links { display: flex; gap: 22px; flex-wrap: wrap; }
.footer-links a { transition: color 0.2s ease; }
.footer-links a:hover { color: #fff; }
.footer-brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-accent); font-weight: 700; letter-spacing: 0.06em; color: #fff; }
.footer-brand .brand-post { color: inherit; font-weight: 500; }

/* ── forms ────────────────────────────────────────────────── */
.form-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: clamp(26px, 3.5vw, 48px);
  box-shadow: var(--shadow);
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-field { display: grid; gap: 7px; }
.form-field.full { grid-column: 1 / -1; }
.form-field label {
  font-family: var(--font-head);
  font-size: 0.85rem;
  font-weight: 500;
}
.form-field .hint { font-size: var(--fs-small); color: var(--muted); }
.form-field input, .form-field textarea, .form-field select {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 13px 16px;
  background: var(--fog);
  outline: none;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  width: 100%;
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus {
  border-color: var(--amber);
  background: var(--white);
  box-shadow: 0 0 0 4px rgba(201, 138, 75, 0.12);
}
.form-field textarea { resize: vertical; min-height: 110px; }
.form-actions { margin-top: 26px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.form-privacy { font-size: var(--fs-small); color: var(--muted); }

/* pills (radio-style choices) */
.pill-group { display: flex; gap: 8px; flex-wrap: wrap; }
.pill-choice { position: relative; }
.pill-choice input { position: absolute; opacity: 0; pointer-events: none; }
.pill-choice span {
  display: inline-block;
  padding: 10px 18px;
  border-radius: var(--radius-round);
  background: var(--fog);
  border: 1px solid transparent;
  font-size: 0.88rem;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.2s ease;
}
.pill-choice input:checked + span {
  background: var(--ink);
  color: #fff;
  box-shadow: 0 6px 16px rgba(16, 19, 25, 0.2);
}
.pill-choice input:focus-visible + span { outline: 2px solid var(--amber); outline-offset: 2px; }

.form-success {
  display: none;
  text-align: center;
  padding: clamp(30px, 5vw, 60px) 20px;
}
.form-success.is-shown { display: block; }
.form-success .success-icon {
  width: 72px; height: 72px;
  margin: 0 auto 22px;
  border-radius: 50%;
  background: rgba(78, 122, 90, 0.14);
  display: grid;
  place-items: center;
  font-size: 2rem;
  color: var(--green);
}
.form-success h3 { font-family: var(--font-head); font-size: 1.5rem; margin: 0 0 10px; }
.form-success p { color: var(--muted); max-width: 44ch; margin: 0 auto; }

/* multi-step intake */
.intake-progress {
  display: flex;
  gap: 8px;
  margin-bottom: 30px;
}
.intake-progress .seg {
  height: 5px;
  flex: 1;
  border-radius: var(--radius-round);
  background: var(--fog-2);
  transition: background 0.3s ease;
}
.intake-progress .seg.is-done { background: var(--amber); }
.intake-step { display: none; }
.intake-step.is-current { display: block; animation: stepIn 0.35s ease; }
@keyframes stepIn {
  from { opacity: 0; transform: translateX(14px); }
  to { opacity: 1; transform: none; }
}
.intake-step h3 { font-family: var(--font-head); font-size: 1.3rem; font-weight: 600; margin: 0 0 6px; }
.intake-step .step-sub { color: var(--muted); font-size: var(--fs-body-sm); margin: 0 0 24px; }

/* page hero (subpages) */
.page-hero {
  padding: clamp(140px, 16vw, 190px) 0 clamp(40px, 6vw, 72px);
  background:
    radial-gradient(900px 460px at 85% -10%, rgba(201, 138, 75, 0.13), transparent 65%),
    linear-gradient(180deg, var(--white-warm) 0%, var(--white) 90%);
}
.page-hero h1 {
  font-family: var(--font-head);
  font-size: var(--fs-display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0 0 16px;
  max-width: 22ch;
}
.page-hero .section-lede { font-size: 1.05rem; }

/* about page */
.about-body { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 64px); align-items: start; }
.about-body .prose p { color: var(--muted); margin: 0 0 18px; }
.about-body .prose p strong { color: var(--ink); }
.cred-list { display: grid; gap: 14px; margin-top: 8px; }
.cred-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--fog);
  border-radius: var(--radius-md);
  padding: 18px 22px;
  font-size: var(--fs-body-sm);
}
.cred-item .cred-icon { font-size: 1.2rem; }
.cred-item strong { display: block; font-family: var(--font-head); font-weight: 600; color: var(--ink); }
.cred-item span { color: var(--muted); }

/* marquee */
.marquee {
  overflow: hidden;
  border-block: 1px solid var(--line);
  padding: 18px 0;
  margin-bottom: var(--space-section);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee-track {
  display: flex;
  gap: 48px;
  width: max-content;
  animation: marquee 30s linear infinite;
}
.marquee-track span {
  font-family: var(--font-accent);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 48px;
}
.marquee-track span::after { content: "·"; color: var(--amber); }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* ── fog landing — scroll-scrubbed reveal ─────────────────────
   The stage is a TALL container; the scene is pinned (sticky) for one
   viewport-height while you scroll its length. Scroll progress (0→1) is
   mapped to the fog dispersal in script.js — scrubbable both ways. */
.fog-stage { height: 320vh; position: relative; }
/* On a phone the reveal ate too much scrolling. 210vh leaves 110vh of travel,
   half the desktop distance, so the fog clears in half the scroll. This sits
   before the still and reduced-motion rules so they still win when they apply. */
@media (max-width: 720px) {
  .fog-stage { height: 210vh; }
}
.fog-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}
.fog-scene {
  position: absolute;
  inset: 0;
  background: var(--sky-soft) url("assets/home/fog-scrub-poster.jpg") center / cover no-repeat;
}
/* the scrubbed video — its currentTime is driven by scroll in script.js */
.fog-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04); /* hide edge bleed */
  z-index: 1;
  background: transparent;
}

/* ── lower landing copy — fades in across the fog scroll ───── */
.fog-headline {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  will-change: opacity;
}
.fog-headline::before {
  content: "";
  position: absolute;
  inset: 45% 0 0;
  background: linear-gradient(transparent, rgba(16, 19, 25, 0.62));
}
.fog-copy {
  position: absolute;
  left: 16%;
  right: 16%;
  bottom: max(18svh, 90px);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10%;
  color: var(--white);
  text-shadow: 0 2px 20px rgba(16, 19, 25, 0.45);
}
.fog-title {
  margin: 0;
  font-family: var(--font-head);
  font-size: clamp(2.4rem, 4.8vw, 4.5rem);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.035em;
}
.fog-title span { display: block; white-space: nowrap; }
.fog-support {
  max-width: 300px;
  width: 32%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}
.fog-support p {
  margin: 0;
  font-size: clamp(1.15rem, 1.8vw, 1.5rem);
  font-weight: 500;
  line-height: 1.5;
}
.fog-support .btn { pointer-events: auto; text-shadow: none; }
.fog-support .btn:focus-visible { outline: 3px solid var(--amber); outline-offset: 5px; }
@media (max-width: 720px) {
  .fog-copy { left: 8%; right: 8%; gap: 7%; bottom: max(20svh, 112px); align-items: flex-start; }
  .fog-title { font-size: clamp(1.7rem, 8vw, 3.2rem); }
  .fog-support { width: 46%; gap: 14px; }
  .fog-support p { font-size: clamp(1rem, 3.2vw, 1.2rem); line-height: 1.4; }
  .fog-support .btn { padding: 10px 18px; font-size: 0.85rem; }
}

.scroll-cue {
  position: absolute;
  bottom: 34px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 8;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-family: var(--font-accent);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--white);
  text-shadow: 0 2px 12px rgba(16, 19, 25, 0.55);
  pointer-events: none;
}
.scroll-cue .cue-pill {
  width: 26px; height: 42px;
  border-radius: var(--radius-round);
  border: 2px solid rgba(255, 255, 255, 0.92);
  position: relative;
}
.scroll-cue .cue-pill::after {
  content: "";
  position: absolute;
  top: 7px; left: 50%;
  width: 4px; height: 8px;
  border-radius: 4px;
  background: var(--amber);
  transform: translateX(-50%);
  animation: cueDrop 1.8s ease-in-out infinite;
}
@keyframes cueDrop {
  0% { transform: translate(-50%, 0); opacity: 1; }
  70% { transform: translate(-50%, 14px); opacity: 0; }
  100% { transform: translate(-50%, 0); opacity: 0; }
}

/* the morph target — value prop card sliding over the scene */
.landing-reveal {
  position: relative;
  z-index: 10;
  margin-top: -8vh;
  background: var(--white);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  box-shadow: 0 -28px 70px rgba(16, 19, 25, 0.16);
  padding: clamp(56px, 7vw, 100px) 0 var(--space-section);
}

/* The still fallback: the CLEARED frame, not the foggy poster. Whenever the
   scrub cannot run — reduced motion, a failed decode, iOS low-power mode — the
   visitor has to land on the fog already lifted. Showing the foggy first frame
   instead would strand them on the "before" state, which inverts the whole
   point of the animation. script.js adds .fog-stage--still for the failure
   cases; the media query covers reduced motion on its own so the fallback
   still paints with JS disabled. */
.fog-stage--still .fog-scene {
  background-image: url("assets/home/fog-cleared-poster.jpg");
}
.fog-stage--still .fog-video { display: none; }
.fog-stage--still { height: 100vh; height: 100svh; }
.fog-stage--still .fog-headline { opacity: 1; }
.fog-stage--still ~ .landing-reveal { margin-top: 0; }
@media (max-width: 720px) {
  .fog-stage--still .fog-scene {
    background-image: url("assets/home/fog-cleared-poster-mobile.jpg");
  }
}

@media (prefers-reduced-motion: reduce) {
  /* No scrub. Collapse the tall stage and paint the cleared frame directly, so
     this works even before (or without) script.js. */
  .fog-stage { height: 100vh; height: 100svh; }
  .fog-headline { opacity: 1; }
  .landing-reveal { margin-top: 0; }
  .fog-scene { background-image: url("assets/home/fog-cleared-poster.jpg"); }
  .fog-video { display: none; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 720px) {
  .fog-scene { background-image: url("assets/home/fog-cleared-poster-mobile.jpg"); }
}

/* ── gallery strip (image marquee) ────────────────────────── */
.gallery-strip { overflow: hidden; padding: 6px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.gallery-track {
  display: flex;
  gap: var(--space-gap);
  width: max-content;
  animation: marquee 52s linear infinite;
}
.gallery-strip:hover .gallery-track { animation-play-state: paused; }
.gallery-card {
  width: clamp(220px, 24vw, 330px);
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-lg);
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
  background: var(--fog-2);
}
.gallery-card img {
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease, filter 0.6s ease;
}
.gallery-card:hover img { transform: scale(1.04); filter: saturate(1.06); }
.gallery-card.is-wide { aspect-ratio: 4 / 3; width: clamp(300px, 32vw, 440px); }
.gallery-card .gallery-tag {
  position: absolute;
  bottom: 12px; left: 12px;
  font-family: var(--font-accent);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: var(--radius-round);
  background: rgba(16, 19, 25, 0.5);
  color: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
}
@media (prefers-reduced-motion: reduce) { .gallery-track { animation: none; } }

/* ── responsive ───────────────────────────────────────────── */
@media (max-width: 980px) {
  .hero-grid, .calc-card, .founder-card, .about-body { grid-template-columns: 1fr; }
  .stat-grid, .guarantee-grid { grid-template-columns: 1fr 1fr; }
  .pricing-grid, .pricing-extras { grid-template-columns: 1fr; }
  .price-card.is-featured { order: -1; }
  .hero-visual { order: -1; }
  .hero-chip.chip-tl { top: -12px; left: 6px; }
  .hero-chip.chip-br { bottom: -12px; right: 6px; }
}

@media (max-width: 720px) {
  :root {
    --page-width: calc(100vw - 40px);
    --space-gap: 20px;
    --space-inset: 22px;
  }
  .main-nav { display: none; }
  .nav-toggle { display: block; flex-shrink: 0; }
  .header-shell { margin-top: 10px; padding: 8px 8px 8px 16px; gap: 10px; }
  .brand { font-size: 0.82rem; gap: 6px; }
  .brand .brand-logo { width: 36px; height: 36px; }
  .header-shell .btn-amber { display: none; }
  .stat-grid { grid-template-columns: 1fr 1fr; gap: var(--space-gap); }
  .guarantee-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .ba-frame { aspect-ratio: 4 / 3; }
  .hero { padding-top: 120px; }
  .hero-ctas .btn { flex: 1; justify-content: center; }
  .step { grid-template-columns: 44px 1fr; gap: 14px; }
  .step-num { width: 44px; height: 44px; font-size: 0.95rem; }
  .process-steps::before, .process-steps .progress-line { left: 21px; }
  .footer-grid { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 400px) {
  .header-shell { padding-left: 10px; gap: 6px; }
  .brand .brand-name { max-width: 72px; white-space: normal; line-height: 1.2; }
}