/*
Theme Name: SRCF Volunteer Landing
Theme URI: https://srcf.ca/learning-centres/
Author: Scottish Rite Charitable Foundation of Canada
Description: Single-purpose landing page theme — recruit volunteer tutors for the SRCF Learning Centres for Children (BC, Calgary, Edmonton). Imagery-first, WCAG-AA+, dyslexia-friendly typography.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: srcf-volunteer
*/

/* Atkinson Hyperlegible is enqueued from Google Fonts in functions.php. */

/* ==== tokens/colors.css ==== */
/* ===========================================================================
   COLORS — Scottish Rite Dyslexia Learning Centre
   Primary brand color is the deep Scottish-Rite purple (#4a2583).
   The plum accent is drawn from the bear's scarf.
   Surfaces lean to warm cream rather than stark white to reduce glare for
   dyslexic + low-vision readers (a WCAG / readability decision, not decoration).
   =========================================================================== */
:root {
  /* --- Primary: purple scale --- */
  --purple-950: #1f0f3a;
  --purple-900: #2c1750;
  --purple-800: #3a1d66;
  --purple-700: #4a2583; /* PRIMARY BRAND */
  --purple-600: #5b349a;
  --purple-500: #6f4caf;
  --purple-400: #8d70c2;
  --purple-300: #ad97d3;
  --purple-200: #d0c2e7;
  --purple-100: #e8e0f3;
  --purple-50:  #f4f0fa;

  /* --- Plum accent (the bear's scarf) --- */
  --plum-800: #5f2c49;
  --plum-700: #7d3a60;
  --plum-600: #9c4a78; /* ACCENT */
  --plum-500: #b15c8d;
  --plum-300: #d7a3c0;
  --plum-100: #f3e3ec;

  /* --- Warm neutrals / cream --- */
  --cream-50:  #fdfbf7;
  --cream-100: #fbf7f0; /* default page surface */
  --cream-200: #f4ede1;
  --cream-300: #e9dfce;

  /* --- Ink (never pure black — softens contrast glare) --- */
  --ink-900: #241c33;
  --ink-800: #322a44;
  --ink-700: #4a4458;
  --ink-600: #635d72;
  --ink-500: #7d7789;
  --ink-400: #a39eac;
  --ink-300: #c8c4ce;
  --ink-200: #e4e1e8;
  --ink-100: #f1eff4;
  --white:   #ffffff;

  /* --- Semantic status (all AA on cream/white) --- */
  --success-700: #1f6b3d;
  --success-500: #2e9c5a;
  --success-100: #dcf0e4;
  --warning-700: #8a5a00;
  --warning-500: #c98a1e;
  --warning-100: #fbeed2;
  --danger-700:  #9c2828;
  --danger-500:  #cf3b3b;
  --danger-100:  #f8e0e0;
  --info-700:    #1d5b8a;
  --info-500:    #2f86c2;
  --info-100:    #ddeef9;

  /* ===== Semantic aliases ===== */
  --brand:            var(--purple-700);
  --brand-strong:     var(--purple-800);
  --brand-soft:       var(--purple-100);
  --brand-tint:       var(--purple-50);
  --accent:           var(--plum-600);
  --accent-strong:    var(--plum-700);
  --accent-soft:      var(--plum-100);

  --bg-page:          var(--cream-100);
  --bg-page-alt:      var(--cream-200);
  --surface-card:     var(--white);
  --surface-raised:   var(--cream-50);
  --surface-brand:    var(--purple-700);
  --surface-brand-soft: var(--purple-50);

  --text-strong:      var(--ink-900);
  --text-body:        var(--ink-800);
  --text-muted:       var(--ink-600);
  --text-subtle:      var(--ink-500);
  --text-on-brand:    var(--white);
  --text-link:        var(--purple-700);
  --text-link-hover:  var(--purple-800);

  --border-subtle:    var(--ink-200);
  --border-default:   var(--ink-300);
  --border-strong:    var(--ink-400);
  --border-brand:     var(--purple-700);

  --focus-ring:       var(--purple-700);
  --focus-ring-offset: var(--cream-100);
}

/* ==== tokens/typography.css ==== */
/* ===========================================================================
   TYPOGRAPHY — Atkinson Hyperlegible across the board.
   Sizing leans generous; line-height is deliberately tall and letter/word
   spacing slightly opened up — all dyslexia-readability decisions.
   Body copy should never drop below 18px on screen.
   =========================================================================== */
:root {
  /* Families */
  --font-sans: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  --font-mono: "Atkinson Hyperlegible Mono", ui-monospace, "Cascadia Code", monospace;

  /* Weights (Atkinson ships 400 + 700 only) */
  --weight-regular: 400;
  --weight-bold: 700;

  /* Type scale — comfortable, slightly large for legibility */
  --text-xs:   0.875rem;  /* 14px — captions, fine print only */
  --text-sm:   1rem;      /* 16px — meta, labels */
  --text-base: 1.125rem;  /* 18px — DEFAULT body */
  --text-md:   1.25rem;   /* 20px — lead paragraphs */
  --text-lg:   1.5rem;    /* 24px — h4 / large UI */
  --text-xl:   1.875rem;  /* 30px — h3 */
  --text-2xl:  2.375rem;  /* 38px — h2 */
  --text-3xl:  3rem;      /* 48px — h1 */
  --text-4xl:  3.75rem;   /* 60px — hero display */

  /* Line heights — tall for readability */
  --leading-tight:   1.2;   /* large display headings */
  --leading-snug:    1.35;  /* sub-headings */
  --leading-normal:  1.6;   /* default UI */
  --leading-relaxed: 1.75;  /* body paragraphs — dyslexia-friendly */

  /* Letter & word spacing — slightly opened for legibility */
  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.02em;
  --tracking-caps:   0.08em; /* small-caps / eyebrow labels */
  --word-spacing-body: 0.04em;

  /* Optimal reading measure (line length) */
  --measure: 66ch;
  --measure-narrow: 48ch;

  /* Semantic roles */
  --font-display: var(--font-sans);
  --font-body:    var(--font-sans);
  --font-ui:      var(--font-sans);
}

/* ==== tokens/spacing.css ==== */
/* ===========================================================================
   SPACING, RADII, SHADOWS, MOTION, LAYOUT
   4px base grid. Radii are gently rounded (friendly, child-focused, never
   sharp). Shadows are soft and low-contrast. Motion is calm — short fades,
   no bounces — and always respects prefers-reduced-motion at the app level.
   =========================================================================== */
:root {
  /* Spacing — 4px base unit */
  --space-0:  0;
  --space-1:  0.25rem;  /* 4 */
  --space-2:  0.5rem;   /* 8 */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.5rem;   /* 24 */
  --space-6:  2rem;     /* 32 */
  --space-7:  2.5rem;   /* 40 */
  --space-8:  3rem;     /* 48 */
  --space-9:  4rem;     /* 64 */
  --space-10: 5rem;     /* 80 */
  --space-12: 7rem;     /* 112 */

  /* Radii — soft + friendly */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 28px;
  --radius-pill: 999px;
  --radius-card: var(--radius-lg);

  /* Shadows — soft, tinted with the brand purple, never harsh black */
  --shadow-xs: 0 1px 2px rgba(36, 28, 51, 0.06);
  --shadow-sm: 0 2px 6px rgba(36, 28, 51, 0.08);
  --shadow-md: 0 6px 18px rgba(36, 28, 51, 0.10);
  --shadow-lg: 0 14px 36px rgba(36, 28, 51, 0.14);
  --shadow-focus: 0 0 0 3px var(--cream-100), 0 0 0 6px var(--purple-700);

  /* Border widths */
  --border-thin: 1px;
  --border-med: 2px;
  --border-thick: 3px;

  /* Focus ring — thick + offset, always visible (WCAG 2.4.7 / 2.4.11) */
  --ring-width: 3px;
  --ring-offset: 2px;

  /* Motion — calm, never bouncy */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur-base: 200ms; /* @kind other */
  --dur-slow: 320ms; /* @kind other */

  /* Layout */
  --container-max: 1200px;
  --container-narrow: 760px;
  --content-pad: var(--space-5);
  --tap-target-min: 44px; /* WCAG 2.5.8 minimum hit target */
}

/* ==== tokens/base.css ==== */
/* ===========================================================================
   BASE — light reset + accessible defaults built on the tokens.
   This sets the dyslexia-friendly reading defaults globally: cream surface,
   tall line-height, opened word-spacing, visible focus, no justified text.
   =========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  letter-spacing: var(--tracking-normal);
  word-spacing: var(--word-spacing-body);
  color: var(--text-body);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headings — display family, tight leading, strong ink */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--text-strong);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}
h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); line-height: var(--leading-snug); }
h5 { font-size: var(--text-md); line-height: var(--leading-snug); }
h6 { font-size: var(--text-base); }

p {
  margin: 0 0 var(--space-4);
  max-width: var(--measure);
  text-wrap: pretty;
}

/* Never justify — ragged-right is far easier for dyslexic readers */
p, li, dd, dt, blockquote { text-align: left; }

a {
  color: var(--text-link);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
a:hover { color: var(--text-link-hover); }

strong, b { font-weight: var(--weight-bold); }

ul, ol { padding-left: 1.4em; }
li { margin-bottom: var(--space-2); }

code, kbd, samp, pre { font-family: var(--font-mono); }

img { max-width: 100%; height: auto; }

/* Visible focus everywhere — core accessibility commitment */
:focus-visible {
  outline: var(--ring-width) solid var(--focus-ring);
  outline-offset: var(--ring-offset);
  border-radius: var(--radius-xs);
}

/* Screen-reader-only utility */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Skip link — appears on keyboard focus */
.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  background: var(--surface-brand);
  color: var(--text-on-brand);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  font-weight: var(--weight-bold);
  z-index: 1000;
  transition: top var(--dur-base) var(--ease-out);
}
.skip-link:focus { top: var(--space-4); }

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

/* ==== page styles ==== */

  /* ============ Campaign landing page — mobile-first ============ */
  html { scroll-behavior: smooth; }
  body { background: var(--bg-page); }
  img { display: block; max-width: 100%; }
  .wrap { width: 100%; max-width: 1140px; margin: 0 auto; padding-left: var(--space-5); padding-right: var(--space-5); }
  .eyebrow { font-weight: var(--weight-bold); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--plum-600); margin: 0 0 var(--space-3); }
  .eyebrow.on-dark { color: var(--plum-300); }
  section { scroll-margin-top: 80px; }

  /* --- Buttons --- */
  .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); white-space: nowrap;
    font-family: var(--font-sans); font-weight: var(--weight-bold); font-size: var(--text-base);
    line-height: 1.15; min-height: 52px; padding: 0 28px; border-radius: var(--radius-pill);
    border: 2px solid transparent; cursor: pointer; text-decoration: none;
    transition: background var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
  .btn:active { transform: translateY(1px); }
  .btn-primary { background: var(--purple-700); color: var(--white); border-color: var(--purple-700); }
  .btn-primary:hover { background: var(--purple-800); border-color: var(--purple-800); box-shadow: var(--shadow-md); color: var(--white); }
  .btn-accent { background: var(--plum-600); color: var(--white); border-color: var(--plum-600); }
  .btn-accent:hover { background: var(--plum-700); border-color: var(--plum-700); box-shadow: var(--shadow-md); color: var(--white); }
  .btn-outline { background: var(--white); color: var(--purple-700); border-color: var(--purple-700); }
  .btn-outline:hover { background: var(--purple-50); color: var(--purple-700); }
  .btn-ghost-light { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.6); }
  .btn-ghost-light:hover { background: rgba(255,255,255,0.14); color: var(--white); }
  .btn-block { width: 100%; white-space: normal; }

  /* --- Header --- */
  .site-header { position: sticky; top: 0; z-index: 50; background: var(--cream-100); border-bottom: 1px solid transparent; transition: box-shadow var(--dur-base), border-color var(--dur-base); }
  .site-header.scrolled { border-bottom-color: var(--ink-200); box-shadow: var(--shadow-xs); }
  .header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-top: var(--space-3); padding-bottom: var(--space-3); }
  .brand { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; }
  .brand img { width: 44px; height: 48px; }
  .brand .brand-text { line-height: 1.1; }
  .brand .brand-name { display: block; font-weight: var(--weight-bold); font-size: 0.95rem; color: var(--purple-700); white-space: nowrap; }
  .brand .brand-sub { display: block; font-size: 0.8125rem; color: var(--ink-600); white-space: nowrap; }
  @media (min-width: 1000px) { .brand .brand-name { font-size: var(--text-md); } }
  .header-cta { display: none; }

  /* --- Hero --- */
  .hero { padding-top: var(--space-7); padding-bottom: var(--space-7); }
  .hero-grid { display: grid; gap: var(--space-6); }
  .hero-photo { border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4 / 3; }
  .hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 70% center; }
  .hero h1 { font-size: clamp(2.25rem, 8vw, 3.25rem); margin: 0 0 var(--space-4); color: var(--ink-900); }
  .hero h1 .hl { color: var(--purple-700); }
  .hero-lead { font-size: var(--text-md); color: var(--ink-700); max-width: 40ch; margin: 0 0 var(--space-5); }
  .hero-cta { display: flex; flex-direction: column; gap: var(--space-3); }
  .hero-points { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: grid; gap: var(--space-3); }
  .hero-points li { display: flex; gap: var(--space-3); align-items: center; font-weight: var(--weight-bold); color: var(--ink-800); }
  .hero-points .tick { flex: none; width: 28px; height: 28px; border-radius: var(--radius-pill); background: var(--success-100); color: var(--success-700); display: flex; align-items: center; justify-content: center; }

  /* --- Section heading --- */
  .section-head { max-width: 640px; margin-bottom: var(--space-7); }
  .section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
  .section-head h2 { font-size: clamp(1.75rem, 5vw, 2.375rem); margin: 0 0 var(--space-3); }
  .section-head p { font-size: var(--text-md); color: var(--ink-700); margin: 0; }

  /* --- Benefits (PRIMARY) --- */
  .benefits { padding: var(--space-8) 0; background: var(--surface-card); border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
  .benefit-grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
  .benefit { background: var(--cream-50); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow-xs); }
  .benefit .medal { width: 56px; height: 56px; border-radius: var(--radius-pill); background: var(--purple-50); color: var(--purple-700); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 6px var(--purple-100); margin-bottom: var(--space-4); }
  .benefit h3 { font-size: var(--text-lg); margin: 0 0 var(--space-2); }
  .benefit p { font-size: var(--text-base); color: var(--ink-700); margin: 0; }

  /* --- How it works --- */
  .how { padding: var(--space-8) 0; }
  .how-layout { display: grid; gap: var(--space-6); grid-template-columns: 1fr; align-items: center; }
  .how-grid { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
  /* Brand-consistent photo placeholder (drop a real image in later) */
  .ph { border-radius: var(--radius-xl); overflow: hidden; background: linear-gradient(135deg, var(--purple-100), var(--plum-100)); border: 1px dashed var(--purple-300); display: flex; align-items: center; justify-content: center; text-align: center; color: var(--purple-700); font-weight: var(--weight-bold); padding: var(--space-5); min-height: 240px; box-sizing: border-box; }
  .ph span { opacity: 0.75; font-size: var(--text-sm); line-height: 1.5; }
  .fact { display: flex; gap: var(--space-4); align-items: flex-start; }
  .fact .fi { flex: none; width: 48px; height: 48px; border-radius: var(--radius-md); background: var(--accent-soft); color: var(--plum-700); display: flex; align-items: center; justify-content: center; }
  .fact h3 { font-size: var(--text-md); margin: 0 0 4px; }
  .fact p { font-size: var(--text-base); color: var(--ink-700); margin: 0; }

  /* --- Quote band --- */
  .quote-band { background: var(--surface-brand); color: var(--white); padding: var(--space-9) 0; }
  .quote-band blockquote { margin: 0; max-width: 800px; }
  .quote-band p { font-size: clamp(1.375rem, 4vw, 1.875rem); line-height: var(--leading-snug); color: var(--white); font-weight: var(--weight-bold); margin: 0 0 var(--space-4); }
  .quote-band cite { font-style: normal; color: var(--purple-200); font-size: var(--text-base); }

  /* --- About centres (SECONDARY) --- */
  .about { padding: var(--space-8) 0; background: var(--bg-page-alt); }
  .about-grid { display: grid; gap: var(--space-6); grid-template-columns: 1fr; align-items: center; }
  .stat-row { display: flex; flex-wrap: wrap; align-items: flex-start; row-gap: var(--space-4); margin-top: var(--space-6); }
  .stat { padding: 2px var(--space-5); border-left: 1px solid var(--border-default); }
  .stat:first-child { padding-left: 0; border-left: none; }
  .stat .num { font-size: var(--text-2xl); font-weight: var(--weight-bold); color: var(--purple-700); line-height: 1.1; margin-bottom: var(--space-2); }
  .stat .lbl { font-size: var(--text-sm); color: var(--ink-600); white-space: nowrap; }
  .about-card { background: var(--surface-card); border-radius: var(--radius-lg); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-sm); padding: var(--space-6); }
  .about-card ul { margin: var(--space-2) 0 0; padding-left: 1.2em; color: var(--ink-700); }
  .about-card li { margin-bottom: var(--space-2); }

  /* --- Foundation + video (TERTIARY) --- */
  .foundation { padding: var(--space-8) 0; }
  .foundation-grid { display: grid; gap: var(--space-6); grid-template-columns: 1fr; align-items: center; }
  .video-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); background: var(--purple-100); }
  .video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

  /* --- Centres (conversion) --- */
  .centres { padding: var(--space-8) 0; background: var(--surface-brand-soft); border-top: 1px solid var(--border-subtle); }
  .centre-grid { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
  .centre { display: flex; flex-direction: column; background: var(--surface-card); border-radius: var(--radius-lg); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-md); padding: var(--space-6); }
  .centre .place { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--plum-600); font-weight: var(--weight-bold); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
  .centre h3 { font-size: var(--text-xl); margin: var(--space-2) 0 var(--space-2); }
  .centre p { color: var(--ink-700); margin: 0 0 var(--space-5); flex-grow: 1; }
  .other-centres { margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid var(--border-default); color: var(--ink-700); }
  .other-centres a { color: var(--purple-700); font-weight: var(--weight-bold); }

  /* --- Footer --- */
  .site-footer { background: var(--purple-800); color: var(--cream-100); padding: var(--space-8) 0 var(--space-6); }
  .footer-top { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
  .site-footer .f-brand { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
  .site-footer .f-brand img { width: 220px; height: auto; background: var(--white); border-radius: var(--radius-md); padding: 10px 14px; }
  .site-footer p { color: var(--purple-200); margin: 0; max-width: 46ch; }
  .site-footer a { color: var(--cream-100); }
  .footer-bottom { border-top: 1px solid var(--purple-700); margin-top: var(--space-7); padding-top: var(--space-4); display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); justify-content: space-between; color: var(--purple-300); font-size: var(--text-sm); }

  /* ============ Tablet ============ */
  @media (min-width: 720px) {
    .header-cta { display: inline-flex; }
    .hero-cta { flex-direction: row; }
    .benefit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .how-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .centre-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .how-layout { grid-template-columns: 0.85fr 1.15fr; gap: var(--space-7); }
    .about-grid { grid-template-columns: 1.1fr 0.9fr; }
    .foundation-grid { grid-template-columns: 0.9fr 1.1fr; }
    .footer-top { grid-template-columns: 1.6fr 1fr 1fr; }
  }
  /* ============ Desktop ============ */
  @media (min-width: 1000px) {
    .wrap { padding-left: var(--space-6); padding-right: var(--space-6); }
    .hero { padding-top: var(--space-9); padding-bottom: var(--space-9); }
    .hero-grid { grid-template-columns: 1.05fr 0.95fr; gap: var(--space-8); align-items: center; }
    .hero-photo { aspect-ratio: 5 / 6; }
    .benefit-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .benefits, .how, .about, .foundation, .centres { padding-top: var(--space-10); padding-bottom: var(--space-10); }
  }


  /* ============ V2: imagery-first hero + scroll-over panel ============ */
  @font-face {
    font-family: 'Lexend';
    src: url('assets/Lexend-VariableFont_wght.ttf') format('truetype-variations');
    font-weight: 100 900;
    font-display: swap;
  }
  body { margin: 0; }

  /* --- Sticky hero stack --- */
  .hero-stack { position: sticky; top: 0; z-index: 0; background: var(--cream-100); }

  .masthead { background: var(--cream-100); }
  .masthead-inner { max-width: 1140px; margin: 0 auto; padding: 16px var(--space-5) 8px; display: flex; justify-content: center; }
  .masthead-logo { display: block; }
  .masthead-logo { display: block; }
  .masthead-logo img { width: min(320px, 72vw); height: auto; display: block; }
  .masthead .foundation-link { flex: none; }

  /* --- Eyebrow block above the photo --- */
  .hero-intro { background: var(--cream-100); text-align: center; padding: var(--space-3) var(--space-5) var(--space-5); }
  .hero-intro .line1 { font-family: 'Lexend', var(--font-sans); text-align: center; font-weight: 700; font-size: clamp(1.5rem, 6vw, 2.25rem); color: var(--ink-900); margin: 0 0 var(--space-3); letter-spacing: -0.01em; }
  .chip-row { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-2); }
  .chip { font-family: 'Lexend', var(--font-sans); display: inline-flex; align-items: center; min-height: 44px; padding: 0 22px; border-radius: var(--radius-pill); font-weight: 600; font-size: var(--text-sm); letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; transition: background var(--dur-base) var(--ease-out); }
  .chip-bc { background: var(--purple-100); color: var(--purple-800); }
  .chip-bc:hover { background: var(--purple-200); color: var(--purple-800); }
  .chip-cal { background: var(--plum-100); color: var(--plum-700); }
  .chip-cal:hover { background: var(--plum-200, #ecd3e0); color: var(--plum-700); }
  .chip-edm { background: var(--purple-50); color: var(--purple-700); box-shadow: inset 0 0 0 1px var(--purple-200); }
  .chip-edm:hover { background: var(--purple-100); color: var(--purple-700); }

  /* --- Full-bleed portrait photo --- */
  .hero-photo-full { position: relative; }
  .hero-photo-full img { width: 100%; height: auto; max-height: 78vh; object-fit: cover; object-position: 50% 18%; display: block; }
  @media (max-width: 719px) { .hero-photo-full img { aspect-ratio: 4 / 5; max-height: none; } }

  /* --- Brown table panel (text below the girl) --- */
  .table-panel { background: linear-gradient(180deg, rgb(152,135,120) 0%, rgb(122,103,86) 18%, rgb(94,77,62) 100%); color: var(--white); padding: var(--space-7) 0 calc(var(--space-8) + 28px); margin-top: -2px; }
  .table-panel .wrap { max-width: 720px; text-align: center; }
  .table-panel h1 { font-family: 'Lexend', var(--font-sans); text-align: center; text-wrap: balance; font-size: clamp(1.875rem, 6.2vw, 3rem); line-height: 1.15; color: var(--white); margin: 0 0 var(--space-4); letter-spacing: -0.01em; }
  .table-panel h1 .hl { color: #ffd9a8; white-space: nowrap; }
  .table-panel .lead { text-align: center; font-size: var(--text-md); line-height: var(--leading-relaxed); color: rgba(255,255,255,0.92); max-width: 44ch; margin: 0 auto var(--space-5); }
  .table-panel .hero-cta { justify-content: center; }
  .table-panel .btn-outline { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.7); }
  .table-panel .btn-outline:hover { background: rgba(255,255,255,0.14); color: var(--white); }
  .table-panel .hero-points { max-width: 340px; margin-left: auto; margin-right: auto; text-align: left; }
  .table-panel .hero-points li { color: rgba(255,255,255,0.95); }
  .table-panel .hero-points .tick { background: rgba(255,255,255,0.18); color: #b8f5c9; }

  /* --- Panel that scrolls up over the hero --- */
  .scroll-over { position: relative; z-index: 2; background: var(--bg-page); border-radius: 28px 28px 0 0; box-shadow: 0 -12px 32px rgba(36, 28, 51, 0.22); margin-top: -28px; overflow: hidden; }
  .scroll-over .benefits { border-top: none; }
  .photo-band { padding: 0 0 var(--space-8); background: var(--bg-page); }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
  }