/* ============================================================
   site.css — layout for Kivulink (pairs with tokens.css)
   Breakpoints: 1080 (nav collapse) · 900 · 700 · 560
   Component rules (.btn, .cat-card, .flip, .badge, .cat-link)
   live in tokens.css — this file is layout + sections only.
   ============================================================ */

/* ---------- Base / reset ---------- */
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-body); font-size:var(--fs-body); line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
ul,ol { margin:0; padding:0; list-style:none; }
h1,h2,h3,h4 { margin:0; font-weight:400; }
:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }

/* FIX: skip link was unstyled — visually hidden until keyboard focus */
.skip { position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--ink); color:var(--white); padding:12px 20px;
  border-radius:0 0 var(--radius-md) 0; }
.skip:focus { left:0; }

/* Display headings — big & tight */
.h2 { font-family:var(--font-display); font-size:var(--fs-h2);
  letter-spacing:-.02em; line-height:1; }
.h2 em, .hero__title em { font-style:italic; color:var(--accent); }

.eyebrow { display:inline-block; font-size:var(--fs-small); font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--accent);
  margin-bottom:var(--s-3); }
.muted { color:#8a7f72; }
.fineprint { font-size:var(--fs-small); color:#8a7f72; margin-top:var(--s-4);
  max-width:60ch; }

/* ---------- Layout shell ---------- */
.section { padding:var(--section-pad) var(--gutter); max-width:1280px;
  margin-inline:auto; }
.section.bg-alt { background:var(--bg-alt); max-width:none;
  padding-inline:calc((100vw - min(1280px,100vw)) / 2 + var(--gutter)); }
.section__head { max-width:56ch; margin-bottom:var(--s-6); }
.section__head p { margin-top:var(--s-3); color:#5f564c; }

/* ---------- Grids ---------- */
.grid { display:grid; gap:var(--s-3); }
.grid--4 { grid-template-columns:repeat(4,1fr); }
.grid--3 { grid-template-columns:repeat(3,1fr); }
.grid--2 { grid-template-columns:repeat(2,1fr); }

/* ---------- Nav ---------- */
.nav { position:sticky; top:0; z-index:50; display:flex; align-items:center;
  gap:var(--s-4); padding:14px var(--gutter); background:var(--ink);
  color:#fff; }
.nav__brand { display:flex; align-items:center; gap:10px;
  font-family:var(--font-display); font-size:1.5rem; color:#fff; }
.nav__brand img { width:36px; height:36px; border-radius:8px; }
.nav__links { display:flex; align-items:center; gap:var(--s-4); font-weight:500; }
.nav__links a, .nav__item > button { color:#fff; background:none; border:0;
  font:inherit; cursor:pointer; padding:8px 0; }
.nav__item { position:relative; }
.nav__dropdown { position:absolute; top:100%; left:0; min-width:200px;
  background:var(--bg); color:var(--ink); border-radius:14px; padding:8px;
  box-shadow:var(--shadow-lift); opacity:0; visibility:hidden;
  transform:translateY(6px); transition:.2s var(--ease); }
.nav__item:hover .nav__dropdown,
.nav__item:focus-within .nav__dropdown,
.nav__item.is-open .nav__dropdown { opacity:1; visibility:visible;
  transform:none; }
.nav__dropdown a { display:block; padding:10px 12px; border-radius:10px; }
.nav__dropdown a:hover { background:var(--surface); }
.nav__actions { margin-left:auto; display:flex; align-items:center; gap:var(--s-3); }
.nav__phone { font-weight:600; }
.nav__wa { width:36px; height:36px; border-radius:50%; background:#25D366;
  display:inline-flex; align-items:center; justify-content:center; }
.nav__wa svg { width:20px; height:20px; fill:#fff; }
.nav__burger { display:none; margin-left:auto; width:44px; height:44px;
  border:0; border-radius:12px; background:#ffffff1a; cursor:pointer; }
.nav__burger::before { content:"☰"; color:#fff; font-size:20px; }

/* Mobile drawer */
.drawer { position:fixed; inset:64px 0 0; z-index:49; background:var(--ink);
  color:#fff; padding:var(--s-6) var(--gutter); overflow-y:auto; }
.drawer a { display:block; padding:16px 0; font-size:1.25rem;
  border-bottom:1px solid #ffffff1a; }
.drawer .btn { margin-top:var(--s-4); width:100%; }

/* ---------- Hero ---------- */
.hero { position:relative; overflow:hidden; text-align:center;
  padding:clamp(80px,14vw,180px) var(--gutter);
  background:linear-gradient(160deg,var(--accent) 0%,var(--accent-2) 45%,var(--bg) 100%); }
/* FIX: 20ch was on .hero__inner (resolves at body size ≈ 170px, crushing every
   child incl. the 52ch subtitle). The clamp belongs on the title itself. */
.hero__inner { position:relative; z-index:2; max-width:1280px; margin-inline:auto; }
.hero__title { font-family:var(--font-display); font-size:var(--fs-hero);
  letter-spacing:-.02em; line-height:.95; color:var(--ink);
  max-width:20ch; margin-inline:auto; }
.hero__title--md { font-size:clamp(2.5rem,6vw,5rem); }
.hero__sub { max-width:52ch; margin:var(--s-4) auto var(--s-6);
  color:#3a2f27; font-size:1.125rem; }
/* Cinematic subtext — two phrases reveal blur-to-sharp after the title paints.
   The h1 itself never animates (LCP stays instant). */
.hero__cine { margin:18px auto 28px; font-family:var(--font-display);
  font-style:italic; font-size:clamp(1.35rem,2.6vw,1.9rem); color:var(--ink-mid);
  display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.hero__cine span { opacity:0; animation:cine .9s var(--ease-out) both; }
.hero__cine span:nth-child(1) { animation-delay:.25s; }
.hero__cine span:nth-child(2) { animation-delay:1.05s; color:var(--accent); }
@keyframes cine {
  from { opacity:0; transform:translateY(14px); filter:blur(8px); }
  to   { opacity:1; transform:none; filter:blur(0); }
}

/* Tap affordance: pulsing + on every flip-card front (phones can't hover) */
.svc .flip__front::after, .cat-card.flip .flip__front::after {
  content:"+"; position:absolute; right:14px; bottom:14px; z-index:3;
  width:34px; height:34px; border-radius:50%;
  background:var(--accent); color:#fff;
  font-size:22px; font-weight:600; line-height:34px; text-align:center;
  box-shadow:var(--shadow-sm);
  animation:plusPulse 2.4s var(--ease) infinite; }
@keyframes plusPulse { 0%,100% { transform:scale(1); } 50% { transform:scale(1.14); } }
/* FIX: gave the empty shapes hook a restrained treatment (soft radial tints +
   the live site's dot texture) instead of Fluz-style floating objects. */
.hero__shapes { position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(42% 52% at 12% 18%, rgba(255,255,255,.35), transparent 70%),
    radial-gradient(38% 48% at 88% 82%, rgba(201,163,92,.18), transparent 70%),
    radial-gradient(rgba(16,45,77,.06) 1px, transparent 1.3px);
  background-size:auto, auto, 22px 22px; }
/* Remotion loop rides this layer; the tint/dot background above stays visible
   until the video's first frame decodes (its gradient matches the CSS hero). */
.hero__shapes video { width:100%; height:100%; object-fit:cover; display:block; }

.hero--interior { background:none; padding:var(--section-pad) var(--gutter); }
/* Panel takes per-service colors via --f1/--f2 (same pairs as the homepage
   service cards) so each line's page opens in its own identity. */
.hero__panel { max-width:1280px; margin-inline:auto; border-radius:var(--radius-card);
  padding:clamp(48px,8vw,120px); text-align:center;
  background:
    radial-gradient(60% 70% at 85% 8%, rgba(255,255,255,.30), transparent 65%),
    linear-gradient(160deg,var(--f1,var(--accent)) 0%,var(--f2,var(--accent-2)) 55%,var(--bg) 100%); }
.hero__panel .eyebrow { color:var(--ink-mid); } /* readable on any light field */
/* Dark variant (navy / steel / ink lines): fully saturated field, light type */
.hero__panel--dark { color:#fff;
  background:
    radial-gradient(60% 70% at 85% 8%, rgba(255,255,255,.14), transparent 65%),
    linear-gradient(160deg,var(--f1) 0%,var(--f2) 130%); }
.hero__panel--dark .hero__title { color:#fff; }
.hero__panel--dark .hero__sub { color:rgba(255,255,255,.88); }
.hero__panel--dark .eyebrow { color:var(--gold-hi); }
.hero__panel--dark .btn-primary { background:var(--cream-hi); color:var(--ink); }
.hero__panel--dark .btn-primary:hover { background:var(--accent); color:#fff; }
/* Paired CTAs inside a panel: instant self-quote + advisor fallback */
.hero-acts2 { display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
.btn-ghost--ink { background:transparent; color:var(--ink);
  box-shadow:inset 0 0 0 1px rgba(26,39,53,.28); }
.btn-ghost--ink:hover { box-shadow:inset 0 0 0 1px var(--accent); color:var(--accent-deep); transform:translateY(-2px); }

/* Assurance strip under a panel CTA — live-site trust copy, conversion-critical */
.assure { display:flex; flex-wrap:wrap; gap:8px 26px; justify-content:center;
  margin-top:22px; padding:0; }
.assure li { font-size:var(--fs-small); font-weight:600; color:var(--ink-mid); }
.assure li::before { content:"✓"; color:var(--accent); margin-right:7px; }
.hero__panel--dark .assure li { color:rgba(255,255,255,.85); }
.hero__panel--dark .assure li::before { color:var(--gold-hi); }

/* ---------- Service cards (Fluz language: gradient field, floating icon,
   info panel half-overlapping the field; hover/click flips to details) ----------
   Per-card colors come from inline --f1/--f2 custom props.
   Add .svc--light on cards whose field is light (gold/peach) → ink text on back. */
.svc { perspective:1200px; cursor:pointer; }
.svc .flip__inner { min-height:470px; }
.svc__front { background:var(--bg-alt); border:1px solid var(--line);
  border-radius:var(--radius-card); overflow:hidden;
  display:flex; flex-direction:column; justify-content:flex-start;
  transition:box-shadow .3s var(--ease), transform .3s var(--ease); }
.svc:hover .svc__front { box-shadow:var(--shadow-lift); }
.svc__field { position:relative; height:240px; flex:none;
  background:
    radial-gradient(80% 90% at 78% 12%, rgba(255,255,255,.28), transparent 60%),
    linear-gradient(150deg, var(--f1) 0%, var(--f2) 100%); }
.svc__field img { position:absolute; left:50%; top:50%;
  transform:translate(-50%,-52%); width:96px; height:96px;
  filter:drop-shadow(0 10px 18px rgba(7,20,38,.30)); }
.svc__field .badge { top:14px; right:14px; }
.svc__panel { position:relative; z-index:2; margin:-46px 16px 18px;
  background:var(--cream-hi); border:1px solid var(--cream-line);
  border-radius:var(--radius-md); padding:18px 18px 16px;
  box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:8px; }
.svc__panel h3 { font-family:var(--font-display); font-size:1.375rem;
  letter-spacing:-.01em; }
.svc__panel p { color:var(--ink-soft); font-size:.95rem; margin:0; }
.svc__panel .cat-link { font-size:.95rem; }
.svc:hover .cat-link .arrow { opacity:1; transform:translateX(0); }
.svc__hint { position:absolute; left:16px; bottom:12px; z-index:2;
  font-size:.6875rem; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(255,255,255,.85); }
.svc--light .svc__hint { color:rgba(26,39,53,.65); }

.svc__back { background:
    radial-gradient(90% 80% at 20% 0%, rgba(255,255,255,.16), transparent 55%),
    linear-gradient(165deg, var(--f1) 0%, var(--f2) 130%);
  border-radius:var(--radius-card); color:#fff;
  padding:26px; justify-content:flex-start; gap:12px; }
.svc--light .svc__back { color:var(--ink); }
.svc__back h3 { font-family:var(--font-display); font-size:1.5rem; }
/* Coverage bullets ride on cream rows — the same panel-over-gradient language
   as the card front, and ink-on-cream contrast on every field color. */
.svc__back ul { display:flex; flex-direction:column; gap:8px; margin:4px 0 auto;
  font-size:.95rem; line-height:1.4; }
.svc__back li { background:var(--cream-hi); color:var(--ink);
  border-radius:var(--radius-md); padding:10px 14px 10px 34px;
  position:relative; box-shadow:var(--shadow-sm); }
.svc__back li::before { content:"✓"; position:absolute; left:14px;
  color:var(--accent); font-weight:700; }
.svc__back .btn { align-self:flex-start; background:var(--cream-hi);
  color:var(--ink); padding:13px 24px; }
.svc__back .btn:hover { background:#fff; transform:translateY(-2px); }
.svc--light .svc__back .btn { background:var(--ink); color:#fff; }
.svc--light .svc__back .btn:hover { background:var(--accent); }

/* Interior coverage flips: section carries the page's --f1/--f2; backs flip
   from cream to the service gradient with the copy on a cream row. */
.flip-color .cat-card .flip__back { border-radius:var(--radius-card);
  padding:18px; justify-content:center;
  background:
    radial-gradient(80% 90% at 80% 8%, rgba(255,255,255,.20), transparent 60%),
    linear-gradient(160deg, var(--f1) 0%, var(--f2) 130%); }
.flip-color .cat-card .flip__back p { background:var(--cream-hi); color:var(--ink);
  border-radius:var(--radius-md); padding:14px 16px; margin:0;
  box-shadow:var(--shadow-sm); font-size:.95rem; line-height:1.5; }
.svc__back .fineprint { margin:6px 0 0; color:inherit; opacity:.7; }

/* ---------- Client resource cards (single-face, small Fluz field) ---------- */
.res-card { display:flex; flex-direction:column; background:var(--bg-alt);
  border:1px solid var(--line); border-radius:var(--radius-card); overflow:hidden;
  color:var(--ink); transition:transform .3s var(--ease), box-shadow .3s var(--ease); }
.res-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-lift); }
.res-card__field { height:110px; flex:none; position:relative;
  background:
    radial-gradient(80% 100% at 80% 0%, rgba(255,255,255,.25), transparent 60%),
    linear-gradient(150deg, var(--f1) 0%, var(--f2) 100%); }
.res-card__field img { position:absolute; left:18px; bottom:-24px; width:56px;
  height:56px; filter:drop-shadow(0 8px 14px rgba(7,20,38,.28)); }
.res-card__body { padding:34px 18px 18px; display:flex; flex-direction:column;
  gap:8px; flex:1; }
.res-card__body h3 { font-family:var(--font-display); font-size:1.25rem; }
.res-card__body p { color:var(--ink-soft); font-size:.95rem; margin:0 0 auto; }
.res-card__body .cat-link { font-size:.95rem; margin-top:10px; }
.res-card:hover .cat-link .arrow { opacity:1; transform:translateX(0); }

/* ---------- Credentials bar (ported from production, recolored to theme) ---------- */
.cred-bar { background:var(--accent-tint); border-block:1px solid var(--cream-line);
  padding:14px var(--gutter); }
.cred-bar__in { max-width:1280px; margin-inline:auto; display:flex;
  flex-wrap:wrap; gap:10px 28px; justify-content:center; }
.cred-item { display:inline-flex; align-items:center; gap:8px;
  font-size:var(--fs-small); font-weight:600; color:var(--ink-mid); }
.cred-item svg { width:14px; height:14px; stroke:var(--accent); flex:none; }

/* ---------- Footer (production content, new type system, theme background) ---------- */
.ft { background:var(--ink); color:#EDE9E0; }
.ft a { color:inherit; }
.ft a:hover { color:var(--gold-hi); }
.ft-main { max-width:1280px; margin-inline:auto;
  padding:var(--s-8) var(--gutter); display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1fr; gap:var(--s-6); }
.ft-brand img { width:52px; height:52px; border-radius:12px; }
.ft-tag { font-family:var(--font-display); font-style:italic; font-size:1.125rem;
  margin-top:10px; color:var(--gold-hi); }
.ft-desc { color:#B9C0C9; font-size:.95rem; max-width:34ch; margin:10px 0 18px; }
.ft-c { display:flex; align-items:flex-start; gap:10px; padding:5px 0;
  font-size:.95rem; color:#D7DBE1; }
.ft-c svg { width:16px; height:16px; margin-top:3px; stroke:var(--gold);
  fill:none; flex:none; }
.ft-col h5 { font-family:var(--font-display); font-weight:400; font-size:1.25rem;
  margin:0 0 14px; color:#fff; }
.ft-col a { display:block; padding:5px 0; font-size:.95rem; color:#B9C0C9; }
.ft-bar { border-top:1px solid rgba(255,255,255,.12);
  padding:16px var(--gutter); }
.ft-bar__in { max-width:1280px; margin-inline:auto; font-size:var(--fs-small);
  color:#8E97A3; }
.ft-legal { max-width:1280px; margin-inline:auto;
  padding:0 var(--gutter) var(--s-6); font-size:.75rem; line-height:1.6;
  color:#7A8391; }
.ft .footer__wordmark { color:rgba(255,255,255,.06); margin-top:0; }

/* ---------- Carrier logo rails (homepage) ----------
   Two counter-scrolling rails of logo pills on the ink band. site.js
   duplicates each track once for a seamless -50% loop; hover pauses;
   reduced motion gets a static, manually scrollable rail. */
.lr { background:var(--ink); color:#fff; padding-block:clamp(44px,6vw,72px);
  overflow:hidden; }
.lr-head { max-width:1280px; margin:0 auto var(--s-4); padding-inline:var(--gutter);
  display:flex; flex-wrap:wrap; align-items:baseline; gap:10px 28px; }
.lr-label { font-size:var(--fs-small); font-weight:600; letter-spacing:.14em;
  color:var(--gold-hi); }
.lr-sub { margin:0; color:#B9C0C9; font-size:.95rem; }
.lr-rail { overflow:hidden; margin-top:14px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); }
.lr-track { display:flex; gap:14px; width:max-content; padding-inline:7px;
  animation:lr-left 48s linear infinite; }
.lr-track--rev { animation:lr-right 42s linear infinite; }
@keyframes lr-left { to { transform:translateX(-50%); } }
@keyframes lr-right { from { transform:translateX(-50%); } to { transform:none; } }
.lr-rail:hover .lr-track { animation-play-state:paused; }
.lr-card { flex:none; height:64px; display:flex; align-items:center;
  padding-inline:24px; background:var(--cream-hi);
  border:1px solid rgba(255,255,255,.08); border-radius:var(--radius-md); }
.lr-card img { height:30px; width:auto; max-width:150px; object-fit:contain; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
@media (max-width:700px){
  .lr-card { height:54px; padding-inline:18px; }
  .lr-card img { height:24px; max-width:120px; }
}

/* ---------- Carrier marquee ---------- */
.marquee { background:var(--ink); color:#fff; padding:20px var(--gutter);
  display:flex; align-items:center; gap:var(--s-4); flex-wrap:wrap; }
/* FIX: source had a mojibake duplicate (`#c9bдав`) — single clean value */
.marquee__label { font-size:var(--fs-small); font-weight:600; letter-spacing:.12em;
  color:#c9bfae; }
.marquee__list { display:flex; gap:var(--s-4); flex-wrap:wrap; font-weight:600; }

/* ---------- Stats ---------- */
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:0; text-align:center;
  padding-block:clamp(36px,5vw,60px); /* a band, not a cavern */ }
.stat { padding:var(--s-4); border-left:1px solid var(--line); }
.stat:first-child { border-left:0; }
.stat__num { display:block; font-family:var(--font-display);
  font-size:var(--fs-stat); line-height:1; letter-spacing:-.02em; }
.stat__cap { display:block; margin-top:var(--s-2); color:#5f564c;
  font-size:var(--fs-small); }

/* ---------- Comparison cards ---------- */
.compare-card { background:var(--bg-alt); border:1px solid var(--line);
  border-radius:var(--radius-card); padding:var(--s-4); display:flex;
  flex-direction:column; gap:var(--s-3); }
.compare-card h3 { font-family:var(--font-display); font-size:1.5rem; }
.compare-card .tag, .tag { font-family:var(--font-body); font-size:.625rem;
  font-weight:700; letter-spacing:.08em; background:var(--surface);
  padding:3px 8px; border-radius:var(--radius-pill); vertical-align:middle; }
.compare-card__meta { color:#5f564c; font-size:var(--fs-small); }
.compare-card__range { display:flex; gap:var(--s-4); }
.price { font-family:var(--font-display); font-size:2rem; color:var(--accent); }
.price small { font-size:.875rem; color:#8a7f72; }
.price.muted { color:#8a7f72; }
.lbl { display:block; font-size:.6875rem; letter-spacing:.08em;
  text-transform:uppercase; color:#8a7f72; }
.compare-card__note { font-size:var(--fs-small); color:#8a7f72; }
.compare-card__delta { font-family:var(--font-display); font-size:1.25rem; }

/* ---------- Steps ---------- */
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-6); }
.steps--compact { grid-template-columns:1fr; gap:var(--s-4); }
.steps li { border-top:2px solid var(--line); padding-top:var(--s-3); }
.steps__num { font-family:var(--font-display); font-size:2rem; color:var(--accent); }
.steps h3 { font-size:1.25rem; margin:var(--s-2) 0; }
.steps p { color:#5f564c; }

/* ---------- Coverage-watch scroller ---------- */
.scroller { display:flex; gap:var(--s-3); overflow-x:auto;
  scroll-snap-type:x mandatory; padding-bottom:var(--s-3);
  scrollbar-width:none; align-items:flex-start; /* short cards don't stretch to the tallest */ }
.scroller::-webkit-scrollbar { display:none; }
.date-card { flex:0 0 300px; scroll-snap-align:start; background:var(--surface);
  border-radius:var(--radius-card); padding:var(--s-4); display:flex;
  flex-direction:column; gap:var(--s-2); position:relative; }
.date-card .badge { position:static; align-self:flex-start; }
.date-card--accent { background:var(--accent-2); }
.date-card h3 { font-size:1.25rem; }

/* ---------- Coverage-watch splits (Fluz-style rounded media panels) ---------- */
.watch-panel { border-radius:var(--radius-card); padding:clamp(26px,4vw,44px);
  min-height:380px; display:flex; flex-direction:column; gap:14px;
  justify-content:center; color:#fff;
  background:
    radial-gradient(70% 80% at 85% 8%, rgba(255,255,255,.16), transparent 60%),
    linear-gradient(160deg, var(--f1) 0%, var(--f2) 120%); }
.watch-row { display:flex; justify-content:space-between; align-items:center;
  gap:16px; background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12); border-radius:var(--radius-md);
  padding:16px 20px; }
.watch-row b { font-family:var(--font-display); font-weight:400; font-size:1.15rem; }
.watch-when { font-size:.9rem; color:var(--gold-hi); white-space:nowrap; }
.pill-badge { align-self:flex-start; display:inline-block; background:var(--accent);
  color:#fff; font-size:.6875rem; font-weight:700; letter-spacing:.08em;
  padding:4px 10px; border-radius:var(--radius-pill); }
.watch-panel--warm { color:var(--ink); align-items:flex-start;
  background:
    radial-gradient(70% 80% at 85% 8%, rgba(255,255,255,.30), transparent 60%),
    linear-gradient(160deg, var(--f1) 0%, var(--f2) 120%); }
.wp-year { font-family:var(--font-display); font-size:clamp(4rem,9vw,7.5rem);
  line-height:.9; letter-spacing:-.02em; }
.wp-note { max-width:30ch; font-size:1.05rem; color:rgba(26,39,53,.8); margin:0; }

/* ---------- Reviews ---------- */
.review { margin:0; background:var(--bg-alt); border:1px solid var(--line);
  border-radius:var(--radius-card); padding:var(--s-4); }
.review > p { font-family:var(--font-display); font-style:italic;
  font-size:1.375rem; line-height:1.3; margin:var(--s-2) 0; }
.review .stars { color:var(--accent); font-style:normal; font-size:1rem; }
.review footer { display:flex; flex-direction:column; }
.review footer span { color:#8a7f72; font-size:var(--fs-small); }
.rating { color:var(--accent); font-weight:600; }
.rev-more { margin-top:var(--s-6); font-size:var(--fs-small); }
.rev-more a { color:var(--accent); font-weight:600; }

/* ---------- Founder split ---------- */
.split { display:grid; grid-template-columns:1fr 1fr; gap:var(--s-8);
  align-items:center; max-width:1280px; margin-inline:auto; }
.split--reverse .split__media { order:2; }
.split__media img { border-radius:var(--radius-card); }
.pills { display:flex; flex-wrap:wrap; gap:var(--s-1); margin:var(--s-3) 0 var(--s-6); }
.pills li { background:var(--surface); border-radius:var(--radius-pill);
  padding:8px 16px; font-size:var(--fs-small); font-weight:600; }

/* ---------- FAQ ---------- */
.faq details { border-top:1px solid var(--line); padding:var(--s-3) 0; }
.faq summary { cursor:pointer; font-family:var(--font-display); font-size:1.25rem;
  list-style:none; display:flex; justify-content:space-between; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; color:var(--accent); }
.faq details[open] summary::after { content:"–"; }
.faq p { margin:var(--s-2) 0 0; color:#5f564c; }

/* ---------- CTA band ---------- */
.cta-band { text-align:center; background:var(--ink); color:#fff;
  border-radius:var(--radius-card); display:flex; flex-direction:column;
  align-items:center; gap:var(--s-3); }
.cta-band .h2 { color:#fff; margin-bottom:var(--s-3); }
.cta-band .btn-primary { background:var(--cream-hi); color:var(--ink); }
.cta-band .btn-primary:hover { background:var(--accent); color:#fff; }
.btn-ghost { border:1px solid #ffffff40; color:#fff; }
/* Small secondary link under a flip-card back's primary CTA */
.svc__more { font-size:.85rem; opacity:.85; text-decoration:underline;
  text-underline-offset:3px; align-self:flex-start; margin-top:8px; }

/* ---------- Footer ---------- */
.footer { background:var(--surface); padding:var(--section-pad) var(--gutter) 0; }
.footer__cols { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s-6);
  max-width:1280px; margin-inline:auto; }
.footer h4 { font-family:var(--font-display); font-size:1.25rem; margin-bottom:var(--s-3); }
.footer li { padding:6px 0; }
.footer li a:hover { color:var(--accent); }
.footer__legal { max-width:1280px; margin:var(--s-8) auto 0; color:#8a7f72;
  font-size:var(--fs-small); }
.footer__wordmark { font-family:var(--font-display); font-weight:400;
  font-size:clamp(5rem,22vw,20rem); line-height:.8; color:var(--ink);
  text-align:center; margin-top:var(--s-6);
  overflow:hidden; }

/* ---------- Sticky mobile CTA ---------- */
.mobile-cta { display:none; position:fixed; left:16px; right:16px; bottom:16px;
  z-index:40; justify-content:center; box-shadow:var(--shadow-lift); }

/* ============================================================
   SCROLL REVEALS — states applied only when site.js adds .rv-on,
   so content is fully visible with JS off or reduced motion on.
   Stagger delay --rv-d is set per-element by site.js (60ms steps, cap 6).
   ============================================================ */
html.rv-on [data-rv] { opacity:0; transform:translateY(14px);
  transition:opacity .45s var(--ease-out), transform .45s var(--ease-out);
  transition-delay:var(--rv-d, 0ms); }
html.rv-on [data-rv].rv-in { opacity:1; transform:none; }
/* Signature moment: the founder portrait settles from 1.03 scale as it enters */
html.rv-on .sig-founder[data-rv] { transform:scale(1.03); transform-origin:center;
  transition:opacity .6s var(--ease-out), transform .6s var(--ease-out); }
html.rv-on .sig-founder[data-rv].rv-in { transform:scale(1); }

/* ============================================================
   PRESERVED FUNCTIONAL MARKUP — new-design skins
   These classes/ids come verbatim from the original pages and are
   targeted by scripts.js / the i18n appliers. Restyle only — never
   rename them: fg, qcard, form-shell, qdone, choice-grid, kvCalc,
   fq, lang-pill, watch-card, blog-body …
   ============================================================ */

/* ---- Buttons the old forms use ---- */
.btn-gold { background:var(--gold-grad); color:var(--ink); }
.btn-gold:hover { filter:brightness(1.05); transform:translateY(-2px); }
.btn-navy { background:var(--ink); color:#fff; }
.btn-navy:hover { background:var(--accent); transform:translateY(-2px); }

/* ---- Cards & forms ---- */
.qcard { background:var(--cream-hi); border:1px solid var(--cream-line);
  border-radius:var(--radius-card); padding:clamp(22px,4vw,40px);
  box-shadow:var(--shadow-sm); max-width:720px; margin-inline:auto; }
.qcard h2 { font-family:var(--font-display); font-size:1.75rem;
  letter-spacing:-.01em; margin-bottom:4px; }
.qsub { color:var(--ink-soft); margin:0 0 18px; }
.fg { margin-bottom:16px; display:flex; flex-direction:column; gap:6px; }
.fg-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.fg-row > div { display:flex; flex-direction:column; gap:6px; }
.fg label { font-size:var(--fs-small); font-weight:600; color:var(--ink-mid); }
.fg input, .fg select, .qgroup input, .qgroup select {
  font:inherit; color:var(--ink); background:#fff;
  border:1px solid var(--line); border-radius:var(--radius-md);
  padding:13px 14px; width:100%; }
.fg input:focus, .fg select:focus, .qgroup input:focus, .qgroup select:focus {
  outline:3px solid var(--accent); outline-offset:1px; border-color:var(--accent); }
.qgroup { background:var(--accent-tint); border-radius:var(--radius-md);
  padding:16px; margin:14px 0; display:flex; flex-direction:column; gap:10px; }
.qg-t { font-weight:600; font-size:var(--fs-small); letter-spacing:.06em;
  text-transform:uppercase; color:var(--accent-deep); margin:0; }
.qg-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px; }
.privacy { display:flex; align-items:center; gap:8px; font-size:var(--fs-small);
  color:var(--ink-soft); margin:14px 0; }
.privacy svg { width:15px; height:15px; stroke:var(--accent); flex:none; }
.qsubmit { width:100%; justify-content:center; margin-top:4px; }
.qalt { font-size:var(--fs-small); color:var(--ink-soft); margin-top:14px;
  text-align:center; }
.qalt a { font-weight:600; color:var(--accent); }

/* Sent-state swap (scripts.js adds .sent to .form-shell) */
.form-shell .qdone { display:none; }
.form-shell.sent form { display:none; }
.form-shell.sent .qdone { display:block; text-align:center; padding:26px 8px; }
.qdone .ok { width:56px; height:56px; border-radius:50%; background:var(--accent-tint);
  margin:0 auto 14px; display:flex; align-items:center; justify-content:center; }
.qdone .ok svg { width:26px; height:26px; stroke:var(--accent-deep); }
.qdone h3 { font-family:var(--font-display); font-size:1.5rem; margin-bottom:8px; }
.qdone p { color:var(--ink-soft); }

/* ---- Quote chooser grid ---- */
.choice-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-2);
  max-width:900px; margin-inline:auto; }
.choice { display:flex; flex-direction:column; align-items:flex-start; gap:8px;
  background:var(--bg-alt); border:1px solid var(--line);
  border-radius:var(--radius-md); padding:18px; font:inherit; color:var(--ink);
  cursor:pointer; text-align:left; text-decoration:none;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease); }
.choice:hover { transform:translateY(-4px); box-shadow:var(--shadow-lift); }
.choice b { font-family:var(--font-display); font-weight:400; font-size:1.125rem; }
.choice img { width:40px; height:40px; }
.ch-tag { font-size:.6875rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-soft); }
.choice.inst { background:var(--accent-tint); border-color:transparent; }
.choice.inst .ch-tag { color:var(--accent-deep); }

/* ---- Calculator result ---- */
#c-out { margin-top:18px; background:var(--accent-tint);
  border-radius:var(--radius-md); padding:18px; line-height:1.6; }
#c-out b { font-family:var(--font-display); font-size:1.25rem; }

/* ---- Language banner & pills (FAQ + blog post) ---- */
.lang-banner { display:flex; flex-wrap:wrap; align-items:center; gap:14px 26px;
  background:var(--accent-tint); border-radius:var(--radius-card);
  padding:22px 26px; }
.lb-txt { display:flex; flex-direction:column; gap:2px; }
.lb-txt b { font-family:var(--font-display); font-size:1.25rem; }
.lb-txt span { color:var(--ink-mid); font-size:.95rem; }
.lang-pills { display:flex; flex-wrap:wrap; gap:8px; }
.lang-pill { font:inherit; font-size:var(--fs-small); font-weight:600;
  background:var(--cream-hi); color:var(--ink); border:1px solid var(--cream-line);
  border-radius:var(--radius-pill); padding:8px 16px; cursor:pointer;
  transition:background .2s var(--ease), color .2s var(--ease); }
.lang-pill:hover { border-color:var(--accent); }
.lang-pill.on { background:var(--ink); color:#fff; border-color:var(--ink); }
.lang-pills.sm .lang-pill { padding:6px 12px; font-size:.75rem; }

/* ---- FAQ accordion (static + i18n-rendered; JS toggles .open + maxHeight) ---- */
.fq-list { max-width:820px; margin-inline:auto; }
.fq { border-top:1px solid var(--line); }
.fq:last-child { border-bottom:1px solid var(--line); }
.fq-q { width:100%; display:flex; justify-content:space-between; align-items:center;
  gap:16px; font:inherit; font-family:var(--font-display); font-size:1.25rem;
  text-align:left; color:var(--ink); background:none; border:0; cursor:pointer;
  padding:18px 4px; }
.fq-q .pm { color:var(--accent); font-size:1.4rem; flex:none;
  transition:transform .25s var(--ease); }
.fq.open .fq-q .pm { transform:rotate(45deg); }
.fq-a { max-height:0; overflow:hidden; transition:max-height .3s var(--ease); }
/* Fallback: an .open item is always visible even if the inline max-height
   from JS is ever missing (script-order regressions stay non-fatal). */
.fq.open .fq-a { max-height:75vh; }
.fq-a p { color:var(--ink-mid); padding:0 4px 18px; margin:0; max-width:65ch; }
.review-note, .i18n-disclaimer { font-size:var(--fs-small); color:var(--ink-soft);
  max-width:60ch; }

/* ---- Watch cards (i18n-rendered) ---- */
.watch-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--s-2);
  margin-block:var(--s-3); }
.watch-card { background:var(--bg-alt); border:1px solid var(--line);
  border-radius:var(--radius-md); padding:18px; }
.watch-card b { font-family:var(--font-display); font-size:1.125rem;
  display:block; margin-bottom:6px; }
.watch-card p { color:var(--ink-mid); font-size:.95rem; margin:0; }

/* ---- Blog ---- */
.wrap-narrow { max-width:72ch; margin-inline:auto; }
.blog-body h2 { font-family:var(--font-display); font-size:1.75rem;
  letter-spacing:-.01em; margin:1.8em 0 .5em; }
.blog-body p { color:var(--ink-mid); line-height:1.75; margin:0 0 1.1em; }
.blog-body a { color:var(--accent); font-weight:600; }
.keypoints { background:var(--cream-hi); border:1px solid var(--cream-line);
  border-radius:var(--radius-card); padding:22px; margin-bottom:var(--s-6); }
.kp-head { display:flex; flex-wrap:wrap; justify-content:space-between;
  align-items:center; gap:12px; margin-bottom:12px; }
.kp-head b { font-family:var(--font-display); font-size:1.25rem; }
.crumb { font-size:var(--fs-small); color:var(--ink-soft); margin-bottom:10px; }
.crumb a { color:inherit; font-weight:600; }
.post-card { display:block; background:var(--bg-alt); border:1px solid var(--line);
  border-radius:var(--radius-card); padding:clamp(22px,4vw,40px); max-width:820px;
  margin-inline:auto; color:var(--ink);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease); }
.post-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lift); }
.post-card h2 { font-family:var(--font-display); font-size:1.75rem;
  letter-spacing:-.01em; margin:8px 0 10px; }
.post-card p { color:var(--ink-mid); }
.post-meta { font-size:var(--fs-small); color:var(--ink-soft); margin:10px 0 14px; }

/* ---- Founder figure (about) ---- */
.founder-meta { margin-top:14px; }
.founder-meta b { font-family:var(--font-display); font-size:1.375rem; display:block; }
.founder-meta span { color:var(--ink-soft); font-size:.95rem; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .nav__links, .nav__actions { display:none; }
  .nav__burger { display:block; }
}
@media (max-width:900px){
  .grid--4 { grid-template-columns:repeat(2,1fr); }
  .grid--3 { grid-template-columns:repeat(2,1fr); }
  .steps { grid-template-columns:1fr; gap:var(--s-4); }
  .split { grid-template-columns:1fr; gap:var(--s-6); }
  .split--reverse .split__media { order:0; }
  .footer__cols { grid-template-columns:repeat(2,1fr); }
  .ft-main { grid-template-columns:1fr 1fr; }
}
@media (max-width:700px){
  .grid--3, .grid--2 { grid-template-columns:1fr; }
  .choice-grid { grid-template-columns:1fr 1fr; }
  .watch-grid { grid-template-columns:1fr; }
  .fg-row { grid-template-columns:1fr; }
  .lang-banner { flex-direction:column; align-items:flex-start; }
  .compare-card__range { justify-content:space-between; }
  .mobile-cta { display:flex; }
  body { padding-bottom:84px; } /* room for sticky CTA */
  /* flip: show hook on front instead of relying on interaction */
  .flip__inner { min-height:auto; }
}
@media (max-width:560px){
  .grid--4 { grid-template-columns:1fr; }
  .choice-grid { grid-template-columns:1fr; }
  .ft-main { grid-template-columns:1fr; }
  .stats { grid-template-columns:1fr 1fr; }
  .stat { border-left:0; border-top:1px solid var(--line); }
  .stat:first-child, .stat:nth-child(2) { border-top:0; }
  .hero__title { font-size:clamp(2.25rem,11vw,3rem); }
  .btn { width:100%; justify-content:center; min-height:52px; }
  .nav__actions .btn { width:auto; }
}

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion:reduce){
  * { scroll-behavior:auto !important; }
  .hero__shapes { display:none; }
  /* Reveals: belt-and-braces — the JS engine already refuses to start under
     reduced motion, so .rv-on never exists; these guarantee visibility even
     if a cached .rv-on state ever leaks through. */
  [data-rv] { opacity:1 !important; transform:none !important; transition:none !important; }
  /* Logo rails: no auto-scroll; rail becomes manually scrollable */
  .lr-track { animation:none !important; }
  .lr-rail { overflow-x:auto; }
  /* Cinematic subtext + tap badges: static, fully visible */
  .hero__cine span { animation:none; opacity:1; }
  .flip__front::after { animation:none !important; }
}