/* Hallmark · genre: editorial · macrostructure: Narrative Workflow · nav: N6 masthead · footer: Ft1 mast-headed
 * theme: custom · vibe: "calm care, safety first, hand set" · paper: oklch(96.5% 0.010 75) · accent: oklch(48% 0.130 252)
 * display: Fraunces · body: Manrope · axes: light / roman-serif / cool
 * enrichment: Tier C cutout photography (rembg) + logo sparkle motif · studied: no · v2 pass 08-19-26
 */

@import url("tokens.css?v=27");

/* ============================= base ============================= */

*, *::before, *::after { box-sizing: border-box; }

html, body { overflow-x: clip; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.015em;
  margin: 0;
  overflow-wrap: anywhere;
  min-width: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

img { display: block; max-width: 100%; height: auto; }

a { color: inherit; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

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

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2.5rem); }

.lead { font-size: var(--text-lg); line-height: 1.6; color: var(--color-ink-2); max-width: var(--measure); }

/* photos get the neutral hairline outline, drawn inside the edge */
.ph { outline: 1px solid rgba(0, 0, 0, 0.1); outline-offset: -1px; }

.tbc { color: var(--color-muted); border-bottom: 1px dotted var(--color-accent-soft); font-style: italic; }

/* the sparkle from her logo, used as a brand mark. Two sizes, never more. */
.spark { position: absolute; pointer-events: none; }
.spark svg { display: block; width: 100%; height: 100%; }

/* ============================= nav (compact, sticky) ============================= */

/* 1px sentinel above the nav so the scroll observer has real geometry */
#nav-sentinel { height: 1px; }

.nav {
  position: sticky;
  top: 0;
  z-index: 80;
  background: color-mix(in oklch, var(--color-paper) 90%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: var(--rule-hair) solid var(--color-rule);
  transition: box-shadow 300ms var(--ease-out), background 300ms var(--ease-out);
}

.nav.scrolled {
  background: var(--color-paper);
  box-shadow: 0 14px 34px -22px oklch(24% 0.03 250 / 0.55);
}

.nav__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: 4.25rem;
}

.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  min-width: 0;
}

.nav__brand img { width: 38px; height: auto; flex-shrink: 0; }

.nav__word {
  font-family: var(--font-display);
  font-size: 1.15rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-ink);
  line-height: 1.05;
  white-space: nowrap;
}

.nav__word small {
  display: block;
  font-family: var(--font-body);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  color: var(--color-rose-deep);
  margin-top: 2px;
}

.nav__links { display: flex; align-items: center; gap: 0.25rem; }

.nav__links a {
  position: relative;
  text-decoration: none;
  color: var(--color-ink-2);
  font-size: var(--text-sm);
  font-weight: 600;
  padding: 0.55rem 0.85rem;
  border-radius: 999px;
  white-space: nowrap;
  transition: color 150ms var(--ease-out), background 150ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .nav__links a:hover { color: var(--color-ink); background: oklch(24% 0.03 250 / 0.06); }
}

.btn--band { padding: 0.5rem 1.05rem; min-height: 38px; font-size: 0.72rem; }

@media (max-width: 760px) {
  .nav__links { display: none; }
  .nav__word small { display: none; }
  .nav__word { font-size: 1rem; }
}

/* phone: the wordmark loses to the CTA for space — mark only */
@media (max-width: 480px) {
  .nav__word { display: none; }
  .nav__brand img { width: 44px; }
}

/* ============================= nav burger + drawer ============================= */

.nav__burger { display: none; border: 0; background: transparent; cursor: pointer; width: 44px; height: 44px; padding: 10px; flex-shrink: 0; }
.nav__burger span { display: block; height: 2px; background: var(--color-ink); border-radius: 2px; transition: translate 200ms var(--ease-out), rotate 200ms var(--ease-out), opacity 150ms var(--ease-out); }
.nav__burger span + span { margin-top: 5px; }
.nav__burger[aria-expanded="true"] span:nth-child(1) { translate: 0 7px; rotate: 45deg; }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { translate: 0 -7px; rotate: -45deg; }
@media (max-width: 760px) { .nav__burger { display: block; } }

.drawer { position: fixed; inset: 0; z-index: 120; visibility: hidden; transition: visibility 0s 360ms; }
.drawer.open { visibility: visible; transition: none; }
.drawer__scrim { position: absolute; inset: 0; background: oklch(16% 0.03 255 / 0.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); opacity: 0; transition: opacity 280ms var(--ease-out); }
.drawer.open .drawer__scrim { opacity: 1; }
.drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(84vw, 22rem); background: var(--color-paper); display: flex; flex-direction: column; gap: var(--space-lg); padding: var(--space-md) var(--space-md) var(--space-xl); translate: 102% 0; transition: translate 340ms var(--ease-out); overflow-y: auto; box-shadow: -24px 0 60px -30px oklch(16% 0.03 255 / 0.5); }
.drawer.open .drawer__panel { translate: 0 0; }
.drawer__head { display: flex; align-items: center; gap: 0.6rem; padding-bottom: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); }
.drawer__word { font-family: var(--font-display); font-size: 1.05rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-ink); }
.drawer__close { margin-left: auto; border: 0; background: transparent; cursor: pointer; width: 44px; height: 44px; padding: 10px; color: var(--color-ink); }
.drawer__close svg { width: 100%; height: 100%; }
.drawer__links { display: flex; flex-direction: column; }
.drawer__links a { font-family: var(--font-display); font-size: 1.6rem; color: var(--color-ink); text-decoration: none; padding: 0.7rem 0; border-bottom: var(--rule-hair) solid var(--color-rule-2); }
.drawer__links a[aria-current="page"] { color: var(--color-rose-deep); }
.drawer__cta { align-self: stretch; }
.drawer__cta .btn { width: 100%; }
.drawer__meta { margin-top: auto; font-size: var(--text-sm); color: var(--color-muted); line-height: 1.8; }

/* ============================= hero ============================= */

/* Full-bleed dark showroom. The hero is its own world — nothing like the
   cream sections below it. Spotlight falls over the seat side; a soft rose
   glow warms the floor. */
.hero {
  padding-block: clamp(3rem, 7vw, 5.5rem) var(--space-2xl);
  overflow: clip;
  position: relative;
  color: var(--color-paper);
  background:
    radial-gradient(70% 85% at 72% -10%, oklch(42% 0.055 252 / 0.85), transparent 60%),
    radial-gradient(55% 45% at 80% 105%, oklch(48% 0.09 22 / 0.3), transparent 65%),
    linear-gradient(180deg, oklch(22% 0.035 253), oklch(16% 0.03 255));
}

/* the polished floor, full-bleed */
.hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 20%;
  background: linear-gradient(180deg, transparent, oklch(12% 0.025 255 / 0.9));
  pointer-events: none;
  z-index: 1;
}

/* ghost monogram, barely there, behind the copy */
.hero::before {
  content: "";
  position: absolute;
  left: -3%;
  top: 4%;
  width: 30rem;
  height: 30rem;
  background: url("../assets/img/logo-mark-lg.webp") no-repeat center / contain;
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
}

.hero .wrap { position: relative; z-index: 2; }

/* desktop only: the hero fills the space below the sticky nav so nothing
   from #how peeks in on load. Mobile (single column, see the 900px
   breakpoint further down) keeps its natural height instead. */
@media (min-width: 901px) {
  .hero {
    min-height: calc(100svh - 4.25rem + 42px);
    display: flex;
    align-items: center;
  }
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.hero__copy { padding-bottom: clamp(2.5rem, 6vw, 5rem); }

/* masked line reveal: each line rises out of its own clip */
.hero h1 {
  font-size: clamp(3rem, 7.2vw, 5.5rem);
  font-variation-settings: "opsz" 144, "SOFT" 30;
  letter-spacing: -0.03em;
  line-height: 1.02;
}

.hero h1 .line { display: block; overflow: clip; }

.hero h1 .line > span { display: block; transition: transform 700ms var(--ease-out); }
.hero h1 .line:nth-child(1) > span { transition-delay: 60ms; }
.hero h1 .line:nth-child(2) > span { transition-delay: 160ms; }
html.js .hero:not(.is-in) h1 .line > span { transform: translateY(112%); }

.hero h1 .rose { color: var(--color-rose); font-style: italic; }

/* light-on-dark recolors inside the hero */
.hero .lead { color: var(--color-paper-3); }
.hero__area { color: oklch(72% 0.02 250); }
.hero .btn--quiet { color: var(--color-accent-soft); text-decoration-color: oklch(58% 0.05 250); }
@media (hover: hover) and (pointer: fine) {
  .hero .btn--quiet:hover { text-decoration-color: var(--color-accent-soft); }
}
.hero .btn:not(.btn--quiet) { border-color: var(--color-paper); background: var(--color-paper); color: var(--color-ink); }
@media (hover: hover) and (pointer: fine) {
  .hero .btn:not(.btn--quiet):hover { background: var(--color-rose); border-color: var(--color-rose); }
}

/* hand-set hairline that draws itself */
.hero__rule {
  width: 5.5rem;
  height: 2px;
  margin-block: var(--space-md);
  background: var(--color-rose);
  transform-origin: left center;
  transition: transform 600ms var(--ease-out) 340ms;
}
html.js .hero:not(.is-in) .hero__rule { transform: scaleX(0); }

/* staggered entrance for the rest of the copy */
.hero__copy .st { transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out); }
.hero__copy .st:nth-of-type(1) { transition-delay: 400ms; }
.hero__copy .st:nth-of-type(2) { transition-delay: 480ms; }
.hero__copy .st:nth-of-type(3) { transition-delay: 560ms; }
/* .hero__trust is the fourth .st, but nth-of-type counts per tag name (it's
   only the 3rd <div> here, same ordinal as .hero__actions), so it needs its
   own delay rather than inheriting one by coincidence */
.hero__copy .hero__trust.st { transition-delay: 640ms; }
html.js .hero:not(.is-in) .hero__copy .st { opacity: 0; transform: translateY(12px); }

.hero__lead { max-width: 44ch; }

.hero__actions {
  margin-top: var(--space-lg);
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.hero__area { margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-muted); }

/* trust row: three true claims, hairline-topped, filling the empty
   lower-left under the area line */
.hero__trust {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: var(--rule-hair) solid var(--color-rule);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.hero__trust-item {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: oklch(80% 0.015 250);
  white-space: nowrap;
  padding: 0.45rem 0.9rem;
  border: 1px solid oklch(96% 0.01 75 / 0.18);
  border-radius: 999px;
  background: oklch(25% 0.032 252);  /* solid: bubbles pass behind, not through */
}

.hero__trust { border-top-color: oklch(96% 0.01 75 / 0.16); }

.hero__trust-sep { width: 0.6rem; height: 0.6rem; color: var(--color-accent-soft); flex-shrink: 0; }

/* the stage: no box anymore — the hero itself is the showroom, the seat just
   stands in it. Still video-ready: a Higgsfield loop drops in as .hero__video. */
.hero__panel {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 4.6;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

/* guard, desktop only: aspect-ratio derives the panel's height from its
   width, so on a short-but-wide viewport (1920x900 and similar) the panel
   can grow taller than the space below the nav before the 100%-width rule
   above ever becomes the binding constraint. Cap it by width instead of
   height — whichever limit (the grid column or the height budget) is
   smaller just wins — so the aspect ratio never distorts. Must come after
   the base .hero__panel rule above: same specificity, so source order
   decides, and this needs to win. */
@media (min-width: 901px) {
  .hero__panel {
    width: min(100%, calc((100svh - 11rem) * 4 / 4.6));
    margin-inline: auto;
  }
}

/* panel box chrome removed with the full-bleed hero: no inner hairline, no
   per-panel floor. The hero itself carries the floor gradient. */

/* The spotlight: one broad diagonal shaft of soft light sweeping from the
   upper left across to the seat — a single source, heavily blurred, nothing
   else. It sweeps in on load, then drifts almost imperceptibly. The div
   itself carries only the pool where the light lands. */
.hero__beam {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(42% 9% at 66% 84%, oklch(90% 0.02 250 / 0.14), transparent 72%);
}

.hero__beam svg {
  position: absolute;
  top: -32%;
  left: 11%;
  width: 104%;
  height: auto;
  transform-origin: 10% 8%;
  rotate: -1.5deg;
  animation: beam-drift 16s var(--ease-in-out) infinite alternate;
}

html.js .hero:not(.is-in) .hero__beam svg { opacity: 0; translate: -3% -8%; }
.is-in .hero__beam svg {
  animation: beam-enter 1.8s var(--ease-out) 400ms both,
             beam-drift 16s var(--ease-in-out) 2.6s infinite alternate;
}

@keyframes beam-enter {
  from { opacity: 0; translate: -3% -8%; }
  to   { opacity: 1; translate: 0 0; }
}
/* slow positional drift, not a fade */
@keyframes beam-drift {
  from { transform: rotate(0deg); }
  to   { transform: rotate(1.7deg); }
}

.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }

.hero__product {
  position: relative;
  z-index: 2;
  width: 68%;
  margin-bottom: 9%;
}

.hero__seat {
  width: 100%;
  filter: drop-shadow(0 26px 30px oklch(8% 0.02 255 / 0.55));
}

/* showroom-floor reflection: the same cutout, flipped, faded fast, out of flow
   so it hangs below the seat into the floor glow */
.hero__refl {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  transform: scaleY(-1);
  margin-top: 2px;
  opacity: 0.22;
  filter: blur(1.5px);
  -webkit-mask-image: linear-gradient(180deg, transparent 62%, oklch(0% 0 0 / 0.9) 100%);
  mask-image: linear-gradient(180deg, transparent 62%, oklch(0% 0 0 / 0.9) 100%);
  pointer-events: none;
}

/* soap bubbles rising from the hero's floor, GPU-only */
.bubbles { position: absolute; inset: 0; overflow: clip; z-index: 0; pointer-events: none; }

.bubbles i {
  position: absolute;
  bottom: -4%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 28%, oklch(98% 0.005 75 / 0.85) 0 6%, transparent 11%),
    radial-gradient(circle at 68% 74%, oklch(98% 0.005 75 / 0.35) 0 4%, transparent 9%),
    radial-gradient(circle at 50% 50%, transparent 58%, oklch(98% 0.005 75 / 0.32) 64% 70%, oklch(98% 0.005 75 / 0.08) 74%, transparent 78%);
  opacity: 0;
  animation: bubble-rise 12s linear infinite;
}

.bubbles i:nth-child(1) { left: 8%;  width: 12px; height: 12px; animation-duration: 11s;  animation-delay: 0s; }
.bubbles i:nth-child(2) { left: 24%; width: 20px; height: 20px; animation-duration: 14s;  animation-delay: 2.6s; }
.bubbles i:nth-child(3) { left: 43%; width: 10px; height: 10px; animation-duration: 10s;  animation-delay: 5.2s; }
.bubbles i:nth-child(4) { left: 60%; width: 16px; height: 16px; animation-duration: 13s;  animation-delay: 1.4s; }
.bubbles i:nth-child(5) { left: 76%; width: 24px; height: 24px; animation-duration: 15s;  animation-delay: 6.8s; }
.bubbles i:nth-child(6) { left: 90%; width: 14px; height: 14px; animation-duration: 12s;  animation-delay: 3.9s; }

@keyframes bubble-rise {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  7%   { opacity: 0.7; }
  45%  { transform: translateY(-34vh) translateX(9px); }
  80%  { opacity: 0.6; }
  100% { transform: translateY(-74vh) translateX(-7px); opacity: 0; }
}

.hero__panel .hero__product { transition: opacity 700ms var(--ease-out) 260ms, transform 700ms var(--ease-out) 260ms; }
html.js .hero:not(.is-in) .hero__product { opacity: 0; transform: translateY(26px); }

/* four sparkles from her logo, glinting in the dark — light colors only here */
.hero__panel .spark--a { width: 2.4rem;  top: 9%;   right: 10%; color: var(--color-accent-soft); z-index: 3; }
.hero__panel .spark--b { width: 1.4rem;  top: 22%;  left: 14%;  color: var(--color-rose);        z-index: 3; }
.hero__panel .spark--c { width: 1.1rem;  top: 38%;  right: 20%; color: oklch(96% 0.015 75);      z-index: 3; }
.hero__panel .spark--d { width: 0.95rem; top: 55%;  left: 9%;   color: var(--color-rose);        z-index: 3; }

.hero__panel .spark { transition: opacity 300ms var(--ease-out) 760ms, transform 300ms var(--ease-out) 760ms, filter 300ms var(--ease-out) 760ms; }
.hero__panel .spark--b { transition-delay: 880ms; }
.hero__panel .spark--c { transition-delay: 990ms; }
.hero__panel .spark--d { transition-delay: 1080ms; }
html.js .hero:not(.is-in) .spark { opacity: 0; transform: scale(0.25); filter: blur(4px); }

/* each sparkle drifts on the outer element and glistens on the inner svg,
   so neither fights the entrance transition */
.is-in .hero__panel .spark { animation: spark-float 5.5s var(--ease-in-out) infinite alternate; }
.is-in .hero__panel .spark--b { animation-duration: 6.5s; animation-delay: 0.8s; }
.is-in .hero__panel .spark--c { animation-duration: 7s;   animation-delay: 1.6s; }
.is-in .hero__panel .spark--d { animation-duration: 6s;   animation-delay: 0.4s; }

@keyframes spark-float {
  from { translate: 0 0; }
  to   { translate: 0 -14px; }
}

.spark svg {
  animation: twinkle 2.8s var(--ease-in-out) infinite;
  transform-origin: center;
  filter: drop-shadow(0 0 5px currentColor);
}
.spark--b svg { animation-duration: 3.6s; animation-delay: 0.9s; }
.spark--c svg { animation-duration: 3.2s; animation-delay: 1.7s; }
.spark--d svg { animation-duration: 3.9s; animation-delay: 0.5s; }

@keyframes twinkle {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
  50%      { transform: scale(0.72) rotate(18deg); opacity: 0.7; }
}

/* hero baseline rule, full bleed. Pinned to the section's true bottom edge
   (not left in normal flow after .wrap) so the .hero padding-bottom above
   becomes clearance between the panel and the rule, not space after it. */
/* hero__base removed: the dark-to-cream edge is the divider now */

/* ============================= buttons ============================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  min-height: 44px;
  padding: 0.8rem 1.5rem;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  border: var(--rule-hair) solid var(--color-accent);
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--color-accent-ink);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), transform 160ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: oklch(42% 0.135 252); }
}
.btn:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.btn:active { transform: scale(0.96); }
.btn[disabled] { background: var(--color-paper-3); border-color: var(--color-rule); color: var(--color-muted); cursor: not-allowed; }
.btn[data-state="loading"] { cursor: progress; opacity: 0.75; }
.btn[data-state="success"] { background: var(--color-success); border-color: var(--color-success); }
.btn[data-state="error"] { background: var(--color-error); border-color: var(--color-error); }

.btn__ico { width: 16px; height: 16px; flex-shrink: 0; }
.btn--band .btn__ico { width: 14px; height: 14px; }

/* Rotating brand ring around primary CTAs, ported from the Rolling Lawns
   pattern: an oversized conic square SPINS (composited, works on iOS Safari)
   rather than animating the gradient angle. Ours turns counterclockwise. */
.ring {
  position: relative;
  display: inline-flex;
  border-radius: 999px;
  padding: 2px;
  isolation: isolate;
  overflow: clip;
}
.ring::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(150% + 48px);
  aspect-ratio: 1;
  translate: -50% -50%;
  z-index: -1;
  background: conic-gradient(from 0deg,
    var(--color-accent) 0%,
    var(--color-accent-soft) 22%,
    oklch(96% 0.015 75) 27%,
    var(--color-rose) 33%,
    var(--color-accent) 45%,
    var(--color-accent) 55%,
    var(--color-accent-soft) 72%,
    oklch(96% 0.015 75) 77%,
    var(--color-rose) 83%,
    var(--color-accent) 100%);
  animation: ring-spin 5s linear infinite;
}
@keyframes ring-spin { to { rotate: -360deg; } }

/* floating pickup pill removed 08-20-26: redundant with the nav CTA */

/* redundant with the always-visible nav CTA on mobile */


.btn--quiet {
  background: transparent;
  color: var(--color-accent);
  border-color: transparent;
  padding-inline: 0;
  min-height: 44px;
  text-decoration: underline;
  text-underline-offset: 0.35em;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--color-accent-soft);
  transition: text-decoration-color var(--dur-fast) var(--ease-out), transform 160ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .btn--quiet:hover { background: transparent; text-decoration-color: var(--color-accent); }
}

/* ============================= section chrome ============================= */

.section { padding-block: clamp(3.5rem, 8vw, 5.5rem); }

.head { margin-bottom: clamp(2rem, 5vw, 3rem); }

.head h2 { font-size: clamp(2rem, 4.6vw, var(--text-4xl)); font-variation-settings: "opsz" 100; max-width: 22ch; }

.head .kicker {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-rose-deep);
  margin-bottom: var(--space-2xs);
}

.head p { margin-top: var(--space-sm); }

/* ============================= section backgrounds + textures ============================= */
/* three alternating bands, each carrying a low-opacity data-URI texture so no
   two neighboring sections read as the same field. Opacities stay felt, not seen. */

.bg-suds {
  background-color: var(--color-paper);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='140' viewBox='0 0 240 140'><path d='M0 30 Q60 10 120 30 T240 30' fill='none' stroke='%23175FA4' stroke-opacity='0.05' stroke-width='2'/><path d='M0 70 Q60 50 120 70 T240 70' fill='none' stroke='%23175FA4' stroke-opacity='0.05' stroke-width='2'/><path d='M0 110 Q60 90 120 110 T240 110' fill='none' stroke='%23175FA4' stroke-opacity='0.05' stroke-width='2'/></svg>");
  background-repeat: repeat;
  background-size: 240px 140px;
  border-block: var(--rule-hair) solid var(--color-rule);
}

.bg-linen {
  background-color: oklch(94% 0.018 40);
  background-image: repeating-linear-gradient(15deg, transparent 0 13px, color-mix(in oklch, #B25E5C 8%, transparent) 13px 14px);
  border-block: var(--rule-hair) solid var(--color-rule);
}

/* .bg-why and .bg-ink-bubbles are declared further down, right after
   .bg-band and .inquiry — both of those set `background:` as a shorthand,
   which resets background-image to none, so the texture layer has to come
   later in source order to survive the cascade. */

/* joints that carry a seam or strap drop the section's own border on that
   edge so the two rules don't stack into a doubled line */
/* the last squiggle sits well clear of the timeline already; the section's
   own bottom padding was leaving roughly 3x that gap again below it */
#how.bg-suds { border-bottom: none; padding-bottom: var(--space-xl); }
#results.bg-linen { border-top: none; }
#why.bg-band { border-bottom: none; }
#pricing.bg-suds { border-top: none; }

/* her monogram between sections, like the Rolling Lawns seam: a stitched
   three-color rule (accent / rose-deep / soft blue) instead of one hairline.
   Lives as the first child of the section it introduces rather than
   floating in flow between two sections, so it can be centered exactly on
   that section's top border instead of merely sitting near it. Full-bleed
   (no .wrap) and absolutely placed; the section itself carries
   position: relative to anchor it. */
.seam {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  transform: translateY(-50%);
  z-index: 5;
  display: grid;
  place-items: center;
  pointer-events: none;
}
/* one continuous stitched line running the full width BEHIND the medallion —
   no flex segments, so no gaps and no white shoulders next to the mark */
.seam::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 9px;
  transform: translateY(-50%);
  background: linear-gradient(to bottom,
    transparent 0 1px,
    var(--color-accent) 1px 3px,
    transparent 3px 4px,
    var(--color-rose-deep) 4px 5px,
    transparent 5px 6px,
    var(--color-accent-soft) 6px 8px,
    transparent 8px 9px);
}
/* the medallion: a true circle, mark contained undistorted, hairline edge */
.seam img {
  position: relative;
  z-index: 1;
  width: 58px;
  height: 58px;
  object-fit: contain;
  padding: 12px;
  background: var(--color-paper);
  border: 1px solid var(--color-rule);
  border-radius: 50%;
  box-shadow: 0 4px 14px -6px oklch(24% 0.03 250 / 0.5);
}

/* light-stitch variant, for seams that sit on a dark-to-light border (the
   hero → #how join) instead of the light-to-light joins elsewhere */
.seam--dark::before {
  background: linear-gradient(to bottom,
    transparent 0 1px,
    oklch(96% 0.01 75 / 0.9) 1px 3px,
    transparent 3px 4px,
    var(--color-rose) 4px 5px,
    transparent 5px 6px,
    var(--color-accent-soft) 6px 8px,
    transparent 8px 9px);
}

/* sections that host a seam as their first child need it to anchor against */
#how, #results, #pricing { position: relative; }

/* seat-belt webbing bar, brackets the inquiry form band top and bottom.
   Real elements, not ::before/::after, so they never fight .inquiry::after
   (the ghost monogram already parked on that hook). */
.strap {
  position: absolute;
  left: 0;
  right: 0;
  height: 12px;
  background: repeating-linear-gradient(90deg, #14202D 0 26px, #2E4358 26px 52px);
  pointer-events: none;
}
.strap--top { top: 0; }
.strap--bottom { bottom: 0; }

/* ============================= how it works (timeline with living connector) ============================= */

.steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
  padding-top: var(--space-lg);
  text-align: center;
}

/* the connector: flowing dashed line between the first and last node */
.step-track {
  position: absolute;
  top: calc(var(--space-lg) + 29px);
  left: 16.66%;
  right: 16.66%;
  height: 3px;
  border-radius: 3px;
  z-index: 0;
  background: repeating-linear-gradient(90deg, var(--color-rose-deep) 0 8px, oklch(58% 0.11 22 / 0.2) 8px 16px);
  background-size: 16px 100%;
  animation: flow-dash 1.1s linear infinite;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 900ms var(--ease-out) 150ms;
  overflow: visible;
}
.is-in .step-track { transform: scaleX(1); }
@keyframes flow-dash { to { background-position: -16px 0; } }

/* a soft glint travels the line, like light over a clean surface */
.step-glint {
  position: absolute;
  top: 50%;
  left: 0;
  width: 54px;
  height: 11px;
  margin-top: -5.5px;
  border-radius: 6px;
  background: linear-gradient(90deg, transparent, oklch(97% 0.015 75 / 0.95), transparent);
  filter: blur(1px);
  animation: glint-run 3.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes glint-run {
  0%   { left: -8%; opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

.step { position: relative; z-index: 1; }

/* the node: a rose medallion with the numeral, pulsing quietly */
.step__node {
  position: relative;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin: 0 auto var(--space-sm);
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, oklch(93% 0.03 25), var(--color-arch));
  box-shadow: 0 12px 26px -10px oklch(58% 0.11 22 / 0.55), inset 0 1px 0 oklch(99% 0.005 75 / 0.5);
  transition: transform 250ms var(--ease-out), box-shadow 250ms var(--ease-out);
}

.step__node i {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.5rem;
  color: var(--color-rose-deep);
  line-height: 1;
}

.step__node::before {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 2px solid var(--color-rose);
  opacity: 0.55;
  animation: node-pulse 2.6s ease-out infinite;
}
@keyframes node-pulse {
  0%        { transform: scale(1); opacity: 0.55; }
  70%, 100% { transform: scale(1.5); opacity: 0; }
}

@media (hover: hover) and (pointer: fine) {
  .step:hover .step__node { transform: translateY(-4px) scale(1.05); box-shadow: 0 18px 34px -12px oklch(58% 0.11 22 / 0.75), inset 0 1px 0 oklch(99% 0.005 75 / 0.5); }
}

.step h3 { font-size: var(--text-xl); margin-bottom: var(--space-2xs); }

.step p { font-size: var(--text-base); color: var(--color-ink-2); max-width: 34ch; margin-inline: auto; }

/* staggered rise */
.steps .step { transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out); }
.steps .step:nth-child(3) { transition-delay: 90ms; }
.steps .step:nth-child(4) { transition-delay: 180ms; }
html.js .steps:not(.is-in) .step { opacity: 0; transform: translateY(14px); }

/* ============================= before / after ============================= */

.bg-band { background: var(--color-paper-2); border-block: var(--rule-hair) solid var(--color-rule); }

/* rose suds waves instead of blue, so #why doesn't echo #how */
.bg-why {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='140' viewBox='0 0 240 140'><path d='M0 30 Q60 10 120 30 T240 30' fill='none' stroke='%23B25E5C' stroke-opacity='0.07' stroke-width='2'/><path d='M0 70 Q60 50 120 70 T240 70' fill='none' stroke='%23B25E5C' stroke-opacity='0.07' stroke-width='2'/><path d='M0 110 Q60 90 120 110 T240 110' fill='none' stroke='%23B25E5C' stroke-opacity='0.07' stroke-width='2'/></svg>");
  background-repeat: repeat;
  background-size: 240px 140px;
}

.pairs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3rem); }

.pair { margin: 0; }

.pair__imgs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px;
  background: var(--color-paper);
  border-radius: var(--radius-md);
  overflow: clip;
  outline: 1px solid rgba(0, 0, 0, 0.1);
  outline-offset: -1px;
  transition: transform 250ms var(--ease-out), box-shadow 250ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .pair:hover .pair__imgs {
    transform: translateY(-5px);
    box-shadow: 0 22px 40px -22px oklch(24% 0.03 250 / 0.35);
  }
}

.pair__shot { position: relative; margin: 0; min-width: 0; }

.pair__shot img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

/* single-photo gallery entries: one shot, no before/after split */
.pair__imgs--single { grid-template-columns: minmax(0, 1fr); }
.pair__imgs--single .pair__shot img { aspect-ratio: 4 / 5; object-fit: cover; }

.pair__tag {
  position: absolute;
  inset-block-start: var(--space-2xs);
  inset-inline-start: var(--space-2xs);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.22rem 0.55rem;
  border-radius: var(--radius-sm);
  background: var(--color-paper);
  color: var(--color-ink);
}

.pair__tag--after { background: var(--color-rose-deep); color: var(--color-paper); }

.pair figcaption {
  margin-top: var(--space-2xs);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-base);
  color: var(--color-ink-2);
}

.pairs .pair { transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out); }
.pairs .pair:nth-child(2) { transition-delay: 100ms; }
html.js .pairs:not(.is-in) .pair { opacity: 0; transform: translateY(14px); }

@keyframes flow-dash-v { to { background-position: 0 -16px; } }

/* ---- drag slider: before wipes over after, registered AI pairs only ---- */
.ba {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 14px;
  overflow: clip;
  outline: 1px solid rgba(0, 0, 0, 0.1);
  outline-offset: -1px;
  background: var(--color-paper-3);
}
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ba-before { position: absolute; inset: 0; overflow: clip; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba-divider {
  position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px;
  background: var(--color-paper); z-index: 4; transform: translateX(-50%);
  pointer-events: none; box-shadow: 0 0 14px oklch(24% 0.03 250 / 0.45);
}
.ba-grip {
  position: absolute; top: 50%; left: 50%; translate: -50% -50%;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--color-paper); color: var(--color-accent);
  display: grid; place-items: center;
  box-shadow: 0 6px 18px -6px oklch(24% 0.03 250 / 0.55);
}
.ba-range {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: ew-resize; margin: 0; touch-action: none;
}
.ba:has(.ba-range:focus-visible) { outline: 3px solid var(--color-focus); outline-offset: 2px; }

/* ============================= why band ============================= */

.safety__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

/* lifted card: the quote gets a paper box that floats clear of the band's
   wave texture behind it. The detail paragraphs beside it stay unboxed. */
.safety__grid blockquote {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: var(--space-lg);
  background: var(--color-paper);
  border: var(--rule-hair) solid var(--color-rule);
  border-left: 3px solid var(--color-rose-deep);
  border-radius: 14px;
  box-shadow: 0 24px 50px -32px oklch(24% 0.03 250 / 0.35);
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.6vw, 2.4rem);
  line-height: 1.25;
  font-variation-settings: "opsz" 90;
  text-wrap: balance;
}

.safety__grid blockquote em { color: var(--color-rose-deep); font-style: italic; }

.safety__detail p { color: var(--color-ink-2); max-width: var(--measure); }
.safety__detail p + p { margin-top: var(--space-sm); }

/* ============================= brand marquee ============================= */

/* its own band now, not just floating on cream: solid brand blue, a heavier
   ink border top and bottom, and an inset cream hairline just inside it */
.marquee {
  position: relative;
  padding-block: var(--space-lg);
  background: var(--color-accent);
  border-block: 3px solid var(--color-ink);
  box-shadow:
    inset 0 1px 0 oklch(96% 0.01 75 / 0.35),
    inset 0 -1px 0 oklch(96% 0.01 75 / 0.35);
}

/* .marquee's own top border shifts an absolutely-positioned child's
   containing block (the padding box starts 3px below the border box), so
   its seam needs top:-3px to land on the same line as the borderless
   #results/#pricing seams do at top:0 */
.marquee > .seam { top: -3px; }

/* overflow:clip lives here instead of on .marquee itself, so the seam
   (absolutely placed, straddling .marquee's own top border) is never
   clipped along with the scrolling track */
.marquee__viewport { overflow: clip; }

.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee-roll 36s linear infinite;
}

.marquee__set {
  display: flex;
  align-items: center;
  gap: 2.2rem;
  padding-right: 2.2rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.9rem, 4.5vw, 3.1rem);
  color: var(--color-paper);
  white-space: nowrap;
}

.marquee__set svg { width: 0.55em; height: 0.55em; color: var(--color-rose); flex-shrink: 0; }

@keyframes marquee-roll { to { transform: translateX(-50%); } }

/* ============================= pricing (set like a menu) ============================= */

.pricing__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}

.pricing__intro { position: sticky; top: var(--space-lg); }

/* boxed intro text, matching the safety quote card: text in boxes = depth */
.intro-card {
  margin-top: var(--space-md);
  background: var(--color-paper);
  border: var(--rule-hair) solid var(--color-rule);
  border-left: 3px solid var(--color-accent);
  border-radius: 14px;
  padding: var(--space-md);
  box-shadow: 0 24px 50px -32px oklch(24% 0.03 250 / 0.35);
  position: relative;
  z-index: 1;
}
.intro-card > p { color: var(--color-ink-2); max-width: 38ch; }
.intro-card .loaner { margin-top: var(--space-sm); }
.intro-card__foot { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }
.pricing__intro p { margin-top: var(--space-sm); color: var(--color-ink-2); max-width: 38ch; }

.loaner {
  margin-top: var(--space-lg);
  padding: var(--space-md);
  border-left: var(--rule-thick) solid var(--color-rose-deep);
  background: var(--color-paper-2);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.loaner p { color: var(--color-ink-2); font-size: var(--text-sm); margin: 0; }
.loaner strong { color: var(--color-ink); }

/* ---- the estimator: build your clean, watch the price move ---- */

/* traveling border beam: the card's hairline border with a glint running the perimeter */
.beam-frame {
  position: relative;
  border-radius: 22px;
  padding: 2px;
  overflow: clip;
  isolation: isolate;
  background: var(--color-rule);
  box-shadow: 0 24px 50px -32px oklch(24% 0.03 250 / 0.35);
}
.beam-frame::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(150% + 48px);
  aspect-ratio: 1;
  translate: -50% -50%;
  z-index: -1;
  background: conic-gradient(from 0deg,
    transparent 0 78%,
    oklch(70% 0.055 250 / 0.5) 84%,
    oklch(48% 0.13 252) 90%,
    oklch(76% 0.065 25) 94%,
    transparent 100%);
  animation: ring-spin 7s linear infinite;
}

.est {
  border-radius: 20px;
  background: var(--color-paper);
  overflow: clip;
}

/* tabs: a sliding pill indicator, no scroll-jumps */
.est__tabs {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--color-paper-2);
  padding: 6px;
  gap: 0;
}

.est__tab {
  position: relative;
  z-index: 1;
  border: 0;
  background: transparent;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
  padding: 0.8rem 1rem;
  cursor: pointer;
  border-radius: 14px;
  transition: color 200ms var(--ease-out);
}
.est__tab[aria-selected="true"] { color: var(--color-ink); }

.est__ind {
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 6px;
  width: calc(50% - 6px);
  background: var(--color-paper);
  border-radius: 14px;
  box-shadow: 0 2px 10px -4px oklch(24% 0.03 250 / 0.4);
  transition: transform 280ms var(--ease-out);
}

.est__panel { padding: clamp(1.25rem, 3vw, 2rem); }

.est__group { border: 0; margin: 0 0 var(--space-md); padding: 0; min-width: 0; }

.est__group legend {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-rose-deep);
  margin-bottom: var(--space-xs);
  padding: 0;
}

.opts { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.opts--cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2xs); }

.opt { position: relative; display: block; min-width: 0; }
.opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }

.opt__card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  height: 100%;
  padding: 0.85rem 0.9rem;
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 160ms var(--ease-out), background 160ms var(--ease-out), transform 160ms var(--ease-out);
}
.opt__card strong { font-size: var(--text-sm); font-weight: 700; }
.opt__card em {
  font-family: var(--font-display);
  font-style: normal;
  font-size: var(--text-lg);
  color: var(--color-ink-2);
}
.opt__card small { font-size: var(--text-xs); color: var(--color-muted); }

.opt__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 1rem;
  min-height: 40px;
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: 999px;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 160ms var(--ease-out), background 160ms var(--ease-out), transform 160ms var(--ease-out);
}
.opt__pill em { font-style: normal; color: var(--color-rose-deep); font-weight: 700; }

@media (hover: hover) and (pointer: fine) {
  .opt__card:hover, .opt__pill:hover { border-color: var(--color-accent-soft); }
}
.opt input:active + .opt__card, .opt input:active + .opt__pill { transform: scale(0.97); }

.opt input:checked + .opt__card,
.opt input:checked + .opt__pill {
  border-color: var(--color-accent);
  background: oklch(48% 0.13 252 / 0.07);
  box-shadow: inset 0 0 0 1px var(--color-accent);
}
.opt input:checked + .opt__card em { color: var(--color-accent); }

.opt input:focus-visible + .opt__card,
.opt input:focus-visible + .opt__pill {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

/* the running total */
.est__total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  border-top: 2px dotted var(--color-rule);
  padding-top: var(--space-md);
  margin-top: var(--space-lg);
}

.est__total-label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.est__total-note { display: block; font-size: var(--text-xs); color: var(--color-muted); margin-top: 4px; }

.est__fig {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6vw, 3.6rem);
  font-variation-settings: "opsz" 90;
  line-height: 1;
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.est__fig sup { font-size: 0.45em; color: var(--color-rose-deep); margin-right: 2px; }

.est__cta { margin-top: var(--space-md); width: 100%; }

/* monthly plans */
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }

.plan {
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: 14px;
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  transition: transform 250ms var(--ease-out), box-shadow 250ms var(--ease-out), border-color 250ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .plan:hover { transform: translateY(-4px); border-color: var(--color-accent-soft); box-shadow: 0 22px 40px -26px oklch(24% 0.03 250 / 0.4); }
}

.plan h3 { font-size: var(--text-xl); }

.plan__fig {
  font-family: var(--font-display);
  font-size: 2.4rem;
  line-height: 1;
  color: var(--color-accent);
}
.plan__fig small { font-family: var(--font-body); font-size: var(--text-sm); color: var(--color-muted); }

.plan__note { font-size: var(--text-sm); color: var(--color-ink-2); flex: 1; }

.plan--alt { background: var(--color-paper-2); }

.plan__cta { margin-top: var(--space-sm); }

/* ============================= inquiry ============================= */

.inquiry { background: var(--color-ink); color: var(--color-paper); position: relative; overflow: clip; }

/* scattered soap bubbles, varied radii and positions, never a uniform grid */
.bg-ink-bubbles {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='160' viewBox='0 0 120 160'><circle cx='18' cy='26' r='2.4' fill='%23F7F3EC' fill-opacity='0.05'/><circle cx='68' cy='14' r='1.6' fill='%23F7F3EC' fill-opacity='0.05'/><circle cx='97' cy='63' r='3.6' fill='%23F7F3EC' fill-opacity='0.05'/><circle cx='34' cy='101' r='2' fill='%23F7F3EC' fill-opacity='0.05'/><circle cx='80' cy='138' r='3.9' fill='%23F7F3EC' fill-opacity='0.05'/></svg>");
  background-repeat: repeat;
  background-size: 120px 160px;
}

/* ghost monogram, barely there */
.inquiry::after {
  content: "";
  position: absolute;
  right: 2%;
  bottom: 3%;
  width: 17rem;
  height: 17rem;
  background: url("../assets/img/logo-mark-lg.webp") no-repeat center / contain;
  opacity: 0.06;
  pointer-events: none;
}

.inquiry .wrap { position: relative; z-index: 1; }

.inquiry .head h2 { color: var(--color-paper); }
.inquiry .head .kicker { color: var(--color-rose); }
.inquiry .lead { color: var(--color-paper-3); }

/* gallery's short, centered CTA variant of the inquiry band */
.cta-band { position: relative; }
.cta-band__inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-lg); text-align: center; position: relative; z-index: 1; }
.cta-band h2 { color: var(--color-paper); font-size: clamp(2rem, 4.6vw, var(--text-4xl)); max-width: none; }

.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md) var(--space-lg); }

.field { display: flex; flex-direction: column; gap: var(--space-3xs); min-width: 0; }
.field--full { grid-column: 1 / -1; }

.field label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-paper-3);
}

.field input, .field select, .field textarea {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-paper);
  background: transparent;
  border: none;
  border-bottom: var(--rule-hair) solid oklch(45% 0.02 250);
  border-radius: 0;
  padding: 0.6rem 0.1rem;
  min-width: 0;
  width: 100%;
  min-height: 44px;
  transition: border-color var(--dur-fast) var(--ease-out);
}

.field textarea { resize: vertical; min-height: 6rem; }
.field select option { color: var(--color-ink); }
.field input::placeholder, .field textarea::placeholder { color: oklch(64% 0.018 250); }

.field input:hover, .field select:hover, .field textarea:hover { border-bottom-color: var(--color-accent-soft); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
  border-bottom-color: var(--color-accent-soft);
}

.field[data-state="error"] input, .field[data-state="error"] select, .field[data-state="error"] textarea { border-bottom-color: var(--color-rose); }
.field__msg { font-size: var(--text-xs); color: var(--color-rose); min-height: 1em; }

.field--check { flex-direction: row; align-items: center; gap: var(--space-2xs); }
.field--check label { text-transform: none; letter-spacing: 0; font-size: var(--text-sm); font-weight: 400; color: var(--color-paper-3); }
.field--check input { width: 1.05rem; height: 1.05rem; min-height: 0; accent-color: var(--color-rose); border-bottom: none; padding: 0; }

.form__submit { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap; margin-top: var(--space-2xs); }

.form__submit .btn { background: var(--color-paper); border-color: var(--color-paper); color: var(--color-ink); }
@media (hover: hover) and (pointer: fine) {
  .form__submit .btn:hover { background: var(--color-rose); border-color: var(--color-rose); }
}

.form__privacy { font-size: var(--text-xs); color: var(--color-paper-3); }
.form__privacy a { color: var(--color-accent-soft); white-space: nowrap; }

/* ============================= footer (Ft1) ============================= */

.foot { border-top: var(--rule-thick) solid var(--color-ink); padding-block: var(--space-xl); }

.foot__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-lg); align-items: start; }

.foot__brand img { width: 132px; }
.foot__tagline { margin-top: var(--space-2xs); font-family: var(--font-display); font-style: italic; font-size: var(--text-base); color: var(--color-ink-2); max-width: 26ch; }

.foot h4 {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: var(--space-2xs);
}

.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li + li { margin-top: var(--space-3xs); }
.foot li { font-size: var(--text-sm); color: var(--color-ink-2); }

.foot a {
  color: var(--color-ink-2);
  text-decoration: none;
  border-bottom: 1px solid var(--color-rule);
  transition: border-color var(--dur-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .foot a:hover { border-bottom-color: var(--color-rose-deep); }
}

.foot__legal {
  margin-top: var(--space-lg);
  padding-top: var(--space-sm);
  border-top: var(--rule-hair) solid var(--color-rule);
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
  flex-wrap: wrap;
  font-size: var(--text-xs);
  color: var(--color-muted);
}

/* ============================= reveal ============================= */

.reveal { transition: opacity 560ms var(--ease-out), transform 560ms var(--ease-out), filter 560ms var(--ease-out); }
/* hidden initial state exists only when JS is present; stages conduct their
   children and never hide themselves. The blur masks the crossfade. */
html.js .reveal:not(.is-in):not(.reveal--stage) { opacity: 0; transform: translateY(14px); filter: blur(6px); }

/* ============================= legal / prose pages ============================= */

.prose { max-width: 42rem; padding-block: var(--space-2xl) var(--space-3xl); }
.prose h1 { font-size: clamp(2rem, 5vw, var(--text-4xl)); margin-bottom: var(--space-sm); }
.prose h2 {
  font-size: var(--text-xl);
  margin-top: var(--space-xl);
  margin-bottom: var(--space-2xs);
  padding-top: var(--space-sm);
  border-top: var(--rule-hair) solid var(--color-rule);
}
.prose p { color: var(--color-ink-2); margin-top: var(--space-sm); }
.prose ul { color: var(--color-ink-2); margin-top: var(--space-sm); padding-left: 1.1rem; }
.prose li + li { margin-top: var(--space-3xs); }
.prose a { color: var(--color-accent); }

.draft-banner {
  margin-top: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border: var(--rule-hair) solid var(--color-rose);
  border-left: var(--rule-thick) solid var(--color-rose-deep);
  border-radius: var(--radius-md);
  background: var(--color-paper-2);
  font-size: var(--text-sm);
  color: var(--color-ink-2);
}

/* ============================= responsive ============================= */

@media (max-width: 900px) {
  .hero { padding-top: 2rem; }
  /* headline and seat share the first row: display:contents lifts the copy's
     children into the grid so the panel can sit beside the h1 */
  .hero__copy { display: contents; }
  .hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 0 0.9rem;
    grid-template-areas:
      "h1 panel"
      "rule panel"
      "lead lead"
      "actions actions"
      "area area"
      "trust trust";
  }
  .hero h1 { grid-area: h1; align-self: center; font-size: clamp(2.1rem, 9.5vw, 2.8rem); }
  .hero__rule { grid-area: rule; align-self: start; margin-block: var(--space-sm); }
  .hero__lead { grid-area: lead; margin-top: var(--space-2xs); }
  .hero__actions { grid-area: actions; }
  .hero__area { grid-area: area; }
  .hero__trust { grid-area: trust; }
  .hero__panel { grid-area: panel; margin-top: 0; z-index: 1; aspect-ratio: auto; align-self: center; }
  .hero__product { width: 92%; margin-bottom: 10%; }
  /* sparkles scale to the smaller stage */
  .hero__panel .spark--a { width: 1.3rem; }
  .hero__panel .spark--b { width: 0.85rem; }
  .hero__panel .spark--c { width: 0.7rem; }
  .hero__panel .spark--d { display: none; }
  .opts--cards { grid-template-columns: minmax(0, 1fr); }
  .plans { grid-template-columns: minmax(0, 1fr); }

  .safety__grid, .pricing__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .pricing__intro { position: static; }

  /* mobile: the timeline turns vertical, nodes on the left */
  .steps { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); text-align: left; max-width: 30rem; margin-inline: auto; }
  .step { display: grid; grid-template-columns: 58px minmax(0, 1fr); column-gap: var(--space-md); align-items: start; }
  .step__node { margin: 0; grid-row: 1 / span 2; }
  .step h3, .step p { grid-column: 2; }
  .step p { margin-inline: 0; max-width: none; }
  .step-track { display: none; }
  .step { position: relative; }
  .step:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 26px;
    top: 62px;
    bottom: calc(-1 * var(--space-lg) - 2px);
    width: 3px;
    border-radius: 3px;
    background: repeating-linear-gradient(180deg, var(--color-rose-deep) 0 8px, oklch(58% 0.11 22 / 0.2) 8px 16px);
    background-size: 100% 16px;
    animation: flow-dash-v 1.1s linear infinite;
  }
  .step-glint { display: none; }

  .pairs { grid-template-columns: minmax(0, 1fr); }
  .foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  /* single column: the shaft widens and centers over the stacked seat */
  .hero__beam { background: radial-gradient(46% 6% at 72% 46%, oklch(90% 0.02 250 / 0.12), transparent 72%); }
  .hero__beam svg { top: -10%; left: -28%; width: 156%; }
}

@media (max-width: 640px) {
  .form { grid-template-columns: minmax(0, 1fr); gap: var(--space-sm) var(--space-md); }
  .inquiry { padding-block: var(--space-2xl); }
  .field input, .field select { min-height: 42px; }
  .foot__grid { grid-template-columns: minmax(0, 1fr); }
  .hero__actions { gap: var(--space-sm); }
  .hero__actions .btn:not(.btn--quiet) { width: 100%; }
  .hero__actions .btn--quiet { padding-inline: 0; }
  .inquiry::after { width: 11rem; height: 11rem; }
  .hero::before { width: 16rem; height: 16rem; }
  .hero__trust-sep { display: none; }
  .hero__trust { gap: 0.45rem; }
  /* compact chips so they pack side by side instead of stacking one per line */
  .hero__trust-item { font-size: 0.64rem; padding: 0.38rem 0.7rem; letter-spacing: 0.06em; }
  .marquee__set { font-size: 1.35rem; gap: 1.2rem; padding-right: 1.2rem; }
  .seam img { width: 42px; height: 42px; padding: 8px; }
  .marquee { padding-block: 1.35rem; }
}


/* ============================= reduced motion ============================= */

/* prefers-reduced-motion intentionally not honored: client decision (08-20-26),
   matching Rolling Lawns precedent — the full experience ships to every phone. */