/* Body text face: the system Helvetica Neue (or Helvetica/Arial where it is
    missing), shrunk a touch via size-adjust. Doing it here scales only this
    font - the shared size tokens are also used by the Kufam and Jost text,
    which keeps its size. Tune the percentage to resize all body copy. */
 @font-face {
     font-family: "Body Sans";
     src: local("Helvetica Neue"), local("HelveticaNeue"), local("Helvetica"), local("Arial");
     font-weight: 400;
     size-adjust: 85%;
 }

 @font-face {
     font-family: "Body Sans";
     src: local("Helvetica Neue Medium"), local("HelveticaNeue-Medium"), local("Helvetica Neue"), local("HelveticaNeue"), local("Arial");
     font-weight: 500;
     size-adjust: 85%;
 }

 @font-face {
     font-family: "Body Sans";
     src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"), local("Helvetica Bold"), local("Helvetica-Bold"), local("Arial Bold"), local("Arial-BoldMT");
     font-weight: 600 900;
     size-adjust: 85%;
 }

 /* Root Color Variables and Base Styles */
 :root {
     /* This palette is light by design. Declaring the scheme stops browsers and
        phones in dark mode from auto-inverting the pastels into muddy greys. */
     color-scheme: light;

     /* Primary Colors */
     --primary-pink: #FFBAC6;
     --primary-purple: #B9B8FF;
     --secondary-pink: #DE7A9A;
     --secondary-purple: #655CC9;
     --secondary-pink-70: rgba(222, 122, 154, 0.7);
     --secondary-purple-70: rgba(101, 92, 201, 0.7);
     --secondary-pink-80: rgba(222, 122, 154, 0.8);
     --secondary-purple-80: rgba(101, 92, 201, 0.8);
     --primary-blue: #6990E5;
     --secondary-blue: #A6C7FC;
     --dark-blue: #3a5a9f;
     --background-pink: #FFF0F3;
     --dark-pink: #C35F7F;

     /* Neutral Colors */
     --neutral-50: #F8FAFC;
     --neutral-100: #f1f5f9;
     --neutral-200: #e2e8f0;
     --neutral-300: #cbd5e1;
     --neutral-400: #94a3b8;
     --neutral-500: #64748b;
     --neutral-600: #475569;
     --neutral-700: #334155;
     --neutral-800: #303030;
     --neutral-900: #0f172a;

     /* Semantic Colors */
     --success: #10b981;
     --warning: #fbbf24;
     --error: #ef4444;
     --info: #3b82f6;

     /* Background Colors */
     --bg-white: #ffffff;
     --bg-gray: #f8fafc;
     --bg-dark: #303030;

     /* Surfaces - the whole site uses only these three fills for anything
        smaller than a hero. A card, panel, stat box or form is --surface with
        a --border-light hairline; --surface-muted is the one tint allowed for
        section bands and inset rows. No per-component tints or gradients:
        that is what made small blocks read as a patchwork. */
     --surface: #ffffff;
     --surface-muted: #f8fafc;
     --card-border: 1px solid var(--border-light);

     /* Page rhythm - every content section, section title and item grid on
        the site uses these, so the pages share one vertical beat. */
     --section-space: clamp(5rem, 10vw, 8rem);
     --section-title-size: clamp(2rem, 3.6vw, 2.75rem);
     --section-title-gap: clamp(2rem, 4vw, 3rem);
     --grid-gap: clamp(1.5rem, 3vw, 2.5rem);
     /* Items sit straight on the page - no fills, no boxes. A single hairline
        above each one is all the structure a grid of them needs. */
     --item-rule: 1px solid var(--border-light);
     --item-rule-on-dark: 1px solid rgba(255, 255, 255, 0.18);
     --bg-gradient-primary: linear-gradient(135deg, var(--primary-pink) 0%, var(--secondary-purple) 100%);
     --bg-gradient-secondary: linear-gradient(135deg, var(--secondary-pink), var(--secondary-purple));
     --bg-gradient-secondary-radial: radial-gradient(116% 94% at 50% 90%, var(--secondary-pink-80) 0%, var(--secondary-purple-80) 50%);

     /* Text Colors */
     --text-primary: #303030;
     --text-secondary: #64748b;
     --text-light: #ffffff;
     --text-light-secondary: #e2e8f0;
     --text-dark: #303030;
     --text-muted: #94a3b8;

     /* Border Colors */
     --border-light: #e2e8f0;
     --border-medium: #cbd5e1;
     --border-dark: #475569;
     /* Was #6366f1 - a fourth purple that belonged to no other element
        on the site. Accents come from the brand palette. */
     --border-accent: var(--secondary-purple);

     /* Shadow Colors */
     --shadow-light: rgba(0, 0, 0, 0.1);
     --shadow-medium: rgba(0, 0, 0, 0.15);
     --shadow-heavy: rgba(0, 0, 0, 0.2);
     --shadow-colorful: rgba(99, 102, 241, 0.2);

     /* Ready-made box-shadow values. The page stylesheets ask for these by
        name; without them every `box-shadow: var(--shadow-lg)` was an invalid
        value and the card simply rendered flat. */
     --shadow-sm: 0 2px 8px rgba(48, 48, 48, 0.08);
     --shadow-md: 0 6px 18px rgba(48, 48, 48, 0.12);
     --shadow-lg: 0 16px 40px rgba(48, 48, 48, 0.14);
     --shadow-brand: 0 10px 24px rgba(101, 92, 201, 0.28);

     /* Spacing Scale */
     --spacing-xs: 0.25rem;
     /* 4px */
     --spacing-sm: 0.5rem;
     /* 8px */
     --spacing-md: 1rem;
     /* 16px */
     --spacing-lg: 1.5rem;
     /* 24px */
     --spacing-xl: 2rem;
     /* 32px */
     --spacing-2xl: 3rem;
     /* 48px */
     --spacing-3xl: 4rem;
     /* 64px */
     --spacing-4xl: 6rem;
     /* 96px */

     /* Shared left/right inset for nav, hero, page content, and footer */
     --page-gutter: var(--spacing-3xl);

     /* Border Radius */
     --radius-sm: 8px;
     --radius-md: 15px;
     --radius-lg: 20px;
     --radius-xl: 25px;
     --radius-2xl: 30px;

     /* Typography */
     --font-family: "Body Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
     /* Display font: used for the logo, headings and other accents.
        Kufam is loaded from Google Fonts on every page. */
     --font-display: "Kufam", "Trebuchet MS", "Helvetica Neue", sans-serif;
     /* Section titles (every h2). Kufam has a true bold, so it needs no
        faked stroke. Loaded from Google Fonts on every page. */
     --font-heading: "Kufam", "Jost", "Helvetica Neue", Arial, sans-serif;
     /* Used for the smaller headings and labels. */
     --font-serif: "Jost", "Helvetica Neue", Arial, sans-serif;
     /* Optional extra weight for display elements. Kufam has a real bold, so
        it needs none; raise it here to thicken every display element. */
     --display-stroke: 0em;
     /* The px notes are the rendered size at the 16px root.
        Note that --font-size-lg is deliberately a touch *smaller* than
        --font-size-base: it is the nav/label size, not a step up from body
        copy. Read the numbers, not the names, before reusing one. */
     --font-size-xs: 0.9rem;
     /* 14px */
     --font-size-sm: 1.1rem;
     /* 18px */
     --font-size-base: 1.3rem;
     /* 21px */
     --font-size-lg: 1.2rem;
     /* 19px */
     --font-size-xl: 1.35rem;
     /* 22px */
     --font-size-2xl: 1.5rem;
     /* 24px */
     --font-size-3xl: 1.875rem;
     /* 30px */
     --font-size-4xl: 2.25rem;
     /* 36px */
     --font-size-5xl: 3rem;
     /* 48px */
     --font-size-6xl: 3.75rem;
     /* 60px */

     /* Font Weights */
     --font-weight-light: 300;
     --font-weight-normal: 400;
     --font-weight-medium: 500;
     --font-weight-semibold: 600;
     --font-weight-bold: 700;
     --font-weight-extrabold: 800;

     /* Line Heights */
     --line-height-tight: 1.1;
     --line-height-normal: 1.25;
     --line-height-relaxed: 1.3;

     /* Transitions */
     --transition-fast: 0.15s ease;
     --transition-normal: 0.3s ease;
     --transition-slow: 0.5s ease;

     /* Z-Index Scale */
     --z-dropdown: 1000;
     --z-sticky: 1020;
     --z-fixed: 1030;
     --z-modal-backdrop: 1040;
     --z-modal: 1050;
     --z-popover: 1060;
     --z-tooltip: 1070;

     /* Container Max Widths */
     --container-sm: 640px;
     --container-md: 768px;
     --container-lg: 1024px;
     --container-xl: 1200px;
     --container-2xl: 1400px;
     /* Width of the section content column, gutters included. */
     --content-max: 1200px;
 }

 @media (min-width: 769px) and (max-width: 1100px) {
     :root {
         --page-gutter: var(--spacing-2xl);
     }
 }

 @media (max-width: 768px) {
     :root {
         /* viewport-fit=cover lets the page run under a landscape notch, so
            never let the gutter be narrower than the safe area. */
         --page-gutter: max(var(--spacing-md), env(safe-area-inset-left), env(safe-area-inset-right));
     }
 }

 /* Base Reset */
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     /* background-color: var(--bg-white); */
 }

 /* More comprehensive reset for consistent sizing */
 html {
     font-size: 16px; /* Force 16px base font size */
     -webkit-text-size-adjust: 100%; /* Prevent iOS font scaling */
     -ms-text-size-adjust: 100%;
     text-size-adjust: 100%;
 }

 /* Prevent text scaling and ensure consistent sizing */
 * {
     -webkit-text-size-adjust: none;
     -moz-text-size-adjust: none;
     -ms-text-size-adjust: none;
     text-size-adjust: none;
 }

 /* Ensure consistent font rendering across browsers */
 body, input, button, textarea, select {
     font-family: var(--font-family);
     font-size: var(--font-size-base);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     text-rendering: optimizeLegibility;
 }

 body {
     font-size: var(--font-size-base); /* Explicit value instead of the CSS variable */
     line-height: 1.25;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
 }

 /* Base Typography */
 body {
     font-family: var(--font-family);
     font-size: var(--font-size-base); /* Explicit value instead of the CSS variable */
     line-height: var(--line-height-normal);
     color: var(--text-primary);
     background-color: var(--surface);
     overflow-x: hidden;
 }

 /* Base Headings */
 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
     font-weight: var(--font-weight-bold);
     line-height: var(--line-height-tight);
     /* color: var(--text-dark); */
     margin-bottom: var(--spacing-md);
 }

 /* Page titles: Kufam */
 h1 {
     font-family: var(--font-display);
     letter-spacing: 0.01em;
     font-weight: var(--font-weight-extrabold);
     -webkit-text-stroke: var(--display-stroke) currentColor;
 }

 /* Section titles: Kufam Bold */
 h2 {
     font-family: var(--font-heading);
     font-weight: var(--font-weight-bold);
     letter-spacing: 0;
 }

 /* Smaller titles: Jost */
 h3,
 h4,
 h5,
 h6 {
     font-family: var(--font-serif);
     letter-spacing: 0;
     font-weight: var(--font-weight-semibold);
 }

 h1 {
     font-size: var(--font-size-5xl);
 }

 h2 {
     font-size: var(--font-size-4xl);
 }

 h3 {
     font-size: var(--font-size-3xl);
 }

 h4 {
     font-size: var(--font-size-2xl);
 }

 h5 {
     font-size: var(--font-size-xl);
 }

 h6 {
     font-size: var(--font-size-lg);
 }

 /* Base Paragraphs */
 p {
     margin-bottom: var(--spacing-md);
     line-height: 1.25;
     /* color: var(--text-secondary); */
 }

 /* Base Links */
 a {
     text-decoration: none;
     transition: color var(--transition-normal);
 }

 /* Base Buttons */
 button {
     font-family: var(--font-family);
     cursor: pointer;
     border: none;
     outline: none;
     transition: all var(--transition-normal);
 }

 /* Base Lists */
 ul,
 ol {
     /* margin-bottom: var(--spacing-md); */
     padding-left: var(--spacing-lg);
 }

 li {
     /* margin-bottom: var(--spacing-sm); */
     color: var(--text-secondary);
 }

 /* Base Form Elements */
 input,
 textarea,
 select {
     font-family: var(--font-family);
     font-size: var(--font-size-base);
     border: 2px solid var(--border-light);
     border-radius: var(--radius-md);
     padding: var(--spacing-md);
     transition: border-color var(--transition-normal);
 }

 input:focus,
 textarea:focus,
 select:focus {
     outline: none;
 }

 /* Utility Classes */
 .text-center {
     text-align: center;
 }

 .text-left {
     text-align: left;
 }

 .text-right {
     text-align: right;
 }

 .text-primary {
     color: var(--text-primary);
 }

 .text-secondary {
     color: var(--text-secondary);
 }

 .text-muted {
     color: var(--text-muted);
 }

 .text-light {
     color: var(--text-light);
 }

 .text-light-secondary {
     color: var(--text-light-secondary);
 }

 .text-dark {
     color: var(--text-dark);
 }

 .bg-white {
     background-color: var(--bg-white);
 }

 .bg-gray {
     background-color: var(--surface-muted);
 }

 .bg-dark {
     background-color: var(--bg-dark);
 }

 .bg-gradient-primary {
     background: var(--bg-gradient-primary);
 }

 .bg-gradient-secondary {
     background: var(--bg-gradient-secondary);
 }

 .border-light {
     border-color: var(--border-light);
 }

 .border-medium {
     border-color: var(--border-medium);
 }

 .border-dark {
     border-color: var(--border-dark);
 }

 .border-accent {
     border-color: var(--border-accent);
 }

 .shadow-light {
     box-shadow: 0 4px 6px var(--shadow-light);
 }

 .shadow-medium {
     box-shadow: 0 10px 15px var(--shadow-medium);
 }

 .shadow-heavy {
     box-shadow: 0 20px 25px var(--shadow-heavy);
 }

 .rounded-sm {
     border-radius: var(--radius-sm);
 }

 .rounded-md {
     border-radius: var(--radius-md);
 }

 .rounded-lg {
     border-radius: var(--radius-lg);
 }

 .rounded-xl {
     border-radius: var(--radius-xl);
 }

 .transition-fast {
     transition: all var(--transition-fast);
 }

 .transition-normal {
     transition: all var(--transition-normal);
 }

 .transition-slow {
     transition: all var(--transition-slow);
 }

 /* Responsive Container — same full-bleed gutters as the nav and hero */
 /* Section content sits in a slightly narrower, centred column. The nav and
    footer don't use .container, and the heroes opt back out below, so those
    still run edge to edge. */
 .container {
     width: 100%;
     max-width: var(--content-max);
     margin: 0 auto;
     padding: 0 var(--page-gutter);
 }

 .hero > .container,
 .breath-hero .container {
     max-width: none;
 }

 /* Shared section title. :where() keeps this at element specificity, so a
    page only needs its own rule where it genuinely differs. */
 :where(main section:not(.hero)) h2:not(.stat-number) {
     font-size: var(--section-title-size);
     line-height: 1.1;
     margin-bottom: var(--section-title-gap);
     text-align: center;
 }

 /* Interior page hero - every hero is 70vh tall with its content vertically
    centred, so the banner is the same height on every page.
    Each page supplies only its own background in its own stylesheet.
    Column direction because some heroes (contact, cant-sleep) stack several
    children directly rather than wrapping them in a .container.
    Padding is kept light so the tallest hero content (cant-sleep, 325px) still
    fits inside 70vh, while the top padding keeps it clear of the fixed navbar. */
 .hero {
     min-height: 70vh;
     padding: 6rem 0 2rem;
     display: flex;
     flex-direction: column;
     justify-content: center;
     position: relative;
 }

 /* A flex item with an auto cross-axis margin refuses to stretch, so children
    like .container or .search-container would otherwise shrink to their text.
    Giving them full width lets their own max-width and margin: 0 auto centre
    them exactly as they did in the previous block layout. */
 .hero > * {
     width: 100%;
 }

 .hero h1 {
     font-size: clamp(2.25rem, 5vw, 3.5rem);
     font-weight: var(--font-weight-bold);
     margin-bottom: 1rem;
 }

 .hero-subtitle {
     font-size: var(--font-size-base);
     opacity: 0.9;
     max-width: 600px;
     margin: 0;
 }

 /* Split banner hero (about, research, sleep kits, donation, contact):
    the title anchors the bottom-left and the subtitle sits bottom-right in a
    narrow column, so the two read as one line across the bottom of the banner.
    The home hero is left-aligned in a row; cant-sleep keeps a centred headline. */
 .hero.hero-split {
     justify-content: flex-end;
     text-align: left;
 }

 .hero.hero-split > .container {
     display: flex;
     flex-wrap: nowrap;
     align-items: flex-end;
     justify-content: space-between;
     gap: var(--spacing-md) var(--spacing-2xl);
 }

 .hero.hero-split h1 {
     /* A narrow column, so the title stacks into a few short lines instead of
        running most of the way across the banner. Cap the width so the
        larger type still leaves room for the subtitle on the right. */
     flex: 1 1 auto;
     max-width: min(16ch, 58%);
     min-width: 0;
     margin-bottom: 0;
     font-size: clamp(3.75rem, 9vw, 6.75rem);
     line-height: 1.05;
 }

 .hero.hero-split .hero-subtitle {
     flex: 0 1 auto;
     max-width: min(28ch, 40%);
     margin: 0 0 0 auto;
     font-size: var(--font-size-4xl);
     font-weight: var(--font-weight-bold);
     line-height: 1.1;
     text-align: right;
 }

 /* Narrow screens have no room for two columns - stack them, both left aligned. */
 @media (max-width: 768px) {
     .hero.hero-split > .container {
         display: block;
     }

     .hero.hero-split h1 {
         max-width: none;
         margin-bottom: var(--spacing-md);
     }

     .hero.hero-split .hero-subtitle {
         max-width: none;
         text-align: left;
     }
 }

 /* Responsive Breakpoints */
 @media (max-width: 640px) {
     h1 {
         font-size: var(--font-size-4xl);
     }

     h2 {
         font-size: var(--font-size-3xl);
     }

     h3 {
         font-size: var(--font-size-2xl);
     }
 }

@media (max-width: 768px) {
    /* Improve touch targets for mobile */
    button, .btn, input, textarea, select {
        min-height: 44px;
        min-width: 44px;
    }

    /* Better spacing for mobile */
    h1 {
        font-size: var(--font-size-4xl);
        margin-bottom: var(--spacing-lg);
    }

    h2 {
        font-size: var(--font-size-3xl);
        margin-bottom: var(--spacing-lg);
    }

    h3 {
        font-size: var(--font-size-2xl);
        margin-bottom: var(--spacing-md);
    }

    p {
        margin-bottom: var(--spacing-md);
        line-height: 1.25;
    }
}


 /* Navbar Styles - Shared across all pages */
 .navbar {
     position: fixed;
     top: 0;
     width: 100%;
     background: transparent;
     backdrop-filter: none;
     z-index: var(--z-fixed);
     padding: var(--spacing-md) 0 var(--spacing-md);
     border-bottom: none;
     transition: all var(--transition-slow);
     color: var(--text-light);
 }

 .navbar.scrolled {
     background: rgba(255, 255, 255, 0.7);
     backdrop-filter: blur(30px);
     border-bottom: 1px solid rgba(255, 255, 255, 0.3);
     color: var(--text-dark);
     box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
 }

 /* Dark nav over a light hero. This one rule stays the winner with or without
    .scrolled, so the ink never restarts a transition from white. */
 .navbar.navbar-on-light {
     color: var(--text-dark);
 }

 .navbar.navbar-on-light:not(.scrolled) {
     background: transparent;
     backdrop-filter: none;
     box-shadow: none;
     border-bottom: none;
 }

 .navbar.navbar-on-light .logo,
 .navbar.navbar-on-light .logo:hover,
 .navbar.navbar-on-light .logo:visited {
     color: var(--text-dark);
 }

 .navbar.navbar-on-light:not(.scrolled) .donate-btn {
     background: var(--bg-dark);
     color: var(--text-light);
 }

 .nav-container {
     width: 100%;
     margin: 0;
     display: flex;
     justify-content: space-between;
     align-items: flex-end;
     gap: var(--spacing-xl);
     padding: 0 var(--page-gutter);
     /* Nav link size; the donate pill reads it to line up with the links. */
     --nav-link-size: var(--font-size-lg);
 }

 .logo {
     display: flex;
     align-items: flex-end;
     gap: var(--spacing-sm);
     /* Color follows .navbar — a second transition here made the wordmark lag. */
     transition: none;
     font-family: var(--font-display);
     font-size: var(--font-size-lg);
     font-weight: var(--font-weight-extrabold);
     letter-spacing: 0.02em;
     -webkit-text-stroke: var(--display-stroke) currentColor;
     color: inherit;
     text-decoration: none;
     cursor: pointer;
 }

 /* The logo links home, so it must not pick up the default link colour. */
 .logo:hover,
 .logo:visited,
 .navbar.scrolled .logo,
 .navbar.scrolled .logo:hover,
 .navbar.scrolled .logo:visited {
     color: inherit;
 }

 .logo:focus-visible,
 .mobile-logo:focus-visible {
     outline: 2px solid currentColor;
     outline-offset: 4px;
     border-radius: var(--radius-sm);
 }

 .logo img {
     position: relative;
     top: 4px;
     height: 40px;
     width: auto;
     object-fit: contain;
 }

 .cloud-logo {
     height: 20px;
     width: 20px;
 }

 .nav-links {
     display: flex;
     align-items: center;
     /* Pushes the links and the donate button together at the far right. */
     margin-left: auto;
     list-style: none;
     gap: var(--spacing-lg);
     color: var(--text-light);
     transition: all var(--transition-slow);

 }

 .nav-links a {
     position: relative;
     display: inline-block;
     /* Tight line box keeps the hover underline right under the letters. */
     line-height: 1.2;
     padding-bottom: 2px;
     white-space: nowrap;
     text-decoration: none;
     font-size: var(--nav-link-size);
     font-weight: var(--font-weight-medium);
     transition: all var(--transition-slow);
     color: var(--text-light);
 }

 /* Underline grows out from the centre instead of snapping in */
 .nav-links a::after {
     content: '';
     position: absolute;
     left: 0;
     right: 0;
     bottom: 0;
     height: 2px;
     border-radius: 2px;
     background: currentColor;
     transform: scaleX(0);
     transform-origin: center;
     transition: transform var(--transition-normal);
 }

 .nav-links a:hover::after,
 .nav-links a:focus-visible::after,
 .nav-links a.active::after {
     transform: scaleX(1);
 }

 .navbar.scrolled .nav-links a,
 .navbar.scrolled .nav-links a:hover,
 .navbar.scrolled .nav-links a:focus,
 .navbar.scrolled .nav-links a:focus-visible,
 .navbar.scrolled .nav-links a:active,
 .navbar.scrolled .nav-links a:visited {
     color: var(--text-dark);
 }

 /* Nav links keep their colour on hover - no colour shift. */
 .nav-links a:hover,
 .nav-links a:focus,
 .nav-links a:focus-visible,
 .nav-links a:active,
 .nav-links a:visited {
     color: var(--text-light);
 }

 /* Light pages (Research, About, Sleep Kits, Contact): these links stay dark
    in every state. Listed after the white hover rule, and repeated with
    .scrolled, so neither hover nor scroll can paint them white. */
 .navbar.navbar-on-light .nav-links a,
 .navbar.navbar-on-light .nav-links a:hover,
 .navbar.navbar-on-light .nav-links a:focus,
 .navbar.navbar-on-light .nav-links a:focus-visible,
 .navbar.navbar-on-light .nav-links a:active,
 .navbar.navbar-on-light .nav-links a:visited,
 .navbar.navbar-on-light.scrolled .nav-links a,
 .navbar.navbar-on-light.scrolled .nav-links a:hover,
 .navbar.navbar-on-light.scrolled .nav-links a:focus,
 .navbar.navbar-on-light.scrolled .nav-links a:focus-visible,
 .navbar.navbar-on-light.scrolled .nav-links a:active,
 .navbar.navbar-on-light.scrolled .nav-links a:visited {
     color: var(--text-dark);
     transition: none;
 }

 .nav-links a.active {
     font-weight: var(--font-weight-semibold);
 }

 .donate-btn {
     font-family: var(--font-display);
     letter-spacing: 0.02em;
     -webkit-text-stroke: var(--display-stroke) currentColor;
     font-size: var(--font-size-sm);
     background: var(--bg-white);
     color: var(--secondary-purple);
     border: none;
     /* Extra room above the text in the pill. */
     --donate-pad-extra: 0.2rem;
     padding: calc(var(--spacing-xs) + var(--donate-pad-extra)) var(--spacing-md) var(--spacing-xs);
     border-radius: var(--radius-xl);
     font-weight: var(--font-weight-extrabold);
     cursor: pointer;
     transition: all var(--transition-slow);
     /* Centre the pill on the nav link text. The bar bottom-aligns its items,
        so lift the pill by the gap between its centre and the links' centre
        (link line = --nav-link-size x 1.2 + 2px underline gap). The extra top
        padding raises the centre by half its height, so drop it back by that. */
     line-height: 1.2;
     margin-bottom: calc(2px + (var(--nav-link-size) - var(--font-size-sm)) * 0.6 - var(--spacing-xs) - var(--donate-pad-extra) / 2);
 }

 .navbar.scrolled .donate-btn {
     background: var(--bg-dark);
     color: var(--text-light);
 }

 .donate-btn:hover {
     transform: translateY(-2px);
 }

 /* Tablet-to-small-desktop: the bar is tight, so ease the nav back down a step.
    --font-size-sm is the step below the nav's usual --font-size-lg;
    --font-size-base is *larger* than both, so it used to grow the bar here. */
 @media (min-width: 769px) and (max-width: 1100px) {
     .nav-links {
         gap: var(--spacing-md);
     }

     .nav-container {
         --nav-link-size: var(--font-size-sm);
     }

     .logo {
         font-size: var(--font-size-sm);
     }
 }

 /* Small tablets (iPad portrait, narrow laptop windows): even at the smaller
    link size, the wordmark + six links + donate need ~860px, so the donate
    pill was pushed off-screen. Keep just the logo mark and tighten the bar's
    inset. The link keeps its aria-label, so the name is still announced. */
 @media (min-width: 769px) and (max-width: 999px) {
     .nav-container {
         padding: 0 var(--spacing-lg);
     }

     .logo span {
         display: none;
     }

     /* Four footer columns are too narrow here; use a 2x2 grid. */
     .footer-content {
         grid-template-columns: repeat(2, minmax(0, 1fr));
     }
 }

 /* Footer Styles - Shared across all pages */
 .footer {
     background: var(--bg-dark);
     color: var(--text-light);
     /* Footer copy runs a step under body size; the Jost headings and the
        logo set their own sizes. */
     font-size: var(--font-size-lg);
     /* Footer content sits directly in the footer rather than in a .container,
        so the footer itself carries the horizontal padding. */
     padding: var(--spacing-3xl) var(--page-gutter) var(--spacing-xl);
 }

 .footer-content {
     display: grid;
     grid-template-columns: 2fr 1fr 1fr 1.5fr;
     gap: var(--spacing-2xl);
     margin-bottom: var(--spacing-2xl);
 }

 .footer-section h4 {
     color: var(--text-light);
     font-size: var(--font-size-lg);
     font-weight: var(--font-weight-semibold);
     margin-bottom: var(--spacing-lg);
     position: relative;
 }

 .footer-section h4::after {
     content: '';
     position: absolute;
     bottom: -8px;
     left: 0;
     width: 30px;
     height: 2px;
     background: var(--secondary-pink);
 }

 .footer-logo {
     display: flex;
     align-items: center;
     gap: var(--spacing-sm);
     font-family: var(--font-display);
     letter-spacing: 0.02em;
     -webkit-text-stroke: var(--display-stroke) currentColor;
     font-size: var(--font-size-xl);
     font-weight: var(--font-weight-extrabold);
     margin-bottom: var(--spacing-md);
 }

 .footer-logo img {
     height: 35px;
     width: auto;
     object-fit: contain;
 }

 .footer-mission {
     color: var(--text-light-secondary);
     line-height: 1.25;
     margin-bottom: var(--spacing-lg);
     max-width: 300px;
 }

 .social-links {
     display: flex;
     gap: var(--spacing-md);
 }

 .social-links a {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 40px;
     height: 40px;
     background: rgba(255, 255, 255, 0.1);
     border-radius: 50%;
     color: var(--text-light);
     transition: all var(--transition-normal);
 }

 .social-links a:hover {
     background: var(--bg-white);
     color: var(--bg-dark);
     transform: translateY(-2px);
 }

 .footer-links {
     list-style: none;
     padding: 0;
 }

 .footer-links li {
     margin-bottom: var(--spacing-sm);
 }

 .footer-links a {
     color: var(--text-light-secondary);
     text-decoration: none;
     display: inline-block;
     position: relative;
     line-height: 1.2;
     padding-bottom: 2px;
 }

 .footer-links a::after {
     content: '';
     position: absolute;
     left: 0;
     right: 0;
     bottom: 0;
     height: 1px;
     background: currentColor;
     transform: scaleX(0);
     transform-origin: center;
     transition: transform var(--transition-normal);
 }

 .footer-links a:hover::after,
 .footer-links a:focus-visible::after {
     transform: scaleX(1);
 }

 .contact-info p {
     display: flex;
     align-items: center;
     gap: var(--spacing-sm);
     margin-bottom: var(--spacing-sm);
     color: var(--text-light-secondary);
     /* The email is one long word; let it break rather than widen the page. */
     overflow-wrap: anywhere;
 }

 .contact-info a {
     display: inline-flex;
     align-items: center;
     gap: var(--spacing-sm);
     min-width: 0;
     overflow-wrap: anywhere;
     color: inherit;
     text-decoration: none;
     transition: color var(--transition-fast);
 }

 .contact-info a:hover,
 .contact-info a:focus-visible {
     color: var(--text-light);
 }

 .contact-info i {
     color: var(--secondary-pink);
     width: 16px;
     text-align: center;
     flex-shrink: 0;
 }

 .footer-actions {
     display: flex;
     flex-direction: column;
     gap: var(--spacing-sm);
     margin-top: var(--spacing-lg);
 }

 .donate-link{
     display: inline-block;
     padding: var(--spacing-sm) var(--spacing-lg);
     border-radius: var(--radius-lg);
     text-decoration: none;
     font-weight: var(--font-weight-medium);
     text-align: center;
     transition: all var(--transition-normal);
 }

 .donate-link {
     background: var(--bg-dark);
     color: var(--text-light);
 }

 .footer-bottom {
     border-top: 1px solid rgba(255, 255, 255, 0.1);
     padding-top: var(--spacing-lg);
 }

 .footer-bottom-content {
     display: flex;
     justify-content: space-between;
     align-items: center;
 }

 .footer-bottom p {
     color: var(--text-light-secondary);
     margin: 0;
 }

 /* Mobile responsive footer */
 @media (max-width: 768px) {
     .footer {
         padding: var(--spacing-xl) var(--page-gutter) var(--spacing-lg);
     }
     
     .footer-content {
         grid-template-columns: 1fr;
         gap: var(--spacing-lg);
         text-align: left;
     }

     .footer-section h4::after {
         left: 0;
         transform: none;
     }

     .footer-mission {
         max-width: 100%;
         font-size: var(--font-size-lg);
         line-height: 1.25;
         text-align: left;
     }

     .social-links {
         justify-content: flex-start;
         gap: var(--spacing-md);
     }
     
     .social-links a {
         width: 40px;
         height: 40px;
         font-size: var(--font-size-lg);
     }

     .footer-bottom-content {
         flex-direction: column;
         gap: var(--spacing-md);
         text-align: left;
     }

     /* Hide less important footer sections on mobile */
     .footer-section:nth-child(3),
     .footer-section:nth-child(4) {
         display: none;
     }
     
     /* Simplify contact info */
     .contact-info p {
         font-size: var(--font-size-lg);
         margin-bottom: var(--spacing-sm);
     }
     
     .contact-info i {
         font-size: var(--font-size-sm);
         margin-right: var(--spacing-sm);
     }
     
     /* Mobile footer logo adjustments */
     .footer-logo {
         margin-bottom: var(--spacing-md);
     }
     
     .footer-logo img {
         height: 32px;
     }
     
     .footer-logo span {
         font-size: var(--font-size-lg);
     }
     
     /* Mobile footer links spacing */
     .footer-links li {
         margin-bottom: var(--spacing-sm);
     }
     
     .footer-links a {
         font-size: var(--font-size-lg);
         padding: var(--spacing-xs) 0;
     }
     
     /* Mobile footer bottom */
     .footer-bottom {
         padding-top: var(--spacing-md);
         margin-top: var(--spacing-lg);
         border-top: 1px solid rgba(255, 255, 255, 0.2);
     }
     
     .footer-bottom p {
         font-size: var(--font-size-lg);
     }
 }

/* Mobile responsive navbar */
@media (max-width: 768px) {
    .navbar {
        padding: var(--spacing-md) 0;
        min-height: 64px;
    }

    .nav-links {
        display: none;
    }

    .nav-container {
        gap: var(--spacing-md);
    }

    .donate-btn {
        display: none;
    }

    .logo {
        /* Phone bars are narrow - keep the wordmark on one line beside the mark. */
        height: auto;
        align-items: center;
        font-size: var(--font-size-lg);
        font-weight: var(--font-weight-bold);
    }

    .logo img {
        height: 44px;
    }

    .mobile-menu-toggle {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 14px;
        height: 12px;
        background: none;
        border: none;
        cursor: pointer;
        padding: 6px;
        margin: 0;
    }

    .mobile-menu-toggle span {
        width: 100%;
        height: 2.5px;
        background: var(--text-light);
        transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        border-radius: 1px;
        transform-origin: center;
    }

    .navbar.scrolled .mobile-menu-toggle span,
    .navbar.navbar-on-light .mobile-menu-toggle span {
        background: var(--text-dark);
    }

    .mobile-menu-toggle.active span:nth-child(1) {
        transform: rotate(45deg) translate(2px, 2px);
    }

    .mobile-menu-toggle.active span:nth-child(2) {
        opacity: 0;
        transform: scaleX(0.8);
    }

    .mobile-menu-toggle.active span:nth-child(3) {
        transform: rotate(-45deg) translate(2px, -2px);
    }
}
 
/* Mobile Menu Overlay */
.mobile-menu-overlay {
    position: fixed;
    top: 0px;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-dark);
    z-index: var(--z-fixed);
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
}

.mobile-menu-overlay.active {
    opacity: 1;
    visibility: visible;
}

.mobile-menu-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 40vh;
    padding: var(--spacing-lg) var(--spacing-md);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding-top: var(--spacing-xl);
    transform: translateY(-10px);
    transition: transform 0.2s ease;
}

.mobile-menu-overlay.active .mobile-menu-content {
    transform: translateY(0);
}
 
.mobile-menu-header {
    position: absolute;
    top: var(--spacing-md);
    left: var(--spacing-md);
    right: var(--spacing-md);
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: calc(100% - 2 * var(--spacing-md));
}

.mobile-logo {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    color: var(--text-light);
    text-decoration: none;
    cursor: pointer;
}

.mobile-logo:hover,
.mobile-logo:visited {
    color: var(--text-light);
}

.mobile-logo img {
    height: 60px;
    width: auto;
}

.mobile-logo span {
    margin-left: var(--spacing-xs);
    font-family: var(--font-display);
    letter-spacing: 0.02em;
    -webkit-text-stroke: var(--display-stroke) currentColor;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-extrabold);
}

.mobile-menu-close {
    background: none;
    border: none;
    color: var(--text-light);
    font-size: var(--font-size-lg);
    cursor: pointer;
    padding: var(--spacing-xs);
    border-radius: 50%;
    transition: all 0.2s ease;
    width: 40px;
    height: 40px;
    zoom: 1.5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-menu-close:hover {
    background: rgba(255, 255, 255, 0.1);
}

.mobile-nav-links {
    width: 100%;
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
    flex: 1;
    margin-top: 4rem;
    display: flex;
    flex-direction: column;
    justify-content: left;
    gap: var(--spacing-md);
}

.mobile-nav-links li a {
    color: var(--text-light);
    text-decoration: none;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    transition: all 0.2s ease;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-sm);
    display: block;
}

.mobile-nav-links li a:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-light);
}

.mobile-nav-links li a.active {
    background: rgba(255, 255, 255, 0.1);
    color: var(--secondary-pink);
}

/* The overlay behind this button is --bg-dark, so a --bg-dark button read as
   bare text. It mirrors the light pill the desktop bar uses over a dark hero. */
.mobile-donate-btn {
    font-family: var(--font-display);
    letter-spacing: 0.02em;
    -webkit-text-stroke: var(--display-stroke) currentColor;
    font-weight: var(--font-weight-extrabold);
    background: var(--bg-white);
    color: var(--secondary-purple);
    border: none;
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: var(--spacing-lg);
    width: 100%;
    max-width: 200px;
    margin-bottom: var(--spacing-md);
}

.mobile-donate-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
 
 /* Hide mobile menu on larger screens */
 @media (min-width: 769px) {
     .mobile-menu-toggle,
     .mobile-menu-overlay {
         display: none;
     }
 }
/* Scroll reveal - the one entrance animation used across the site. The
   classes are only ever added by initReveal() in nav.js, so without JS (or
   with reduced motion) everything is simply visible. The doubled class wins
   over page rules that set a card's own opacity, transform or transition. */
.reveal.reveal {
    /* Kept subtle: a short rise and a fade, no blur. */
    opacity: 0;
    transform: translateY(10px);
    transition:
        opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--reveal-delay, 0ms);
}

.reveal.reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* The fixed bar only fades - sliding it would look like it dropped in. */
.navbar.reveal.reveal:not(.is-visible) {
    transform: none;
}