/* ============ Brand fonts (self-hosted) ============
   Moranga: 300 (Light) + 300 italic + 400 (Regular)
   Roobert: 400 / 500 (+italic) / 700
   Requests for unavailable weights resolve to the nearest face. */
@font-face{font-family:'Moranga';src:url('assets/fonts/moranga-light.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Moranga';src:url('assets/fonts/moranga-lightitalic.woff2') format('woff2');font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:'Moranga';src:url('assets/fonts/moranga-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Roobert';src:url('assets/fonts/roobert-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Roobert';src:url('assets/fonts/roobert-medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Roobert';src:url('assets/fonts/roobert-mediumitalic.woff2') format('woff2');font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:'Roobert';src:url('assets/fonts/roobert-bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

/* ============================================================
   Benepro design system
   Display: Fraunces (warm modern serif, stands in for Moranga)
   UI + all numerals: Manrope (already in the brand stack)
   Brand colors sampled from the approved Benepro identity.
   ============================================================ */

:root{
  /* ---- Brand palette, sampled directly from the Benepro print
     brochure (Benepro brochure single pages no bleed.pdf). ---- */
  --forest:#1F4432;         /* deepest green, dark surfaces */
  --green:#3B6852;          /* brochure card + headline green */
  --green-700:#2E5741;
  --coral:#E3755A;          /* brochure callout boxes */
  --coral-btn:#C2542F;      /* button fill: 4.65:1 with white text */
  --coral-btn-hov:#A8431F;
  --coral-ink:#B24A2C;      /* AA-safe coral for small text */
  --orange:#F48230;         /* brochure accent: quote marks, stars */
  --orange-ink:#B4551A;     /* AA-safe orange for small text */
  --copper:#D08048;         /* the coin icon copper/brown */
  --copper-dark:#8A4A2A;
  --copper-light:#E8C098;
  --purple:#C0A1CC;         /* brochure "Facts at a Glance" cards */
  --peach:#FFDDD4;          /* brochure warm background */
  --mint:#D2E4DC;           /* brochure mint */
  --mint-2:#E4F1EA;

  /* ink + surface */
  --ink:#14161A;
  --ink-2:#434A50;
  --muted:#636C77;
  --paper:#FBFAF8;
  --white:#fff;
  --line:#DCE5DF;
  --line-soft:#EAF0EC;

  /* type scale */
  /* The real brand faces, self-hosted (see @font-face above). */
  --f-body:'Roobert',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --f-display:'Moranga',Georgia,'Times New Roman',serif;

  --r-sm:10px; --r:16px; --r-lg:22px; --r-pill:999px;
  --shadow:0 1px 2px rgba(20,22,26,.04),0 12px 32px -12px rgba(31,68,50,.16);
  --shadow-lg:0 2px 4px rgba(20,22,26,.04),0 28px 60px -20px rgba(31,68,50,.24);
  --wrap:1180px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px}
body{
  margin:0;background:var(--white);color:var(--ink-2);
  font-family:var(--f-body);font-size:18px;line-height:1.65;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{color:var(--ink);margin:0;line-height:1.14;font-weight:500}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-9999px;top:0;background:var(--forest);color:#fff;padding:12px 18px;z-index:200;border-radius:0 0 8px 0}
.skip:focus{left:0}

:focus-visible{outline:3px solid var(--coral);outline-offset:3px;border-radius:4px}

/* ---------------- typography helpers ---------------- */
.display{
  font-family:var(--f-display);font-weight:400;letter-spacing:-.015em;
  font-size:clamp(30px,4.1vw,52px);line-height:1.13;color:var(--forest);
}
.display em{font-style:italic;color:var(--coral-ink)}
.display.invert{color:#fff}
.display.invert em{color:#F7B39F}

.eyebrow{
  font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--coral-ink);margin-bottom:16px;
}
.eyebrow.light{color:#F0A88F}

.sec-head{max-width:760px;margin-bottom:56px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-lede{margin-top:22px;font-size:19px;color:var(--ink-2);max-width:62ch}
.sec-head.center .sec-lede{margin-left:auto;margin-right:auto}

.section{padding:clamp(72px,9vw,120px) 0}

/* ---------------- buttons ---------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--f-body);font-weight:600;font-size:16px;line-height:1;
  padding:15px 24px;border-radius:var(--r-pill);border:1.5px solid transparent;
  text-decoration:none;cursor:pointer;max-width:100%;text-align:center;
  transition:transform .15s ease,background .15s ease,box-shadow .15s ease,color .15s ease;
}
/* Only the compact header buttons must never wrap. Body CTAs wrap freely
   so long labels can't force horizontal overflow on small screens. */
.header-cta .btn{white-space:nowrap}
.btn-lg{padding:18px 30px;font-size:17px}
.btn-block{width:100%}
.btn-primary{background:var(--coral-btn);color:#fff;box-shadow:0 8px 20px -8px rgba(194,84,47,.65)}
.btn-primary:hover{background:var(--coral-btn-hov);transform:translateY(-2px)}
.btn-outline{border-color:var(--forest);color:var(--forest);background:transparent}
.btn-outline:hover{background:var(--forest);color:#fff;transform:translateY(-2px)}
.btn-invert{border-color:rgba(255,255,255,.55);color:#fff}
.btn-invert:hover{background:#fff;color:var(--forest)}
.btn-ghost{color:var(--forest);padding:10px 12px;font-weight:600}
.btn-ghost:hover{color:var(--coral-ink)}
.btn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---------------- header ---------------- */
.site-header{
  position:sticky;top:0;z-index:100;background:rgba(255,255,255,.88);
  backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid transparent;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.site-header.stuck{border-bottom-color:var(--line-soft);box-shadow:0 6px 24px -18px rgba(31,68,50,.5)}
.header-inner{display:flex;align-items:center;gap:28px;height:76px}
.brand img{width:148px;height:auto}
.nav{display:flex;align-items:center;gap:26px;margin-left:auto}
.nav a{
  text-decoration:none;font-size:15.5px;font-weight:600;color:var(--ink-2);
  padding:6px 0;position:relative;white-space:nowrap;
}
.nav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;
  background:var(--coral);transition:right .22s ease;
}
.nav a:hover{color:var(--forest)}
.nav a:hover::after{right:0}
.header-cta{display:flex;align-items:center;gap:10px;flex:none}
.btn-call span{font-variant-numeric:tabular-nums;white-space:nowrap}
.menu-toggle{
  display:none;position:relative;width:44px;height:44px;border:1px solid var(--line);
  background:#fff;border-radius:12px;cursor:pointer;padding:0;
}
/* Bars are absolutely centered and offset from the same origin, so the
   open state collapses them onto one point exactly. No magic numbers
   tied to grid row height. */
.menu-toggle span{
  position:absolute;left:50%;top:50%;width:19px;height:2px;margin:0;
  background:var(--forest);border-radius:2px;
  transition:transform .2s ease,opacity .15s ease;
}
.menu-toggle span:nth-child(1){transform:translate(-50%,-50%) translateY(-6px)}
.menu-toggle span:nth-child(2){transform:translate(-50%,-50%)}
.menu-toggle span:nth-child(3){transform:translate(-50%,-50%) translateY(6px)}
.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translate(-50%,-50%) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translate(-50%,-50%) rotate(-45deg)}

/* ---------------- hero ---------------- */
.hero{position:relative;overflow:hidden;padding:clamp(56px,7vw,92px) 0 clamp(64px,8vw,104px);background:var(--paper)}
.hero-glow{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(46rem 30rem at 12% -10%,rgba(59,104,81,.13),transparent 60%),
    radial-gradient(38rem 26rem at 92% 8%,rgba(227,117,90,.14),transparent 62%),
    radial-gradient(34rem 30rem at 70% 100%,rgba(232,241,237,.9),transparent 60%);
}
.hero-inner{position:relative;display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(32px,5vw,72px);align-items:center}
.hero h1{
  font-family:var(--f-display);font-weight:400;color:var(--forest);
  font-size:clamp(34px,4.9vw,60px);line-height:1.1;letter-spacing:-.02em;
}
.hero h1 em{font-style:italic;color:var(--coral-ink)}
.lede{margin-top:24px;font-size:19.5px;color:var(--ink-2);max-width:56ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.hero-trust{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:32px}
.hero-trust li{display:flex;align-items:center;gap:9px;font-size:15.5px;font-weight:600;color:var(--green-700)}
.hero-trust svg{width:18px;height:18px;fill:none;stroke:var(--coral);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* hero card */
.hero-card{background:#fff;border:1px solid var(--line-soft);border-radius:var(--r-lg);padding:30px;box-shadow:var(--shadow-lg)}
.hc-kicker{font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--coral-ink);
  white-space:nowrap}
.hc-title{font-family:var(--f-display);font-size:26px;font-weight:400;color:var(--forest);margin-top:8px}
.hc-list{margin-top:24px;display:grid;gap:6px}
.hc-list li{display:flex;gap:15px;align-items:flex-start;padding:15px;border-radius:var(--r);transition:background .18s ease}
.hc-list li:hover{background:var(--mint-2)}
.hc-ico{flex:none;width:48px;height:48px;display:block}
.hc-ico img{width:100%;height:100%;object-fit:contain}
.hc-list strong{display:block;color:var(--forest);font-size:16.5px;font-weight:700;line-height:1.35}
.hc-list span{display:block;margin-top:4px;font-size:15px;color:var(--muted);line-height:1.5}
.hc-foot{margin-top:20px;padding-top:18px;border-top:1px dashed var(--line);font-size:15px;font-weight:600;color:var(--green-700);text-align:center}

/* ---------------- stakes ---------------- */
.stakes{background:var(--white)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.panel{border-radius:var(--r-lg);padding:36px;border:1px solid var(--line-soft)}
.panel h3{font-size:20px;font-weight:700;margin-bottom:22px;color:var(--forest)}
.panel-impact{background:var(--mint-2)}
.panel-risk{background:#FDF4F1;border-color:#F6E0D8}
.ticks li,.crosses li{position:relative;padding-left:36px;margin-bottom:15px;font-size:17px;color:var(--ink-2)}
.ticks li::before,.crosses li::before{
  position:absolute;left:0;top:1px;width:23px;height:23px;border-radius:50%;
  display:grid;place-items:center;font-size:13px;font-weight:800;
}
.ticks li::before{content:"✓";background:var(--green);color:#fff}
.crosses li::before{content:"!";background:var(--coral);color:#fff}

/* ---------------- coordination hub ---------------- */
.coord{background:var(--paper)}
.hub{
  display:grid;gap:20px;align-items:center;justify-items:center;
  grid-template-columns:1fr minmax(230px,300px) 1fr;
  grid-template-areas:". n ." "w c e" ". s .";
  max-width:1020px;margin:0 auto;
}
.hub-n{grid-area:n}.hub-w{grid-area:w}.hub-e{grid-area:e}.hub-s{grid-area:s}
.hub-core{grid-area:c;position:relative;display:grid;place-items:center;width:100%;aspect-ratio:1;max-width:300px}
.hub-ring{
  position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 180deg,var(--green),#7FB99B,var(--forest),var(--green));
  mask:radial-gradient(farthest-side,transparent calc(100% - 17px),#000 calc(100% - 17px));
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 17px),#000 calc(100% - 17px));
}
.hub-core-inner{
  position:absolute;inset:40px;border-radius:50%;background:#fff;border:1px solid var(--line-soft);
  display:grid;place-content:center;text-align:center;gap:4px;padding:12px;box-shadow:var(--shadow);
}
.hub-family{width:66px;height:41px;margin:0 auto 4px;fill:none;stroke:var(--green);stroke-width:2.1;stroke-linecap:round}
.hub-core-inner strong{font-family:var(--f-display);font-size:18px;font-weight:400;color:var(--forest);line-height:1.2}
.hub-core-inner span{font-size:12.5px;color:var(--muted);line-height:1.45}
.hub-card{
  background:#fff;border:1px solid var(--line-soft);border-radius:var(--r);padding:22px;
  box-shadow:var(--shadow);max-width:330px;width:100%;transition:transform .18s ease,box-shadow .18s ease;
}
.hub-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.hub-ico{display:block;width:56px;height:56px;margin-bottom:12px}
.hub-ico img{width:100%;height:100%;object-fit:contain;object-position:left center}
.hub-card h3{font-size:17px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--green-700);margin-bottom:8px}
.hub-card.accent h3{color:var(--coral-ink)}
.hub-card p{font-size:15.5px;color:var(--ink-2);line-height:1.55}
.hub-banner{
  display:flex;align-items:center;justify-content:center;gap:16px;max-width:840px;
  margin:44px auto 0;background:var(--forest);color:#fff;border-radius:var(--r);padding:22px 30px;text-align:left;
}
.hub-banner svg{width:30px;height:30px;flex:none;fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.hub-banner strong{color:#fff;font-weight:700}
.hub-banner span{font-size:16.5px;color:rgba(255,255,255,.86);line-height:1.5}

/* ---------------- services ---------------- */
.services{background:var(--white)}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.svc{
  position:relative;background:var(--white);border:1px solid var(--line-soft);
  border-radius:var(--r-lg);padding:34px 30px;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.svc:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--line)}
.svc-num{
  position:absolute;top:26px;right:28px;font-size:13px;font-weight:800;
  letter-spacing:.1em;color:var(--muted);
}
/* Brochure illustrations sit on the surface without a chip behind
   them, the way they do in the printed piece. */
.svc-ico{display:block;width:76px;height:76px;margin-bottom:20px}
.svc-ico img{width:100%;height:100%;object-fit:contain;object-position:left center}
.svc h3{font-family:var(--f-display);font-size:23px;font-weight:400;color:var(--forest);line-height:1.25}
.svc-tag{margin-top:8px;font-size:14px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--coral-ink)}
.svc>p:not(.svc-tag){margin-top:14px;font-size:16.5px;color:var(--ink-2)}
.svc-list{margin-top:22px;padding-top:20px;border-top:1px solid var(--line-soft)}
.svc-list li{position:relative;padding-left:26px;margin-bottom:11px;font-size:15.5px;color:var(--ink-2)}
.svc-list li::before{
  content:"";position:absolute;left:5px;top:9px;width:7px;height:7px;
  border-radius:50%;background:var(--coral);
}

/* ---------------- why / risks ---------------- */
.why{background:var(--mint-2)}
.risk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.risk{background:#fff;border:1px solid var(--line-soft);border-radius:var(--r);padding:30px;border-top:3px solid var(--coral)}
.risk h3{font-size:19px;font-weight:700;color:var(--forest);margin-bottom:12px;line-height:1.3}
.risk p{font-size:16px;color:var(--ink-2)}

/* ---------------- numbers (KPI tiles) ---------------- */
.numbers{background:var(--forest);position:relative;overflow:hidden}
.numbers::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(40rem 28rem at 85% 0%,rgba(227,117,90,.18),transparent 60%);
}
.numbers .wrap{position:relative;z-index:1}
.kpi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-lg);overflow:hidden}
.kpi{background:var(--forest);padding:38px 30px;transition:background .2s ease}
.kpi:hover{background:#24503B}
/* KPI values: sans face, proportional figures (never the display serif) */
.kpi-value{
  font-family:var(--f-body);font-weight:700;font-size:clamp(38px,4.4vw,52px);
  line-height:1;color:#fff;letter-spacing:-.02em;
}
.kpi-label{margin-top:14px;font-size:16px;line-height:1.5;color:rgba(255,255,255,.82);max-width:34ch}

/* ---------------- savings hero figure ---------------- */
.savings{background:var(--white)}
.savings-inner{
  display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,5vw,64px);align-items:center;
  background:var(--mint-2);border:1px solid var(--line-soft);border-radius:var(--r-lg);padding:clamp(32px,4.5vw,58px);
}
/* ---------- interactive savings calculator ---------- */
.calc{
  text-align:center;padding:36px 28px 30px;background:#fff;border-radius:var(--r);
  border:1px solid var(--line-soft);box-shadow:var(--shadow);
}
.calc-figure{
  font-family:var(--f-body);font-weight:800;font-size:clamp(44px,6vw,68px);
  line-height:1;color:var(--forest);letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;   /* stops width jitter while dragging */
}
.calc-sub{margin-top:12px;font-size:16px;color:var(--muted)}
.calc-sub strong{color:var(--green-700);font-weight:700}

.calc-slider{margin-top:28px}
.calc-scale{
  display:flex;justify-content:space-between;margin-top:12px;
  font-size:13.5px;font-weight:600;color:var(--muted);letter-spacing:.04em;
}

/* Native range input, restyled. Keeps drag, touch and keyboard for free. */
#calcRange{
  --pct:0%;
  -webkit-appearance:none;appearance:none;
  width:100%;height:14px;border-radius:999px;background:transparent;
  cursor:pointer;display:block;margin:0;
}
#calcRange::-webkit-slider-runnable-track{
  height:14px;border-radius:999px;
  background:linear-gradient(90deg,var(--green) 0%,var(--orange) var(--pct),var(--line) var(--pct),var(--line) 100%);
}
#calcRange::-moz-range-track{
  height:14px;border-radius:999px;
  background:linear-gradient(90deg,var(--green) 0%,var(--orange) var(--pct),var(--line) var(--pct),var(--line) 100%);
}
#calcRange::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:34px;height:34px;border-radius:50%;margin-top:-10px;
  background:#fff;border:3px solid var(--coral-btn);
  box-shadow:0 3px 10px rgba(31,68,50,.28);
  transition:transform .12s ease,box-shadow .12s ease;
}
#calcRange::-moz-range-thumb{
  width:34px;height:34px;border-radius:50%;
  background:#fff;border:3px solid var(--coral-btn);
  box-shadow:0 3px 10px rgba(31,68,50,.28);
}
#calcRange:hover::-webkit-slider-thumb{transform:scale(1.08)}
#calcRange:active::-webkit-slider-thumb{transform:scale(.96)}
#calcRange:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 5px rgba(227,117,90,.35)}
#calcRange:focus{outline:none}

.calc-hint{margin-top:18px;font-size:13.5px;color:var(--muted)}
/* the hint is only true where a pointer exists */
@media (hover:none){ .calc-hint::before{content:"Slide to see how the numbers change"} }
@media (hover:none){ .calc-hint{font-size:0} .calc-hint::before{font-size:13.5px} }

.savings-fig{text-align:center;padding:32px 20px;background:#fff;border-radius:var(--r);border:1px solid var(--line-soft);box-shadow:var(--shadow)}
.hero-figure{
  font-family:var(--f-body);font-weight:700;font-size:clamp(46px,6vw,68px);
  line-height:1;color:var(--forest);letter-spacing:-.03em;
}
.hero-figure-label{margin-top:14px;font-size:15.5px;font-weight:600;color:var(--muted);line-height:1.4}
.savings-copy h2{font-family:var(--f-display);font-weight:400;font-size:clamp(26px,3.2vw,38px);color:var(--forest);line-height:1.2}
.savings-copy>p{margin-top:18px;font-size:18px;color:var(--ink-2);max-width:56ch}
.savings-copy .btn{margin-top:28px}
.ast{color:var(--coral-ink)}
.disclaimer{margin-top:18px;font-size:13.5px;color:var(--muted)}

/* ---------------- process ---------------- */
.process{background:var(--paper)}
.steps{display:grid;gap:0;max-width:900px}
.step{display:grid;grid-template-columns:auto 1fr;gap:26px;padding:30px 0;border-bottom:1px solid var(--line-soft)}
.step:last-child{border-bottom:0}
.step-n{
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:#fff;border:1.5px solid var(--green);color:var(--green-700);
  font-family:var(--f-body);font-weight:700;font-size:19px;
}
.step h3{font-size:21px;font-weight:700;color:var(--forest);margin-bottom:10px}
.step p{font-size:17px;color:var(--ink-2);max-width:68ch}

/* ---------------- testimonials ---------------- */
.quotes{background:var(--white)}
.quote-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.quote{margin:0;background:var(--mint-2);border-radius:var(--r-lg);padding:32px;border:1px solid var(--line-soft);position:relative}
.quote::before{
  content:"“";position:absolute;top:6px;right:24px;font-family:var(--f-display);
  font-size:76px;line-height:1;color:var(--coral);opacity:.22;
}
.quote h3{font-family:var(--f-display);font-size:20px;font-weight:400;font-style:italic;color:var(--forest);margin-bottom:14px;line-height:1.3}
.quote p{font-size:16px;color:var(--ink-2);line-height:1.6}
.quote figcaption{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);font-weight:700;color:var(--forest);font-size:15.5px}
.quote figcaption span{display:block;font-weight:500;color:var(--muted);font-size:14.5px;margin-top:2px}

/* ---------------- about ---------------- */
.about{background:var(--paper)}
.about-inner{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(30px,5vw,64px);align-items:start}
.about-copy>p{margin-top:18px;font-size:17.5px;color:var(--ink-2);max-width:62ch}
.about-copy .display{margin-bottom:8px}
.about-panel{background:#fff;border:1px solid var(--line-soft);border-radius:var(--r-lg);padding:34px;box-shadow:var(--shadow)}
.about-panel h3{font-size:19px;font-weight:700;color:var(--forest);margin-bottom:22px}
.about-note{margin-top:24px;padding-top:20px;border-top:1px solid var(--line-soft);font-size:15.5px;color:var(--muted)}

/* ---------------- contact ---------------- */
.contact{background:var(--forest)}
.contact-inner{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:start}
.contact-copy>p{margin-top:20px;font-size:18px;color:rgba(255,255,255,.85);max-width:52ch}
.contact-list{margin-top:32px;display:grid;gap:14px}
.contact-list li{display:flex;align-items:center;gap:13px;color:#fff}
.contact-list svg{width:22px;height:22px;flex:none;fill:none;stroke:#F0A88F;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.contact-list a{color:#fff;font-size:18px;font-weight:600;text-decoration:none}
.contact-list a:hover{color:#F7B39F}
.contact-fineprint{margin-top:26px;font-size:13.5px;color:rgba(255,255,255,.55);max-width:44ch}

.form{background:#fff;border-radius:var(--r-lg);padding:clamp(26px,3.4vw,38px);box-shadow:var(--shadow-lg)}
.form h3{font-family:var(--f-display);font-size:24px;font-weight:400;color:var(--forest);margin-bottom:24px}
.field{margin-bottom:18px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field label{display:block;font-size:14.5px;font-weight:700;color:var(--forest);margin-bottom:7px}
.opt{font-weight:500;color:var(--muted)}
.field input,.field select,.field textarea{
  width:100%;font-family:var(--f-body);font-size:16.5px;color:var(--ink);
  padding:14px 15px;border:1.5px solid var(--line);border-radius:var(--r-sm);
  background:#fff;transition:border-color .16s ease,box-shadow .16s ease;
}
.field textarea{resize:vertical;min-height:88px}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--green);box-shadow:0 0 0 4px rgba(59,104,81,.13);
}
.field input[aria-invalid="true"]{border-color:#C4432A;box-shadow:0 0 0 4px rgba(196,67,42,.12)}
.err{font-size:13.5px;color:#B3341C;margin-top:6px;min-height:0}
.err:empty{display:none}
.form-note{margin-top:14px;font-size:14px;color:var(--muted);text-align:center}
.form-status{margin-top:14px;font-size:15.5px;font-weight:600;text-align:center}
.form-status.ok{color:var(--green-700)}
.form-status.bad{color:#B3341C}
.form-status.note{color:var(--muted);font-weight:500}

/* ---------------- footer ---------------- */
.site-footer{background:#163526;color:rgba(255,255,255,.75);padding:64px 0 32px}
.footer-inner{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px}
.foot-brand img{width:158px;margin-bottom:18px;filter:brightness(0) invert(1)}
.foot-brand p{font-size:15px;max-width:34ch;line-height:1.6}
.foot-col h4{font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#fff;margin-bottom:18px}
.foot-col a{display:block;font-size:15.5px;color:rgba(255,255,255,.75);text-decoration:none;margin-bottom:11px}
.foot-col a:hover{color:#fff}
.foot-col .btn{margin-top:10px;display:inline-flex}
.foot-legal{margin-top:48px;padding-top:26px;border-top:1px solid rgba(255,255,255,.15);display:flex;flex-wrap:wrap;gap:12px 30px;justify-content:space-between}
.foot-legal p{font-size:13.5px;color:rgba(255,255,255,.55)}
.legal-note{max-width:60ch}

/* ================= MOTION =================
   Elements are VISIBLE by default. JS only adds .reveal when
   IntersectionObserver exists, and a watchdog force-reveals
   everything after 1.2s. Nothing can get stuck invisible.
   ========================================== */
.reveal{
  opacity:0;transform:translateY(34px);
  transition:opacity .72s cubic-bezier(.22,.61,.36,1),transform .72s cubic-bezier(.22,.61,.36,1);
  transition-delay:var(--d,0ms);
  will-change:opacity,transform;
}
/* directional entrances: the hub pieces converge on the centre,
   which is the whole point the diagram is making */
.hub-n.reveal{transform:translateY(-70px) scale(.94)}
.hub-s.reveal{transform:translateY(70px) scale(.94)}
.hub-w.reveal{transform:translateX(-80px) scale(.94)}
.hub-e.reveal{transform:translateX(80px) scale(.94)}
.hub-core.reveal{transform:scale(.78)}
.hero-card.reveal{transform:translateY(40px) scale(.96)}
.svc.reveal,.risk.reveal,.quote.reveal{transform:translateY(40px) scale(.98)}
.kpi.reveal{transform:translateY(28px)}

/* the .in state always wins and always clears the transform */
.reveal.in{opacity:1!important;transform:none!important}

/* slow living ring on the hub core */
@keyframes ring-spin{to{rotate:360deg}}
.hub-ring{animation:ring-spin 28s linear infinite}

/* ---------- hub connectors ----------
   Lines radiating from the core toward each division, with a pulse
   continuously travelling INWARD. This is the one piece of motion on
   the page that carries meaning: it depicts the coordination Benepro
   is actually selling. Hidden once the grid stacks, where the compass
   directions no longer correspond to anything. */
.hub-link{
  position:absolute;display:block;pointer-events:none;overflow:hidden;
  --line:linear-gradient(var(--a,180deg),rgba(59,104,81,0),rgba(59,104,81,.55));
}
.hub-link::after{
  content:"";position:absolute;width:7px;height:7px;border-radius:50%;
  background:var(--coral);box-shadow:0 0 9px rgba(227,117,90,.85);
}
/* Lengths must stay inside the grid gap (measured: 20px vertical,
   25px horizontal) or the lines run out over the cards. */
.hl-n,.hl-s{width:2px;height:18px;left:50%;margin-left:-1px}
.hl-e,.hl-w{height:2px;width:23px;top:50%;margin-top:-1px}
.hl-n{top:-18px;background:linear-gradient(180deg,rgba(59,104,81,.08),rgba(59,104,81,.6))}
.hl-s{bottom:-18px;background:linear-gradient(0deg,rgba(59,104,81,.08),rgba(59,104,81,.6))}
.hl-w{left:-23px;background:linear-gradient(90deg,rgba(59,104,81,.08),rgba(59,104,81,.6))}
.hl-e{right:-23px;background:linear-gradient(270deg,rgba(59,104,81,.08),rgba(59,104,81,.6))}

.hl-n::after{left:-2.5px;animation:pulse-down 2.8s ease-in-out infinite}
.hl-s::after{left:-2.5px;animation:pulse-up 2.8s ease-in-out .7s infinite}
.hl-w::after{top:-2.5px;animation:pulse-right 2.8s ease-in-out 1.4s infinite}
.hl-e::after{top:-2.5px;animation:pulse-left 2.8s ease-in-out 2.1s infinite}

/* Percentage end-points so the travel always matches the line length,
   whatever the gap turns out to be at a given breakpoint. */
@keyframes pulse-down{
  0%{top:-7px;opacity:0}20%{opacity:1}80%{opacity:1}100%{top:100%;opacity:0}
}
@keyframes pulse-up{
  0%{top:100%;opacity:0}20%{opacity:1}80%{opacity:1}100%{top:-7px;opacity:0}
}
@keyframes pulse-right{
  0%{left:-7px;opacity:0}20%{opacity:1}80%{opacity:1}100%{left:100%;opacity:0}
}
@keyframes pulse-left{
  0%{left:100%;opacity:0}20%{opacity:1}80%{opacity:1}100%{left:-7px;opacity:0}
}

@media (max-width:940px){ .hub-link{display:none} }

/* ---------- animated mesh-gradient background ----------
   Replaces the original's tiled moving-hearts pattern. Large,
   heavily blurred colour fields that drift and breathe. Reads as
   a modern living gradient rather than a repeating sprite. */
.aurora{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
/* Sizes, opacity and travel are tuned so the movement is actually
   PERCEPTIBLE. Very large + very blurred + very slow reads as a static
   gradient even while it is technically animating. Smaller, denser
   fields moving further and faster are what make it read as alive. */
.aurora .blob{
  position:absolute;display:block;border-radius:50%;
  filter:blur(48px);opacity:.9;will-change:transform;
}
/* Film grain. This is what separates a designed mesh gradient from
   flat CSS blobs. It sits inside .aurora (below the content layer)
   so page text stays perfectly crisp. */
.aurora::after{
  content:"";position:absolute;inset:-20%;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.22;mix-blend-mode:overlay;
}
.aurora-dark::after{opacity:.16}
.hero-inner,.numbers .wrap{position:relative;z-index:1}

.aurora .b1{width:30vw;height:30vw;min-width:260px;min-height:260px;
  background:radial-gradient(circle at 40% 40%,rgba(59,104,81,.85),rgba(59,104,81,0) 68%);
  top:-6%;left:-4%;animation:drift-a 11s ease-in-out infinite alternate}
.aurora .b2{width:27vw;height:27vw;min-width:230px;min-height:230px;
  background:radial-gradient(circle at 40% 40%,rgba(227,117,90,.8),rgba(227,117,90,0) 68%);
  top:2%;right:-2%;animation:drift-b 13s ease-in-out infinite alternate}
.aurora .b3{width:26vw;height:26vw;min-width:220px;min-height:220px;
  background:radial-gradient(circle at 45% 45%,rgba(127,185,155,.8),rgba(127,185,155,0) 68%);
  bottom:-12%;left:24%;animation:drift-c 9.5s ease-in-out infinite alternate}
.aurora .b4{width:20vw;height:20vw;min-width:180px;min-height:180px;
  background:radial-gradient(circle at 50% 50%,rgba(247,179,159,.85),rgba(247,179,159,0) 68%);
  bottom:0%;right:16%;animation:drift-d 12s ease-in-out infinite alternate}

/* On a phone the blobs are nearly as wide as the screen, so at desktop
   opacity they blanket the hero, turn muddy where green meets coral, and
   sit directly behind the headline. Keep the movement, drop the weight,
   and pull them toward the edges so the text column stays clean. */
@media (max-width:760px){
  .aurora .blob{opacity:.42;filter:blur(62px)}
  .aurora .b1{width:60vw;height:60vw;min-width:190px;min-height:190px;top:-10%;left:-18%}
  .aurora .b2{width:58vw;height:58vw;min-width:180px;min-height:180px;top:-4%;right:-20%}
  .aurora .b3{width:52vw;height:52vw;min-width:170px;min-height:170px;bottom:-14%;left:-12%}
  .aurora .b4{width:46vw;height:46vw;min-width:150px;min-height:150px;bottom:-6%;right:-14%}
  .aurora-dark .blob{opacity:.34}
}

/* ---------- brand heart backdrop ----------
   Modelled on the brochure back cover: the Benepro heart scattered at
   varied sizes and rotations, very low contrast, as a watermark. The
   mark is applied as a MASK so it can be tinted per section. This is
   deliberately NOT the tiled, repeating treatment from the old site. */
/* The host section MUST be positioned, or inset:0 resolves against the
   viewport and the watermark leaks across the whole page. */
.coord,.process,.about,.contact{position:relative;overflow:hidden}
.heart-field{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.heart-field i{
  position:absolute;display:block;
  background:currentColor;opacity:.07;
  -webkit-mask:url("assets/heart-mask.png") no-repeat center/contain;
  mask:url("assets/heart-mask.png") no-repeat center/contain;
}
.heart-field i:nth-child(1){width:120px;height:112px;top:6%;left:4%;transform:rotate(-14deg)}
.heart-field i:nth-child(2){width:70px;height:66px;top:22%;left:24%;transform:rotate(12deg);opacity:.05}
.heart-field i:nth-child(3){width:150px;height:140px;top:2%;right:8%;transform:rotate(8deg)}
.heart-field i:nth-child(4){width:88px;height:82px;top:38%;right:22%;transform:rotate(-20deg);opacity:.05}
.heart-field i:nth-child(5){width:110px;height:103px;bottom:8%;left:14%;transform:rotate(18deg)}
.heart-field i:nth-child(6){width:62px;height:58px;bottom:26%;right:6%;transform:rotate(-8deg);opacity:.06}
.heart-field i:nth-child(7){width:96px;height:90px;bottom:2%;right:34%;transform:rotate(24deg);opacity:.045}
.heart-field i:nth-child(8){width:54px;height:50px;top:52%;left:2%;transform:rotate(-26deg);opacity:.05}

/* per-section tint + keep content above the watermark */
.coord{color:var(--green)}
.process{color:var(--green)}
.about{color:var(--green)}
.numbers .heart-field i{opacity:.09}
.numbers{color:#fff}
.contact{color:#fff}
.contact .heart-field i{opacity:.07}
.coord .wrap,.process .wrap,.about-inner,.contact-inner{position:relative;z-index:1}

@media (max-width:760px){
  .heart-field i:nth-child(2),.heart-field i:nth-child(4),
  .heart-field i:nth-child(7),.heart-field i:nth-child(8){display:none}
  .heart-field i{transform:scale(.72)}
}

/* dark sections: same system, tuned for the forest surface */
.aurora-dark .blob{opacity:.4;filter:blur(80px)}
.aurora-dark .b1{background:radial-gradient(circle at 40% 40%,rgba(227,117,90,.6),rgba(227,117,90,0) 70%)}
.aurora-dark .b2{background:radial-gradient(circle at 40% 40%,rgba(127,185,155,.5),rgba(127,185,155,0) 70%)}
.aurora-dark .b3{background:radial-gradient(circle at 40% 40%,rgba(90,150,120,.55),rgba(90,150,120,0) 70%)}

/* Non-uniform scale + rotation reads as organic squash-and-stretch and
   survives the 48px blur. Animating border-radius would not: at this
   blur radius the silhouette detail is gone. */
@keyframes drift-a{
  0%{transform:translate3d(0,0,0) rotate(0deg) scale(1,1)}
  35%{transform:translate3d(48%,26%,0) rotate(40deg) scale(1.3,.92)}
  70%{transform:translate3d(70%,66%,0) rotate(84deg) scale(.94,1.32)}
  100%{transform:translate3d(25%,95%,0) rotate(120deg) scale(1.16,1.02)}
}
@keyframes drift-b{
  0%{transform:translate3d(0,0,0) rotate(0deg) scale(1.1,.96)}
  35%{transform:translate3d(-56%,34%,0) rotate(-46deg) scale(.92,1.28)}
  70%{transform:translate3d(-84%,78%,0) rotate(-92deg) scale(1.34,.95)}
  100%{transform:translate3d(-35%,110%,0) rotate(-134deg) scale(1.04,1.22)}
}
@keyframes drift-c{
  0%{transform:translate3d(0,0,0) rotate(0deg) scale(1,1.06)}
  35%{transform:translate3d(-44%,-48%,0) rotate(52deg) scale(1.36,.9)}
  70%{transform:translate3d(-18%,-84%,0) rotate(104deg) scale(.93,1.34)}
  100%{transform:translate3d(60%,-35%,0) rotate(146deg) scale(1.2,1)}
}
@keyframes drift-d{
  0%{transform:translate3d(0,0,0) rotate(0deg) scale(1.15,.98)}
  35%{transform:translate3d(52%,-40%,0) rotate(-56deg) scale(.94,1.3)}
  70%{transform:translate3d(20%,-86%,0) rotate(-110deg) scale(1.32,.96)}
  100%{transform:translate3d(-55%,-100%,0) rotate(-150deg) scale(1.06,1.24)}
}

/* the original static wash stays as the base layer */
@keyframes glow-drift{
  0%{transform:translate3d(0,0,0) scale(1)}
  100%{transform:translate3d(-2.5%,1.5%,0) scale(1.08)}
}
.hero-glow{animation:glow-drift 22s ease-in-out infinite alternate}

/* ---------- headline shimmer ----------
   Slow light sweep across the italic phrase. The highlight tone is
   #D4694A (4.4:1 on the hero surface) so the text still clears the
   large-text contrast floor at every point in the sweep. Falls back
   to a solid colour wherever background-clip:text is unsupported. */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .js .hero h1 em{
    background-image:linear-gradient(100deg,
      var(--coral-ink) 0%,var(--coral-ink) 38%,#D4694A 50%,
      var(--coral-ink) 62%,var(--coral-ink) 100%);
    background-size:260% 100%;
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
    animation:shimmer 7s ease-in-out 1.2s infinite;
  }
}
@keyframes shimmer{
  0%{background-position:150% 0}
  60%{background-position:-50% 0}
  100%{background-position:-50% 0}
}

/* hero entrance on load */
@keyframes rise-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.js .hero-copy>*{animation:rise-in .75s cubic-bezier(.22,.61,.36,1) both;animation-delay:var(--d,0ms)}

/* process: the spine draws as you scroll through the steps */
.steps{position:relative}
.steps::before{
  content:"";position:absolute;left:26px;top:30px;bottom:30px;width:2px;
  background:var(--line);border-radius:2px;
}
.steps::after{
  content:"";position:absolute;left:26px;top:30px;width:2px;border-radius:2px;
  height:calc(var(--progress,0) * (100% - 60px));
  background:linear-gradient(180deg,var(--green),var(--coral));
  transition:height .18s linear;
}
.step{position:relative;z-index:1}
.step-n{transition:transform .25s ease,border-color .25s ease,background .25s ease}
.step.on .step-n{background:var(--green);border-color:var(--green);color:#fff;transform:scale(1.06)}

/* micro-interactions */
.btn:active{transform:translateY(0) scale(.985)}
.svc:hover .svc-ico,.hub-card:hover .hub-ico{transform:scale(1.08) rotate(-3deg)}
.svc-ico,.hub-ico,.hc-ico{transition:transform .25s cubic-bezier(.22,.61,.36,1)}
.hc-list li:hover .hc-ico{transform:scale(1.07)}
.kpi{transition:background .25s ease,transform .25s ease}
.kpi:hover{transform:translateY(-3px)}
.quote{transition:transform .22s ease,box-shadow .22s ease}
.quote:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
/* header condenses once you start reading */
.header-inner{transition:height .25s ease}
.brand img{transition:width .25s ease}
.site-header.stuck .header-inner{height:64px}
.site-header.stuck .brand img{width:132px}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .reveal{opacity:1!important;transform:none!important}
  .js .hero-copy>*{animation:none!important;opacity:1!important;transform:none!important}
  .hub-ring,.hero-glow,.aurora .blob{animation:none!important}
  .hub-link::after{display:none}
  .js .hero h1 em{
    animation:none!important;background-image:none!important;
    -webkit-text-fill-color:var(--coral-ink);color:var(--coral-ink);
  }
  .steps::after{transition:none!important}
}

/* ---------------- responsive ---------------- */
@media (max-width:1080px){
  .nav{gap:18px}
  .nav a{font-size:14.5px}
  .btn-call span{display:none}
}
@media (max-width:940px){
  .hero-inner{grid-template-columns:1fr;gap:40px}
  .hero-card{max-width:560px}
  .svc-grid,.risk-grid,.quote-grid,.kpi-grid{grid-template-columns:repeat(2,1fr)}
  .savings-inner,.about-inner,.contact-inner{grid-template-columns:1fr}
  .footer-inner{grid-template-columns:1fr 1fr}
  .hub{grid-template-columns:1fr;grid-template-areas:"c" "n" "w" "e" "s";gap:16px}
  .hub-core{max-width:250px;margin-bottom:10px}
  .hub-card{max-width:520px}
}
@media (max-width:760px){
  .nav{
    display:none;position:absolute;top:76px;left:0;right:0;background:#fff;
    flex-direction:column;align-items:stretch;gap:0;padding:8px 24px 20px;
    border-bottom:1px solid var(--line-soft);box-shadow:var(--shadow);
  }
  .nav.open{display:flex}
  .nav a{padding:14px 0;border-bottom:1px solid var(--line-soft);font-size:17px}
  .nav a::after{display:none}
  .menu-toggle{display:grid}
  .header-cta .btn-primary{display:none}
  .split,.field-row{grid-template-columns:1fr}
  .svc-grid,.risk-grid,.quote-grid,.kpi-grid,.footer-inner{grid-template-columns:1fr}
  .kpi-grid{gap:1px}
  .hero-actions .btn{width:100%}
  .hub-banner{flex-direction:column;text-align:center;gap:12px}
  /* Keep the marker in its own column on mobile. Collapsing to a single
     column put the body copy under the spine, so the line ran straight
     through the text. Narrower gutter instead, with the spine realigned
     to the smaller marker's centre. */
  .step{grid-template-columns:auto 1fr;gap:16px}
  .step-n{width:44px;height:44px;font-size:17px}
  .steps::before,.steps::after{left:22px}
}
@media (max-width:420px){
  body{font-size:17px}
  .panel,.svc,.risk,.quote,.form,.about-panel{padding:24px 20px}
}

/* ================= SIGNATURE DIAGRAMS (from the services PDF) ================= */

/* shared */
.diagram-caption{margin-top:26px;text-align:center;font-size:15px;color:var(--muted)}
.diagram-caption em{font-family:var(--f-display);font-style:italic;color:var(--green-700)}
.bottom-line{
  margin:28px auto 0;max-width:760px;text-align:center;background:var(--mint-2);
  border:1px solid var(--line-soft);border-radius:var(--r-sm);padding:14px 22px;
  font-size:15.5px;color:var(--ink-2);
}
.bottom-line strong{color:var(--forest)}
.tagline-close{
  margin-top:14px;text-align:center;font-family:var(--f-display);font-style:italic;
  font-size:17px;color:var(--coral-ink);
}

/* ---------- A. Turning 65, made simple ---------- */
.t65{margin-bottom:64px;padding:clamp(26px,3.5vw,44px);border-radius:var(--r-lg);
  background:linear-gradient(135deg,var(--mint-2),#F5FAF7 55%,#FDF4F1);border:1px solid var(--line-soft)}
.t65-head{text-align:center;margin-bottom:30px}
.t65-title{font-family:var(--f-display);font-weight:400;font-size:clamp(24px,3vw,34px);color:var(--forest)}
.t65-title em{font-style:italic;color:var(--coral-ink)}
.t65-sub{margin-top:8px;font-size:14px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--muted)}
.t65-flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:18px;align-items:stretch}
.t65-step{background:#fff;border:1px solid var(--line-soft);border-radius:var(--r);padding:26px 24px;box-shadow:var(--shadow)}
.t65-n{
  display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  background:var(--green);color:#fff;font-weight:700;font-size:17px;margin-bottom:14px;
}
.t65-step:nth-child(3) .t65-n{background:var(--coral-btn)}
.t65-step h4{font-family:var(--f-display);font-weight:400;font-size:21px;color:var(--forest);margin-bottom:10px}
.t65-step p{font-size:15px;line-height:1.6;color:var(--ink-2)}
.t65-dark{background:var(--forest);border-color:var(--forest)}
.t65-dark .t65-n{background:#fff;color:var(--forest)}
.t65-dark h4{color:#fff}
.t65-dark p{color:rgba(255,255,255,.88)}
.t65-arrow{display:grid;place-items:center;color:var(--green)}
.t65-arrow svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- B. Advantage vs Supplemental ---------- */
.compare{background:var(--paper)}
.cmp{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:960px;margin:0 auto}
.cmp-col{background:#fff;border:1px solid var(--line-soft);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow)}
.cmp-head{padding:18px 24px;font-size:18px;font-weight:700;color:#fff;text-align:center}
.cmp-adv{background:var(--green)}
.cmp-sup{background:var(--purple);color:var(--ink)}
.cmp-row{padding:18px 24px;border-bottom:1px solid var(--line-soft);transition:background .18s ease}
.cmp-row.hl{background:var(--mint-2)}
.cmp-k{display:block;font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--coral-ink);margin-bottom:6px}
.cmp-row p{font-size:15.5px;color:var(--ink-2)}
.cmp-chip{
  margin:16px 24px 22px;text-align:center;background:var(--mint-2);border-radius:var(--r-pill);
  padding:10px 16px;font-size:14px;font-weight:600;color:var(--green-700);
}

/* ---------- C. Crisis with vs without a plan ---------- */
.crisis{background:#FDF7F4}
.crisis-trigger{
  display:flex;align-items:center;justify-content:center;gap:12px;margin:0 auto 12px;
  font-size:16px;font-weight:600;color:var(--ink-2);text-align:center;
}
.crisis-trigger span{
  display:grid;place-items:center;width:34px;height:34px;border-radius:50%;flex:none;
  background:var(--coral-btn);color:#fff;font-weight:800;font-size:17px;
}
.crisis-split{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:960px;margin:26px auto 0}
.crisis-panel{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line-soft);background:#fff;box-shadow:var(--shadow)}
.crisis-panel h3{padding:16px 24px;font-size:17.5px;font-weight:700;color:#fff;text-align:center}
.crisis-without h3{background:var(--coral-btn)}
.crisis-with h3{background:var(--green)}
.crisis-house{display:grid;place-items:center;padding:24px 0 6px}
.crisis-house svg{width:56px;height:56px;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.crisis-without .crisis-house svg{stroke:#9c8aa8}
.crisis-with .crisis-house svg{stroke:var(--green)}
.crisis-panel ul{padding:10px 28px 6px;display:grid;gap:12px}
.crisis-panel li{position:relative;padding-left:22px;font-size:15.5px;color:var(--ink-2)}
.crisis-panel li::before{content:"";position:absolute;left:2px;top:9px;width:7px;height:7px;border-radius:50%}
.crisis-without li::before{background:var(--coral-btn)}
.crisis-with li::before{background:var(--green)}
.crisis-without{filter:saturate(.82)}
.crisis-verdict{margin:16px 24px 22px;text-align:center;font-weight:700;font-size:15.5px;
  border-radius:var(--r-sm);padding:11px}
.crisis-without .crisis-verdict{background:#FDF4F1;color:var(--coral-ink)}
.crisis-with .crisis-verdict{background:var(--mint-2);color:var(--green-700)}

/* ---------- D. Getting started ---------- */
.gs{margin-bottom:56px}
.gs .sec-head{margin-bottom:36px}
.gs-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:900px;margin:0 auto}
.gs-card{
  display:grid;justify-items:center;gap:4px;text-align:center;text-decoration:none;
  background:#fff;border-radius:var(--r);padding:26px 20px;box-shadow:var(--shadow);
  transition:transform .18s ease,box-shadow .18s ease;
}
.gs-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.gs-ico{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--mint-2);margin-bottom:6px}
.gs-ico svg{width:23px;height:23px;fill:none;stroke:var(--green);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.gs-card strong{color:var(--forest);font-size:17px}
.gs-detail{color:var(--ink-2);font-weight:600;font-size:15.5px}
.gs-note{color:var(--muted);font-size:13.5px}
.gs-funnel{margin:26px auto 0;max-width:620px;text-align:center;font-size:15.5px;color:rgba(255,255,255,.85)}

/* ---------- responsive ---------- */
@media (max-width:940px){
  .t65-flow{grid-template-columns:1fr}
  /* stacked layout: the arrow is its own grid row; cap its height or it
     stretches to match the tallest sibling and opens a huge gap */
  .t65-arrow{transform:rotate(90deg);height:30px;align-self:center;justify-self:center}
  .cmp,.crisis-split{grid-template-columns:1fr}
  .gs-cards{grid-template-columns:1fr}
}

/* ================= INTERACTIVE TOOLS ================= */

/* ---------- personal enrollment timeline ---------- */
.timeline{background:var(--white)}
.tl-card{max-width:860px;margin:0 auto;background:#fff;border:1px solid var(--line-soft);
  border-radius:var(--r-lg);padding:clamp(26px,3.5vw,42px);box-shadow:var(--shadow)}
.tl-controls{display:flex;gap:18px;justify-content:center;flex-wrap:wrap}
.tl-controls label{display:grid;gap:7px;font-size:14px;font-weight:700;color:var(--forest)}
.tl-controls select{
  font-family:var(--f-body);font-size:17px;padding:12px 14px;min-width:150px;
  border:1.5px solid var(--line);border-radius:var(--r-sm);background:#fff;color:var(--ink);
}
.tl-controls select:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 4px rgba(59,104,81,.13)}
.tl-strip{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin:28px 0 0}
.tl-cell{
  border-radius:10px;padding:12px 4px 10px;text-align:center;border:1px solid var(--line-soft);
  background:var(--paper);transition:background .3s ease,border-color .3s ease;
}
.tl-cell b{display:block;font-size:13.5px;color:var(--ink-2)}
.tl-cell i{display:block;font-style:normal;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-top:3px}
.tl-cell.on{background:var(--mint-2);border-color:var(--green)}
.tl-cell.bday{background:var(--green);border-color:var(--green)}
.tl-cell.bday b,.tl-cell.bday i{color:#fff}
.tl-result{margin-top:22px;text-align:center;font-size:17.5px;color:var(--ink-2)}
.tl-result strong{color:var(--forest)}
.tl-result .tl-days{color:var(--coral-ink);font-weight:700}
.tl-warn{margin-top:10px;text-align:center;font-size:14.5px;color:var(--coral-ink);min-height:0}
.tl-warn:empty{display:none}
.tl-cta{margin-top:20px;text-align:center}
.tl-fine{max-width:60ch;margin-left:auto;margin-right:auto;text-align:center}

/* ---------- readiness checklist ---------- */
.readiness{background:var(--mint-2)}
/* Two-up on anything wider than a phone. As a single column of six full
   sentences this ran most of a screen tall, which is what Abraham meant by
   wanting it more compact. */
.rd-card{max-width:720px;margin:0 auto;background:#fff;border:1px solid var(--line-soft);
  border-radius:var(--r-lg);padding:clamp(22px,3vw,32px);box-shadow:var(--shadow)}
.rd-list{display:grid;grid-template-columns:repeat(2,1fr);gap:4px 14px}
.rd-list label{
  display:flex;gap:11px;align-items:center;padding:9px 11px;border-radius:var(--r-sm);
  cursor:pointer;transition:background .15s ease;
}
.rd-list label:hover{background:var(--mint-2)}
.rd-list input{
  appearance:none;-webkit-appearance:none;flex:none;width:22px;height:22px;margin:0;
  border:2px solid var(--green);border-radius:6px;background:#fff;cursor:pointer;
  display:grid;place-items:center;transition:background .15s ease;
}
.rd-list input:checked{background:var(--green)}
.rd-list input:checked::after{content:"\2713";color:#fff;font-size:13px;font-weight:800}
.rd-list input:focus-visible{outline:3px solid var(--coral);outline-offset:2px}
.rd-list span{font-size:15.5px;line-height:1.35;color:var(--ink-2)}
.rd-list input:checked ~ span{color:var(--muted);text-decoration:line-through;text-decoration-color:rgba(59,104,81,.5)}
@media (max-width:620px){.rd-list{grid-template-columns:1fr}}
.rd-meter{margin-top:20px}
.rd-track{height:14px;border-radius:999px;background:var(--line-soft);overflow:hidden}
.rd-fill{height:100%;width:0%;border-radius:999px;background:linear-gradient(90deg,var(--green),var(--orange));transition:width .45s cubic-bezier(.22,.61,.36,1)}
.rd-score{margin-top:10px;text-align:center;font-weight:700;color:var(--forest);font-size:16px;font-variant-numeric:tabular-nums}
.rd-msg{margin-top:10px;text-align:center;font-size:16px;color:var(--ink-2);max-width:52ch;margin-left:auto;margin-right:auto}
.rd-cta{margin-top:18px;text-align:center}

/* ---------- crisis savings bars ---------- */
.crisis-savings{padding:4px 28px 0}
.crisis-savings-label{display:block;text-align:center;font-size:11.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.crisis-bar-track{height:12px;border-radius:999px;background:var(--line-soft);overflow:hidden}
.crisis-bar{height:100%;width:100%;border-radius:999px;background:linear-gradient(90deg,var(--coral-btn),var(--coral));transition:width .2s linear}
.crisis-bar-safe{background:linear-gradient(90deg,var(--green),#7FB99B)}

@media (max-width:760px){
  .tl-strip{grid-template-columns:repeat(7,1fr);gap:3px}
  .tl-cell{padding:8px 2px 7px}
  .tl-cell b{font-size:11px}
  .tl-cell i{font-size:8.5px}
}
@media (prefers-reduced-motion:reduce){
  .rd-fill,.crisis-bar{transition:none!important}
}

/* ================= TIMELINE: the delightful version ================= */
.tl-sentence{
  text-align:center;font-family:var(--f-display);font-weight:400;
  font-size:clamp(24px,3.4vw,34px);color:var(--forest);line-height:1.5;
}
.tl-sentence select{
  -webkit-appearance:none;appearance:none;
  font-family:inherit;font-size:inherit;font-weight:inherit;font-style:italic;
  color:var(--coral-ink);background:transparent;
  border:none;border-bottom:3px solid var(--coral);border-radius:0;
  padding:0 26px 2px 8px;margin:0 2px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23B24A2C' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 4px center;
  transition:border-color .15s ease,background-color .15s ease;
}
.tl-sentence select:hover{background-color:var(--peach);border-color:var(--coral-btn)}
.tl-sentence select:focus{outline:none;border-color:var(--coral-btn);background-color:var(--peach)}
.tl-period{color:var(--forest)}
.tl-hint{margin-top:10px;text-align:center;font-size:13.5px;color:var(--muted)}

/* ghost/empty state: softly breathing placeholder */
.tl-cell.ghost{background:var(--paper);border-style:dashed;border-color:var(--line)}
.tl-cell.ghost b{color:var(--line)}
.tl-cell.ghost i{color:var(--line)}
.tl-cell.bday-ghost{border-color:var(--green);border-style:dashed;background:var(--mint-2)}
.tl-cell.bday-ghost b{color:var(--green);opacity:.55}
.tl-cell.bday-ghost i{color:var(--green);opacity:.55}
@keyframes tl-breathe{0%,100%{opacity:.55}50%{opacity:1}}
.tl-strip.idle .tl-cell.bday-ghost{animation:tl-breathe 2.6s ease-in-out infinite}

/* live cells cascade in */
@keyframes tl-pop{
  0%{opacity:0;transform:translateY(10px) scale(.9)}
  70%{opacity:1;transform:translateY(0) scale(1.04)}
  100%{opacity:1;transform:none}
}
.tl-cell.pop{animation:tl-pop .45s cubic-bezier(.22,.61,.36,1) both;animation-delay:var(--d,0ms)}
.tl-cell.bday{position:relative;overflow:visible}
.tl-heart{
  position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  width:22px;height:21px;background:var(--coral);
  -webkit-mask:url('assets/heart-mask.png') no-repeat center/contain;
  mask:url('assets/heart-mask.png') no-repeat center/contain;
}
@keyframes tl-heartbeat{
  0%,100%{transform:translateX(-50%) scale(1)}
  12%{transform:translateX(-50%) scale(1.25)}
  24%{transform:translateX(-50%) scale(1)}
}
.tl-cell.bday .tl-heart{animation:tl-heartbeat 1.8s ease-in-out .5s 3}

/* result slides up fresh on every calculation */
@keyframes tl-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.tl-result.fresh{animation:tl-rise .4s ease both}
.tl-days{display:inline-block}
@keyframes tl-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.tl-result .tl-days{animation:tl-pulse 2s ease-in-out 3}

@media (prefers-reduced-motion:reduce){
  .tl-cell.pop,.tl-result.fresh,.tl-cell.bday .tl-heart,
  .tl-strip.idle .tl-cell.bday-ghost,.tl-result .tl-days{animation:none!important}
}
@media (max-width:760px){
  .tl-sentence{font-size:21px}
  .tl-sentence select{padding-right:22px}
}

/* ================= ABRAHAM VIDEO ROUND 1 ================= */

/* v9: no orphan words in display headlines */
h1,h2,h3,.display,.t65-title,.hc-title{text-wrap:balance}

/* v6: three division USP boxes in the stakes section */
.usp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.usp{background:#fff;border:1px solid var(--line-soft);border-radius:var(--r-lg);
  padding:30px 26px;box-shadow:var(--shadow);transition:transform .2s ease,box-shadow .2s ease}
.usp:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.usp img{width:64px;height:64px;object-fit:contain;object-position:left center;margin-bottom:16px}
.usp h3{font-family:var(--f-display);font-weight:400;font-size:23px;color:var(--forest);margin-bottom:14px}
.usp ul{display:grid;gap:10px}
.usp li{position:relative;padding-left:24px;font-size:15.5px;color:var(--ink-2)}
.usp li::before{content:"";position:absolute;left:2px;top:8px;width:8px;height:8px;border-radius:50%;background:var(--coral)}
@media (max-width:940px){.usp-grid{grid-template-columns:1fr}}

/* v8: Benepro heart beside the family, in this together */
.hub-core-inner{position:relative}
.hub-icons-row{display:flex;align-items:center;justify-content:center;gap:10px}
.hub-mark{
  display:inline-block;width:30px;height:28px;background:var(--green);vertical-align:middle;
  -webkit-mask:url('assets/heart-mask.png') no-repeat center/contain;
  mask:url('assets/heart-mask.png') no-repeat center/contain;
  margin-right:8px;
}
.hub-family{display:inline-block;vertical-align:middle;width:52px!important;height:33px!important;margin:0 0 4px!important}
/* v3: percentage-first score */
.rd-score{font-size:20px;font-weight:600}
.rd-pct{font-size:30px;font-weight:800;color:var(--coral-ink);font-variant-numeric:tabular-nums}

/* ================= MULTI-PAGE COMPONENTS ================= */
.page-hero{background:var(--paper);position:relative;overflow:hidden;padding-top:clamp(56px,7vw,88px)}
.page-hero .sec-head{margin-bottom:0}
.page-cta{background:var(--mint-2)}
.svc-more{display:inline-block;margin-top:18px;font-weight:700;font-size:15px;color:var(--coral-ink);text-decoration:none}
.svc-more:hover{color:var(--coral-btn)}

/* Medicare parts */
.parts-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:26px}
.part{background:#fff;border:1px solid var(--line-soft);border-radius:var(--r);padding:24px 20px;box-shadow:var(--shadow)}
.part-l{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;color:#fff;font-weight:800;font-size:19px;margin-bottom:14px;font-family:var(--f-body)}
.pl-a{background:var(--forest)} .pl-b{background:var(--green)} .pl-c{background:var(--coral-btn)} .pl-d{background:var(--purple);color:var(--ink)}
.part h3{font-size:17px;font-weight:700;color:var(--forest);margin-bottom:8px}
.part p{font-size:14.5px;color:var(--ink-2)}
.part-help{margin-top:12px;padding-top:10px;border-top:1px dashed var(--line);font-weight:600;color:var(--green-700)}

/* MSP + pace cards */
.msp-grid,.pace-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.msp-card,.pace-card{background:#fff;border:1px solid var(--line-soft);border-radius:var(--r);padding:26px 22px;box-shadow:var(--shadow)}
.msp-card h3,.pace-card h3{font-size:18px;font-weight:700;color:var(--forest);margin-bottom:10px}
.msp-card p,.pace-card p{font-size:15px;color:var(--ink-2)}
.msp-for{margin-top:12px;font-size:13px;font-style:italic;color:var(--coral-ink)}
.msp-dark,.pc-dark{background:var(--forest);border-color:var(--forest)}
.msp-dark h3,.pc-dark h3,.pc-dark p{color:#fff}
.msp-dark p{color:rgba(255,255,255,.88)}
.msp-dark .msp-for,.pc-dark .msp-for{color:#F7B39F}
.pace-badge{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--mint-2);color:var(--green-700);font-weight:800;margin-bottom:12px}
.pc-dark .pace-badge{background:rgba(255,255,255,.15);color:#fff}

/* future-care paths */
.paths-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:24px}
.path-card{background:#fff;border:1px solid var(--line-soft);border-left:4px solid var(--coral);border-radius:var(--r);padding:26px;box-shadow:var(--shadow)}
.path-card h3{font-size:18px;font-weight:700;color:var(--forest);margin-bottom:10px}
.path-card p{font-size:15.5px;color:var(--ink-2)}

/* about story + team */
.story{display:grid;gap:16px;max-width:780px;margin:0 auto}
.story-step{border-radius:var(--r);padding:26px 30px;border:1px solid var(--line-soft);background:#fff;box-shadow:var(--shadow)}
.story-step h3{font-size:18px;font-weight:700;margin-bottom:8px;color:var(--forest)}
.st-problem{border-left:4px solid var(--coral-btn)}
.st-belief{border-left:4px solid var(--green)}
.st-created{background:var(--forest);border-color:var(--forest)}
.st-created h3,.st-created p{color:#fff}
.st-created p{color:rgba(255,255,255,.9)}
.team-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:820px;margin:0 auto 24px}
.team-card{background:#fff;border:1px solid var(--line-soft);border-radius:var(--r-lg);padding:30px;text-align:center;box-shadow:var(--shadow)}
.team-avatar{display:block;width:76px;height:71px;margin:0 auto 16px;background:var(--green);
  -webkit-mask:url('assets/heart-mask.png') no-repeat center/contain;mask:url('assets/heart-mask.png') no-repeat center/contain}
.team-avatar.ta-2{background:var(--purple)}
.team-card h3{font-family:var(--f-display);font-weight:400;font-size:24px;color:var(--forest)}
.team-role{margin-top:4px;font-size:13.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--coral-ink)}
.team-card p{margin-top:12px;font-size:15.5px;color:var(--ink-2)}
.team-years{margin-top:14px;font-weight:700;color:var(--green-700)}

/* FAQ */
.faq-wrap{max-width:820px}
.faq-cat{font-family:var(--f-display);font-weight:400;font-size:27px;color:var(--forest);margin:38px 0 14px;padding-bottom:8px;border-bottom:2px solid var(--coral)}
.faq{border:1px solid var(--line-soft);border-radius:var(--r-sm);background:#fff;margin-bottom:10px;box-shadow:var(--shadow)}
.faq summary{cursor:pointer;list-style:none;padding:18px 48px 18px 20px;font-weight:700;font-size:16.5px;color:var(--forest);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:20px;top:50%;transform:translateY(-50%);font-size:24px;font-weight:400;color:var(--coral-ink);transition:transform .2s ease}
.faq[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq p{padding:0 20px 18px;font-size:15.5px;color:var(--ink-2);max-width:70ch}

/* income calc figure */
.inc-figure{min-height:1.2em;font-size:clamp(34px,5vw,52px)}

@media (max-width:940px){.parts-grid{grid-template-columns:repeat(2,1fr)}.msp-grid,.pace-grid{grid-template-columns:1fr}.paths-grid,.team-grid{grid-template-columns:1fr}}
@media (max-width:560px){.parts-grid{grid-template-columns:1fr}}
/* utility classes replacing inline styles */
.alt-paper{background:var(--paper)}
.alt-mint{background:var(--mint-2)}
.center-wrap{text-align:center}
.cta-title{margin-bottom:22px}
.tagline-invert{color:#F7B39F}

/* ---------- hub core: gentle bounce within the ring ----------
   The inner disc has 26px of slack inside the ring; the path stays
   within ±11px so it never touches the edge. Slow and soft: the text
   must stay comfortably readable while it drifts. */
/* full orbit: rotate out to radius, counter-rotate so the text stays
   level. Covers every side of the ring evenly. 23px clearance, 16px
   radius: never touches the ring. */
@keyframes core-orbit{
  from{transform:rotate(0deg) translateX(16px) rotate(0deg)}
  to  {transform:rotate(360deg) translateX(16px) rotate(-360deg)}
}
.hub-core-inner{animation:core-orbit 18s linear infinite}
.hub-core-inner:hover{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.hub-core-inner{animation:none!important}}

/* ================= ABRAHAM EMAIL ROUND ================= */
.hero-proof{margin-top:18px;font-size:14.5px;color:var(--muted);max-width:48ch}

/* fused t65 cards: icon + USP bullets */
.t65-ico{width:52px;height:52px;object-fit:contain;object-position:left center;margin:10px 0 12px}
.t65-usp{display:grid;gap:9px}
.t65-usp li{position:relative;padding-left:22px;font-size:15px;color:var(--ink-2)}
.t65-usp li::before{content:"";position:absolute;left:2px;top:8px;width:7px;height:7px;border-radius:50%;background:var(--coral)}
.t65-dark .t65-usp li{color:rgba(255,255,255,.9)}
.t65-dark .t65-usp li::before{background:#F7B39F}

/* hub centre: the Benepro heart alone */
.hub-logo{
  display:block;width:118px;height:56px;
  background:url('assets/benepro-logo.webp') no-repeat center/contain;
}

/* about: trust row */
/* Four equal cards. These were auto-width centered pills when the copy was
   two or three words; Abraham's fuller descriptions need a real grid or the
   columns go ragged. */
.trust-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:30px;align-items:stretch}
.trust-item{background:#fff;border:1px solid var(--line-soft);border-radius:var(--r-sm);
  padding:22px 22px 24px;text-align:left;box-shadow:var(--shadow);
  border-top:3px solid var(--coral);display:flex;flex-direction:column;gap:8px}
/* Two lines' worth of height so a wrapping label ("Deep Connections") does
   not push its body copy out of line with the other three. */
.trust-item b{display:block;font-family:var(--f-display);font-weight:400;font-size:26px;
  line-height:1.1;color:var(--forest);min-height:2.2em}
.trust-item span{font-size:13.5px;line-height:1.55;color:var(--ink-2)}
@media (max-width:900px){.trust-row{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.trust-row{grid-template-columns:1fr}}

/* generational flow */
.gen-flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:18px;align-items:stretch;max-width:980px;margin:0 auto 24px}
.gen-card{background:#fff;border:1px solid var(--line-soft);border-radius:var(--r);padding:26px;box-shadow:var(--shadow);text-align:center}
.gen-card h3{font-family:var(--f-display);font-weight:400;font-size:21px;color:var(--forest);margin-bottom:8px}
.gen-card p{font-size:15px;color:var(--ink-2)}
.gen-dark{background:var(--forest);border-color:var(--forest)}
.gen-dark h3{color:#fff}
.gen-dark p{color:rgba(255,255,255,.88)}
.gen-ico{display:block;width:40px;height:38px;margin:0 auto 12px;background:var(--green);
  -webkit-mask:url('assets/heart-mask.png') no-repeat center/contain;mask:url('assets/heart-mask.png') no-repeat center/contain}
.gen-ico.gi-2{background:var(--coral)}
.gen-ico.gi-3{background:#fff}

/* family risk meter: fill runs green -> coral (risk rising) */
.risk-fill{background:linear-gradient(90deg,var(--orange),var(--coral-btn))}

@media (max-width:940px){
  .gen-flow{grid-template-columns:1fr}
  .gen-flow .t65-arrow{transform:rotate(90deg);height:30px;align-self:center;justify-self:center}
}

/* ================= CHAT WIDGET ================= */
#bp-chat{position:fixed;right:20px;bottom:20px;z-index:300;font-family:var(--f-body)}
.bp-chat-toggle{display:inline-flex;align-items:center;gap:9px;background:var(--forest);color:#fff;
  border:none;border-radius:999px;padding:13px 20px;font-size:15.5px;font-weight:600;cursor:pointer;
  box-shadow:0 8px 24px -8px rgba(31,68,50,.6)}
.bp-chat-toggle:hover{background:var(--green-700)}
.bp-chat-toggle svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round}
.bp-chat-toggle[aria-expanded="true"]{display:none}
.bp-chat-panel{position:absolute;right:0;bottom:0;width:min(370px,calc(100vw - 40px));height:min(520px,calc(100vh - 40px));
  background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-lg);display:flex;flex-direction:column;overflow:hidden}
/* An author-sheet `display` ALWAYS beats the UA sheet's [hidden]{display:none},
   so the panel rendered open on load and covered the hero on mobile. */
.bp-chat-panel[hidden]{display:none}
.bp-chat-head{display:flex;align-items:center;justify-content:space-between;padding:15px 18px;background:var(--forest);color:#fff}
.bp-chat-head strong{font-size:16px}
.bp-chat-close{background:none;border:none;color:#fff;font-size:26px;line-height:1;cursor:pointer;padding:0 4px}
.bp-chat-log{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;background:var(--paper)}
.bp-msg{max-width:85%;padding:11px 14px;border-radius:14px;font-size:15px;line-height:1.5}
.bp-bot{background:var(--mint-2);color:var(--ink-2);border-bottom-left-radius:4px;align-self:flex-start}
.bp-user{background:var(--coral-btn);color:#fff;border-bottom-right-radius:4px;align-self:flex-end}
.bp-chat-form{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line-soft)}
.bp-chat-form input{flex:1;border:1.5px solid var(--line);border-radius:999px;padding:11px 15px;font-size:15px;font-family:inherit}
.bp-chat-form input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(59,104,81,.13)}
.bp-chat-form button{background:var(--coral-btn);color:#fff;border:none;border-radius:999px;padding:0 18px;font-weight:600;cursor:pointer}
.bp-chat-fine{margin:0;padding:0 14px 12px;font-size:11.5px;color:var(--muted);text-align:center}
@media (max-width:520px){#bp-chat{right:12px;bottom:12px}.bp-chat-toggle span{display:none}.bp-chat-toggle{padding:14px}}

/* ================= INTRO VIDEO ================= */
/* Compact thumbnail sitting beside the section copy, just below the fold.
   Clicking it opens the lightbox player at the end of the page. */
.stakes-top{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:40px;align-items:start;
  margin-bottom:clamp(40px,5vw,64px)}
.stakes-top .sec-head{margin-bottom:0}

.video-thumb{position:relative;display:block;width:100%;padding:0;border:none;cursor:pointer;
  border-radius:var(--r-lg);overflow:hidden;background:#000;aspect-ratio:1;
  box-shadow:var(--shadow-lg);transition:transform .22s ease,box-shadow .22s ease}
.video-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.video-thumb:hover,.video-thumb:focus-visible{transform:translateY(-4px)}
.video-thumb:focus-visible{outline:3px solid var(--coral-btn);outline-offset:3px}

.video-thumb-scrim{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(31,68,50,.12) 0%,rgba(31,68,50,.10) 45%,rgba(31,68,50,.72) 100%);
  transition:background .22s ease}
.video-thumb:hover .video-thumb-scrim{background:linear-gradient(180deg,rgba(31,68,50,.24) 0%,rgba(31,68,50,.22) 45%,rgba(31,68,50,.78) 100%)}

.video-thumb-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.94);box-shadow:0 6px 20px rgba(0,0,0,.32);transition:transform .22s ease}
.video-thumb-play svg{width:24px;height:24px;fill:var(--forest);margin-left:3px}
.video-thumb:hover .video-thumb-play{transform:translate(-50%,-50%) scale(1.09)}

.video-thumb-title{margin-top:12px;font-size:14px;font-weight:600;color:var(--ink-2);
  text-align:center;line-height:1.35;max-width:260px}
.video-thumb-cap{position:absolute;left:0;right:0;bottom:0;padding:14px 16px;
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  font-family:var(--f-body);font-size:.94rem;font-weight:600;color:#fff;text-align:left}
.video-thumb-time{font-size:.82rem;font-weight:500;opacity:.85;font-variant-numeric:tabular-nums}

/* ---- lightbox player ---- */
.video-lightbox{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:24px;
  background:rgba(15,32,24,.82);backdrop-filter:blur(4px);animation:vl-in .18s ease both}
/* An author-sheet display always beats the UA sheet's [hidden]{display:none}. */
.video-lightbox[hidden]{display:none}
@keyframes vl-in{from{opacity:0}to{opacity:1}}
.video-lightbox-inner{position:relative;width:min(560px,100%);max-height:calc(100vh - 48px)}
.intro-video{display:block;width:100%;height:auto;max-height:calc(100vh - 48px);
  border-radius:var(--r-lg);background:#000;box-shadow:var(--shadow-lg)}
.video-lightbox-close{position:absolute;top:-46px;right:0;width:38px;height:38px;border-radius:50%;
  border:none;cursor:pointer;display:grid;place-items:center;background:rgba(255,255,255,.92)}
.video-lightbox-close svg{width:19px;height:19px;stroke:var(--forest);stroke-width:2.2;
  stroke-linecap:round;fill:none}
.video-lightbox-close:hover{background:#fff}
.video-lightbox-close:focus-visible{outline:3px solid var(--coral-btn);outline-offset:3px}

@media (max-width:900px){
  .stakes-top{grid-template-columns:1fr;gap:28px}
  .video-thumb{max-width:280px}
}
@media (prefers-reduced-motion:reduce){
  .video-thumb,.video-thumb-play,.video-thumb-scrim{transition:none}
  .video-thumb:hover,.video-thumb:focus-visible{transform:none}
  .video-lightbox{animation:none}
}