/* ==================================================================
   BeginsNow Inc — site stylesheet
   Design system: beginsnow-design-system.md
   Visual language: soft serif display at 500, warm off-white ground,
   cream cards, glass over imagery, pill buttons, fixed 8px radius,
   one gradient (eyebrows only).
   Sizing: viewport-proportional display scale re-tuned per breakpoint;
   body copy and UI controls stay on rem so they honour browser zoom.
   Concept: "Support that begins now" · motif: the step
   ================================================================== */

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

:root {
  /* ---- faces ----------------------------------------------------------
     Routed through two tokens so licensing Feijoa / Sharp Earth later is
     a two-line change. Fraunces is requested at wght 400..600 with SOFT
     pinned to 40 and WONK to 0, so no font-variation-settings is needed.
     -------------------------------------------------------------------- */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:    'Schibsted Grotesk', system-ui, -apple-system, Segoe UI, Arial, sans-serif;

  /* ---- grounds ----------------------------------------------------------
     The darks are the logo's own blue, darkened: the wordmark blue sampled
     from assets/img/logo.png is #418DF9 = H215 S94% L62%. This ramp holds
     that hue and steps the lightness down, so every dark surface reads as
     the brand blue rather than a generic navy.
     --ink-rgb carries the channels so the hairlines, glass and shadows below
     all derive from one value — retuning the palette is a one-line change.
     ---------------------------------------------------------------------- */
  --ink:        #01132D;   /* H215 S94% L9%  */
  --ink-soft:   #0B2241;   /* H215 S70% L15% */
  --ink-lift:   #0D2F5E;   /* H215 S76% L21% — a card on ink, hovered */
  --ink-rgb:    1 19 45;   /* channels of --ink */
  --paper:      #FFFCF8;   /* the default body ground — not #FFF */
  --cream:      #F7EDE2;
  --white:      #FFFFFF;

  /* ---- hairlines: 0.8px, never 1px ---- */
  --line:        rgb(var(--ink-rgb) / 0.10);
  --line-strong: rgb(var(--ink-rgb) / 0.20);
  --line-dark:   rgba(255, 252, 248, 0.10);

  /* ---- glass ---- */
  --glass-dark: rgb(var(--ink-rgb) / 0.20);
  --glass-lift: rgb(var(--ink-rgb) / 0.28);   /* hover */
  --glass-nav:  rgb(var(--ink-rgb) / 0.65);   /* heavier than --glass-dark on
                                                 purpose: the cards only ever sit
                                                 over imagery, but the nav also
                                                 travels over paper and cream, and
                                                 --on-ink has to stay legible on
                                                 both (5.7:1 at this value) */
  --glass-flat: rgb(var(--ink-rgb) / 0.80);   /* @supports + mobile fallback */
  --glass-pill: rgb(var(--ink-rgb) / 0.30);   /* §6b chips — consumed by .chip--glass */
  --glass-blur: blur(40px);

  /* ---- whisper shadows — never used for separation ---- */
  --shadow-hair: 0 1px 2px  rgb(var(--ink-rgb) / 0.01);
  --shadow-soft: 0 8px 24px rgb(var(--ink-rgb) / 0.10);

  /* ---- accent ---- */
  --ember:      #F5820C;
  --ember-hi:   #FF9526;
  --ember-ink:  #A95400;   /* accent as text on light — passes 4.5:1 */
  --ember-soft: #FDEEDC;
  --ember-text: #1A1200;   /* text on an ember fill */

  /* ---- logo figure colours, sampled from assets/img/logo.png ----------
     Illustration only (the statement-band art) — never text or UI, where
     the one-accent rule still holds. */
  --brand-orange: #FF8812;
  --brand-yellow: #FFCC00;
  --brand-cyan:   #0094D8;
  --brand-red:    #F73B4A;
  --brand-lime:   #94C545;

  /* ---- text: the same H215 ramp, carried up into the light-ground text ---- */
  --body:       #293E5B;   /* H215 S38% L26% — 10.6:1 on paper */
  --muted:      #5A6B83;   /* H215 S19% L43% —  5.3:1 on paper, 4.7:1 on cream.
                              #60728A read 4.25:1 on cream, and .step__no,
                              .tag--quiet and .field__hint all sit on cream. */
  --on-ink:     #FFFCF8;
  --on-ink-dim: rgba(255, 252, 248, 0.70);

  /* ---- semantic, deliberately outside the brand palette --------------
     The brand set carries no success/error/link colour. Mapping these to
     ember would put the accent on states it does not mean.
     -------------------------------------------------------------------- */
  --ok:        #117A52;
  --ok-on-ink: #4ED8A0;
  --err:       #C4361F;

  /* ---- display scale: viewport-proportional, re-tuned per breakpoint --
     The multiplier goes UP as the screen narrows so the page stays bold
     on a phone, and steps DOWN past 1440/1920 so it does not run away.
     -------------------------------------------------------------------- */
  --fs-display: 11vw;
  --fs-h1: 5.0vw;
  --fs-h2: 4.0vw;
  --fs-h3: 2.4vw;
  --fs-h4: 1.6vw;

  --lh-display: 0.9;
  --lh-h:       1.05;
  --ls-display: -0.04em;
  --ls-h:       -0.02em;

  /* ---- spacing: proportional, with floors ---- */
  --pad-x:           clamp(20px, 4vw, 72px);
  --section-y:       clamp(72px, 8.5vw, 168px);
  --section-y-tight: clamp(48px, 5vw, 96px);
  --gap-sm:          clamp(12px, 1.1vw, 20px);
  --gap-md:          clamp(20px, 2.2vw, 40px);
  --gap-lg:          clamp(32px, 3.3vw, 64px);
  --stack:           clamp(16px, 1.6vw, 28px);

  --container: 1440px;
  /* Section inline padding. Below 1584px this is --pad-x; above it, the
     value that lands content exactly on the 1440px container edge, so a
     full-bleed band and a contained one share one left edge. */
  --edge: max(var(--pad-x), calc((100% - var(--container)) / 2));

  /* ---- floating nav island (see .nav-float) ---- */
  --nav-gap:    clamp(8px, 1vw, 16px);        /* clearance below viewport top */
  --nav-gutter: clamp(8px, 1.5vw, 24px);      /* clearance at the sides */
  /* the bar grows with the viewport: logo 60px on a phone, 84px at 1280,
     93px at 1440, 120px at 1920, 140px from ~2290 up. Nav height is logo + 2 x pad + border,
     so --nav-safe (anchors, sticky offsets) follows it automatically. */
  --logo-h:     clamp(60px, 5.5vw + 14px, 140px);
  --nav-pad-y:  clamp(10px, 0.9vw + 2px, 24px);
  --nav-safe:   calc(var(--nav-gap) + var(--logo-h) + 2 * var(--nav-pad-y) + 2px + 16px);
}

/* ---- the ladder, re-tuned. The .98 boundaries close the fractional
   dead zones that appear under browser zoom and fractional DPR; the
   explicit ranges on the min-width buckets make source order
   irrelevant. 768 sits in the ≤768.98 bucket so an h1 renders 48px
   there, not 45px. ---- */
@media (max-width: 991.98px) { :root { --fs-display:  9.4vw; --fs-h1: 5.9vw; --fs-h2: 4.6vw; --fs-h3: 2.9vw; --fs-h4: 2.3vw; } }
@media (max-width: 768.98px) {
  /* full-width copy on a phone, so the scrim goes top-to-bottom and the
     crop shifts to keep both figures in frame above the headline */
  .page-hero--image { min-height: clamp(460px, 96vw, 560px); }
  .page-hero__bg img { object-position: 64% 30%; }
  .page-hero__scrim {
    background: linear-gradient(180deg,
      rgb(var(--ink-rgb) / 0.55)  0%,
      rgb(var(--ink-rgb) / 0.80) 38%,
      rgb(var(--ink-rgb) / 0.94) 68%,
      rgb(var(--ink-rgb) / 0.97) 100%);
  } :root { --fs-display: 10.8vw; --fs-h1: 6.3vw; --fs-h2: 5.6vw; --fs-h3: 4.0vw; --fs-h4: 3.4vw; } }
@media (max-width: 479.98px) { :root { --fs-display: 16.3vw; --fs-h1: 9.4vw; --fs-h2: 7.6vw; --fs-h3: 5.6vw; --fs-h4: 4.6vw; } }
@media (min-width: 1440px) and (max-width: 1919.98px) { :root { --fs-display: 10.4vw; --fs-h1: 4.6vw; --fs-h2: 3.6vw; --fs-h3: 2.1vw; --fs-h4: 1.4vw; } }
@media (min-width: 1920px) { :root { --fs-display: 9.6vw; --fs-h1: 4.2vw; --fs-h2: 3.2vw; --fs-h3: 1.9vw; --fs-h4: 1.3vw; } }

html { scroll-behavior: smooth; scroll-padding-top: var(--nav-safe); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---- Lenis runtime styles ----
   lenis@1.0.42 ships no CSS of its own and touches no scroll-behavior.
   Without these rules the browser's native smooth scroll restarts on every
   frame Lenis writes documentElement.scrollTop, and the two fight. ---- */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto !important; }
html.lenis-stopped { overflow: hidden; }
html.lenis-scrolling iframe { pointer-events: none; }
html.lenis [data-lenis-prevent] { overscroll-behavior: contain; }

/* vw display type plus wide headings will otherwise produce a horizontal
   scrollbar; clip rather than hidden so position:sticky still works. */
html, body { overflow-x: clip; }

body {
  background: var(--paper);
  color: var(--body);
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.94rem + 0.42vw, 1.125rem);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ==================================================================
   TYPE
   Every heading is the display serif at 500. Only .display goes to 600.
   The min() caps stop the vw scale running away past ~2200px; the var()
   fallbacks stop one typo'd media query collapsing a heading to body size.
   ================================================================== */
h1, h2, h3, h4, h5, h6, .display {
  font-family: var(--font-display);
  font-weight: 500;
  font-optical-sizing: auto;
  color: var(--ink);
  text-wrap: balance;
}

.display { font-size: min(var(--fs-display, 11vw), 220px); font-weight: 600; line-height: var(--lh-display); letter-spacing: var(--ls-display); }
h1       { font-size: min(var(--fs-h1, 5.0vw),  96px); line-height: 0.95;         letter-spacing: var(--ls-display); }
h2       { font-size: min(var(--fs-h2, 4.0vw),  72px); line-height: var(--lh-h);  letter-spacing: var(--ls-h); }
h3       { font-size: min(var(--fs-h3, 2.4vw),  34px); line-height: 1.15;         letter-spacing: var(--ls-h); }
h4       { font-size: min(var(--fs-h4, 1.6vw),  22px); line-height: 1.3;          letter-spacing: var(--ls-h); }

p { max-width: 68ch; text-wrap: pretty; }
a { color: inherit; }
img, video { display: block; max-width: 100%; }
strong, b { font-weight: 600; color: var(--ink); }
::selection { background: var(--ember); color: var(--paper); }

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

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 500;
  background: var(--ink); color: var(--on-ink);
  padding: 12px 18px; border-radius: 9999px;
  font-weight: 500; text-decoration: none;
  transition: top 0.2s ease;
}
.skip-link:focus { top: 12px; }

.wrap { max-width: var(--container); margin-inline: auto; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ==================================================================
   SECTIONS
   padding-block and padding-inline are separate because the vertical and
   horizontal curves differ and .section--tight overrides only the block.
   ================================================================== */
.section { padding-block: var(--section-y); padding-inline: var(--edge); }
.section--warm { background: var(--cream); }
.section--ink  { background: var(--ink); color: var(--on-ink-dim); }
.section--ink h1, .section--ink h2, .section--ink h3, .section--ink h4, .section--ink .display { color: var(--on-ink); }
.section--ink strong, .section--ink b { color: var(--on-ink); }
.section--tight { padding-block: var(--section-y-tight); }

/* ---- the eyebrow: gradient-clipped, sentence case ---------------------
   The solid colour is the real declaration; the gradient only replaces it
   where background-clip: text is supported, so the label is never invisible.
   This is the one gradient with personality on the site. Eyebrows only.
   --------------------------------------------------------------------- */
.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: clamp(0.875rem, 0.83rem + 0.18vw, 1rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-transform: none;
  margin-bottom: var(--gap-sm);
  color: var(--ember-ink);
}
.section--ink .eyebrow,
.page-hero .eyebrow,
.hero__eyebrow,
.serve-band .eyebrow,
.contact-split__info .eyebrow { color: var(--ember); }

@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .eyebrow {
    background-image: linear-gradient(to left,
      #F9A94A 0%, #F5820C 22%, #C46500 48%, #6B3A05 78%, var(--ink) 100%);
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
  }
  /* on ink grounds the ramp flips so the far end never disappears */
  .section--ink .eyebrow,
  .page-hero .eyebrow,
  .hero__eyebrow,
  .serve-band .eyebrow,
  .contact-split__info .eyebrow {
    background-image: linear-gradient(to left,
      #F9A94A 0%, #F5820C 30%, #FFD9A8 75%, #FFFCF8 100%);
    color: transparent;
  }
}

.lead {
  font-size: clamp(1.125rem, 1rem + 0.9vw, 1.5rem);
  line-height: 1.4;
  color: var(--muted);
  max-width: 52ch;
}
.section--ink .lead { color: var(--on-ink-dim); }

.section__head { margin-bottom: var(--gap-lg); }
.section__head h2 { max-width: 20ch; }
.section__head .lead { margin-top: var(--stack); }

.section__head--split {
  display: grid; grid-template-columns: 1.1fr 0.9fr;
  gap: var(--gap-lg); align-items: end;
}
.section__head--split h2 { max-width: 16ch; }
.section__head--split .lead { margin-top: 0; }

/* ==================================================================
   BUTTONS & LINKS
   Every button is a pill. Text stays rem — these are touch targets,
   not display type.
   ================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--font-body);
  font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
  font-weight: 500; line-height: 1;
  min-height: 48px; padding: 14px 24px;
  border: 0.8px solid transparent; border-radius: 9999px;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn svg, .btn i { width: 18px; height: 18px; flex-shrink: 0; }

.btn--ember { background: var(--ember); color: var(--ember-text); }
.btn--ember:hover { background: var(--ember-hi); }

.btn--ink { background: var(--ink); color: var(--on-ink); }
.btn--ink:hover { background: var(--ink-soft); }

.btn--outline { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn--outline:hover { border-color: var(--ink); }

.btn--outline-light { background: transparent; color: var(--on-ink); border-color: var(--line-dark); }
.btn--outline-light:hover { border-color: var(--on-ink); }

/* a phone number sitting between two buttons in an action row */
.btn--quiet { background: transparent; color: var(--on-ink); border-color: transparent; }
.btn--quiet:hover { border-color: var(--line-dark); }

.arrow-link {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-weight: 500; text-decoration: none; color: var(--ink);
  border-bottom: 0.8px solid transparent;
  transition: border-color 0.2s ease;
}
.arrow-link span { transition: transform 0.2s ease; }
.arrow-link:hover { border-color: currentColor; }
.arrow-link:hover span { transform: translateX(4px); }
/* every ink ground on the site — an arrow-link left at its default --ink
   would be dark-on-dark and effectively invisible */
.section--ink .arrow-link,
.serve-band .arrow-link,
.hero .arrow-link,
.page-hero .arrow-link,
.cta-band .arrow-link,
.contact-split__info .arrow-link,
.display-band .arrow-link { color: var(--on-ink); }

.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-sm) var(--gap-md); }

.tag {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--font-body);
  font-size: 0.8125rem; font-weight: 500; line-height: 1.2;
  padding: 6px 14px; border-radius: 9999px;
  background: var(--ember-soft); color: var(--ember-ink);
}
.section--ink .tag { background: rgba(255,252,248,0.14); color: var(--on-ink); }
.tag--quiet { background: var(--cream); color: var(--muted); }

/* ---- glass pill (§6b) -------------------------------------------------
   Over the glass band the age labels become real glass chips. Same blur
   value as the cards and the nav, so the whole site shares one glass.
   TODO (client): §6b also describes an avatar variant — a 40px portrait
   filling the left cap, which is why .chip--glass carries the asymmetric
   padding and the img rule below. Not used yet: it needs a portrait per
   chip, and the current imagery is deliberately face-free.
   ---------------------------------------------------------------------- */
.chip--glass,
.serve-band .tag {
  background: var(--glass-pill);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 0.8px solid rgba(255, 252, 248, 0.18);
  color: var(--on-ink);
}
.chip--glass { display: inline-flex; align-items: center; gap: 12px; border-radius: 9999px; padding: 4px 16px 4px 4px; font-weight: 500; }
.chip--glass img { width: 40px; height: 40px; border-radius: 50%; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .chip--glass, .serve-band .tag { background: rgb(var(--ink-rgb) / 0.72); }
}

/* ==================================================================
   CARDS — four types, nothing else.
   Separation is fill difference. Never border + shadow + fill.
   ================================================================== */

/* cream card: the default. On a cream ground the fill flips to white. */
.card {
  background: var(--cream); border-radius: 8px;
  padding: clamp(20px, 1.7vw, 24px); border: 0; box-shadow: none;
  transition: background-color 0.2s ease;
}
.card img { border-radius: 8px; width: 100%; }
.section--warm .card, .serve-band .card { background: var(--white); }
.card:hover { background: var(--white); }

/* ink card: solid, on dark bands. The only card allowed a hairline. */
.card--ink {
  background: var(--ink-soft); border-radius: 8px;
  padding: clamp(20px, 1.7vw, 24px);
  border: 0.8px solid var(--line-dark);
  transition: background-color 0.2s ease;
}
.card--ink:hover { background: var(--ink-lift); }

/* glass card: only ever over imagery. */
.card--glass {
  background: var(--glass-dark);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-radius: 8px;
  padding: clamp(20px, 1.7vw, 24px);
  border: 0;
  color: var(--on-ink);
  transition: background-color 0.3s ease;
}
.card--glass:hover { background: var(--glass-lift); }
/* No blur means 0.65 would read as merely washed-out rather than glass, so both
   surfaces fall back to the opaque value. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .card--glass, .site-nav.scrolled { background: var(--glass-flat); }
}

/* ==================================================================
   NAV
   Shares one glass value with the cards so the site has a single blur.
   ================================================================== */
/* top/left/right are set explicitly rather than via `inset` shorthand: they
   have to be lengths, not `auto`, or .nav-float below cannot transition. */
.site-nav {
  position: fixed; top: 0; left: 0; right: 0; bottom: auto; z-index: 200;
  display: flex; align-items: center; gap: clamp(1rem, 1.8vw, 3rem);
  padding: var(--nav-pad-y) var(--edge);
  background: transparent; color: var(--on-ink);
  border: 0.8px solid transparent;
  border-radius: 0;
  transition: background-color 0.35s ease, border-color 0.35s ease,
              transform 0.45s cubic-bezier(.16, 1, .3, 1),
              top 0.45s cubic-bezier(.16, 1, .3, 1),
              left 0.45s cubic-bezier(.16, 1, .3, 1),
              right 0.45s cubic-bezier(.16, 1, .3, 1),
              padding 0.45s cubic-bezier(.16, 1, .3, 1),
              border-radius 0.45s ease;
}
.site-nav.scrolled {
  background: var(--glass-nav);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border-bottom-color: var(--line-dark);
}

/* Scrolling back up returns the bar detached — an island clear of all four
   viewport edges.
   padding-inline compensates for the gutter on purpose: --edge resolves its
   100% against the viewport (the containing block of a fixed element), NOT
   against the nav's own box, so it does not shrink when the bar is inset.
   Subtracting --nav-gutter keeps the logo and CTA on exactly the same
   absolute x in both states — only the bar's edges move. */
.site-nav.nav-float {
  top: var(--nav-gap);
  left: var(--nav-gutter);
  right: var(--nav-gutter);
  padding-inline: max(16px, calc(var(--edge) - var(--nav-gutter)));
  border-radius: 8px;
  border-color: var(--line-dark);
  box-shadow: var(--shadow-soft);
}

/* far enough to clear the gap and the shadow, not just the bar's own height */
.site-nav.nav-hidden { transform: translateY(calc(-100% - var(--nav-gap) - 10px)); }

.nav-logo { display: inline-flex; align-items: center; flex-shrink: 0; text-decoration: none; }
.nav-logo img { width: auto; height: var(--logo-h); object-fit: contain; }

.nav-links { display: flex; align-items: center; gap: clamp(1.25rem, 2vw, 3rem); margin-left: auto; }
.nav-link {
  position: relative; font-size: clamp(0.9375rem, 0.25rem + 1.1vw, 1.375rem); font-weight: 500;
  color: var(--on-ink); text-decoration: none; padding: 0.35rem 0 0.5rem;
  white-space: nowrap;
}
.nav-link::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 0; height: 2px; background: var(--on-ink);
  transition: width 0.25s ease;
}
.nav-link:hover::after, .nav-link[aria-current="page"]::after { width: 100%; }

.nav-actions { display: flex; align-items: center; gap: clamp(0.75rem, 1.2vw, 1.75rem); }
.nav-phone {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-weight: 500; font-size: clamp(0.875rem, 0.2rem + 1.05vw, 1.3125rem); color: var(--on-ink);
  text-decoration: none; white-space: nowrap;
}
.nav-phone i, .nav-phone svg { width: 1.1em; height: 1.1em; }
.nav-phone:hover { color: var(--on-ink-dim); }

/* The nav CTA is ember only once the nav has its own ground. Over the hero
   it would be the third ember element in the first viewport. */
.nav-cta {
  min-height: clamp(42px, 2.4vw + 18px, 66px); padding: 0 clamp(18px, 1.8vw, 34px);
  font-size: clamp(0.9375rem, 0.3rem + 0.95vw, 1.3125rem);
  background: transparent; color: var(--on-ink); border-color: var(--line-dark);
}
.nav-cta:hover { background: rgba(255,252,248,0.10); }
.site-nav.scrolled .nav-cta { background: var(--ember); color: var(--ember-text); border-color: transparent; }
.site-nav.scrolled .nav-cta:hover { background: var(--ember-hi); }

.nav-hamburger {
  display: none; flex-direction: column; gap: 5px;
  width: 44px; height: 44px; align-items: center; justify-content: center;
  background: none; border: 0; cursor: pointer;
}
.nav-hamburger span {
  display: block; width: 24px; height: 2px; background: var(--on-ink); border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.nav-hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.is-open span:nth-child(2) { opacity: 0; }
.nav-hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 0; z-index: 190;
  display: flex; flex-direction: column; justify-content: center; gap: 1rem;
  padding: calc(var(--logo-h) + 2 * var(--nav-pad-y) + 1.5rem) var(--edge) 3rem;
  background: var(--ink);
  transform: translateY(-100%); transition: transform 0.4s cubic-bezier(.4,0,.2,1);
  overflow-y: auto;
}
.mobile-menu.is-open { transform: translateY(0); }
.mobile-nav-link {
  font-family: var(--font-display); font-weight: 500;
  font-size: min(var(--fs-h3, 2.4vw), 34px);
  letter-spacing: var(--ls-h); color: var(--on-ink); text-decoration: none;
}
.mobile-nav-link:hover { color: var(--on-ink-dim); }
.mobile-menu .btn { margin-top: 1rem; align-self: flex-start; }
.mobile-menu__meta { margin-top: 1.5rem; color: var(--on-ink-dim); font-size: 0.9375rem; line-height: 1.8; }
.mobile-menu__meta a { color: var(--on-ink); text-decoration: none; }

/* ==================================================================
   HERO — home. Full-bleed, centred, one photographic plate.
   ================================================================== */
.hero {
  position: relative; isolation: isolate;
  display: grid; align-items: center;
  min-height: min(88vh, 780px);
  min-height: min(88svh, 780px);   /* svh where supported; vh is the fallback */
  padding-block: clamp(130px, 15vw, 190px) clamp(56px, 7vw, 96px);
  padding-inline: var(--edge);
  background: var(--ink); color: var(--on-ink);
  overflow: hidden;
}
.hero__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 38%; }
/* Spec scrim (§8). Light enough that the photograph carries the band and the
   glass has something to refract; heavy enough at the foot that the centred
   copy and the action row stay legible over any plate. */
.hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(rgb(var(--ink-rgb) / 0.42), rgb(var(--ink-rgb) / 0.82));
}
.hero__inner {
  position: relative; z-index: 2;
  max-width: var(--container); margin-inline: auto;
  display: grid; justify-items: center; text-align: center;
}
/* Three phrases, one per line. Sized on its own scale rather than the global
   h1 (about 62-66% of it on desktop) so the longest line, "Building inclusive
   communities", holds one line with room either side from 768px up. Below
   768px the only break is the br.mobile-only after "inclusive". */
.hero h1 {
  color: var(--on-ink); max-width: none;
  font-size: clamp(2.25rem, 1.29rem + 1.49vw, 2.75rem); line-height: 1.02;
}
.hero h1 em { font-style: normal; color: inherit; }
/* the mask would clip descenders (the g, the p) at the tight display
   line-height: pad it down to take them, and pull the next line back up so
   the spacing is unchanged */
.hero__title { display: block; overflow: hidden; padding-bottom: 0.2em; margin-bottom: -0.2em; }
.hero__title-inner { display: block; }
.hero__title-inner { white-space: nowrap; }
/* each block in the stack gets ~25% more air than the shared rhythm */
.hero__eyebrow { margin-bottom: calc(var(--gap-sm) * 1.25); }
.hero__sub {
  margin-top: calc(var(--stack) * 1.25);
  font-size: clamp(1.125rem, 1rem + 0.9vw, 1.5rem); line-height: 1.4;
  color: var(--on-ink-dim); max-width: 46ch; text-wrap: balance; /* the narrowest measure that holds 2 lines; 38ch runs to 3 */
}
.hero__cta { margin-top: calc(var(--gap-md) * 1.25); justify-content: center; }
.hero__note {
  margin-top: var(--stack); font-size: 0.9375rem; color: var(--on-ink-dim);
  display: inline-flex; align-items: center; gap: 8px;
}
.hero__note i, .hero__note svg { width: 16px; height: 16px; color: var(--on-ink-dim); flex-shrink: 0; }
/* a line break that only exists on phones (hero eyebrow and h1) */
.mobile-only { display: none; }

/* ==================================================================
   PAGE HERO — inner pages
   ================================================================== */
.page-hero {
  background: var(--ink); color: var(--on-ink-dim);
  padding-block: clamp(140px, 16vw, 200px) clamp(56px, 7vw, 96px);
  padding-inline: var(--edge);
}
.page-hero__inner { max-width: var(--container); margin-inline: auto; }
.page-hero h1 { color: var(--on-ink); max-width: 16ch; }
.page-hero .lead { margin-top: var(--stack); color: var(--on-ink-dim); }
.page-hero .cta-row { margin-top: var(--gap-md); }

/* ---- page hero carrying a photograph ------------------------------------
   Used on About, Programs, Careers and Contact. The photograph's own left
   third is deep shade, so the horizontal scrim lands the copy on shadow and
   lets the two figures stay lit on the right. Text sits above both layers.
   ------------------------------------------------------------------------ */
.page-hero--image { position: relative; isolation: isolate; overflow: hidden; }
.page-hero--image { min-height: clamp(420px, 46vw, 640px); }
.page-hero--image > .page-hero__inner { position: relative; z-index: 2; }

.page-hero__bg { position: absolute; inset: 0; z-index: 0; }
.page-hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: var(--hero-pos, 76% 34%); }
/* per-photo framing: a page sets --hero-pos (and optionally --hero-pos-sm for
   phones) inline on its hero img. Placed after the base rule so it wins; the
   fallbacks reproduce the old 76% 34% everywhere nothing is set. */
@media (max-width: 767.98px) { .page-hero__bg img { object-position: var(--hero-pos-sm, var(--hero-pos, 76% 34%)); } }

.page-hero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg,
      rgb(var(--ink-rgb) / 0.97)  0%,
      rgb(var(--ink-rgb) / 0.94) 28%,
      rgb(var(--ink-rgb) / 0.78) 48%,
      rgb(var(--ink-rgb) / 0.42) 70%,
      rgb(var(--ink-rgb) / 0.26) 100%),
    linear-gradient(180deg,
      rgb(var(--ink-rgb) / 0.88)  0%,
      rgb(var(--ink-rgb) / 0.55) 14%,
      rgb(var(--ink-rgb) / 0)    34%);
}

/* ==================================================================
   THE STATEMENT MOMENT — one per page, maximum
   ================================================================== */
.display-band {
  /* the illustration's own width; the band is at least as tall as the art so
     the worker's head is never cropped */
  --art-w: min(60vw, 1100px);
  position: relative; overflow: hidden;
  display: grid; align-items: center;
  min-height: calc(var(--art-w) * 1536 / 2688);
  background: var(--ink); color: var(--on-ink);
  padding-block: var(--section-y-tight); padding-inline: var(--edge);
}
.display-band__inner {
  width: 100%; max-width: var(--container); margin-inline: auto;
}
.display-band__line { position: relative; z-index: 1; }

/* The statement illustration (assets/img/statement-illustration.svg, inlined).
   Desktop: the right ~60% of the band, its floor on the band's bottom edge so
   the staircase grows out of it. Its path 0 is a full-bleed --ink plate, so
   the art has no edge. Rides the band's existing .reveal; parts are tagged in
   the markup (sa-line, sa-step1-5, sa-teen, sa-worker, sa-sprig). Translate
   distances are in viewBox units (~3 per screen px at desktop size). */
.display-band__art {
  position: absolute; right: 0; bottom: 0; z-index: 0;
  display: block; width: var(--art-w); height: auto; aspect-ratio: 2688 / 1536;
  translate: 0 var(--art-shift, 0px);   /* desktop drift, set by site.js */
}
.display-band__art :is(.sa-line, .sa-step1, .sa-step2, .sa-step3, .sa-step4, .sa-step5, .sa-teen, .sa-worker, .sa-sprig) {
  transform-box: fill-box;
}
html.anim-ready .display-band__art .sa-line {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.6s cubic-bezier(.65,0,.35,1);
}
html.anim-ready .display-band__art :is(.sa-step1, .sa-step2, .sa-step3, .sa-step4, .sa-step5) {
  opacity: 0; transform: translateY(32px);
  transition: opacity 0.5s ease, transform 0.7s cubic-bezier(.16,1,.3,1);
}
html.anim-ready .display-band__art :is(.sa-teen, .sa-worker) {
  opacity: 0; transform: translateY(45px);
  transition: opacity 0.6s ease, transform 0.8s cubic-bezier(.16,1,.3,1);
}
html.anim-ready .display-band__art .sa-sprig {
  opacity: 0; transform: scale(0.85); transform-origin: 50% 100%;
  transition: opacity 0.4s ease, transform 0.6s cubic-bezier(.34,1.56,.64,1);
}
html.anim-ready .reveal.visible .display-band__art .sa-line { clip-path: inset(0 0 0 0); }
html.anim-ready .reveal.visible .display-band__art :is(.sa-step1, .sa-step2, .sa-step3, .sa-step4, .sa-step5, .sa-teen, .sa-worker, .sa-sprig) { opacity: 1; transform: none; }
/* steps bottom first, 80ms apart; then the teen, the worker, and the sprig last */
html.anim-ready .reveal.visible .display-band__art .sa-step1  { transition-delay: 0.20s; }
html.anim-ready .reveal.visible .display-band__art .sa-step2  { transition-delay: 0.28s; }
html.anim-ready .reveal.visible .display-band__art .sa-step3  { transition-delay: 0.36s; }
html.anim-ready .reveal.visible .display-band__art .sa-step4  { transition-delay: 0.44s; }
html.anim-ready .reveal.visible .display-band__art .sa-step5  { transition-delay: 0.52s; }
html.anim-ready .reveal.visible .display-band__art .sa-teen   { transition-delay: 0.75s; }
html.anim-ready .reveal.visible .display-band__art .sa-worker { transition-delay: 0.90s; }
html.anim-ready .reveal.visible .display-band__art .sa-sprig  { transition-delay: 1.20s; }

/* tablet: full width under the headline, sitting on the band floor */
@media (max-width: 1024px) {
  .display-band { min-height: 0; padding-bottom: 0; display: block; }
  .display-band__art {
    position: relative; right: auto; bottom: auto; translate: none;
    width: calc(100% + 2 * var(--edge)); margin: var(--gap-md) calc(-1 * var(--edge)) 0;
  }
}
/* phone: a near-square crop of the right-hand side (xMaxYMax slice), so the
   two figures and their clasped hands stay large */
@media (max-width: 767.98px) {
  .display-band__art { aspect-ratio: 1 / 1.05; }
}
.display-band .display { color: var(--on-ink); max-width: 12ch; }
.display-band__line { display: block; overflow: hidden; padding-bottom: 0.2em; margin-bottom: -0.2em; } /* descender room, as .hero__title */
.display-band__line > span {
  display: block;
  transition: transform 0.9s cubic-bezier(.16,1,.3,1);
}

/* ==================================================================
   ASSURANCE BAND — a quiet paper strip, serif numerals, hairline columns
   ================================================================== */
.band {
  background: var(--paper);
  border-block: 0.8px solid var(--line);
  padding-block: var(--section-y-tight); padding-inline: var(--edge);
}
.band__grid {
  max-width: var(--container); margin-inline: auto;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-md);
}
/* hairline dividers between columns; the first column stays flush with the
   container edge so it lines up with everything above it */
.band__item + .band__item { border-left: 0.8px solid var(--line); padding-left: var(--gap-md); }
/* the numeral carries the item — no icon competing with it */
.band__item i, .band__item svg { display: none; }
.band__item b {
  display: block; font-family: var(--font-display); font-weight: 500;
  font-size: min(var(--fs-h3, 2.4vw), 34px); line-height: 1.05;
  color: var(--ink); letter-spacing: var(--ls-h);
  font-variant-numeric: tabular-nums; white-space: nowrap;
  margin-bottom: 0.4rem;
}
/* a phrase rather than a figure ("Culturally responsive"): smaller type so it
   holds one line in its column, on the same line box as the others so all
   four descriptions still start on one line */
.band__item b.band__long {
  font-size: calc(min(var(--fs-h3, 2.4vw), 34px) * 0.77);
  line-height: calc(min(var(--fs-h3, 2.4vw), 34px) * 1.05);
}
.band__item > span > span, .band__item > span:last-child {
  display: block; font-size: 0.9375rem; color: var(--muted); line-height: 1.4;
}

/* ==================================================================
   WHO WE SERVE — the glass band. Glass requires something behind it.
   ================================================================== */
.serve-band {
  position: relative; isolation: isolate; overflow: clip;
  color: var(--on-ink);
  padding-block: var(--section-y); padding-inline: var(--edge);
  background: var(--ink);
}
.serve-band__bg { position: absolute; inset: 0; z-index: 0; }
.serve-band__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 45%; }
/* Spec scrim (§6a). The glass panels sit on top of this, so it has to stay light
   enough for the photograph to read through the blur — that difference is the
   whole point of the band. */
.serve-band::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: rgb(var(--ink-rgb) / 0.55);
}
.serve-band > .wrap { position: relative; z-index: 2; }
.serve-band h2, .serve-band h3 { color: var(--on-ink); }
.serve-band .lead { color: var(--on-ink-dim); }

/* ---- the six cards ----------------------------------------------------------
   Three layouts, one list:
     < 900px                   stacked, normal page flow
     >= 900px, no JS / reduced  a wrapped grid (also below 640px tall)
     >= 900px + .is-pinned      site.js pins .serve-pin__sticky for the height of
                                the horizontal travel and slides the track left
   The pin is position: sticky inside a wrapper whose height JS sets to
   100vh + (track width - viewport width). That height is real document flow,
   so whatever follows the band starts exactly where the travel ends: nothing
   to jump or overlap when the pin releases.
   ------------------------------------------------------------------------- */
.serve-pin { position: relative; z-index: 2; margin-top: var(--gap-lg); }
.serve-carousel {
  list-style: none; margin: 0 auto; padding: 0;
  display: grid; gap: var(--gap-md);
  max-width: var(--container);
}
.serve-progress { display: none; }
@media (min-width: 900px) {
  .serve-carousel { grid-template-columns: repeat(auto-fill, minmax(min(100%, 480px), 1fr)); }
}

.serve-band.is-pinned .serve-pin { margin-inline: calc(-1 * var(--edge)); }
.serve-band.is-pinned .serve-pin__sticky {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; gap: clamp(12px, 2.4vh, var(--gap-md));
}
.serve-band.is-pinned .serve-carousel {
  --serve-slide-w: min(620px, 46vw);
  display: flex; gap: var(--gap-md);
  width: max-content; max-width: none; margin: 0;
  padding-inline: var(--edge);
  will-change: transform;
}
.serve-band.is-pinned .serve-slide { flex: 0 0 var(--serve-slide-w); }
/* min-height, never a fixed height: the panel is content-sized, so on a short
   laptop a fixed frame clipped its top (title and tag) under overflow: hidden.
   The panel below also scales with viewport height so frame + progress row
   still fit the 100vh pin. */
.serve-band.is-pinned .serve-slide__frame { height: auto; min-height: min(68vh, 640px); padding: clamp(16px, 2.4vh, 40px); }
.serve-band.is-pinned .serve-slide__panel { max-width: min(460px, 100%); gap: clamp(12px, 2.2vh, 24px); padding: clamp(20px, 2.8vh, 32px); }
.serve-band.is-pinned .serve-slide__head h3 { font-size: clamp(1.375rem, 3.2vh, 2rem); }
.serve-band.is-pinned .serve-card__list { gap: clamp(0.35rem, 0.9vh, 0.5rem); }
/* the backdrop photo holds still while the band is pinned, instead of being
   stretched to cover several viewports of height */
.serve-band.is-pinned .serve-band__bg img { position: sticky; top: 0; height: 100vh; }

/* progress: a hairline that fills, and "n / 6" in the eyebrow style */
.serve-band.is-pinned .serve-progress {
  display: flex; align-items: center; gap: var(--gap-md);
  padding-inline: var(--edge);
}
.serve-progress__bar {
  flex: 1; height: 2px; border-radius: 2px; overflow: hidden;
  background: rgba(255, 252, 248, 0.18);
}
.serve-progress__fill {
  display: block; height: 100%; background: var(--on-ink);
  transform-origin: left center; transform: scaleX(0);
}
.serve-progress__count { margin: 0; color: var(--on-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }

.serve-slide__frame {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: 8px; min-height: clamp(520px, 48vw, 700px);
  display: flex; align-items: flex-end;
  padding: clamp(20px, 3vw, 40px);
  background: var(--ink-soft);
}
.serve-slide__img {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover; transform-origin: center;
}
/* heavier at the foot, where the panel sits */
.serve-slide__scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgb(var(--ink-rgb) / 0.78), rgb(var(--ink-rgb) / 0.12) 60%);
}
.serve-slide__panel {
  position: relative; z-index: 2;
  max-width: 400px; display: grid; gap: var(--gap-md);
  padding: clamp(24px, 2.4vw, 32px);
}
/* the tag sits above the title so the title gets the full panel width */
.serve-slide__head { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.serve-slide__head h3 { display: flex; align-items: center; gap: 10px; color: var(--on-ink); }
.serve-slide__dot { flex: 0 0 12px; width: 12px; height: 12px; border-radius: 50%; background: var(--paper); }
/* a flat chip inside the glass panel: a blurred chip inside a blurred panel would be
   a second backdrop pass over the same pixels for no visible gain */
.serve-slide__panel .tag {
  flex: 0 0 auto;
  background: rgba(255, 252, 248, 0.14); border: 0.8px solid rgba(255, 252, 248, 0.18);
  color: var(--on-ink); -webkit-backdrop-filter: none; backdrop-filter: none;
}
.serve-slide__panel > p { font-size: 1rem; color: var(--on-ink-dim); max-width: none; }
.serve-slide__rule { border: 0; border-top: 0.8px solid var(--line-dark); margin: 0; }
.serve-card__list { list-style: none; display: grid; gap: 0.5rem; }
.serve-card__list li { position: relative; padding-left: 1.5rem; font-size: 0.9375rem; color: var(--on-ink-dim); }
.serve-card__list li::before {
  content: ''; position: absolute; left: 0; top: 0.58em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--on-ink-dim);
}
.serve-slide__panel .arrow-link { justify-self: start; }


/* ==================================================================
   SERVICES — on ink
   ================================================================== */
/* No card surface here: the items sit straight on the ink ground and whitespace
   does the separating, so the row gap is deliberately larger than the column gap.
   (.svc-card keeps its name only because both index.html and services.html
   reference it and a rename buys nothing.) */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(40px, 5vw, 80px) var(--gap-lg); }
.svc-card { display: flex; flex-direction: column; gap: var(--gap-sm); }
/* 60px render of a 48 viewBox whose art fills a 30-unit optical square, so the
   drawn glyph lands at ~37px with a ~1.56px effective stroke — the weight the
   reference carries. Every icon is normalised to that same square so the set
   reads as one family rather than ten separate drawings. */
.svc-icon {
  width: 60px; height: 60px; margin-bottom: var(--gap-sm);
  color: var(--on-ink-dim);
  transition: color 0.2s ease;
}
/* one property on hover, and no movement — the icon brightens, nothing else */
.svc-card:hover .svc-icon { color: var(--on-ink); }
/* Wayfinding: every footer deep-links these six ids on services.html, and with
   the card gone there is otherwise nothing to confirm you landed on the right
   one. Must follow the hover rule so a targeted icon stays marked. */
.svc-card:target .svc-icon { color: var(--ember); }
.svc-card h3 { color: var(--on-ink); }
.svc-card p { font-size: 0.9375rem; color: var(--on-ink-dim); }

/* ==================================================================
   THE JOURNEY — the one signature scroll piece
   ================================================================== */
/* Heading spans both columns; steps run down the left, the plate pins on the
   right. The steps column is the taller of the two at every width, so it is the
   one that sets the section height. */
.journey {
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: var(--gap-lg); align-items: start;
}
.journey__head { grid-column: 1 / -1; max-width: 46ch; }
.journey__head .lead { margin-top: var(--stack); }
.journey__cta { margin-top: var(--gap-md); }

/* top: --nav-safe so the pinned plate clears the floating nav automatically
   rather than repeating its height as a literal. */
.journey__media {
  position: sticky; top: var(--nav-safe);
  border-radius: 8px; aspect-ratio: 4 / 3; background: var(--cream);
}
.journey__media img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }

/* --rail-x is the rail's centre line; both the rail and the dots derive from it,
   so changing the dot size cannot drift them apart. */
.journey__steps {
  --rail-x: 17px;
  --dot: 32px;
  --steps-pad: clamp(3.25rem, 5vw, 4.25rem);
  position: relative; padding-left: var(--steps-pad);
}
.journey__rail {
  position: absolute; left: calc(var(--rail-x) - 1px); top: 20px; bottom: 14px; width: 2px;
  background: var(--line-strong); border-radius: 2px;
}
/* The eyebrow's ramp (see the .eyebrow rule), turned vertical. Revealed with
   clip-path rather than an animated height so the gradient stays put instead of
   compressing and re-stretching on every scroll frame. */
.journey__rail::after {
  content: ''; position: absolute; inset: 0; border-radius: 2px;
  background-image: linear-gradient(to bottom,
    var(--ink) 0%, #6B3A05 22%, #C46500 52%, #F5820C 78%, #F9A94A 100%);
  clip-path: inset(0 0 calc(100% - var(--rail-progress, 0%)) 0);
  transition: clip-path 0.15s linear;
}
.step { position: relative; padding-bottom: var(--gap-lg); }
.step:last-child { padding-bottom: 0; }
.step__dot {
  position: absolute; top: 4px;
  left: calc(var(--rail-x) - var(--steps-pad) - var(--dot) / 2);
  width: var(--dot); height: var(--dot); border-radius: 50%;
  display: grid; place-items: center;
  background: var(--cream); border: 0.8px solid var(--line-strong);
  transition: background-color 0.25s ease, border-color 0.25s ease;
}
.step.is-on .step__dot { background: var(--ember); border-color: var(--ember); }
.step__no {
  font-family: var(--font-display); font-weight: 500;
  font-size: 0.8125rem; line-height: 1;
  color: var(--muted);
  font-variant-numeric: tabular-nums; letter-spacing: 0;
  transition: color 0.25s ease;
}
/* the number now sits ON the dot, so the lit state needs ink-on-ember, not the
   mid-orange --ember-ink that was right when it sat on cream */
.step.is-on .step__no { color: var(--ember-text); }
.step h3 { margin-bottom: 0.4rem; }
.step p { font-size: 1rem; }

/* ==================================================================
   PILLARS
   ================================================================== */
.pillars { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap-lg); }
.pillar { display: grid; grid-template-columns: 40px 1fr; gap: var(--gap-sm); align-items: start; }
.pillar i, .pillar svg { width: 24px; height: 24px; color: var(--muted); margin-top: 4px; }
.pillar h3 { margin-bottom: 0.4rem; }
.pillar p { font-size: 1rem; }

/* ==================================================================
   OUTCOMES — the three-statement slot
   ================================================================== */
.outcomes {
  border-top: 0.8px solid var(--line);
  padding-block: var(--section-y-tight); padding-inline: var(--edge);
}
.outcomes__grid {
  max-width: var(--container); margin-inline: auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-lg);
}
.outcome { display: flex; flex-direction: column; gap: var(--gap-sm); }
.outcome h3 { max-width: 16ch; }
.outcome p { font-size: 0.9375rem; color: var(--muted); }

/* ==================================================================
   SPLIT — copy | media
   ================================================================== */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-lg); align-items: center; }
.split--reverse .split__media { order: -1; }

/* About us (home): copy left, the illustration right, straight on the section
   ground (no frame). assets/img/about-illustration.svg (1792x2304, portrait)
   is inlined at its own proportions; its parts are tagged aa-line / aa-worker /
   aa-teen / aa-child / aa-plant. The wrapper opts out of the generic fade-up
   because its parts animate instead. Translate distances are in viewBox units
   (~3.7 per screen px at 480px wide).
   Order: the navy line wipes on (it is a filled shape, so a clip-path wipe);
   then the child, the teen and the worker, 120ms apart; the plant last. The
   worker goes last on purpose: his paths include the blue under-layer beneath
   the teen and the dark outline over the child's head, so arriving after them
   keeps those layers hidden mid-fade. */
.about-art { justify-self: end; width: 100%; max-width: 480px; }
.about-art__svg { display: block; width: 100%; height: auto; aspect-ratio: 1792 / 2304; overflow: visible; }
.about-art__svg :is(.aa-line, .aa-worker, .aa-teen, .aa-child, .aa-plant) { transform-box: fill-box; }
html.anim-ready .about-art.reveal { opacity: 1; transform: none; }
html.anim-ready .about-art .aa-line {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.4s cubic-bezier(.65,0,.35,1);
}
html.anim-ready .about-art :is(.aa-worker, .aa-teen, .aa-child) {
  opacity: 0; transform: translateY(45px);
  transition: opacity 0.5s ease, transform 0.8s cubic-bezier(.16,1,.3,1);
}
html.anim-ready .about-art .aa-plant {
  opacity: 0; transform: scale(0.9); transform-origin: 50% 100%;
  transition: opacity 0.4s ease, transform 0.6s cubic-bezier(.34,1.56,.64,1);
}
html.anim-ready .about-art.visible .aa-line { clip-path: inset(0 0 0 0); }
html.anim-ready .about-art.visible :is(.aa-worker, .aa-teen, .aa-child, .aa-plant) { opacity: 1; transform: none; }
html.anim-ready .about-art.visible .aa-child  { transition-delay: 0.70s; }
html.anim-ready .about-art.visible .aa-teen   { transition-delay: 0.82s; }
html.anim-ready .about-art.visible .aa-worker { transition-delay: 0.94s; }
html.anim-ready .about-art.visible .aa-plant  { transition-delay: 1.45s; }
/* two columns down to 768 (the site's .split stacks at 991) */
@media (min-width: 768px) and (max-width: 991.98px) { .split.split--about { grid-template-columns: 1fr 1fr; } }
@media (max-width: 767.98px) { .about-art { justify-self: center; } }
.split__media { border-radius: 8px; overflow: hidden; aspect-ratio: 4 / 3.4; background: var(--cream); }
.split__media img { width: 100%; height: 100%; object-fit: cover; }
/* a wide plate between a section head and its grid, for sections with no
   split of their own. Letterbox on wide screens, closer to 3:2 on a phone
   so the room still reads. */
.section__media { margin-bottom: var(--gap-lg); border-radius: 8px; overflow: hidden; aspect-ratio: 21 / 9; background: var(--cream); }
.section__media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 768.98px) { .section__media { aspect-ratio: 3 / 2; } }

.split__copy h2 { max-width: 15ch; }
.split__copy p { margin-top: var(--stack); }
.split__copy .cta-row { margin-top: var(--gap-md); }
.split__list { list-style: none; display: grid; gap: 0.45rem; margin-top: var(--stack); }
.split__list li { position: relative; padding-left: 1.5rem; font-size: 1rem; }
.split__list li::before {
  content: ''; position: absolute; left: 0; top: 0.58em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong);
}
/* tag + Métis flag on one line in the #indigenous header */
.split__flagrow { display: flex; align-items: center; gap: var(--gap-sm); }

.duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-md); }
.duo__card {
  background: var(--cream); border-radius: 8px;
  padding: clamp(24px, 2.4vw, 40px); border: 0;
}
.section--warm .duo__card { background: var(--white); }
.duo__card h3 { margin-bottom: var(--gap-sm); }
.duo__card .eyebrow { margin-bottom: var(--gap-sm); }

/* ==================================================================
   MISSION & VISION — a staggered tour of the space
   Two independent columns, so card heights never line up; the right
   column starts lower. Margin, not transform, for the stagger —
   .reveal.visible resets transforms.
   ================================================================== */
.mission__head { align-items: start; }
.mission__statements { display: grid; gap: var(--gap-md); }
.mission__statements .eyebrow { margin-bottom: 0.4rem; }
.mission__statements .lead { color: var(--body); max-width: 44ch; }

.spaces {
  display: grid; grid-template-columns: 1fr 1fr;
  column-gap: clamp(32px, 6vw, 120px);
}
.spaces__col { display: grid; gap: clamp(56px, 7vw, 120px); align-content: start; }
.spaces__col:last-child { margin-top: clamp(64px, 9vw, 160px); }

/* height:auto is load-bearing: the width/height attributes (kept for CLS) would
   otherwise pin the height and aspect-ratio below would never apply */
.space__img { width: 100%; height: auto; border-radius: 8px; object-fit: cover; background: var(--white); }
.space__img--tall { aspect-ratio: 1 / 1; }
.space__img--wide { aspect-ratio: 16 / 9; }
.space__title {
  margin-top: var(--gap-sm);
  font-style: italic; font-weight: 500;
  font-size: min(var(--fs-h4, 1.6vw), 22px); line-height: 1.25;
  letter-spacing: -0.01em; color: var(--ink);
}
.space__desc {
  margin-top: 0.35rem; max-width: 40ch;
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); line-height: 1.45;
  color: var(--body);
}
.space__tags { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--gap-sm); }
/* the default quiet tag is cream, which disappears on this cream ground */
.space__tags .tag { background: var(--white); color: var(--muted); padding: 5px 12px; font-size: 0.8125rem; }

/* ==================================================================
   LAND ACKNOWLEDGEMENT — quiet band. No imagery, no ember, no glass.
   ================================================================== */
.land {
  background: var(--cream);
  padding-block: var(--section-y); padding-inline: var(--edge);
}
/* Two sections on the same ground read as one block with a hole in it. Mark
   the seam the way .outcomes does: a hairline and the tight top padding. */
.land + .section--warm { border-top: 0.8px solid var(--line); padding-top: var(--section-y-tight); }
.land__inner { max-width: 900px; margin-inline: auto; text-align: center; }
.land__inner p {
  max-width: none;
  font-family: var(--font-display); font-weight: 500;
  font-size: min(var(--fs-h3, 2.4vw), 34px); line-height: 1.35;
  letter-spacing: var(--ls-h); color: var(--ink);
  text-wrap: pretty;
}
/* Métis Nation flag + territory line. A small hairline keeps the white-on-blue
   flag from floating on the cream; the territory line is a quiet label, so it
   must override the display-serif rule above that targets every p. */
.flag-metis {
  display: block; width: 36px; height: auto; border-radius: 2px;
  box-shadow: 0 0 0 0.8px var(--line-strong);
}
.land__flag { margin: 0 auto var(--gap-sm); }
.land__inner p.land__territory {
  font-family: var(--font-body); font-weight: 500;
  font-size: clamp(0.875rem, 0.83rem + 0.18vw, 1rem); line-height: 1.4;
  letter-spacing: 0; color: var(--muted);
  margin-bottom: var(--gap-lg);
}

/* ==================================================================
   CAREERS
   ================================================================== */
.perks { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-md); }
/* the cream card (§6c) — fill difference only, no border, no shadow */
.perk {
  background: var(--cream); border-radius: 8px;
  padding: clamp(20px, 1.7vw, 24px); border: 0; box-shadow: none;
  transition: background-color 0.2s ease;
}
.perk:hover { background: var(--white); }
.perk i, .perk svg { width: 24px; height: 24px; color: var(--muted); margin-bottom: var(--gap-sm); }
.perk h3 { margin-bottom: 0.4rem; }
.perk p { font-size: 0.9375rem; }

.jobs { display: grid; gap: var(--gap-sm); }
.job {
  background: var(--white); border-radius: 8px;
  border: 0; overflow: hidden;
  transition: background-color 0.2s ease;
}
.job.open { background: var(--paper); }
.job__head {
  width: 100%; display: grid; grid-template-columns: 1fr auto; gap: var(--gap-md);
  align-items: center; text-align: left;
  padding: clamp(20px, 2.2vw, 28px); background: none; border: 0; cursor: pointer;
  font: inherit; color: inherit;
}
.job__title {
  display: block;
  font-family: var(--font-display); font-weight: 500;
  font-size: min(var(--fs-h3, 2.4vw), 34px); line-height: 1.15;
  color: var(--ink); letter-spacing: var(--ls-h);
}
.job__meta { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
.job__toggle {
  width: 40px; height: 40px; border-radius: 50%; background: var(--cream);
  display: grid; place-items: center; flex-shrink: 0;
  transition: background-color 0.25s ease, transform 0.25s ease;
}
.job__toggle i, .job__toggle svg { width: 18px; height: 18px; color: var(--ink); }
.job.open .job__toggle { background: var(--ink); transform: rotate(45deg); }
.job.open .job__toggle i, .job.open .job__toggle svg { color: var(--on-ink); }
.job__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.35s cubic-bezier(.4,0,.2,1); }
.job.open .job__body { grid-template-rows: 1fr; }
.job__body > div { overflow: hidden; }
.job__inner { padding: 0 clamp(20px, 2.2vw, 28px) clamp(24px, 2.4vw, 32px); }
.job__inner h4 { margin: var(--gap-md) 0 var(--gap-sm); }
.job__inner ul { list-style: none; display: grid; gap: 0.45rem; }
.job__inner li { position: relative; padding-left: 1.5rem; font-size: 1rem; }
.job__inner li::before {
  content: ''; position: absolute; left: 0; top: 0.58em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong);
}
.job__inner .btn { margin-top: var(--gap-md); }
/* careers.js: placeholder cards while the Google Sheet loads, and the
   empty state when no role is open. Same box as a real card. */
.job--skeleton .job__head { cursor: default; }
.job--skeleton .sk {
  display: block; border-radius: 6px; background: var(--cream);
  animation: sk-pulse 1.4s ease-in-out infinite;
}
.job--skeleton .sk--title { width: min(60%, 420px); height: 1.6rem; }
.job--skeleton .sk--tag { display: inline-block; width: 92px; height: 1.6rem; border-radius: 9999px; }
.job--skeleton .job__toggle { animation: sk-pulse 1.4s ease-in-out infinite; }
@keyframes sk-pulse { 50% { opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) {
  .job--skeleton .sk, .job--skeleton .job__toggle { animation: none; }
}
.jobs__empty { padding: clamp(20px, 2.2vw, 28px); }
.jobs__empty .lead { margin-bottom: var(--gap-sm); }

/* ==================================================================
   FORMS
   ================================================================== */
.form { display: grid; gap: var(--gap-md); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-md); }
.field { display: grid; gap: 0.45rem; }
.field label { font-size: 0.9375rem; font-weight: 500; color: var(--ink); }
.field label .req { color: var(--ember-ink); }
.field input, .field select, .field textarea {
  font-family: var(--font-body);
  font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
  color: var(--ink);
  min-height: 52px; padding: 14px 16px;
  background: var(--white); border: 0.8px solid var(--line-strong); border-radius: 8px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  width: 100%;
}
.field textarea { min-height: 140px; resize: vertical; line-height: 1.5; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--ember);
  box-shadow: 0 0 0 3px var(--ember-soft);
}
.field__hint { font-size: 0.8125rem; color: var(--muted); }

.dropzone {
  display: grid; place-items: center; gap: 0.35rem; text-align: center;
  padding: clamp(24px, 3vw, 36px); cursor: pointer;
  background: var(--white); border: 1.5px dashed var(--line-strong); border-radius: 8px;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.dropzone:hover, .dropzone.is-active { border-color: var(--ember); background: var(--ember-soft); }
.dropzone i, .dropzone svg { width: 24px; height: 24px; color: var(--muted); }
.dropzone b { font-size: 1rem; }
.dropzone small { color: var(--muted); font-size: 0.8125rem; }
.dropzone input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; }

.form__msg { font-size: 0.9375rem; font-weight: 500; color: var(--ok); min-height: 1.4em; }
.form__msg.is-error { color: var(--err); }
.form__legal { font-size: 0.8125rem; color: var(--muted); }

/* contact split: ink info | paper form, one surface */
.contact-split {
  display: grid; grid-template-columns: 0.85fr 1.15fr;
  max-width: var(--container); margin-inline: auto;
  border-radius: 8px; overflow: hidden;
  background: var(--cream);
}
.contact-split__info { background: var(--ink); color: var(--on-ink-dim); padding: clamp(28px, 3.4vw, 56px); }
.contact-split__info h2 { color: var(--on-ink); }
.contact-split__info p { margin-top: var(--stack); color: var(--on-ink-dim); }
.contact-list { list-style: none; margin-top: var(--gap-lg); display: grid; gap: var(--gap-md); }
.contact-list li { display: grid; grid-template-columns: 24px 1fr; gap: var(--gap-sm); align-items: start; }
.contact-list i, .contact-list svg { width: 20px; height: 20px; color: var(--on-ink-dim); margin-top: 4px; }
.contact-list b { display: block; color: var(--on-ink); font-weight: 500; }
.contact-list a { color: var(--on-ink); text-decoration: none; border-bottom: 0.8px solid var(--line-dark); }
.contact-list a:hover { border-color: var(--on-ink); }
.contact-list small { color: var(--on-ink-dim); font-size: 0.875rem; }
.contact-split__form { padding: clamp(28px, 3.4vw, 56px); }

/* ==================================================================
   CTA BAND — ink ground, one ember button.
   An accent-filled viewport would blow the 10% budget on its own.
   ================================================================== */
.cta-band {
  background: var(--ink); color: var(--on-ink-dim);
  padding-block: var(--section-y); padding-inline: var(--edge);
}
.cta-band__inner {
  max-width: var(--container); margin-inline: auto;
  display: grid; grid-template-columns: 1.2fr 0.8fr; gap: var(--gap-lg); align-items: center;
}
.cta-band h2 { color: var(--on-ink); max-width: 16ch; }
.cta-band p { color: var(--on-ink-dim); margin-top: var(--stack); }
.cta-band .btn--ink { background: var(--ember); color: var(--ember-text); }
.cta-band .btn--ink:hover { background: var(--ember-hi); }
.cta-band .btn--outline { color: var(--on-ink); border-color: var(--line-dark); }
.cta-band .btn--outline:hover { border-color: var(--on-ink); }
.cta-band .cta-row { justify-content: flex-end; }

/* ==================================================================
   FOOTER
   ================================================================== */
.footer {
  background: var(--ink); color: var(--on-ink-dim);
  padding-block: var(--section-y-tight) var(--gap-lg); padding-inline: var(--edge);
  /* the ink CTA band sits directly above on most pages: same ground, so the
     boundary needs a line or the two read as one tall block */
  border-top: 0.8px solid var(--line-dark);
}
.footer__top {
  max-width: var(--container); margin-inline: auto;
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: var(--gap-lg);
}
.footer__logo { display: inline-block; margin-bottom: var(--gap-md); }
.footer__logo img { height: 52px; width: auto; }
.footer__desc { font-size: 0.9375rem; max-width: 34ch; }
.footer__contact { margin-top: var(--gap-md); font-size: 0.9375rem; line-height: 1.9; }
.footer__contact a { color: var(--on-ink); text-decoration: none; }
.footer__contact a:hover { color: var(--on-ink-dim); }
.footer__social { display: flex; gap: var(--gap-sm); margin-top: var(--gap-md); }
.footer__social a {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  border: 0.8px solid var(--line-dark); color: var(--on-ink-dim);
  transition: border-color 0.2s ease, color 0.2s ease;
}
.footer__social a:hover { border-color: var(--on-ink); color: var(--on-ink); }
.footer__social svg, .footer__social i { width: 18px; height: 18px; }
.footer__col h3 {
  font-family: var(--font-display); font-weight: 500;
  font-size: min(var(--fs-h4, 1.6vw), 22px); line-height: 1.2;
  text-transform: none; letter-spacing: var(--ls-h);
  color: var(--on-ink); margin-bottom: var(--gap-sm);
}
.footer__col a { display: block; font-size: 0.9375rem; text-decoration: none; padding: 0.3rem 0; color: var(--on-ink-dim); }
.footer__col a:hover { color: var(--on-ink); }
.footer__news p { font-size: 0.9375rem; margin-bottom: var(--gap-sm); }
.footer__news-form { display: flex; gap: 0.5rem; }
.footer__news-form input {
  flex: 1; min-width: 0; font-family: var(--font-body); font-size: 0.9375rem;
  min-height: 48px; padding: 12px 16px; color: var(--on-ink);
  background: var(--ink-soft); border: 0.8px solid var(--line-dark); border-radius: 8px;
}
.footer__news-form input::placeholder { color: var(--on-ink-dim); }
.footer__news-form input:focus { outline: none; border-color: var(--ember); }
.footer__news-form .btn { min-height: 48px; padding: 12px 20px; }
.footer__news small { display: block; margin-top: 0.6rem; font-size: 0.8125rem; color: var(--ok-on-ink); }
.footer__bottom {
  max-width: var(--container); margin: var(--gap-lg) auto 0;
  padding-top: var(--gap-md); border-top: 0.8px solid var(--line-dark);
  display: flex; flex-wrap: wrap; gap: var(--gap-sm) var(--gap-lg); justify-content: space-between;
  font-size: 0.875rem;
}
.footer__legal { display: flex; flex-wrap: wrap; gap: 0 var(--gap-md); }
.footer__bottom a { color: var(--on-ink-dim); text-decoration: none; white-space: nowrap; }
.footer__bottom a:hover { color: var(--on-ink); }

/* ==================================================================
   PROSE — privacy / terms
   ================================================================== */
.prose { max-width: 72ch; }
.prose h2 { margin-top: var(--gap-lg); }
.prose h3 { margin-top: var(--gap-md); }
.prose p, .prose ul { margin-top: var(--gap-sm); }
.prose ul { padding-left: 1.2rem; }
.prose li { margin-top: 0.4rem; }
.prose a { color: var(--ember-ink); text-decoration: underline; text-underline-offset: 2px; }

/* ==================================================================
   404
   ================================================================== */
.page-404 {
  background: var(--ink); color: var(--on-ink-dim);
  display: grid; place-items: center; min-height: 100vh; min-height: 100svh;
  padding: 3rem var(--edge); text-align: center;
}
.nf img { height: 64px; width: auto; margin: 0 auto 2rem; }
.nf h1 { color: var(--on-ink); margin-bottom: 1rem; }
.nf p { max-width: 46ch; margin: 0 auto 2.5rem; }
.nf .cta-row { justify-content: center; }

/* ==================================================================
   REVEAL
   Visible is the base state; only JS-with-GSAP opts into the hidden
   start state. The failure mode is "no animation", never "blank page".
   ================================================================== */
.reveal { transition: opacity 0.6s cubic-bezier(.16,1,.3,1), transform 0.6s cubic-bezier(.16,1,.3,1); }
.reveal[data-delay="1"] { transition-delay: 70ms; }
.reveal[data-delay="2"] { transition-delay: 140ms; }
.reveal[data-delay="3"] { transition-delay: 210ms; }
.reveal[data-delay="4"] { transition-delay: 280ms; }
.reveal[data-delay="5"] { transition-delay: 350ms; }

html.anim-ready .reveal { opacity: 0; transform: translateY(20px); }
html.anim-ready .reveal.visible { opacity: 1; transform: none; }

/* .reveal--mask reuses the same observer but opts the block itself out of
   the fade-up, so the statement moment gets a masked line reveal and
   nothing else. No JS change: site.js adds .visible to any .reveal. */
html.anim-ready .reveal--mask { opacity: 1; transform: none; }
html.anim-ready .reveal--mask .display-band__line > span { transform: translateY(calc(100% + 0.25em)); }
html.anim-ready .reveal--mask.visible .display-band__line > span { transform: none; }

html.anim-ready .hero__eyebrow,
html.anim-ready .hero__sub,
html.anim-ready .hero__cta,
html.anim-ready .hero__note { opacity: 0; transform: translateY(16px); }
html.anim-ready .hero__title-inner { transform: translateY(calc(100% + 0.25em)); }

/* ==================================================================
   RESPONSIVE
   ================================================================== */
/* laptop and up: a larger mark in the footer. The nav logo is fluid
   (--logo-h) and needs no step here. */
@media (min-width: 992px) {
  .footer__logo img { height: 96px; }
}

@media (max-width: 1080px) {
  /* one column: heading, then the plate, then the steps and their CTA */
  .journey { grid-template-columns: 1fr; }
  .journey__head  { order: -2; }
  .journey__media { position: static; order: -1; max-width: 560px; }
  .footer__top { grid-template-columns: 1fr 1fr; }
  .contact-split { grid-template-columns: 1fr; }
  .cta-band__inner { grid-template-columns: 1fr; }
  .cta-band .cta-row { justify-content: flex-start; }
}

@media (max-width: 991.98px) {
  .nav-links, .nav-phone { display: none; }
  .nav-hamburger { display: flex; }
  /* .nav-links carries the margin-left:auto that pushes the actions right, and
     it is display:none here — so the actions need their own, or they cluster
     beside the logo with dead space to their right. */
  .nav-actions { margin-left: auto; }
  .section__head--split { grid-template-columns: 1fr; align-items: start; gap: var(--gap-md); }
  .perks, .outcomes__grid { grid-template-columns: 1fr; }
  /* cardless items at full width read as one long list — hold two up here */
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
  /* stacked cards: each sits taller than wide and the panel centres on it */
  .serve-carousel { gap: var(--gap-sm); }
  .serve-slide__frame { min-height: clamp(460px, 110vw, 620px); padding: 20px; align-items: center; }
  .serve-slide__panel { max-width: 100%; }
  .pillars { grid-template-columns: 1fr; }
  .split, .duo { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: 0; }
  .form__row { grid-template-columns: 1fr; }
  /* two up: only the right-hand column of each row keeps a divider */
  .band__grid { grid-template-columns: 1fr 1fr; gap: var(--gap-lg) var(--gap-md); }
  .band__item + .band__item { border-left: 0; padding-left: 0; }
  .band__item:nth-child(even) { border-left: 0.8px solid var(--line); padding-left: var(--gap-md); }
  /* backdrop-filter is expensive and the band is the tallest blurred
     surface on the site — drop it where frames matter most. */
  .card--glass { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--glass-flat); }
  .card--glass:hover { background: var(--glass-flat); }
  /* a blurred chip inside an already-blurred card nests two backdrop passes */
  .chip--glass, .serve-band .tag { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255, 252, 248, 0.16); }
}

@media (max-width: 768.98px) {
  /* ---- swipe rails -------------------------------------------------------
     Long card stacks (six services, six perks, the four-room tour) become one
     horizontal row on phones instead of 1,200–1,800px of scrolling. Same
     mechanics as .serve-carousel: native scroll-snap, no scrollbar, and the
     row bleeds to the viewport edge by undoing the section's --edge padding.
     The next card peeking in at ~82% is the swipe cue; site.js adds the dots
     and keyboard focus. Tablets and up keep their grids. */
  .svc-grid, .perks, .spaces {
    display: flex; gap: var(--gap-md);
    margin-inline: calc(-1 * var(--edge));
    padding-inline: var(--edge); scroll-padding-inline: var(--edge);
    overflow-x: auto; overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .svc-grid::-webkit-scrollbar, .perks::-webkit-scrollbar, .spaces::-webkit-scrollbar { display: none; }
  .svc-grid > *, .perks > *, .spaces .space { flex: 0 0 min(82%, 340px); scroll-snap-align: start; }
  /* the tour's two stagger columns flatten into the one row, at one height */
  .spaces__col { display: contents; }
  .spaces .space__img--tall, .spaces .space__img--wide { aspect-ratio: 1 / 1; }
  /* a card parked off to the side never meets the page's reveal observer,
     so rail cards skip the fade-up; the section head still gets it */
  html.anim-ready :is(.svc-grid, .perks, .spaces) .reveal { opacity: 1; transform: none; }
  :is(.svc-grid, .perks, .spaces):focus-visible { outline: 2px solid var(--ember); outline-offset: 4px; }

  .rail-dots { display: flex; justify-content: center; gap: 8px; margin-top: var(--gap-md); color: var(--ink); }
  .section--ink .rail-dots { color: var(--on-ink); }
  .rail-dots span { width: 6px; height: 6px; border-radius: 3px; background: currentColor; opacity: 0.25; transition: opacity 0.3s ease, width 0.3s ease; }
  .rail-dots span.is-on { width: 18px; opacity: 0.8; }

  .outcomes__grid { gap: var(--gap-md); }
  .hero { min-height: 100svh; }
}

@media (max-width: 560px) {
  /* every other primary button is full width on a phone; the form submits match */
  .form [type=submit] { width: 100%; }
  /* job cards: the title sits beside the toggle and the tags take the full card
     width underneath. display:contents lifts the title and tags out of their
     wrapper span into the grid; with the toggle's 44px column beside them the
     tags had ~254px and stacked one per line. */
  .job__head { grid-template-columns: 1fr 44px; row-gap: 0.75rem; align-items: center; }
  .job__head > span:first-child { display: contents; }
  .job__title  { grid-column: 1; grid-row: 1; }
  .job__toggle { grid-column: 2; grid-row: 1; }
  .job__meta   { grid-column: 1 / -1; grid-row: 2; margin-top: 0; }
  /* the two short link lists sit side by side; brand and newsletter run full width */
  .footer__top { grid-template-columns: 1fr 1fr; gap: var(--gap-lg) var(--gap-md); }
  .footer__brand, .footer__news { grid-column: 1 / -1; }
  /* 21px-tall text links are hard to hit with a thumb: pad them to ~44px */
  .footer__bottom a { display: inline-block; padding-block: 12px; }
  .footer__bottom { row-gap: 0; }
  /* one up: the dividers rotate to the horizontal */
  .band__grid { grid-template-columns: 1fr; gap: var(--gap-md); }
  .band__item, .band__item:nth-child(even) { border-left: 0; padding-left: 0; }
  .band__item + .band__item { border-top: 0.8px solid var(--line); padding-top: var(--gap-md); }
  .svc-grid { grid-template-columns: 1fr; }
  .cta-row .btn { width: 100%; }
  .hero__cta .btn { width: 100%; }
  .job__head { grid-template-columns: 1fr 44px; gap: var(--gap-sm); }
}

/* ---- home hero on phones: two-line eyebrow, "Building inclusive /
   communities", a full-width referral button with the phone and programs
   links paired beneath it, and the note on two centred lines ---- */
@media (max-width: 767.98px) {
  .mobile-only { display: inline; }
  .hero__eyebrow-sep { display: none; }
  .hero h1 { font-size: clamp(30px, 8vw, 34px); line-height: 1.05; }
  .hero__sub { font-size: max(15px, 1.0625rem); max-width: none; }
  .hero__cta {
    /* outer 1fr tracks centre the pair; the referral button spans all four */
    display: grid; grid-template-columns: 1fr auto auto 1fr;
    align-items: center; width: 100%; gap: var(--gap-sm) 0;
  }
  .hero__cta .btn--ember { grid-column: 1 / -1; width: 100%; min-height: 48px; }
  .hero__cta .btn--quiet { grid-column: 2; margin-right: 4px; }
  .hero__cta .arrow-link { grid-column: 3; }
  .hero__cta .btn--quiet { width: auto; padding-inline: 12px; }
  .hero__cta .arrow-link { min-height: 44px; padding-inline: 8px; justify-content: center; white-space: nowrap; }
  /* block, not inline-flex: on two lines the shield stays beside the first word */
  .hero__note { display: block; max-width: 36ch; text-wrap: balance; }
  .hero__note i, .hero__note svg { display: inline-block; vertical-align: -3px; margin-right: 6px; }
}

@media (max-width: 479.98px) {
  /* The logo plus the CTA plus the hamburger no longer fit, and a cut-off
     hamburger means no way to open the menu. The CTA is the one that goes:
     .mobile-menu already carries its own "Make a referral" button. */
  .nav-cta { display: none; }
}

/* ==================================================================
   REDUCED MOTION
   A mental-health service. Movement goes, legibility stays.
   ================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, html.anim-ready .reveal { opacity: 1 !important; transform: none !important; }
  html.anim-ready .hero__eyebrow,
  html.anim-ready .hero__sub,
  html.anim-ready .hero__cta,
  html.anim-ready .hero__note { opacity: 1 !important; transform: none !important; }
  html.anim-ready .hero__title-inner,
  html.anim-ready .display-band__line > span { transform: none !important; }
  html.anim-ready .display-band__art .sa-line { clip-path: none !important; }
  html.anim-ready .display-band__art :is(.sa-step1, .sa-step2, .sa-step3, .sa-step4, .sa-step5, .sa-teen, .sa-worker, .sa-sprig),
  html.anim-ready .about-art :is(.aa-worker, .aa-teen, .aa-child, .aa-plant) { opacity: 1 !important; transform: none !important; }
  html.anim-ready .about-art .aa-line { clip-path: none !important; }
  .display-band__art { translate: none !important; }
  .journey__rail::after { clip-path: none !important; }
  .step__dot { background: var(--ember); border-color: var(--ember); }
  .step__no { color: var(--ember-ink); }
}