/* ============================================================================
   NORTHBRIDGE GLOBAL CAMPUS — site stylesheet  v6
   "Classic institution + modern digital campus."

   Mobile-first. No frameworks, no webfonts, no external requests.

   CONTENTS
     1. Tokens            6. Hero (home + inner pages)
     2. Base + type       7. Sections, section heads, split layouts
     3. Accessibility     8. Content blocks: cards, programmes, method, FAQ
     4. Header + nav      9. Forms
     5. Buttons          10. Footer, floating WhatsApp, motion

   This file carries presentation only; page content lives in the HTML.

   COLOUR RULE — the four official codes below are the design system and must
   not be edited. Everything else is one of those four with transparency
   applied, plus four long-standing functional tones: body ink, the AA-safe
   gold for small text on white, the off-white reading band and the form
   error tone. No other hues are introduced anywhere.
   ========================================================================= */

/* ---------------------------------------------------------------- 1. TOKENS */
:root{
  /* ---- OFFICIAL BRAND PALETTE — do not change these four values ---- */
  --navy:  #002147;
  --green: #004B3C;
  --gold:  #C8A24A;
  --white: #FFFFFF;

  /* ---- functional tones ---- */
  --ink:       #10233A;   /* near-navy body copy */
  --gold-text: #8F6A16;   /* gold deepened for small TEXT on white — passes AA */
  --paper:     #FAF8F4;   /* warm off-white section band */
  --error:     #9A2B1F;   /* form errors only */

  /* ---- official colours at low opacity: borders, tints, overlays ---- */
  --navy-04: rgba(0,33,71,.04);
  --navy-08: rgba(0,33,71,.08);
  --navy-12: rgba(0,33,71,.12);
  --navy-20: rgba(0,33,71,.20);
  --navy-50: rgba(0,33,71,.50);   /* input borders: 3.2:1 on white (WCAG 1.4.11) */
  --navy-72: rgba(0,33,71,.72);
  --green-06: rgba(0,75,60,.06);
  --green-16: rgba(0,75,60,.16);
  --gold-12: rgba(200,162,74,.12);
  --gold-24: rgba(200,162,74,.24);
  --gold-50: rgba(200,162,74,.50);
  --error-12: rgba(154,43,31,.12);

  --ink-80: rgba(16,35,58,.84);
  --ink-68: rgba(16,35,58,.70);   /* minimum that still passes AA on paper */
  --on-dark:    rgba(255,255,255,.90);
  --on-dark-72: rgba(255,255,255,.74);
  --on-dark-40: rgba(255,255,255,.42);
  --on-dark-16: rgba(255,255,255,.16);
  --on-dark-08: rgba(255,255,255,.08);

  /* ---- type ----
     Serif is reserved for major headings (h1/h2) and selected statements.
     Navigation, body, buttons, forms and card headings use the sans stack.
     Both are system stacks: no webfont request, no swap, no layout shift.
     Sitka Heading is Windows' optical-size display serif; Apple platforms get
     New York / Iowan. */
  --serif: ui-serif,"Iowan Old Style","Sitka Heading","Charter","Bitstream Charter",
           Cambria,Georgia,serif;
  --sans:  system-ui,-apple-system,"Segoe UI Variable Text","Segoe UI",
           Roboto,"Helvetica Neue",Arial,sans-serif;

  --fs-body: 1.0625rem;
  --fs-lede: clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
  --fs-small: .9375rem;
  --fs-label: .75rem;
  --fs-h1: clamp(2.375rem, 1.55rem + 2.6vw, 3.75rem);
  --fs-h1-page: clamp(2.25rem, 1.6rem + 2.2vw, 3.375rem);
  --fs-h2: clamp(1.75rem, 1.3rem + 1.4vw, 2.625rem);
  --fs-h3: 1.1875rem;

  /* ---- spacing scale ---- */
  --sp-1: .25rem;  --sp-2: .5rem;  --sp-3: .75rem; --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;   --sp-7: 2.5rem; --sp-8: 3rem;
  --sp-9: 4rem;    --sp-10: 5rem;

  /* ---- geometry ---- */
  --shell: 1200px;
  --pad: 1.25rem;               /* shell side gutter */
  --section-y: 4rem;
  --col-gap: 2.5rem;
  --radius-sm: 8px;             /* inputs, small controls */
  --radius: 10px;               /* buttons, cards */
  --radius-lg: 12px;            /* form panel */

  /* ---- elevation — fine and navy-tinted, never heavy ---- */
  --shadow-xs: 0 1px 2px rgba(0,33,71,.05);
  --shadow-sm: 0 1px 2px rgba(0,33,71,.05), 0 4px 14px rgba(0,33,71,.06);
  --shadow-md: 0 1px 3px rgba(0,33,71,.06), 0 10px 28px rgba(0,33,71,.09);

  /* ---- box treatment — one edge system for every card and panel ----
     gold top, green left, a light navy hairline right and bottom, and a very
     soft navy/green shadow falling to the bottom-right */
  --card-top:    2px solid var(--gold);
  --card-left:   2px solid var(--green);
  --card-edge:   1px solid rgba(0,33,71,.14);
  --card-edge-hover: rgba(0,33,71,.30);
  --card-shadow: 3px 4px 12px rgba(0,33,71,.06), 1px 1px 3px rgba(0,75,60,.05);
  --card-shadow-hover: 4px 7px 18px rgba(0,33,71,.09), 1px 2px 4px rgba(0,75,60,.06);

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,.84,.44,1);

  /* Height of the sticky bar. Fixed per breakpoint, so the bar never changes
     size while scrolling and anchor targets can clear it exactly. */
  --head-h: 68px;

  /* ---- frosted header ----
     The two tints the translucent bar uses, the highlight along its top edge,
     and the drop shadow the compact state already carried. */
  --glass:         rgba(255,255,255,.70);
  --glass-compact: rgba(255,255,255,.80);
  --glass-edge:    rgba(255,255,255,.55);
  --shadow-head:   0 6px 20px rgba(0,33,71,.07);
}
@media (min-width:48em){
  :root{ --pad:2rem; --section-y:5.5rem; --head-h:84px; --col-gap:3rem; }
}
@media (min-width:64em){
  :root{ --section-y:6.5rem; --col-gap:clamp(3.5rem, 5.5vw, 5.5rem); }
}

/* --------------------------------------------------------- 2. BASE + TYPE */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--fs-body);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  /* clip, not hidden: hidden would make <body> a scroll container and break
     the sticky header whenever the menu locks page scrolling */
  overflow-x:clip;
}
img{ max-width:100%; height:auto; display:block; }
p{ margin:0; text-wrap:pretty; }
a{ color:var(--navy); text-underline-offset:.2em; text-decoration-thickness:1px; }
a:hover{ text-decoration-thickness:2px; }
strong{ font-weight:650; color:var(--navy); }

h1,h2{
  font-family:var(--serif); font-weight:600;
  line-height:1.14; letter-spacing:-.012em;
  margin:0; color:var(--navy); text-wrap:balance;
}
h1{ font-size:var(--fs-h1); }
h2{ font-size:var(--fs-h2); }
h3{
  font-family:var(--sans); font-weight:650;
  font-size:var(--fs-h3); line-height:1.35; letter-spacing:-.005em;
  margin:0; color:var(--navy); text-wrap:balance;
}

/* Anything reachable by an in-page link clears the sticky header. */
[id]{ scroll-margin-top:calc(var(--head-h) + var(--sp-5)); }
/* Controls reached with Tab or Shift+Tab, or focused by form validation, do the
   same, and also stay clear of the floating WhatsApp button in the bottom
   corner. Set on the page's own controls, not as scroll-padding on the root:
   root padding made the page jump whenever the menu locked scrolling. */
:is(main, .site-foot) :is(a[href], button, input, select, textarea, summary){
  scroll-margin-top:calc(var(--head-h) + var(--sp-5));
  scroll-margin-bottom:calc(52px + 2 * var(--sp-4));
}

/* ------------------------------------------------------ 3. ACCESSIBILITY */
.skip{
  position:absolute; left:var(--sp-3); top:-100px; z-index:300;
  background:var(--navy); color:var(--white);
  padding:.8rem 1.1rem; border-radius:var(--radius-sm);
  font-weight:600; text-decoration:none;
}
.skip:focus{ top:var(--sp-3); }
#main:focus{ outline:none; }

/* One focus language: a solid navy ring on light grounds, gold on dark.
   Both clear 3:1 against their surface. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--navy);
  outline-offset:3px;
}
:where(.hero,.band-green,.site-foot) :where(a,button):focus-visible,
.skip:focus-visible{
  outline-color:var(--gold);
}

.visually-hidden{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

/* ------------------------------------------------ 4. HEADER + NAVIGATION */
.tricolour{ display:flex; height:4px; }
.tricolour i{ display:block; height:100%; }
.tricolour i:nth-child(1){ flex:0 0 62%; background:var(--navy); }
.tricolour i:nth-child(2){ flex:0 0 26%; background:var(--green); }
.tricolour i:nth-child(3){ flex:0 0 12%; background:var(--gold); }

/* One sticky bar. Opaque white is the fallback, so on a browser without
   backdrop-filter nothing is lost. Where the filter is supported the bar turns
   translucent and blurs the page travelling under it, and the lockup it
   carries has a transparent canvas so no white box sits over that blur. Only
   the hairline, the tint and a soft shadow respond to scrolling; the height is
   fixed. */
.site-head{
  position:sticky; top:0; z-index:100;
  background:var(--white);
  border-bottom:1px solid var(--gold-24);
  transition:box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.site-head.is-compact{
  border-bottom-color:var(--gold-50);
  box-shadow:var(--shadow-head);
}

@supports ((-webkit-backdrop-filter:saturate(180%) blur(20px)) or (backdrop-filter:saturate(180%) blur(20px))){
  .site-head{
    background:var(--glass);
    -webkit-backdrop-filter:saturate(180%) blur(20px);
    backdrop-filter:saturate(180%) blur(20px);
    box-shadow:inset 0 1px 0 var(--glass-edge);
  }
  /* scrolled: a firmer tint, and the drop shadow kept alongside the highlight */
  .site-head.is-compact{
    background:var(--glass-compact);
    box-shadow:inset 0 1px 0 var(--glass-edge), var(--shadow-head);
  }
}

/* Anyone who asks their system for less transparency gets the opaque bar. */
@media (prefers-reduced-transparency: reduce){
  .site-head{
    background:var(--white);
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
    box-shadow:none;
  }
  .site-head.is-compact{
    background:var(--white);
    box-shadow:var(--shadow-head);
  }
}

.head-inner{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4);
  height:var(--head-h);
}

/* The lockup is the official artwork with its canvas cleared, so only the mark
   reads and the bar's blur carries on behind it. Sized by width, ratio
   preserved. */
.brand{ display:flex; align-items:center; flex:none; border-radius:var(--radius-sm); }
.brand-mark{ display:block; width:140px; height:auto; }          /* ~48px tall */
@media (min-width:48em){ .brand-mark{ width:180px; } }            /* ~62px tall */
@media (min-width:64em){ .brand-mark{ width:192px; } }            /* ~66px tall */
@media (max-width:22.5em){ .brand-mark{ width:124px; } }          /* 320px phones */

/* --- menu button (phones only) --- */
.nav-toggle{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  min-width:44px; height:44px; padding:0 .85rem;
  background:transparent; color:var(--navy);
  border:1px solid var(--navy-20); border-radius:var(--radius-sm);
  font-family:var(--sans); font-size:var(--fs-small); font-weight:600; line-height:1;
  cursor:pointer;
  transition:border-color .2s var(--ease), background-color .2s var(--ease);
}
.nav-toggle:hover{ border-color:var(--navy-50); background:var(--navy-04); }
.nav-toggle[aria-expanded="true"]{ border-color:var(--navy); background:var(--navy-04); }
.nav-toggle svg{ width:20px; height:20px; flex:none; }
.nav-toggle .icon-close,
.nav-toggle[aria-expanded="true"] .icon-menu{ display:none; }
.nav-toggle[aria-expanded="true"] .icon-close{ display:block; }

.site-nav ul{ list-style:none; margin:0; padding:0; }
.site-nav ul a{ color:var(--navy); text-decoration:none; font-weight:500; }

/* Dedicated close control. It exists only inside the phone/tablet panel. */
.nav-close{
  display:flex; align-items:center; justify-content:center; gap:var(--sp-2);
  width:100%; min-height:44px; margin-bottom:var(--sp-2);
  background:var(--white); color:var(--navy);
  border:1px solid var(--navy-20); border-radius:var(--radius-sm);
  font-family:var(--sans); font-size:var(--fs-small); font-weight:600; cursor:pointer;
  transition:border-color .2s var(--ease), background-color .2s var(--ease);
}
.nav-close:hover{ border-color:var(--navy-50); background:var(--navy-04); }
.nav-close svg{ width:18px; height:18px; flex:none; }

/* the one gold action in the bar — a button, not a nav link */
.btn.nav-cta{ min-height:44px; padding:.5rem 1.1rem; font-size:var(--fs-small); }

/* --- below 60em: four links plus the CTA do not fit on one row --- */
@media (max-width:59.99em){
  /* No JavaScript: there is no working toggle, so show everything as a row. */
  html:not(.js) .nav-toggle,
  html:not(.js) .nav-close{ display:none; }
  html:not(.js) .head-inner{ height:auto; flex-wrap:wrap; padding-block:var(--sp-3); }
  html:not(.js) .site-nav{ flex:0 0 100%; }
  html:not(.js) .nav-panel{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2) var(--sp-5); }
  html:not(.js) .site-nav ul{ display:flex; flex-wrap:wrap; gap:0 var(--sp-5); }
  html:not(.js) .site-nav ul a{ display:inline-flex; align-items:center; min-height:44px; }

  /* With JavaScript: an overlay panel under the bar. It is positioned, not in
     the flow, so opening it never pushes the page or grows the header. The
     navy veil around it closes the menu when tapped (site.js). */
  .js .site-nav{
    display:none;
    position:absolute; top:100%; left:0; right:0;
    height:calc(100vh - var(--head-h));
    height:calc(100dvh - var(--head-h));
    overflow-y:auto; overscroll-behavior:contain;
    background:var(--navy-50);
  }
  .js .site-nav.is-open{ display:block; animation:veil-in .2s var(--ease) both; }
  .js .nav-panel{
    background:var(--white);
    padding:var(--sp-4) var(--pad) var(--sp-6);
    border-top:1px solid var(--navy-08);
    box-shadow:0 14px 28px rgba(0,33,71,.14);
    animation:panel-in .24s var(--ease-out) both;
  }
  .js .site-nav li + li{ border-top:1px solid var(--navy-08); }
  .js .site-nav ul a{
    position:relative;
    display:flex; align-items:center; min-height:56px;
    padding-inline:var(--sp-4);
    font-size:1.125rem;
    border-radius:var(--radius-sm);
    transition:background-color .15s var(--ease);
  }
  .js .site-nav ul a:hover{ background:var(--navy-04); }
  .js .site-nav ul a:focus-visible{ outline-offset:-2px; }
  .js .site-nav ul a[aria-current="page"]{ font-weight:650; }
  .js .site-nav ul a[aria-current="page"]::before{
    content:""; position:absolute; left:0; top:50%; width:3px; height:1.5rem;
    margin-top:-.75rem; border-radius:2px; background:var(--gold);
  }
  .js .nav-cta{ display:flex; width:100%; min-height:52px; margin-top:var(--sp-4); font-size:1rem; }
}
/* the page behind an open menu does not scroll */
html.nav-open{ overflow:hidden; }
@keyframes veil-in{ from{ opacity:0; } to{ opacity:1; } }
@keyframes panel-in{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:none; } }

/* --- desktop: links and CTA share the bar --- */
@media (min-width:60em){
  .nav-toggle,
  .nav-close{ display:none; }          /* never on desktop */
  .site-nav,
  .nav-panel{ display:flex; align-items:center; }
  .nav-panel{ gap:var(--sp-5); }
  .site-nav ul{ display:flex; align-items:center; gap:var(--sp-1); }
  .site-nav ul a{
    position:relative;
    display:flex; align-items:center; height:44px; padding:0 .8rem;
    font-size:1rem; border-radius:var(--radius-sm);
    transition:color .2s var(--ease), background-color .2s var(--ease);
  }
  .site-nav ul a::after{
    content:""; position:absolute; left:.8rem; right:.8rem; bottom:5px;
    height:2px; border-radius:2px; background:var(--gold);
    transform:scaleX(0); transform-origin:left;
    transition:transform .24s var(--ease-out), background-color .2s var(--ease);
  }
  .site-nav ul a:hover{ background:var(--navy-04); }
  .site-nav ul a:hover::after{ transform:scaleX(1); background:var(--gold-50); }
  .site-nav ul a:focus-visible{ outline-offset:0; }
  .site-nav ul a[aria-current="page"]{ font-weight:650; }
  .site-nav ul a[aria-current="page"]::after{ transform:scaleX(1); background:var(--gold); }
}

/* ------------------------------------------------------------- 5. BUTTONS */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  min-height:52px; padding:.75rem 1.5rem;
  font-family:var(--sans); font-size:1rem; font-weight:600; line-height:1.25;
  text-decoration:none; text-align:center;
  border:1px solid transparent; border-radius:var(--radius);
  background-color:transparent; background-image:none;
  cursor:pointer;
  transition:background-color .2s var(--ease), border-color .2s var(--ease),
             color .2s var(--ease), box-shadow .2s var(--ease);
}
.btn:hover{ text-decoration:none; }

/* primary — official gold, navy text (7.5:1). Hover lifts the gold with a
   white wash rather than a new hue, and never moves the button. */
.btn-primary{
  background-color:var(--gold); color:var(--navy); border-color:var(--gold);
  box-shadow:var(--shadow-xs);
}
.btn-primary:hover{
  background-image:linear-gradient(rgba(255,255,255,.2), rgba(255,255,255,.2));
  box-shadow:var(--shadow-sm);
}
.btn-primary:active{
  background-image:linear-gradient(var(--navy-08), var(--navy-08));
  box-shadow:none;
}

/* secondary — transparent with a firm edge */
.btn-secondary{ color:var(--navy); border-color:var(--navy-50); }
.btn-secondary:hover{ background-color:var(--navy-04); border-color:var(--navy); }
.btn-secondary:active{ background-color:var(--navy-08); }

/* on dark grounds the secondary turns white-on-dark */
:where(.hero,.band-green) .btn-secondary{ color:var(--white); border-color:var(--on-dark-40); }
:where(.hero,.band-green) .btn-secondary:hover{ background-color:var(--on-dark-08); border-color:var(--white); }
:where(.hero,.band-green) .btn-secondary:active{ background-color:var(--on-dark-16); }

.btn:disabled,.btn[aria-disabled="true"]{
  opacity:.5; cursor:not-allowed; box-shadow:none; pointer-events:none;
}
.btn[aria-busy="true"]{ opacity:.72; pointer-events:none; }

.btn-block{ width:100%; }
.btn-row{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-3); margin-top:var(--sp-6); }
@media (max-width:29.99em){ .btn-row .btn{ width:100%; } }

/* ---------------------------------------------------------------- 6. HERO */
.hero{
  position:relative; isolation:isolate;
  color:var(--white);
  background:
    linear-gradient(112deg, rgba(0,75,60,0) 38%, rgba(0,75,60,.5) 100%),
    var(--navy);
  overflow:hidden;
  padding-block:0;
}
/* the edge into the section below: one gold hairline */
.hero::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px; z-index:3;
  background:var(--gold-50); pointer-events:none;
}
.hero h1{ color:var(--white); }
.hero p{ color:var(--on-dark); }

/* shared label style: small caps, no decorative rule */
.eyebrow{
  display:block;
  margin-bottom:var(--sp-4);
  font-size:var(--fs-label); line-height:1rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold-text);
}
.hero .eyebrow{ color:var(--gold); }                       /* 6.8:1 on navy */
@media (max-width:29.99em){
  .hero-home .eyebrow{ font-size:.6875rem; letter-spacing:.08em; text-wrap:balance; }
}
.band-green .eyebrow{ color:var(--on-dark); }              /* gold is < 4.5:1 on green */

/* ---- home hero ----
   Phones and tablets: copy on the navy ground, then the photograph in a wide
   frame. Desktop: copy on the left of the shell, the photograph as a panel
   running to the right edge of the window. The panel's left edge is faded
   with a mask (transparency only — the photograph is never recoloured), so it
   dissolves into the ground with no seam, and the wall lettering in the
   photo's left half no longer sits behind the heading. */
.hero-home{
  background:
    radial-gradient(90% 80% at 0% 100%, rgba(0,75,60,.42) 0%, rgba(0,75,60,0) 70%),
    var(--navy);
}
.hero-inner{ position:relative; z-index:2; padding-block:var(--sp-8) var(--sp-7); }
.hero-copy{ max-width:36rem; }

.hero-home h1{
  font-size:var(--fs-h1);
  font-weight:500;
  line-height:1.07; letter-spacing:-.02em;
}
.hero-home .lede{
  margin-top:var(--sp-5);
  max-width:34rem;
  font-size:var(--fs-lede); line-height:1.65;
}
.hero-home .btn-row{ margin-top:var(--sp-7); }

/* hero copy is centred inside its own column; the column keeps its place */
.hero-home .hero-copy{ text-align:center; }
.hero-home .lede{ margin-inline:auto; }
.hero-home .btn-row{ justify-content:center; }

.hero-media{ position:relative; }
.hero-media img{
  width:100%;
  aspect-ratio:3/2;
  object-fit:cover;
  object-position:93% 30%;          /* she sits at the right of the source frame */
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, var(--navy) 22%);
          mask-image:linear-gradient(180deg, transparent 0%, var(--navy) 22%);
}
@media (min-width:40em) and (max-width:63.99em){
  .hero-media img{ aspect-ratio:12/5; object-position:100% 50%; }
}

@media (min-width:64em){
  .hero-inner{
    display:flex; align-items:center;
    min-height:620px;
    padding-block:var(--sp-9);
  }
  .hero-copy{ width:54%; max-width:40rem; }

  /* Panel: from just before the shell's midpoint to the window's right edge.
     W = shell content width; the fade covers the join with the copy column. */
  .hero-media{
    position:absolute; top:0; bottom:0; right:0; z-index:1;
    left:calc(50% - .05 * (min(100%, var(--shell)) - 2 * var(--pad)));
    /* On wide screens the panel is capped at 46rem so the wall sign in the
       photo's left half never shows through the fade behind the heading. */
    left:max(calc(50% - .05 * (min(100%, var(--shell)) - 2 * var(--pad))), calc(100% - 46rem));
  }
  .hero-media picture{ display:block; height:100%; }
  .hero-media img{
    height:100%; aspect-ratio:auto;
    object-position:100% 38%;
    -webkit-mask-image:linear-gradient(90deg, transparent 0%, rgba(0,33,71,.3) 16%, rgba(0,33,71,.82) 30%, var(--navy) 40%);
            mask-image:linear-gradient(90deg, transparent 0%, rgba(0,33,71,.3) 16%, rgba(0,33,71,.82) 30%, var(--navy) 40%);
  }
}
@media (min-width:64em) and (max-width:74.99em){
  .hero-media img{
    -webkit-mask-image:linear-gradient(90deg, transparent 0%, rgba(0,33,71,.35) 10%, rgba(0,33,71,.85) 20%, var(--navy) 27%);
            mask-image:linear-gradient(90deg, transparent 0%, rgba(0,33,71,.35) 10%, rgba(0,33,71,.85) 20%, var(--navy) 27%);
  }
}
@media (min-width:75em){ .hero-inner{ min-height:640px; } }
@media (min-width:90em){ .hero-inner{ min-height:660px; } }

/* ---- inner-page hero ----
   Same ground, no photograph. Title on the left, the supporting copy on the
   right — the same column split as the section heads below it. */
.hero-page .hero-page-inner{
  position:relative; z-index:2;
  display:grid; gap:var(--sp-5);
  padding-block:var(--sp-8) var(--sp-7);
}
.hero-page h1{ font-size:var(--fs-h1-page); font-weight:500; letter-spacing:-.018em; }
.hero-page .lede{ font-size:var(--fs-lede); line-height:1.65; max-width:36rem; }
.hero-page-body > p + p{ margin-top:var(--sp-4); max-width:36rem; }
.hero-page .btn-row{ margin-top:var(--sp-5); }
@media (min-width:64em){
  .hero-page .hero-page-inner{
    grid-template-columns:minmax(0,6fr) minmax(0,5fr);
    column-gap:var(--col-gap);
    align-items:end;
    padding-block:var(--sp-10) var(--sp-9);
  }
}

/* ---------------------------------------- 7. SECTIONS + SHARED LAYOUTS */
.shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--pad); }
section{ padding-block:var(--section-y); }

.band-paper{ background:var(--paper); border-block:1px solid var(--navy-08); }
.band-green{ background:var(--green); color:var(--white); }
.band-green h2,.band-green h3{ color:var(--white); }
.band-green p{ color:var(--on-dark); }
.band-green strong{ color:var(--white); }

.section-lede{ font-size:var(--fs-lede); line-height:1.7; color:var(--ink-80); max-width:62ch; }
.band-green .section-lede{ color:var(--on-dark); }
:where(h2,.section-lede) + .section-lede{ margin-top:var(--sp-4); }
h2 + .section-lede{ margin-top:var(--sp-5); }

/* Section head: eyebrow + title on the left, the introduction on the right.
   On narrow screens the two simply stack. */
.section-head{ display:grid; gap:var(--sp-5); }
@media (min-width:64em){
  .section-head{
    grid-template-columns:minmax(0,6fr) minmax(0,5fr);
    column-gap:var(--col-gap);
    align-items:start;
  }
  /* drop the introduction by the eyebrow's height so its first line sits
     level with the top of the heading */
  .section-head > .section-body{ padding-top:calc(2rem + .3rem); }
}
.section-head + :is(.value-grid,.prose-grid,.prog-grid,.stage-list,.route-grid,.belief,.contact-methods),
.split + .contact-methods{ margin-top:var(--sp-8); }
@media (min-width:64em){
  .section-head + :is(.value-grid,.prose-grid,.prog-grid,.stage-list,.route-grid,.belief,.contact-methods),
  .split + .contact-methods{ margin-top:var(--sp-9); }
}

/* Split: an introduction column and a main column. Children are placed by
   role, so DOM (and reading/tab) order stays intro → main → after. */
.split{ display:grid; gap:var(--sp-7); }
@media (min-width:64em){
  .split{
    grid-template-columns:minmax(0,5fr) minmax(0,6fr);
    grid-template-rows:auto 1fr;
    column-gap:var(--col-gap); row-gap:0;
    align-items:start;
  }
  .split > .split-intro{ grid-column:1; grid-row:1; }
  .split > .split-main{ grid-column:2; grid-row:1 / span 2; }
  .split > .split-after{ grid-column:1; grid-row:2; }
  .split-wide{ grid-template-columns:minmax(0,4fr) minmax(0,8fr); }
  .split-intro.is-sticky{ position:sticky; top:calc(var(--head-h) + var(--sp-6)); }
}
.split-after.btn-row{ margin-top:0; }
.split-intro > .btn-row{ margin-top:var(--sp-6); }
.split-after > .btn-row{ margin-top:var(--sp-5); }
@media (min-width:64em){ .split > .split-after{ margin-top:var(--sp-6); } }

/* two equal editorial columns (Teach With Us, on the green band) */
.two-col{ display:grid; gap:var(--sp-9); }
@media (min-width:64em){ .two-col{ grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:var(--col-gap); } }

.measure{ max-width:36rem; }       /* single reading column, for simple sections */
.aside{ margin-top:var(--sp-6); }
.fine{ color:var(--ink-68); font-size:var(--fs-small); max-width:62ch; }
.section-lede + .fine,
.section-lede.fine{ margin-top:var(--sp-4); }

/* a closing brand line: sans, no decorative rule */
.tagline{
  display:block;
  margin-top:var(--sp-8);
  font-weight:650; font-size:1.0625rem; line-height:1.4; color:var(--navy);
}
.section-body > .tagline{ margin-top:var(--sp-5); }

/* ------------------------------------------------------ 8. CONTENT BLOCKS */

/* audience blocks (career value) — pairs of statements under a shared rule,
   not cards: long copy reads better in two columns than four */
.value-grid{ list-style:none; margin-inline:0; margin-bottom:0; padding:0; display:grid; gap:var(--sp-7); }
@media (min-width:48em){ .value-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:var(--col-gap); row-gap:var(--sp-8); } }
.value-grid li{ position:relative; padding-top:var(--sp-5); border-top:1px solid var(--navy-20); }
.value-grid li::before{
  content:""; position:absolute; top:-2px; left:0; width:2.5rem; height:3px; background:var(--gold);
}
.value-grid h3{ margin-bottom:var(--sp-2); }
.value-grid p{ color:var(--ink-80); font-size:1rem; max-width:62ch; }

/* card system — one edge treatment, radius and elevation for every box.
   Static cards have no hover state; only linked cards (.method) respond. */
.prose-grid{ display:grid; gap:var(--sp-4); }
@media (min-width:48em){ .prose-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-5); } }
.prose-grid > div,
.prog-card,
.route-grid > li,
.method,
.form-wrap{
  background:var(--white);
  border-top:var(--card-top);
  border-left:var(--card-left);
  border-right:var(--card-edge);
  border-bottom:var(--card-edge);
  border-radius:var(--radius);
  box-shadow:var(--card-shadow);
}
.prose-grid > div{ padding:var(--sp-5) var(--sp-5) calc(var(--sp-5) + .125rem); }
@media (min-width:48em){ .prose-grid > div{ padding:1.75rem 1.875rem 1.875rem; } }
.prose-grid h3{ margin-bottom:var(--sp-2); }
.prose-grid p{ color:var(--ink-80); font-size:1rem; }
.prose-grid .route-link{ margin-top:var(--sp-2); }

/* launch programmes: six equal cards, three per row in two rows on laptops
   and desktops. Two per row on small tablets, one per row on phones */
.prog-grid{ list-style:none; margin-inline:0; margin-bottom:0; padding:0; display:grid; gap:var(--sp-5); }
@media (min-width:48em){ .prog-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:64em){ .prog-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
/* on small laptops the three columns are narrower: slightly tighter padding
   keeps every gold label on one line */
@media (min-width:64em) and (max-width:74.99em){
  .prog-grid > .prog-card{ padding:1.5rem 1.25rem 1.625rem; }
  .prog-grid .prog-num{ letter-spacing:.08em; }
}
.prog-card{ display:flex; flex-direction:column; padding:var(--sp-5) var(--sp-5) var(--sp-6); }
@media (min-width:48em){ .prog-card{ padding:1.75rem 1.875rem 1.875rem; } }
.prog-num{
  margin-bottom:var(--sp-2);
  font-size:var(--fs-label); line-height:1rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--gold-text);
}
.prog-card h3{ font-size:1.3125rem; }
.prog-promise{ margin-top:var(--sp-2); font-weight:600; font-size:1.0625rem; line-height:1.45; color:var(--navy); }
.prog-desc{ margin-top:var(--sp-3); max-width:64ch; color:var(--ink-80); font-size:1rem; }
.prog-output{ margin-top:auto; padding-top:var(--sp-5); }
.prog-output > p:first-child{
  padding-top:var(--sp-4); border-top:1px solid var(--navy-12);
  font-size:var(--fs-small); line-height:1.6; color:var(--ink-80);
}
.prog-output > p{ max-width:68ch; }
.prog-output .route-link{ font-size:1rem; }

.prog-after{ display:grid; gap:var(--sp-5); margin-top:var(--sp-8); }
.prog-after .btn-row{ margin-top:0; }
@media (min-width:64em){
  .prog-after{ grid-template-columns:minmax(0,8fr) minmax(0,4fr); column-gap:var(--col-gap); align-items:end; }
  .prog-after .btn-row{ justify-content:flex-end; }
}

/* where this is going — three stages under a shared rule; "Now" carries gold */
.stage-list{ list-style:none; margin-inline:0; margin-bottom:0; padding:0; display:grid; gap:var(--sp-6); }
@media (min-width:48em){ .stage-list{ grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:var(--col-gap); } }
.stage-list li{
  position:relative; padding-top:var(--sp-5);
  border-top:1px solid var(--navy-20);
  font-size:1.0625rem; line-height:1.55; color:var(--ink-80);
}
.stage-list li:first-child::before{
  content:""; position:absolute; top:-2px; left:0; width:2.5rem; height:3px; background:var(--gold);
}
.stage-lbl{
  display:block; margin-bottom:var(--sp-2);
  font-family:var(--serif); font-size:1.625rem; font-weight:500; line-height:1.1; color:var(--navy);
}

/* the Northbridge method — five numbered rows beside the introduction */
.steps-list{ list-style:none; margin:0; padding:0; counter-reset:step; }
.steps-list li{
  counter-increment:step;
  display:grid; grid-template-columns:2.75rem minmax(0,1fr); column-gap:var(--sp-4);
  padding-block:var(--sp-5);
  border-top:1px solid var(--navy-12);
}
.steps-list li:last-child{ border-bottom:1px solid var(--navy-12); }
.steps-list li::before{
  content:counter(step);
  grid-row:1 / span 2;
  font-family:var(--serif); font-size:2rem; font-weight:500; line-height:1; color:var(--gold-text);
}
.steps-list h3{ margin-bottom:var(--sp-1); }
.steps-list p{ grid-column:2; color:var(--ink-80); font-size:1rem; max-width:60ch; }

/* philosophy — one statement on the green band */
.philosophy .shell{ display:grid; gap:var(--sp-5); }
.philosophy .eyebrow{ margin-bottom:0; }
.philosophy-line{
  max-width:22ch;
  font-family:var(--serif); font-weight:500;
  font-size:clamp(1.875rem, 1.2rem + 2.2vw, 3.125rem);
  line-height:1.14; letter-spacing:-.018em;
  text-wrap:balance;
}
.band-green .philosophy-line{ color:var(--white); }
.philosophy-sub{ max-width:40rem; font-size:var(--fs-lede); line-height:1.7; }
@media (min-width:64em){
  .philosophy .shell{
    grid-template-columns:minmax(0,6fr) minmax(0,6fr);
    column-gap:var(--col-gap); align-items:center;
  }
  .philosophy .eyebrow{ grid-column:1 / -1; }
}

/* straight answers — native details/summary; no script, no extra ARIA */
.faq-item{ border-top:1px solid var(--navy-12); }
.faq-item:last-child{ border-bottom:1px solid var(--navy-12); }
.faq-item summary{
  display:flex; align-items:flex-start; justify-content:space-between; gap:var(--sp-4);
  min-height:44px; padding-block:var(--sp-5);
  list-style:none; cursor:pointer;
  font-weight:650; font-size:1.0625rem; line-height:1.45; color:var(--navy);
  border-radius:var(--radius-sm);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:""; flex:none; width:.625rem; height:.625rem; margin:.4em .25rem 0 0;
  border-right:2px solid var(--gold-text); border-bottom:2px solid var(--gold-text);
  transform:rotate(45deg);
  transition:transform .2s var(--ease);
}
.faq-item[open] summary::after{ margin-top:.65em; transform:rotate(-135deg); }
.faq-item summary:hover{ color:var(--green); }
.faq-item summary:focus-visible{ outline-offset:2px; }
.faq-answer{ padding-bottom:var(--sp-5); max-width:65ch; }
.faq-answer p{ color:var(--ink-80); font-size:1rem; }
.faq-answer a{ font-weight:600; }

/* start here — four routes, each with its own next step */
.route-grid{ list-style:none; margin-inline:0; margin-bottom:0; padding:0; display:grid; gap:var(--sp-4); }
@media (min-width:48em){ .route-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-5); } }
@media (min-width:75em){ .route-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.route-grid > li{ display:flex; flex-direction:column; padding:var(--sp-5) var(--sp-5) var(--sp-4); }
.route-grid h3{ margin-bottom:var(--sp-2); }
.route-grid p{ color:var(--ink-80); font-size:1rem; }
/* inline-block, not flex: when a label wraps, the arrow stays after its last
   word instead of floating to the far edge */
.route-link{
  display:inline-block; align-self:flex-start;
  min-height:44px; padding-block:.625rem;
  font-weight:650; line-height:1.5; color:var(--navy); text-decoration:none;
}
.route-grid .route-link{ margin-top:auto; }
.route-link::after{
  content:"\2192"; content:"\2192" / "";
  display:inline-block; margin-left:var(--sp-2);
  color:var(--gold-text);
  transition:transform .2s var(--ease);
}
.route-link:hover{ text-decoration:underline; text-decoration-color:var(--gold); text-decoration-thickness:2px; }
.route-link:hover::after{ transform:translateX(3px); }

/* about — the four-line belief statement */
.belief h3{
  margin-bottom:var(--sp-5);
  font-size:var(--fs-label); line-height:1rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--gold-text);
}
.belief-list{ list-style:none; margin:0; padding:0; display:grid; gap:var(--sp-4); }
@media (min-width:40em){ .belief-list{ grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:var(--col-gap); } }
@media (min-width:64em){ .belief-list{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.belief-list li{
  padding-top:var(--sp-4); border-top:2px solid var(--gold);
  font-family:var(--serif); font-size:1.375rem; font-weight:500; line-height:1.25; color:var(--navy);
}

/* a plain list marked with a short gold dash (Presence360) */
.dash-list{ list-style:none; margin:0; padding:0; display:grid; gap:var(--sp-3); }
.dash-list li{
  display:grid; grid-template-columns:1.25rem minmax(0,1fr);
  color:var(--ink-80); font-size:1rem; line-height:1.6;
}
.dash-list li::before{
  content:""; width:6px; height:6px; margin-top:.65em; border-radius:50%; background:var(--gold);
}

/* a quiet highlighted paragraph (Teach With Us: what you get from it) */
.callout{
  padding:var(--sp-5);
  background:var(--paper);
  border-left:3px solid var(--gold); border-radius:0 var(--radius-sm) var(--radius-sm) 0;
}
.callout p{ color:var(--ink-80); font-size:1rem; line-height:1.65; }

/* about: copy beside the crest */
.split-crest{ align-items:center; }
@media (min-width:64em){
  .split.split-crest{ grid-template-columns:minmax(0,7fr) minmax(0,4fr); grid-template-rows:auto; }
}
.split-copy > .tagline{ margin-top:var(--sp-5); }
/* The crest file is artwork on an opaque white canvas, so the panel is white
   too and the canvas disappears. The bottom 2.5% of the frame is empty canvas
   plus a one-pixel sliver left over from the original cut — clipped for
   display only; the file and the artwork are untouched. */
.split-figure{
  margin:0; display:grid; place-items:center;
  padding:var(--sp-7) var(--sp-5);
}
.split-figure img{ width:min(200px, 60%); height:auto; clip-path:inset(0 0 2.5% 0); }
@media (min-width:64em){ .split-figure{ padding:var(--sp-9) var(--sp-6); } .split-figure img{ width:220px; } }

/* fact list — hairline-separated statements with a small gold marker */
.fact-list{ list-style:none; margin:0; padding:0; }
.fact-list li{
  display:flex; gap:var(--sp-4); align-items:flex-start;
  padding-block:var(--sp-4);
  border-top:1px solid var(--navy-12);
  color:var(--ink-80); font-size:1.0625rem;
}
.fact-list li:last-child{ border-bottom:1px solid var(--navy-12); }
.fact-list li::before{
  content:""; flex:none; width:8px; height:8px; margin-top:.62em;
  background:var(--gold); transform:rotate(45deg);
}
.band-green .fact-list li{ color:var(--on-dark); border-color:var(--on-dark-16); }
.fact-list a{ font-weight:600; }
.split-intro + .fact-list,
.section-head + .fact-list{ margin-top:0; }

/* contact methods — the one clickable card */
.contact-methods{ display:grid; gap:var(--sp-3); }
@media (min-width:64em){ .contact-methods{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--sp-4); } }
.method{
  display:flex; align-items:center; gap:var(--sp-4);
  min-height:84px; padding:var(--sp-4) var(--sp-5);
  color:var(--navy); text-decoration:none;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease);
}
.method:hover{
  border-right-color:var(--card-edge-hover); border-bottom-color:var(--card-edge-hover);
  box-shadow:var(--card-shadow-hover); text-decoration:none;
}
.method:focus-visible{ outline-offset:2px; }
.method > span{ min-width:0; }
.method .ico{
  flex:none; width:44px; height:44px; border-radius:var(--radius-sm);
  display:grid; place-items:center;
  background:var(--green-06); color:var(--green);
  border:1px solid var(--green-16);
  transition:background-color .2s var(--ease), border-color .2s var(--ease);
}
.method:hover .ico{ background:var(--gold-12); border-color:var(--gold-50); }
.method svg{ width:20px; height:20px; }
.method .lbl{
  display:block; margin-bottom:2px;
  font-size:var(--fs-label); line-height:1rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--gold-text);
}
.method .val{ display:block; font-weight:600; font-size:1.0625rem; line-height:1.35; overflow-wrap:anywhere; }
.contact-methods + .btn-row{ margin-top:var(--sp-7); }

/* ---------------------------------------------------------------- 9. FORMS */
.form-wrap{
  padding:var(--sp-5) var(--sp-5) var(--sp-6);
}
@media (min-width:48em){ .form-wrap{ padding:var(--sp-7) var(--sp-7) var(--sp-7); } }
.split:not(:has(.split-main)) .form-wrap,
.form-wrap:not(.split-main){ max-width:44rem; }

.field{ margin-bottom:var(--sp-5); }
.field[hidden]{ display:none; }
.field label{
  display:block; margin-bottom:.375rem;
  font-size:var(--fs-small); font-weight:600; line-height:1.4; color:var(--navy);
}
.field .req{ color:var(--gold-text); }
.field .opt{ font-weight:400; color:var(--ink-68); }
.field .hint{ margin:-.125rem 0 var(--sp-2); max-width:60ch; font-size:.875rem; line-height:1.5; color:var(--ink-68); }

.field input:not([type="checkbox"]),
.field select,
.field textarea{
  display:block; width:100%; min-height:52px; margin:0;
  padding:.8rem var(--sp-4);
  font-family:var(--sans); font-size:1rem; line-height:1.4; color:var(--ink);   /* 16px: no iOS zoom */
  background-color:var(--white);
  border:1px solid var(--navy-50);
  border-radius:var(--radius-sm);
  transition:border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.field select{
  -webkit-appearance:none; appearance:none;
  padding-right:2.75rem; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23002147' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .9rem center; background-size:18px;
}
.field textarea{ min-height:150px; resize:vertical; }
.field input::placeholder,.field textarea::placeholder{ color:var(--ink-68); }
.field :where(input:not([type="checkbox"]),select,textarea):hover{ border-color:var(--navy-72); }
.field :where(input:not([type="checkbox"]),select,textarea):focus{
  outline:2px solid var(--green); outline-offset:0;
  border-color:var(--green);
}

.field .err{ display:none; margin-top:var(--sp-2); font-size:.9375rem; line-height:1.45; font-weight:600; color:var(--error); }
.field .err::before{
  content:""; display:inline-block; width:.5em; height:.5em; margin-right:.5em;
  vertical-align:.12em; background:var(--error); transform:rotate(45deg);
}
.field.has-error :where(input:not([type="checkbox"]),select,textarea){ border-color:var(--error); box-shadow:0 0 0 3px var(--error-12); }
.field.has-error :where(input:not([type="checkbox"]),select,textarea):focus{ outline-color:var(--error); }
.field.has-error .err{ display:block; }

/* consent: box and wording on a quiet tinted panel, grouped with the submit */
.consent{
  display:grid; grid-template-columns:24px minmax(0,1fr); column-gap:var(--sp-3); align-items:start;
  padding:var(--sp-4); margin-top:var(--sp-6);
  background:var(--paper); border:1px solid var(--navy-08); border-radius:var(--radius-sm);
}
.consent input{ width:22px; height:22px; margin:.15rem 0 0; accent-color:var(--green); cursor:pointer; }
.field.consent label{ margin:0; font-size:var(--fs-small); font-weight:400; line-height:1.55; color:var(--ink); cursor:pointer; }
.consent .err{ grid-column:1 / -1; }
.field.consent.has-error{ border-color:var(--error); }

/* what the submit button actually does, said before it is pressed */
.form-handoff{ margin-bottom:var(--sp-4); font-size:var(--fs-small); line-height:1.55; color:var(--ink-80); }

.form-status{ margin-top:var(--sp-5); }
.form-status:empty{ margin:0; }

.note{
  padding:var(--sp-4) var(--sp-5);
  background:var(--paper);
  border:1px solid var(--navy-08); border-left:3px solid var(--gold);
  border-radius:var(--radius-sm);
  font-size:1rem;
}
.note-lead{ margin-bottom:var(--sp-5); }
.note.ok{ border-left-color:var(--green); }
.note.bad{ border-left-color:var(--error); }
.note h3{ font-size:1.0625rem; margin-bottom:var(--sp-1); }
.note p{ color:var(--ink-80); font-size:var(--fs-small); line-height:1.6; }
.note .btn-row{ margin-top:var(--sp-4); }

/* ------------------------------------------------------------ 10. FOOTER */
.site-foot{
  background:var(--navy);
  color:var(--on-dark);
  padding-block:var(--sp-9) var(--sp-6);
  font-size:var(--fs-small);
  border-top:3px solid var(--gold);
}
.site-foot h2{ color:var(--white); font-size:1.375rem; letter-spacing:-.005em; }
.foot-strapline{ margin-top:var(--sp-3); font-weight:600; color:var(--white); }
.foot-intro{ margin-top:var(--sp-2); max-width:30rem; line-height:1.65; color:var(--on-dark-72); }
.foot-tagline{ margin-top:var(--sp-4); font-weight:650; letter-spacing:.02em; color:var(--gold); }   /* 6.8:1 on navy */

.foot-grid{ display:grid; gap:var(--sp-7) var(--sp-6); }
@media (min-width:30em){
  .foot-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .foot-grid > :first-child{ grid-column:1 / -1; }
}
@media (min-width:64em){
  .foot-grid{ grid-template-columns:minmax(0,6fr) minmax(0,2.5fr) minmax(0,2.5fr); column-gap:var(--col-gap); }
  .foot-grid > :first-child{ grid-column:auto; }
}
.foot-grid .lbl{
  margin-bottom:var(--sp-3);
  font-size:var(--fs-label); line-height:1rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--gold);
}
.foot-grid ul{ list-style:none; margin:0; padding:0; }
.foot-grid li{ overflow-wrap:anywhere; }
.site-foot a{ color:var(--on-dark); }
.foot-grid a{
  display:inline-flex; align-items:center; min-height:40px;
  text-decoration:none;
  transition:color .2s var(--ease);
}
.foot-grid a:hover{ color:var(--white); text-decoration:underline; text-decoration-color:var(--gold); text-decoration-thickness:2px; }

.foot-bottom{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--sp-2) var(--sp-5);
  margin-top:var(--sp-8); padding-top:var(--sp-5);
  border-top:1px solid var(--on-dark-16);
  font-size:.8125rem; color:var(--on-dark-72);
}
.foot-motto{ font-size:var(--fs-label); letter-spacing:.16em; text-transform:uppercase; color:var(--gold); }

/* ---------------------------------------------------- floating WhatsApp
   Held back until the hero has been scrolled past (site.js adds .is-visible),
   so on short screens it never covers the ambassador or the hero actions. */
.wa-float{
  position:fixed; right:var(--sp-4); bottom:var(--sp-4); z-index:90;
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  min-width:52px; min-height:52px; padding:0 1.15rem;
  background:var(--green); color:var(--white);
  border:1px solid var(--gold-50); border-radius:var(--radius);
  font-weight:600; font-size:var(--fs-small); text-decoration:none;
  box-shadow:var(--shadow-md);
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .22s var(--ease), transform .22s var(--ease), visibility .22s var(--ease),
             border-color .2s var(--ease), background-image .2s var(--ease);
}
.wa-float.is-visible{ opacity:1; visibility:visible; transform:none; }
.wa-float:hover{
  color:var(--white); border-color:var(--gold);
  background-image:linear-gradient(var(--navy-20), var(--navy-20));
}
.wa-float svg{ width:21px; height:21px; flex:none; }
html.nav-open .wa-float{ visibility:hidden; opacity:0; }
/* and while a form field has focus, so it never sits over the control being
   filled in or its error message (browsers without :has() simply keep it) */
html:has(form :focus) .wa-float{ visibility:hidden; opacity:0; }
@media (max-width:29.99em){ .wa-float .txt{ display:none; } .wa-float{ padding:0; } }

/* ------------------------------------------------------------ MOTION
   Short, opacity + small translate only, never on layout properties, and
   nothing is ever unclickable while it runs. */
@keyframes rise{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
@keyframes fade{ from{ opacity:0; } to{ opacity:1; } }
.hero-copy,
.hero-page-inner{ animation:rise .5s var(--ease-out) both; }
.hero-media img{ animation:fade .6s var(--ease) both; }

/* Reveal on scroll. Gated on .js (set inline in <head>) and applied by
   site.js only to blocks that start below the fold, so content is never
   hidden from no-JS visitors, crawlers or assistive technology. */
.js .reveal{
  opacity:0; transform:translateY(12px);
  transition:opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.js .reveal.is-in{ opacity:1; transform:none; }
.js .reveal[data-d="1"]{ transition-delay:.06s; }
.js .reveal[data-d="2"]{ transition-delay:.12s; }
.js .reveal[data-d="3"]{ transition-delay:.18s; }

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