/* ============================================================
   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 */
  /* Brand: Moranga (display) + Roobert (text). Both commercial; these
     are stand-ins until the licensed webfonts arrive from Abraham. */
  --f-body:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --f-display:'Fraunces',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);
  font-variation-settings:'SOFT' 22,'opsz' 40;
}
.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;
  font-variation-settings:'SOFT' 24,'opsz' 60;
}
.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:.15em;text-transform:uppercase;color:var(--coral-ink)}
.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:26px;border-radius:50%;background:#fff;border:1px solid var(--line-soft);
  display:grid;place-content:center;text-align:center;gap:5px;padding:18px;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:20px;font-weight:400;color:var(--forest);line-height:1.2}
.hub-core-inner span{font-size:13.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}
}