/* =============================================================
   ZYMBOLIC — style.css
   -------------------------------------------------------------
   This file is organized top-down from most general to most
   specific: tokens → reset → base → layout → components → pages.
   That order matters because CSS is cascading — later rules can
   override earlier ones, so we put the "defaults" first.
   ============================================================= */


/* ===== Design Tokens =========================================
   CSS custom properties (a.k.a. CSS variables) defined on :root
   are available to every element on the page. This is how modern
   CSS handles design systems without needing Sass or a framework.

   Why use variables? If the brand color ever changes, we only
   update it here and the entire site follows.

   Access them anywhere with: color: var(--electric-blue);
   ============================================================= */
:root {
  /* Brand color palette */
  --deep-navy: #0D1B2A;      /* primary dark — backgrounds */
  --mid-navy: #1E3A5F;       /* secondary dark — cards, accents */
  --electric-blue: #4A90D9;  /* CTAs, links, highlights */
  --off-white: #F5F2EA;      /* warm light — body text on dark */
  --muted-blue: #8BA8C4;     /* secondary/muted text */
  --coral: #F0644D;          /* zine accent — hero eyebrow, hl variant */
  --mint:  #63C7A2;          /* zine accent — hl variant */
  --gold:  #D4AF37;          /* zine accent — base .hl, pullquote border */

  /* Font stacks — first font loads from Google Fonts, the rest
     are fallbacks in case the network fails. Always end with a
     generic family (sans-serif / serif) as the final fallback. */
  --font-headline: 'Geist', sans-serif;
  --font-body: 'Geist', sans-serif;
  --hand: 'Caveat', cursive;  /* handwritten accent — used on .hero__eyebrow */

  /* Layout + spacing tokens — reusing these keeps proportions
     consistent site-wide and makes responsive changes trivial. */
  --max-width: min(92%, 1600px);  /* fluid: 92% on mid screens, hard cap at 1600px on large ones */
  --nav-height: 72px;
  --section-pad: 80px 24px;  /* vertical + horizontal section padding */
  --radius: 12px;            /* standard corner radius */
  --transition: 0.25s ease;  /* standard animation timing */
}


/* ===== Reset =================================================
   Browsers apply inconsistent default margins, padding, and
   sizing. A mini-reset normalizes these across Chrome, Safari,
   Firefox, etc. so we start from a predictable baseline.
   ============================================================= */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  /* box-sizing: border-box makes width/height INCLUDE padding +
     border instead of adding to them. This matches how most
     people intuitively think about sizing. Apply it universally. */
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;           /* smooth anchor-link scrolling */
  -webkit-font-smoothing: antialiased; /* crisper text on macOS */
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;                  /* 1.5–1.7 is the readability sweet spot for body text */
  color: var(--off-white);
  background: var(--deep-navy);
}

img {
  max-width: 100%;  /* images never overflow their container */
  display: block;   /* removes the mysterious gap under inline images */
  /* Not grabbable: kill the native click-drag "ghost image" and the
     selection highlight. (Firefox ignores user-drag — see the dragstart
     handler in script.js for that one.) */
  -webkit-user-drag: none;
  -webkit-user-select: none;
  user-select: none;
}

a {
  color: inherit;           /* links adopt the parent color unless we override */
  text-decoration: none;    /* kill the default underline — we style links per-component */
}

ul {
  list-style: none;  /* no bullets — we style lists per-component */
}

button {
  font: inherit;      /* buttons inherit body font instead of system UI font */
  cursor: pointer;
  border: none;
  background: none;
}


/* ===== Typography ============================================
   Headings are grouped so they share font + weight + color.
   Per-level sizes use clamp() for fluid responsive scaling.
   ============================================================= */
h1, h2, h3, h4 {
  font-family: var(--font-headline);
  font-weight: 800;
  line-height: 1.25;  /* tighter line-height looks better on large text */
  color: #fff;
}

/* clamp(min, preferred, max) is the modern way to do fluid type.
   The browser picks the PREFERRED value (scales with viewport),
   but clamps it between MIN and MAX. No media queries needed.

   Example: h1 is at least 2.25rem, at most 3.5rem, and scales
   with 5% of viewport width in between. */
h1 { font-size: clamp(2.25rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); }
h3 { font-size: clamp(1.25rem, 3vw, 1.75rem); }
h4 { font-size: 1.125rem; }

p {
  /* 65ch = ~65 characters per line, the optimal reading width
     for body text. 'ch' is a unit equal to the width of "0". */
  max-width: 65ch;
}

/* Utility classes — small single-purpose helpers. They keep HTML
   readable without having to write one-off CSS for every element. */
.text-muted  { color: var(--muted-blue); }
.text-accent { color: var(--electric-blue); }


/* ===== Layout Helpers ========================================
   .container centers content and caps its width. .section gives
   consistent vertical rhythm. Modifier classes (--light, --mid)
   swap background colors without duplicating the base styles.
   This is the BEM naming pattern: block__element--modifier.
   ============================================================= */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;        /* horizontal centering — requires a fixed max-width */
  padding: 0 24px;       /* breathing room on mobile */
}

.section {
  padding: var(--section-pad);
}

/* Modifier classes override only the properties that need to change.
   The base .section rule still applies — that's the C in CSS (Cascading). */
.section--light {
  background: var(--off-white);
  color: var(--deep-navy);
}

.section--mid {
  background: var(--mid-navy);
}


/* ===== Buttons ===============================================
   Base button (.btn) defines shared structure. Variants
   (.btn--primary, .btn--outline) only override what's different.
   This pattern means you never repeat shared properties.
   ============================================================= */
.btn {
  display: inline-block;
  padding: 14px 32px;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1rem;
  /* Transitioning specific properties (not "all") is faster +
     lets us pick different timings per property if needed. */
  transition: background var(--transition), transform var(--transition);
}

.btn:hover {
  /* Subtle lift on hover — a 2px rise is small but feels
     tactile. Pair with a transition above for smoothness. */
  transform: translateY(-2px);
}

.btn--primary {
  background: var(--electric-blue);
  color: #fff;
}

.btn--primary:hover {
  background: #3a7bc8;  /* slightly darker on hover for feedback */
}

.btn--outline {
  border: 2px solid var(--electric-blue);
  color: var(--electric-blue);
}

.btn--outline:hover {
  background: var(--electric-blue);  /* inverts to solid on hover */
  color: #fff;
}


/* ===== Navigation ============================================
   Fixed at the top so it stays visible as the user scrolls.
   z-index: 1000 keeps it above all regular content.
   ============================================================= */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--nav-height);
  background: #fff;
  z-index: 1000;  /* high z-index so nothing renders over the nav */
  border-bottom: 1px solid rgba(13, 27, 42, 0.1);  /* subtle hairline divider */
}

/* Inner wrapper applies the same max-width as .container so the
   nav content aligns with the rest of the page below it. */
.nav__inner {
  display: flex;
  align-items: center;            /* vertical centering */
  justify-content: space-between; /* logo on left, links on right */
  height: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

.nav__logo {
  display: flex;
  align-items: center;
  gap: 10px;  /* 'gap' works on flex containers — cleaner than margins */
  /* Collapsed by default so only the icon portion of the logo shows.
     On hover the container widens and the "zymbolic" wordmark slides
     out from behind the icon. */
  width: 56px;          /* scaled down ~1/3 from the doubled size */
  overflow: hidden;
  transition: width 0.5s ease;
  position: relative;
  padding-bottom: 4px;  /* leave room for the hover underline */
}

/* Black underline that grows in from the left as the wordmark slides
   out on hover — visual parallel to the nav link hover underline. */
.nav__logo::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background: #000;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s ease;
}

.nav__logo:hover {
  width: 187px;   /* scaled down ~1/3 from the doubled size (was 280) */
}

/* Replay-intro control: a plain circular-arrow icon to the RIGHT of the
   Contact button, fading in only when the Contact button is hovered. No
   badge — just the icon. The slot is reserved so nothing shifts on hover. */
.nav__cta-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.nav__replay {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  color: var(--deep-navy);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}
.nav__replay svg { width: 22px; height: 22px; }
.nav__cta-wrap:hover .nav__replay,
.nav__replay:focus-visible {
  opacity: 1;
  pointer-events: auto;
}

.nav__logo:hover::after {
  transform: scaleX(1);
}

.nav__logo img {
  height: 43px;            /* scaled down ~1/3 from 64; .nav__logo-text inherits font size */
  width: auto;
  max-width: none;  /* allow image to exceed collapsed container */
  flex-shrink: 0;   /* prevent flex from compressing it */
}

.nav__links {
  display: flex;
  gap: 32px;
  align-items: center;
}

.nav__link {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--mid-navy);
  transition: color var(--transition);
  position: relative;  /* needed for the ::after pseudo-element below */
}

/* ::after creates a virtual element AFTER the link's content.
   We use it to draw an underline that animates from 0 → 100%
   width on hover. Pseudo-elements keep the HTML clean. */
.nav__link::after {
  content: '';             /* required — pseudo-elements need content, even if empty */
  position: absolute;      /* positioned relative to the parent .nav__link */
  bottom: -4px;
  left: 0;
  width: 0;                /* start hidden */
  height: 2px;
  background: var(--electric-blue);
  transition: width var(--transition);
}

/* Grouping selectors with comma applies the same rules to both
   states — here, hovering OR being the active page. */
.nav__link:hover,
.nav__link--active {
  color: var(--deep-navy);
}

.nav__link:hover::after,
.nav__link--active::after {
  width: 100%;  /* underline expands to full width */
}

.nav__cta {
  margin-left: 8px;
}

/* Mobile menu hamburger toggle. Hidden on desktop, shown on
   small screens via the media query further down. */
.nav__toggle {
  display: none;          /* hidden by default; the media query reveals it */
  flex-direction: column; /* stack the 3 bars vertically */
  gap: 5px;
  width: 28px;
  cursor: pointer;
}

.nav__toggle span {
  display: block;
  height: 2px;
  background: var(--deep-navy);
  border-radius: 2px;
  /* Transitioning transform + opacity is cheap for the browser
     because they don't trigger layout — only compositing. */
  transition: transform var(--transition), opacity var(--transition);
}


/* ===== Mobile Nav ============================================
   Media queries apply rules only when the condition matches.
   'max-width: 768px' = "screens 768px wide or smaller" (phones
   + small tablets). Everything inside this block ONLY applies
   to mobile; desktop is unaffected.
   ============================================================= */
@media (max-width: 768px) {
  .nav__toggle {
    display: flex;  /* show the hamburger on mobile */
  }

  /* The mobile menu slides down from under the nav when opened. */
  .nav__menu {
    position: fixed;
    top: var(--nav-height);  /* sits directly below the nav bar */
    left: 0;
    width: 100%;
    background: #fff;
    border-bottom: 1px solid rgba(13, 27, 42, 0.1);
    padding: 24px;
    /* Hidden state: translated off-screen, invisible, and
       pointer-events disabled so it can't be clicked. */
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
    transition: transform var(--transition), opacity var(--transition);
  }

  /* When JS adds .is-open, the menu slides into view. Separating
     "state classes" (is-*) from structure is a helpful convention. */
  .nav__menu.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .nav__links {
    flex-direction: column;  /* stack links vertically on mobile */
    gap: 20px;
  }

  .nav__cta {
    margin-left: 0;
    margin-top: 8px;
  }

  /* Hamburger → X animation. The :nth-child() selector targets
     each of the 3 bars individually and transforms them into
     an X shape when the menu is open. */
  .nav__toggle.is-open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);   /* top bar rotates down */
  }
  .nav__toggle.is-open span:nth-child(2) {
    opacity: 0;                                  /* middle bar fades out */
  }
  .nav__toggle.is-open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg); /* bottom bar rotates up */
  }
}


/* ===== Footer ================================================
   Multi-column footer using CSS Grid. The first column is twice
   as wide as the other two, holding the logo and description.
   ============================================================= */
.footer {
  background: #fff;
  border-top: 1px solid rgba(13, 27, 42, 0.1);
  padding: 48px 24px 32px;  /* more top padding than bottom */
}

.footer__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  /* Brand block stays widest; Pages gets extra room for its two
     sub-columns; Connect sits at the narrow end. */
  grid-template-columns: 1.8fr 1.6fr 1fr;
  gap: 48px;
}

/* Vertical link stacks under each footer heading. The --cols modifier
   flows a long list (Pages) into two balanced columns, filling top-to-
   bottom (column-major) so it reads as one continuous list and ends at
   roughly the same height as the shorter Connect column beside it. */
.footer__links--cols {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(5, auto);
  column-gap: 40px;
}

.footer__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.footer__logo img {
  height: 28px;
}

.footer__desc {
  color: var(--mid-navy);
  font-size: 0.875rem;
  max-width: 320px;
}

.footer__heading {
  font-family: var(--font-headline);
  font-weight: 800;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;  /* slight tracking for uppercase headings */
  margin-bottom: 16px;
  color: var(--deep-navy);
}

.footer__link {
  display: block;
  color: var(--mid-navy);
  font-size: 0.875rem;
  margin-bottom: 10px;
  transition: color var(--transition);
}

.footer__link:hover {
  color: var(--electric-blue);
}

/* Inline SVG icons in footer links. Setting 'fill: currentColor'
   makes the SVG inherit the link's text color — so the icon
   automatically recolors on hover without extra CSS. */
.footer__link svg {
  width: 16px;
  height: 16px;
  vertical-align: -3px;   /* nudge down to align with text baseline */
  margin-right: 6px;
  fill: currentColor;     /* inherit the parent link color */
}

.footer__bottom {
  max-width: var(--max-width);
  margin: 40px auto 0;
  padding-top: 24px;
  border-top: 1px solid rgba(13, 27, 42, 0.1);
  text-align: center;
  color: var(--mid-navy);
  font-size: 0.8125rem;
}

/* Mobile: collapse the 3-column footer into a single column stack. */
@media (max-width: 768px) {
  .footer__inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}


/* ===== Spacer for fixed nav ==================================
   Because .nav is position: fixed, it floats OUT of the document
   flow — meaning content would slide underneath it. This invisible
   spacer pushes the page content down by the nav's height.
   ============================================================= */
.nav-spacer {
  height: var(--nav-height);
}


/* ===== Section Headings ====================================== */
.section__heading {
  margin-bottom: 8px;
}

.section__sub {
  margin-bottom: 48px;
  font-size: 1.0625rem;
}


/* ===== Hero ==================================================
   The hero uses layered pseudo-elements (::before + ::after)
   to build a multi-layer background: a blurred image behind
   a dark gradient overlay. This keeps text readable on top of
   a photo without needing extra HTML elements.
   ============================================================= */
.hero {
  padding: 100px 24px 120px;
  position: relative;   /* anchor point for absolutely-positioned pseudo-elements */
  overflow: hidden;     /* clip the blurred image at the edges */
  z-index: 1;           /* establish a stacking context */
}

/* Layer 1 (farthest back): the blurred background image. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;             /* shorthand for top: 0; right: 0; bottom: 0; left: 0 */
  background: url('assets/images/drawing-of-Zymbolic-session.png');
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  filter: blur(6px);    /* lighter background blur */
  -webkit-filter: blur(6px);
  transform: scale(1.03);  /* hide the soft unblurred edge the blur creates */
  z-index: -2;          /* behind everything */
}

/* Layer 2: dark gradient overlay sitting between the image and
   the text, ensuring high contrast for the headline. */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(13, 27, 42, 0.92) 0%,   /* dark at top */
    rgba(13, 27, 42, 0.75) 60%,  /* still strong in middle */
    rgba(13, 27, 42, 0.6) 100%   /* keep text readable to the bottom */
  );
  z-index: -1;          /* in front of image, behind content */
}

.hero__tag {
  font-size: 0.8125rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;  /* wider tracking reads well for small caps */
  color: var(--electric-blue);
  margin-bottom: 20px;
}

.hero__title {
  font-family: inherit;   /* use body font instead of headline font here */
  font-weight: 700;
  line-height: 1.35;      /* a bit more breathing room for large headlines */
  padding-bottom: 4px;    /* prevents descenders (g, y, p) from being clipped */
  margin-bottom: 24px;
}

.hero__sub {
  font-size: 1.125rem;
  color: var(--muted-blue);
  max-width: 540px;
  margin-bottom: 36px;
}

.hero__actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;  /* buttons wrap to a new line on narrow screens */
}

.hero__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

/* Asymmetric variant: roomier text column, wider image column for
   when the illustration should carry visual weight in the hero. */
.hero__grid--asym {
  grid-template-columns: minmax(0, 1fr) minmax(0, 760px);
  align-items: start;  /* anchor the image to the top of the row */
}

/* When the image is anchored to top, vertically center the text
   column inside the (image-driven) row height instead. */
.hero__grid--asym > div:first-child {
  align-self: center;
  transform: translateX(-24px);  /* nudge the hero text slightly left */
}

/* Keep the asym-hero headline on a single line — the wide
   illustration narrows the text column enough to wrap it. */
.hero__grid--asym .hero__title {
  white-space: nowrap;
}

/* Snug variant: zero vertical padding so the hero's backdrop is
   sized exactly to the illustration that lives inside it. Height
   is tuned to the illustration at the asym image column width
   (560 × 1000/766 ≈ 731). */
.hero--snug {
  padding-top: 0;
  padding-bottom: 0;
  height: 560px;
}

.hero__image img {
  border-radius: var(--radius);
  width: 100%;
  height: auto;
}

/* Portrait variant: fills the column width at the image's natural
   aspect ratio so the illustration reads large and prominent. */
.hero__image--portrait img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  display: block;
}

/* Caption overlaid on the illustration, vertically centred on its
   left edge so it reads next to the "Student Resources" title. */
.hero__image--portrait {
  position: relative;
}

.hero__image-caption {
  position: absolute;
  left: 50%;
  top: 92px;    /* lowered from the top, nudged back up a bit */
  transform: translateX(-50%);
  white-space: nowrap;          /* one line, never stack words */
  font-family: var(--font-headline);
  font-weight: 800;
  font-size: clamp(1.375rem, 2.5vw, 2.25rem);
  line-height: 1.15;
  color: #fff;
  opacity: 0.6;                 /* 60% opacity */
  text-shadow: 0 2px 14px rgba(13, 27, 42, 0.9);
  z-index: 2;
  pointer-events: none;
}

/* On desktop, lift the snug portrait illustration out of the grid
   flow and anchor it to the section's right padding edge. Since
   .hero spans the full viewport width with no border or margin,
   that edge coincides with the browser's right edge. */
@media (min-width: 769px) {
  .hero--snug .container {
    height: 100%;
    display: flex;
    flex-direction: column;        /* stack hero content vertically */
    align-items: flex-start;       /* anchor to the left, not centered horizontally */
    justify-content: center;       /* center vertically in the 560px box */
  }
  .hero--snug .hero__image--portrait {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 760px;
    margin: 0;
  }
  .hero--snug .hero__image--portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    border-radius: 0;
    /* Soft fade on the left edge so the illustration blends into
       the dark hero backdrop instead of a hard vertical seam. */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 140px, #000 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 140px, #000 100%);
  }
}

@media (max-width: 768px) {
  .hero__grid,
  .hero__grid--asym {
    grid-template-columns: 1fr;  /* stack into single column */
  }
  .hero__image {
    order: -1;  /* move image above the text on mobile */
  }
  /* Text-first variant (student-resources): keep the title + subtitle above
     the image on mobile instead of the default image-first order. */
  .hero__grid--text-first .hero__image {
    order: 0;
  }
  /* This hero is a single column on mobile anyway; drop grid for plain block
     stacking so the image cell is a normal, viewport-centered block (a grid
     item's auto-minimum lets the 100vw child inflate and off-center it). With
     a stable centered block, the standard calc(50% - 50vw) breakout lands the
     100vw image flush at x=0..100vw. */
  .hero__grid--text-first {
    display: block;
  }
  /* Direct child only: the static portrait pages have a single <img> here.
     The homepage's .hero__image--portrait wraps a .gallery-wheel whose slide
     <img>s are deeper descendants — they must NOT get this full-bleed rule
     (the gallery-wheel full-bleeds itself separately). */
  .hero__grid--text-first .hero__image--portrait > img {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-bottom: -40px;   /* meet the hero's bottom edge (section padding-bottom: 40px) */
    border-radius: 0;
    display: block;
  }
  /* Homepage: the full-bleed gallery is the last hero element, so cancel the
     hero's 40px bottom padding too — the gallery then sits flush against the
     collage banner in the next section (no navy gap under the gallery). */
  .hero__grid--text-first .hero__image--portrait .gallery-wheel {
    margin-bottom: -40px;
  }
  /* Cap stacked portrait image width on mobile so the tall
     illustration doesn't push the text far down the page. */
  .hero__image--portrait img {
    max-width: 320px;
    margin: 0 auto;
  }
  /* Restore some vertical breathing room on mobile — the stacked
     layout needs padding so the text doesn't touch section edges.
     Also unset the desktop fixed height so the stacked content
     can size naturally. */
  .hero--snug {
    padding-top: 0;       /* gallery (order:-1) butts flush against the nav — no navy gap */
    padding-bottom: 40px;
    height: auto;
  }
  /* The caption is white-space:nowrap at desktop sizes; on the 320px-capped
     mobile image that clipped the last word ("...connect[ions]"). Let it wrap
     and shrink so the whole phrase fits inside the image. */
  .hero__image-caption {
    white-space: normal;
    width: max-content;
    max-width: 280px;
    font-size: clamp(1rem, 5vw, 1.375rem);
    line-height: 1.15;
    text-align: center;
  }
}


/* ===== Founders Grid ========================================= */
.founders-grid {
  display: grid;
  /* auto-fit + minmax = responsive grid without media queries.
     "Fit as many columns as you can, each at least 300px wide,
     filling the remaining space equally." Columns auto-wrap. */
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}

.founder-card {
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform var(--transition);
  text-align: center;
}

.founder-card:hover {
  transform: translateY(-4px);
}

.founder-card img {
  width: 200px;
  height: 200px;
  border-radius: 50%;   /* perfect circle (only works on square aspect) */
  object-fit: cover;    /* crop instead of distort if the image isn't square */
  margin: 0 auto;
}


/* ===== Pillar Cards (homepage)=============================== */
.pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
}

.pillar-card {
  /* Glassmorphism: translucent fill + backdrop blur + faint highlight
     border + soft drop shadow. The blur is most visible when there's
     visual variation behind the card (hero backdrop image, gradients);
     on flat sections it still reads as a refined translucent panel. */
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius);
  padding: 32px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.22);
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
}

.pillar-card:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.22);
  transform: translateY(-4px);
}

.pillar-card__icon {
  font-size: 1.75rem;
  color: var(--electric-blue);
  display: block;
  margin-bottom: 16px;
}

.pillar-card h3 {
  margin-bottom: 8px;
  font-size: 1.125rem;
}

.pillar-card p {
  color: var(--muted-blue);
  font-size: 0.9375rem;
}


/* ===== Stats (homepage impact section) ====================== */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 32px;
  text-align: center;
}

.stat__number {
  display: block;
  font-family: var(--font-headline);
  font-weight: 800;
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--electric-blue);
  line-height: 1.1;
  margin-bottom: 4px;
}

.stat__label {
  font-size: 0.9375rem;
  color: var(--mid-navy);
}


/* ===== Services Grid ========================================= */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.service-card {
  background: var(--mid-navy);
  border-radius: var(--radius);
  padding: 36px 28px;
  border: 1px solid rgba(75, 144, 217, 0.1);
  transition: border-color var(--transition), transform var(--transition);
}

.service-card:hover {
  border-color: var(--electric-blue);
  transform: translateY(-4px);
}

/* Negative margins on the image pull it OUT of the card's padding,
   making the image flush with the card edges while the text
   below it keeps the padding. A common "bleed" pattern. */
.service-card__img {
  margin: -36px -28px 24px;  /* top + horizontal match the card padding above */
  overflow: hidden;
  border-radius: var(--radius) var(--radius) 0 0;  /* round only top corners */
}

.service-card__img img {
  width: 100%;
  height: 200px;
  object-fit: cover;  /* crop the image to fit this aspect ratio */
}

/* Consulting & Coaching card: nudge the crop down a bit so the
   image sits lower in the 200px window (scoped to this image). */
.service-card__img img[src*="consulting-coaching"] {
  object-position: 50% 30%;
}

/* Match the same downward crop on the other two service cards. */
.service-card__img img[src*="workshops-training"],
.service-card__img img[src*="curriculum-design"] {
  object-position: 50% 30%;
}

.service-card h3 {
  margin-bottom: 12px;
}

.service-card p {
  color: var(--muted-blue);
  font-size: 0.9375rem;
  margin-bottom: 20px;
}

.service-card__link {
  color: var(--electric-blue);
  font-weight: 500;
  font-size: 0.9375rem;
  transition: color var(--transition);
}

.service-card__link:hover {
  color: var(--off-white);
}


/* ===== CTA Banner ============================================ */
.cta-banner h2 {
  margin-bottom: 8px;
}

.cta-banner p {
  color: var(--muted-blue);
  font-size: 1.0625rem;
}

/* CTA banner with the Oakland skyline as its backdrop.
   The skyline is pinned to the bottom; the copy sits in the
   cream "sky" above the rooflines. padding-bottom is in vw so
   it always clears the tallest building (which is ~13vw tall
   at the SVG's 1440:260 aspect) regardless of screen width. */
.cta-banner--skyline {
  position: relative;
  overflow: hidden;
  background: var(--off-white);
  padding-bottom: calc(14vw + 24px);
}
.cta-banner--skyline .container {
  position: relative;
  z-index: 1;
}
.cta-banner--skyline .treeline {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 0;
  background: transparent;
}
.cta-banner--skyline h2 { color: var(--deep-navy) !important; }   /* dark text on the cream sky */
.cta-banner--skyline p  { color: var(--mid-navy) !important; }    /* !important beats per-page inline light colors */


/* ===== Testimonial =========================================== */
.testimonial {
  text-align: center;
  padding: 80px 24px;
}

.testimonial__quote {
  font-size: clamp(1.125rem, 2.5vw, 1.375rem);
  color: var(--off-white);
  max-width: 720px;
  margin: 0 auto 28px;   /* 'margin: 0 auto' horizontally centers a block */
  line-height: 1.7;
  font-style: italic;
}

.testimonial__cite {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-style: normal;   /* override <cite>'s default italic */
}

.testimonial__name {
  font-family: var(--font-headline);
  font-weight: 800;
  font-size: 1rem;
  color: var(--electric-blue);
}

.testimonial__role {
  font-size: 0.875rem;
  color: var(--muted-blue);
}


/* ===== Why SEL: Explainer ==================================== */
/* Paper-plane accent + dashed loop trail, sitting ABOVE the word "Learning". */
.why-sel-intro {
  position: relative;
  padding-top: 120px;
  overflow: hidden;
  z-index: 1;
}
/* Match the home-page hero height (hero--snug = 560px) on desktop. */
@media (min-width: 769px) {
  .why-sel-intro { height: 560px; }
}
/* Hero-style backdrop: a blurred image under a dark navy gradient (matches .hero). */
.why-sel-intro::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('assets/images/drawing-of-Zymbolic-session.png') center bottom / cover no-repeat;
  filter: blur(6px);
  transform: scale(1.04);
  z-index: -2;
}
.why-sel-intro::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(13, 27, 42, 0.92) 0%,
    rgba(13, 27, 42, 0.80) 55%,
    rgba(13, 27, 42, 0.72) 100%);
  z-index: -1;
}
.why-sel-intro > .container { position: relative; z-index: 1; }
.sel-learning { position: relative; }
/* Plane + dashed-loop trail as ONE scaling unit above the word "Learning".
   Percentage-based child positions reproduce the original geometry where the
   plane's tail meets the trail's start, so they stay joined at any size. */
.sel-plane-stack {
  position: absolute;
  left: -14px;
  bottom: 100%;             /* above the word */
  margin-bottom: -30px;     /* nudge the whole plane+trail unit down so the enlarged plane clears the nav */
  width: clamp(200px, 24vw, 290px);
  aspect-ratio: 398 / 197;
  pointer-events: none;
}
.sel-plane-stack .sel-plane-trail {
  position: absolute;
  left: 24.6%;
  top: 19.3%;
  width: 75.4%;
  height: auto;
  z-index: 0;               /* behind the plane */
}
.sel-plane-trail path {
  fill: none;
  stroke: var(--off-white);   /* light dashes on the dark hero backdrop */
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 7 9;   /* dashed */
  opacity: 0.6;
}
.sel-plane-stack .sel-plane {
  position: absolute;
  left: 0;
  top: 0;
  width: 29.1%;
  transform: rotate(-10deg);
  pointer-events: none;
  z-index: 1;
  /* white plane on a light section — a soft shadow makes it read */
  filter: drop-shadow(0 6px 12px rgba(13, 27, 42, 0.22));
}
/* On mobile the heading wraps to 3 lines, and the plane (anchored above the
   word "Learning") spilled up over the first line ("What Is Social"). It's a
   purely decorative, aria-hidden flourish, so hide it at narrow widths. */
@media (max-width: 768px) {
  .sel-plane-stack {
    display: none;
  }
}

.sel-explainer {
  display: grid;
  grid-template-columns: minmax(0, 720px) 1fr;  /* paragraph keeps its 720px width on the left */
  gap: 56px;
  align-items: start;                            /* top-align so all 3 paragraphs fit within the 560px hero */
}
.sel-explainer__text p {
  color: var(--off-white);   /* light text on the blurred dark hero backdrop */
  font-size: 1.0625rem;
  margin-bottom: 16px;
  max-width: 720px;
}
.sel-explainer__image {
  display: flex;
  justify-content: flex-end;   /* hug the right (viewport) edge */
}
/* Same treatment as the About-page image: bigger, bled to the browser's
   right edge, with the right side fading out. */
.sel-explainer__image img {
  width: 100%;
  max-width: clamp(400px, 36vw, 580px);
  height: auto;
  display: block;
  /* Fade the right edge (About-page treatment) AND the bottom, so her
     cut-off legs dissolve instead of ending on a hard line. */
  -webkit-mask:
    linear-gradient(to bottom, #000 40%, transparent 60%),
    radial-gradient(85% 160% at 100% 100%, transparent 0%, #000 80%);
  -webkit-mask-composite: source-in;
  mask:
    linear-gradient(to bottom, #000 40%, transparent 60%),
    radial-gradient(85% 160% at 100% 100%, transparent 0%, #000 80%);
  mask-composite: intersect;
}
/* Tighten the dead space below the short paragraph: drop the section's
   bottom padding and pull the CTA up to overlap the faded lower image. */
.why-sel-intro { padding-bottom: 0; }
@media (min-width: 769px) {
  .sel-explainer {
    /* bleed the image column out to the browser's right edge (same as About) */
    margin-right: calc((min(92vw, 1600px) - 100vw) / 2 - 24px);
  }
}
@media (max-width: 768px) {
  .sel-explainer {
    grid-template-columns: 1fr;   /* stack: text, then image */
    gap: 32px;
    margin-right: 0;
  }
  .sel-explainer__image { justify-content: center; }
  .sel-explainer__image img {
    max-width: 340px;
    /* keep a bottom fade for the cut-off legs; drop the right-edge fade */
    -webkit-mask: linear-gradient(to bottom, #000 70%, transparent 100%);
            mask: linear-gradient(to bottom, #000 70%, transparent 100%);
  }
}


/* ===== Why SEL: Evidence Grid ================================ */
.evidence-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}

.evidence-card {
  background: rgba(13, 27, 42, 0.5);
  border: 1px solid rgba(75, 144, 217, 0.12);
  border-radius: var(--radius);
  padding: 32px 24px;
  transition: border-color var(--transition), transform var(--transition);
}

.evidence-card:hover {
  border-color: var(--electric-blue);
  transform: translateY(-4px);
}

.evidence-card__stat {
  display: block;
  font-family: var(--font-headline);
  font-weight: 800;
  font-size: 2.5rem;
  color: var(--electric-blue);
  line-height: 1.1;
  margin-bottom: 12px;
}

.evidence-card p {
  color: var(--off-white);
  font-size: 0.9375rem;
  margin-bottom: 12px;
}

.evidence-card__source {
  font-size: 0.8125rem;
  color: var(--muted-blue);
  font-style: italic;
}


/* ===== Why SEL: Benefits Grid ================================ */
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}

.benefit-card {
  background: #fff;
  border-radius: var(--radius);
  padding: 32px 24px;
  border: 1px solid rgba(13, 27, 42, 0.08);
  transition: border-color var(--transition), transform var(--transition);
}

.benefit-card:hover {
  border-color: var(--electric-blue);
  transform: translateY(-4px);
}

.benefit-card h3 {
  color: var(--deep-navy);
  margin-bottom: 10px;
  font-size: 1.125rem;
}

.benefit-card p {
  color: var(--mid-navy);
  font-size: 0.9375rem;
}


/* ===== Why SEL: Approach List ================================ */
.approach-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}

.approach-item {
  padding: 28px 0;
  /* Top border creates a visual divider line above each item —
     a clean alternative to boxing everything in full borders. */
  border-top: 2px solid var(--electric-blue);
}

.approach-item h3 {
  margin-bottom: 8px;
  font-size: 1.125rem;
}

.approach-item p {
  color: var(--muted-blue);
  font-size: 0.9375rem;
}


/* ===== About Page ============================================ */
.about-feature {
  display: grid;
  grid-template-columns: minmax(0, 360px) 1fr;
  gap: 48px;
  align-items: center;
}

.about-feature__img {
  width: 100%;
  max-width: 360px;
  border-radius: var(--radius);
}

.about-feature__text {
  color: var(--deep-navy);
}

.about-feature__text h2 {
  color: var(--deep-navy);
  margin-bottom: 16px;
}

.about-feature__text p {
  margin-bottom: 16px;
  max-width: 60ch;
}

.about-feature__text p:last-child {
  margin-bottom: 0;
}

@media (max-width: 768px) {
  .about-feature {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .about-feature__img {
    max-width: 100%;
  }
}

.zigzag-divider {
  max-width: 200px;
  margin: 40px auto 0;
}

.founders-detail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 40px;
  text-align: center;
}

.founder-detail-card {
  padding: 24px;
}

.founder-detail__photo {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 20px;
}

.founder-detail-card h3 {
  margin-bottom: 4px;
}

.founder-detail__bio {
  color: var(--muted-blue);
  font-size: 0.9375rem;
  margin-top: 16px;
  text-align: left;     /* align paragraphs left even though the container is centered */
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}


/* ===== Clients Page: Logo Grid ===============================
   Clean, uniform grid. Every cell is the same size, and every
   logo gets the same max-height — forcing visual consistency
   across wildly different source aspect ratios and file sizes. */
.logo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
}

.logo-grid__item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100px;
  padding: 16px;
}

/* Uniform sizing rule: every logo is constrained to the same
   max-height, with object-fit: contain letting each scale to
   fit without distortion. Grayscaled + dimmed by default,
   restored on hover. */
.logo-grid__item img {
  max-width: 120px;
  max-height: 50px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.65;
  transition: filter var(--transition), opacity var(--transition);
}

.logo-grid__item:hover img {
  filter: grayscale(0%);
  opacity: 1;
}

/* RYSE is a white-on-transparent logo — invert it so it reads
   as black on the light section background. */
.logo-grid__item img[src*="ryse"] {
  filter: invert(1) grayscale(100%);
}

.logo-grid__item:hover img[src*="ryse"] {
  filter: invert(1);
}

/* Latitude has an extreme 6.85:1 aspect ratio — give it explicit
   dimensions (forced with !important) so it renders at a
   readable size. */
.logo-grid__item--wide img {
  width: 180px !important;
  height: auto !important;
  max-width: 180px !important;
  max-height: none !important;
}




/* ===== Clients Page: Feature Sections ========================
   Two-column layout alternating image and text. The --reverse
   modifier flips the column order using the 'direction: rtl'
   trick — an old-school hack that works without rewriting HTML.
   ============================================================= */
.client-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

/* Setting direction: rtl on the grid reverses the visual order
   of the children. We then reset each child to ltr so the
   text inside still reads left-to-right. */
.client-feature--reverse {
  direction: rtl;
}

.client-feature--reverse > * {
  direction: ltr;
}

.client-feature__logo {
  max-width: 200px;
  margin-bottom: 20px;
  border-radius: 8px;
}

.client-feature__info h2 {
  margin-bottom: 12px;
}

.client-feature__photo img {
  width: 100%;
  border-radius: var(--radius);
}

@media (max-width: 768px) {
  /* On mobile, both layouts collapse to a single column
     and the rtl direction is reset to normal. */
  .client-feature,
  .client-feature--reverse {
    grid-template-columns: 1fr;
    direction: ltr;
  }
}


/* ===== Contact Page ========================================== */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 32px;
  max-width: 800px;
  margin: 0 auto 80px;
}

.contact-card {
  background: #fff;
  border-radius: var(--radius);
  padding: 40px 32px;
  border: 1px solid rgba(13, 27, 42, 0.08);
  box-shadow: 0 4px 24px rgba(13, 27, 42, 0.06);
  text-align: center;
  transition: transform var(--transition), box-shadow var(--transition);
}

.contact-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(13, 27, 42, 0.12);
}

.contact-card__photo {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 20px;
  border: 4px solid var(--off-white);
  box-shadow: 0 4px 16px rgba(13, 27, 42, 0.1);
}

.contact-card h3 {
  color: var(--deep-navy);
  margin-bottom: 4px;
}

.contact-card__role {
  color: var(--mid-navy);
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 auto 16px;
}

.contact-card__address {
  color: var(--mid-navy);
  font-size: 14px;
  margin: 0 auto 20px;
  word-break: break-all;
}

.contact-card .btn {
  display: inline-block;
}

/* Form wrapper card on light section */
.contact-form-wrap {
  max-width: 720px;
  margin: 0 auto;
  background: #fff;
  border-radius: var(--radius);
  padding: 48px 40px;
  border: 1px solid rgba(13, 27, 42, 0.08);
  box-shadow: 0 4px 24px rgba(13, 27, 42, 0.06);
}

.contact-form-wrap__header {
  text-align: center;
  margin-bottom: 32px;
}

.contact-form-wrap__header h2 {
  color: var(--deep-navy);
  margin-bottom: 8px;
}

.contact-form-wrap__header p {
  color: var(--mid-navy);
  margin: 0 auto;
  max-width: 480px;
}

@media (max-width: 600px) {
  .contact-form-wrap {
    padding: 32px 24px;
  }
}


/* ===== Contact Form ==========================================
   The form uses flexbox (vertical) for the outer stack and
   grid (2 columns) for the name/email row. Mixing flex + grid
   in the same form is fine — use whichever fits the layout.
   ============================================================= */
.contact-form {
  max-width: 720px;
  margin: 32px auto 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contact-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;  /* Name + Email side by side */
  gap: 20px;
}

/* Narrow mobile breakpoint — collapse the name/email row to
   a single column on phones for readability. */
@media (max-width: 600px) {
  .contact-form__row {
    grid-template-columns: 1fr;
  }
}

.contact-form__field {
  display: flex;
  flex-direction: column;
  gap: 6px;  /* spacing between label and input */
}

.contact-form__field span {
  font-size: 13px;
  font-weight: 600;
  color: var(--off-white);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.contact-form__field span em {
  font-style: normal;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.7;
}

/* Group selector: applies the same base styles to both inputs
   and textareas, avoiding duplication. */
.contact-form input,
.contact-form textarea {
  font-family: inherit;  /* inherit from body instead of browser default */
  font-size: 16px;       /* 16px prevents iOS zoom-on-focus */
  color: var(--deep-navy);
  background: var(--off-white);
  border: 1px solid rgba(13, 27, 42, 0.15);
  border-radius: var(--radius);
  padding: 14px 16px;
  width: 100%;
  transition: border-color var(--transition), box-shadow var(--transition);
}

/* :focus is the state when a user has clicked/tabbed into the field.
   Removing the default outline and replacing it with a branded
   border color gives a more polished look. */
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--electric-blue);
  box-shadow: 0 0 0 3px rgba(74, 144, 217, 0.15);
}

.contact-form textarea {
  resize: vertical;    /* users can only resize vertically, not horizontally */
  min-height: 140px;
}

.contact-form button {
  align-self: center;   /* pill width like the other contact buttons, not full-width */
  margin-top: 8px;
}

/* Light variant — used inside .contact-form-wrap on light sections.
   Labels switch to dark navy and inputs get a subtle off-white fill. */
.contact-form--light .contact-form__field span {
  color: var(--mid-navy);
}

.contact-form--light input,
.contact-form--light textarea {
  background: #fafaf6;
  border-color: rgba(13, 27, 42, 0.12);
}

/* ============================================================
   Resources page — grade-level tabs
   A segmented control that swaps between the Middle School and
   High School resource panels. Reuses the brand tokens so it
   matches buttons and cards site-wide. Only the resources page
   renders these classes; every other page is unaffected.
   ============================================================ */
.resource-tabs {
  display: inline-flex;
  gap: 8px;
  padding: 8px;
  margin: 32px auto 0;
  /* Dark pill track echoes the nav + footer, so the control reads
     as part of the brand rather than a generic toggle. */
  background: var(--deep-navy);
  border: 1px solid rgba(13, 27, 42, 0.6);
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(13, 27, 42, 0.18);
}

.resource-tab {
  font-family: var(--font-headline);
  font-size: 1rem;
  font-weight: 700;
  color: var(--off-white);
  background: transparent;
  border: none;
  padding: 12px 30px;
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), transform var(--transition), box-shadow var(--transition);
}

.resource-tab:hover {
  /* Subtle lift + warm wash, matching the site's tactile buttons. */
  background: rgba(245, 242, 234, 0.12);
  transform: translateY(-1px);
}

.resource-tab.is-active {
  background: var(--electric-blue);
  color: #fff;
  box-shadow: 0 6px 18px rgba(74, 144, 217, 0.45);
}

.resource-tab.is-active:hover {
  background: #3a7bc8;
}

/* Panels: only the active grade level is shown. */
.resource-panel {
  display: none;
}

.resource-panel.is-active {
  display: block;
}

/* Resource cards that are links — keep them visually identical to
   the static .benefit-card (no underline, inherited text colors),
   just add the pointer cursor and a clearer focus ring for
   keyboard users. The .benefit-card hover lift still applies. */
a.benefit-card {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

a.benefit-card:focus-visible {
  outline: 2px solid var(--electric-blue);
  outline-offset: 3px;
}

/* Static (non-link) info cards in the support grid stay put on hover —
   only the link card (a.benefit-card) gets the clickable lift/highlight. */
.benefits-grid--support div.benefit-card:hover {
  border-color: rgba(13, 27, 42, 0.08);
  transform: none;
}

/* Small CTA pill on the link card — tinted with the card's icon color
   (electric blue), smaller and less shouty than a bold link line. */
.benefit-card__cta {
  display: inline-block;
  margin-top: 16px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(74, 144, 217, 0.16);   /* electric-blue tint = the icon color */
  color: var(--electric-blue);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
a.benefit-card:hover .benefit-card__cta {
  background: rgba(74, 144, 217, 0.26);    /* slightly brighter on hover */
}

/* Hoodie product cards (ways-to-support → Shop) */
.shop-products {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
  margin-top: 24px;
  /* Sit under the Shop & Support card: occupy the right grid column
     (giving grid is 2 equal columns with a 24px gap) and push right. */
  width: calc(50% - 12px);
  margin-left: auto;
}
@media (max-width: 640px) {
  .shop-products { width: 100%; margin-left: 0; }  /* grid is one column here */
}
.shop-product {
  width: 200px;            /* keep the hoodies a sensible size, not half the row */
  max-width: 100%;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--off-white);
  transition: transform var(--transition);
}
.shop-product:hover {
  transform: translateY(-4px);
}
.shop-product__img {
  position: relative;
  aspect-ratio: 4 / 5;   /* portrait, matches the hoodie product photos */
  background: transparent;   /* let the hoodies' transparent PNG background show */
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Spec "notes" overlay — the decoration/material/placement details that
   were printed on the Shopify proof; fades in on hover/focus. */
.shop-product__details {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 16px;
  text-align: center;
  background: rgba(13, 27, 42, 0.85);
  color: var(--off-white);
  font-size: 0.8125rem;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.shop-product:hover .shop-product__details,
.shop-product:focus-visible .shop-product__details {
  opacity: 1;
}
.shop-product__details strong {
  color: var(--gold);
  font-size: 0.9375rem;
  margin-bottom: 4px;
}
.shop-product__img img {
  width: 100%;
  height: 100%;
  object-fit: contain;   /* show the whole garment without cropping */
  display: block;
}
.shop-product__body {
  padding: 12px 4px 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.shop-product__name { font-weight: 700; font-size: 1.0625rem; color: var(--off-white); }
.shop-product__price { color: var(--muted-blue); font-weight: 600; }
.shop-product__cta {
  margin-top: 8px;
  color: var(--electric-blue);
  font-weight: 600;
  font-size: 0.875rem;
}


/* =============================================================
   Contact & email buttons — Uiverse gold pill
   From Uiverse.io by gharsh11032000. Applied to every button
   that leads to contact or email (contact.html links, mailto:
   links, and the contact/join form submit buttons) so they're
   styled identically site-wide. Higher specificity than
   .btn--primary so it overrides the brand button on these.
   ============================================================= */
a.btn[href="contact.html"],
a.btn[href^="mailto:"],
.contact-form button[type="submit"] {
  cursor: pointer;
  position: relative;
  padding: 10px 24px;
  font-size: 18px;
  color: var(--electric-blue);
  border: 2px solid var(--electric-blue);
  border-radius: 34px;
  background-color: transparent;
  font-weight: 600;
  transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1);
  overflow: hidden;
}

a.btn[href="contact.html"]::before,
a.btn[href^="mailto:"]::before,
.contact-form button[type="submit"]::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);  /* size-independent centering */
  width: 130%;            /* circle scales to the button, not a fixed 50px */
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  scale: 0;                /* scales about its centre -> spawns centred */
  z-index: -1;
  background-color: var(--electric-blue);
  transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
}

a.btn[href="contact.html"]:hover::before,
a.btn[href^="mailto:"]:hover::before,
.contact-form button[type="submit"]:hover::before {
  scale: 1.4;            /* 1.3x width already covers the pill; 1.4 = margin */
}

a.btn[href="contact.html"]:hover,
a.btn[href^="mailto:"]:hover,
.contact-form button[type="submit"]:hover {
  color: #fff;
  transform: none;          /* cancel the base .btn lift; use scale */
  scale: 1.1;
  box-shadow: 0 0px 20px rgba(74, 144, 217, 0.4);
}

a.btn[href="contact.html"]:active,
a.btn[href^="mailto:"]:active,
.contact-form button[type="submit"]:active {
  scale: 1;
}


/* =============================================================
   Uiverse card effect (Yaseen549) — applied to ALL cards
   From Uiverse.io. Dark #212121 surface, 30px radius and the
   dual neumorphic shadow. The demo's fixed 190x254px is
   intentionally omitted so the responsive card grids keep
   working. Applied site-wide per request.
   ============================================================= */
.service-card,
.benefit-card,
.evidence-card,
.approach-item,
.contact-card {
  border-radius: 30px;
  background: #212121;
  box-shadow: 6px 6px 16px rgba(0, 0, 0, 0.35),
              -6px -6px 16px rgba(255, 255, 255, 0.03);
}


/* =============================================================
   Legible text on the dark card surface
   The Uiverse #212121 card made dark-navy card text unreadable.
   Force headings light and body text to off-white across every
   card type; keep muted-blue only for secondary/meta text where
   it still has enough contrast on #212121.
   ============================================================= */
.service-card h3,
.benefit-card h3,
.evidence-card h3,
.approach-item h3,
.contact-card h3 {
  color: #fff;
}

.service-card p,
.benefit-card p,
.evidence-card p,
.approach-item p,
.contact-card p {
  color: var(--off-white);
}

.benefit-card em,
.evidence-card__source,
.approach-item p,
.contact-card,
.contact-card__role,
.contact-card__address {
  color: var(--muted-blue);
}


/* =============================================================
   Center card content
   Headers and body text centered inside every card type so the
   information reads consistently centred within each card.
   ============================================================= */
.service-card,
.benefit-card,
.evidence-card,
.approach-item,
.contact-card {
  text-align: center;
}

/* Static scattered Z-marks behind the founder contact cards — a still
   version of the z-rain. The cards are dark (#212121), so brand-colored
   marks read as a faint sprinkle. Content sits above via z-index. */
.contact-card {
  position: relative;
  overflow: hidden;
}
.contact-card > *:not(.z-scatter) {
  position: relative;
  z-index: 1;
}
.z-scatter {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.z-scatter span {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 34px;            /* uniform size for every mark */
  height: 34px;
  opacity: var(--op, 0.16);
  background-color: #fff;  /* all white */
  transform: rotate(var(--rot, 0deg));
  -webkit-mask: url("assets/images/z-mark.png") center / contain no-repeat;
          mask: url("assets/images/z-mark.png") center / contain no-repeat;
}

.service-card h3,
.benefit-card h3,
.evidence-card h3,
.approach-item h3,
.contact-card h3,
.service-card p,
.benefit-card p,
.evidence-card p,
.approach-item p,
.contact-card p {
  text-align: center;
}

/* p has a global max-width; center the box too so centred text
   doesn't sit in a left-anchored column inside the card. */
.service-card p,
.benefit-card p,
.evidence-card p,
.approach-item p,
.contact-card p {
  margin-left: auto;
  margin-right: auto;
}


/* =============================================================
   Helpline cards — light red
   Crisis/helpline cards get a soft red surface to set them apart
   from resource cards. Light bg, so text goes back to dark for
   legibility and the dark neumorphic shadow is softened.
   ============================================================= */
.helpline-grid .benefit-card,
a.helpline-grid .benefit-card {
  background: #fdeaea;
  border: 1px solid rgba(176, 38, 38, 0.25);
  box-shadow: 0 8px 22px rgba(155, 31, 31, 0.15);
}

.helpline-grid .benefit-card h3 {
  color: #8b1f1f;
}

.helpline-grid .benefit-card p {
  color: #4a2626;
}

.helpline-grid .benefit-card strong {
  color: #7a1313;
}


/* =============================================================
   Resources page — themed subject card grids
   -------------------------------------------------------------
   Each subject grid (math / reading / coding) carries a category
   color on the card border, plus a large low-opacity glyph in the
   corner that hints at the topic (math symbols, typography marks,
   code punctuation). The Uiverse dark card stays the surface; the
   colored border and watermark do the theming without hurting the
   text contrast inside.
   ============================================================= */
.benefits-grid--math .benefit-card,
.benefits-grid--reading .benefit-card,
.benefits-grid--coding .benefit-card {
  position: relative;
  overflow: hidden;
}

/* Watermark icon — anchored bottom-right, big and faint, non-
   interactive. Each card sets --icon (an SVG data URL) on itself;
   ::after applies it via mask-image and paints it in the theme
   color via background-color. Lucide-style stroke SVGs, MIT-style
   free, no attribution required. */
.benefits-grid--math .benefit-card::after,
.benefits-grid--reading .benefit-card::after,
.benefits-grid--coding .benefit-card::after {
  content: "";
  position: absolute;
  right: -12px;
  bottom: -12px;
  width: 130px;
  height: 130px;
  opacity: 0.18;
  pointer-events: none;
  user-select: none;
  -webkit-mask-image: var(--icon);
          mask-image: var(--icon);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  transition: opacity var(--transition), transform var(--transition);
}

/* Hover: bring the watermark a touch closer and brighter. */
.benefits-grid--math .benefit-card:hover::after,
.benefits-grid--reading .benefit-card:hover::after,
.benefits-grid--coding .benefit-card:hover::after {
  opacity: 0.28;
  transform: translate(-4px, -4px) rotate(-4deg);
}

/* ----- Math — orange ---------------------------------------- */
.benefits-grid--math .benefit-card {
  border: 2px solid #F97316;
}
.benefits-grid--math .benefit-card:hover {
  border-color: #F97316;
  box-shadow: 6px 6px 16px rgba(0, 0, 0, 0.35),
              -6px -6px 16px rgba(255, 255, 255, 0.03),
              0 0 0 3px rgba(249, 115, 22, 0.28);
}
.benefits-grid--math .benefit-card::after { background-color: #F97316; }
.benefits-grid--math .benefit-card:nth-child(1) { --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M12 5v14'/></svg>"); }
.benefits-grid--math .benefit-card:nth-child(2) { --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M6 6L18 18M18 6L6 18'/></svg>"); }
.benefits-grid--math .benefit-card:nth-child(3) { --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><circle fill='black' cx='12' cy='6' r='1.6'/><path d='M5 12h14'/><circle fill='black' cx='12' cy='18' r='1.6'/></svg>"); }
.benefits-grid--math .benefit-card:nth-child(4) { --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M5 9h14M5 15h14'/></svg>"); }
.benefits-grid--math .benefit-card:nth-child(5) { --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M18 5H6l7 7-7 7h12'/></svg>"); }
.benefits-grid--math .benefit-card:nth-child(6) { --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M3 13h3l3 7 4-16h8'/></svg>"); }
.benefits-grid--math .benefit-card:nth-child(7) { --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M3 7h18M8 7v12M16 7v10c0 2 2 2 4 0'/></svg>"); }

/* ----- Reading & Writing — green ---------------------------- */
.benefits-grid--reading .benefit-card {
  border: 2px solid #16A34A;
}
.benefits-grid--reading .benefit-card:hover {
  border-color: #16A34A;
  box-shadow: 6px 6px 16px rgba(0, 0, 0, 0.35),
              -6px -6px 16px rgba(255, 255, 255, 0.03),
              0 0 0 3px rgba(22, 163, 74, 0.28);
}
.benefits-grid--reading .benefit-card::after { background-color: #16A34A; }
.benefits-grid--reading .benefit-card:nth-child(1) { --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z'/><path d='M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z'/></svg>"); }
.benefits-grid--reading .benefit-card:nth-child(2) { --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M17 3a2.83 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5z'/></svg>"); }
.benefits-grid--reading .benefit-card:nth-child(3) { --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M13 4v16'/><path d='M17 4v16'/><path d='M19 4H9.5a4.5 4.5 0 0 0 0 9H13'/></svg>"); }
.benefits-grid--reading .benefit-card:nth-child(4) { --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20.24 12.24a6 6 0 0 0-8.49-8.49L5 10.5V19h8.5z'/><line x1='16' y1='8' x2='2' y2='22'/><line x1='17.5' y1='15' x2='9' y2='15'/></svg>"); }
.benefits-grid--reading .benefit-card:nth-child(5) { --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20'/></svg>"); }
.benefits-grid--reading .benefit-card:nth-child(6) { --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z'/><path d='M5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z'/></svg>"); }

/* ----- Science, Coding & More — purple ---------------------- */
.benefits-grid--coding .benefit-card {
  border: 2px solid #8B5CF6;
}
.benefits-grid--coding .benefit-card:hover {
  border-color: #8B5CF6;
  box-shadow: 6px 6px 16px rgba(0, 0, 0, 0.35),
              -6px -6px 16px rgba(255, 255, 255, 0.03),
              0 0 0 3px rgba(139, 92, 246, 0.28);
}
.benefits-grid--coding .benefit-card::after { background-color: #8B5CF6; }
.benefits-grid--coding .benefit-card:nth-child(1) { --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle fill='black' cx='12' cy='12' r='1.5'/><ellipse cx='12' cy='12' rx='10' ry='4'/><ellipse cx='12' cy='12' rx='10' ry='4' transform='rotate(60 12 12)'/><ellipse cx='12' cy='12' rx='10' ry='4' transform='rotate(120 12 12)'/></svg>"); }
.benefits-grid--coding .benefit-card:nth-child(2) { --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 2v6L4 18a2 2 0 0 0 2 3h12a2 2 0 0 0 2-3l-5-10V2'/><path d='M9 2h6'/></svg>"); }
.benefits-grid--coding .benefit-card:nth-child(3) { --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='16 18 22 12 16 6'/><polyline points='8 6 2 12 8 18'/></svg>"); }
.benefits-grid--coding .benefit-card:nth-child(4) { --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M8 3H7a2 2 0 0 0-2 2v5a2 2 0 0 1-2 2 2 2 0 0 1 2 2v5c0 1.1.9 2 2 2h1'/><path d='M16 21h1a2 2 0 0 0 2-2v-5c0-1.1.9-2 2-2a2 2 0 0 1-2-2V5a2 2 0 0 0-2-2h-1'/></svg>"); }
.benefits-grid--coding .benefit-card:nth-child(5) { --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M2 12h20'/><path d='M12 2a15 15 0 0 1 4 10 15 15 0 0 1-4 10 15 15 0 0 1-4-10 15 15 0 0 1 4-10z'/></svg>"); }
.benefits-grid--coding .benefit-card:nth-child(6) { --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 18h8'/><path d='M3 22h18'/><path d='M14 22a7 7 0 1 0 0-14h-1'/><path d='M9 14h2'/><path d='M9 12V8h6v4'/><path d='M12 8V4h-3v4'/></svg>"); }
.benefits-grid--coding .benefit-card:nth-child(7) { --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='4' width='16' height='16' rx='2'/><rect x='9' y='9' width='6' height='6'/><path d='M9 2v2M15 2v2M2 9h2M2 15h2M9 20v2M15 20v2M20 9h2M20 15h2'/></svg>"); }

/* Purdue OWL → paragraph (pilcrow) icon, by link so it's correct regardless
   of the card's position in the grid (it's 3rd in one tab, 1st in another). */
.benefits-grid .benefit-card[href*="owl.purdue.edu"] { --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M13 4v16'/><path d='M17 4v16'/><path d='M19 4H9.5a4.5 4.5 0 0 0 0 9H13'/></svg>"); }


/* =============================================================
   Zymbolic branches expansive backdrop
   A single, large Zymbolic-Z branches image sits behind one
   section (the testimonial) as a brand visual. background-size
   cover makes it expansive; a radial-gradient mask fades the
   four corners to transparent so it blends into the section.
   pointer-events:none + z-index:-1 (with isolation:isolate)
   keep content fully interactive and on top.
   ============================================================= */
.has-branches-bg {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #fff;  /* white surround behind the collage */
  /* Reserve space matching the image's natural aspect (2880:1320 ≈ 2.18:1)
     + a 27px gap before the cards. Using a % padding-top makes the reserve
     scale with viewport width so the image is shown in full at any size. */
  padding-top: calc(45.833% + 27px);
  padding-bottom: 27px;
}

/* Mobile: drop the 27px breathing gap reserved below the collage banner so
   "How we work" sits directly under it (the collage height is the 45.833%). */
@media (max-width: 768px) {
  .has-branches-bg {
    padding-top: 45.833%;
  }
}

.has-branches-bg::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  /* Height auto-scales from the width via the image's exact aspect ratio,
     so the whole collage is visible — never cropped at top or bottom — and
     its left/right edges meet the page edges. */
  aspect-ratio: 2880 / 1320;
  background-image: url('assets/images/zymbolic-relationships-web.png');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: -1;
}

/* =============================================================
   Treeline band — full-bleed decorative silhouette above footer
   Mimics the Latitude "skyline above the footer" effect, themed
   to Zymbolic's branches/growth brand. Inline SVG scales crisp
   at any width; deep-navy front layer matches the footer so the
   tree bases melt straight into it. aria-hidden — purely visual.
   ============================================================= */
.treeline {
  width: 100%;
  background: var(--off-white);
  line-height: 0;          /* kill descender gap below inline SVG */
}
.treeline__svg {
  display: block;
  width: 100%;
  height: auto;            /* scales proportionally — never distorts */
}

/* === Nav dropdown submenu rules (transferred from zymbolic) === */
/* Dropdown submenu — hover on the parent .nav__item reveals it.
   focus-within gives keyboard users the same reveal. */
.nav__item--has-dropdown {
  position: relative;
}

.nav__dropdown {
  /* Positioned to sit flush against the blue hover underline
     (which is at bottom: -4px, height 2px on .nav__link), and
     scales from 0 → 1 with transform-origin at top so it appears
     to slide out of that line. Background matches the underline. */
  list-style: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 180px;
  margin: 0;
  padding: 10px 0;
  background: var(--electric-blue);
  border-radius: 0;  /* fully squared corners */
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
  opacity: 0;
  visibility: hidden;
  transform: scaleY(0);
  transform-origin: top left;
  transition: opacity .3s ease, transform .3s ease, visibility .3s ease;
  z-index: 100;
}

.nav__item--has-dropdown:hover .nav__dropdown,
.nav__item--has-dropdown:focus-within .nav__dropdown {
  opacity: 1;
  visibility: visible;
  transform: scaleY(1);
}

.nav__dropdown-link {
  display: block;
  padding: 10px 20px;
  color: #fff;
  font-weight: 700;
  font-size: 0.9375rem;
  transition: background var(--transition), color var(--transition);
}

.nav__dropdown-link:hover {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

/* Caret toggle: only used to expand/collapse submenus in the mobile drawer.
   On desktop the dropdown is hover-revealed, so the caret stays hidden. */
.nav__caret {
  display: none;
}

/* === Nav dropdown mobile rules === */
@media (max-width: 768px) {
  /* Parent row: the link and its caret share one line; the submenu
     collapses onto the next (full-width) row beneath them. */
  .nav__item--has-dropdown {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;  /* center the parent link like every other item */
  }
  /* Empty spacer that mirrors the caret's width on the opposite side, so the
     link stays optically centered between them on the top row. */
  .nav__item--has-dropdown::before {
    content: '';
    flex: 0 0 40px;
    height: 1px;
  }
  .nav__caret {
    flex: 0 0 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--mid-navy);
    cursor: pointer;
    transition: transform var(--transition);
  }
  .nav__caret svg {
    width: 18px;
    height: 18px;
  }
  .nav__item--has-dropdown.is-open .nav__caret {
    transform: rotate(180deg);   /* flip the chevron when expanded */
  }

  /* Collapsible submenu — hidden until the parent gets .is-open (set by JS).
     max-height animates the open/close; overflow:hidden clips it when shut. */
  .nav__dropdown {
    position: static;
    flex-basis: 100%;
    width: 100%;
    opacity: 1;
    visibility: visible;
    transform: none;
    background: transparent;
    box-shadow: none;
    min-width: 0;
    margin: 0;
    padding: 0;
    text-align: center;       /* center sub-items under the centered parent */
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition);
  }
  .nav__item--has-dropdown.is-open .nav__dropdown {
    max-height: 320px;
  }

  .nav__dropdown-link {
    padding: 8px 0;
    color: var(--deep-navy);
  }
}

/* === Clients page extras: testimonials, hero eyebrow, .hl, pullquote === */
/* Testimonials grid (clients page) */
.testimonial-grid__title {
  text-align: center;
  color: var(--off-white);
  margin-bottom: 48px;
}

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 32px;
}
/* On mobile the 320px column minimum is wider than the padded content column,
   which forced the whole page ~24px past the viewport (horizontal scroll).
   Collapse to a single column so nothing overflows. */
@media (max-width: 768px) {
  .testimonial-grid {
    grid-template-columns: 1fr;
  }
}
/* Decorative reading-boy art beside the student review — enlarged and bled
   out to the browser's right edge. */
.testimonial-grid__art {
  display: flex;
  align-items: flex-end;   /* anchor the boy to the bottom of his cell so his feet sit on the border */
  justify-content: flex-end;
}
.testimonial-grid__art img {
  width: 100%;
  display: block;
  /* Fade his shoes (the far-left extremity) out into the background, the same
     soft mask treatment used on the other student images. */
  -webkit-mask: linear-gradient(to left, #000 50%, transparent 78%);
          mask: linear-gradient(to left, #000 50%, transparent 78%);
}
/* Figure shrink-wraps the image so the icon stream can be anchored to the
   book in image-relative coordinates, no matter how the image is bled. */
.book-fig {
  margin: 0;
  position: relative;
  width: 100%;
  max-width: 936px;
}

/* === Icon stream growing out of the book ================================== */
/* Origin point pinned over the book in the boy's hands (image-relative %). */
.book-stream {
  position: absolute;
  left: 63%;
  top: 56%;
  width: 0;
  height: 0;
  pointer-events: none;
}
.book-stream__icon {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--sz);
  height: var(--sz);
  margin: calc(var(--sz) / -2) 0 0 calc(var(--sz) / -2); /* center on the origin */
  background-color: var(--c);
  --mask: url("assets/images/z-mark.png");
  -webkit-mask: var(--mask) center / contain no-repeat;
          mask: var(--mask) center / contain no-repeat;
  will-change: transform, opacity;
  opacity: 0;
  animation: book-emit var(--dur) ease-out var(--delay) infinite;
}
/* Rise up and out of the book: start tiny and invisible at the page, swell
   and drift to a random offset while fading away. */
@keyframes book-emit {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.15) rotate(var(--rot0)); }
  12%  { opacity: var(--op); }
  70%  { opacity: var(--op); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(var(--scale)) rotate(var(--rot1)); }
}
@media (prefers-reduced-motion: reduce) {
  .book-stream { display: none; }
}
@media (min-width: 769px) {
  .testimonial-grid__art {
    grid-column: 1 / -1;   /* full-width band so the boy always sits at the far right */
    /* bleed the cell out flush to the browser's right edge. The container is
       92% of the section's padded width (100vw - 48px) plus its own 24px gutter,
       so the gutter from grid edge to viewport is 48px + 4% of (100vw - 48px). */
    margin-right: calc(-46.08px - 4vw);
    /* The boy occupies only the right ~720px of this full-width row; the right
       side of the card row above is empty, so pull him up to overlap it and
       reclaim the otherwise-empty navy band. */
    margin-top: -1180px;
    /* drop his feet through the section's 80px bottom padding to the border */
    margin-bottom: -80px;
  }
}

.testimonial-card {
  margin: 0;
  padding: 32px;
  /* Solid translucent fill (no backdrop-filter): the cards sit on a solid
     navy section, so a live backdrop blur added nothing visible but caused
     a flickering edge band in Chrome. Plain fill = same look, no flicker. */
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.22);
  display: flex;
  flex-direction: column;
}

.testimonial-card__quote {
  margin: 0 0 20px;
  font-size: 1rem;
  line-height: 1.7;
  font-style: italic;
  color: var(--off-white);
  flex: 1;
}

.testimonial-card__cite {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-style: normal;
}

.testimonial-card__name {
  font-family: var(--font-headline);
  font-weight: 800;
  font-size: 0.9375rem;
  color: #D4AF37;
}

.testimonial-card__role {
  font-size: 0.8125rem;
  color: var(--muted-blue);
  line-height: 1.5;
}

/* Client feature pullquote (OUSD block) */
.client-feature__pullquote {
  margin: 24px 0 0;
  padding: 16px 20px;
  border-left: 3px solid #D4AF37;
  font-style: italic;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--off-white);
}

.client-feature__pullquote cite {
  display: block;
  margin-top: 10px;
  font-style: normal;
  font-size: 0.9375rem;
  font-weight: 800;
  font-family: var(--font-headline);
  color: #D4AF37;
}

/* Highlight wrap (.hl) and handwritten hero eyebrow */
/* Highlighter blocks — wrap key words in <span class="hl">.
   Four color variants map to the zine palette. Base is gold. */
.hl {
  background: var(--gold);
  padding: 4px 10px;
  color: #000;
  display: inline-block;
  transform: rotate(-1.5deg);
  font-weight: 800;
}
.hl--coral { background: var(--coral); color: #000; }
.hl--mint  { background: var(--mint);  color: #000; }
.hl--blue  { background: var(--electric-blue); color: #000; }

/* Handwritten eyebrow for hero sections — drop a short Caveat
   line above the h1 with <span class="hero__eyebrow">. */
.hero__eyebrow {
  font-family: var(--hand);
  color: var(--coral);
  font-size: 1.75rem;
  line-height: 1;
  display: inline-block;
  transform: rotate(-3deg);
  margin-bottom: 8px;
}


/* === Article modal (used by news.html) === */
.article-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: 40px 20px;
}

.article-modal[hidden] {
  display: none;
}

.article-modal__overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(6px);
  cursor: pointer;
}

.article-modal__card {
  position: relative;
  max-width: 820px;
  width: 100%;
  background: #1a1a1f;
  border-radius: var(--radius);
  padding: 48px 44px;
  color: var(--off-white);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7);
  z-index: 1;
}

.article-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: transparent;
  border: none;
  color: var(--off-white);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition);
}

.article-modal__close:hover {
  background: rgba(255, 255, 255, 0.12);
}

.article-modal__img {
  width: 100%;
  max-height: 360px;
  object-fit: cover;
  border-radius: var(--radius);
  margin-bottom: 24px;
  display: block;
}

.article-modal__meta {
  color: var(--electric-blue);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 4px;
}

.article-modal__byline {
  color: var(--muted-blue);
  font-size: 0.9375rem;
  font-style: italic;
  margin-bottom: 16px;
}

.article-modal__title {
  color: var(--electric-blue);
  margin-bottom: 24px;
  font-size: 1.875rem;
  line-height: 1.3;
}

.article-modal__body {
  color: var(--off-white);
  font-size: 1rem;
  line-height: 1.75;
}

.article-modal__body p {
  margin-bottom: 16px;
}

.article-modal__body a {
  color: var(--electric-blue);
  text-decoration: underline;
}

.article-modal__body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
  margin: 20px 0;
  display: block;
}

.article-modal__body h1,
.article-modal__body h2,
.article-modal__body h3 {
  color: var(--electric-blue);
  margin: 24px 0 12px;
}

.article-modal__link-wrap {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Prevent page scroll when modal is open */
body.modal-open {
  overflow: hidden;
}


/* ===== Footer ================================================
   Multi-column footer using CSS Grid. The first column is twice
   as wide as the other two, holding the logo and description.
   ============================================================= */

/* === Branches-bg (white) context: only OUTSIDE-the-card text turns black.
   Service cards inside this section keep their dark-navy bg + light text. === */
.has-branches-bg .section__heading,
.has-branches-bg .section__sub,
.has-branches-bg .testimonial__quote,
.has-branches-bg .testimonial__name,
.has-branches-bg .testimonial__role,
.has-branches-bg .text-muted {
  color: #000;
}


/* === Gallery wheel (auto-rotating image slider) ============== */
.gallery-wheel {
  position: relative;
  width: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  aspect-ratio: 16 / 9;     /* landscape slide window */
  background: #000;
}

.gallery-wheel__track {
  position: relative;
  width: 100%;
  height: 100%;
  /* Slides are stacked and crossfade (see .gallery-wheel__slide) rather than
     sliding horizontally — so looping from the last image back to the first
     is a seamless dissolve instead of the whole strip snapping backward. */
}

.gallery-wheel__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  transition: opacity 0.8s ease;
  z-index: 0;
}

.gallery-wheel__slide.is-active {
  opacity: 1;
  z-index: 1;
}

.gallery-wheel__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gallery-wheel__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 1.25rem;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background var(--transition);
  z-index: 2;
}

.gallery-wheel__btn:hover {
  background: rgba(0, 0, 0, 0.85);
}

.gallery-wheel__btn--prev { left: 12px; }
.gallery-wheel__btn--next { right: 12px; }

.gallery-wheel__dots {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 2;
}

.gallery-wheel__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  padding: 0;
  transition: background var(--transition), transform var(--transition);
}

.gallery-wheel__dot.is-active {
  background: #fff;
  transform: scale(1.3);
}


/* === Gallery wheel when used as a hero__image--portrait (full-bleed right edge) === */
@media (min-width: 769px) {
  .hero__image--portrait .gallery-wheel {
    aspect-ratio: auto;
    height: 100%;
    width: 100%;
    border-radius: 0;
    box-shadow: none;
    /* Soft fade on the left edge so the slider blends into the dark
       hero backdrop — same treatment as the static student-resources image. */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 140px, #000 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 140px, #000 100%);
  }
}

/* Mobile: make the hero gallery full-bleed and taller so it actually carries the section. */
@media (max-width: 768px) {
  .hero__image--portrait .gallery-wheel {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    border-radius: 0;
    box-shadow: none;
    aspect-ratio: 1 / 1;
  }
  /* Override the legacy single-image cap so slide photos fill the full-bleed wheel. */
  .hero__image--portrait .gallery-wheel__slide img {
    max-width: none;
    margin: 0;
  }
}


/* === Service-card image: thin color tint overlay ============= */
/* Each card gets a different brand tint matching the site palette. */
.service-card__img {
  position: relative;  /* anchor for the ::after overlay */
}

.service-card__img::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: multiply;
}

.services-grid .service-card:nth-child(1) .service-card__img::after {
  background: rgba(99, 199, 162, 0.34);   /* mint  (+20% prominence) */
}
.services-grid .service-card:nth-child(2) .service-card__img::after {
  background: rgba(74, 144, 217, 0.34);   /* electric blue  (+20%) */
}
.services-grid .service-card:nth-child(3) .service-card__img::after {
  background: rgba(240, 100, 77, 0.26);   /* coral  (+20%) */
}


/* Soft radial fade — corners of each gallery photo dissolve into the dark surround */
.gallery-wheel__slide img {
  -webkit-mask-image: radial-gradient(ellipse at center, #000 60%, transparent 100%);
          mask-image: radial-gradient(ellipse at center, #000 60%, transparent 100%);
}


/* Anchor Jackie's circle crop higher so her forehead isn't cut off */
.founder-detail__photo[src*="jackie"] {
  object-position: 50% 20%;
}


/* Anchor specific gallery photos toward the BOTTOM so the bottom edge is visible */
.gallery-wheel__slide img[src*="gallery-11"],
.gallery-wheel__slide img[src*="gallery-14"] {
  object-position: 50% 100%;
}

/* gallery-01 (slide #2): backed off from full-bottom anchor a touch */
.gallery-wheel__slide img[src*="gallery-01"] {
  object-position: 50% 85%;
}


/* Testimonial cite (Lori Perenon block) — gold on the white branches-bg */
.has-branches-bg .testimonial__name,
.has-branches-bg .testimonial__role {
  color: var(--gold);
}


/* === Info card — black-fill testimonial container on light bg ============= */
.info-card {
  max-width: 745px;
  margin: 0 auto;
  padding: 38px 42px;
  border-radius: var(--radius);
  /* Same transparent "frosted glass" + faded edges as the Mission .value-card */
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  -webkit-mask:
    linear-gradient(to right,  transparent, #000 32px, #000 calc(100% - 32px), transparent),
    linear-gradient(to bottom, transparent, #000 28px, #000 calc(100% - 28px), transparent);
  -webkit-mask-composite: source-in;
  mask:
    linear-gradient(to right,  transparent, #000 32px, #000 calc(100% - 32px), transparent),
    linear-gradient(to bottom, transparent, #000 28px, #000 calc(100% - 28px), transparent);
  mask-composite: intersect;
}

/* Tighten + recolor the testimonial layout inside the dark card */
.info-card .testimonial__quote {
  margin-bottom: 24px;
  text-align: center;
  color: #fff;  /* override the .has-branches-bg black-text rule */
  font-size: clamp(1.17rem, 1.7vw, 1.33rem);
  line-height: 1.6;
}

.info-card .testimonial__name {
  font-size: 1.17rem;
}

.info-card .testimonial__role {
  font-size: 1rem;
}

.info-card .testimonial__cite {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}


/* Gold cite text whenever the testimonial lives inside an info-card */
.info-card .testimonial__name,
.info-card .testimonial__role {
  color: var(--gold);
}


/* === Pillar/service/testimonial-card watermark icon (Lucide-style, themed) ============= */
.pillar-card,
.service-card,
.testimonial-card {
  position: relative;
  overflow: hidden;
  /* Defaults: invisible color + no icon. Cards with a modifier class get
     --icon and --icon-color overrides further down. Cards without overrides
     render the ::after but with a transparent background — visually nothing. */
  --icon-color: transparent;
}

.pillar-card::after,
.service-card::after,
.testimonial-card::after {
  content: "";
  position: absolute;
  right: -16px;
  bottom: -16px;
  width: 140px;
  height: 140px;
  opacity: 0.18;
  pointer-events: none;
  -webkit-mask: var(--icon) center / contain no-repeat;
          mask: var(--icon) center / contain no-repeat;
  background-color: var(--icon-color);
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 0;
}

.pillar-card:hover::after,
.service-card:hover::after,
.testimonial-card:hover::after {
  opacity: 0.30;
  transform: translate(-4px, -4px) rotate(-4deg);
}

/* Keep card text/img above the watermark so the icon stays behind */
.pillar-card > *,
.service-card > *,
.testimonial-card > * {
  position: relative;
  z-index: 1;
}

/* Student-review testimonial — graduation-cap watermark in gold */
.testimonial-card--student {
  --icon-color: var(--gold);
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.42 10.922a1 1 0 0 0-.019-1.838L12.83 5.18a2 2 0 0 0-1.66 0L2.6 9.08a1 1 0 0 0 0 1.832l8.57 3.908a2 2 0 0 0 1.66 0z'/%3E%3Cpath d='M22 10v6'/%3E%3Cpath d='M6 12.5V16a6 3 0 0 0 12 0v-3.5'/%3E%3C/svg%3E");
}


/* === Per-card icon assignments (Lucide-style SVG masks) =====================
   Each card sets a --icon (background-mask data URL) on itself and an
   --icon-color matching the page's accent theme. */

/* ----- About — What we stand for (gold) ----- */
.pillars--values .pillar-card { --icon-color: var(--gold); }
.pillars--values .pillar-card:nth-child(1) { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='6'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3C/svg%3E"); }
.pillars--values .pillar-card:nth-child(2) { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
.pillars--values .pillar-card:nth-child(3) { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E"); }

/* ----- Services — Youth (mint) ----- */
.pillars--youth .pillar-card { --icon-color: var(--mint); }
.pillars--youth .pillar-card:nth-child(1) { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E"); }
.pillars--youth .pillar-card:nth-child(2) { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 10v6M2 10l10-5 10 5-10 5z'/%3E%3Cpath d='M6 12v5c3 3 9 3 12 0v-5'/%3E%3C/svg%3E"); }

/* ----- Services — Educators (coral) ----- */
.pillars--educators .pillar-card { --icon-color: var(--coral); }
.pillars--educators .pillar-card:nth-child(1) { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20'/%3E%3C/svg%3E"); }
.pillars--educators .pillar-card:nth-child(2) { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 17l4 4 8-8L19 9'/%3E%3Cpath d='M3 7l4-4 4 4'/%3E%3Cpath d='M9 17v-4l3-3'/%3E%3C/svg%3E"); }

/* ----- News — Trusted sources (electric blue) ----- */
.pillars--sources .pillar-card { --icon-color: var(--electric-blue); }
.pillars--sources .pillar-card:nth-child(1) { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='3' y1='22' x2='21' y2='22'/%3E%3Cline x1='6' y1='18' x2='6' y2='11'/%3E%3Cline x1='10' y1='18' x2='10' y2='11'/%3E%3Cline x1='14' y1='18' x2='14' y2='11'/%3E%3Cline x1='18' y1='18' x2='18' y2='11'/%3E%3Cpolygon points='12 2 20 7 4 7'/%3E%3C/svg%3E"); }
.pillars--sources .pillar-card:nth-child(2) { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-9c0-1.1.9-2 2-2h2'/%3E%3Cpath d='M18 14h-8M15 18h-5M10 6h8v4h-8z'/%3E%3C/svg%3E"); }
.pillars--sources .pillar-card:nth-child(3) { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z'/%3E%3Cpath d='M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z'/%3E%3C/svg%3E"); }
.pillars--sources .pillar-card:nth-child(4) { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 11 18-5v12L3 14v-3z'/%3E%3Cpath d='M11.6 16.8a3 3 0 1 1-5.8-1.6'/%3E%3C/svg%3E"); }

/* ----- Index — How we work service-cards (mint) ----- */
.services-grid .service-card { --icon-color: var(--mint); }
/* Per-card icon-color overrides: pencil = gold, Z mark = logo blue */
.services-grid .service-card:nth-child(2) { --icon-color: var(--gold); }
.services-grid .service-card:nth-child(3) { --icon-color: var(--electric-blue); }
.services-grid .service-card:nth-child(1) { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='3' width='20' height='14' rx='2' ry='2'/%3E%3Cline x1='8' y1='21' x2='16' y2='21'/%3E%3Cline x1='12' y1='17' x2='12' y2='21'/%3E%3C/svg%3E"); }
.services-grid .service-card:nth-child(2) { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 3a2.83 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5z'/%3E%3C/svg%3E"); }
.services-grid .service-card:nth-child(3) { --icon: url("assets/images/z-mark.png"); }


/* === Value statement — large hero-style blocks for Mission/Vision/Promise == */
.value-statement {
  padding-top: 96px;
  padding-bottom: 96px;
  text-align: center;
}

/* Gold text label — no background slab, prominent above the body copy */
.value-statement__label {
  display: block;
  font-family: var(--font-headline);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 800;
  color: var(--gold);
  margin-bottom: 24px;
}

/* Large editorial body copy — these statements should read with weight */
.value-statement__body {
  max-width: 820px;
  margin: 0 auto;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  line-height: 1.4;
  font-weight: 500;
  font-style: italic;   /* matches the testimonial-quote treatment */
  color: var(--off-white);
}

/* On mid-shaded sections (Vision), keep body text crisp */
.value-statement.section--mid .value-statement__body {
  color: var(--off-white);
}

@media (max-width: 768px) {
  .value-statement {
    padding-top: 64px;
    padding-bottom: 64px;
  }
  .value-statement__body {
    font-size: clamp(1.125rem, 5vw, 1.5rem);
  }
}


/* === Value-statements 2-column layout (statements left, image right) ====== */
.value-statements {
  padding-top: 96px;
  padding-bottom: 96px;
  position: relative;   /* anchor for the Z-rain backdrop */
  overflow: hidden;     /* clip drops that fall past the section edges */
}

/* Keep the statements + image above the falling-Z backdrop */
.value-statements > .container {
  position: relative;
  z-index: 1;
}

/* Single host wrapping multiple sections so they share ONE continuous rain */
.z-rain-host {
  position: relative;
  overflow: hidden;
  isolation: isolate;   /* contain the drops' blend to this host's backdrop */
  /* Navy up top, cream from the CTA down, with a CRISP edge at the border.
     The rain layer sits just above this gradient and blends against it, so a
     falling Z flips black↔white exactly as it crosses the thin border line.
     --cream-start (the CTA's offset within the host) is set by script.js. */
  background: linear-gradient(
    to bottom,
    var(--deep-navy) 0,
    var(--deep-navy) var(--cream-start, 72%),
    var(--off-white) var(--cream-start, 72%),
    var(--off-white) 100%
  );
}
.z-rain-host > section {
  position: relative;
  z-index: 1;   /* section content paints above the shared rain */
}
/* Drop the CTA's own cream fill so the host gradient (and the rain over it)
   shows through — this is what lets the rain bleed into the white section. */
.z-rain-host .cta-banner--skyline {
  background: transparent;
}

/* === Z-mark rain — colorful brand marks drifting down behind the text ===== */
.z-rain {
  position: absolute;
  inset: 0;
  /* No z-index on purpose: a z-index here would make .z-rain its own stacking
     context and isolate the drops' difference blend from the host background,
     so a lone Z would have nothing to invert against. Without it, the drops
     blend against the host gradient (and still sit below the z-index:1 sections). */
  pointer-events: none;
  overflow: hidden;
}
.z-rain__drop {
  position: absolute;
  top: 0;
  left: var(--x);
  width: var(--sz);
  height: var(--sz);
  opacity: var(--op);
  background-color: var(--c);
  /* Blend against the host gradient so icons invert from light-on-navy to
     dark-on-cream automatically as they fall across the color boundary. */
  mix-blend-mode: difference;
  /* --mask is set per drop by script.js (Z mark, monitor, or pencil) */
  --mask: url("assets/images/z-mark.png");
  -webkit-mask: var(--mask) center / contain no-repeat;
          mask: var(--mask) center / contain no-repeat;
  will-change: transform;
  animation: z-fall var(--dur) linear var(--delay) infinite;
}
@keyframes z-fall {
  from { transform: translateY(-140px) rotate(var(--rot)); }
  to   { transform: translateY(var(--fall)) rotate(calc(var(--rot) + var(--spin))); }
}
/* Respect reduced-motion: hold a static scattered sprinkle instead of falling */
@media (prefers-reduced-motion: reduce) {
  .z-rain__drop {
    animation: none;
    transform: translateY(var(--rest)) rotate(var(--rot));
  }
}

.value-statements__grid {
  display: grid;
  grid-template-columns: 1fr minmax(0, 660px);
  gap: 56px;
  align-items: center;
}

.value-statements__col {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

/* Stacked variant of value-statement — left-aligned, tighter padding */
.value-statement--stacked {
  padding: 0;
  text-align: left;
}

.value-statement--stacked .value-statement__label {
  margin-bottom: 12px;
}

.value-statement--stacked .value-statement__body {
  margin: 0;
  /* Slightly smaller than the hero-mode version since 3 stack together */
  font-size: clamp(1.125rem, 1.8vw, 1.5rem);
}

.value-statements__image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius);
  /* Bottom-right radial dissolves the right edge into the section; a full-width
     bottom linear fade then feathers the whole bottom edge so the hoodie (and
     the blue tower base) don't end in a hard horizontal cut. Intersect = union
     of both fades. */
  -webkit-mask:
    radial-gradient(85% 160% at 100% 100%, transparent 0%, #000 80%),
    linear-gradient(to top, transparent 0%, #000 22%);
  -webkit-mask-composite: source-in;
          mask:
    radial-gradient(85% 160% at 100% 100%, transparent 0%, #000 80%),
    linear-gradient(to top, transparent 0%, #000 22%);
          mask-composite: intersect;
}

/* Desktop: bleed the image grid out to the browser's right edge. The negative
   margin equals the container's right gutter — half the leftover viewport width
   (container caps at min(92vw, 1600px)) plus the container's 24px padding. */
@media (min-width: 769px) {
  .value-statements__grid {
    margin-right: calc((min(92vw, 1600px) - 100vw) / 2 - 24px);
  }
}

/* Mission / Vision / Promise — transparent "frosted glass" info card:
   a translucent fill with a backdrop blur of whatever sits behind it.
   No image — just a faint glass panel with the light statement text. */
.value-card {
  border-radius: var(--radius);
  padding: clamp(40px, 5vw, 64px);
  display: flex;
  flex-direction: column;
  gap: 40px;
  background: rgba(255, 255, 255, 0.06);   /* mostly transparent fill */
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  /* Fade all four edges out to transparent (feathered glass). Intersecting a
     horizontal + vertical gradient feathers every side; no hard border. */
  -webkit-mask:
    linear-gradient(to right,  transparent, #000 32px, #000 calc(100% - 32px), transparent),
    linear-gradient(to bottom, transparent, #000 28px, #000 calc(100% - 28px), transparent);
  -webkit-mask-composite: source-in;
  mask:
    linear-gradient(to right,  transparent, #000 32px, #000 calc(100% - 32px), transparent),
    linear-gradient(to bottom, transparent, #000 28px, #000 calc(100% - 28px), transparent);
  mask-composite: intersect;
}

@media (max-width: 768px) {
  .value-statements__grid {
    grid-template-columns: 1fr;   /* stack into one column */
    gap: 48px;
  }
  .value-statements__col {
    gap: 32px;
  }
  /* Enlarge the student figure on mobile: full-bleed to the viewport so it
     reads big instead of floating small in the navy band. The bottom-right
     radial mask-fade still applies, so the body cut dissolves into the section. */
  .value-statements__image {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
  .value-statements__image img {
    width: 100%;   /* fade now lives in the base rule (applies on desktop too) */
  }
}


/* === Testimonial-card badge (e.g. "Student review" pill) ============= */
.testimonial-card__badge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px 5px 10px;
  margin-bottom: 16px;
  background: var(--gold);
  color: var(--deep-navy);
  font-family: var(--font-headline);
  font-weight: 800;
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 999px;
  transform: rotate(-2deg);
  box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.7);
  animation: badge-pulse 2.4s ease-in-out infinite;
}

.testimonial-card__badge svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@keyframes badge-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.7); }
  50%      { box-shadow: 0 0 0 10px rgba(212, 175, 55, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .testimonial-card__badge {
    animation: none;
  }
}


/* Inline cite icon (e.g. graduation cap next to a name) */
.cite-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  vertical-align: -3px;
  margin-right: 6px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* Per-testimonial watermark icons (Lucide-style) */

/* Dr. Arika Spencer (adjunct professor) — open book in mint */
.testimonial-card--professor {
  --icon-color: var(--mint);
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z'/%3E%3Cpath d='M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z'/%3E%3C/svg%3E");
}

/* Cindy Murphy (educator) — apple in coral */
.testimonial-card--teacher {
  --icon-color: var(--coral);
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20.94c1.5 0 2.75 1.06 4 1.06 3 0 6-8 6-12.22A4.91 4.91 0 0 0 17 5c-2.22 0-4 1.44-5 2-1-.56-2.78-2-5-2a4.9 4.9 0 0 0-5 4.78C2 14 5 22 8 22c1.25 0 2.5-1.06 4-1.06Z'/%3E%3Cpath d='M10 2c1 .5 2 2 2 5'/%3E%3C/svg%3E");
}

/* SSgt Nichole Helfrich (Oakland Military Institute) — shield in electric blue
   (was a flag; its pole + straight fabric edge read as a stray vertical line on hover) */
.testimonial-card--military {
  --icon-color: var(--electric-blue);
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3C/svg%3E");
}

/* Lori Perenon (educational + philanthropic consultant) — heart in gold */
.testimonial-card--consultant {
  --icon-color: var(--gold);
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.29 1.51 4.04 3 5.5l7 7Z'/%3E%3C/svg%3E");
}


/* === Ways-to-support: benefit-card watermark icons (same system as student-resources) === */
.benefits-grid--support .benefit-card,
.benefits-grid--giving .benefit-card {
  position: relative;
  overflow: hidden;
}

/* News feed cards reuse .service-card but shouldn't carry the How-we-work
   watermark icons — cards past the 3rd have no --icon mask, so the mint
   ::after fills as a solid square. Drop the watermark on news cards. */
.news-card::after {
  display: none;
}

/* News cards: match the site's left-aligned cards, and keep titles/snippets
   clamped so the grid stays uniform instead of one giant card per row.
   The id scope beats the site-wide ".service-card h3/p { text-align:center }". */
.news-card,
#news-feed .news-card h3,
#news-feed .news-card p {
  text-align: left;
}
#news-feed .news-card h3 {
  font-size: 1.125rem;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 3;          /* cap long headlines at 3 lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-card__excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 3;          /* cap the snippet at 3 lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-card__more {
  margin-top: auto;               /* pin "Read article →" to the card bottom */
  padding-top: 14px;
}


/* === Legal document (Privacy Policy) — readable long-form layout ========= */
.legal-doc {
  max-width: 740px;
}
.legal-doc h2 {
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  margin: 56px 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(245, 242, 234, 0.14);
  color: var(--off-white);
}
.legal-doc h2:first-of-type {
  margin-top: 0;
}
.legal-doc p,
.legal-doc li {
  font-size: 1.0625rem;
  line-height: 1.8;
  color: var(--muted-blue);
}
.legal-doc p {
  margin-bottom: 18px;
}
.legal-doc ul {
  margin: 0 0 18px;
  padding-left: 1.35rem;
}
.legal-doc li {
  margin-bottom: 10px;
}
.legal-doc li::marker {
  color: var(--electric-blue);
}
.legal-doc strong {
  color: var(--off-white);
}
.legal-doc a {
  color: var(--electric-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}


/* "Donate ♥" — red heading with a red heart on the giving card */
.donate-title {
  color: #E11D2A;
}
.donate-title__heart {
  margin-left: 0.15em;
}

/* Donate card holds a row of amount buttons, so it is a <div> (not a
   link). Suppress the whole-card hover lift — the buttons inside are the
   real targets — but keep the border highlight for affordance. */
.donate-card:hover { transform: none; }

.donate-amounts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
  position: relative;   /* sit above the card's watermark ::after */
  z-index: 1;
}
.donate-amount {
  flex: 1 1 0;
  min-width: 66px;
  text-align: center;
  padding: 13px 14px;
  border-radius: 10px;
  border: 2px solid var(--electric-blue);
  color: var(--electric-blue);
  font-family: var(--font-headline);
  font-weight: 800;
  font-size: 1.0625rem;
  line-height: 1;
  transition: background var(--transition), color var(--transition), transform var(--transition);
}
.donate-amount:hover {
  background: var(--electric-blue);
  color: #fff;
  transform: translateY(-2px);
}
.donate-amount--custom { border-style: dashed; }
.donate-amount:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

.benefits-grid--support .benefit-card::after,
.benefits-grid--giving .benefit-card::after {
  content: "";
  position: absolute;
  right: -12px;
  bottom: -12px;
  width: 130px;
  height: 130px;
  opacity: 0.18;
  pointer-events: none;
  -webkit-mask: var(--icon) center / contain no-repeat;
          mask: var(--icon) center / contain no-repeat;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.benefits-grid--support .benefit-card:hover::after,
.benefits-grid--giving .benefit-card:hover::after {
  opacity: 0.28;
  transform: translate(-4px, -4px) rotate(-4deg);
}

/* ----- Work with us — electric blue ----- */
.benefits-grid--support .benefit-card::after { background-color: var(--electric-blue); }
.benefits-grid--support .benefit-card:nth-child(1) { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 22v-4a2 2 0 0 0-4 0v4'/%3E%3Cpath d='m2 9 10-7 10 7'/%3E%3Cpath d='M22 22V11a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v11'/%3E%3C/svg%3E"); }
.benefits-grid--support .benefit-card:nth-child(2) { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E"); }
.benefits-grid--support .benefit-card:nth-child(3) { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E"); }
.benefits-grid--support .benefit-card:nth-child(4) { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 11 18-5v12L3 14v-3z'/%3E%3Cpath d='M11.6 16.8a3 3 0 1 1-5.8-1.6'/%3E%3C/svg%3E"); }

/* ----- Help us go further — gold ----- */
.benefits-grid--giving .benefit-card::after { background-color: var(--gold); }
.benefits-grid--giving .benefit-card:nth-child(1) { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.29 1.51 4.04 3 5.5l7 7Z'/%3E%3C/svg%3E"); }
.benefits-grid--giving .benefit-card:nth-child(2) { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z'/%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E"); }

/* =============================================================
   Intro splash — the intro video revealed through the Z logo.
   A full-screen white cover has a Z-shaped hole (mask) that grows
   to "open" the logo into the full video, then fades away.
   Shown once per session (gated by the inline script in index.html).
   ============================================================= */
@property --z {
  syntax: "<length>";
  inherits: false;
  initial-value: 240px;
}
.intro {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #fff;        /* white behind the masked video */
  overflow: hidden;
  display: none;           /* hidden until played (first visit, or replay click) */
}
.intro.is-active { display: block; }
.intro.is-leaving {
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}
.intro__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;       /* fill the screen behind the white cover */
}
/* White cover with a Z-shaped hole: full layer XOR the Z = opaque
   everywhere except the Z, so the video shows through the Z. The hole
   grows, then the whole cover fades to reveal the full video. */
.intro__white {
  position: absolute;
  inset: 0;
  background: #fff;
  --z: 240px;
  -webkit-mask: linear-gradient(#000, #000),
                url("assets/images/z-mark.png") center / var(--z) no-repeat;
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000, #000),
                url("assets/images/z-mark.png") center / var(--z) no-repeat;
  mask-composite: exclude;
}
/* Animation tied to .is-active so re-adding the class restarts the reveal. */
.intro.is-active .intro__white {
  animation: intro-z-open 2.6s cubic-bezier(0.7, 0, 0.25, 1) 0.5s forwards;
}
@keyframes intro-z-open {
  0%, 14% { --z: 240px;  opacity: 1; }   /* hold the logo, video previewing inside the Z */
  100%    { --z: 2800px; opacity: 0; }   /* Z opens + cover fades -> full video */
}
.intro__skip {
  position: absolute;
  bottom: 24px;
  right: 24px;
  z-index: 2;
  padding: 9px 20px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(13, 27, 42, 0.55);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  color: #fff;
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
}
body.intro-open { overflow: hidden; }   /* no scrolling while the splash is up */


/* ===== Accessibility toolbar ================================
   Floating bottom-right widget injected on every page by script.js.
   A round toggle opens a panel with Bionic Reading + Font Size
   controls. Settings persist in localStorage across pages.
   ============================================================= */
.a11y {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1500;          /* above content, below the intro splash (9999) */
  font-family: var(--font-body, inherit);
}

.a11y__toggle {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  background: var(--electric-blue);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(13, 27, 42, 0.28);
  transition: transform var(--transition), background var(--transition);
}
.a11y__toggle:hover { transform: scale(1.06); background: var(--mid-navy); }
.a11y__toggle:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.a11y__toggle svg { width: 26px; height: 26px; fill: currentColor; }

.a11y__panel {
  position: absolute;
  right: 0;
  bottom: 64px;           /* sit just above the toggle */
  width: 260px;
  background: #fff;
  border: 1px solid rgba(13, 27, 42, 0.12);
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(13, 27, 42, 0.22);
  padding: 18px;
  animation: a11y-pop 0.16s ease-out;
}
.a11y__panel[hidden] { display: none; }

@keyframes a11y-pop {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.a11y__title {
  font-family: var(--font-headline);
  font-weight: 800;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--deep-navy);
  margin: 0 0 14px;
}

.a11y__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.a11y__row-label { font-size: 0.875rem; color: var(--deep-navy); font-weight: 500; }

/* Pill switch (Bionic Reading) — a button[role=switch]. */
.a11y__switch {
  position: relative;
  width: 44px;
  height: 24px;
  border-radius: 999px;
  border: none;
  background: rgba(13, 27, 42, 0.22);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--transition);
}
.a11y__switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: transform var(--transition);
}
.a11y__switch[aria-checked="true"] { background: var(--electric-blue); }
.a11y__switch[aria-checked="true"]::after { transform: translateX(20px); }
.a11y__switch:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* Font-size stepper (A− / A / A+). */
.a11y__steps { display: flex; gap: 6px; }
.a11y__step {
  min-width: 34px;
  height: 30px;
  padding: 0 8px;
  border: 1px solid rgba(13, 27, 42, 0.18);
  border-radius: 8px;
  background: #fff;
  color: var(--deep-navy);
  cursor: pointer;
  font-weight: 700;
  line-height: 1;
  transition: background var(--transition), border-color var(--transition);
}
.a11y__step:hover { background: rgba(74, 144, 217, 0.1); border-color: var(--electric-blue); }
.a11y__step:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.a11y__step--sm { font-size: 0.75rem; }
.a11y__step--lg { font-size: 1.05rem; }

.a11y__reset {
  width: 100%;
  margin-top: 4px;
  padding: 8px;
  border: none;
  border-radius: 8px;
  background: rgba(13, 27, 42, 0.06);
  color: var(--mid-navy);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition);
}
.a11y__reset:hover { background: rgba(13, 27, 42, 0.12); }
.a11y__reset:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* The bold lead-fragment of each word when Bionic Reading is on. */
b.a11y-bionic { font-weight: 700; }

@media (max-width: 768px) {
  .a11y { right: 14px; bottom: 14px; }
  .a11y__panel { width: 240px; }
}

@media (prefers-reduced-motion: reduce) {
  .a11y__panel { animation: none; }
  .a11y__toggle:hover { transform: none; }
}