/* ==========================================================================
   Luminary Axis — design system (rebuilt pages)
   Built from the Phase 1 reference (tokens, components) onto the brand
   palette sampled from the logo. One token set, no !important outside the
   chrome, no decoration that has to be switched off later.

   build.mjs inlines chrome.css (tokens, header, footer) at the line below,
   so rebuilt pages load one stylesheet.
   ========================================================================== */

/* ---- chrome.css (inlined by build.mjs) ---- */
/* ==========================================================================
   Luminary Axis — tokens + site chrome (header, menus, footer, WhatsApp)
   --------------------------------------------------------------------------
   Built into luminary.css by build.mjs (every page loads that one file).
   It was written to also work beside the old index.css (now deleted), which
   is why it is self-contained and every class is prefixed site- or fab-.
   ========================================================================== */

/* --- 1. Tokens ----------------------------------------------------------- */

:root {
  /* Palette: the existing site's colours, kept by founder decision (4 Oct
     2026) — not the logo-sampled navy palette suggested in brief 3.4b.
     Source values are the old site stylesheet: headings #1a2e23, text #2d3748 /
     #4a5568, brand green #1A8A40 (hover #146c31), accent #2fb362, CTA bands
     #1B4D30, footer #0F2D1A, gold #cda34f, white backgrounds.
     White text on #2fb362 is too faint to read (2.6:1), so buttons use
     #1A8A40 and #2fb362 is kept for accents only. */
  --forest-950: #0D1511;
  --forest-900: #0F2D1A;   /* footer */
  --forest-800: #1A2E23;   /* headings */
  --forest-700: #1B4D30;   /* dark call-to-action bands */
  --forest-600: #2A704A;
  --forest-100: #E2EEE6;
  --forest-050: #F3F8F5;

  --green-800: #146C31;    /* hover / pressed */
  --green-700: #1A8A40;    /* brand green: buttons, active states */
  --green-600: #1A7A3A;    /* green for text and links (5.4:1 on white) */
  --green-500: #2FB362;    /* bright accent: dots, borders, highlights */
  --green-100: #DFF3E6;
  --green-050: #F2FAF5;

  --gold-700: #8A6B28;     /* gold dark enough for text on white (4.9:1) */
  --gold-600: #A9853A;
  --gold-500: #CDA34F;     /* existing accent gold */
  --gold-300: #E2C88A;
  --gold-100: #F8EFD9;

  /* Neutrals */
  --paper:       #FFFFFF;
  --paper-2:     #F6FAF7;  /* the old site's light green section tint */
  --white:       #FFFFFF;
  --line:        #E3EAE6;
  --line-strong: #C9D3CD;
  --ink:         var(--forest-800);
  --text:        #2D3748;
  --text-soft:   #4A5568;
  --whatsapp:    #25D366;

  /* NGO blue — the existing site's non-profit colour (founder decision,
     4 Oct 2026). Used for NGO elements everywhere, and as the accent on
     NGO pages via body.theme-ngo below. */
  --ngo-900: #1A365D;
  --ngo-700: #1D4ED8;      /* hover; text and links (6.7:1) */
  --ngo-600: #2563EB;      /* buttons, active states (5.2:1) */
  --ngo-400: #60A5FA;      /* accents only */
  --ngo-100: #DBEAFE;
  --ngo-050: #EEF3FB;

  /* Type. Source Serif 4 is variable (opsz 8–60), so one serif covers every
     display size; Inter carries all UI and body text. */
  --font-display: "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --font-sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --step--1: clamp(0.82rem, 0.80rem + 0.10vw, 0.88rem);
  --step-0:  clamp(1.00rem, 0.97rem + 0.15vw, 1.08rem);
  --step-1:  clamp(1.16rem, 1.10rem + 0.30vw, 1.33rem);
  --step-2:  clamp(1.38rem, 1.26rem + 0.55vw, 1.75rem);
  --step-3:  clamp(1.70rem, 1.45rem + 1.10vw, 2.40rem);
  --step-4:  clamp(2.10rem, 1.65rem + 2.00vw, 3.30rem);
  --step-5:  clamp(2.50rem, 1.75rem + 3.40vw, 4.60rem);

  /* Space */
  --gutter:    clamp(1.15rem, 0.7rem + 2vw, 2.5rem);
  --section-y: clamp(3.75rem, 2.5rem + 5vw, 7.5rem);
  --max:        1180px;
  --max-narrow: 760px;
  --header-h:   4.5rem;

  /* Effects — names chosen not to collide with the old stylesheet's
     --radius-lg / --shadow-sm / --shadow-md while both are loaded. */
  --r:        4px;
  --r-card:   8px;
  --elev-1:   0 1px 2px rgba(26, 46, 35, 0.05), 0 2px 8px rgba(26, 46, 35, 0.04);
  --elev-2:   0 2px 4px rgba(26, 46, 35, 0.06), 0 12px 32px rgba(26, 46, 35, 0.08);
  --ease:     cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* NGO pages: <body class="theme-ngo">. Components are written against the
   green accent tokens, so the theme simply points those at the blue ones.
   The footer keeps its deep green (it uses --forest-900, not remapped). */
.theme-ngo {
  --green-800: var(--ngo-900);
  --green-700: var(--ngo-600);
  --green-600: var(--ngo-700);
  --green-500: var(--ngo-400);
  --green-100: var(--ngo-100);
  --green-050: var(--ngo-050);
  --forest-700: var(--ngo-900);   /* call-to-action bands */
  --forest-050: var(--ngo-050);
  --paper-2: #F5F8FD;
}

/* The header is fixed, so in-page anchors must land below it. */
html { scroll-padding-top: calc(var(--header-h) + 1rem); }

/* --- 2. Skip link -------------------------------------------------------- */

.site-skip {
  position: absolute;
  left: 0.5rem;
  top: -4rem;
  z-index: 2000;
  padding: 0.6rem 1rem;
  background: var(--green-700);
  color: var(--white);
  border-radius: var(--r);
  font: 600 0.85rem/1.2 var(--font-sans);
  text-decoration: none;
}
.site-skip:focus { top: 0.5rem; color: var(--white); }

/* --- 3. Header ----------------------------------------------------------- */

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 1000;
  height: var(--header-h);
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-sans);
  color: var(--ink);
  transition: box-shadow 0.2s var(--ease);
}
.site-header[data-scrolled="true"] { box-shadow: var(--elev-1); }

.site-header *,
.site-footer *,
.fab-stack * { box-sizing: border-box; }

.site-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.site-brand { display: flex; align-items: center; margin-right: auto; text-decoration: none; }
.site-brand img { display: block; height: 2.6rem; width: auto; max-width: none; }

.site-header a { text-decoration: none; }
.site-header ul { list-style: none; margin: 0; padding: 0; }
.site-header p { margin: 0; }

/* Menu (desktop) */
.site-menu { display: flex; align-items: center; gap: 0.75rem; height: 100%; }
.site-nav { display: flex; align-items: center; gap: 0.1rem; height: 100%; }
.site-nav__item { display: flex; align-items: center; height: 100%; }
/* Top-level items sit on one line: cancel the page-wide "li + li" top margin,
   which pushed every item after Services down by about 3px. */
.site-nav > .site-nav__item { margin: 0; }

.site-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.55rem 0.6rem;
  border: 0;
  border-radius: var(--r);
  background: transparent;
  font: 500 0.9rem/1.2 var(--font-sans);
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
}
.site-nav__link:hover,
.site-nav__item[data-open="true"] > .site-nav__link { color: var(--green-600); background: var(--green-050); }
.site-nav__link[aria-current] { color: var(--green-600); font-weight: 600; }
.site-nav__link[aria-current]::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0.9rem;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--gold-500);
}
.site-nav__item { position: relative; }
.site-nav__item.has-panel { position: static; }
.site-nav__item.has-panel > .site-nav__link { position: relative; }

.site-caret {
  width: 0.55rem;
  height: 0.55rem;
  flex: none;
  transition: transform 0.2s var(--ease);
}
.site-nav__item[data-open="true"] .site-caret { transform: rotate(180deg); }

/* Dropdown panels. Anchored to the header, not the item, so the four-column
   Services panel (~64rem, spec section 6) is not pushed off-screen. */
.site-panel {
  position: absolute;
  top: calc(100% - 0.4rem);
  left: 50%;
  width: min(64rem, calc(100vw - 2rem));
  padding: 1.75rem 1.9rem 1.5rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 2px solid var(--gold-500);
  border-radius: var(--r-card);
  box-shadow: var(--elev-2);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(-4px);
  transition: opacity 0.16s var(--ease), transform 0.16s var(--ease), visibility 0.16s;
}
.site-panel--narrow { width: min(34rem, calc(100vw - 2rem)); }
.site-nav__item[data-open="true"] > .site-panel {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.site-panel__grid { display: grid; gap: 1.75rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.site-panel--narrow .site-panel__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.site-panel__title {
  display: block;
  margin-bottom: 0.15rem;
  font: 600 0.98rem/1.3 var(--font-sans);
  color: var(--ink);
}
a.site-panel__title:hover { color: var(--green-600); }
.site-panel__line {
  margin: 0 0 0.85rem;
  font: italic 400 0.86rem/1.35 var(--font-display);
  color: var(--gold-700);
}
.site-panel__list li + li { margin-top: 0.05rem; }
.site-panel__list a {
  display: block;
  margin: 0 -0.55rem;
  padding: 0.38rem 0.55rem;
  border-radius: var(--r);
  font: 400 0.88rem/1.35 var(--font-sans);
  color: var(--text);
}
.site-panel__list a:hover { background: var(--green-050); color: var(--green-600); }
.site-panel__list .is-flagship a { font-weight: 600; color: var(--green-600); }

.site-panel__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  margin-top: 1.4rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  font: 400 0.85rem/1.4 var(--font-sans);
  color: var(--text-soft);
}
.site-panel__foot a { font-weight: 600; color: var(--green-600); }
.site-panel__foot a::after { content: " \2192"; }

/* Actions: WhatsApp + enquiry CTA */
.site-actions { display: flex; align-items: center; gap: 0.6rem; }

.site-wa {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  font: 500 0.86rem/1.2 var(--font-sans);
  color: var(--ink);
  white-space: nowrap;
}
.site-wa:hover { border-color: var(--green-600); color: var(--green-600); }
.site-wa svg { width: 1.05rem; height: 1.05rem; flex: none; fill: var(--whatsapp); }

.site-cta {
  display: inline-flex;
  align-items: center;
  padding: 0.68rem 1.15rem;
  border-radius: var(--r);
  background: var(--green-700);
  font: 600 0.84rem/1.2 var(--font-sans);
  letter-spacing: 0.02em;
  color: var(--white) !important;
  white-space: nowrap;
  transition: background 0.2s var(--ease);
}
.site-cta:hover { background: var(--green-800); }

/* Mobile toggle */
.site-nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  background: transparent;
  cursor: pointer;
}
.site-nav-toggle span,
.site-nav-toggle span::before,
.site-nav-toggle span::after {
  display: block;
  width: 1.1rem;
  height: 1.5px;
  background: var(--ink);
  transition: transform 0.2s var(--ease), background 0.2s var(--ease);
}
.site-nav-toggle span { position: relative; }
.site-nav-toggle span::before,
.site-nav-toggle span::after { content: ""; position: absolute; left: 0; }
.site-nav-toggle span::before { top: -6px; }
.site-nav-toggle span::after  { top: 6px; }
.site-nav-toggle[aria-expanded="true"] span { background: transparent; }
.site-nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.site-nav-toggle[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

/* Below 75rem the full menu does not fit beside the logo: switch to the drawer. */
@media (max-width: 74.99rem) {
  :root { --header-h: 4rem; }
  .site-brand img { height: 2.2rem; }
  .site-nav-toggle { display: inline-flex; }

  /* The header's backdrop-filter makes it the containing block for fixed
     children, so the drawer is sized from the viewport explicitly rather
     than with bottom: 0 (which would stop at the header's own bottom edge). */
  .site-menu {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    height: calc(100vh - var(--header-h));
    height: calc(100dvh - var(--header-h));
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.75rem var(--gutter) 2rem;
    overflow-y: auto;
    background: var(--paper);
    border-top: 1px solid var(--line);
  }
  .site-menu[data-open="true"] { display: flex; }

  .site-nav { flex-direction: column; align-items: stretch; height: auto; gap: 0; }
  .site-nav__item, .site-nav__item.has-panel { display: block; height: auto; border-bottom: 1px solid var(--line); }
  .site-nav__link {
    width: 100%;
    justify-content: space-between;
    padding: 0.95rem 0;
    font-size: 1.02rem;
    border-radius: 0;
  }
  .site-nav__link:hover,
  .site-nav__item[data-open="true"] > .site-nav__link { background: transparent; }
  .site-nav__link[aria-current]::after { display: none; }

  .site-panel,
  .site-panel--narrow {
    position: static;
    display: none;
    width: auto;
    padding: 0 0 1.1rem;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
  }
  .site-nav__item[data-open="true"] > .site-panel { display: block; transform: none; }
  .site-panel__grid,
  .site-panel--narrow .site-panel__grid { grid-template-columns: 1fr; gap: 1.25rem; }
  .site-panel__line { margin-bottom: 0.4rem; }
  .site-panel__list a { margin: 0; padding: 0.42rem 0 0.42rem 0.9rem; border-left: 2px solid var(--line); border-radius: 0; }
  .site-panel__foot { margin-top: 1rem; padding-top: 0.9rem; }

  .site-actions { flex-direction: column; align-items: stretch; gap: 0.7rem; margin-top: 1.5rem; }
  .site-wa, .site-cta { justify-content: center; padding-top: 0.85rem; padding-bottom: 0.85rem; font-size: 0.95rem; }
}

/* Lock page scroll while the mobile drawer is open. */
html[data-menu-open="true"], html[data-menu-open="true"] body { overflow: hidden; }

/* --- 4. Footer ----------------------------------------------------------- */

footer.site-footer {
  position: relative;
  background: var(--forest-900) !important;
  background-color: var(--forest-900) !important;
  background-image: none !important;
  color: rgba(255, 255, 255, 0.74);
  padding: clamp(3rem, 2rem + 3vw, 4.5rem) 0 2rem;
  font: 400 0.92rem/1.6 var(--font-sans);
  text-align: left;
}
.site-footer a { color: rgba(255, 255, 255, 0.78); text-decoration: none; transition: color 0.15s var(--ease); }
.site-footer a:hover { color: var(--gold-300); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer p { margin: 0; }

.site-footer__inner { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

.site-footer__top {
  display: grid;
  gap: 2.5rem 2rem;
  padding-bottom: 2.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.13);
}
@media (min-width: 40rem) { .site-footer__top { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64rem) { .site-footer__top { grid-template-columns: 1.5fr 1fr 1fr 1fr 1.15fr; gap: 2.5rem; } }

.site-footer__logo { display: inline-block; }
.site-footer__logo img { display: block; height: 2.6rem; width: auto; filter: brightness(0) invert(1); }
.site-footer__tagline {
  margin-top: 1.25rem !important;
  font: italic 400 1.02rem/1.45 var(--font-display);
  color: var(--gold-300);
}
.site-footer__about { margin-top: 0.75rem !important; max-width: 34ch; font-size: 0.88rem; }

.site-footer__h {
  margin-bottom: 1rem !important;
  font: 700 0.7rem/1.3 var(--font-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--white);
}
.site-footer__col li + li { margin-top: 0.5rem; }
.site-footer__contact li { display: flex; flex-direction: column; }
.site-footer__contact li + li { margin-top: 0.8rem; }
.site-footer__label { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); }

.site-footer .site-footer__social { display: flex; align-items: center; gap: 0.6rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
/* Every item on one line: no inherited "li + li" top margin. */
.site-footer .site-footer__social li { margin: 0; padding: 0; line-height: 0; }
.site-footer__social a {
  color: rgba(255, 255, 255, 0.85);
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
}
.site-footer__social a:hover { border-color: var(--gold-500); color: var(--gold-300); }
.site-footer__social svg { width: 0.95rem; height: 0.95rem; fill: currentColor; }

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding-top: 1.75rem;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.56);
}
.site-footer__parent { display: flex; align-items: center; gap: 0.8rem; }
.site-footer__parent img { display: block; height: 2rem; width: auto; filter: brightness(0) invert(1); opacity: 0.85; }
.site-footer__legal { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }

/* --- 5. WhatsApp float (mobile; desktop has it in the header) ------------ */

/* Floating buttons, bottom right, every page and screen size (restored from
   the original site): services (gold), call (blue), WhatsApp (green). Tinted
   glass at rest, solid on hover; the label slides out on devices with hover. */
.fab-stack {
  position: fixed;
  right: clamp(0.9rem, 0.5rem + 1.2vw, 1.9rem);
  bottom: clamp(0.9rem, 0.5rem + 1.2vw, 1.9rem);
  z-index: 900;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.fab {
  --fab: var(--gold-500);
  --fab-rgb: 205, 163, 79;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.4rem;
  height: 3.4rem;
  border: 1px solid rgba(var(--fab-rgb), 0.35);
  border-radius: 50%;
  background: linear-gradient(rgba(var(--fab-rgb), 0.16), rgba(var(--fab-rgb), 0.16)), rgba(255, 255, 255, 0.88);
  color: var(--fab);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  text-decoration: none;
  transition: transform 0.25s var(--ease), background 0.25s var(--ease), color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.fab--call { --fab: #60A5FA; --fab-rgb: 96, 165, 250; }
.fab--whatsapp { --fab: var(--whatsapp); --fab-rgb: 37, 211, 102; }
.fab svg { width: 1.6rem; height: 1.6rem; }
.fab:hover, .fab:focus-visible { transform: translateY(-3px); background: var(--fab); color: var(--white); box-shadow: 0 14px 28px rgba(var(--fab-rgb), 0.35); }
.fab__label {
  position: absolute;
  right: calc(100% + 0.75rem);
  padding: 0.45rem 0.8rem;
  border-radius: var(--r);
  background: var(--forest-900);
  color: var(--white);
  font: 500 0.82rem/1.2 var(--font-sans);
  white-space: nowrap;
  opacity: 0;
  transform: translateX(6px);
  pointer-events: none;
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}
.fab:hover .fab__label, .fab:focus-visible .fab__label { opacity: 1; transform: none; }
@media (hover: none) { .fab__label { display: none; } }
@media (max-width: 47.99rem) { .fab { width: 3rem; height: 3rem; } .fab svg { width: 1.4rem; height: 1.4rem; } .fab-stack { gap: 0.6rem; } }
html[data-menu-open="true"] .fab-stack { display: none; }

/* --- 6. Shared helpers --------------------------------------------------- */

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

@media (prefers-reduced-motion: reduce) {
  .site-header, .site-panel, .site-caret, .site-nav-toggle span,
  .site-nav-toggle span::before, .site-nav-toggle span::after,
  .fab, .fab__label, .site-cta { transition: none !important; }
}


/* --- 1. Base ------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding-top: var(--header-h);   /* the header is fixed */
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4, h5 {
  margin: 0 0 0.6em;
  color: var(--ink);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -0.014em;
}
h1, h2 {
  font-family: var(--font-display);
  letter-spacing: -0.012em;
  line-height: 1.1;
}
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  { margin: 0 0 1.1em; max-width: 68ch; }
ul, ol { margin: 0 0 1.1em; padding-left: 1.2em; }
li + li { margin-top: 0.35em; }
p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; }

strong { color: var(--ink); font-weight: 600; }

a { color: var(--green-600); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--green-800); }

:focus-visible { outline: 2px solid var(--green-600); outline-offset: 3px; border-radius: 2px; }

hr { border: 0; border-top: 1px solid var(--line); margin: var(--section-y) 0; }

main { display: block; }

/* The hidden attribute must win over any component's display rule. */
[hidden] { display: none !important; }

/* --- 2. Layout ----------------------------------------------------------- */

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: var(--max-narrow); }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(2.5rem, 1.8rem + 3vw, 4.5rem); }
.section--paper2 { background: var(--paper-2); }
.section--line-top { border-top: 1px solid var(--line); }
.section--dark { background: var(--forest-700); color: rgba(255, 255, 255, 0.82); }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4, .section--dark strong { color: var(--white); }
.section--dark a:not(.btn) { color: var(--gold-300); }

.grid { display: grid; gap: clamp(1.25rem, 0.9rem + 1.6vw, 2.25rem); }
.grid--2 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 48rem) { .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
/* Five verticals: one row of five on desktop (never 4 + 1), two-up below. */
.grid--5 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
@media (min-width: 62rem) { .grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.1rem; } }

.split { display: grid; gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: start; }
@media (min-width: 62rem) {
  .split { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
  .split--even { grid-template-columns: 1fr 1fr; }
  .split--main { grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr); }   /* e.g. form + aside */
}

.stack > * + * { margin-top: 1.1rem; }
.stack-lg > * + * { margin-top: 2rem; }

/* --- 3. Type helpers ----------------------------------------------------- */

.eyebrow {
  display: block;
  margin-bottom: 1.1rem;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green-600);
}
.section--dark .eyebrow { color: var(--gold-500); }

.lede { font-size: var(--step-1); line-height: 1.55; max-width: 58ch; }
.section--dark .lede { color: rgba(255, 255, 255, 0.85); }

/* Vision / vertical lines: the serif italic voice of the brand. */
.line {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--gold-700);
}

.small { font-size: var(--step--1); color: var(--text-soft); }
.measure { max-width: 62ch; }
.center { text-align: center; }
.center p, .center .lede { margin-inline: auto; }

.rule { width: 2.75rem; height: 2px; margin: 0 0 1.75rem; border: 0; background: var(--gold-500); }
.center .rule { margin-inline: auto; }

/* --- 4. Buttons and links ------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.6rem;
  border: 1px solid transparent;
  border-radius: var(--r);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: none; }
.btn--primary { background: var(--green-700); color: var(--white); }
.btn--primary:hover { background: var(--green-800); color: var(--white); }
.btn--gold { background: var(--gold-500); color: var(--forest-900); }
.btn--gold:hover { background: var(--gold-300); color: var(--forest-900); }
.btn--ghost { border-color: var(--line-strong); background: transparent; color: var(--ink); }
.btn--ghost:hover { border-color: var(--green-600); color: var(--green-600); }
.section--dark .btn--ghost { border-color: rgba(255, 255, 255, 0.32); color: var(--white); }
.section--dark .btn--ghost:hover { border-color: var(--gold-500); color: var(--gold-300); }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; transform: none; }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.85rem; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
}
.link-arrow::after { content: "\2192"; transition: transform 0.2s var(--ease); }
.link-arrow:hover::after { transform: translateX(3px); }

/* --- 5. Breadcrumbs (every sub-page, spec 7.1) --------------------------- */

.breadcrumbs { padding-top: 1.5rem; font-size: 0.84rem; color: var(--text-soft); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.breadcrumbs li + li { margin-top: 0; }
.breadcrumbs li + li::before { content: "/"; margin-right: 0.4rem; color: var(--line-strong); }
.breadcrumbs a { color: var(--text-soft); text-decoration: none; }
.breadcrumbs a:hover { color: var(--green-600); }
.breadcrumbs [aria-current] { color: var(--ink); }

/* --- 6. Hero -------------------------------------------------------------- */

.hero {
  position: relative;
  padding-block: clamp(3.5rem, 2rem + 6vw, 7.5rem);
  background:
    radial-gradient(80rem 36rem at 82% -12%, var(--forest-050) 0%, rgba(243, 248, 245, 0) 62%),
    linear-gradient(180deg, var(--paper) 0%, var(--paper) 70%, var(--paper-2) 100%);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.hero__inner { position: relative; z-index: 1; }
.hero h1 { max-width: 20ch; }
.hero .line { display: block; margin-bottom: 1rem; font-size: var(--step-1); }
.hero .lede { margin-top: 1.5rem; }
.hero .btn-row { margin-top: 2.25rem; }
.hero--inner { padding-block: clamp(2.5rem, 1.6rem + 3.5vw, 5rem); }
.hero--inner h1 { font-size: var(--step-4); max-width: 26ch; }

.hero__pillars {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 2.75rem 0 0;
  padding: 1.75rem 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
}
.hero__pillars li + li { margin-top: 0; }
.hero__pillars a {
  display: inline-block;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--line-strong);
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.7);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
}
.hero__pillars a:hover { border-color: var(--green-600); color: var(--green-600); }

/* --- 7. Cards ------------------------------------------------------------ */

.card {
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--elev-1);
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.2s var(--ease), box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
}
a.card:hover { border-color: var(--green-600); box-shadow: var(--elev-2); transform: translateY(-3px); color: var(--text); }
.card h3 { font-size: var(--step-1); }
.card p { font-size: 0.95rem; }
.card__num { display: block; margin-bottom: 0.9rem; font-family: var(--font-display); font-size: 1.05rem; color: var(--gold-600); }
.card__line { display: block; margin: -0.3rem 0 0.8rem; font-family: var(--font-display); font-style: italic; font-size: 0.98rem; color: var(--gold-700); }
.card__meta { margin-top: auto; padding-top: 1.2rem; font-size: 0.82rem; color: var(--text-soft); }
.card__meta.link-arrow { color: var(--green-600); }

/* Five-up grid: narrower cards, so tighter padding and type. */
.grid--5 .card { padding: 1.4rem 1.25rem; }
.grid--5 .card h3 { font-size: 1.12rem; }
.grid--5 .card p { font-size: 0.9rem; line-height: 1.55; }
.grid--5 .card__tags { font-size: 0.74rem; }
.card__tags { display: flex; flex-wrap: wrap; gap: 0.4rem 0.5rem; margin: 1rem 0 0; padding: 0; list-style: none; font-size: 0.78rem; color: var(--text-soft); }
.card__tags li { margin: 0; padding: 0.2rem 0.6rem; background: var(--green-050); border-radius: 100px; }
.card--flat { padding: 0; background: transparent; border: 0; box-shadow: none; }

/* Vertical card: the five verticals. NGO gets equal weight, gold top rule. */
.card--vertical { border-top: 3px solid var(--green-700); }
.card--ngo { border-top-color: var(--ngo-600); }
.card--ngo .card__meta.link-arrow,
.card--ngo .eyebrow { color: var(--ngo-700); }
.btn--ngo { background: var(--ngo-600); color: var(--white); }
.btn--ngo:hover { background: var(--ngo-700); color: var(--white); }

/* Numbered process steps */
.step { position: relative; padding-top: 1.5rem; border-top: 2px solid var(--green-100); }
.step__n { display: block; margin-bottom: 0.5rem; font-family: var(--font-display); font-size: 1.6rem; color: var(--gold-600); }
.step h3 { font-family: var(--font-sans); font-size: var(--step-1); font-weight: 600; }
.step p { font-size: 0.93rem; }

/* Chips (industries, sub-services) */
.chips { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
.chips li + li { margin-top: 0; }
.chips a {
  display: inline-block;
  padding: 0.6rem 1.1rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 100px;
  font-size: 0.88rem;
  color: var(--ink);
  text-decoration: none;
}
.chips a:hover { border-color: var(--green-600); background: var(--green-050); color: var(--green-600); }

/* --- 8. Digital: the six-stage system (spec section 3) -------------------
   Horizontal stepper on desktop, vertical on mobile, each stage anchored. */

.stepper { display: grid; gap: 0; margin: 0; padding: 0 0 0 1rem; list-style: none; counter-reset: stage; }
.stepper li + li { margin-top: 0; }
.stepper__stage { position: relative; padding: 0 0 1.75rem 2.6rem; border-left: 2px solid var(--green-100); counter-increment: stage; }
.stepper__stage::before {
  content: counter(stage);
  position: absolute;
  left: -0.95rem;
  top: 0;
  display: grid;
  place-items: center;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--green-700);
  font: 600 0.8rem/1 var(--font-sans);
  color: var(--green-600);
}
.stepper__stage:last-child { border-left-color: transparent; padding-bottom: 0; }
.stepper__stage a { text-decoration: none; }
.stepper__name { display: block; font-weight: 600; color: var(--ink); }
.stepper__aim { display: block; font-family: var(--font-display); font-style: italic; color: var(--gold-700); }
.stepper__items { display: block; margin-top: 0.35rem; font-size: 0.86rem; color: var(--text-soft); }
@media (min-width: 62rem) {
  .stepper { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.1rem; padding-left: 0; }
  .stepper__stage { padding: 2.5rem 0 0; border-left: 0; border-top: 2px solid var(--green-100); }
  .stepper__stage::before { left: 0; top: -0.95rem; }
  .stepper__stage:last-child { border-top-color: var(--green-100); }
}

/* --- 9. Answer-engine blocks (spec 7.3) ----------------------------------- */

/* One sentence near the top of each service page that defines the service. */
.definition {
  margin: 0 0 2rem;
  padding: 1.1rem 1.35rem;
  border-left: 3px solid var(--gold-500);
  background: var(--white);
  border-radius: 0 var(--r-card) var(--r-card) 0;
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--ink);
}

/* Question-shaped h2 with a 40–60 word answer directly beneath it. */
.qa h2 { font-size: var(--step-3); }
.qa__answer { font-size: var(--step-1); line-height: 1.55; color: var(--ink); max-width: 62ch; }

/* Comparison tables extract well; use them where a real comparison exists. */
.table-wrap { overflow-x: auto; margin: 0 0 1.5rem; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--white); }
.table { width: 100%; min-width: 36rem; border-collapse: collapse; font-size: 0.93rem; }
.table th, .table td { padding: 0.85rem 1rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.table thead th { background: var(--forest-050); font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody th { color: var(--ink); font-weight: 600; }

/* --- 10. FAQ -------------------------------------------------------------- */

.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  padding: 1.35rem 0;
  list-style: none;
  font-size: var(--step-0);
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-family: var(--font-display); font-size: 1.4rem; line-height: 1; color: var(--gold-600); }
.faq details[open] summary::after { content: "\2013"; }
.faq summary:hover { color: var(--green-600); }
.faq__body { max-width: 70ch; padding: 0 0 1.5rem; }

/* --- 11. Forms ------------------------------------------------------------ */

.form { display: grid; gap: 1.35rem; }
.form__row { display: grid; gap: 1.35rem; }
@media (min-width: 38rem) { .form__row { grid-template-columns: 1fr 1fr; } }

.field { display: flex; flex-direction: column; gap: 0.45rem; }
.field label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-soft); }
.field label .req { color: var(--gold-700); }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 0.8rem 0.95rem;
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  font-size: 0.97rem;
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.field textarea { min-height: 8rem; resize: vertical; }
.field select {
  appearance: none;
  padding-right: 2.4rem;
  background-image: linear-gradient(45deg, transparent 49%, var(--text-soft) 50%), linear-gradient(-45deg, transparent 49%, var(--text-soft) 50%);
  background-size: 6px 6px;
  background-position: right 1.05rem center, right 0.7rem center;
  background-repeat: no-repeat;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--green-600); box-shadow: 0 0 0 3px rgba(26, 138, 64, 0.16); }
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-color: #B42318; }
.field__error { display: none; font-size: 0.8rem; color: #B42318; }
.field.is-invalid .field__error { display: block; }
.form__note { font-size: 0.83rem; color: var(--text-soft); }

/* Inserted by showFormError() in luminary.js when a submission fails. */
.form-submit-error {
  padding: 0.95rem 1.1rem;
  border-left: 3px solid #B42318;
  border-radius: 0 var(--r) var(--r) 0;
  background: #FEF3F2;
  color: #7A271A;
  font-size: 0.93rem;
  line-height: 1.55;
}
.form-submit-error a { color: var(--ink); font-weight: 600; }

.contact-aside { display: grid; gap: 1rem; align-content: start; }
.contact-card { padding: 1.35rem 1.5rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); }
.contact-card h3 { margin-bottom: 0.3rem; font-family: var(--font-sans); font-size: 1.02rem; font-weight: 600; }
.contact-card p { margin-bottom: 0.8rem; font-size: 0.9rem; }

/* --- 12. Industry pages (Step 11) ---------------------------------------- */

/* Hero with the industry photograph beside the copy (below it on mobile). */
.hero--media .hero__inner { display: grid; gap: clamp(2rem, 1rem + 3vw, 3.5rem); align-items: center; }
@media (min-width: 62rem) { .hero--media .hero__inner { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); } }
.hero__media { margin: 0; overflow: hidden; aspect-ratio: 16 / 10; border-radius: var(--r-card); box-shadow: var(--elev-2); }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 62rem) { .hero__media { aspect-ratio: 4 / 5; } }

/* Plain chips (no link): who we work with. */
.chips span {
  display: inline-block;
  padding: 0.55rem 1rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 100px;
  font-size: 0.88rem;
  color: var(--ink);
}

/* Intro column beside the form: labelled blocks so it runs about as tall
   as the form instead of leaving a gap. */
.intro__label { margin: 2.25rem 0 0.9rem; font-family: var(--font-sans); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-soft); }
.next-steps { display: grid; gap: 0.75rem; margin: 0; padding: 0; list-style: none; counter-reset: next; }
.next-steps li { position: relative; margin: 0; padding: 0.15rem 0 0 2.6rem; counter-increment: next; font-size: 0.97rem; }
.next-steps li::before {
  content: counter(next);
  position: absolute; left: 0; top: 0;
  display: grid; place-items: center;
  width: 1.8rem; height: 1.8rem;
  border-radius: 50%; border: 2px solid var(--green-700);
  font: 600 0.8rem/1 var(--font-sans); color: var(--green-600);
}

/* Short enquiry form card beside the intro copy. */
.form-card { padding: clamp(1.5rem, 1.1rem + 1.2vw, 2rem); background: var(--white); border: 1px solid var(--line); border-top: 3px solid var(--green-700); border-radius: var(--r-card); box-shadow: var(--elev-1); }
.form-card h2 { font-family: var(--font-sans); font-size: var(--step-1); font-weight: 600; }
.form-card .form { gap: 1rem; margin-top: 1.25rem; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --- 13. Insights articles (Step 11) -------------------------------------- */

.article-head { padding-block: clamp(2rem, 1.4rem + 2.5vw, 3.5rem) clamp(1.5rem, 1rem + 2vw, 2.5rem); border-bottom: 1px solid var(--line); }
.article-head h1 { font-size: var(--step-4); max-width: 24ch; }
.article-meta { display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; margin: 1.25rem 0 0; padding: 0; list-style: none; font-size: 0.86rem; color: var(--text-soft); }
.article-meta li + li { margin-top: 0; }
.article-meta .tag { padding: 0.15rem 0.65rem; border-radius: 100px; background: var(--green-050); color: var(--green-600); font-weight: 600; }

/* Long-form text: comfortable measure, clear rhythm. */
.prose { max-width: 70ch; font-size: 1.04rem; line-height: 1.75; }
.prose h2 { margin-top: 2.6rem; font-size: var(--step-3); }
.prose h3 { margin-top: 2rem; font-size: var(--step-1); }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: 0.7em; }
.prose blockquote { margin: 1.75rem 0; padding: 0.4rem 0 0.4rem 1.25rem; border-left: 3px solid var(--gold-500); color: var(--ink); }
.prose table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: 0.93rem; }
.prose th, .prose td { padding: 0.7rem 0.85rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
/* The articles' numbered process blocks (markup kept from the original pages). */
.prose .workflow-steps-vertical { margin: 1.75rem 0; }
.prose .workflow-step-item { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: 1rem; padding: 1.1rem 0; border-top: 1px solid var(--line); }
.prose .workflow-step-item:last-child { border-bottom: 1px solid var(--line); }
.prose .step-item-number { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 2px solid var(--green-700); font: 600 0.9rem/1 var(--font-sans); color: var(--green-600); }
.prose .step-item-content h3 { margin: 0.2rem 0 0.35rem; font-family: var(--font-sans); font-size: 1.05rem; }
.prose .step-item-content p { margin: 0; font-size: 0.97rem; }

.article-aside { display: grid; gap: 1.25rem; max-width: 70ch; margin-top: 3rem; }
.author-card { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 1rem; padding: 1.35rem 1.5rem; background: var(--paper-2); border-radius: var(--r-card); }
.author-card__mark { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--forest-700); font: 600 0.95rem/1 var(--font-sans); color: var(--white); }
.author-card h2 { margin: 0 0 0.3rem; font-family: var(--font-sans); font-size: 1rem; }
.author-card p { margin: 0; font-size: 0.9rem; }

/* --- 14. Insights hub, careers, 404, thank-you ----------------------------- */

/* Article card with thumbnail (insights hub, thank-you). */
.card--insight { padding: 0; overflow: hidden; }
.card--insight picture { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--paper-2); }
.card--insight img { width: 100%; height: 100%; object-fit: cover; }
.card--insight .card__body { display: flex; flex: 1; flex-direction: column; padding: 1.35rem 1.5rem 1.5rem; }
.card--insight .article-meta { margin: 0 0 0.9rem; font-size: 0.8rem; }
.card--insight h3 { font-size: 1.12rem; }
@media (min-width: 62rem) {
  .card--featured { grid-column: 1 / -1; flex-direction: row; }
  .card--featured picture { flex: 0 0 46%; aspect-ratio: auto; }
  .card--featured .card__body { justify-content: center; padding: 2.25rem 2.5rem; }
  .card--featured h3 { font-size: var(--step-2); }
}

/* Topic filters and search. */
.filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.filters li + li { margin-top: 0; }
.filters button {
  padding: 0.5rem 1rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 100px;
  font-size: 0.86rem;
  color: var(--ink);
  cursor: pointer;
}
.filters button:hover { border-color: var(--green-600); color: var(--green-600); }
.filters button[aria-pressed="true"] { background: var(--green-700); border-color: var(--green-700); color: var(--white); }
.search { display: flex; gap: 0.5rem; max-width: 30rem; }
.search input { flex: 1; min-width: 0; padding: 0.75rem 0.95rem; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--white); }
.search input:focus { outline: none; border-color: var(--green-600); box-shadow: 0 0 0 3px rgba(26, 138, 64, 0.16); }
.results-status { margin: 1.5rem 0 0; font-size: 0.9rem; color: var(--text-soft); }

/* Roles: an accordion built on <details>. */
.roles summary { flex-wrap: wrap; row-gap: 0.4rem; }
.roles .role__name { flex: 1 1 18rem; }
.roles .role__meta { flex: 0 1 auto; font-size: 0.8rem; font-weight: 500; color: var(--text-soft); }

/* Insights subscription band (partials/subscribe.html). */
.subscribe {
  display: grid;
  gap: clamp(1.5rem, 1rem + 2vw, 3rem);
  padding: clamp(1.5rem, 1rem + 2.5vw, 3rem);
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-top: 3px solid var(--green-700);
  border-radius: var(--r-card);
}
@media (min-width: 62rem) { .subscribe { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: center; } }
.subscribe h2 { font-size: var(--step-3); }
.subscribe__form { gap: 1rem; }
.subscribe__form .btn { justify-self: start; }
.field--check .check { display: flex; gap: 0.7rem; align-items: flex-start; font-size: 0.88rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--text); cursor: pointer; }
.field--check input { flex: none; width: 1.15rem; height: 1.15rem; margin-top: 0.2rem; accent-color: var(--green-700); }
.subscribe__done { padding: 1rem 0; }
.subscribe__done h3 { font-size: var(--step-1); }

/* Big status mark: 404 and thank-you. */
.status-mark { display: block; margin-bottom: 1rem; font-family: var(--font-display); font-size: clamp(4.5rem, 3rem + 7vw, 8rem); line-height: 1; color: var(--green-100); }
.status-check { display: grid; place-items: center; width: 4.5rem; height: 4.5rem; margin: 0 auto 1.5rem; border-radius: 50%; background: var(--green-050); color: var(--green-600); }

/* --- 15. Scroll reveal ---------------------------------------------------
   Visible by default. luminary.js marks only below-the-fold [data-reveal]
   elements as pending, and only when motion is allowed. */

[data-reveal] { transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
[data-reveal-pending] { opacity: 0; transform: translateY(14px); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}