/* ==========================================================================
   Virtue Family Learning Hub - the design system
   Palette sampled from the family's own flyer. Forest, cream, sage, one gold.
   ========================================================================== */
:root{
  --forest:#203C13;      /* the flyer band - ground for dark sections */
  --moss:#2C481F;        /* footer green */
  --deep:#13240B;        /* deepest shadow */
  --leaf:#4E6B3A;        /* mid green for rules and icons */
  --cream:#FCF5ED;       /* page */
  --paper:#FFFBF5;       /* raised surface */
  --sage:#EEECDD;        /* card wash */
  --sage-2:#E3E3CF;
  --ink:#1D2A15;         /* body text */
  --muted:#5C6852;
  --gold:#E3B93E;        /* the one accent */
  --gold-soft:#F7DB87;   /* the highlighter band */
  --line:rgba(32,60,19,.16);
  --line-dark:rgba(252,245,237,.18);

  --f-display:'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --f-body:'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-mono:'DM Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --f-hand:'Caveat', 'Segoe Print', cursive;

  --wrap:1180px;
  --gutter:clamp(18px, 4vw, 40px);
  --r:4px;
  --nav-h:68px;
}

*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html{ -webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--nav-h) + 12px); scroll-behavior:smooth; }
body{ margin:0; background:var(--cream); color:var(--ink); font-family:var(--f-body);
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img,video{ display:block; max-width:100%; }
a{ color:inherit; }
button{ font:inherit; color:inherit; cursor:pointer; }
h1,h2,h3,h4{ font-family:var(--f-display); font-weight:500; line-height:1.08; margin:0; letter-spacing:-.01em;
  font-variation-settings:'opsz' 96, 'SOFT' 50; }
h1 em,h2 em,h3 em{ font-style:italic; font-weight:400; color:var(--leaf); }
.on-dark h1 em,.on-dark h2 em,.on-dark h3 em{ color:var(--gold-soft); }
p{ margin:0 0 1em; }
.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 var(--gutter); }
.kicker{ font-family:var(--f-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--leaf); }
.on-dark .kicker{ color:var(--gold-soft); }
.hand{ font-family:var(--f-hand); font-size:1.5em; line-height:1.1; color:var(--leaf); }
.on-dark .hand{ color:var(--gold-soft); }
.lede{ font-size:clamp(18px, 2vw, 21px); line-height:1.55; color:var(--muted); max-width:44em; }
.on-dark .lede{ color:rgba(252,245,237,.82); }
.mark{ background:linear-gradient(transparent 58%, var(--gold-soft) 58%); padding:0 .08em; }
.on-dark{ background:var(--forest); color:var(--cream); }
.skip-link{ position:absolute; left:-9999px; }
.skip-link:focus{ left:12px; top:12px; z-index:999; background:var(--paper); padding:8px 12px; }

/* ---------- preview ribbon ---------- */
.ribbon{ background:var(--deep); color:var(--gold-soft); font-family:var(--f-mono); font-size:11px;
  letter-spacing:.06em; text-align:center; padding:7px var(--gutter); line-height:1.4; }
.ribbon .rs{ display:none; }
@media (max-width:760px){ .ribbon{ font-size:10px; padding:6px 12px; } .ribbon .rl{ display:none; } .ribbon .rs{ display:inline; } }

/* ---------- nav ---------- */
.nav{ position:sticky; top:0; z-index:60; background:rgba(252,245,237,.94); backdrop-filter:saturate(1.2) blur(10px);
  -webkit-backdrop-filter:saturate(1.2) blur(10px); border-bottom:1px solid var(--line); }
.nav .wrap{ display:flex; align-items:center; gap:24px; height:var(--nav-h); }
.brand{ display:flex; flex-direction:column; text-decoration:none; line-height:1; margin-right:auto; }
.brand b{ font-family:var(--f-display); font-weight:500; font-size:26px; color:var(--forest); letter-spacing:-.01em; }
.brand b i{ font-style:italic; font-weight:400; font-size:.62em; margin-right:.18em; color:var(--leaf); }
.brand small{ font-family:var(--f-mono); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-top:4px; white-space:nowrap; }
.nav .desk-open{ white-space:nowrap; }
.nav-links{ display:flex; gap:22px; list-style:none; margin:0; padding:0; }
.nav-links a{ text-decoration:none; font-size:15px; color:var(--ink); padding:6px 0; border-bottom:1.5px solid transparent; }
.nav-links a:hover,.nav-links a[aria-current="page"]{ border-color:var(--gold); }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1.5px solid var(--forest);
  background:var(--forest); color:var(--cream); text-decoration:none; font-weight:600; font-size:15px;
  padding:12px 20px; border-radius:var(--r); line-height:1.2; transition:background .2s, color .2s, border-color .2s; }
.btn:hover{ background:var(--deep); border-color:var(--deep); }
.btn.ghost{ background:transparent; color:var(--forest); }
.btn.ghost:hover{ background:var(--forest); color:var(--cream); }
.on-dark .btn{ background:var(--gold-soft); border-color:var(--gold-soft); color:var(--deep); }
.on-dark .btn:hover{ background:var(--cream); border-color:var(--cream); }
.on-dark .btn.ghost{ background:transparent; color:var(--cream); border-color:var(--line-dark); }
.on-dark .btn.ghost:hover{ border-color:var(--cream); }
.btn.sm{ padding:9px 14px; font-size:14px; }
.menu-btn{ display:none; background:none; border:1.5px solid var(--line); border-radius:var(--r); width:44px; height:40px; }
.menu-btn span{ display:block; width:18px; height:1.5px; background:var(--forest); margin:4px auto; }
@media (max-width:1020px){
  .nav-links{ display:none; }
  .menu-btn{ display:block; }
  .nav .btn.desk-open{ padding:9px 12px; font-size:14px; }
  .nav.open .nav-links{ display:flex; flex-direction:column; gap:0; position:absolute; top:var(--nav-h); left:0; right:0;
    background:var(--cream); border-bottom:1px solid var(--line); padding:8px var(--gutter) 18px; }
  .nav.open .nav-links a{ display:block; padding:13px 0; border-bottom:1px solid var(--line); font-size:17px; }
}
@media (max-width:420px){ .brand b{ font-size:22px; } .brand small{ font-size:8px; letter-spacing:.12em; } .nav .wrap{ gap:8px; }
  .nav .btn.desk-open{ padding:9px 11px; font-size:13.5px; } .menu-btn{ width:40px; } }

/* ---------- still + gradient fallback ---------- */
.still{ position:relative; overflow:hidden; background:radial-gradient(110% 90% at 30% 30%, #3c5a2a 0%, #203C13 55%, #13240B 100%); }
.still.light{ background:radial-gradient(110% 90% at 40% 30%, #f7eedd 0%, #e9e4cc 60%, #d9d7bb 100%); }
.still img,.still video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.still video{ opacity:0; transition:opacity .8s; }
.still video.playing{ opacity:1; }

/* ---------- the hero, on a timer ---------- */
.sh{ position:relative; height:100vh; height:100svh; overflow:hidden; background:var(--deep); }
.sh-stage{ position:relative; height:100%; overflow:hidden; }
.sh-layer{ position:absolute; inset:0; opacity:0; transition:opacity 1s ease; }
.sh-layer.on{ opacity:1; }
.sh-layer .still{ position:absolute; inset:0; transform:scale(1.07); transform-origin:50% 50%; }
.sh-layer.on .still{ animation:shpush 6.4s ease-out forwards; }
.sh.paused .sh-layer.on .still{ animation-play-state:paused; }
@keyframes shpush{ from{ transform:scale(1.07); } to{ transform:scale(1); } }
@keyframes shfill{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
.sh-shade{ position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, rgba(19,36,11,.82) 0%, rgba(19,36,11,.55) 38%, rgba(19,36,11,.08) 75%),
             linear-gradient(0deg, rgba(19,36,11,.7) 0%, rgba(19,36,11,0) 40%); }
.sh-copy{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end;
  padding:0 var(--gutter) clamp(28px, 7vh, 72px); max-width:var(--wrap); margin:0 auto; color:var(--cream); }
.sh-beats{ display:grid; align-items:end; margin-bottom:clamp(22px, 4vh, 40px); }
.sh-beat{ grid-area:1 / 1; max-width:680px;
  opacity:0; transform:translateY(18px); transition:opacity .7s, transform .7s; pointer-events:none; }
.sh-beat.on{ opacity:1; transform:none; pointer-events:auto; }
.sh-beat h1,.sh-beat h2{ font-size:clamp(40px, 6.4vw, 84px); color:var(--cream); }
.sh-beat h1 em,.sh-beat h2 em{ color:var(--gold-soft); }
.sh-beat p{ font-size:clamp(17px, 1.8vw, 20px); color:rgba(252,245,237,.86); max-width:32em; margin-top:18px; }
.sh-beat .kicker{ color:var(--gold-soft); margin-bottom:16px; display:block; }
.sh-foot{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; position:relative; z-index:2; }
.sh-foot .sh-text{ color:var(--cream); border-color:var(--line-dark); }
.sh-foot .sh-text:hover{ border-color:var(--cream); background:transparent; }
.sh-rail{ display:flex; gap:8px; margin-left:auto; }
.sh-rail button{ width:40px; height:3px; border:0; padding:0; background:rgba(252,245,237,.3); border-radius:2px;
  position:relative; overflow:hidden; }
.sh-rail button::after{ content:''; position:absolute; inset:-12px 0; }
.sh-fill{ position:absolute; inset:0; background:var(--gold-soft); transform:scaleX(0); transform-origin:0 50%; }
.sh-rail button.on{ background:rgba(252,245,237,.42); }
.sh-status{ position:absolute; top:clamp(16px, 4vh, 32px); left:var(--gutter); z-index:3; }
@media (max-width:760px){
  .sh-shade{ background:linear-gradient(0deg, rgba(19,36,11,.94) 0%, rgba(19,36,11,.72) 42%, rgba(19,36,11,.1) 78%); }
  .sh-copy{ padding-bottom:calc(18px + env(safe-area-inset-bottom)); }
  .sh-beats{ margin-bottom:20px; }
  .sh-beat h1,.sh-beat h2{ font-size:clamp(34px, 10.4vw, 46px); line-height:1.04; }
  .sh-beat p{ font-size:16px; line-height:1.5; margin-top:12px; }
  .sh-beat .kicker{ font-size:10.5px; margin-bottom:10px; }
  .sh-foot{ gap:10px 10px; }
  .sh-foot .btn{ padding:13px 8px; font-size:15px; white-space:nowrap; }
  .sh-foot .btn[data-desk]{ flex:1 1 62%; }
  .sh-foot .sh-text{ flex:1 1 26%; }
  .sh-rail{ margin-left:0; flex:1 1 100%; order:3; }
  .sh-rail button{ flex:1; }
}
@media (max-width:760px) and (max-height:700px){
  .sh-beat p{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .sh-layer.on .still,.sh-fill{ animation:none !important; transform:none; }
  .sh-fill{ display:none; }
}

/* ---------- status chip ---------- */
.status{ display:inline-flex; align-items:center; gap:9px; font-family:var(--f-mono); font-size:11.5px; letter-spacing:.06em;
  background:rgba(19,36,11,.62); color:var(--cream); border:1px solid var(--line-dark); padding:7px 12px; border-radius:40px;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.status i{ width:8px; height:8px; border-radius:50%; background:#9aa38f; flex:none; }
.status.open i{ background:#7fd36b; box-shadow:0 0 0 4px rgba(127,211,107,.22); }
.status.soon i{ background:var(--gold); }
.status.light{ background:var(--paper); color:var(--ink); border-color:var(--line); backdrop-filter:none; }

/* ---------- sections ---------- */
.sec{ padding:clamp(64px, 10vw, 128px) 0; }
.sec.tight{ padding:clamp(48px, 7vw, 88px) 0; }
.sec.sage{ background:var(--sage); }
.sec-head{ max-width:760px; margin-bottom:clamp(32px, 5vw, 56px); }
.sec-head h2{ font-size:clamp(34px, 4.6vw, 58px); margin:14px 0 18px; }
.rule{ height:1px; background:var(--line); border:0; margin:0; }
.on-dark .rule{ background:var(--line-dark); }

/* ---------- page hero (inner pages) ---------- */
.ph{ position:relative; min-height:min(76vh, 720px); display:flex; align-items:flex-end; color:var(--cream); overflow:hidden; }
.ph .still{ position:absolute; inset:0; }
.ph .sh-shade{ z-index:1; }
.ph .wrap{ position:relative; z-index:2; width:100%; padding-bottom:clamp(40px, 8vh, 80px); padding-top:120px; }
.ph h1{ font-size:clamp(40px, 6vw, 76px); max-width:14em; color:var(--cream); margin:16px 0 18px; }
.ph h1 em{ color:var(--gold-soft); }
.ph .lede{ color:rgba(252,245,237,.86); }
.ph .kicker{ color:var(--gold-soft); }
.ph .crumbs{ font-family:var(--f-mono); font-size:11.5px; letter-spacing:.08em; color:rgba(252,245,237,.7); }
.ph .crumbs a{ text-decoration:none; } .ph .crumbs a:hover{ color:var(--cream); }
.ph-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:26px; }

/* ---------- three doors ---------- */
.doors{ display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(14px, 2vw, 24px); }
.door{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; display:flex; flex-direction:column;
  text-decoration:none; transition:border-color .25s, transform .25s; }
.door:hover{ border-color:var(--leaf); transform:translateY(-3px); }
.door .still{ aspect-ratio:4/3; }
.door-body{ padding:22px 22px 24px; display:flex; flex-direction:column; flex:1; }
.door h3{ font-size:28px; margin:10px 0 10px; }
.door p{ color:var(--muted); font-size:15.5px; flex:1; }
.door .go{ font-family:var(--f-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--forest); margin-top:12px; }
.door .tag{ align-self:flex-start; }
.tag{ display:inline-block; font-family:var(--f-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  padding:4px 9px; border-radius:40px; background:var(--sage); color:var(--forest); }
.tag.live{ background:var(--forest); color:var(--gold-soft); }
.tag.soon{ background:var(--gold-soft); color:var(--deep); }
@media (max-width:900px){ .doors{ grid-template-columns:1fr; } .door{ flex-direction:row; } .door .still{ aspect-ratio:auto; width:38%; min-height:180px; flex:none; } }
@media (max-width:560px){ .door{ flex-direction:column; } .door .still{ width:100%; aspect-ratio:16/9; min-height:0; } }

/* ---------- promise band ---------- */
.promise{ text-align:center; max-width:880px; margin:0 auto; }
.promise .heart{ width:44px; height:44px; margin:0 auto 18px; color:var(--gold-soft); }
.promise p.big{ font-family:var(--f-display); font-size:clamp(24px, 3.2vw, 38px); line-height:1.3; font-weight:400; font-style:italic; }
.promise .sign{ font-family:var(--f-hand); font-size:26px; color:var(--gold-soft); margin-top:12px; }

/* ---------- chapters ---------- */
.ch{ display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(28px, 5vw, 72px); align-items:center; }
.ch.flip .ch-media{ order:2; }
.ch-media{ position:relative; }
.ch-media .still{ aspect-ratio:4/5; border-radius:var(--r); }
.ch-num{ font-family:var(--f-display); font-style:italic; font-size:clamp(52px, 7vw, 92px); line-height:1; color:var(--gold); font-weight:300; }
.ch h2{ font-size:clamp(32px, 4vw, 50px); margin:12px 0 22px; }
.ch-body p{ color:var(--muted); }
.on-dark .ch-body p{ color:rgba(252,245,237,.8); }
.pull{ border-left:2px solid var(--gold); padding:4px 0 4px 20px; margin:26px 0 0; font-family:var(--f-display); font-style:italic;
  font-size:clamp(20px, 2.2vw, 25px); line-height:1.35; color:var(--forest); }
.on-dark .pull{ color:var(--gold-soft); }
.pull cite{ display:block; font-style:normal; font-family:var(--f-mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-top:10px; }
.on-dark .pull cite{ color:rgba(252,245,237,.6); }
@media (max-width:860px){ .ch{ grid-template-columns:1fr; } .ch.flip .ch-media{ order:0; } .ch-media .still{ aspect-ratio:4/3; } }

/* ---------- timeline widget ---------- */
.day{ list-style:none; margin:26px 0 0; padding:0; border-top:1px solid var(--line); }
.on-dark .day{ border-color:var(--line-dark); }
.day li{ display:grid; grid-template-columns:22px 1fr; gap:14px; padding:12px 0; border-bottom:1px solid var(--line); font-size:15.5px; }
.on-dark .day li{ border-color:var(--line-dark); }
.day li::before{ content:''; width:9px; height:9px; border-radius:50%; border:1.5px solid var(--leaf); margin-top:7px; }
.on-dark .day li::before{ border-color:var(--gold-soft); }

/* ---------- pillars ---------- */
.pillars{ display:grid; grid-template-columns:repeat(5, 1fr); gap:0; border-top:1px solid var(--line); }
.pillar{ padding:26px 20px 8px 0; border-right:1px solid var(--line); margin-right:20px; }
.pillar:last-child{ border-right:0; margin-right:0; }
.pillar svg{ width:34px; height:34px; color:var(--forest); margin-bottom:14px; }
.pillar h3{ font-size:21px; margin-bottom:8px; }
.pillar p{ font-size:14.5px; color:var(--muted); }
@media (max-width:980px){ .pillars{ grid-template-columns:1fr 1fr; } .pillar{ border-right:0; margin-right:0; border-bottom:1px solid var(--line); padding-right:12px; } }
@media (max-width:520px){ .pillars{ grid-template-columns:1fr; } }

/* ---------- tuition ---------- */
.tuition{ display:grid; grid-template-columns:repeat(3, 1fr) 1.15fr; gap:0; background:var(--paper); border:1px solid var(--line); border-radius:var(--r); }
.tu{ padding:28px 24px; border-right:1px solid var(--line); display:flex; flex-direction:column; }
.tu:last-child{ border-right:0; background:var(--sage); }
.tu .kicker{ font-size:11px; }
.tu h3{ font-size:24px; margin:10px 0 4px; }
.tu .t{ font-family:var(--f-mono); font-size:12.5px; color:var(--muted); }
.tu .price{ font-family:var(--f-display); font-size:48px; line-height:1; margin:22px 0 4px; color:var(--forest); font-variation-settings:'opsz' 144; }
.tu .per{ font-size:13.5px; color:var(--muted); }
.tu.best{ position:relative; }
.tu.best .tag{ position:absolute; top:-11px; left:24px; }
.tu ul{ list-style:none; padding:0; margin:14px 0 0; font-size:14.5px; }
.tu ul li{ display:flex; justify-content:space-between; gap:10px; padding:7px 0; border-bottom:1px dashed var(--line); }
.tu ul li b{ font-family:var(--f-mono); font-weight:500; }
.tu .fine{ font-size:12.5px; color:var(--muted); margin-top:auto; padding-top:14px; }
@media (max-width:980px){ .tuition{ grid-template-columns:1fr 1fr; } .tu:nth-child(2){ border-right:0; } .tu:nth-child(-n+2){ border-bottom:1px solid var(--line); } }
@media (max-width:560px){ .tuition{ grid-template-columns:1fr; } .tu{ border-right:0; border-bottom:1px solid var(--line); } }

/* ---------- calculator (the Rule) ---------- */
.calc{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:clamp(22px, 3vw, 34px); display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:center; }
.calc .opts{ display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }
.chip{ border:1.5px solid var(--line); background:var(--cream); border-radius:40px; padding:10px 16px; font-size:15px; line-height:1.2; transition:all .2s; text-align:left; }
.chip small{ display:block; font-family:var(--f-mono); font-size:11px; color:var(--muted); margin-top:3px; }
.chip[aria-pressed="true"]{ background:var(--forest); border-color:var(--forest); color:var(--cream); }
.chip[aria-pressed="true"] small{ color:var(--gold-soft); }
.calc-out{ border-left:1px solid var(--line); padding-left:28px; }
.calc-out .price{ font-family:var(--f-display); font-size:clamp(46px, 6vw, 64px); line-height:1; color:var(--forest); }
.calc-out .note{ font-size:14.5px; color:var(--muted); margin-top:10px; min-height:2.8em; }
.calc-out .note b{ color:var(--forest); }
.save{ display:inline-block; background:var(--gold-soft); color:var(--deep); font-family:var(--f-mono); font-size:12px; padding:4px 9px; border-radius:40px; margin-top:10px; }
/* family calculator steppers and line items */
.calc .steps{ display:grid; gap:10px; margin-top:18px; }
.calc .step{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:10px 0; border-bottom:1px solid var(--line); }
.calc .step .sl b{ display:block; font-weight:600; color:var(--forest); }
.calc .step .sl small{ display:block; color:var(--muted); font-size:13.5px; }
.calc .step .sc{ display:flex; align-items:center; gap:10px; flex:none; }
.calc .step .sc .chip{ width:40px; height:40px; padding:0; text-align:center; font-size:20px; line-height:1; }
.calc .step output{ min-width:1.4em; text-align:center; font-family:var(--f-display); font-size:24px; color:var(--forest); }
.calc-lines{ list-style:none; margin:14px 0 0; padding:0; font-size:14.5px; }
.calc-lines li{ display:flex; justify-content:space-between; gap:12px; padding:6px 0; border-bottom:1px dashed var(--line); color:var(--ink); }
.calc-lines li b{ color:var(--forest); white-space:nowrap; }
.sib{ margin-top:22px; background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:clamp(22px, 3vw, 34px); }
.sib h3{ font-size:26px; margin:0 0 12px; }
.sib h4{ font-family:var(--f-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:22px 0 8px; font-weight:500; }
.sib ol,.sib ul{ margin:0; padding-left:20px; display:grid; gap:8px; font-size:15.5px; }
.sib b{ color:var(--forest); }
@media (max-width:760px){ .calc{ grid-template-columns:1fr; } .calc-out{ border-left:0; border-top:1px solid var(--line); padding:22px 0 0; } }

/* ---------- school checker ---------- */
.schools{ display:grid; grid-template-columns:repeat(2, 1fr); gap:12px; }
.school{ display:flex; align-items:center; gap:14px; background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:16px 18px; text-decoration:none; }
.school:hover{ border-color:var(--leaf); }
.school svg{ width:26px; height:26px; flex:none; color:var(--forest); }
.school b{ font-weight:600; display:block; }
.school small{ color:var(--muted); font-size:13px; }
@media (max-width:640px){ .schools{ grid-template-columns:1fr; } }

/* ---------- founders ---------- */
.founders{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(28px, 5vw, 72px); align-items:center; }
.portrait{ aspect-ratio:4/5; border-radius:var(--r); background:var(--sage); border:1px solid var(--line); display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; padding:24px; position:relative; overflow:hidden; }
.portrait .mono{ font-family:var(--f-display); font-style:italic; font-size:88px; color:var(--forest); line-height:1; }
.portrait small{ font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-top:12px; }
.creds{ display:grid; grid-template-columns:1fr 1fr; gap:0; margin-top:24px; border-top:1px solid var(--line); }
.cred{ padding:18px 16px 18px 0; border-bottom:1px solid var(--line); }
.cred b{ display:block; font-family:var(--f-display); font-size:30px; font-weight:500; color:var(--forest); line-height:1.1; }
.cred span{ font-size:14px; color:var(--muted); }
@media (max-width:860px){ .founders{ grid-template-columns:1fr; } .portrait{ aspect-ratio:16/10; } }

/* ---------- cards ---------- */
.cards{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:14px; }
.card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:24px; }
.card h3{ font-size:22px; margin:0 0 10px; }
.card p{ font-size:15px; color:var(--muted); margin:0; }
.card .n{ font-family:var(--f-mono); font-size:12px; color:var(--leaf); letter-spacing:.1em; }
.on-dark .card{ background:rgba(252,245,237,.05); border-color:var(--line-dark); }
.on-dark .card p{ color:rgba(252,245,237,.75); }
.on-dark .card .n{ color:var(--gold-soft); }

/* ---------- waitlist meter ---------- */
.meter{ margin-top:22px; }
.meter .bar{ display:flex; gap:6px; }
.meter .bar i{ flex:1; height:10px; border-radius:2px; background:rgba(252,245,237,.14); }
.meter .bar i.on{ background:var(--gold-soft); }
.meter small{ display:block; margin-top:10px; font-family:var(--f-mono); font-size:12px; color:rgba(252,245,237,.7); }

/* ---------- contact block ---------- */
.contact{ display:grid; grid-template-columns:repeat(3, 1fr); gap:0; border-top:1px solid var(--line-dark); }
.contact a,.contact div.c{ padding:26px 20px 26px 0; text-decoration:none; border-bottom:1px solid var(--line-dark); }
.contact .kicker{ display:block; margin-bottom:8px; }
.contact b{ font-family:var(--f-display); font-weight:400; font-size:clamp(22px, 2.4vw, 30px); word-break:break-word; }
.contact a:hover b{ color:var(--gold-soft); }
@media (max-width:760px){ .contact{ grid-template-columns:1fr; } }

/* ---------- ledger strip ---------- */
.strip{ display:flex; flex-wrap:wrap; gap:10px; }
.strip a{ text-decoration:none; border:1px solid var(--line); background:var(--paper); padding:10px 14px; border-radius:40px; font-size:14.5px; }
.strip a:hover{ border-color:var(--leaf); }
.on-dark .strip a{ background:transparent; border-color:var(--line-dark); }

/* ---------- film ---------- */
.film-cta{ display:flex; align-items:center; gap:14px; }
.play{ width:54px; height:54px; border-radius:50%; border:1.5px solid currentColor; display:flex; align-items:center; justify-content:center; background:none; flex:none; }
.play svg{ width:18px; height:18px; margin-left:3px; }
.film{ position:fixed; inset:0; z-index:200; background:rgba(8,14,5,.96); display:flex; flex-direction:column; }
.film video{ flex:1; width:100%; height:100%; object-fit:contain; background:#000; min-height:0; }
.film-bar{ display:flex; align-items:center; gap:14px; padding:14px var(--gutter); color:var(--cream); }
.film-bar .cap{ font-family:var(--f-mono); font-size:12px; letter-spacing:.08em; margin-right:auto; }
.film-dots{ display:flex; gap:6px; }
.film-dots button{ width:26px; height:3px; border:0; padding:0; background:rgba(252,245,237,.3); }
.film-dots button.on{ background:var(--gold-soft); }
.film-x{ background:none; border:1px solid var(--line-dark); color:var(--cream); border-radius:var(--r); padding:8px 12px; font-family:var(--f-mono); font-size:12px; }

/* ---------- footer ---------- */
.foot{ background:var(--moss); color:var(--cream); padding:clamp(56px, 8vw, 96px) 0 28px; }
.foot-top{ display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:36px; }
.foot .brand b{ color:var(--cream); font-size:34px; }
.foot .brand b i{ color:var(--gold-soft); }
.foot .brand small{ color:rgba(252,245,237,.6); }
.foot p{ color:rgba(252,245,237,.75); font-size:15px; }
.foot h4{ font-family:var(--f-mono); font-weight:400; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-soft); margin-bottom:14px; }
.foot ul{ list-style:none; margin:0; padding:0; }
.foot li{ margin:0 0 8px; }
.foot a{ text-decoration:none; color:rgba(252,245,237,.86); }
.foot a:hover{ color:var(--cream); text-decoration:underline; }
.foot-base{ margin-top:48px; padding-top:20px; border-top:1px solid var(--line-dark); display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap;
  font-family:var(--f-mono); font-size:11.5px; color:rgba(252,245,237,.55); }
@media (max-width:860px){ .foot-top{ grid-template-columns:1fr 1fr; } .foot-top > :first-child{ grid-column:1/-1; } }

/* ---------- sticky contact bar (phones) ---------- */
.dock{ position:fixed; left:12px; right:12px; bottom:12px; z-index:70; display:none; gap:8px; transform:translateY(140%); transition:transform .35s; }
.dock.show{ transform:none; }
.dock a,.dock button{ flex:1; display:flex; align-items:center; justify-content:center; gap:7px; padding:13px 8px; border-radius:var(--r);
  font-size:14.5px; font-weight:600; text-decoration:none; border:0; background:var(--paper); color:var(--forest); box-shadow:0 0 0 1px var(--line); }
.dock .primary{ background:var(--forest); color:var(--cream); box-shadow:none; flex:1.4; }
.dock svg{ width:17px; height:17px; }
@media (max-width:760px){ .dock{ display:flex; } body{ padding-bottom:0; } .foot{ padding-bottom:96px; } }

/* ---------- the desk ---------- */
.desk{ position:fixed; inset:0; z-index:150; display:flex; align-items:center; justify-content:center; padding:16px; }
.desk-bg{ position:absolute; inset:0; background:rgba(19,36,11,.62); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }
.desk-card{ position:relative; background:var(--cream); width:min(720px, 100%); max-height:calc(100svh - 32px); border-radius:6px; display:flex; flex-direction:column; overflow:hidden; }
.desk-head{ padding:20px 24px 16px; border-bottom:1px solid var(--line); display:flex; align-items:flex-start; gap:14px; }
.desk-head h2{ font-size:28px; }
.desk-head .kicker{ display:block; margin-bottom:6px; }
.desk-x{ margin-left:auto; background:none; border:1px solid var(--line); border-radius:var(--r); width:40px; height:40px; font-size:20px; line-height:1; flex:none; }
.desk-steps{ display:flex; gap:6px; padding:0 24px; margin-top:14px; }
.desk-steps i{ flex:1; height:3px; background:var(--sage-2); border-radius:2px; }
.desk-steps i.on{ background:var(--forest); }
.desk-body{ padding:22px 24px; overflow-y:auto; -webkit-overflow-scrolling:touch; flex:1; }
.desk-body h3{ font-size:22px; margin:0 0 6px; }
.desk-body .hint{ font-size:14.5px; color:var(--muted); margin:0 0 16px; }
.desk-body label.f{ display:block; font-family:var(--f-mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin:18px 0 8px; }
.desk-body input[type=text],.desk-body input[type=tel],.desk-body input[type=email],.desk-body select,.desk-body textarea{
  width:100%; font:inherit; font-size:16px; padding:12px 14px; border:1.5px solid var(--line); border-radius:var(--r); background:var(--paper); color:var(--ink); }
.desk-body textarea{ min-height:84px; resize:vertical; }
.desk-body input:focus,.desk-body select:focus,.desk-body textarea:focus{ outline:none; border-color:var(--leaf); }
.svc-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.svc{ text-align:left; border:1.5px solid var(--line); background:var(--paper); border-radius:var(--r); padding:16px; }
.svc b{ display:block; font-size:16px; } .svc small{ color:var(--muted); font-size:13.5px; }
.svc[aria-pressed="true"]{ border-color:var(--forest); background:var(--forest); color:var(--cream); }
.svc[aria-pressed="true"] small{ color:var(--gold-soft); }
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chips .chip{ padding:9px 14px; font-size:14.5px; }
.rule-box{ margin-top:16px; background:var(--sage); border-left:3px solid var(--gold); padding:14px 16px; border-radius:0 var(--r) var(--r) 0; font-size:15px; }
.rule-box b{ color:var(--forest); }
.summary{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:16px 18px; font-size:15px; white-space:pre-line; font-family:var(--f-body); }
.ref{ font-family:var(--f-mono); font-size:13px; color:var(--forest); background:var(--gold-soft); padding:3px 8px; border-radius:3px; }
.routes{ display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin-top:16px; }
.routes a{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:14px 8px; border:1.5px solid var(--forest); border-radius:var(--r);
  text-decoration:none; font-weight:600; font-size:15px; text-align:center; }
.routes a.primary{ background:var(--forest); color:var(--cream); }
.routes svg{ width:20px; height:20px; }
.desk-foot{ padding:14px 24px; border-top:1px solid var(--line); display:flex; gap:10px; align-items:center; background:var(--paper); }
.desk-foot .btn{ min-width:120px; }
.desk-foot .back{ background:none; border:0; color:var(--muted); text-decoration:underline; padding:10px 4px; }
.desk-foot .grow{ flex:1; }
@media (max-width:560px){
  .desk{ padding:0; align-items:flex-end; }
  .desk-card{ max-height:94svh; border-radius:10px 10px 0 0; }
  .svc-grid{ grid-template-columns:1fr; }
  .routes{ grid-template-columns:1fr; }
  .routes a{ flex-direction:row; justify-content:center; }
  .desk-head,.desk-body,.desk-foot{ padding-left:18px; padding-right:18px; }
  .desk-steps{ padding:0 18px; }
}

/* ---------- admin ---------- */
.adm{ padding:40px 0 80px; }
.adm-top{ display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap; margin-bottom:28px; }
.adm-top h1{ font-size:clamp(34px, 4vw, 48px); }
.kpis{ display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; margin-bottom:28px; }
.kpi{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:18px; }
.kpi b{ display:block; font-family:var(--f-display); font-size:40px; font-weight:500; color:var(--forest); line-height:1.05; }
.kpi span{ font-size:13.5px; color:var(--muted); }
.kpi.dark{ background:var(--forest); color:var(--cream); border-color:var(--forest); }
.kpi.dark b{ color:var(--gold-soft); } .kpi.dark span{ color:rgba(252,245,237,.75); }
.lanes{ display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; align-items:start; }
.lane{ background:var(--sage); border-radius:var(--r); padding:12px; }
.lane h3{ font-family:var(--f-mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; font-weight:400; color:var(--forest); margin:4px 4px 12px; display:flex; justify-content:space-between; }
.row{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:12px 13px; margin-bottom:8px; font-size:14px; }
.row .r1{ display:flex; justify-content:space-between; gap:8px; }
.row b{ font-size:15px; }
.row .d{ color:var(--muted); margin-top:4px; }
.row .m{ font-family:var(--f-mono); font-size:11px; color:var(--muted); margin-top:8px; display:flex; justify-content:space-between; }
.st{ font-family:var(--f-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; padding:3px 7px; border-radius:30px; background:var(--sage); color:var(--forest); height:fit-content; }
.st.new{ background:var(--gold-soft); color:var(--deep); }
.st.waitlist{ background:var(--forest); color:var(--gold-soft); }
@media (max-width:980px){ .kpis{ grid-template-columns:1fr 1fr; } .lanes{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .lanes{ grid-template-columns:1fr; } }

/* ---------- motion ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .9s ease, transform .9s ease; }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .sh-layer,.sh-beat,.still video{ transition:none; }
}

/* ---------- the reel ---------- */
.reel{ position:relative; min-height:min(88vh, 820px); display:flex; align-items:flex-end; color:var(--cream); overflow:hidden; }
.reel .still{ position:absolute; inset:0; }
.reel-shade{ position:absolute; inset:0; background:linear-gradient(0deg, rgba(19,36,11,.88) 0%, rgba(19,36,11,.35) 45%, rgba(19,36,11,.05) 80%); }
.reel-copy{ position:relative; z-index:2; width:100%; padding-top:120px; padding-bottom:clamp(40px, 8vh, 88px); }
.reel h2{ font-size:clamp(40px, 6vw, 80px); color:var(--cream); margin:14px 0 16px; max-width:12em; }
.reel h2 em{ color:var(--gold-soft); }
.reel .kicker{ color:var(--gold-soft); }
.reel .lede{ color:rgba(252,245,237,.86); max-width:34em; }
.reel .film-cta{ background:none; border:0; padding:0; margin-top:24px; color:var(--cream); }
.reel .film-cta .kicker{ color:var(--cream); }
.reel .play{ width:64px; height:64px; background:rgba(252,245,237,.1); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.door .still video,.ch-media .still video{ transform:scale(1.001); }
@media (max-width:360px){
  .sh-foot .sh-text{ display:none; }
  .sh-foot .btn[data-desk]{ flex:1 1 100%; }
  .sh-beat h1,.sh-beat h2{ font-size:32px; }
  .nav .btn.desk-open{ padding:8px 9px; font-size:12.5px; }
  .brand b{ font-size:20px; } .brand small{ font-size:7px; }
}

/* ---------- Powered by HigherMindAI ---------- */
.hm-credit-row{ margin:18px 0 0; text-align:center; width:100%; }
.hm-credit{ display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  font-family:var(--f-body); font-size:12.5px; letter-spacing:.02em; line-height:1;
  padding:9px 16px 9px 13px; border-radius:40px;
  border:1px solid rgba(63,224,181,.28); background:rgba(11,26,58,.42);
  color:rgba(252,245,237,.72); transition:border-color .3s, background .3s, color .3s, box-shadow .3s; }
.hm-credit:hover{ border-color:rgba(63,224,181,.7); background:rgba(11,26,58,.72); color:#FCF5ED;
  box-shadow:0 0 0 1px rgba(63,224,181,.18), 0 6px 26px -8px rgba(63,224,181,.5); text-decoration:none; }
.hm-credit .hm-dot{ width:6px; height:6px; border-radius:50%; background:#3FE0B5; flex:none;
  box-shadow:0 0 0 0 rgba(63,224,181,.6); animation:hmbreathe 3.4s ease-in-out infinite; }
@keyframes hmbreathe{
  0%,100%{ box-shadow:0 0 0 0 rgba(63,224,181,.55); opacity:.85; }
  50%{ box-shadow:0 0 0 5px rgba(63,224,181,0); opacity:1; }
}
.hm-credit .hm-pre{ opacity:.75; }
.hm-credit .hm-mark{ font-weight:600; letter-spacing:-.01em; color:#FCF5ED; }
.hm-credit .hm-ai{ background:linear-gradient(100deg,#3FE0B5 0%,#0D9488 45%,#3FE0B5 100%);
  background-size:220% 100%; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:hmliquid 6s linear infinite; }
@keyframes hmliquid{ from{ background-position:0% 50%; } to{ background-position:220% 50%; } }
.hm-credit.on-light{ border-color:rgba(13,148,136,.3); background:rgba(252,245,237,.6); color:#3d4a37; }
.hm-credit.on-light:hover{ border-color:rgba(13,148,136,.65); background:#fff; color:#0B1A3A; }
.hm-credit.on-light .hm-mark{ color:#0B1A3A; }
@media (prefers-reduced-motion:reduce){
  .hm-credit .hm-dot,.hm-credit .hm-ai{ animation:none; }
  .hm-credit .hm-ai{ color:#3FE0B5; -webkit-text-fill-color:#3FE0B5; }
}

/* ---------- revision round, 11 Oct 2026 ---------- */
/* Our promise - three quotations, the family's own words */
.pqs{ display:grid; gap:22px; margin-top:26px; text-align:left; }
.pq{ margin:0; padding:20px 0 20px 22px; border-left:2px solid var(--gold-soft); }
.pq p{ margin:0; font-family:var(--f-display); font-style:italic; font-size:clamp(19px, 2.1vw, 24px); line-height:1.45; }
.pq cite{ display:block; margin-top:10px; font-style:normal; font-family:var(--f-mono); font-size:12.5px; letter-spacing:.06em; color:var(--gold-soft); }
.pq cite i{ font-style:italic; font-family:var(--f-body); letter-spacing:0; }
/* the price note */
.price-note{ margin:26px 0 0; padding:18px 20px; background:var(--paper); border:1px solid var(--line); border-left:3px solid var(--gold); border-radius:var(--r); font-size:15px; line-height:1.6; color:var(--ink); max-width:62em; }
/* About - our why, six questions, the Virtue promise */
.why{ max-width:46em; }
.why p{ font-size:17px; line-height:1.7; margin:0 0 16px; }
.why p:first-of-type{ font-family:var(--f-display); font-size:clamp(22px, 2.6vw, 30px); line-height:1.3; }
.six{ list-style:none; counter-reset:six; padding:0; margin:8px 0 0; display:grid; grid-template-columns:repeat(3, 1fr); gap:0; border-top:1px solid var(--line); }
.six li{ counter-increment:six; padding:22px 18px 22px 0; border-bottom:1px solid var(--line); font-family:var(--f-display); font-size:clamp(19px, 2vw, 23px); line-height:1.3; }
.six li::before{ content:counter(six); display:block; font-family:var(--f-mono); font-size:12px; color:var(--leaf); letter-spacing:.1em; margin-bottom:8px; }
.six-end{ margin:20px 0 0; font-family:var(--f-hand); font-size:28px; color:var(--forest); }
@media (max-width:760px){ .six{ grid-template-columns:1fr 1fr; } }
@media (max-width:460px){ .six{ grid-template-columns:1fr; } }
.vpromise{ max-width:52em; }
.vpromise .big{ font-family:var(--f-display); font-size:clamp(22px, 2.8vw, 32px); line-height:1.35; margin:14px 0 0; }
.vpromise .terms{ margin:16px 0 0; font-size:16px; color:var(--muted); }
.vpromise .notice{ margin:10px 0 0; font-size:18px; line-height:1.6; }

/* ---------- In families' own words (About) ---------- */
.words{ display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:clamp(18px, 2.4vw, 28px); }
.word{ margin:0; background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:clamp(22px, 3vw, 32px); display:flex; flex-direction:column; gap:18px; }
.word blockquote{ margin:0; }
.word blockquote p{ font-family:var(--f-display); font-style:italic; font-size:clamp(18px, 2vw, 21px); line-height:1.5; color:var(--ink); margin:0; }
.word blockquote p::before{ content:"\201C"; } .word blockquote p::after{ content:"\201D"; }
.word figcaption{ margin-top:auto; padding-top:14px; border-top:1px solid var(--gold); font-size:14.5px; color:var(--muted); }
