/* ==========================================================================
   EDB CONSULTING — A WORLD OF DIFFERENCE
   Prototype v3 · Shared stylesheet
   --------------------------------------------------------------------------
   Everything visual lives in this one file. Every page links to it.
   Change a colour or a font size here and it updates across all 22 pages.

   CONTENTS
     01  Design tokens (colours, type, spacing)
     02  Reset & base
     03  Typography system  (follows the EDB Typography Guidelines)
     04  Layout: container, sections, grids
     05  Buttons & links
     06  Header: utility bar, main nav, dropdowns, mobile menu
     07  Page heroes
     08  Content components (cards, rows, lists, quotes, stats)
     09  The Ecosystem diagram
     10  Forms
     11  Footer
     12  Motion (scroll reveal)
     13  Responsive breakpoints
   ========================================================================== */


/* ==========================================================================
   01  DESIGN TOKENS
   ========================================================================== */
:root{
  /* ---- Brand palette (from EDB Consulting – Accents) ---- */
  --navy:      #33478F;   /* primary structural colour — matched to the logo */
  --red:       #D90B31;   /* primary accent / action     */
  --pink:      #F55AAA;
  --gold:      #C9B18B;
  --yellow:    #D9CC1A;
  --green:     #1D8F57;
  --gray:      #656B68;   /* darkened: the old value failed AA on white */
  --gold-soft: #D6C3A4;   /* gold lightened for text on the lighter navy */
  --gold-ink:  #7E6540;   /* gold darkened for text on light backgrounds */

  /* ---- Extended architectural neutrals ---- */
  --navy-deep: #1D2A57;   /* darker navy for large fields, same hue as the logo */
  --navy-tint: #F2F4FA;   /* palest navy wash               */
  --ink:       #21252E;   /* body text — never pure black   */
  --ink-soft:  #565C66;   /* secondary body text            */
  --paper:     #FBFAF7;   /* page background                */
  --cream:     #F4EFE6;   /* warm alternate section         */
  --line:      rgba(33,37,46,.10);
  --line-dark: rgba(255,255,255,.14);

  /* ---- Type ---- */
  --font-display: 'Playfair Display', Georgia, serif;   /* H1 — ceremonial   */
  --font-ui:      'Inter', 'Helvetica Neue', sans-serif; /* H2/H3, UI, labels */
  --font-body:    'Lora', Cambria, Georgia, serif;       /* body copy         */

  /* ---- Spacing rhythm ---- */
  --gutter: 4vw;
  --shell: 1280px;
  --measure: 68ch;         /* 65–75 characters per line */

  /* ---- Motion ---- */
  --ease: cubic-bezier(.5,0,.5,1);
}


/* ==========================================================================
   02  RESET & BASE
   ========================================================================== */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

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

body{
  font-family:var(--font-body);
  font-size:1rem;
  line-height:1.6;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img{max-width:100%;display:block}
ul,ol{list-style:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}

::selection{background:var(--gold);color:var(--navy-deep)}

/* Skip link — keyboard users land here first */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--navy);color:#fff;padding:.9rem 1.4rem;
  font-family:var(--font-ui);font-size:.85rem;
}
.skip-link:focus{left:1rem;top:1rem}

:focus-visible{outline:2px solid var(--red);outline-offset:3px}


/* ==========================================================================
   03  TYPOGRAPHY SYSTEM
   Per the EDB Brand Toolkit:
     H1   Playfair Display · line-height 1.1 · ceremonial · 1–2 lines
     H2   Inter · line-height 1.3 · medium
     H3   Inter · line-height 1.4 · semibold
     Body Lora · 16px · line-height 1.6
     Rules: never pure black · expressive colour belongs to H1 only ·
            left align only · max 65–75 characters per line
   ========================================================================== */
h1,.t-h1{
  font-family:var(--font-display);
  font-size:clamp(2.5rem,5.4vw,4.25rem);
  line-height:1.06;
  font-weight:700;
  letter-spacing:-.015em;
  color:var(--navy);
}
h1 em,.t-h1 em{font-style:normal;color:var(--red)}

h2,.t-h2{
  font-family:var(--font-ui);
  font-size:clamp(1.4rem,2.3vw,1.75rem);
  line-height:1.3;
  font-weight:500;
  letter-spacing:0;
  color:var(--ink);
}

/* A display-weight H2 for section openers that need ceremony */
.t-h2-display{
  font-family:var(--font-display);
  font-size:clamp(1.9rem,3.4vw,2.75rem);
  line-height:1.15;
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--navy);
}

h3,.t-h3{
  font-family:var(--font-ui);
  font-size:1.125rem;
  line-height:1.4;
  font-weight:600;
  letter-spacing:.01em;
  color:var(--ink);
}

h4,.t-h4{
  font-family:var(--font-ui);
  font-size:.95rem;
  line-height:1.45;
  font-weight:600;
  color:var(--ink);
}

p{max-width:var(--measure)}
p + p{margin-top:1.1rem}

.lead{
  font-size:clamp(1.1rem,1.6vw,1.3rem);
  line-height:1.55;
  color:var(--ink-soft);
  max-width:60ch;
}

.small{font-size:.875rem;color:var(--gray)}

/* Eyebrow / kicker label — all caps, tracked out */
.eyebrow{
  display:inline-block;
  font-family:var(--font-ui);
  font-size:.72rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:var(--gold-ink);
  margin-bottom:1rem;
}
.eyebrow-navy{color:var(--navy)}
.eyebrow-red{color:var(--red)}

/* Rule that sits under an eyebrow or beside a heading */
.rule{
  width:56px;height:3px;background:var(--red);
  margin:0 0 1.6rem;border-radius:2px;
}
.rule-gold{background:var(--gold)}
.rule-light{background:rgba(255,255,255,.4)}

a{color:var(--navy);text-decoration:none;transition:color .2s var(--ease)}
a:hover{color:var(--red)}

/* Text-link with an animated underline */
.link-arrow{
  font-family:var(--font-ui);font-size:.85rem;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:.5rem;
  color:var(--navy);
}
.link-arrow::after{content:'→';transition:transform .25s var(--ease)}
.link-arrow:hover::after{transform:translateX(5px)}

/* Manifesto stack — short declarative lines, one per row */
.manifesto{max-width:34ch}
.manifesto p{
  font-family:var(--font-display);
  font-size:clamp(1.35rem,2.6vw,2rem);
  line-height:1.3;
  color:var(--navy);
  max-width:none;
}
.manifesto p + p{margin-top:.5rem}


/* ==========================================================================
   04  LAYOUT
   ========================================================================== */
.container{
  width:100%;
  max-width:var(--shell);
  margin:0 auto;
  padding:0 var(--gutter);
}
.container-narrow{max-width:860px}
.container-wide{max-width:1480px}

.section{padding:clamp(4rem,9vw,7.5rem) 0}
.section-tight{padding:clamp(3rem,6vw,5rem) 0}

/* Section surfaces */
.surface-cream{background:var(--cream)}
.surface-tint{background:var(--navy-tint)}
.surface-navy{background:var(--navy);color:#fff}
.surface-deep{background:var(--navy-deep);color:#fff}

.surface-navy h1,.surface-deep h1{color:#fff}
.surface-navy h2,.surface-deep h2,
.surface-navy h3,.surface-deep h3,
.surface-navy h4,.surface-deep h4,
.surface-navy .t-h2-display,.surface-deep .t-h2-display{color:#fff}
.surface-navy p,.surface-deep p{color:rgba(255,255,255,.78)}
.surface-navy .lead,.surface-deep .lead{color:rgba(255,255,255,.8)}
.surface-navy a,.surface-deep a{color:var(--gold)}
.surface-navy a:hover,.surface-deep a:hover{color:#fff}
.surface-navy .link-arrow,.surface-deep .link-arrow{color:var(--gold)}

/* Blueprint grid texture — the "architecture" motif */
.blueprint{position:relative;isolation:isolate}
.blueprint::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(23,51,127,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(23,51,127,.055) 1px, transparent 1px);
  background-size:88px 88px;
  mask-image:radial-gradient(ellipse 80% 70% at 70% 30%, #000 0%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 70% 30%, #000 0%, transparent 75%);
}
.blueprint-light::before{
  background-image:
    linear-gradient(to right, rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.07) 1px, transparent 1px);
}

/* Two-column split */
.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(2.5rem,6vw,5.5rem);
  align-items:center;
}
.split-top{align-items:start}
.split-wide-left{grid-template-columns:1.15fr 1fr}
.split-wide-right{grid-template-columns:1fr 1.15fr}

/* Header block that opens a section */
.section-head{max-width:760px;margin-bottom:clamp(2.5rem,5vw,3.5rem)}
.section-head.is-center{margin-left:auto;margin-right:auto;text-align:left}

/* Generic auto grid */
.grid{display:grid;gap:1.5rem}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-5{grid-template-columns:repeat(5,1fr);gap:1.1rem}

.stack-sm > * + *{margin-top:.75rem}
.stack   > * + *{margin-top:1.25rem}
.stack-lg> * + *{margin-top:2rem}

.mt-0{margin-top:0}
.mt-1{margin-top:1rem}
.mt-2{margin-top:2rem}
.mt-3{margin-top:3rem}
.mb-1{margin-bottom:1rem}
.mb-2{margin-bottom:2rem}


/* ==========================================================================
   05  BUTTONS
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--font-ui);
  font-size:.82rem;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;
  padding:.95rem 1.9rem;
  border:1.5px solid transparent;
  border-radius:2px;
  transition:background-color .25s var(--ease), color .25s var(--ease),
             border-color .25s var(--ease), transform .25s var(--ease);
  will-change:transform;
}
.btn:hover{transform:translateY(-2px)}

.btn-primary{background:var(--red);border-color:var(--red);color:#fff}
.btn-primary:hover{background:#B00928;border-color:#B00928;color:#fff}

.btn-navy{background:var(--navy);border-color:var(--navy);color:#fff}
.btn-navy:hover{background:var(--navy-deep);border-color:var(--navy-deep);color:#fff}

.btn-outline{background:transparent;border-color:var(--navy);color:var(--navy)}
.btn-outline:hover{background:var(--navy);color:#fff}

.btn-light{background:transparent;border-color:rgba(255,255,255,.45);color:#fff}
.btn-light:hover{background:#fff;border-color:#fff;color:var(--navy)}

.btn-solid-light{background:#fff;border-color:#fff;color:var(--navy)}
.btn-solid-light:hover{background:var(--gold);border-color:var(--gold);color:var(--navy-deep)}

.btn-gold{background:var(--gold);border-color:var(--gold);color:var(--navy-deep)}
.btn-gold:hover{background:#B79C72;border-color:#B79C72;color:var(--navy-deep)}

.btn-sm{padding:.6rem 1.25rem;font-size:.74rem}

.btn-row{display:flex;flex-wrap:wrap;gap:1rem;align-items:center}


/* ==========================================================================
   06  HEADER
   ========================================================================== */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:120;
  background:rgba(251,250,247,.92);
  backdrop-filter:saturate(1.4) blur(12px);
  -webkit-backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease),
             background-color .3s var(--ease);
}
.site-header.is-scrolled{
  border-bottom-color:var(--line);
  box-shadow:0 6px 28px rgba(14,31,82,.06);
}

/* ---- Utility strip ---- */
.utility-bar{background:var(--navy-deep);color:rgba(255,255,255,.75)}
.utility-inner{
  max-width:var(--shell);margin:0 auto;padding:.42rem var(--gutter);
  display:flex;justify-content:flex-end;align-items:center;gap:1.6rem;
  font-family:var(--font-ui);font-size:.72rem;letter-spacing:.06em;
  text-transform:uppercase;
}
.utility-inner a{color:rgba(255,255,255,.75)}
.utility-inner a:hover{color:#fff}
.utility-tagline{
  margin-right:auto;text-transform:none;letter-spacing:.02em;
  font-size:.73rem;color:rgba(255,255,255,.55);
}
.utility-donate{color:var(--gold)!important;font-weight:600}
.utility-donate:hover{color:#fff!important}

/* ---- Main bar ---- */
.nav-bar{
  max-width:var(--shell);margin:0 auto;
  padding:.85rem var(--gutter);
  display:flex;align-items:center;gap:clamp(1rem,2vw,1.75rem);
}

/* Brand lockup — the real logo artwork: globe above the wordmark.
   Mark and wordmark are separate files so each can be sized for its context.
   A single flattened lockup would put the wordmark at about 7px in the nav. */
.brand{
  display:flex;flex-direction:column;align-items:center;
  flex-shrink:0;gap:.42rem;
}
.brand-mark{width:40px;height:auto;display:block}
.brand-word{width:152px;height:auto;display:block}

.nav-primary{margin-left:auto;display:flex;align-items:center;gap:clamp(.85rem,1.5vw,1.5rem)}
.nav-primary > li{position:relative}
.nav-primary > li > a{
  font-family:var(--font-ui);font-size:clamp(.72rem,.9vw,.78rem);font-weight:500;
  letter-spacing:.05em;text-transform:uppercase;color:var(--ink);
  padding:1.4rem 0;display:inline-flex;align-items:center;gap:.35rem;
  white-space:nowrap;
}
.nav-primary > li > a::after{
  content:'';position:absolute;left:0;bottom:1rem;
  width:0;height:2px;background:var(--red);
  transition:width .28s var(--ease);
}
.nav-primary > li:hover > a::after,
.nav-primary > li > a[aria-current="page"]::after{width:100%}
.nav-primary > li > a[aria-current="page"]{color:var(--navy);font-weight:600}
.nav-caret{
  width:7px;height:7px;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);
  transition:transform .25s var(--ease);
}
.nav-primary > li:hover .nav-caret{transform:rotate(225deg) translateY(-2px)}

/* ---- Dropdown ---- */
.nav-drop{
  position:absolute;top:100%;left:-1.25rem;
  min-width:330px;
  background:#fff;
  border:1px solid var(--line);
  border-top:3px solid var(--navy);
  box-shadow:0 24px 60px rgba(14,31,82,.14);
  padding:.6rem;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
}
.nav-primary > li:hover .nav-drop,
.nav-primary > li:focus-within .nav-drop{opacity:1;visibility:visible;transform:translateY(0)}

.nav-drop a{
  display:block;padding:.7rem .9rem;border-radius:2px;
  border-left:3px solid transparent;
  transition:background-color .2s var(--ease), border-color .2s var(--ease);
}
.nav-drop a:hover{background:var(--navy-tint)}
.nav-drop strong{
  display:block;font-family:var(--font-ui);font-size:.86rem;font-weight:600;
  color:var(--ink);margin-bottom:.1rem;
}
.nav-drop span{
  display:block;font-family:var(--font-body);font-size:.8rem;
  color:var(--gray);line-height:1.4;
}
.nav-drop a:hover strong{color:var(--navy)}
.nav-drop-head{
  padding:.55rem .9rem .7rem;margin-bottom:.3rem;
  border-bottom:1px solid var(--line);
  font-family:var(--font-ui);font-size:.66rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.14em;color:var(--gold);
}

/* Accent bar per item, coloured inline with --accent */
.nav-drop a[style*="--accent"]:hover{border-left-color:var(--accent)}

.nav-cta{flex-shrink:0}

/* ---- Hamburger ---- */
.nav-toggle{display:none;width:44px;height:44px;flex-shrink:0;
  align-items:center;justify-content:center;margin-left:auto}
.nav-toggle span{
  display:block;width:26px;height:2px;background:var(--ink);
  position:relative;transition:background-color .2s var(--ease);
}
.nav-toggle span::before,.nav-toggle span::after{
  content:'';position:absolute;left:0;width:26px;height:2px;background:var(--ink);
  transition:transform .3s var(--ease), top .3s var(--ease);
}
.nav-toggle span::before{top:-8px}
.nav-toggle span::after{top:8px}
.nav-toggle.is-open span{background:transparent}
.nav-toggle.is-open span::before{top:0;transform:rotate(45deg)}
.nav-toggle.is-open span::after{top:0;transform:rotate(-45deg)}

/* ---- Mobile panel ---- */
.mobile-menu{
  position:fixed;inset:0;z-index:110;
  background:var(--paper);
  padding:7.5rem var(--gutter) 3rem;
  overflow-y:auto;
  transform:translateY(-100%);
  transition:transform .45s var(--ease);
}
.mobile-menu.is-open{transform:translateY(0)}
.mobile-menu > ul > li{border-bottom:1px solid var(--line)}
.mobile-menu > ul > li > a,
.mobile-menu .m-toggle{
  display:flex;width:100%;justify-content:space-between;align-items:center;
  padding:1.05rem 0;
  font-family:var(--font-ui);font-size:1rem;font-weight:600;
  letter-spacing:.02em;color:var(--ink);text-align:left;
}
.mobile-menu .m-toggle .plus{
  font-size:1.3rem;font-weight:300;color:var(--navy);
  transition:transform .3s var(--ease);
}
.mobile-menu .m-toggle.is-open .plus{transform:rotate(45deg)}
.mobile-sub{max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}
.mobile-sub li a{
  display:block;padding:.6rem 0 .6rem 1rem;
  border-left:2px solid var(--line);
  font-family:var(--font-body);font-size:.95rem;color:var(--ink-soft);
}
.mobile-sub li:last-child a{margin-bottom:1rem}
.mobile-menu .btn{width:100%;margin-top:1.6rem}

body.no-scroll{overflow:hidden}

/* Push page content below the fixed header */
.page-body{padding-top:var(--header-h,132px)}


/* ==========================================================================
   07  PAGE HEROES
   ========================================================================== */

/* --- Home hero: large, split, blueprint texture --- */
.hero-home{
  position:relative;overflow:hidden;
  padding:clamp(2.75rem,5vw,4.5rem) 0 clamp(3rem,5.5vw,5rem);
  background:linear-gradient(150deg,var(--paper) 0%,var(--paper) 45%,var(--cream) 100%);
}
.hero-home-inner{
  display:grid;grid-template-columns:1.25fr .85fr;
  gap:clamp(2rem,5vw,4.5rem);align-items:center;
}

/* Single-column statement hero (home) */
.hero-home.is-statement{
  padding:clamp(4.5rem,11vw,9rem) 0 clamp(4.5rem,10vw,8rem);
  min-height:min(76vh,760px);
  display:flex;align-items:center;
}
.hero-home.is-statement h1{
  font-size:clamp(2.4rem,5.2vw,4.15rem);
  max-width:22ch;margin-bottom:1.8rem;
}
.hero-home.is-statement .lead{max-width:46ch;margin-bottom:2.6rem;font-size:clamp(1.15rem,1.8vw,1.4rem)}
.hero-home.is-statement .eyebrow{margin-bottom:1.4rem}

/* Spectrum bar — the full accent palette as a hairline across the hero foot */
.spectrum{display:flex;width:100%;height:6px}
.spectrum span{flex:1}
.hero-home h1{font-size:clamp(2.15rem,4.1vw,3.35rem);max-width:19ch;margin-bottom:1.4rem}
.hero-home .lead{margin-bottom:2.2rem}

/* Rotating word in the hero headline */
.rotator{
  display:inline-block;position:relative;color:var(--red);
  min-width:5ch;
}
.rotator-word{
  display:inline-block;
  animation:rotateIn .6s var(--ease) both;
}
@keyframes rotateIn{
  from{opacity:0;transform:translateY(.35em)}
  to{opacity:1;transform:translateY(0)}
}

/* --- Interior page hero: navy band --- */
.hero-page{
  position:relative;overflow:hidden;
  background:var(--navy);color:#fff;
  padding:clamp(3.5rem,7vw,6rem) 0 clamp(3.5rem,7vw,5.5rem);
}
.hero-page::after{
  content:'';position:absolute;right:-8%;top:-30%;
  width:640px;height:640px;border-radius:50%;
  background:radial-gradient(circle,rgba(201,177,139,.20) 0%,transparent 68%);
  pointer-events:none;
}
.hero-page h1{color:#fff;max-width:18ch;position:relative;z-index:1}
.hero-page .lead{color:rgba(255,255,255,.8);position:relative;z-index:1}
.hero-page .eyebrow{color:var(--gold)}

/* Accent-tinted hero for element / world sub-pages.
   Set --accent inline on the section and everything follows. */
.hero-accent{
  position:relative;overflow:hidden;
  background:var(--navy-deep);color:#fff;
  padding:clamp(3.5rem,7vw,5.5rem) 0;
  border-bottom:5px solid var(--accent-light,var(--accent-bright,var(--gold)));
}
.hero-accent::after{
  content:'';position:absolute;left:0;top:0;bottom:0;width:42%;
  background:linear-gradient(100deg,var(--accent-light,var(--accent-bright,var(--gold))) 0%,transparent 100%);
  opacity:.20;pointer-events:none;
}
.hero-accent .eyebrow{color:var(--accent-light,var(--gold))}
.hero-accent h1{color:#fff;position:relative;z-index:1;max-width:17ch}
.hero-accent .lead{color:rgba(255,255,255,.82);position:relative;z-index:1}

/* Breadcrumb */
.crumbs{
  font-family:var(--font-ui);font-size:.72rem;letter-spacing:.09em;
  text-transform:uppercase;margin-bottom:1.4rem;
  display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;
  color:rgba(255,255,255,.55);position:relative;z-index:1;
}
.crumbs a{color:rgba(255,255,255,.75)}
.crumbs a:hover{color:#fff}
.crumbs .sep{opacity:.4}

/* Stat / marker strip beneath a hero */
.marker-strip{
  display:flex;flex-wrap:wrap;gap:0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.marker{
  flex:1 1 220px;padding:1.6rem clamp(1rem,2.5vw,2rem);
  border-right:1px solid var(--line);
}
.marker:last-child{border-right:none}
.marker-num{
  font-family:var(--font-display);font-size:1.9rem;font-weight:700;
  line-height:1;color:var(--navy);margin-bottom:.35rem;
}
.marker-label{
  font-family:var(--font-ui);font-size:.78rem;font-weight:500;
  color:var(--ink-soft);line-height:1.4;
}


/* ==========================================================================
   08  CONTENT COMPONENTS
   ========================================================================== */

/* ---- Card ---- */
.card{
  background:#fff;border:1px solid var(--line);border-radius:3px;
  padding:clamp(1.6rem,2.4vw,2.1rem);
  display:flex;flex-direction:column;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease),
             border-color .3s var(--ease);
}
.card:hover{
  transform:translateY(-5px);
  box-shadow:0 18px 48px rgba(14,31,82,.09);
  border-color:transparent;
}
.card h3{margin-bottom:.5rem}
.card p{font-size:.94rem;color:var(--ink-soft);max-width:none}
.card .link-arrow{margin-top:auto;padding-top:1.2rem}

/* Card with a coloured top edge, driven by --accent */
.card-accent{border-top:4px solid var(--accent-bright,var(--accent,var(--navy)))}
.grid-5 .card{padding:1.5rem 1.3rem}
.card-accent .card-index{
  font-family:var(--font-display);font-size:2.4rem;font-weight:700;
  line-height:1;color:var(--accent,var(--navy));margin-bottom:.8rem;
  opacity:.9;
}
.card-accent h3 { color:var(--ink) }

/* Spec item — a labelled row with an accent spine */
.spec-list{display:grid;gap:.7rem}
.spec-item{
  background:#fff;border:1px solid var(--line);
  border-left:3px solid var(--accent,var(--navy));
  padding:.95rem 1.2rem;border-radius:2px;
  font-family:var(--font-ui);font-size:.97rem;font-weight:600;color:var(--ink);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.spec-item:hover{transform:translateX(4px);box-shadow:0 10px 26px rgba(14,31,82,.07)}
.surface-cream .spec-item{background:#fff}

/* Small tagline pinned to the bottom of a card */
.card-tagline{
  margin-top:auto;padding-top:1.2rem;
  font-family:var(--font-ui);font-size:.72rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.11em;line-height:1.45;
  color:var(--accent,var(--navy));
}

/* Glyph badge */
.badge{
  width:46px;height:46px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:1.15rem;color:#fff;margin-bottom:1.1rem;
  background:var(--accent-bright,var(--accent,var(--navy)));flex-shrink:0;
}
.badge-outline{
  background:transparent;border:1.5px solid var(--accent,var(--navy));
  color:var(--accent,var(--navy));
}

/* ---- Numbered index row (used for Six Worlds, process steps) ---- */
.index-list{border-top:1px solid var(--line)}
.index-row{
  display:grid;grid-template-columns:88px 1fr auto;
  gap:clamp(1rem,3vw,2.5rem);align-items:center;
  padding:clamp(1.5rem,2.6vw,2.1rem) 0;
  border-bottom:1px solid var(--line);
  transition:background-color .3s var(--ease), padding-left .3s var(--ease);
}
a.index-row:hover{background:#fff;padding-left:1.25rem}
.index-num{
  font-family:var(--font-display);font-size:clamp(1.9rem,3vw,2.6rem);
  font-weight:700;line-height:1;color:var(--accent,var(--navy));
}
.index-body h3{margin-bottom:.3rem;font-size:1.15rem}
.index-body p{font-size:.94rem;color:var(--ink-soft);max-width:62ch}
.index-go{
  font-family:var(--font-ui);font-size:1.3rem;color:var(--accent,var(--navy));
  transition:transform .3s var(--ease);
}
a.index-row:hover .index-go{transform:translateX(6px)}

/* ---- Contrast pair: "Without / With" ---- */
.contrast{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.25rem,3vw,2rem)}
.contrast-panel{padding:clamp(1.8rem,3vw,2.4rem);border-radius:3px}
.contrast-without{background:#fff;border:1px solid var(--line)}
.contrast-with{background:var(--navy);color:#fff}
.contrast-panel h3{margin-bottom:1.1rem;font-size:1rem;
  text-transform:uppercase;letter-spacing:.09em}
.contrast-without h3{color:var(--red)}
.contrast-with h3{color:var(--gold)}
.contrast-panel li{
  position:relative;padding:.5rem 0 .5rem 1.6rem;font-size:.95rem;
  color:var(--ink-soft);
}
.contrast-with li{color:rgba(255,255,255,.82)}
.contrast-panel li::before{
  content:'';position:absolute;left:0;top:1.05rem;
  width:7px;height:7px;border-radius:50%;
}
.contrast-without li::before{background:var(--red)}
.contrast-with li::before{background:var(--gold)}

/* ---- Tick list ---- */
.ticks li{
  position:relative;padding:.5rem 0 .5rem 1.9rem;
  font-size:1rem;color:var(--ink-soft);max-width:var(--measure);
}
.ticks li::before{
  content:'';position:absolute;left:.1rem;top:.85rem;
  width:11px;height:6px;border:2px solid var(--accent,var(--navy));
  border-top:none;border-right:none;transform:rotate(-45deg);
}
.surface-navy .ticks li,.surface-deep .ticks li{color:rgba(255,255,255,.8)}
.surface-navy .ticks li::before,.surface-deep .ticks li::before{border-color:var(--gold)}

/* ---- Keyword list: short strong phrases ---- */
.keywords{display:flex;flex-wrap:wrap;gap:.6rem}
.keyword{
  font-family:var(--font-ui);font-size:.82rem;font-weight:500;
  padding:.55rem 1.15rem;border-radius:100px;
  border:1px solid var(--line);background:#fff;color:var(--ink);
  transition:border-color .25s var(--ease), color .25s var(--ease),
             transform .25s var(--ease);
}
.keyword:hover{border-color:var(--navy);color:var(--navy);transform:translateY(-2px)}
.surface-navy .keyword,.surface-deep .keyword{
  background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);color:#fff;
}

/* ---- Pull quote ---- */
.pullquote{
  border-left:4px solid var(--gold);
  padding:.4rem 0 .4rem clamp(1.25rem,3vw,2rem);
  max-width:34ch;
}
.pullquote p{
  font-family:var(--font-display);
  font-size:clamp(1.3rem,2.4vw,1.85rem);
  line-height:1.32;color:var(--navy);max-width:none;
}
.pullquote cite{
  display:block;margin-top:1rem;font-style:normal;
  font-family:var(--font-ui);font-size:.76rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.11em;color:var(--gray);
}
.surface-navy .pullquote p,.surface-deep .pullquote p,
.hero-page .pullquote p{color:#fff}
.surface-navy .pullquote cite,.surface-deep .pullquote cite,
.hero-page .pullquote cite{color:var(--gold)}

/* ---- Testimonial strip ---- */
.quote-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3vw,3rem)}
.quote-item blockquote{
  font-family:var(--font-display);font-size:1.08rem;font-style:italic;
  line-height:1.45;color:var(--navy);margin-bottom:.8rem;
}
.quote-item cite{
  font-family:var(--font-ui);font-size:.72rem;font-style:normal;
  text-transform:uppercase;letter-spacing:.1em;color:var(--gray);
}

/* ---- Definition rows: term + description ---- */
.def-list{border-top:1px solid var(--line)}
.def-row{
  display:grid;grid-template-columns:minmax(180px,.5fr) 1fr;
  gap:clamp(1rem,3vw,2.5rem);
  padding:1.4rem 0;border-bottom:1px solid var(--line);
}
.def-row dt{
  font-family:var(--font-ui);font-size:1rem;font-weight:600;color:var(--navy);
}
.def-row dd{font-size:.96rem;color:var(--ink-soft);max-width:62ch}
.surface-navy .def-list,.surface-deep .def-list{border-color:var(--line-dark)}
.surface-navy .def-row,.surface-deep .def-row{border-color:var(--line-dark)}
.surface-navy .def-row dt,.surface-deep .def-row dt{color:var(--gold)}
.surface-navy .def-row dd,.surface-deep .def-row dd{color:rgba(255,255,255,.78)}

/* ---- Image / photo placeholder ---- */
.figure{
  position:relative;border-radius:3px;overflow:hidden;
  background:var(--navy-tint);
  display:flex;align-items:center;justify-content:center;
  min-height:320px;
}
.figure-portrait{aspect-ratio:4/5}
.figure picture{display:contents}
.figure img{width:100%;height:100%;object-fit:cover;object-position:center top}
.figure-placeholder{
  text-align:center;padding:2rem;
  background:
    repeating-linear-gradient(45deg,rgba(23,51,127,.035) 0 12px,transparent 12px 24px),
    var(--navy-tint);
  width:100%;height:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.4rem;
}
.figure-placeholder .fp-label{
  font-family:var(--font-ui);font-size:.66rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.16em;color:var(--gold);
}
.figure-placeholder .fp-name{
  font-family:var(--font-display);font-size:1.5rem;color:var(--navy);
}
.figure-placeholder .fp-role{
  font-family:var(--font-ui);font-size:.82rem;color:var(--gray);
}
.surface-navy .figure,.surface-deep .figure{background:rgba(255,255,255,.05)}
.surface-navy .figure-placeholder,.surface-deep .figure-placeholder{
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.04) 0 12px,transparent 12px 24px);
}
.surface-navy .figure-placeholder .fp-name,
.surface-deep .figure-placeholder .fp-name{color:#fff}
.surface-navy .figure-placeholder .fp-role,
.surface-deep .figure-placeholder .fp-role{color:rgba(255,255,255,.6)}

/* ---- Insight / article card ---- */
.article-card{
  background:#fff;border:1px solid var(--line);border-radius:3px;overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.article-card:hover{transform:translateY(-5px);box-shadow:0 18px 48px rgba(14,31,82,.09)}
.article-thumb{
  height:170px;display:flex;align-items:flex-end;padding:1.2rem;
  background:var(--accent,var(--accent-bright,var(--navy)));position:relative;overflow:hidden;
}
.article-thumb::after{
  content:'';position:absolute;inset:0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.10) 1px, transparent 1px);
  background-size:36px 36px;
}
.article-thumb span{
  position:relative;z-index:1;
  font-family:var(--font-ui);font-size:.68rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.92);
}
.article-body{padding:1.5rem;display:flex;flex-direction:column;flex:1}
.article-tag{
  font-family:var(--font-ui);font-size:.66rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.12em;color:var(--red);
  margin-bottom:.55rem;
}
.article-body h3{font-size:1.05rem;margin-bottom:.5rem;line-height:1.35}
.article-body p{font-size:.9rem;color:var(--ink-soft);max-width:none;margin-bottom:1.1rem}
.article-body .link-arrow{margin-top:auto;font-size:.78rem}

/* ---- Doors: the two big directional panels on the home page ---- */
.doors{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.25rem,2.5vw,2rem)}
.door{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  padding:clamp(2rem,4vw,3.25rem);
  border-radius:3px;
  border:1px solid var(--line);
  border-top:5px solid var(--accent-bright,var(--navy));
  background:#fff;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.door:hover{transform:translateY(-6px);box-shadow:0 26px 60px rgba(14,31,82,.11)}
.door-kind{
  font-family:var(--font-ui);font-size:.7rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.15em;
  color:var(--accent,var(--navy));margin-bottom:1.1rem;
}
.door h3{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.6rem,2.8vw,2.15rem);line-height:1.15;
  color:var(--navy);margin-bottom:.7rem;letter-spacing:-.01em;
}
.door p{font-size:1rem;color:var(--ink-soft);max-width:40ch;margin-bottom:1.8rem}
.door .link-arrow{margin-top:auto;color:var(--accent,var(--navy))}
.door-num{
  position:absolute;right:clamp(1rem,2.5vw,2.25rem);top:-1.6rem;
  font-family:var(--font-display);font-size:7.5rem;font-weight:700;line-height:1;
  color:var(--accent-bright,var(--navy));opacity:.08;pointer-events:none;
}

/* ---- Compact link tiles ---- */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.tile{
  display:flex;flex-direction:column;gap:.4rem;
  padding:1.5rem 1.6rem;background:#fff;border:1px solid var(--line);border-radius:3px;
  transition:border-color .25s var(--ease), transform .25s var(--ease),
             box-shadow .25s var(--ease);
}
.tile:hover{border-color:var(--navy);transform:translateY(-4px);
  box-shadow:0 14px 34px rgba(14,31,82,.08)}
.tile strong{
  font-family:var(--font-ui);font-size:1.02rem;font-weight:600;color:var(--navy);
  display:flex;justify-content:space-between;align-items:center;gap:.5rem;
}
.tile strong::after{content:'→';transition:transform .25s var(--ease)}
.tile:hover strong::after{transform:translateX(5px)}
.tile span{font-size:.92rem;color:var(--ink-soft);line-height:1.5}

/* ---- CTA band ---- */
.cta-band{
  position:relative;overflow:hidden;
  background:var(--navy-deep);color:#fff;
  padding:clamp(3.5rem,7vw,5.5rem) 0;
}
.cta-band-inner{
  display:flex;justify-content:space-between;align-items:center;
  gap:clamp(1.5rem,4vw,3.5rem);flex-wrap:wrap;
}
.cta-band h2{
  font-family:var(--font-display);font-size:clamp(1.7rem,3.2vw,2.5rem);
  line-height:1.18;font-weight:700;color:#fff;max-width:20ch;
}
.cta-band p{color:rgba(255,255,255,.72);margin-top:.85rem;max-width:50ch}

/* ---- Simple two-way page navigation at page foot ---- */
.page-jump{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.page-jump a{
  border:1px solid var(--line);background:#fff;padding:1.6rem;
  border-radius:3px;display:block;
  transition:border-color .25s var(--ease), transform .25s var(--ease);
}
.page-jump a:hover{border-color:var(--navy);transform:translateY(-3px)}
.page-jump .pj-label{
  font-family:var(--font-ui);font-size:.68rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.13em;color:var(--gold-ink);
  display:block;margin-bottom:.45rem;
}
.page-jump .pj-title{
  font-family:var(--font-ui);font-size:1.02rem;font-weight:600;color:var(--navy);
  display:block;margin-bottom:.25rem;
}
.page-jump .pj-sub{font-size:.88rem;color:var(--ink-soft)}


/* ==========================================================================
   09  THE ECOSYSTEM DIAGRAM
   Two engines — Five Elements (foundation) and Six Worlds (activation) —
   drawn as stacked architectural bands.
   ========================================================================== */
.ecosystem{
  display:grid;grid-template-columns:1fr;gap:0;
  border:1px solid var(--line);border-radius:4px;overflow:hidden;background:#fff;
}
.eco-band{padding:clamp(1.6rem,3vw,2.4rem)}
.eco-band-head{
  display:flex;justify-content:space-between;align-items:baseline;
  flex-wrap:wrap;gap:.6rem;margin-bottom:1.4rem;
}
.eco-band-head h3{font-size:1.15rem}
.eco-band-head .eco-kind{
  font-family:var(--font-ui);font-size:.68rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.14em;color:var(--gray);
}
.eco-chips{display:flex;flex-wrap:wrap;gap:.55rem}
.eco-chip{
  flex:1 1 150px;min-width:140px;
  border:1px solid var(--line);border-top:3px solid var(--accent-bright,var(--accent,var(--navy)));
  padding:.85rem .95rem;border-radius:2px;background:var(--paper);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.eco-chip:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(14,31,82,.08)}
.eco-chip strong{
  display:block;font-family:var(--font-ui);font-size:.88rem;font-weight:600;
  color:var(--ink);margin-bottom:.15rem;
}
.eco-chip span{display:block;font-size:.78rem;color:var(--gray);line-height:1.4}

.eco-join{
  background:var(--navy);color:#fff;text-align:center;
  padding:1.15rem 1.5rem;
  font-family:var(--font-ui);font-size:.78rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.14em;
}
.eco-join strong{color:var(--gold);font-weight:600}

.eco-foundation{background:var(--navy-tint)}
.eco-activation{background:#fff}


/* ==========================================================================
   10  FORMS
   ========================================================================== */
.form-panel{
  background:#fff;border:1px solid var(--line);border-radius:3px;
  padding:clamp(1.8rem,3.5vw,2.75rem);
}
.field{margin-bottom:1.4rem}
.field label{
  display:block;font-family:var(--font-ui);font-size:.78rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.07em;color:var(--ink);
  margin-bottom:.4rem;
}
.field .hint{
  display:block;font-family:var(--font-body);font-size:.82rem;
  font-weight:400;text-transform:none;letter-spacing:0;color:var(--gray);
  margin-top:.15rem;
}
.field input,.field textarea,.field select{
  width:100%;padding:.85rem 1rem;
  font-family:var(--font-body);font-size:.97rem;color:var(--ink);
  background:var(--paper);border:1px solid #DDDBD4;border-radius:2px;
  transition:border-color .2s var(--ease), background-color .2s var(--ease);
}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:var(--navy);background:#fff;
}
.field textarea{min-height:140px;resize:vertical}

.form-success{text-align:center;padding:2.5rem 1rem}
.form-success h3{
  font-family:var(--font-display);font-size:1.6rem;color:var(--navy);
  margin-bottom:.7rem;text-transform:none;
}
.form-success p{color:var(--ink-soft);margin:0 auto;max-width:38ch}


/* ==========================================================================
   11  FOOTER
   ========================================================================== */
.site-footer{background:var(--navy-deep);color:rgba(255,255,255,.6);
  padding:clamp(3rem,6vw,4.5rem) 0 1.6rem}
.site-footer a{color:rgba(255,255,255,.6)}
.site-footer a:hover{color:#fff}

.footer-grid{
  display:grid;grid-template-columns:1.4fr repeat(3,1fr);
  gap:clamp(1.8rem,4vw,3rem);
  padding-bottom:2.8rem;
}
.footer-brand .brand-lockup{
  display:flex;flex-direction:column;align-items:flex-start;
  gap:.55rem;margin-bottom:1.1rem;
}
.footer-brand .brand-mark{width:52px}
.footer-brand .brand-word{width:186px}
.footer-brand p{
  font-size:.88rem;line-height:1.6;margin-top:.9rem;max-width:30ch;
  color:rgba(255,255,255,.55);
}
.footer-col h4{
  font-family:var(--font-ui);font-size:.68rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.14em;color:var(--gold);
  margin-bottom:1rem;
}
.footer-col li{margin-bottom:.55rem;font-size:.88rem}
.footer-donate{color:var(--gold)!important;font-weight:600}
.footer-donate:hover{color:#fff!important}

.footer-base{
  border-top:1px solid var(--line-dark);padding-top:1.4rem;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:.8rem;
  font-size:.78rem;color:rgba(255,255,255,.45);
}

/* Loading text / donate modal */
.modal-overlay{
  display:none;position:fixed;inset:0;z-index:200;
  background:rgba(14,31,82,.6);
  align-items:center;justify-content:center;padding:1.5rem;
}
.modal-overlay.is-open{display:flex}
.modal{
  background:#fff;border-radius:4px;max-width:460px;width:100%;
  padding:2.6rem 2.2rem;text-align:center;position:relative;
  box-shadow:0 30px 80px rgba(0,0,0,.3);
  border-top:4px solid var(--gold);
}
.modal h3{
  font-family:var(--font-display);font-size:1.5rem;color:var(--navy);
  margin-bottom:.7rem;
}
.modal p{color:var(--ink-soft);margin:0 auto 1.6rem;max-width:36ch;font-size:.95rem}
.modal-close{
  position:absolute;top:.6rem;right:1rem;font-size:1.6rem;
  color:var(--gray);line-height:1;
}
.modal-close:hover{color:var(--ink)}


/* ==========================================================================
   12  MOTION — scroll reveal
   ========================================================================== */
[data-reveal]{
  opacity:0;transform:translateY(26px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
[data-reveal].is-visible{opacity:1;transform:translateY(0)}
[data-reveal][data-delay="1"]{transition-delay:.09s}
[data-reveal][data-delay="2"]{transition-delay:.18s}
[data-reveal][data-delay="3"]{transition-delay:.27s}
[data-reveal][data-delay="4"]{transition-delay:.36s}
[data-reveal][data-delay="5"]{transition-delay:.45s}

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


/* ==========================================================================
   13  RESPONSIVE
   ========================================================================== */
@media (max-width:1200px){
  .nav-primary,.nav-cta{display:none}
  .nav-toggle{display:flex}
  .utility-tagline{display:none}
  .utility-inner{justify-content:center;gap:1.2rem}
}

@media (max-width:980px){
  .hero-home-inner{grid-template-columns:1fr}
  .hero-home.is-statement{min-height:0}
  .split,.split-wide-left,.split-wide-right{grid-template-columns:1fr}
  .grid-5{grid-template-columns:repeat(3,1fr)}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .quote-strip{grid-template-columns:1fr}
  .doors{grid-template-columns:1fr}
  .tiles{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .cta-band-inner{flex-direction:column;align-items:flex-start}
  .def-row{grid-template-columns:1fr;gap:.3rem}
}

@media (max-width:720px){
  :root{--gutter:6vw}
  .page-body{padding-top:var(--header-h,118px)}
  .brand-mark{width:32px}
  .brand-word{width:126px}
  .grid-2,.grid-3,.grid-4,.grid-5{grid-template-columns:1fr}
  .contrast{grid-template-columns:1fr}
  .page-jump{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .index-row{grid-template-columns:56px 1fr;row-gap:.4rem}
  .index-go{display:none}
  .marker{flex:1 1 100%;border-right:none;border-bottom:1px solid var(--line)}
  .marker:last-child{border-bottom:none}
  .btn{width:100%}
  .btn-row .btn{width:auto;flex:1 1 auto}
}

@media print{
  .site-header,.site-footer,.cta-band,.modal-overlay{display:none}
  body{background:#fff}
  [data-reveal]{opacity:1;transform:none}
}


/* ==========================================================================
   14  LAUNCH ADDITIONS
   --------------------------------------------------------------------------
   Spam-trap field (must stay invisible) and contact-form status message.
   ========================================================================== */
.hp-field{
  position:absolute;
  left:-9999px;
  width:1px;height:1px;
  overflow:hidden;
}

.form-status{
  margin-top:.75rem;
  font-family:var(--font-ui);
  font-size:.9rem;
  text-align:center;
  color:var(--ink-soft);
}
.form-status.is-error{
  color:var(--red);
  font-weight:500;
}


/* ==========================================================================
   15  LEGAL PAGES  (privacy, terms, accessibility)
   --------------------------------------------------------------------------
   Plain readable prose. Real bullets, since the global reset removes them.
   ========================================================================== */
.legal-body{max-width:74ch}
.legal-body h2{
  font-family:var(--font-ui);font-size:1.35rem;font-weight:600;
  color:var(--navy);margin:2.8rem 0 .8rem;
}
.legal-body h2:first-child{margin-top:0}
.legal-body h3{
  font-family:var(--font-ui);font-size:1.02rem;font-weight:600;
  color:var(--ink);margin:1.6rem 0 .5rem;
}
.legal-body p{margin-bottom:1rem}
.legal-body ul{list-style:disc;padding-left:1.3rem;margin:0 0 1.2rem}
.legal-body ul li{margin-bottom:.5rem;padding-left:.2rem}
.legal-body a{color:var(--navy);text-decoration:underline;text-underline-offset:3px}
.legal-body a:hover{color:var(--red)}

.legal-meta{
  font-family:var(--font-ui);font-size:.82rem;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-soft);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:.9rem 0;margin-bottom:2.6rem;
}

/* Unfilled blanks. Deliberately loud so none of them ship by accident. */
.legal-todo{
  background:#FFF3B0;color:#8A2B0B;font-family:var(--font-ui);
  font-size:.86em;font-weight:600;padding:.08em .38em;border-radius:2px;
  border:1px solid #E3C24A;white-space:nowrap;
}

/* Footer legal links */
.footer-legal a{margin:0 .15rem}
.footer-legal .sep{opacity:.4;margin:0 .2rem}


/* ==========================================================================
   16  GOLD ON THE LIGHTER NAVY
   --------------------------------------------------------------------------
   The navy was matched to the logo, which lifted it a little. Brand gold on
   that lighter navy lands at 4.16:1, under the 4.5:1 the guidelines ask for.
   Redefining --gold inside navy-backed blocks swaps in the softer gold for
   everything nested there at once. Navy-deep areas keep the brand gold.
   ========================================================================== */
.surface-navy,
.hero-page,
.contrast-with,
.eco-join{ --gold:var(--gold-soft) }

/* Gold eyebrows sit on dark surfaces, where the brand gold reads correctly.
   On light surfaces the base rule uses the darker --gold-ink instead. */
.surface-navy .eyebrow,
.surface-deep .eyebrow,
.hero-page .eyebrow,
.contrast-with .eyebrow{ color:var(--gold) }


/* ==========================================================================
   17  FEATURED TESTIMONIAL
   --------------------------------------------------------------------------
   One quote given room to breathe. When a second and third arrive, switch the
   wrapper to <div class="quote-strip"> and use .quote-item for each, which is
   the three-across layout already defined in section 08.
   ========================================================================== */
.quote-feature{
  max-width:64ch;
  border-left:4px solid var(--gold);
  padding:.3rem 0 .3rem clamp(1.4rem,3.5vw,2.4rem);
}
.quote-feature blockquote{
  font-family:var(--font-display);
  font-size:clamp(1.15rem,1.9vw,1.5rem);
  line-height:1.45;color:var(--navy);
  margin-bottom:1.1rem;
}
.quote-feature cite{
  display:block;font-family:var(--font-ui);font-style:normal;
  font-size:.92rem;font-weight:600;color:var(--ink);
}
.quote-feature cite span{
  display:block;font-weight:400;font-size:.84rem;
  color:var(--ink-soft);margin-top:.15rem;
}
.surface-navy .quote-feature blockquote,
.surface-deep .quote-feature blockquote{color:#fff}
.surface-navy .quote-feature cite,
.surface-deep .quote-feature cite{color:var(--gold)}
.surface-navy .quote-feature cite span,
.surface-deep .quote-feature cite span{color:rgba(255,255,255,.7)}