/* =============================================================================
   N-Sense — site styles
   -----------------------------------------------------------------------------
   One stylesheet, no build step. Everything visual is driven by the custom
   properties in section 1; change a token there and it propagates site-wide.

   Colour and type come from Branding_Pack/ (Deep Green + Blue identity, 2026).

   CONTENTS
     1.  Tokens
     2.  Reset & base elements
     3.  Layout primitives      .container .section .grid .split
     4.  Typography helpers     .eyebrow .display .lead .measure
     5.  Buttons
     6.  Header & navigation
     7.  Hero
     8.  Cards
     9.  Features & figures
     10. Team
     11. Newsroom
     12. Forms
     13. Documents (PDF)
     14. Callouts, stats & pills
     15. Prose (privacy policy)
     16. Footer
     17. Motion (reveal on scroll)
     18. Investor page (scoped to .investor)
     19. Utilities & print
   ========================================================================== */


/* =============================================================================
   1. TOKENS
   ========================================================================== */
:root {
  /* --- Brand palette — Branding_Pack/README.txt ---------------------------- */
  --deep-pine:    #0C3B29;  /* primary dark: text, headlines, dark surfaces   */
  --forest:       #0F4C34;  /* depth, gradient partner to Deep Pine           */
  --growth-green: #1F7A47;  /* primary brand / accents                        */
  --emerald:      #12A67A;  /* positive / highlights                          */
  --signal-lime:  #A6E22E;  /* bright accent — use sparingly                  */
  --ocean-blue:   #1668C0;  /* tech accent, subtitles                         */
  --azure:        #22B8E8;  /* links, data points                             */
  --mist-brand:   #EAF1F5;  /* cool neutral background                        */
  --paper-brand:  #FAF7F0;  /* warm off-white background                      */

  /* --- Light surfaces ------------------------------------------------------
     The brand sheet's Paper (#FAF7F0) is a warm cream. On screen it reads
     heritage rather than instrument, so the site runs a brighter, cooler pair
     of grounds instead. The brand values are kept above for print and for any
     material that has to match the sheet exactly. Dark surfaces, accents and
     type are unchanged brand colours - the contrast between cool, bright
     surfaces and deep soil green is the whole idea.                         */
  --paper:      #F6FAFB;   /* primary light ground                           */
  --mist:       #E9F2F7;   /* cool alternate band                            */

  /* --- Derived neutrals ---------------------------------------------------- */
  --white:      #FFFFFF;
  --ink:        #0E1F19;   /* body text on light                              */
  --ink-muted:  #47605B;   /* secondary text on light                         */
  --ink-faint:  #586E6A;   /* captions, meta - AA on both light grounds       */
  --line:       #DCE6EA;   /* hairlines on light                              */
  --line-cool:  #CBDCE5;   /* hairlines on mist                               */

  /* On dark surfaces */
  --on-dark:        #F3F7F4;
  --on-dark-muted:  #B9D2C4;
  --on-dark-line:   rgba(255, 255, 255, .16);

  /* --- Typography ---------------------------------------------------------- */
  --font-display: "Poppins", "Trebuchet MS", "Segoe UI", sans-serif;
  --font-body:    "Inter", Calibri, "Helvetica Neue", Arial, sans-serif;
  /* Small labels site-wide: eyebrows, roles, footer headings, stat captions.
     Monospace reads as instrument readout rather than marketing copy. */
  --font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-display: clamp(2.5rem, 1.6rem + 3.9vw, 4.25rem);
  --fs-h1:      clamp(2rem, 1.5rem + 2.2vw, 3.1rem);
  --fs-h2:      clamp(1.65rem, 1.3rem + 1.6vw, 2.4rem);
  --fs-h3:      clamp(1.25rem, 1.1rem + 0.7vw, 1.55rem);
  --fs-h4:      1.125rem;
  --fs-body:    1.0625rem;
  --fs-small:   0.875rem;
  --fs-eyebrow: 0.75rem;

  --lh-body:    1.65;
  --lh-head:    1.18;
  --track-tight: -0.02em;
  --track-wide:  0.16em;

  /* --- Layout -------------------------------------------------------------- */
  --container:        1080px;
  --container-wide:   1240px;
  --container-narrow: 720px;
  --gutter:           clamp(1.25rem, 4vw, 2rem);
  --section-pad:      clamp(3.5rem, 7vw, 6.5rem);
  --header-h:         88px;

  /* Small, precise radii. Instrument panel, not app icon. */
  --radius:    4px;
  --radius-lg: 10px;

  --shadow-sm: 0 1px 2px rgba(12, 59, 41, .06), 0 4px 12px rgba(12, 59, 41, .05);
  --shadow-md: 0 12px 34px rgba(12, 59, 41, .12);
  --shadow-lg: 0 24px 60px rgba(12, 59, 41, .18);

  /* --- Signature textures --------------------------------------------------
     The contour pattern echoes the lidar elevation maps the product is built
     on. It is a data-URI so the site stays dependency-free.                  */
  --contours:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='560' viewBox='0 0 560 560'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1.1'%3E%3Cpath d='M-40 300c90-70 190-40 270-95s150-60 250-10 130 60 200 20'/%3E%3Cpath d='M-40 350c90-70 190-40 270-95s150-60 250-10 130 60 200 20'/%3E%3Cpath d='M-40 400c90-70 190-40 270-95s150-60 250-10 130 60 200 20'/%3E%3Cpath d='M-40 450c90-70 190-40 270-95s150-60 250-10 130 60 200 20'/%3E%3Cpath d='M-40 500c90-70 190-40 270-95s150-60 250-10 130 60 200 20'/%3E%3Cpath d='M-40 550c90-70 190-40 270-95s150-60 250-10 130 60 200 20'/%3E%3C/g%3E%3C/svg%3E");

  /* A faint survey grid for the light bands - the flip side of the contour
     texture on the dark ones. Reads as a map sheet, not as decoration. */
  --survey-grid:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='%230C3B29' stroke-opacity='0.05' stroke-width='1'%3E%3Cpath d='M48 0H0v48'/%3E%3C/g%3E%3C/svg%3E");

  /* The three-stop wash from the logo, reused as a hairline rule. */
  --brand-rule: linear-gradient(90deg, var(--forest), var(--growth-green) 45%, var(--emerald) 72%, var(--signal-lime));

  /* The prescription ramp: the low-to-optimum scale off a nutrient map.
     Deficient red, through amber, to Signal Lime and Growth Green. */
  --zone-ramp: linear-gradient(90deg, #C0392B, #E8A33D 38%, var(--signal-lime) 68%, var(--growth-green));
}


/* =============================================================================
   2. RESET & BASE ELEMENTS
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, video, canvas, iframe, svg { max-width: 100%; }
img { height: auto; display: block; border: 0; }

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 .6em;
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--lh-head);
  letter-spacing: var(--track-tight);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); font-weight: 600; }

p { margin: 0 0 1.15rem; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 1.15rem; padding-left: 1.2rem; }
li { margin-bottom: .5rem; }
li::marker { color: var(--growth-green); }

strong { font-weight: 600; }
sub, sup { line-height: 0; }

a { color: var(--ocean-blue); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--azure); }

hr { border: 0; height: 1px; background: var(--line); margin: 2.5rem 0; }

/* Visible focus for keyboard users — never remove this. */
:focus-visible {
  outline: 2px solid var(--ocean-blue);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--deep-pine); color: var(--on-dark);
  padding: .85rem 1.25rem; font-weight: 600; text-decoration: none;
}
.skip-link:focus { left: 0; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}


/* =============================================================================
   3. LAYOUT PRIMITIVES
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--wide   { max-width: var(--container-wide); }
.container--narrow { max-width: var(--container-narrow); }

/* --- Sections -----------------------------------------------------------
   Pick a surface with a modifier. Text colours follow automatically, so a
   section can be recoloured by editing one class in the HTML.            */
.section { padding-block: var(--section-pad); position: relative; }
.section--tight { padding-block: clamp(2.25rem, 4vw, 3.5rem); }

.section--paper { background-color: var(--paper); background-image: var(--survey-grid); }
.section--white { background-color: var(--white); }
.section--mist  { background-color: var(--mist);  background-image: var(--survey-grid); }

.section--pine,
.section--forest {
  color: var(--on-dark);
  background: var(--deep-pine);
  isolation: isolate;
}
.section--forest {
  background: linear-gradient(165deg, var(--forest), var(--deep-pine) 65%);
}

/* Contour texture on the dark surfaces. */
.section--pine::before,
.section--forest::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background-image: var(--contours);
  background-size: 700px auto;
  opacity: .05;
  pointer-events: none;
}

.section--pine   h1, .section--pine   h2, .section--pine   h3, .section--pine   h4,
.section--forest h1, .section--forest h2, .section--forest h3, .section--forest h4 { color: var(--on-dark); }
.section--pine   p,  .section--pine   li,
.section--forest p,  .section--forest li { color: var(--on-dark-muted); }
.section--pine   li::marker,
.section--forest li::marker { color: var(--signal-lime); }
.section--pine   a,
.section--forest a { color: var(--signal-lime); }
.section--pine   a:hover,
.section--forest a:hover { color: var(--white); }
.section--pine   strong,
.section--forest strong { color: var(--on-dark); }

/* --- Section headers ----------------------------------------------------- */
.section__head {
  max-width: 46rem;
  margin: 0 0 clamp(2rem, 4vw, 3.25rem);
}
.section__head--center { margin-inline: auto; text-align: center; }
.section__head > :last-child { margin-bottom: 0; }

/* --- Grids --------------------------------------------------------------- */
.grid { display: grid; gap: clamp(1.75rem, 3vw, 2.75rem); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 940px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
}

/* --- Split (media beside copy) ------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}
.split--narrow-media { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.split--wide-media   { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
@media (max-width: 860px) {
  .split, .split--narrow-media, .split--wide-media { grid-template-columns: minmax(0, 1fr); }
}


/* =============================================================================
   4. TYPOGRAPHY HELPERS
   ========================================================================== */

/* Small tracked label above a heading, with the brand's lime tick. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0 0 1rem;
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--growth-green);
}
.eyebrow::before {
  content: "";
  width: 1.5rem; height: 3px; flex: none;
  border-radius: 2px;
  background: var(--brand-rule);
}
.section--pine .eyebrow,
.section--forest .eyebrow { color: var(--signal-lime); }
.section__head--center .eyebrow,
.hero--centered .eyebrow,
.center .eyebrow { justify-content: center; }

/* Oversized opening statement — hero and investor page only. */
.display {
  font-size: var(--fs-display);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.04;
  margin-bottom: .5em;
}

.lead {
  font-size: clamp(1.0625rem, 1rem + 0.45vw, 1.3rem);
  line-height: 1.55;
  color: var(--ink-muted);
}
.section--pine .lead,
.section--forest .lead { color: var(--on-dark-muted); }

.measure  { max-width: 62ch; }
.measure--wide { max-width: 74ch; }
.center   { text-align: center; }
.center .measure,
.measure.center { margin-inline: auto; }


/* =============================================================================
   5. BUTTONS
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: .04em;
  text-decoration: none;
  padding: .8rem 1.6rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .18s ease, color .18s ease,
              border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--growth-green);
  border-color: var(--growth-green);
  color: var(--white);
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover { background: var(--deep-pine); border-color: var(--deep-pine); color: var(--white); }

.btn--ghost { background: transparent; border-color: var(--growth-green); color: var(--growth-green); }
.btn--ghost:hover { background: var(--growth-green); color: var(--white); }

.btn--light { background: var(--signal-lime); border-color: var(--signal-lime); color: var(--deep-pine); }
.btn--light:hover { background: var(--white); border-color: var(--white); color: var(--deep-pine); }

/* Ghost buttons sitting on a dark surface. */
.section--pine .btn--ghost,
.section--forest .btn--ghost,
.hero .btn--ghost { border-color: var(--on-dark-line); color: var(--on-dark); }
.section--pine .btn--ghost:hover,
.section--forest .btn--ghost:hover,
.hero .btn--ghost:hover { background: var(--on-dark); color: var(--deep-pine); border-color: var(--on-dark); }

/* Row of buttons that wraps cleanly on small screens. */
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.center .btn-row, .btn-row--center { justify-content: center; }

/* Plain text link that behaves like a button in a card footer. */
.link-arrow {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: var(--fs-small); font-weight: 600;
  text-decoration: none; letter-spacing: .02em;
}
.link-arrow::after { content: "\2192"; transition: transform .18s ease; }
.link-arrow:hover::after { transform: translateX(3px); }


/* =============================================================================
   6. HEADER & NAVIGATION
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(246, 250, 251, .92);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid var(--line);
}
/* The brand gradient as a 3px cap across the top of every page. */
.site-header::before {
  content: "";
  display: block; height: 3px;
  background: var(--brand-rule);
}

.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
  min-height: var(--header-h);
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.site-logo { display: inline-flex; align-items: center; text-decoration: none; flex: none; }
.site-logo img { width: 220px; height: auto; }

/* --- Desktop nav ---------------------------------------------------------
   The items stretch to the full height of the header. That gives a generous
   hover target and, more importantly, puts the bottom of each item exactly on
   the header's bottom edge - so the dropdown opens flush against it with no
   dead strip in between for the pointer to fall through. */
.nav { display: flex; align-self: stretch; }
.nav__list {
  display: flex; align-items: stretch; gap: clamp(.75rem, 1.6vw, 1.6rem);
  list-style: none; margin: 0; padding: 0;
}
.nav__item { position: relative; margin: 0; display: flex; align-items: center; }

.nav__link,
.nav__toggle {
  display: inline-flex; align-items: center; gap: .3rem;
  font-family: var(--font-body);
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink);
  background: none; border: 0; padding: .55rem 0;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: color .15s ease;
  /* Anchors the current-page underline to the text. Without this it resolves
     against .nav__item, which is the full height of the header, and the rule
     drifts down to the header's bottom edge. */
  position: relative;
}
.nav__link:hover, .nav__toggle:hover,
.nav__toggle[aria-expanded="true"] { color: var(--growth-green); }

/* Current page marker. */
.nav__link[aria-current="page"],
.nav__item--current > .nav__toggle { color: var(--growth-green); }
.nav__link[aria-current="page"]::after,
.nav__item--current > .nav__toggle::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -2px;
  height: 2px; border-radius: 2px;
  background: var(--brand-rule);
}

.nav__caret { width: .5rem; height: .5rem; flex: none; transition: transform .18s ease; }
.nav__toggle[aria-expanded="true"] .nav__caret { transform: rotate(180deg); }

.nav__menu {
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%);
  min-width: 240px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  list-style: none; margin: 0; padding: .4rem;
  display: none;
}
/* Belt and braces: a transparent strip directly under the item, so sub-pixel
   rounding can never open a one-pixel hole between item and menu. It is a
   descendant of the item, so the pointer crossing it keeps :hover alive.
   It only exists while the menu is open - left permanently on, it would eat
   pointer events from the 6px of page sitting just under the header. */
.nav__item--has-menu::after {
  content: "";
  position: absolute; top: 100%; left: 0; right: 0;
  height: 6px;
  display: none;
}
.nav__item--has-menu:hover::after,
.nav__item--has-menu:focus-within::after { display: block; }

.nav__item--has-menu:hover > .nav__menu,
.nav__item--has-menu:focus-within > .nav__menu,
.nav__toggle[aria-expanded="true"] + .nav__menu { display: block; }

.nav__menu li { margin: 0; }
.nav__menu a {
  display: block; padding: .6rem .85rem;
  border-radius: 8px;
  font-size: .9375rem; text-decoration: none; color: var(--ink);
}
.nav__menu a:hover { background: var(--mist); color: var(--deep-pine); }
.nav__menu a[aria-current="page"] { color: var(--growth-green); font-weight: 600; }

/* --- Mobile nav ---------------------------------------------------------- */
.nav-toggle {
  display: none;
  background: none; border: 1px solid var(--line); border-radius: 8px;
  padding: .45rem; cursor: pointer; color: var(--deep-pine);
}
.nav-toggle svg { width: 22px; height: 22px; }

@media (max-width: 1080px) {
  .nav-toggle { display: inline-flex; order: 3; }
  .nav { align-self: auto; }

  .nav {
    position: absolute; inset: 100% 0 auto 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    display: none;
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
  }
  .nav.is-open { display: block; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; padding: .5rem 0; }
  /* The drawer stacks, so the full-height flex item and the hover bridge from
     the desktop rules both have to go. */
  .nav__item { display: block; border-bottom: 1px solid var(--line); }
  .nav__item--has-menu::after { content: none; }
  .nav__item:last-child { border-bottom: 0; }
  .nav__link, .nav__toggle {
    width: 100%; padding: .95rem var(--gutter); justify-content: space-between;
  }
  .nav__link[aria-current="page"]::after,
  .nav__item--current > .nav__toggle::after { display: none; }
  .nav__menu {
    position: static; transform: none; display: none;
    border: 0; box-shadow: none; border-radius: 0;
    background: var(--mist); min-width: 0; padding: .25rem 0;
  }
  .nav__item--has-menu:hover > .nav__menu { display: none; }
  .nav__toggle[aria-expanded="true"] + .nav__menu { display: block; }
  .nav__menu a { border-radius: 0; padding-left: calc(var(--gutter) + 1rem); }
}


/* =============================================================================
   7. HERO
   ========================================================================== */
.hero {
  position: relative;
  isolation: isolate;
  color: var(--on-dark);
  background: linear-gradient(160deg, var(--forest) 0%, var(--deep-pine) 55%, #071F16 100%);
  padding-block: clamp(3.5rem, 7vw, 6rem);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute; inset: 0; z-index: -2;
  background-image: var(--contours);
  background-size: 820px auto;
  opacity: .07;
}
/* Emerald light bloom, top-right — depth without another image. */
.hero::after {
  content: "";
  position: absolute; z-index: -1;
  top: -30%; right: -15%; width: 60%; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(18, 166, 122, .30), transparent 65%);
  pointer-events: none;
}

.hero h1, .hero h2, .hero h3 { color: var(--on-dark); }
.hero p { color: var(--on-dark-muted); }
.hero .eyebrow { color: var(--signal-lime); }
.hero a:not(.btn) { color: var(--signal-lime); }

.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}
.hero--centered .hero__inner {
  grid-template-columns: minmax(0, 1fr);
  text-align: center;
  max-width: 52rem;
  margin-inline: auto;
}
.hero--centered .measure { margin-inline: auto; }
@media (max-width: 860px) { .hero__inner { grid-template-columns: minmax(0, 1fr); } }

/* Video / iframe embeds keep a 16:9 box. */
.embed {
  position: relative; width: 100%; padding-top: 56.25%;
  background: #000;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--on-dark-line);
}
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }


/* =============================================================================
   8. CARDS
   ========================================================================== */
.card {
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 2.4vw, 2rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--line-cool); }

.card h3, .card h4 { margin-bottom: .6rem; }
.card p { color: var(--ink-muted); }
.card ul { color: var(--ink-muted); }
.card > :last-child { margin-bottom: 0; }

/* Cards on a dark surface: glass instead of white. */
.section--pine .card,
.section--forest .card {
  background: rgba(255, 255, 255, .05);
  border-color: var(--on-dark-line);
  box-shadow: none;
}
.section--pine .card:hover,
.section--forest .card:hover {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(166, 226, 46, .45);
}
.section--pine .card p, .section--pine .card li,
.section--forest .card p, .section--forest .card li { color: var(--on-dark-muted); }

/* Media inside a card sits flush to the padded edges. */
.card__media {
  margin: calc(-1 * clamp(1.5rem, 2.4vw, 2rem)) calc(-1 * clamp(1.5rem, 2.4vw, 2rem)) 1.5rem;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  overflow: hidden;
  background: var(--mist);
}
.card__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

/* Round portrait-style media, used on the home page. The image is centred but
   the copy stays left-aligned — centred paragraphs are hard to read. */
.card--circle .card__media {
  margin: 0 auto 1.5rem;
  width: 200px; height: 200px;
  border-radius: 50%;
  border: 3px solid var(--mist);
}
.card--circle .card__media img { aspect-ratio: 1; height: 100%; }
.card--circle h3 { text-align: center; }
.section--pine .card--circle .card__media,
.section--forest .card--circle .card__media { border-color: rgba(255, 255, 255, .12); }

/* Push the footer link to the bottom so cards in a row line up. */
.card__actions { margin-top: auto; padding-top: 1.5rem; }

/* A card with no image, just a number and a claim (investor page). */
.card--stat .card__num {
  font-family: var(--font-display);
  font-size: .75rem; font-weight: 600;
  letter-spacing: var(--track-wide);
  color: var(--growth-green);
  margin-bottom: .75rem;
}
.section--pine .card--stat .card__num,
.section--forest .card--stat .card__num { color: var(--signal-lime); }


/* =============================================================================
   9. FEATURES & FIGURES
   ========================================================================== */
/* Alternating image / copy rows. Add .feature--reverse to flip. */
.feature {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
.feature + .feature { margin-top: clamp(3rem, 6vw, 5rem); }

/* On a tall feature row the image follows the reader down the copy. */
.feature__media { position: sticky; top: calc(var(--header-h) + 2rem); }
.feature--reverse .feature__media { order: 2; }

.feature__media img {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
@media (max-width: 860px) {
  .feature { grid-template-columns: minmax(0, 1fr); }
  .feature--reverse .feature__media { order: 0; }
  .feature__media { position: static; }
}

/* Standalone image with optional caption. */
.figure { margin: 0 0 2rem; }
.figure--flush { margin: 0; }
.figure img { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.figure figcaption {
  margin-top: .85rem;
  font-size: var(--fs-small);
  color: var(--ink-faint);
  text-align: center;
}
.section--pine .figure figcaption,
.section--forest .figure figcaption { color: var(--on-dark-muted); }


/* =============================================================================
   10. TEAM
   ========================================================================== */
.team-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3rem);
}
@media (max-width: 760px) { .team-grid { grid-template-columns: minmax(0, 1fr); } }

.person {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}
@media (max-width: 480px) {
  .person { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .person__bio { text-align: left; }
}

.person__photo {
  width: 132px; height: 132px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--mist);
  border: 3px solid rgba(255, 255, 255, .14);
}
.section--paper .person__photo,
.section--white .person__photo,
.section--mist .person__photo { border-color: var(--line); }

.person__name { margin-bottom: .15rem; font-size: 1.25rem; }
.person__role {
  margin: 0 0 .75rem;
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--growth-green);
}
.person__bio p { margin-bottom: .8rem; }
.person__bio-extra[hidden] { display: none; }

/* "Show more" toggle — the extra text stays readable with JS off. */
.disclosure {
  background: none; border: 0; padding: .35rem 0; margin-top: .35rem;
  font-family: var(--font-body);
  font-size: var(--fs-small); font-weight: 600;
  letter-spacing: .03em; cursor: pointer;
  color: var(--signal-lime);
  text-decoration: underline; text-underline-offset: 4px;
}
.section--paper .disclosure,
.section--white .disclosure,
.section--mist .disclosure { color: var(--growth-green); }

.mentor-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
@media (max-width: 860px) { .mentor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .mentor-grid { grid-template-columns: minmax(0, 1fr); } }

.mentor { text-align: center; }
.mentor img {
  width: 116px; height: 116px;
  border-radius: 50%; object-fit: cover;
  margin: 0 auto 1rem;
  background: var(--mist);
  border: 3px solid var(--line);
}
.mentor h4 { margin-bottom: .25rem; }
.mentor p { font-size: var(--fs-small); color: var(--ink-muted); margin: 0; }


/* =============================================================================
   11. NEWSROOM
   ========================================================================== */
.news-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }

.news-item {
  margin: 0;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--on-dark-line);
  border-radius: var(--radius-lg);
  border-left: 3px solid var(--growth-green);
  transition: background-color .2s ease, border-left-color .2s ease;
}
.news-item:hover { background: rgba(255, 255, 255, .09); border-left-color: var(--signal-lime); }
.news-item h3 { font-size: 1.1875rem; margin-bottom: .35rem; }
.news-item p { margin-bottom: .6rem; }

.section--paper .news-item,
.section--white .news-item,
.section--mist .news-item {
  background: var(--white);
  border-color: var(--line);
  border-left-color: var(--growth-green);
  box-shadow: var(--shadow-sm);
}


/* =============================================================================
   12. FORMS
   ========================================================================== */
.form {
  display: grid; gap: 1.25rem;
  max-width: 34rem;
  margin-inline: auto;
  text-align: left;
}
.field { display: grid; gap: .45rem; }
.field label { font-size: var(--fs-small); font-weight: 600; }

.field input,
.field textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  padding: .8rem .95rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  width: 100%;
}
.field input:focus, .field textarea:focus { border-color: var(--ocean-blue); }
.field textarea { min-height: 150px; resize: vertical; }

/* Honeypot. Off-screen rather than display:none — bots skip fields that are
   explicitly hidden, but happily fill one they can "see" in the markup.
   php/lib.php drops any submission that arrives with this filled in. */
.hp {
  position: absolute !important;
  left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

.form__note { font-size: .8125rem; line-height: 1.55; color: var(--ink-faint); }
.section--pine .form__note,
.section--forest .form__note { color: var(--on-dark-muted); }
.section--pine .form__note a,
.section--forest .form__note a { color: var(--on-dark); }


/* =============================================================================
   13. DOCUMENTS (PDF)
   ========================================================================== */
.doc { max-width: 900px; margin-inline: auto; }

/* Two handouts side by side. The frame keeps its height, so each PDF simply
   renders narrower - #view=Fit in the URL scales the whole page down to suit. */
.doc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.doc-grid .doc { max-width: none; margin-inline: 0; }
@media (max-width: 860px) {
  .doc-grid { grid-template-columns: minmax(0, 1fr); }
}

.doc__title {
  font-size: 1.125rem;
  margin-bottom: .75rem;
  text-align: center;
}

.doc__frame {
  display: block;
  /* Sized to the page, not to the column. Height is the fixed dimension and
     the width follows from it, so a portrait page fills the frame instead of
     floating in dark letterbox bands.

     --doc-ratio is page aspect (US Letter is 8.5/11 = 0.773) minus an
     allowance for the viewer's toolbar, which eats height and is a different
     size in every browser. Tune it here if your handouts are a different page
     size - A4 is 0.707, US Legal 0.607. */
  --doc-height: min(70vh, 640px);
  --doc-ratio: 0.75;
  height: var(--doc-height);
  width: calc(var(--doc-height) * var(--doc-ratio));
  max-width: 100%;          /* never wider than its column on small screens */
  margin-inline: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
  overflow: hidden;
}
.section--pine .doc__frame,
.section--forest .doc__frame { border-color: var(--on-dark-line); }

/* Shown when the browser cannot embed the PDF, or the file is not there yet. */
.doc__fallback {
  display: grid; place-content: center; gap: 1rem;
  height: 100%; padding: 2rem; text-align: center;
  background: var(--mist);
  color: var(--ink-muted);
}
/* Narrow screens: the column is now the limiting dimension, so let the height
   follow the width instead of the other way round. Without this the frame keeps
   its 640px height and the page shrinks into vertical dark bands. */
@media (max-width: 700px) {
  .doc__frame {
    /* Whichever is smaller: the column, or whatever keeps the frame inside
       the viewport. Without the second term a tablet gets a frame taller
       than the screen. */
    width: min(100%, calc(80vh * 0.75));
    height: auto;
    aspect-ratio: 3 / 4;
  }
}

.doc__actions { margin-top: 1.25rem; text-align: center; }


/* =============================================================================
   14. CALLOUTS, STATS & PILLS
   ========================================================================== */
.callout {
  border-left: 3px solid var(--emerald);
  padding: .35rem 0 .35rem 1.35rem;
  margin: 1.75rem 0;
}
.callout strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem);
  line-height: 1.15;
  letter-spacing: var(--track-tight);
  color: var(--deep-pine);
}
.section--pine .callout strong,
.section--forest .callout strong { color: var(--signal-lime); }

.pill-list {
  list-style: none; padding: 0; margin: 1.25rem 0 0;
  display: flex; flex-wrap: wrap; gap: .5rem;
}
.pill-list--center { justify-content: center; }
.pill-list li {
  margin: 0; padding: .35rem .9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: .8125rem; font-weight: 500;
  color: var(--ink-muted);
  background: var(--white);
}
.section--pine .pill-list li,
.section--forest .pill-list li,
.hero .pill-list li {
  border-color: var(--on-dark-line);
  background: rgba(255, 255, 255, .06);
  color: var(--on-dark);
}

/* Process chain: Measure -> Analyse -> Prescribe -> Apply */
.flow {
  display: flex; flex-wrap: wrap; gap: .5rem .75rem;
  list-style: none; margin: 1.25rem 0; padding: 0;
  font-family: var(--font-display);
  font-size: .9375rem; font-weight: 500;
}
.flow li {
  display: flex; align-items: center; gap: .75rem;
  margin: 0; padding: .55rem 1rem;
  border-radius: var(--radius);
  background: rgba(31, 122, 71, .08);
  color: var(--deep-pine);
}
.flow li + li::before {
  content: "\2192";
  margin-left: -1.55rem;
  color: var(--emerald);
}
.section--pine .flow li,
.section--forest .flow li,
.hero .flow li { background: rgba(255, 255, 255, .07); color: var(--on-dark); }
.section--pine .flow li + li::before,
.section--forest .flow li + li::before,
.hero .flow li + li::before { color: var(--signal-lime); }


/* =============================================================================
   15. PROSE (privacy policy and other long text)
   ========================================================================== */
.prose { max-width: 68ch; margin-inline: auto; }
.prose h2 { font-size: 1.4rem; margin-top: 2.75rem; }
.prose h3 { font-size: 1.1rem; margin-top: 1.9rem; }
.prose h2:first-of-type { margin-top: 2rem; }
.prose ul { padding-left: 1.2rem; }


/* =============================================================================
   16. FOOTER
   ========================================================================== */
.site-footer {
  background: var(--deep-pine);
  color: var(--on-dark-muted);
  padding-block: clamp(2.5rem, 5vw, 4rem) 2rem;
}
.site-footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
}
@media (max-width: 780px) {
  .site-footer__inner { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
}

.site-footer__logo img { width: 168px; height: auto; margin-bottom: 1rem; }
.site-footer__tagline { font-size: var(--fs-small); max-width: 30ch; margin: 0; }

.footer-heading {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow); font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--on-dark);
  margin: 0 0 .9rem;
}
.footer-nav { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.footer-nav li { margin: 0; }
.footer-nav a { font-size: var(--fs-small); color: var(--on-dark-muted); text-decoration: none; }
.footer-nav a:hover { color: var(--signal-lime); text-decoration: underline; }

.social { display: flex; gap: .6rem; list-style: none; padding: 0; margin: 0; }
.social li { margin: 0; }
.social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--on-dark-line);
  color: var(--on-dark);
  text-decoration: none;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.social a:hover { background: var(--signal-lime); border-color: var(--signal-lime); color: var(--deep-pine); }
.social svg { width: 18px; height: 18px; fill: currentColor; }
.social--center { justify-content: center; }

.site-footer__bar {
  display: flex; flex-wrap: wrap; gap: .75rem 1.5rem;
  justify-content: space-between; align-items: center;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--on-dark-line);
  font-size: .8125rem;
}
.site-footer__bar p { margin: 0; }
.site-footer__bar a { color: var(--on-dark); }
.site-footer__bar a:hover { color: var(--signal-lime); }


/* =============================================================================
   17. MOTION — reveal on scroll
   Elements marked data-reveal fade up once, when they first come into view.
   Without JavaScript they are simply visible (see site.js).
   ========================================================================== */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s cubic-bezier(.16, 1, .3, 1),
              transform .6s cubic-bezier(.16, 1, .3, 1);
}
.js [data-reveal].is-visible { opacity: 1; transform: none; }

/* Staggered page-load entrance for the hero. */
.js .hero [data-reveal] { transition-delay: calc(var(--i, 0) * 90ms); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
}


/* =============================================================================
   18. INVESTOR PAGE
   -----------------------------------------------------------------------------
   investor-inquiry.html is a pitch page, not a product page, so it runs on its
   own editorial scale: a larger measure, mono section numbering, hairline rules
   instead of cards. Everything here is scoped to `.investor` on <main>, so it
   cannot leak into the rest of the site. The header, footer and nav are the
   site's own.
   ========================================================================== */
.investor { font-size: 1.1875rem; }
.investor p { line-height: 1.6; }

/* --- Mono kicker: "01 / The opportunity" --------------------------------- */
.kicker {
  font-family: var(--font-mono);
  font-size: .8125rem;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0;
}
.kicker b { color: var(--growth-green); font-weight: 500; }

/* The prescription ramp as a rule. */
.zone-bar { height: 5px; background: var(--zone-ramp); }

/* --- Hero ---------------------------------------------------------------- */
.investor .inv-hero { padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(1.5rem, 3vw, 2.5rem); }
.inv-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}
.inv-hero h1 {
  font-size: clamp(3rem, 6.2vw, 5.4rem);
  line-height: 1.04;
  letter-spacing: -.03em;
  margin: 1.25rem 0 0;
}
.inv-hero h1 em { font-style: normal; color: var(--growth-green); }
.inv-hero__sub {
  font-size: clamp(1.15rem, 1rem + .7vw, 1.45rem);
  line-height: 1.5;
  max-width: 34ch;
  margin: 1.5rem 0 2rem;
}
.inv-hero__cta { display: flex; align-items: center; gap: 1.75rem; flex-wrap: wrap; }

/* Caption under the hero figure, with a swatch of the ramp it illustrates. */
.figcap {
  display: flex; align-items: center; gap: .6rem;
  margin-top: 1rem;
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.figcap__swatch { width: 48px; height: 7px; border-radius: 4px; background: var(--zone-ramp); flex: none; }

/* A text link that reads as a peer of a button. */
.textlink {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.0625rem;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid var(--signal-lime);
  padding-bottom: 2px;
}
.textlink:hover { color: var(--deep-pine); }
.textlink::after { content: "\2192"; transition: transform .18s ease; }
.textlink:hover::after { transform: translateX(4px); }

/* --- Stat band ----------------------------------------------------------- */
.statband { border-block: 1px solid var(--line); }
.statband__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat { padding: clamp(1.5rem, 3vw, 2.4rem) .5rem clamp(1.5rem, 3vw, 2.4rem) 0; }
.stat + .stat { padding-left: clamp(1.25rem, 2.5vw, 2.1rem); border-left: 1px solid var(--line); }
.stat__value {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.25rem, .85rem + 1.35vw, 1.95rem);
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--deep-pine);
}
.stat__label {
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: .5rem 0 0;
  line-height: 1.4;
}

/* --- Section head: number in the margin, content beside it --------------- */
.sechead {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.25rem);
  align-items: start;
}
.sechead h2 { font-size: clamp(1.9rem, 1.2rem + 2.2vw, 2.75rem); max-width: 18ch; }

/* --- The big statement --------------------------------------------------- */
.pull {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.7rem, 1.1rem + 2.6vw, 2.75rem);
  line-height: 1.22;
  letter-spacing: -.01em;
  color: var(--deep-pine);
  max-width: 860px;
  margin: 0;
}
.pull__green { color: var(--growth-green); }
.pull__blue  { color: var(--ocean-blue); }
.pullsub { margin-top: 1.5rem; max-width: 52ch; }

/* --- Numbered editorial list (the platform) ------------------------------ */
.numlist { border-top: 2px solid var(--line-cool); margin: .5rem 0 0; padding: 0; list-style: none; }
.numlist__item {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  gap: 1.35rem;
  margin: 0;
  padding: clamp(1.25rem, 2.5vw, 1.85rem) 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.numlist__no { font-family: var(--font-mono); font-size: .9375rem; font-weight: 500; color: var(--growth-green); }
.numlist__item h3 { font-size: clamp(1.25rem, 1rem + .9vw, 1.7rem); margin-bottom: .4rem; }
.numlist__item p { max-width: 60ch; margin: 0; font-size: 1.0625rem; line-height: 1.55; }
.tm { font-size: .55em; vertical-align: super; color: var(--ink-muted); }

/* --- Why invest: two columns of numbered rows ---------------------------- */
.whygrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(2rem, 4vw, 3.5rem);
  border-top: 2px solid var(--line-cool);
  margin: .5rem 0 0;
  padding: 0;
  list-style: none;
}
.whyrow {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 1.1rem;
  margin: 0;
  padding: 1.35rem 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.whyrow__no { font-family: var(--font-mono); font-size: .9375rem; font-weight: 500; color: var(--ocean-blue); }
.whyrow h3 { font-size: 1.1875rem; margin-bottom: .25rem; }
.whyrow p { font-size: 1rem; line-height: 1.5; margin: 0; }

/* --- The ask ------------------------------------------------------------- */
.ask {
  background: var(--deep-pine);
  color: var(--on-dark);
  border-radius: var(--radius);
  overflow: hidden;
}
.ask__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.25rem);
  align-items: center;
  padding: clamp(2.25rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3.5rem);
}
.ask .kicker { color: var(--on-dark-muted); margin-bottom: .9rem; }
.ask .kicker b { color: var(--signal-lime); }
.ask h2 { color: var(--on-dark); font-size: clamp(2rem, 1.4rem + 2.4vw, 3.1rem); margin-bottom: .5rem; }
.ask p { color: var(--on-dark-muted); max-width: 34ch; margin: 0; }

.ask__form { display: grid; gap: .85rem; }
.ask__row { display: flex; gap: .75rem; }
.ask__form input {
  flex: 1;
  width: 100%;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  padding: .95rem 1.05rem;
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .08);
  color: var(--on-dark);
}
.ask__form input::placeholder { color: #A9C4B4; }
.ask__form input:focus { border-color: var(--signal-lime); }
.ask__send {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.0625rem;
  padding: .95rem 1.5rem;
  border: 0;
  border-radius: var(--radius);
  background: var(--signal-lime);
  color: var(--deep-pine);
  cursor: pointer;
  white-space: nowrap;
}
.ask__send:hover { background: var(--white); }
.ask__alt { font-family: var(--font-mono); font-size: .8125rem; letter-spacing: .03em; color: var(--on-dark-muted); }
.ask__alt a { color: var(--signal-lime); }

/* --- Securities disclaimer ----------------------------------------------- */
.disclaimer {
  border-top: 1px solid var(--line);
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.4rem;
  max-width: 900px;
  font-size: .8125rem;
  line-height: 1.65;
  color: var(--ink-muted);
}

@media (max-width: 860px) {
  .inv-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .statband__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(3) { border-left: 0; }
  .sechead { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .whygrid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ask__inner { grid-template-columns: minmax(0, 1fr); }
  .ask__row { flex-direction: column; }
}
@media (max-width: 520px) {
  .numlist__item { grid-template-columns: 40px minmax(0, 1fr); gap: .9rem; }
}


/* =============================================================================
   19. UTILITIES & PRINT
   ========================================================================== */
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mb-1 { margin-bottom: 1rem; }
.mb-2 { margin-bottom: 2rem; }
.stack > * + * { margin-top: 1.15rem; }

@media print {
  .site-header, .site-footer, .nav-toggle, .embed { display: none; }
  body { background: #fff; color: #000; }
  .section { padding-block: 1.5rem; }
  .card, .news-item { break-inside: avoid; box-shadow: none; }
}