/* ============================================================
   HELIOS RE — DESIGN SYSTEM / BASE STYLES
   Parametric insurance & risk intelligence — premium, minimal,
   institutional, data-driven visual language.
   ============================================================ */

/* ---------- Design tokens ---------- */
:root{
  /* Brand palette — derived from the Helios Re mark and site */
  --olive-900:#2E3A1F;
  --olive-800:#3E4C2A;
  --olive-700:#4C5D34;
  --olive-600:#5C6E3D;   /* primary brand green */
  --olive-500:#6E8148;
  --olive-400:#8A9C68;
  --olive-300:#A8B98D;
  --olive-100:#E7ECDC;
  --olive-50:#F1F4E9;

  --forest-900:#1E2415;
  --forest-800:#262E1B;
  --forest-700:#2F3820;   /* deep band background */

  --ink-900:#12140F;
  --ink-800:#181B15;      /* near-black charcoal, brand secondary */
  --ink-700:#22261D;
  --ink-600:#3A4032;

  --stone-900:#1F231D;    /* body text */
  --stone-700:#454B3E;
  --stone-500:#6C7263;    /* muted text */
  --stone-300:#A8AC9E;
  --stone-200:#D8D6CB;
  --stone-100:#E8E6DC;

  --cream-100:#F7F6F2;    /* alt section background */
  --cream-050:#FBFAF7;
  --white:#FFFFFF;

  --line:#E3E1D6;
  --line-dark:#333A28;

  --danger:#A6432F;
  --gold:#B08D42;

  /* Typography */
  --font-head:'Manrope', 'Helvetica Neue', Arial, sans-serif;
  --font-body:'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:'IBM Plex Mono', 'SFMono-Regular', Menlo, Consolas, monospace;

  /* Scale */
  --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.92rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.08rem);
  --step-1:  clamp(1.2rem, 1.1rem + 0.4vw, 1.35rem);
  --step-2:  clamp(1.45rem, 1.3rem + 0.7vw, 1.75rem);
  --step-3:  clamp(1.8rem, 1.5rem + 1.2vw, 2.4rem);
  --step-4:  clamp(2.3rem, 1.8rem + 2vw, 3.4rem);
  --step-5:  clamp(2.9rem, 2.1rem + 3.4vw, 4.6rem);

  --space-1: 0.5rem;
  --space-2: 0.85rem;
  --space-3: 1.4rem;
  --space-4: 2.2rem;
  --space-5: 3.6rem;
  --space-6: 5.6rem;
  --space-7: 8rem;

  --radius-s: 3px;
  --radius-m: 6px;
  --radius-l: 10px;

  --container: 1240px;
  --container-narrow: 860px;

  --shadow-s: 0 1px 2px rgba(18,20,15,0.06), 0 1px 1px rgba(18,20,15,0.04);
  --shadow-m: 0 8px 24px rgba(18,20,15,0.08), 0 2px 6px rgba(18,20,15,0.05);
  --shadow-l: 0 20px 50px rgba(18,20,15,0.14);

  --ease: cubic-bezier(.4,0,.2,1);
  --dur-s: 180ms;
  --dur-m: 360ms;
  --dur-l: 640ms;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}
html,body{ height:100%; }
body{
  font-family:var(--font-body);
  font-size:var(--step-0);
  line-height:1.6;
  color:var(--stone-900);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video,canvas{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; padding:0; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
input,select,textarea{ font:inherit; color:inherit; }
table{ border-collapse:collapse; width:100%; }

/* ---------- Typography ---------- */
h1,h2,h3,h4{
  font-family:var(--font-head);
  font-weight:700;
  line-height:1.12;
  letter-spacing:-0.01em;
  color:var(--ink-900);
}
h1{ font-size:var(--step-5); }
h2{ font-size:var(--step-4); }
h3{ font-size:var(--step-2); }
h4{ font-size:var(--step-1); }
p{ max-width:65ch; }
.lede{ font-size:var(--step-1); color:var(--stone-700); font-weight:400; }
.eyebrow{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--font-mono);
  font-size:var(--step--1);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--olive-600);
  font-weight:600;
}
.eyebrow::before{
  content:"";
  width:18px; height:1px; background:var(--olive-600);
  display:inline-block;
}
.text-muted{ color:var(--stone-500); }
.mono{ font-family:var(--font-mono); }

/* ---------- Layout helpers ---------- */
.container{ max-width:var(--container); margin-inline:auto; padding-inline:var(--space-4); }
.container-narrow{ max-width:var(--container-narrow); margin-inline:auto; padding-inline:var(--space-4); }
section{ padding-block:var(--space-6); position:relative; }
.section-tight{ padding-block:var(--space-5); }
.section-head{ max-width:56ch; margin-bottom:var(--space-5); }
.section-head.center{ margin-inline:auto; text-align:center; }
.bg-cream{ background:var(--cream-100); }
.bg-ink{ background:var(--ink-800); color:var(--cream-050); }
.bg-forest{ background:var(--forest-700); color:var(--cream-050); }
.bg-ink h1,.bg-ink h2,.bg-ink h3,.bg-ink h4,
.bg-forest h1,.bg-forest h2,.bg-forest h3,.bg-forest h4{ color:var(--white); }
.bg-ink .text-muted,.bg-forest .text-muted{ color:var(--stone-300); }

.has-bg-video{ position:relative; overflow:hidden; }
.bg-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.bg-video-overlay{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(18,20,15,.75) 0%, rgba(18,20,15,.92) 100%); z-index:1; }
.has-bg-video > .container{ position:relative; z-index:2; }

.grid{ display:grid; gap:var(--space-4); }
.g-2{ grid-template-columns:repeat(2,1fr); }
.g-3{ grid-template-columns:repeat(3,1fr); }
.g-4{ grid-template-columns:repeat(4,1fr); }
.flex{ display:flex; }
.flex-center{ display:flex; align-items:center; }
.flex-between{ display:flex; align-items:center; justify-content:space-between; }
.gap-1{gap:var(--space-1);} .gap-2{gap:var(--space-2);} .gap-3{gap:var(--space-3);}

.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:var(--space-3); top:-60px;
  background:var(--ink-900); color:var(--white);
  padding:.7em 1.2em; z-index:1000; border-radius:var(--radius-s);
  transition:top var(--dur-s) var(--ease);
}
.skip-link:focus{ top:var(--space-3); }

:focus-visible{ outline:2px solid var(--olive-600); outline-offset:2px; }

/* ---------- Reveal-on-scroll ---------- */
[data-reveal]{
  opacity:0; transform:translateY(22px);
  transition:opacity var(--dur-l) var(--ease), transform var(--dur-l) var(--ease);
}
[data-reveal].is-visible{ opacity:1; transform:none; }
[data-reveal-group] > *{ transition-delay:calc(var(--i,0) * 80ms); }

/* ---------- Utility badges ---------- */
.tag{
  display:inline-flex; align-items:center; gap:.4em;
  font-family:var(--font-mono); font-size:.75rem; letter-spacing:.06em;
  text-transform:uppercase; font-weight:600;
  padding:.35em .7em; border-radius:100px;
  border:1px solid var(--line); color:var(--stone-500);
  background:var(--cream-050);
}
.tag.demo{ color:var(--olive-700); border-color:var(--olive-300); background:var(--olive-50); }
.tag.demo::before{ content:"●"; font-size:.6em; color:var(--olive-600); }

hr.rule{ border:0; border-top:1px solid var(--line); margin-block:var(--space-4); }