/* ============================================================================
   CORE DESIGN SYSTEM  ·  v1.0
   Shared foundation for all six properties.
   Each site overrides ONLY the brand token block in its own css/brand.css.
   Nothing here is site-specific. Do not fork this file.
   ========================================================================== */

/* ---------- 1. RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
img,picture,video,canvas,svg{display:block;max-width:100%}
input,button,textarea,select{font:inherit;color:inherit}
p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}
ul[role="list"],ol[role="list"]{list-style:none;padding:0}
button{background:none;border:0;cursor:pointer}
a{color:inherit}
:where(svg){fill:currentColor}

/* ---------- 2. TOKENS ----------
   Brand files override --brand-* and the font stacks. Everything else derives.
------------------------------------------------------------------------- */
:root{
  /* Fallback palette — every brand file MUST override these */
  --ink:#12100e;            /* primary text / darkest ground */
  --ink-2:#2a2724;          /* secondary surface */
  --paper:#faf8f5;          /* page ground */
  --paper-2:#f2eee8;        /* raised surface */
  --line:#e0d9cf;           /* hairlines */
  --accent:#a8823c;         /* the one heritage accent */
  --accent-soft:#c9a45f;
  --muted:#6f675e;

  /* Semantic — derived, rarely overridden */
  --bg:var(--paper);
  --fg:var(--ink);
  --fg-muted:var(--muted);
  --surface:var(--paper-2);
  --hairline:var(--line);

  /* Type stacks — brand files override */
  --font-display:"Cormorant Garamond",ui-serif,Georgia,"Times New Roman",serif;
  --font-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-mono:ui-monospace,"SF Mono",Menlo,monospace;

  /* Fluid type scale — 320px → 1440px viewport */
  --step--2:clamp(0.69rem,0.67rem + 0.11vw,0.75rem);
  --step--1:clamp(0.83rem,0.79rem + 0.19vw,0.94rem);
  --step-0 :clamp(1.00rem,0.94rem + 0.30vw,1.19rem);
  --step-1 :clamp(1.20rem,1.11rem + 0.46vw,1.48rem);
  --step-2 :clamp(1.44rem,1.30rem + 0.68vw,1.86rem);
  --step-3 :clamp(1.73rem,1.53rem + 0.98vw,2.33rem);
  --step-4 :clamp(2.07rem,1.79rem + 1.40vw,2.91rem);
  --step-5 :clamp(2.49rem,2.09rem + 1.98vw,3.64rem);
  --step-6 :clamp(2.99rem,2.44rem + 2.75vw,4.54rem);
  --step-7 :clamp(3.58rem,2.83rem + 3.77vw,5.68rem);
  --step-8 :clamp(4.30rem,3.26rem + 5.19vw,7.10rem);

  /* Spacing — 4px base, geometric */
  --s-3xs:0.25rem; --s-2xs:0.5rem; --s-xs:0.75rem; --s-sm:1rem;
  --s-md:1.5rem;   --s-lg:2rem;    --s-xl:3rem;    --s-2xl:4.5rem;
  --s-3xl:6.5rem;  --s-4xl:9rem;   --s-5xl:12rem;

  /* Section rhythm — fluid so mobile isn't cavernous */
  --section-y:clamp(4rem,2.5rem + 7.5vw,9rem);
  --section-y-tight:clamp(2.5rem,1.6rem + 4.5vw,5.5rem);

  /* Measure */
  --measure:66ch;
  --measure-tight:52ch;
  --gutter:clamp(1.25rem,0.9rem + 1.8vw,2.5rem);
  --wrap:1240px;
  --wrap-narrow:920px;
  --wrap-wide:1560px;

  /* Radius — restrained. Luxury is square-ish. */
  --r-xs:3px; --r-sm:6px; --r-md:10px; --r-lg:16px; --r-xl:26px; --r-full:999px;

  /* Elevation — soft, never chunky */
  --shadow-1:0 1px 2px rgba(18,16,14,.04),0 2px 8px rgba(18,16,14,.04);
  --shadow-2:0 2px 4px rgba(18,16,14,.04),0 8px 24px rgba(18,16,14,.07);
  --shadow-3:0 4px 8px rgba(18,16,14,.05),0 20px 48px rgba(18,16,14,.10);
  --shadow-4:0 8px 16px rgba(18,16,14,.06),0 40px 80px rgba(18,16,14,.14);

  /* Motion */
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --t-fast:180ms; --t-mid:340ms; --t-slow:620ms; --t-vslow:1100ms;

  --header-h:76px;
}

@media (max-width:800px){:root{--header-h:64px}}

/* ---------- 3. BASE ---------- */
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 1.5rem)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  font-family:var(--font-body);
  font-size:var(--step-0);
  line-height:1.65;
  color:var(--fg);
  background:var(--bg);
  overflow-x:hidden;
  font-feature-settings:"kern" 1,"liga" 1;
}

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:400;
  line-height:1.06;
  letter-spacing:-0.018em;
  text-wrap:balance;
}
h1{font-size:var(--step-7)}
h2{font-size:var(--step-5)}
h3{font-size:var(--step-3)}
h4{font-size:var(--step-2)}
p{text-wrap:pretty}
p+p{margin-top:1em}

/* ---------- 4. TYPE UTILITIES ---------- */
.display    {font-family:var(--font-display);line-height:1.02;letter-spacing:-.022em;text-wrap:balance}
.display-xl {font-size:var(--step-8)}
.display-lg {font-size:var(--step-7)}
.display-md {font-size:var(--step-6)}
.display-sm {font-size:var(--step-5)}

/* The eyebrow — small caps, wide track. Carries most of the "elegant" signal. */
.eyebrow{
  font-family:var(--font-body);
  font-size:var(--step--1);
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--accent);
  display:flex;align-items:center;gap:.75em;
  flex-wrap:wrap;
  margin-bottom:var(--s-md);
}
.eyebrow::before{
  content:"";width:clamp(20px,4vw,44px);height:1px;
  background:currentColor;opacity:.55;flex:none;
}
.eyebrow--center{justify-content:center}
.eyebrow--center::after{
  content:"";width:clamp(20px,4vw,44px);height:1px;
  background:currentColor;opacity:.55;flex:none;
}
.eyebrow--plain::before{display:none}

.lede{font-size:var(--step-1);line-height:1.55;color:var(--fg-muted);max-width:var(--measure)}
.small{font-size:var(--step--1)}
.xsmall{font-size:var(--step--2)}
.muted{color:var(--fg-muted)}
.accent{color:var(--accent)}
.caps{text-transform:uppercase;letter-spacing:.14em;font-size:var(--step--1);font-weight:500}
.tnum{font-variant-numeric:tabular-nums}
.measure{max-width:var(--measure)}
.measure-tight{max-width:var(--measure-tight)}
.center{text-align:center}
.center .lede,.center .measure{margin-inline:auto}

/* Italic serif accent — used for the emotional word in a headline */
.script{font-style:italic;color:var(--accent)}

/* ---------- 5. LAYOUT ---------- */
/* Padding-based gutters, not width math. The `min(100% - (var(--gutter)*2), …)`
   form parses as invalid in Chromium when --gutter is itself a clamp(), which
   silently drops the declaration and makes every wrapper full-bleed. */
.wrap,.wrap-narrow,.wrap-wide{
  width:100%;margin-inline:auto;
  padding-inline:var(--gutter);
}
.wrap{max-width:calc(var(--wrap) + var(--gutter) * 2)}
.wrap-narrow{max-width:calc(var(--wrap-narrow) + var(--gutter) * 2)}
.wrap-wide{max-width:calc(var(--wrap-wide) + var(--gutter) * 2)}
/* overflow-x:clip (not hidden) — clips stray horizontal overflow without
   creating a scroll container, so position:sticky descendants still work. */
main{overflow-x:clip}
.section{padding-block:var(--section-y);position:relative}
.section--tight{padding-block:var(--section-y-tight)}
.section--flush-top{padding-top:0}
.section--flush-bottom{padding-bottom:0}

.stack>*+*{margin-top:var(--flow,var(--s-md))}

/* Grid and flex children default to min-width:auto, so an item whose
   min-content is wider than the column blows the track out instead of
   shrinking. This one line prevents most "why is my page scrolling
   sideways" bugs. Low specificity so brand layers can still opt out. */
:where(.grid,.split,.stats,.cluster,.between)>*{min-width:0}

.grid{display:grid;gap:var(--s-lg)}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr))}
.cluster{display:flex;flex-wrap:wrap;gap:var(--s-sm);align-items:center}
.cluster--center{justify-content:center}
.between{display:flex;flex-wrap:wrap;gap:var(--s-md);align-items:center;justify-content:space-between}

/* Asymmetric editorial split — the luxury layout workhorse */
.split{display:grid;gap:clamp(2rem,5vw,5rem);align-items:center}
@media (min-width:900px){
  .split{grid-template-columns:1.05fr 1fr}
  .split--reverse>*:first-child{order:2}
  .split--wide-left{grid-template-columns:1.35fr 1fr}
  .split--wide-right{grid-template-columns:1fr 1.35fr}
}

/* ---------- 6. SURFACES & RULES ---------- */
.on-dark{--bg:var(--ink);--fg:var(--paper);--fg-muted:color-mix(in srgb,var(--paper) 62%,transparent);--surface:var(--ink-2);--hairline:color-mix(in srgb,var(--paper) 14%,transparent);background:var(--bg);color:var(--fg)}
.on-surface{background:var(--surface)}
.rule{height:1px;background:var(--hairline);border:0;margin-block:var(--s-xl)}
.rule--short{width:64px;height:1px;background:var(--accent);border:0;margin-block:var(--s-md)}

/* Hairline grid used behind hero sections — quiet luxury texture */
.texture-grid{position:relative;isolation:isolate}
.texture-grid::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(var(--hairline) 1px,transparent 1px),
                   linear-gradient(90deg,var(--hairline) 1px,transparent 1px);
  background-size:clamp(48px,7vw,96px) clamp(48px,7vw,96px);
  opacity:.5;
  mask-image:radial-gradient(ellipse 90% 70% at 50% 40%,#000 20%,transparent 78%);
}

/* Soft radial glow — sits behind heroes on dark grounds */
.glow{position:relative;isolation:isolate}
.glow::after{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  width:min(120vw,1100px);aspect-ratio:1;left:50%;top:-30%;translate:-50% 0;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 22%,transparent) 0%,transparent 62%);
  filter:blur(20px);
}

/* ---------- 7. BUTTONS ---------- */
.btn{
  --btn-bg:var(--accent);
  --btn-fg:#fff;
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.65em;
  padding:1.05em 2.1em;
  font-family:var(--font-body);
  font-size:var(--step--1);
  font-weight:600;letter-spacing:.075em;text-transform:uppercase;
  line-height:1;text-decoration:none;white-space:nowrap;
  color:var(--btn-fg);background:var(--btn-bg);
  border-radius:var(--r-full);
  border:1px solid transparent;
  cursor:pointer;overflow:hidden;isolation:isolate;
  transition:transform var(--t-mid) var(--ease-out),
             box-shadow var(--t-mid) var(--ease-out),
             background-color var(--t-mid) var(--ease-out),
             color var(--t-mid) var(--ease-out),
             border-color var(--t-mid) var(--ease-out);
  box-shadow:0 1px 2px rgba(0,0,0,.06),0 6px 18px color-mix(in srgb,var(--btn-bg) 30%,transparent);
}
/* Sheen sweep on hover */
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.28) 48%,transparent 66%);
  translate:-120% 0;
  transition:translate var(--t-slow) var(--ease-out);
}
.btn:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(0,0,0,.07),0 14px 34px color-mix(in srgb,var(--btn-bg) 42%,transparent)}
.btn:hover::before{translate:120% 0}
.btn:active{transform:translateY(0) scale(.985)}

.btn--lg{padding:1.25em 2.6em;font-size:var(--step-0)}

/* A long label ("Free 15-min audit on WhatsApp") with white-space:nowrap has a
   min-content width wider than a phone, which forces its whole grid track wide
   and pushes the page sideways. Below the phone breakpoint, let buttons wrap. */
@media (max-width:560px){
  .btn{white-space:normal;text-align:center;line-height:1.25}
}
.btn--sm{padding:.85em 1.5em;font-size:var(--step--2)}
.btn--block{display:flex;width:100%}

.btn--dark{--btn-bg:var(--ink);--btn-fg:var(--paper)}
.btn--light{--btn-bg:var(--paper);--btn-fg:var(--ink)}

.btn--ghost{
  --btn-bg:transparent;--btn-fg:var(--fg);
  border-color:color-mix(in srgb,var(--fg) 28%,transparent);
  box-shadow:none;
}
.btn--ghost:hover{
  border-color:var(--fg);
  background:color-mix(in srgb,var(--fg) 6%,transparent);
  box-shadow:none;transform:translateY(-2px);
}

/* Text link with animated underline — used for tertiary actions */
.link{
  display:inline-flex;align-items:center;gap:.5em;
  text-decoration:none;font-weight:500;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 1px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size var(--t-mid) var(--ease-out),gap var(--t-mid) var(--ease-out);
  padding-bottom:2px;
}
.link:hover{background-size:100% 1px;gap:.85em}
.link--accent{color:var(--accent)}

/* Arrow that slides on hover */
.btn .arw,.link .arw{transition:translate var(--t-mid) var(--ease-out)}
.btn:hover .arw,.link:hover .arw{translate:3px 0}

/* ---------- 8. CARDS ---------- */
.card{
  position:relative;
  background:var(--surface);
  color:var(--fg);
  border:1px solid var(--hairline);
  border-radius:var(--r-lg);
  padding:clamp(1.5rem,3vw,2.25rem);
  transition:transform var(--t-mid) var(--ease-out),
             box-shadow var(--t-mid) var(--ease-out),
             border-color var(--t-mid) var(--ease-out);
  overflow:hidden;
}
.card--hover:hover{transform:translateY(-5px);box-shadow:var(--shadow-3);border-color:color-mix(in srgb,var(--accent) 45%,var(--hairline))}
.card--flat{background:transparent;border:0;padding:0}
.card--bordered{background:transparent}

/* Top accent line that draws in on hover */
.card--edge::after{
  content:"";position:absolute;top:0;left:0;height:2px;width:0;
  background:linear-gradient(90deg,var(--accent),var(--accent-soft));
  transition:width var(--t-slow) var(--ease-out);
}
.card--edge:hover::after{width:100%}

.card__num{
  font-family:var(--font-display);font-size:var(--step-4);
  color:var(--accent);opacity:.32;line-height:1;display:block;margin-bottom:var(--s-xs);
  font-variant-numeric:tabular-nums;
}
.card__icon{
  width:46px;height:46px;display:grid;place-items:center;flex:none;
  border-radius:var(--r-sm);
  background:color-mix(in srgb,var(--accent) 12%,transparent);
  color:var(--accent);margin-bottom:var(--s-md);
}
.card__icon svg{width:22px;height:22px}
.card h3{font-size:var(--step-2);margin-bottom:.5em}
.card p{color:var(--fg-muted);font-size:var(--step--1);line-height:1.6}

/* ---------- 9. STATS ---------- */
.stats{display:grid;gap:var(--s-lg);grid-template-columns:repeat(auto-fit,minmax(min(160px,100%),1fr))}
.stat{text-align:center}
.stat__n{
  display:block;font-family:var(--font-display);
  font-size:var(--step-6);line-height:1;color:var(--accent);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;
}
.stat__l{
  display:block;margin-top:.6em;font-size:var(--step--2);
  text-transform:uppercase;letter-spacing:.16em;color:var(--fg-muted);
}
.stats--bordered .stat{border-left:1px solid var(--hairline);padding-left:var(--s-md);text-align:left}
.stats--bordered .stat:first-child{border-left:0;padding-left:0}

/* ---------- 10. FORMS ---------- */
.field{display:block;margin-bottom:var(--s-md)}
.field__label{
  display:block;font-size:var(--step--2);font-weight:600;
  text-transform:uppercase;letter-spacing:.12em;
  margin-bottom:.6em;color:var(--fg-muted);
}
.input,.select,.textarea{
  width:100%;
  padding:1em 1.1em;
  font-size:var(--step-0);
  color:var(--fg);
  background:var(--bg);
  border:1px solid var(--hairline);
  border-radius:var(--r-sm);
  transition:border-color var(--t-fast) var(--ease-out),box-shadow var(--t-fast) var(--ease-out),background-color var(--t-fast);
  appearance:none;
}
.textarea{min-height:130px;resize:vertical;line-height:1.6}
.select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;background-size:18px;
  padding-right:2.8rem;cursor:pointer;
}
.input:focus,.select:focus,.textarea:focus{
  outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent);
}
.input::placeholder,.textarea::placeholder{color:color-mix(in srgb,var(--fg) 38%,transparent)}
.input:user-invalid,.textarea:user-invalid{border-color:#c0392b}
.field__err{display:none;color:#c0392b;font-size:var(--step--2);margin-top:.45em}
.field.is-error .field__err{display:block}

/* Chip / segmented choice — the wizard's main input. Big tap targets. */
.chips{display:flex;flex-wrap:wrap;gap:.65rem}
.chip{position:relative}
.chip input{position:absolute;opacity:0;width:0;height:0}
.chip span{
  display:flex;align-items:center;gap:.55em;
  padding:.85em 1.35em;
  font-size:var(--step--1);font-weight:500;
  border:1px solid var(--hairline);border-radius:var(--r-full);
  background:var(--bg);color:var(--fg);cursor:pointer;user-select:none;
  transition:all var(--t-fast) var(--ease-out);
}
.chip span:hover{border-color:var(--accent);transform:translateY(-1px)}
.chip input:checked+span{
  background:var(--accent);border-color:var(--accent);color:#fff;
  box-shadow:0 4px 14px color-mix(in srgb,var(--accent) 34%,transparent);
}
.chip input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}

/* Card-style choice for the first wizard step — bigger, more visual */
.choice-grid{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr))}
.choice{position:relative}
.choice input{position:absolute;opacity:0;width:0;height:0}
.choice span{
  display:flex;flex-direction:column;align-items:center;gap:.6em;text-align:center;
  padding:1.4em 1em;height:100%;
  border:1px solid var(--hairline);border-radius:var(--r-md);
  background:var(--bg);color:var(--fg);cursor:pointer;user-select:none;
  font-size:var(--step--1);font-weight:500;line-height:1.3;
  transition:all var(--t-fast) var(--ease-out);
}
.choice span svg{width:26px;height:26px;color:var(--accent);transition:transform var(--t-mid) var(--ease-spring)}
.choice span:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow-2)}
.choice span:hover svg{transform:scale(1.12)}
.choice input:checked+span{
  border-color:var(--accent);
  background:color-mix(in srgb,var(--accent) 8%,var(--bg));
  box-shadow:0 0 0 1px var(--accent),var(--shadow-2);
}
.choice input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}

.honeypot{position:absolute!important;left:-9999px!important;opacity:0!important;height:0!important;width:0!important;overflow:hidden}

/* ---------- 11. QUOTE / APPLICATION WIZARD ---------- */
.wizard{
  background:var(--bg);
  color:var(--fg);
  border:1px solid var(--hairline);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-4);
  overflow:hidden;
  position:relative;
}
.wizard__bar{height:3px;background:var(--hairline);position:relative;overflow:hidden}
.wizard__bar i{
  position:absolute;inset:0 auto 0 0;width:0;
  background:linear-gradient(90deg,var(--accent),var(--accent-soft));
  transition:width var(--t-slow) var(--ease-out);
}
.wizard__head{
  padding:clamp(1.25rem,3vw,1.75rem) clamp(1.25rem,3vw,2rem) 0;
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
}
.wizard__count{font-size:var(--step--2);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-muted);font-variant-numeric:tabular-nums}
.wizard__body{padding:clamp(1.25rem,3vw,2rem);min-height:280px;position:relative}
.wizard__step{display:none}
.wizard__step.is-active{display:block;animation:stepIn var(--t-mid) var(--ease-out) both}
@keyframes stepIn{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
.wizard__step[data-dir="back"].is-active{animation-name:stepInBack}
@keyframes stepInBack{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
.wizard__q{font-family:var(--font-display);font-size:var(--step-3);margin-bottom:.25em;line-height:1.15}
.wizard__hint{font-size:var(--step--1);color:var(--fg-muted);margin-bottom:var(--s-md)}
.wizard__foot{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:clamp(1rem,2vw,1.25rem) clamp(1.25rem,3vw,2rem);
  border-top:1px solid var(--hairline);
  background:var(--surface);
}
.wizard__back{font-size:var(--step--1);color:var(--fg-muted);display:inline-flex;align-items:center;gap:.4em;transition:color var(--t-fast)}
.wizard__back:hover{color:var(--fg)}
.wizard__back[hidden]{visibility:hidden;display:inline-flex!important}

/* The price reveal — value before contact capture */
.reveal-price{
  text-align:center;padding:var(--s-lg) var(--s-md);
  border:1px dashed color-mix(in srgb,var(--accent) 50%,transparent);
  border-radius:var(--r-md);
  background:color-mix(in srgb,var(--accent) 6%,transparent);
  margin-bottom:var(--s-md);
}
.reveal-price__n{
  font-family:var(--font-display);font-size:var(--step-6);line-height:1;
  color:var(--accent);display:block;font-variant-numeric:tabular-nums;
}
.reveal-price__l{font-size:var(--step--2);text-transform:uppercase;letter-spacing:.14em;color:var(--fg-muted);margin-top:.7em;display:block}

/* ---------- 12. HEADER / NAV ---------- */
.header{
  position:fixed;inset:0 0 auto 0;z-index:900;
  height:var(--header-h);
  display:flex;align-items:center;
  transition:background-color var(--t-mid) var(--ease-out),
             box-shadow var(--t-mid) var(--ease-out),
             border-color var(--t-mid);
  border-bottom:1px solid transparent;
}
.header.is-stuck{
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom-color:var(--hairline);
  box-shadow:0 1px 20px rgba(0,0,0,.05);
}
.header__in{display:flex;align-items:center;justify-content:space-between;gap:var(--s-md);width:100%}
.brand{display:inline-flex;align-items:center;gap:.65rem;text-decoration:none;font-family:var(--font-display);font-size:var(--step-2);letter-spacing:-.01em;line-height:1;flex:none}
.brand__mark{width:34px;height:34px;flex:none}
.brand small{display:block;font-family:var(--font-body);font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--fg-muted);margin-top:3px;font-weight:500}

.nav{display:flex;align-items:center;gap:clamp(1rem,2.2vw,2rem)}
.nav a{
  text-decoration:none;font-size:var(--step--1);font-weight:500;
  position:relative;padding-block:.35em;white-space:nowrap;
  transition:color var(--t-fast);
}
.nav a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:0;
  background:var(--accent);transition:width var(--t-mid) var(--ease-out);
}
.nav a:hover::after,.nav a[aria-current="page"]::after{width:100%}
.nav a[aria-current="page"]{color:var(--accent)}

.header__cta{display:flex;align-items:center;gap:.75rem;flex:none}
.burger{display:none;width:44px;height:44px;place-items:center;flex:none;border-radius:var(--r-sm)}
.burger span{display:block;width:22px;height:1.5px;background:currentColor;transition:transform var(--t-mid) var(--ease-out),opacity var(--t-fast)}
.burger span+span{margin-top:6px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

@media (max-width:960px){
  .burger{display:grid}
  .nav{
    position:fixed;inset:var(--header-h) 0 auto 0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--bg);color:var(--fg);
    border-bottom:1px solid var(--hairline);
    padding:var(--s-sm) var(--gutter) var(--s-lg);
    box-shadow:var(--shadow-3);
    clip-path:inset(0 0 100% 0);
    transition:clip-path var(--t-mid) var(--ease-out);
    max-height:calc(100dvh - var(--header-h));overflow-y:auto;
  }
  .nav.is-open{clip-path:inset(0 0 0 0)}
  .nav a{padding:1rem 0;border-bottom:1px solid var(--hairline);font-size:var(--step-1)}
  .nav a::after{display:none}
  .nav .btn{margin-top:var(--s-md)}
  .header__cta .btn:not(.burger){display:none}
}

/* Skip link */
.skip{position:absolute;left:-9999px;z-index:999;padding:1rem 1.5rem;background:var(--accent);color:#fff;border-radius:var(--r-sm)}
.skip:focus{left:1rem;top:1rem}

/* ---------- 13. STICKY MOBILE ACTION BAR (the funnel's floor) ---------- */
.actionbar{
  position:fixed;inset:auto 0 0 0;z-index:880;
  display:none;gap:1px;
  background:var(--hairline);
  border-top:1px solid var(--hairline);
  padding-bottom:env(safe-area-inset-bottom);
  transform:translateY(110%);
  transition:transform var(--t-mid) var(--ease-out);
  box-shadow:0 -4px 24px rgba(0,0,0,.12);
}
.actionbar.is-up{transform:none}
.actionbar a{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  padding:.7rem .5rem;background:var(--bg);color:var(--fg);text-decoration:none;
  font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;
}
.actionbar a svg{width:19px;height:19px}
.actionbar a.is-primary{background:var(--accent);color:#fff}
.actionbar a.is-wa{background:#25D366;color:#fff}
@media (max-width:800px){.actionbar{display:flex}body{padding-bottom:62px}}

/* ---------- 14. ACCORDION (objection handling) ---------- */
.acc{border-top:1px solid var(--hairline)}
.acc__item{border-bottom:1px solid var(--hairline)}
.acc__btn{
  width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s-md);
  padding:1.35em 0;text-align:left;
  font-family:var(--font-display);font-size:var(--step-2);line-height:1.25;
  transition:color var(--t-fast);
}
.acc__btn:hover{color:var(--accent)}
.acc__ico{flex:none;width:26px;height:26px;position:relative;margin-top:.25em}
.acc__ico::before,.acc__ico::after{
  content:"";position:absolute;inset:50% 0 auto 0;height:1.5px;background:currentColor;
  transition:transform var(--t-mid) var(--ease-out),opacity var(--t-fast);
}
.acc__ico::after{transform:rotate(90deg)}
.acc__btn[aria-expanded="true"] .acc__ico::after{transform:rotate(0);opacity:0}
.acc__btn[aria-expanded="true"]{color:var(--accent)}
.acc__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--t-mid) var(--ease-out)}
.acc__panel>div{overflow:hidden}
.acc__panel.is-open{grid-template-rows:1fr}
.acc__panel p{padding-bottom:1.6em;color:var(--fg-muted);max-width:var(--measure)}

/* ---------- 15. MARQUEE (logo / proof strip) ---------- */
.marquee{overflow:hidden;position:relative;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee__track{display:flex;gap:clamp(2rem,5vw,4.5rem);width:max-content;animation:slide 38s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.marquee__track>*{flex:none;display:flex;align-items:center;gap:.7em;color:var(--fg-muted);font-size:var(--step--1);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}

/* ---------- 16. SCROLL REVEAL ---------- */
[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity var(--t-slow) var(--ease-out),transform var(--t-slow) var(--ease-out)}
[data-reveal].is-in{opacity:1;transform:none}
[data-reveal="fade"]{transform:none}
[data-reveal="left"]{transform:translateX(-30px)}
[data-reveal="right"]{transform:translateX(30px)}
/* Below the tablet breakpoint the horizontal offset is wider than the gutter,
   so an un-revealed element pushes the document sideways and the whole page
   scrolls horizontally. Go vertical-only where there is no room. */
@media (max-width:900px){
  [data-reveal="left"],[data-reveal="right"]{transform:translateY(26px)}
}
[data-reveal="scale"]{transform:scale(.955)}
[data-reveal].is-in{transform:none}
[data-reveal-delay="1"]{transition-delay:90ms}
[data-reveal-delay="2"]{transition-delay:180ms}
[data-reveal-delay="3"]{transition-delay:270ms}
[data-reveal-delay="4"]{transition-delay:360ms}
[data-reveal-delay="5"]{transition-delay:450ms}
[data-reveal-delay="6"]{transition-delay:540ms}

/* Per-character headline reveal — reserved for the hero only */
.split-line{display:block;overflow:hidden}
.split-line>span{display:block;transform:translateY(105%);transition:transform 900ms var(--ease-out)}
.is-in .split-line>span,.split-line.is-in>span{transform:none}
.split-line:nth-child(2)>span{transition-delay:80ms}
.split-line:nth-child(3)>span{transition-delay:160ms}

/* ---------- 17. MODALS / DRAWERS ---------- */
.modal{
  position:fixed;inset:0;z-index:1000;
  display:grid;place-items:center;padding:var(--gutter);
  background:color-mix(in srgb,var(--ink) 62%,transparent);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;
  transition:opacity var(--t-mid) var(--ease-out),visibility var(--t-mid);
}
.modal.is-open{opacity:1;visibility:visible}
.modal__panel{
  width:min(100%,560px);max-height:88dvh;overflow-y:auto;
  background:var(--bg);color:var(--fg);border-radius:var(--r-lg);
  box-shadow:var(--shadow-4);
  padding:clamp(1.5rem,4vw,2.75rem);
  transform:translateY(18px) scale(.98);
  transition:transform var(--t-mid) var(--ease-out);
  position:relative;
}
.modal.is-open .modal__panel{transform:none}
.modal__x{position:absolute;top:1rem;right:1rem;width:40px;height:40px;display:grid;place-items:center;border-radius:var(--r-full);color:var(--fg-muted);transition:background-color var(--t-fast),color var(--t-fast)}
.modal__x:hover{background:var(--surface);color:var(--fg)}
.modal--wide .modal__panel{width:min(100%,760px)}

/* ---------- 18. TOAST ---------- */
.toast{
  position:fixed;left:50%;bottom:calc(1.5rem + env(safe-area-inset-bottom));z-index:1100;
  translate:-50% 0;
  display:flex;align-items:center;gap:.75rem;
  padding:.95rem 1.4rem;border-radius:var(--r-full);
  background:var(--ink);color:var(--paper);font-size:var(--step--1);
  box-shadow:var(--shadow-4);
  opacity:0;transform:translateY(16px);pointer-events:none;
  transition:opacity var(--t-mid) var(--ease-out),transform var(--t-mid) var(--ease-out);
  max-width:calc(100vw - 2rem);
}
.toast.is-up{opacity:1;transform:none}
@media (max-width:800px){.toast{bottom:calc(74px + env(safe-area-inset-bottom))}}

/* ---------- 19. FOOTER ---------- */
.footer{padding-block:var(--s-2xl) var(--s-lg)}
.footer__grid{display:grid;gap:var(--s-xl);grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr))}
.footer__grid>div:first-child{flex:1.6}
@media (min-width:900px){.footer__grid{grid-template-columns:1.7fr 1fr 1fr 1.2fr}}
.footer h5{font-size:var(--step--2);text-transform:uppercase;letter-spacing:.16em;color:var(--fg-muted);margin-bottom:var(--s-sm);font-weight:600;font-family:var(--font-body)}
.footer ul{list-style:none;padding:0;display:grid;gap:.6rem}
.footer a{text-decoration:none;font-size:var(--step--1);color:var(--fg-muted);transition:color var(--t-fast)}
.footer a:hover{color:var(--accent)}
.footer__bottom{
  margin-top:var(--s-2xl);padding-top:var(--s-md);
  border-top:1px solid var(--hairline);
  display:flex;flex-wrap:wrap;gap:var(--s-sm) var(--s-md);
  align-items:center;justify-content:space-between;
  font-size:var(--step--2);color:var(--fg-muted);
}

/* ---------- 20. BADGES / PILLS ---------- */
.badge{
  display:inline-flex;align-items:center;gap:.45em;
  padding:.45em .95em;border-radius:var(--r-full);
  font-size:var(--step--2);font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  background:color-mix(in srgb,var(--accent) 12%,transparent);
  color:var(--accent);
  border:1px solid color-mix(in srgb,var(--accent) 26%,transparent);
}
.badge--live::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;animation:pulse 2s var(--ease-in-out) infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}
.badge--solid{background:var(--accent);color:#fff;border-color:var(--accent)}

/* ---------- 21. STARS ---------- */
.stars{display:inline-flex;gap:2px;color:var(--accent)}
.stars svg{width:15px;height:15px}

/* ---------- 22. TABLE (rate cards) ---------- */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--hairline);border-radius:var(--r-md)}
table{width:100%;border-collapse:collapse;font-size:var(--step--1);min-width:520px}
th,td{padding:1em 1.15em;text-align:left;border-bottom:1px solid var(--hairline)}
th{font-size:var(--step--2);text-transform:uppercase;letter-spacing:.12em;color:var(--fg-muted);font-weight:600;background:var(--surface);white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
tbody tr{transition:background-color var(--t-fast)}
tbody tr:hover{background:color-mix(in srgb,var(--accent) 4%,transparent)}
td.num{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:600}

/* ---------- 23. PWA INSTALL PROMPT ---------- */
.installer{
  position:fixed;z-index:960;
  left:50%;bottom:calc(1.25rem + env(safe-area-inset-bottom));translate:-50% 0;
  width:min(calc(100vw - 2rem),430px);
  display:flex;align-items:center;gap:.9rem;
  padding:.9rem 1rem;
  background:var(--bg);color:var(--fg);border:1px solid var(--hairline);border-radius:var(--r-lg);
  box-shadow:var(--shadow-4);
  opacity:0;transform:translateY(22px);pointer-events:none;
  transition:opacity var(--t-mid) var(--ease-out),transform var(--t-mid) var(--ease-out);
}
.installer.is-up{opacity:1;transform:none;pointer-events:auto}
.installer img,.installer svg.ico{width:40px;height:40px;border-radius:9px;flex:none}
.installer div{flex:1;min-width:0}
.installer strong{display:block;font-size:var(--step--1);line-height:1.3}
.installer span{display:block;font-size:var(--step--2);color:var(--fg-muted);line-height:1.35}
@media (max-width:800px){.installer{bottom:calc(74px + env(safe-area-inset-bottom))}}

/* ---------- 24. UTILITIES ---------- */
.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}
[hidden]{display:none!important}
.nowrap{white-space:nowrap}
.relative{position:relative}
.of-hidden{overflow:hidden}
.aspect-video{aspect-ratio:16/9}
.aspect-square{aspect-ratio:1}
.aspect-portrait{aspect-ratio:3/4}
.rounded{border-radius:var(--r-lg);overflow:hidden}
.mt-0{margin-top:0}.mt-sm{margin-top:var(--s-sm)}.mt-md{margin-top:var(--s-md)}
.mt-lg{margin-top:var(--s-lg)}.mt-xl{margin-top:var(--s-xl)}.mt-2xl{margin-top:var(--s-2xl)}
.mb-0{margin-bottom:0}.mb-sm{margin-bottom:var(--s-sm)}.mb-md{margin-bottom:var(--s-md)}
.mb-lg{margin-bottom:var(--s-lg)}.mb-xl{margin-bottom:var(--s-xl)}.mb-2xl{margin-bottom:var(--s-2xl)}
.gap-sm{gap:var(--s-sm)}.gap-md{gap:var(--s-md)}.gap-lg{gap:var(--s-lg)}

/* Image placeholder — an elegant hold, not a grey box.
   Replace .ph elements with real <picture> when photography lands. */
.ph{
  position:relative;overflow:hidden;border-radius:var(--r-lg);
  background:
    radial-gradient(120% 90% at 22% 12%,color-mix(in srgb,var(--accent) 26%,transparent),transparent 62%),
    radial-gradient(110% 80% at 82% 88%,color-mix(in srgb,var(--accent) 15%,transparent),transparent 58%),
    linear-gradient(155deg,var(--ink) 0%,var(--ink-2) 100%);
  isolation:isolate;
}
.ph::after{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:34px 34px;
  mask-image:radial-gradient(ellipse 80% 70% at 50% 50%,#000,transparent 72%);
}
.ph__label{
  position:absolute;left:1rem;bottom:1rem;z-index:2;
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.5);
}

/* ---------- 25. FOCUS & MOTION SAFETY ---------- */
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
:focus:not(:focus-visible){outline:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
  [data-reveal]{opacity:1!important;transform:none!important}
  .split-line>span{transform:none!important}
  .marquee__track{animation:none}
}

/* ---------- 26. VIEW TRANSITIONS ---------- */
@view-transition{navigation:auto}
@media (prefers-reduced-motion:no-preference){
  ::view-transition-old(root){animation:vtOut 180ms var(--ease-in-out) both}
  ::view-transition-new(root){animation:vtIn 320ms var(--ease-out) both}
}
@keyframes vtOut{to{opacity:0}}
@keyframes vtIn{from{opacity:0;transform:translateY(8px)}}

/* ---------- 27. PRINT ---------- */
@media print{
  .header,.actionbar,.installer,.toast,.modal,.burger,.btn{display:none!important}
  body{background:#fff;color:#000;padding:0}
  .section{padding-block:1rem;break-inside:avoid}
  a::after{content:" (" attr(href) ")";font-size:.8em;color:#555}
}