/* ==========================================================================
   Horizonmark site.css, the shared design system for site_v2 (2026-07-15)
   Brand is LOCKED: cream #F6F1E9, panel #EDE5D6, ink #211B15, soft ink
   #5A5145, hairline #E3D8C5, honey-gold #C18F3C, soft gold #D8B774,
   dark ground #1B1610, cream-on-dark #F3EAD9.
   DM Serif Display (display) + Manrope (body). Buttons: ink on gold, 2px.
   Accessibility note: two derived honey shades exist ONLY to pass WCAG AA
   text contrast on light grounds. They are darkened honey-gold, same hue.
     --gold-ink  #7E5C1D  small gold text on cream/panel (4.5:1+)
     --gold-stat #A87A2E  large display numerals on cream/panel (3:1+)
   Decorative gold (rules, dots, buttons, on-dark text) stays #C18F3C/#D8B774.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  --bg:#F6F1E9;          /* cream */
  --bg-2:#EDE5D6;        /* warm panel */
  --ink:#211B15;         /* ink */
  --ink-soft:#5A5145;    /* soft ink body text */
  --gold:#C18F3C;        /* honey-gold accent (decorative + buttons) */
  --gold-soft:#D8B774;   /* light gold (glow, on-dark accents) */
  --gold-ink:#7E5C1D;    /* AA-safe small gold text on light grounds */
  --gold-stat:#A87A2E;   /* AA-safe large display numerals on light grounds */
  --ink-on-gold:#211B15; /* text on the gold button */
  --panel:#1B1610;       /* dark ground panel */
  --cream:#F3EAD9;       /* text on panel */
  --line:#E3D8C5;        /* hairline */
  --line-dark:rgba(216,183,116,.22); /* hairline on dark ground */
  --shadow:30px 40px 80px -40px rgba(40,28,12,.35);
  --ease:cubic-bezier(.2,.7,.2,1);
  --w-wide:1160px;
  --w-narrow:760px;
}

/* ---------- 2. Reset + base ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-synthesis:none;
  overflow-x:hidden;
}

/* faint paper grain for warmth */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.04;mix-blend-mode:multiply;
}

img,svg{max-width:100%;height:auto}
p{margin:0}
main{display:block}
header,main,footer,section{position:relative;z-index:1}

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

/* skip link */
.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--ink);color:var(--cream);padding:14px 22px;border-radius:2px;
  font-weight:600;text-decoration:none;
}
.skip:focus{left:16px;top:16px}

/* focus states (global) */
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--gold);outline-offset:3px;border-radius:2px;
}
.on-dark a:focus-visible,.on-dark button:focus-visible,.on-dark summary:focus-visible{
  outline-color:var(--gold-soft);
}

/* ---------- 3. Layout ---------- */
.wrap{position:relative;z-index:1;width:100%;max-width:var(--w-wide);margin:0 auto;padding:0 24px}
.wrap-narrow{position:relative;z-index:1;width:100%;max-width:var(--w-narrow);margin:0 auto;padding:0 24px}

.band{padding:clamp(72px,11vw,140px) 0}
.band.alt{background:var(--bg-2)}
.band.tight{padding:clamp(56px,8vw,96px) 0}

/* ---------- 4. Typography ---------- */
h1,h2,h3,.stat-num,.calc-num,.step-idx,.card-idx{
  font-family:"DM Serif Display",Georgia,"Times New Roman",serif;
  font-weight:600;letter-spacing:-.01em;margin:0;
}
h1{font-size:clamp(2.7rem,8.2vw,5.4rem);line-height:1.02;letter-spacing:-.018em}
h2{font-size:clamp(1.95rem,4.8vw,3.15rem);line-height:1.1}
h3{font-size:clamp(1.3rem,2.6vw,1.55rem);line-height:1.24;font-weight:500}

h1 em,h2 em,.lead em,.statement em{font-style:italic;color:var(--gold-ink)}
.on-dark h1 em,.on-dark h2 em,.on-dark .statement em{color:var(--gold-soft)}

.eyebrow{
  font-size:.72rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold-ink);margin:0;
}
.on-dark .eyebrow{color:var(--gold-soft)}

.lead{
  font-family:"DM Serif Display",Georgia,serif;font-weight:500;
  font-size:clamp(1.55rem,4.4vw,2.35rem);line-height:1.2;letter-spacing:-.01em;
  max-width:24ch;
}

.sub{font-size:clamp(1.06rem,2vw,1.22rem);line-height:1.6;color:var(--ink-soft);max-width:56ch}
.copy{font-size:1.06rem;color:var(--ink-soft);max-width:60ch}
.copy b,.sub b{color:var(--ink);font-weight:600}
.on-dark .copy,.on-dark .sub{color:var(--cream)}

.footnote{font-size:.82rem;color:var(--ink-soft);opacity:.85}

/* in-copy links */
.copy a,.sub a,p a{
  color:var(--gold-ink);text-decoration:underline;
  text-decoration-color:var(--gold);text-underline-offset:3px;text-decoration-thickness:1px;
  transition:color .2s var(--ease),text-decoration-color .2s var(--ease);
}
.copy a:hover,.sub a:hover,p a:hover{color:var(--ink);text-decoration-color:var(--ink)}
.on-dark p a{color:var(--gold-soft);text-decoration-color:var(--gold-soft)}
.on-dark p a:hover{color:var(--cream);text-decoration-color:var(--cream)}

.nb{white-space:nowrap}

/* section header stack (eyebrow + lead/h2 + intro) */
.sec-head{max-width:820px}
.sec-head .eyebrow{margin-bottom:18px}
.sec-head .copy{margin-top:20px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head.center .lead,.sec-head.center h2{margin-left:auto;margin-right:auto}
.sec-head.center .copy{margin-left:auto;margin-right:auto}

/* ---------- 5. Horizon motif (brand signature) ---------- */
.hz{display:flex;flex-direction:column;align-items:center;gap:5px}
.hz .hz-dot{width:6px;height:6px;border-radius:50%;background:var(--gold)}
.hz .hz-rule{width:96px;height:1.5px;border-radius:1px;
  background:linear-gradient(90deg,transparent,var(--gold-soft) 18%,var(--gold) 50%,var(--gold-soft) 82%,transparent)}
.on-dark .hz .hz-dot{background:var(--gold-soft)}

/* full-width horizon line with rising sun (hero centerpiece) */
.sunline{position:relative;height:96px;margin:clamp(40px,7vw,72px) auto 0;max-width:820px;overflow:hidden}
.sunline .sl-glow{
  position:absolute;left:50%;bottom:-84px;transform:translateX(-50%);
  width:520px;height:260px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(216,183,116,.6),rgba(216,183,116,0) 72%);
  pointer-events:none;
}
.sunline .sl-sun{
  position:absolute;left:50%;bottom:1px;transform:translateX(-50%);
  width:clamp(104px,12vw,132px);height:clamp(52px,6vw,66px);
  border-radius:132px 132px 0 0;
  background:linear-gradient(180deg,var(--gold-soft),var(--gold));
}
.sunline .sl-rule{
  position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:1px;
  background:linear-gradient(90deg,transparent,var(--gold-soft) 12%,var(--gold) 50%,var(--gold-soft) 88%,transparent);
}

/* ---------- 6. Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:inherit;font-weight:600;font-size:1.06rem;letter-spacing:.005em;
  text-decoration:none;cursor:pointer;border:0;min-height:44px;
  transition:transform .25s var(--ease),background .25s,box-shadow .25s,border-color .25s,color .25s;
}
.btn-primary{
  background:var(--gold);color:var(--ink-on-gold);
  padding:19px 40px;border-radius:2px;
  box-shadow:0 16px 30px -16px rgba(193,143,60,.55);
}
.btn-primary:hover{background:var(--gold-soft);transform:translateY(-2px);box-shadow:0 22px 38px -16px rgba(193,143,60,.65)}
.btn-primary:active{transform:translateY(0)}
.btn-primary.big{font-size:1.16rem;padding:21px 46px}

/* quiet outline button on light ground */
.btn-call,.btn-ghost{
  background:transparent;color:var(--ink);
  padding:13px 24px;border-radius:2px;border:1px solid var(--line);
  font-size:1rem;
}
.btn-call:hover,.btn-ghost:hover{border-color:var(--gold);color:var(--ink);transform:translateY(-1px)}
.btn-call .ico{width:16px;height:16px;flex:0 0 auto;color:var(--gold-ink)}
.btn-call .phl{text-align:center;line-height:1.4}

/* outline button on dark ground */
.btn-ghost-dark{
  background:transparent;color:var(--cream);
  padding:13px 26px;border-radius:2px;border:1px solid var(--line-dark);
  font-size:1rem;
}
.btn-ghost-dark:hover{border-color:var(--gold-soft);color:var(--gold-soft);transform:translateY(-1px)}
.btn-ghost-dark .ico{width:16px;height:16px;flex:0 0 auto;color:var(--gold-soft)}
.btn-ghost-dark .phl{text-align:center;line-height:1.4}

/* nav-sized compact primary */
.btn-primary.compact{padding:12px 22px;font-size:.95rem;box-shadow:none}

/* microcopy under/next to a CTA (trust line) */
.cta-note{margin:18px 0 0;font-size:.9rem;color:var(--ink-soft);max-width:52ch}
.on-dark .cta-note{color:var(--cream);opacity:.8}

/* ---------- 7. Header / nav ---------- */
.site-header{
  position:sticky;top:0;z-index:40;
  background:rgba(246,241,233,.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:72px}
.mark{
  font-family:"DM Serif Display",Georgia,serif;font-weight:700;
  font-size:clamp(1.4rem,3.4vw,1.7rem);letter-spacing:-.005em;color:var(--ink);
  line-height:1;text-decoration:none;display:inline-flex;align-items:center;min-height:44px;
}
.mark .i-sun,.foot-mark .i-sun{position:relative;display:inline-block;line-height:1}
.mark .i-sun::after,.foot-mark .i-sun::after{
  content:"";position:absolute;left:50%;top:0.04em;transform:translateX(-50%);
  width:0.25em;height:0.25em;border-radius:50%;background:var(--gold);
}
.nav{display:flex;align-items:center;gap:6px}
.nav a.nav-link{
  display:inline-flex;align-items:center;min-height:44px;padding:0 14px;
  color:var(--ink-soft);text-decoration:none;font-size:.95rem;font-weight:600;
  border-bottom:2px solid transparent;
  transition:color .2s var(--ease);
}
.nav a.nav-link:hover{color:var(--ink)}
.nav a.nav-link[aria-current="page"]{color:var(--ink);border-bottom-color:var(--gold)}
.nav .btn{margin-left:10px}
@media(max-width:820px){
  .nav a.nav-link{display:none} /* links live in footer + body on mobile */
  .site-header .wrap{min-height:64px}
  .btn-primary.compact{padding:10px 16px;font-size:.9rem;white-space:nowrap}
}

/* ---------- 8. Hero ---------- */
.hero{padding:clamp(72px,10vw,132px) 0 0;text-align:center;overflow:hidden}
.hero .wrap{display:flex;flex-direction:column;align-items:center}
.hero::after{
  content:"";position:absolute;left:50%;top:-180px;transform:translateX(-50%);
  width:min(920px,120vw);height:560px;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(216,183,116,.22),rgba(216,183,116,0) 70%);
}
.hero .eyebrow{margin-bottom:26px}
.hero h1{max-width:24ch;text-wrap:balance}
.hero .sub{margin:28px auto 0;max-width:58ch}
.hero .cta-zone{margin:40px 0 0;display:flex;flex-direction:column;align-items:center;gap:18px}
.hero-trust{margin:8px 0 0;display:flex;flex-direction:column;gap:6px;align-items:center}
.hero-trust .t1{font-size:.92rem;color:var(--ink-soft);max-width:52ch}
.hero-trust .t2{font-size:.86rem;color:var(--ink-soft);opacity:.85}
.hero .sunline{width:100%}
.hero + .band{padding-top:clamp(64px,9vw,110px)}

/* ---------- 9. Benefit blocks (three outcomes) ---------- */
.benefits{margin:clamp(44px,6vw,64px) 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,4vw,56px)}
.benefit{border-top:2px solid var(--gold);padding-top:26px}
.benefit .card-idx{
  display:block;font-size:1.05rem;color:var(--gold-ink);font-style:italic;letter-spacing:.02em;
}
.benefit h3{margin:12px 0 0;max-width:16ch}
.benefit p{margin:14px 0 0;font-size:1rem;color:var(--ink-soft)}
@media(max-width:860px){.benefits{grid-template-columns:1fr;gap:36px}}

/* ---------- 10. Proof strip (sourced stat blocks) ---------- */
.proof-grid{
  margin:clamp(44px,6vw,64px) 0 0;
  display:grid;grid-template-columns:repeat(2,1fr);gap:0;
  border-top:1px solid var(--line);
}
.stat-block{
  padding:clamp(28px,4vw,44px) clamp(0px,3vw,40px) clamp(28px,4vw,44px) 0;
  border-bottom:1px solid var(--line);
}
.stat-block .stat-num{
  font-size:clamp(3rem,7.5vw,4.8rem);color:var(--gold-stat);line-height:.95;
  font-variant-numeric:tabular-nums;display:block;
}
.stat-block .stat-txt{display:block;margin:14px 0 0;font-size:1.02rem;color:var(--ink);max-width:36ch}
.stat-block .stat-src{display:block;margin:10px 0 0;font-size:.82rem;color:var(--ink-soft);opacity:.85}
@media(max-width:760px){
  .proof-grid{grid-template-columns:1fr}
  .stat-block{padding-right:0}
}

/* legacy inline stat pattern (kept for interior pages reusing the bank) */
.stats{display:flex;flex-direction:column;gap:0;margin:40px 0 0;border-top:1px solid var(--line)}
.stat{padding:28px 0;border-bottom:1px solid var(--line);display:flex;gap:22px;align-items:baseline}
.stat-num{font-size:clamp(3rem,13vw,4.6rem);color:var(--gold-stat);line-height:.9;flex:0 0 auto}
.stat-txt{font-size:1.06rem;color:var(--ink-soft);padding-top:6px}
.leak-close{margin:34px 0 0;font-size:1.12rem;max-width:46ch;color:var(--ink)}

/* ---------- 11. Three-step on-ramp ---------- */
.steps{
  margin:clamp(48px,6vw,72px) 0 0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,4vw,56px);
  counter-reset:step;
}
.step{position:relative;padding-top:30px}
.step::before{
  content:"";position:absolute;left:0;top:0;right:0;height:1.5px;
  background:linear-gradient(90deg,var(--gold),rgba(193,143,60,.12));
}
.step .step-idx{
  font-size:clamp(2.4rem,4.5vw,3.2rem);color:var(--gold-stat);font-style:italic;line-height:1;
}
.step h3{margin:14px 0 0}
.step p{margin:14px 0 0;font-size:1rem;color:var(--ink-soft)}
.step .step-note{margin-top:12px;font-size:.9rem;color:var(--gold-ink);font-weight:600}
@media(max-width:860px){.steps{grid-template-columns:1fr;gap:40px}}

/* CTA row that follows a section */
.cta-row{margin:clamp(44px,6vw,64px) 0 0;display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.cta-row.center{align-items:center;text-align:center}

/* ---------- 12. Dark band + industry cards ---------- */
.dark-band{background:var(--panel);color:var(--cream);padding:clamp(80px,12vw,150px) 0;overflow:hidden}
.dark-band::before{
  content:"";position:absolute;left:50%;top:-220px;transform:translateX(-50%);
  width:min(880px,120vw);height:520px;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(216,183,116,.12),rgba(216,183,116,0) 70%);
}
.dark-band .lead,.dark-band h2{color:var(--cream)}
.dark-band .copy{color:var(--cream);opacity:.82}

.ind-grid{margin:clamp(48px,6vw,72px) 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.5vw,32px)}
.ind-card{
  position:relative;display:flex;flex-direction:column;
  background:rgba(243,234,217,.045);
  border:1px solid var(--line-dark);border-radius:2px;
  padding:clamp(28px,3vw,40px);
  transition:transform .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease);
}
.ind-card:hover{transform:translateY(-4px);border-color:var(--gold-soft);background:rgba(243,234,217,.07)}
.ind-card .ind-eyebrow{
  font-size:.7rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold-soft);
}
.ind-card h3{margin:16px 0 0}
.ind-card h3 a{
  color:var(--cream);text-decoration:none;
  background-image:linear-gradient(var(--gold-soft),var(--gold-soft));
  background-repeat:no-repeat;background-size:0% 1.5px;background-position:0 100%;
  transition:background-size .3s var(--ease),color .3s var(--ease);
}
.ind-card:hover h3 a,.ind-card h3 a:hover{color:var(--gold-soft);background-size:100% 1.5px}
/* full-card click target without killing text selection of the copy */
.ind-card h3 a::after{content:"";position:absolute;inset:0}
.ind-card p{margin:16px 0 0;font-size:.98rem;color:var(--cream);opacity:.8;flex:1 1 auto}
.ind-card .ind-go{
  margin:24px 0 0;font-size:.9rem;font-weight:700;color:var(--gold-soft);
  display:inline-flex;align-items:center;gap:8px;
}
.ind-card .ind-go svg{width:16px;height:16px;transition:transform .25s var(--ease)}
.ind-card:hover .ind-go svg{transform:translateX(4px)}
@media(max-width:900px){.ind-grid{grid-template-columns:1fr}}

/* ---------- 13. Numbered list pattern (what you get / what we build) ---------- */
.list{margin:clamp(40px,5vw,56px) 0 0;display:flex;flex-direction:column;border-top:1px solid var(--line)}
.item{
  display:flex;gap:clamp(18px,3vw,40px);align-items:baseline;
  padding:clamp(24px,3vw,34px) 0;border-bottom:1px solid var(--line);
}
.item .idx{
  font-family:"DM Serif Display",Georgia,serif;font-style:italic;font-weight:500;
  font-size:clamp(1.4rem,2.4vw,1.8rem);color:var(--gold-ink);flex:0 0 2.2em;
}
.item p{font-size:1.04rem;color:var(--ink-soft);max-width:62ch}
.item p b{color:var(--ink);font-weight:600}

/* ---------- 14. Comparison table ---------- */
.table-scroll{margin:clamp(40px,5vw,56px) 0 0;overflow-x:auto;-webkit-overflow-scrolling:touch}
.compare{
  width:100%;min-width:680px;border-collapse:collapse;
  font-size:.95rem;line-height:1.5;
}
.compare caption{
  caption-side:bottom;text-align:left;padding:14px 2px 0;
  font-size:.82rem;color:var(--ink-soft);opacity:.85;
}
.compare th,.compare td{
  padding:16px 18px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--line);
}
.compare thead th{
  font-family:"DM Serif Display",Georgia,serif;font-weight:500;font-size:1.08rem;
  color:var(--ink);border-bottom:2px solid var(--ink);
}
.compare tbody th{
  font-weight:700;color:var(--ink);font-size:.88rem;letter-spacing:.04em;
  white-space:nowrap;
}
.compare td{color:var(--ink-soft)}
.compare .hl{background:rgba(193,143,60,.08)}
.compare thead .hl{border-bottom-color:var(--gold);color:var(--ink)}
.compare tr:hover td{background:rgba(193,143,60,.04)}
.compare tr:hover td.hl{background:rgba(193,143,60,.12)}
@media(max-width:640px){
  .table-scroll{position:relative}
  .table-scroll::before{
    content:"Swipe to compare";display:block;
    font-size:12px;letter-spacing:.08em;text-transform:uppercase;
    color:#5A5145;margin:0 0 10px;
  }
  .table-scroll::after{
    content:"";position:absolute;top:0;right:0;bottom:0;width:40px;
    background:linear-gradient(to right,rgba(246,241,233,0),#F6F1E9);
    pointer-events:none;
  }
  .compare tbody th{white-space:normal}
}

/* ---------- 15. Guarantee panel (the dark moment) ---------- */
.risk{background:var(--panel);color:var(--cream);padding:clamp(70px,13vw,128px) 0;text-align:center;overflow:hidden}
.risk::before{
  content:"";position:absolute;left:50%;bottom:-260px;transform:translateX(-50%);
  width:min(760px,120vw);height:460px;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(216,183,116,.14),rgba(216,183,116,0) 70%);
}
.risk .hz{margin:0 auto 30px}
.risk .hz .hz-dot{background:var(--gold-soft)}
.risk .eyebrow{color:var(--gold-soft);margin-bottom:26px}
.risk .statement{
  font-family:"DM Serif Display",Georgia,serif;font-weight:500;
  font-size:clamp(1.7rem,5vw,2.6rem);line-height:1.26;letter-spacing:-.01em;
  max-width:24ch;margin:0 auto;color:var(--cream);text-wrap:balance;
}
.risk .statement b{color:var(--gold-soft);font-weight:500;font-style:italic}
.risk .risk-terms{margin:26px auto 0;max-width:54ch;font-size:.82rem;line-height:1.5;color:var(--cream);opacity:.78}
.risk .risk-terms a{color:var(--gold-soft);text-decoration:underline}

/* ---------- 16. Founder ---------- */
.founder-grid{
  margin:clamp(44px,6vw,64px) 0 0;
  display:grid;grid-template-columns:minmax(260px,380px) 1fr;gap:clamp(32px,5vw,72px);
  align-items:start;
}
.portrait{
  position:relative;aspect-ratio:4/5;border-radius:2px;overflow:hidden;
  background:var(--panel);box-shadow:var(--shadow);
}
.portrait img{width:100%;height:100%;object-fit:cover;display:block}
.portrait .portrait-ph{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
}
.founder-copy h2{max-width:18ch}
.founder-copy .copy{margin-top:20px}
.founder-copy .copy + .copy{margin-top:14px}
.founder-copy .cta-row{margin-top:34px}
.founder-links{margin:22px 0 0;display:flex;gap:18px;flex-wrap:wrap}
.founder-links a{
  display:inline-flex;align-items:center;min-height:44px;
  font-size:.92rem;font-weight:700;color:var(--gold-ink);text-decoration:underline;
  text-decoration-color:var(--gold);text-underline-offset:3px;
}
.founder-links a:hover{color:var(--ink);text-decoration-color:var(--ink)}
@media(max-width:820px){
  .founder-grid{grid-template-columns:1fr}
  .portrait{max-width:380px}
}

/* ---------- 17. FAQ accordion (native details/summary) ---------- */
.faq{margin:clamp(40px,5vw,56px) 0 0;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;position:relative;
  padding:clamp(20px,3vw,28px) 52px clamp(20px,3vw,28px) 0;
  font-family:"DM Serif Display",Georgia,serif;font-weight:500;
  font-size:clamp(1.12rem,2.2vw,1.3rem);line-height:1.3;color:var(--ink);
  min-height:44px;
  transition:color .2s var(--ease);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--gold-ink)}
.faq summary::after{
  content:"";position:absolute;right:6px;top:50%;width:14px;height:14px;
  transform:translateY(-50%);
  background:
    linear-gradient(var(--gold),var(--gold)) center/14px 2px no-repeat,
    linear-gradient(var(--gold),var(--gold)) center/2px 14px no-repeat;
  transition:transform .3s var(--ease);
}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq .faq-a{padding:0 0 clamp(22px,3vw,30px);max-width:62ch}
.faq .faq-a p{font-size:1rem;color:var(--ink-soft)}
.faq .faq-a p + p{margin-top:12px}
@media (prefers-reduced-motion:no-preference){
  .faq details[open] .faq-a{animation:faqIn .35s var(--ease) both}
}
@keyframes faqIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ---------- 18. Final CTA ---------- */
.final{padding:clamp(90px,13vw,160px) 0;text-align:center}
.final .hz{margin:0 auto 30px}
.final h2{max-width:20ch;margin:0 auto;text-wrap:balance}
.final .close{margin:22px auto 0;font-size:1.12rem;color:var(--ink-soft);max-width:48ch}
.final .btn-primary{margin-top:36px}
.signoff{
  margin:44px auto 0;font-family:"DM Serif Display",Georgia,serif;font-style:italic;
  font-size:1.12rem;color:var(--ink);
}
.signoff span{display:block;font-style:normal;font-size:.82rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold-ink);margin-top:8px;font-family:"Manrope",sans-serif}

/* ---------- 19. Leak calculator (verbatim system from the live page) ---------- */
.calc .lead{margin-bottom:4px}
.calc-intro{margin:18px 0 0;font-size:1.06rem;color:var(--ink-soft);max-width:42ch}
.calc-grid{margin:42px 0 0;display:flex;flex-direction:column;gap:30px}
.field .flabel{display:block;font-size:1.05rem;color:var(--ink);font-weight:500}
.field .fhint{display:block;margin:12px 2px 0;font-size:.84rem;color:var(--ink-soft);opacity:.85}

.stepper{
  margin-top:14px;display:flex;align-items:center;gap:14px;
  border:1px solid var(--line);border-radius:4px;padding:10px;background:var(--bg);
}
.step-btn{
  width:50px;height:50px;flex:0 0 auto;border-radius:2px;border:1px solid var(--line);
  background:transparent;color:var(--gold-ink);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s ease,border-color .2s ease,color .2s ease,transform .1s ease;
}
.step-btn svg{width:20px;height:20px}
.step-btn:hover{background:var(--gold);color:var(--ink-on-gold);border-color:var(--gold)}
.step-btn:active{transform:scale(.95)}
.numwrap{flex:1 1 auto;display:flex;align-items:baseline;justify-content:center;gap:1px}
.numwrap .pre{
  font-family:"DM Serif Display",Georgia,serif;font-weight:500;font-size:1.7rem;color:var(--gold-ink);
}
.num{
  width:100%;max-width:150px;text-align:center;border:0;background:transparent;outline:none;
  font-family:"DM Serif Display",Georgia,serif;font-weight:500;font-size:2.1rem;color:var(--ink);
  letter-spacing:-.01em;font-variant-numeric:tabular-nums;
  -moz-appearance:textfield;padding:2px 0;
}
.num::-webkit-outer-spin-button,.num::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.num:focus-visible{color:var(--gold-ink);outline:none}

.calc-out{margin:48px 0 0;padding:42px 0 0;border-top:1px solid var(--line);text-align:center}
.calc-out .olabel{
  font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-ink);
}
.calc-num{
  font-weight:600;
  font-size:clamp(3.1rem,15vw,5.4rem);line-height:.95;letter-spacing:-.02em;color:var(--gold-stat);
  margin:14px 0 0;font-variant-numeric:tabular-nums;
}
.calc-year{margin:12px 0 0;font-size:1.12rem;color:var(--ink-soft)}
.calc-year b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.calc-reco{margin:26px auto 0;max-width:34ch;font-size:1.12rem;color:var(--ink)}
.calc-out .btn-primary{margin-top:30px}
.calc-foot{margin:22px auto 0;max-width:46ch;font-size:.82rem;color:var(--ink-soft);opacity:.85}

/* ---------- 20. Footer ---------- */
footer.site-footer{
  padding:clamp(48px,7vw,72px) 0 calc(40px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);text-align:center;
}
.site-footer .foot-mark{
  font-family:"DM Serif Display",Georgia,serif;font-weight:700;font-size:1.3rem;color:var(--ink);
  text-decoration:none;display:inline-flex;align-items:center;min-height:44px;
}
.site-footer .foot-nav{
  margin:18px 0 0;display:flex;flex-wrap:wrap;gap:2px 22px;justify-content:center;
}
.site-footer .foot-nav a{
  display:inline-flex;align-items:center;min-height:44px;
  font-size:.9rem;font-weight:600;color:var(--ink-soft);text-decoration:none;
}
.site-footer .foot-nav a:hover{color:var(--gold-ink)}
.site-footer .foot-nav a[aria-current="page"],.site-footer .foot-links a[aria-current="page"]{color:var(--ink)}
.site-footer .foot-id{margin:22px auto 0;font-size:.8rem;line-height:1.5;color:var(--ink-soft);max-width:54ch}
.site-footer .foot-links{margin:14px 0 0;display:flex;flex-wrap:wrap;gap:2px 18px;justify-content:center}
.site-footer .foot-links a{
  display:inline-flex;align-items:center;min-height:44px;
  font-size:.82rem;color:var(--ink-soft);text-decoration:none;border-bottom:1px solid var(--line);
}
.site-footer .foot-links a:hover{color:var(--gold-ink);border-color:var(--gold)}
.site-footer .foot-copy{margin:12px 0 0;font-size:.76rem;color:var(--ink-soft)}
.site-footer .foot-date{margin:6px 0 0;font-size:.72rem;color:var(--ink-soft);opacity:.7}

/* ---------- 21. Sticky mobile CTA ---------- */
.sticky{
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:rgba(246,241,233,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
  transform:translateY(120%);transition:transform .4s var(--ease);
}
.sticky.show{transform:translateY(0)}
.sticky .btn-primary{display:flex;width:100%;padding:16px 24px;box-shadow:none}
@media(min-width:821px){.sticky{display:none}}

/* ---------- 22. Motion: page-load reveal + scroll reveal ---------- */
/* Orchestrated load reveal: add .load to elements in the hero/header,
   plus .d1 ... .d6 for the stagger. CSS-only, runs once on load. */
@media (prefers-reduced-motion:no-preference){
  .load{opacity:0;transform:translateY(22px);animation:loadIn .9s var(--ease) forwards}
  .load.d1{animation-delay:.08s}
  .load.d2{animation-delay:.22s}
  .load.d3{animation-delay:.36s}
  .load.d4{animation-delay:.5s}
  .load.d5{animation-delay:.64s}
  .load.d6{animation-delay:.78s}
  .load-sun{opacity:0;transform:translateY(46px);animation:sunUp 1.4s var(--ease) .5s forwards}
}
@keyframes loadIn{to{opacity:1;transform:none}}
@keyframes sunUp{to{opacity:1;transform:none}}

/* Scroll reveal: .reveal for single elements, .stagger for groups.
   Driven by the tiny IntersectionObserver snippet (see SPEC.md). */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
.stagger>*{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.stagger.in>*{opacity:1;transform:none}
.stagger.in>*:nth-child(2){transition-delay:.08s}
.stagger.in>*:nth-child(3){transition-delay:.16s}
.stagger.in>*:nth-child(4){transition-delay:.24s}
.stagger.in>*:nth-child(5){transition-delay:.32s}
.stagger.in>*:nth-child(6){transition-delay:.4s}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal,.stagger>*{opacity:1!important;transform:none!important;transition:none!important}
  .load,.load-sun{opacity:1;transform:none;animation:none}
  .btn,.ind-card,.step-btn{transition:none}
}

/* screen-reader-only text */
.visually-hidden{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
  clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;white-space:nowrap;
}

/* no-JS safety: everything visible if the observer never runs */
.no-js .reveal,.no-js .stagger>*{opacity:1;transform:none}

/* ---------- 23. Legal pages (re-skinned chrome; body text untouched) ---------- */
.legal-main{padding:clamp(44px,7vw,84px) 0 clamp(56px,8vw,96px)}
.legal-main h1{font-size:clamp(2rem,6vw,2.9rem);line-height:1.1}
.legal-main h2{font-size:clamp(1.3rem,3.4vw,1.6rem);margin:40px 0 12px}
.legal-main .meta{font-size:.84rem;color:var(--ink-soft);margin:10px 0 0}
.legal-main p,.legal-main li{color:var(--ink-soft)}
.legal-main p strong,.legal-main li strong{color:var(--ink);font-weight:600}
.legal-main ol{margin:0;padding-left:22px}
.legal-main li{margin:10px 0}

/* ---------- 24. Founder monogram placeholder (until a real headshot ships) ---------- */
.portrait-ph .monogram{display:flex;flex-direction:column;align-items:center;gap:18px}
.portrait-ph .mono-txt{
  font-family:"DM Serif Display",Georgia,serif;font-style:italic;font-weight:500;
  font-size:clamp(4.2rem,9vw,5.6rem);line-height:1;color:var(--gold-soft);
}
.portrait-ph .mono-rule{width:72px;height:2px;border-radius:1px;
  background:linear-gradient(90deg,transparent,var(--gold-soft) 20%,var(--gold) 50%,var(--gold-soft) 80%,transparent)}
.portrait-ph .mono-sub{
  font-size:.72rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold-soft);
}

/* ---------- 25. Question-H2 depth stack (about + interior depth sections) ---------- */
.qa-stack{display:flex;flex-direction:column;gap:clamp(52px,8vw,88px);margin-top:clamp(44px,6vw,64px)}
.qa h2{font-size:clamp(1.7rem,3.6vw,2.3rem);max-width:26ch}
.qa .copy{margin-top:18px}
.qa .copy + .copy{margin-top:14px}

/* ---------- 26. Booking page: cal.com inline embed ---------- */
.cal-shell{
  margin:clamp(32px,5vw,52px) auto 0;max-width:1080px;
  background:var(--bg);border:1px solid var(--line);border-radius:2px;
  box-shadow:var(--shadow);padding:clamp(8px,1.5vw,16px);
}
.cal-inline{width:100%;min-height:640px;overflow:auto}
.cal-fallback{margin:20px auto 0;text-align:center;max-width:52ch}
.book-trust{margin:26px auto 0;text-align:center;max-width:56ch}
.book-trust .t1{font-size:.92rem;color:var(--ink-soft)}
.book-trust .t2{margin-top:6px;font-size:.86rem;color:var(--ink-soft);opacity:.85}
@media(max-width:760px){.cal-inline{min-height:600px}}