/* ============================================================
   STYLE.CSS — Coalition for Cyclist Safety
   Full Design System
   Brand Guidelines: February 2026
   ============================================================

   TABLE OF CONTENTS
   -----------------
   01. Font Loading
   02. CSS Custom Properties (Design Tokens)
   03. Base Styles
   04. Layout & Container
   05. Utility Classes
   06. Label Tag Component (pill with orange dot)
   07. Button Components
   08. Navigation Bar
   09. Hero Section
   10. Editorial Split Section
   11. Stats Row
   12. Quote / Testimonial
   13. Members Logo Grid
   14. CTA Band
   15. Footer
   16. Page Header (inner pages)
   17. Animations & Transitions
   18. Mobile Responsive (max-width: 768px)
   ============================================================ */


/* ============================================================
   01. FONT LOADING
   Metropolis: self-hosted in assets/fonts/
   Inter: Google Fonts fallback (loaded if Metropolis unavailable)
   ============================================================ */

@font-face {
  font-family: 'Metropolis';
  src: url('../assets/fonts/Metropolis-Thin.otf') format('opentype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Metropolis';
  src: url('../assets/fonts/Metropolis-ThinItalic.otf') format('opentype');
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Metropolis';
  src: url('../assets/fonts/Metropolis-ExtraLight.otf') format('opentype');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Metropolis';
  src: url('../assets/fonts/Metropolis-ExtraLightItalic.otf') format('opentype');
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Metropolis';
  src: url('../assets/fonts/Metropolis-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Metropolis';
  src: url('../assets/fonts/Metropolis-LightItalic.otf') format('opentype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Metropolis';
  src: url('../assets/fonts/Metropolis-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Metropolis';
  src: url('../assets/fonts/Metropolis-RegularItalic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Metropolis';
  src: url('../assets/fonts/Metropolis-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Metropolis';
  src: url('../assets/fonts/Metropolis-MediumItalic.otf') format('opentype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Metropolis';
  src: url('../assets/fonts/Metropolis-SemiBold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Metropolis';
  src: url('../assets/fonts/Metropolis-SemiBoldItalic.otf') format('opentype');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Metropolis';
  src: url('../assets/fonts/Metropolis-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Metropolis';
  src: url('../assets/fonts/Metropolis-BoldItalic.otf') format('opentype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Metropolis';
  src: url('../assets/fonts/Metropolis-ExtraBold.otf') format('opentype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Metropolis';
  src: url('../assets/fonts/Metropolis-ExtraBoldItalic.otf') format('opentype');
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Metropolis';
  src: url('../assets/fonts/Metropolis-Black.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Metropolis';
  src: url('../assets/fonts/Metropolis-BlackItalic.otf') format('opentype');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}


/* ============================================================
   02. CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   ============================================================ */

:root {

  /* --- Brand Colors --- */
  --color-orange:         #fea44b;
  --color-orange-hover:   #f09030;
  --color-orange-light:   rgba(254, 164, 75, 0.12);
  --color-orange-mid:     rgba(254, 164, 75, 0.35);

  --color-grey-dark:      #545454;
  --color-grey-mid:       #7a7a7a;
  --color-grey-light:     #b0b0b0;
  --color-grey-border:    #e0e0e0;

  --color-off-white:      #f5f6f7;
  --color-white:          #ffffff;
  --color-black:          #1a1a1a;

  /* --- Hero gradient overlay (brand-specified) --- */
  --gradient-hero:        linear-gradient(
                            to right,
                            rgba(26, 26, 26, 0.80) 0%,
                            rgba(26, 26, 26, 0.55) 50%,
                            rgba(26, 26, 26, 0.20) 100%
                          );

  --gradient-hero-bottom: linear-gradient(
                            to top,
                            rgba(26, 26, 26, 0.85) 0%,
                            rgba(26, 26, 26, 0.40) 50%,
                            rgba(26, 26, 26, 0.10) 100%
                          );

  /* --- Typography --- */
  --font-primary:         'Metropolis', 'Inter', sans-serif;

  /* Type scale
     Body base: 16px
     Title: 5px larger than body = 21px (UPPERCASE + weight 300)
     Section display: 48–72px (UPPERCASE + weight 300)
     Headlines: bold weight 700, never weight 900
  */
  --text-body:            1rem;           /* 16px */
  --text-title:           1.3125rem;      /* 21px — 5pt above body */
  --text-sm:              0.875rem;       /* 14px — labels, captions */
  --text-xs:              0.75rem;        /* 12px — footnotes, tags */
  --text-lg:              1.125rem;       /* 18px — lead copy */
  --text-xl:              1.375rem;       /* 22px */
  --text-2xl:             1.75rem;        /* 28px */
  --text-3xl:             2.25rem;        /* 36px */
  --text-display-sm:      3rem;           /* 48px — section headers */
  --text-display-md:      3.75rem;        /* 60px */
  --text-display-lg:      4.5rem;         /* 72px — hero */

  /* Type weights (brand-specified) */
  --weight-light:         300;  /* titles */
  --weight-regular:       400;  /* body */
  --weight-medium:        500;  /* nav */
  --weight-semibold:      600;
  --weight-bold:          700;  /* headlines */
  --weight-extrabold:     800;  /* stat numbers */

  /* --- Spacing Scale --- */
  --space-1:    0.25rem;   /*  4px */
  --space-2:    0.5rem;    /*  8px */
  --space-3:    0.75rem;   /* 12px */
  --space-4:    1rem;      /* 16px */
  --space-5:    1.25rem;   /* 20px */
  --space-6:    1.5rem;    /* 24px */
  --space-8:    2rem;      /* 32px */
  --space-10:   2.5rem;    /* 40px */
  --space-12:   3rem;      /* 48px */
  --space-16:   4rem;      /* 64px */
  --space-20:   5rem;      /* 80px */
  --space-24:   6rem;      /* 96px */
  --space-32:   8rem;      /* 128px */

  /* --- Layout --- */
  --container-max:        1280px;
  --container-narrow:     900px;
  --container-padding:    var(--space-8);

  /* --- Nav --- */
  --nav-height:           72px;
  --nav-bg:               rgba(255, 255, 255, 0.60);

  /* --- Border Radius --- */
  --radius-pill:          999px;
  --radius-sm:            6px;
  --radius-md:            12px;
  --radius-lg:            20px;
  --radius-xl:            28px;

  /* --- Shadows --- */
  --shadow-nav:           0 1px 0 rgba(0, 0, 0, 0.06),
                          0 4px 24px rgba(0, 0, 0, 0.04);
  --shadow-card:          0 2px 8px rgba(0, 0, 0, 0.06),
                          0 8px 32px rgba(0, 0, 0, 0.04);
  --shadow-card-hover:    0 4px 16px rgba(0, 0, 0, 0.10),
                          0 16px 48px rgba(0, 0, 0, 0.08);
  --shadow-btn:           0 2px 8px rgba(254, 164, 75, 0.30);
  --shadow-btn-hover:     0 4px 20px rgba(254, 164, 75, 0.45);

  /* --- Transitions --- */
  --transition-fast:      150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base:      250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:      400ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring:    350ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* --- Liquid glass system (visionOS / iOS 26 aesthetic) ---
     The inset top highlight is the critical detail — it creates
     the glass rim / specular depth illusion. */
  --glass-bg:             linear-gradient(135deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.06) 100%);
  --glass-bg-hover:       linear-gradient(135deg, rgba(255,255,255,0.26) 0%, rgba(255,255,255,0.12) 100%);
  --glass-border:         rgba(255, 255, 255, 0.20);
  --glass-blur:           blur(12px);
  --glass-shadow:         0 4px 15px rgba(0, 0, 0, 0.08),
                          inset 0 1px 0 rgba(255, 255, 255, 0.25),
                          inset 0 -1px 0 rgba(0, 0, 0, 0.04);
  --glass-shadow-hover:   0 8px 20px rgba(0, 0, 0, 0.12),
                          inset 0 1px 0 rgba(255, 255, 255, 0.30),
                          inset 0 -1px 0 rgba(0, 0, 0, 0.04);
  --glass-transition:     background 0.2s ease, box-shadow 0.2s ease,
                          border-color 0.2s ease, transform 0.2s ease;

  /* --- Logo symbol watermark (brand-specified: 20–40% opacity) --- */
  --watermark-opacity:    0.28;
  --watermark-size:       520px;
}


/* ============================================================
   03. BASE STYLES
   ============================================================ */

html {
  font-size: 16px;
}

body {
  font-family: var(--font-primary);
  font-weight: var(--weight-regular);
  font-size: var(--text-body);
  line-height: 1.65;
  color: var(--color-black);
  background-color: var(--color-white);

  /* Brand rule: never italic */
  font-style: normal;
}

/* --- Typography hierarchy --- */

/* Display titles: UPPERCASE + weight 300 (brand rule) */
.t-display {
  font-family: var(--font-primary);
  font-weight: var(--weight-light);
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.05;
  color: var(--color-black);
}

.t-display--lg   { font-size: var(--text-display-lg); }
.t-display--md   { font-size: var(--text-display-md); }
.t-display--sm   { font-size: var(--text-display-sm); }
.t-display--xl   { font-size: clamp(var(--text-display-md), 8vw, 5.5rem); }

/* Section titles: UPPERCASE + weight 300 (brand rule) */
.t-section-title {
  font-family: var(--font-primary);
  font-weight: var(--weight-light);
  font-size: var(--text-title);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-black);
  font-style: normal;
}

/* Headlines: weight 700, never weight 900 (brand rule) */
.t-headline {
  font-family: var(--font-primary);
  font-weight: var(--weight-bold);
  font-size: var(--text-display-sm);
  line-height: 1.15;
  color: var(--color-black);
  font-style: normal;
}

.t-headline--lg { font-size: var(--text-display-md); }
.t-headline--sm { font-size: var(--text-2xl); }

/* Body: weight 400 regular */
.t-body {
  font-family: var(--font-primary);
  font-weight: var(--weight-regular);
  font-size: var(--text-body);
  line-height: 1.7;
  font-style: normal;
}

.t-body--lg {
  font-size: var(--text-lg);
  line-height: 1.65;
}

/* Important messages: bold + capital (brand rule) */
.t-important {
  font-family: var(--font-primary);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-style: normal;
}

/* Color utilities */
.t-orange   { color: var(--color-orange); }
.t-grey     { color: var(--color-grey-dark); }
.t-white    { color: var(--color-white); }
.t-muted    { color: var(--color-grey-mid); }


/* ============================================================
   04. LAYOUT & CONTAINER
   ============================================================ */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

.container--narrow {
  max-width: var(--container-narrow);
}

.section {
  padding-top: 6.5rem;
  padding-bottom: 6.5rem;
}

.section--sm {
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
}

.section--lg {
  padding-top: var(--space-32);
  padding-bottom: var(--space-32);
}

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

.section--grey-dark {
  background-color: var(--color-grey-dark);
  color: var(--color-white);
}

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


/* ============================================================
   05. UTILITY CLASSES
   ============================================================ */

/* Alignment — brand rule: left or centered only */
.align-left    { text-align: left; }
.align-center  { text-align: center; }

/* Display */
.flex           { display: flex; }
.flex-col       { flex-direction: column; }
.flex-center    { align-items: center; justify-content: center; }
.flex-between   { justify-content: space-between; }
.flex-gap-4     { gap: var(--space-4); }
.flex-gap-6     { gap: var(--space-6); }
.flex-gap-8     { gap: var(--space-8); }
.flex-gap-12    { gap: var(--space-12); }

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-8);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}

/* Spacing helpers */
.mt-4   { margin-top: var(--space-4); }
.mt-6   { margin-top: var(--space-6); }
.mt-8   { margin-top: var(--space-8); }
.mt-10  { margin-top: var(--space-10); }
.mt-12  { margin-top: var(--space-12); }
.mb-4   { margin-bottom: var(--space-4); }
.mb-6   { margin-bottom: var(--space-6); }
.mb-8   { margin-bottom: var(--space-8); }
.mb-10  { margin-bottom: var(--space-10); }

/* Divider */
.divider {
  width: 48px;
  height: 3px;
  background-color: var(--color-orange);
  border-radius: var(--radius-pill);
  flex-shrink: 0;
}

.divider--lg {
  width: 72px;
  height: 4px;
}

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


/* ============================================================
   06. LABEL TAG COMPONENT
   Pill shape with orange dot prefix — from Realtxo reference
   Used above hero headlines and section introductions
   ============================================================ */

.label-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background-color: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.30);
  border-radius: var(--radius-pill);
  font-family: var(--font-primary);
  font-weight: var(--weight-medium);
  font-size: var(--text-sm);
  color: var(--color-black);
  letter-spacing: 0.01em;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  white-space: nowrap;
}

/* Orange dot */
.label-tag::before {
  content: '';
  display: block;
  width: 7px;
  height: 7px;
  background-color: var(--color-orange);
  border-radius: 50%;
  flex-shrink: 0;
}

/* On dark/photo backgrounds */
.label-tag--dark {
  background-color: rgba(26, 26, 26, 0.55);
  border-color: rgba(255, 255, 255, 0.15);
  color: var(--color-white);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* On light/white backgrounds */
.label-tag--light {
  background-color: var(--color-off-white);
  border-color: var(--color-grey-border);
  color: var(--color-grey-dark);
}

/* On orange backgrounds */
.label-tag--inverse {
  background-color: rgba(255, 255, 255, 0.20);
  border-color: rgba(255, 255, 255, 0.30);
  color: var(--color-white);
}
.label-tag--inverse::before {
  background-color: var(--color-white);
}

/* Liquid glass label — full visionOS treatment with specular rim */
.label-tag--frost {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  color: var(--color-white);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: var(--weight-semibold);
}
.label-tag--frost::before {
  background-color: var(--color-orange);
  width: 6px;
  height: 6px;
}


/* ============================================================
   07. BUTTON COMPONENTS
   visionOS / iOS 26 liquid glass system.
   The inset top highlight (inset 0 1px 0 rgba(255,255,255,0.5))
   is the specular rim that makes glass feel physical and real.
   ============================================================ */

/* Base button */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.75rem 1.75rem;
  border-radius: 100px;
  font-family: var(--font-primary);
  font-weight: var(--weight-medium);
  font-size: var(--text-body);
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: var(--glass-transition);

  /* Brand rule: never italic, never underlined */
  font-style: normal;
  text-decoration: none;
}

.btn:active {
  opacity: 0.85;
}

/* -------------------------------------------------------
   PRIMARY — pure glass with orange rim. The fill is nearly
   invisible so the photo bleeds through clearly. The orange
   outer rim is the only differentiator from the neutral ghost.
   NO saturate() — it amplifies warm photo tones into mud.
------------------------------------------------------- */
.btn--primary,
.btn-primary {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.95);
  font-weight: 600;
  border: none;
  backdrop-filter: blur(24px) brightness(1.05);
  -webkit-backdrop-filter: blur(24px) brightness(1.05);
  box-shadow:
    0 0 0 1px rgba(254, 164, 75, 0.80),
    inset 0 1px 0 rgba(255, 255, 255, 0.50),
    inset 0 -1px 0 rgba(0, 0, 0, 0.12),
    0 8px 32px rgba(0, 0, 0, 0.10);
}

.btn--primary:hover,
.btn-primary:hover,
.btn--primary:focus-visible,
.btn-primary:focus-visible {
  background: rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(28px) brightness(1.08);
  -webkit-backdrop-filter: blur(28px) brightness(1.08);
  box-shadow:
    0 0 0 1.5px rgba(254, 164, 75, 1.0),
    inset 0 1px 0 rgba(255, 255, 255, 0.60),
    inset 0 -1px 0 rgba(0, 0, 0, 0.10),
    0 12px 40px rgba(0, 0, 0, 0.14);
}

/* -------------------------------------------------------
   GLASS — true liquid glass. Nearly transparent so the
   background refracts through it rather than being absorbed.
   The rim highlight + inner glow do the heavy lifting.
------------------------------------------------------- */
.btn--ghost-frost,
.btn--ghost,
.btn-glass {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.95);
  font-weight: 500;
  border: none;
  /* No saturate() — it amplifies warm photo tones into brown mud */
  backdrop-filter: blur(24px) brightness(1.05);
  -webkit-backdrop-filter: blur(24px) brightness(1.05);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(0, 0, 0, 0.15),
    inset 0 0 20px rgba(255, 255, 255, 0.04),
    0 8px 32px rgba(0, 0, 0, 0.12);
}

.btn--ghost-frost:hover,
.btn--ghost:hover,
.btn-glass:hover,
.btn--ghost-frost:focus-visible,
.btn--ghost:focus-visible,
.btn-glass:focus-visible {
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(28px) brightness(1.08);
  -webkit-backdrop-filter: blur(28px) brightness(1.08);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.60),
    inset 0 1px 0 rgba(255, 255, 255, 0.70),
    inset 0 -1px 0 rgba(0, 0, 0, 0.12),
    inset 0 0 24px rgba(255, 255, 255, 0.08),
    0 12px 40px rgba(0, 0, 0, 0.15);
}

/* -------------------------------------------------------
   SECONDARY — glass on light backgrounds.
   Slightly opaque white so the rim is visible on pale BGs.
------------------------------------------------------- */
.btn--secondary {
  background: linear-gradient(135deg, rgba(255,255,255,0.85) 0%, rgba(245,246,247,0.65) 100%);
  color: var(--color-black);
  border: 1px solid rgba(0, 0, 0, 0.10);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow:
    0 4px 15px rgba(0, 0, 0, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.90),
    inset 0 -1px 0 rgba(0, 0, 0, 0.04);
}

.btn--secondary:hover,
.btn--secondary:focus-visible {
  background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.80) 100%);
  border-color: rgba(254, 164, 75, 0.40);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(0, 0, 0, 0.04);
}

/* Ghost orange — outline orange, liquid glass tint */
.btn--ghost-orange {
  background: linear-gradient(135deg, rgba(254,164,75,0.12) 0%, rgba(254,164,75,0.04) 100%);
  color: var(--color-orange);
  border: 1px solid rgba(254, 164, 75, 0.45);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow:
    0 4px 15px rgba(254, 164, 75, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.60),
    inset 0 -1px 0 rgba(0, 0, 0, 0.04);
}

.btn--ghost-orange:hover,
.btn--ghost-orange:focus-visible {
  background: linear-gradient(135deg, #fea44b 0%, #f0903a 100%);
  color: var(--color-white);
  border-color: transparent;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow:
    0 8px 25px rgba(254, 164, 75, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -1px 0 rgba(0, 0, 0, 0.12);
}

/* Solid orange — full fill for light-background CTAs */
.btn--orange {
  background: linear-gradient(135deg, #fea44b 0%, #f0903a 100%);
  color: var(--color-white);
  font-weight: var(--weight-semibold);
  border: none;
  box-shadow:
    0 4px 16px rgba(254, 164, 75, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    inset 0 -1px 0 rgba(0, 0, 0, 0.10);
}

.btn--orange:hover,
.btn--orange:focus-visible {
  background: linear-gradient(135deg, #f59535 0%, #e88528 100%);
  box-shadow:
    0 6px 24px rgba(254, 164, 75, 0.50),
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    inset 0 -1px 0 rgba(0, 0, 0, 0.10);
  transform: translateY(-1px);
}

/* White glass — on dark/orange sections */
.btn--white {
  background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.80) 100%);
  color: var(--color-black);
  border: 1px solid rgba(255, 255, 255, 0.60);
  box-shadow:
    0 4px 15px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.05);
}

.btn--white:hover,
.btn--white:focus-visible {
  background: linear-gradient(135deg, rgba(255,255,255,1) 0%, rgba(245,246,247,0.95) 100%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow:
    0 8px 25px rgba(0, 0, 0, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.05);
}

/* Size variants */
.btn--sm {
  padding: 0.5rem 1.25rem;
  font-size: var(--text-sm);
}

.btn--lg {
  padding: 1rem 2.5rem;
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
}

/* -------------------------------------------------------
   NAV CTA — same liquid glass as .btn--ghost-frost.
   Floating state: white glass over the hero image.
   Scrolled state: dark-tinted glass against the light nav bg.
   Alias: .btn-nav
------------------------------------------------------- */
.btn--nav-cta,
.btn-nav {
  padding: 0.65rem 1.4rem;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.95);
  font-weight: 600;
  border: none;
  backdrop-filter: blur(24px) brightness(1.05);
  -webkit-backdrop-filter: blur(24px) brightness(1.05);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(0, 0, 0, 0.15),
    0 8px 32px rgba(0, 0, 0, 0.12);
}

.btn--nav-cta:hover,
.btn-nav:hover,
.btn--nav-cta:focus-visible,
.btn-nav:focus-visible {
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(28px) brightness(1.08);
  -webkit-backdrop-filter: blur(28px) brightness(1.08);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.60),
    inset 0 1px 0 rgba(255, 255, 255, 0.70),
    inset 0 -1px 0 rgba(0, 0, 0, 0.12),
    0 12px 40px rgba(0, 0, 0, 0.15);
}

/* Scrolled state — dark-tinted glass against light nav background */
.nav--scrolled .btn--nav-cta,
.nav--scrolled .btn-nav {
  background: rgba(0, 0, 0, 0.06);
  color: #545454;
  backdrop-filter: blur(24px) brightness(1.05);
  -webkit-backdrop-filter: blur(24px) brightness(1.05);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.80),
    inset 0 -1px 0 rgba(0, 0, 0, 0.06),
    0 4px 16px rgba(0, 0, 0, 0.06);
}

.nav--scrolled .btn--nav-cta:hover,
.nav--scrolled .btn-nav:hover {
  background: rgba(0, 0, 0, 0.10);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.90),
    inset 0 -1px 0 rgba(0, 0, 0, 0.06),
    0 6px 20px rgba(0, 0, 0, 0.08);
}


/* ============================================================
   08. NAVIGATION BAR
   Default: floating frosted-glass capsule hovering 16px from top,
   centred horizontally — exactly the Realtxo floating-pill treatment.
   Scrolled: morphs to full-width sticky bar with opaque white bg.
   ============================================================ */

.nav {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%) translateZ(0);
  -webkit-transform: translateX(-50%) translateZ(0);
  z-index: 1000;
  height: var(--nav-height);
  /* Width: fills viewport minus 20px each side, capped at container max */
  width: min(calc(100vw - 40px), 1060px);
  /* Same material as the glass buttons — nearly transparent,
     rim does the work, background refracts through.
     No saturate() — avoids amplifying warm photo tones. */
  background: rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(24px) brightness(1.05);
  -webkit-backdrop-filter: blur(24px) brightness(1.05);
  border: none;
  border-radius: 50px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(0, 0, 0, 0.15),
    inset 0 0 20px rgba(255, 255, 255, 0.04),
    0 4px 24px rgba(0, 0, 0, 0.12);
  transition:
    top 0.3s ease,
    width 0.3s ease,
    background 0.3s ease,
    border-color 0.3s ease,
    border-radius 0.3s ease,
    box-shadow 0.3s ease;
}


/* Scrolled state — morph into full-width sticky bar */
.nav.nav--scrolled {
  top: 0;
  width: 100%;
  border-radius: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.88) 100%);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-color: rgba(0, 0, 0, 0.06);
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.06),
    0 8px 32px rgba(0, 0, 0, 0.06),
    inset 0 -1px 0 rgba(0, 0, 0, 0.04);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  /* Floating pill: simple symmetric padding inside the capsule */
  padding: 0 var(--space-6);
  gap: var(--space-6);
}

/* Scrolled: constrain inner to container width */
.nav--scrolled .nav__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

/* Logo — left aligned (brand rule) */
.nav__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
  transition: opacity var(--transition-fast);
}

.nav__logo:hover {
  opacity: 0.85;
}

.nav__logo img {
  height: 42px;
  width: auto;
  /* White tint while floating over hero */
  filter: brightness(0) invert(1);
  transition: filter var(--transition-base);
}

/* Restore full-colour logo in sticky bar */
.nav--scrolled .nav__logo img {
  filter: none;
}

/* Navigation links wrapper */
.nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex: 1;
  justify-content: center;
}

/* Individual nav link — white over hero, dark in sticky bar */
.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.75rem;
  border-radius: 100px;
  font-family: var(--font-primary);
  font-weight: var(--weight-medium);
  font-size: 15px;
  /* White in floating state — nav sits over dark hero image */
  color: rgba(255, 255, 255, 0.80);
  letter-spacing: 0.01em;
  transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  white-space: nowrap;
  text-decoration: none;
  font-style: normal;
}

.nav__link:hover {
  color: var(--color-white);
  /* Subtle glass pill on hover — micro liquid glass interaction */
  background: rgba(255, 255, 255, 0.14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    inset 0 -1px 0 rgba(0, 0, 0, 0.04);
}

.nav__link.nav__link--active {
  color: var(--color-white);
  font-weight: var(--weight-semibold);
  /* Persistent glass pill — same as hover but slightly more opaque */
  background: rgba(255, 255, 255, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    inset 0 -1px 0 rgba(0, 0, 0, 0.04);
}

/* Scrolled state — restore dark text, muted glass hover */
.nav--scrolled .nav__link {
  color: rgba(26, 26, 26, 0.60);
}

.nav--scrolled .nav__link:hover {
  color: var(--color-black);
  background: rgba(0, 0, 0, 0.04);
  box-shadow: none;
}

.nav--scrolled .nav__link.nav__link--active {
  color: var(--color-black);
  background: rgba(0, 0, 0, 0.06);
  box-shadow: none;
}

/* CTA button in nav */
.nav__cta {
  flex-shrink: 0;
}

/* Hamburger — hidden on desktop */
.nav__hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  cursor: pointer;
  /* White border over hero */
  border: 1.5px solid rgba(255, 255, 255, 0.40);
  background: none;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.nav__hamburger:hover {
  background-color: rgba(255, 255, 255, 0.12);
}

/* Scrolled: restore dark border */
.nav--scrolled .nav__hamburger {
  border-color: var(--color-grey-border);
}

.nav--scrolled .nav__hamburger:hover {
  background-color: var(--color-off-white);
}

.nav__hamburger-line {
  display: block;
  width: 100%;
  height: 1.5px;
  /* White lines over hero */
  background-color: var(--color-white);
  border-radius: var(--radius-pill);
  transition: transform var(--transition-base), opacity var(--transition-base), background-color var(--transition-base);
  transform-origin: center;
}

/* Scrolled: dark lines */
.nav--scrolled .nav__hamburger-line {
  background-color: var(--color-black);
}

/* Hamburger open state */
.nav__hamburger.is-open .nav__hamburger-line:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.nav__hamburger.is-open .nav__hamburger-line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.nav__hamburger.is-open .nav__hamburger-line:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* Mobile nav drawer */
.nav__mobile {
  display: none;
  position: fixed;
  top: var(--nav-height);
  left: 0;
  right: 0;
  background-color: var(--color-white);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.10);
  padding: var(--space-6) var(--space-8) var(--space-8);
  z-index: 999;
  border-top: 1px solid var(--color-grey-border);
  transform: translateY(-10px);
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--transition-base),
    opacity var(--transition-base);
}

.nav__mobile.is-open {
  display: block;
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.nav__mobile-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-6);
}

.nav__mobile-link {
  display: block;
  padding: 0.75rem var(--space-4);
  border-radius: var(--radius-sm);
  font-family: var(--font-primary);
  font-weight: var(--weight-medium);
  font-size: var(--text-body);
  color: var(--color-grey-dark);
  transition: background-color var(--transition-fast), color var(--transition-fast);
  font-style: normal;
  text-decoration: none;
}

.nav__mobile-link:hover,
.nav__mobile-link.nav__mobile-link--active {
  background-color: var(--color-off-white);
  color: var(--color-black);
}

/* Spacer to push content below fixed nav */
.nav-spacer {
  height: var(--nav-height);
}


/* ============================================================
   09. HERO SECTION
   Full-bleed photo, dark gradient overlay, large display
   headline, label tag above, logo symbol watermark bottom-left
   ============================================================ */

.hero {
  position: relative;
  min-height: 88vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  background-color: var(--color-grey-dark);
}

.hero--short {
  min-height: 60vh;
}

.hero--full {
  min-height: 100vh;
}

/* Background image */
.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  transition: transform 8s ease;
}

.hero:hover .hero__bg {
  transform: scale(1.02);
}

/* Gradient overlay (brand spec: gradient percentages over images) */
.hero__overlay {
  position: absolute;
  inset: 0;
  background: var(--gradient-hero-bottom);
  z-index: 1;
}

/* Second overlay layer for extra depth on text side */
.hero__overlay--left {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(26, 26, 26, 0.65) 0%,
    rgba(26, 26, 26, 0.20) 55%,
    transparent 100%
  );
  z-index: 1;
}

/* ============================================================
   SYMBOL OVERLAY — Global logo symbol watermark system
   ============================================================
   Brand rule: the logo symbol ALWAYS bleeds off an edge.
   Never fully visible, never centered. Massive and architectural.

   Sizing: 600–700px default. Opacity: 35–40%.
   Color: --white filter over images/dark BGs,
          --orange filter over light/white sections.

   Usage:
     <div class="symbol-overlay symbol-overlay--white
                 symbol-overlay--top-right" aria-hidden="true">
       <img src="assets/images/logo-symbol.png" alt="">
     </div>

   Position modifiers: --top-right  --top-left
                       --bottom-right  --bottom-left

   The parent section must have position: relative; overflow: hidden;
   (hero, CTA band, statement section, footer, etc. already do)
   ============================================================ */

.symbol-overlay {
  /* Scoped size token — override per-instance if needed */
  --symbol-size: 680px;

  position: absolute;
  width: var(--symbol-size);
  height: var(--symbol-size);
  pointer-events: none;
  z-index: 2;
}

.symbol-overlay img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: transparent;
  opacity: 0.40;
}

/* --white: over images and dark backgrounds.
   brightness(0) collapses all pixels to black (preserving alpha),
   invert(1) flips to white. Opacity set explicitly here to
   override the base value and lock the 0.38 spec. */
.symbol-overlay--white img {
  filter: brightness(0) invert(1);
  opacity: 0.38;
  mix-blend-mode: screen;
}

/* --orange: over light/white backgrounds
   Approximates brand orange #fea44b via filter chain */
.symbol-overlay--orange img {
  filter: brightness(0) invert(1) sepia(1) saturate(4) hue-rotate(5deg) brightness(1.08);
  mix-blend-mode: multiply;
}

/* -------------------------------------------------------
   Position modifiers — each bleeds exactly half the symbol
   off its respective edges, creating the architectural crop.
   Parent overflow: hidden does the actual clipping.
------------------------------------------------------- */

.symbol-overlay--top-right {
  top: calc(var(--symbol-size) / -2);
  right: calc(var(--symbol-size) / -2);
}

.symbol-overlay--top-left {
  top: calc(var(--symbol-size) / -2);
  left: calc(var(--symbol-size) / -2);
}

.symbol-overlay--bottom-right {
  bottom: calc(var(--symbol-size) / -2);
  right: calc(var(--symbol-size) / -2);
}

.symbol-overlay--bottom-left {
  bottom: calc(var(--symbol-size) / -2);
  left: calc(var(--symbol-size) / -2);
}

/* -------------------------------------------------------
   Responsive: scale down on smaller viewports
------------------------------------------------------- */
@media (max-width: 768px) {
  .symbol-overlay {
    --symbol-size: 420px;
  }
}

@media (max-width: 480px) {
  .symbol-overlay {
    --symbol-size: 300px;
  }
}

/* Content */
.hero__content {
  position: relative;
  z-index: 3;
  padding-bottom: var(--space-20);
  padding-top: var(--space-24);
}

.hero__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
  max-width: 820px;
}

/* Label tag — sits above the headline */
.hero__label {
  margin-bottom: var(--space-6);
}

/* Main headline — UPPERCASE + weight 300 (brand title rule) */
.hero__headline {
  font-family: var(--font-primary);
  font-weight: var(--weight-light);
  font-size: clamp(2.75rem, 7vw, var(--text-display-lg));
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--color-white);
  font-style: normal;
  margin-bottom: var(--space-6);
  max-width: 700px;
}

/* Sub-headline accent in orange */
.hero__headline span {
  color: var(--color-orange);
}

/* Lead copy */
.hero__lead {
  font-family: var(--font-primary);
  font-weight: var(--weight-regular);
  font-size: var(--text-lg);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.88);
  max-width: 560px;
  margin-bottom: var(--space-10);
  font-style: normal;
}

/* CTA row */
.hero__cta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

/* Slide-in scroll indicator */
.hero__scroll {
  position: absolute;
  bottom: var(--space-8);
  right: var(--container-padding);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  opacity: 0.65;
}

.hero__scroll-line {
  width: 48px;
  height: 1px;
  background-color: var(--color-white);
}

.hero__scroll-text {
  font-family: var(--font-primary);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-white);
  font-style: normal;
}


/* ============================================================
   10. EDITORIAL SPLIT SECTION
   50/50 image + text, alternating left/right
   ============================================================ */

.editorial {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 540px;
  overflow: hidden;
}

/* Reverse layout for alternating direction */
.editorial--reverse {
  direction: rtl;
}

.editorial--reverse > * {
  direction: ltr;
}

/* Image pane */
.editorial__image {
  position: relative;
  overflow: hidden;
  background-color: var(--color-off-white);
}

.editorial__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Logo watermark on editorial sections — orange tint, 20% on light bg */
.editorial__image--watermark::after {
  content: '';
  position: absolute;
  bottom: -15%;
  left: -10%;
  width: 380px;
  height: 380px;
  background-image: url('../assets/images/logo-symbol-grey.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  opacity: 0.20;
  pointer-events: none;
  filter: brightness(0) invert(1) sepia(1) saturate(4) hue-rotate(5deg) brightness(1.08);
  mix-blend-mode: multiply;
}

/* Text pane */
.editorial__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-20) var(--space-16);
  background-color: var(--color-white);
}

.editorial__content--grey {
  background-color: var(--color-off-white);
}

.editorial__content--dark {
  background-color: var(--color-grey-dark);
  color: var(--color-white);
}

.editorial__label {
  margin-bottom: var(--space-6);
}

/* Section heading label — small UPPERCASE above main headline */
.editorial__eyebrow {
  font-family: var(--font-primary);
  font-weight: var(--weight-bold);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-orange);
  font-style: normal;
  margin-bottom: var(--space-4);
}

.editorial__title {
  font-family: var(--font-primary);
  font-weight: var(--weight-light);
  font-size: clamp(var(--text-display-sm), 4vw, var(--text-display-md));
  line-height: 1.08;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-black);
  font-style: normal;
  margin-bottom: var(--space-8);
}

.editorial__content--dark .editorial__title {
  color: var(--color-white);
}

.editorial__title span {
  color: var(--color-orange);
}

.editorial__body {
  font-family: var(--font-primary);
  font-weight: var(--weight-regular);
  font-size: var(--text-body);
  line-height: 1.75;
  color: var(--color-grey-dark);
  font-style: normal;
  max-width: 480px;
  margin-bottom: var(--space-10);
}

.editorial__content--dark .editorial__body {
  color: rgba(255, 255, 255, 0.80);
}

.editorial__cta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

/* Decorative orange rule */
.editorial__rule {
  width: 48px;
  height: 3px;
  background-color: var(--color-orange);
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-8);
}


/* ============================================================
   11. STATS ROW
   3-column card strip — one card highlighted in orange
   Large display numbers in extrabold
   ============================================================ */

.stats {
  padding: 6.5rem 0;
  background-color: var(--color-off-white);
  overflow: hidden;
}

.stats__inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

/* Individual stat card */
.stat-card {
  position: relative;
  padding: var(--space-10) var(--space-8);
  background-color: var(--color-white);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base);
  box-shadow: var(--shadow-card);
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}

/* Icon area — top right */
.stat-card__icon {
  position: absolute;
  top: var(--space-6);
  right: var(--space-6);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--color-off-white);
  display: flex;
  align-items: center;
  justify-content: center;
}

.stat-card__icon svg,
.stat-card__icon img {
  width: 18px;
  height: 18px;
}

/* Large number */
.stat-card__number {
  font-family: var(--font-primary);
  font-weight: var(--weight-bold);
  font-size: 3.5rem;
  line-height: 1;
  color: var(--color-black);
  font-style: normal;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-4);
}

.stat-card__number sup {
  font-size: 0.45em;
  font-weight: var(--weight-semibold);
  vertical-align: super;
}

/* Stat label */
.stat-card__label {
  font-family: var(--font-primary);
  font-weight: var(--weight-medium);
  font-size: 0.9375rem;
  color: var(--color-grey-mid);
  letter-spacing: 0.04em;
  font-style: normal;
  line-height: 1.4;
}

/* Sub-context */
.stat-card__context {
  font-family: var(--font-primary);
  font-weight: var(--weight-regular);
  font-size: var(--text-xs);
  color: var(--color-grey-light);
  font-style: normal;
  margin-top: var(--space-2);
}

/* HIGHLIGHTED card — orange fill (Realtxo reference: lime, we use orange) */
.stat-card--highlight {
  background-color: var(--color-orange);
  box-shadow: var(--shadow-btn);
}

.stat-card--highlight:hover {
  box-shadow: var(--shadow-btn-hover);
}

.stat-card--highlight .stat-card__number {
  color: var(--color-white);
}

.stat-card--highlight .stat-card__label {
  color: rgba(255, 255, 255, 0.85);
}

.stat-card--highlight .stat-card__context {
  color: rgba(255, 255, 255, 0.65);
}

.stat-card--highlight .stat-card__icon {
  background-color: rgba(255, 255, 255, 0.20);
}

/* Dark variant */
.stat-card--dark {
  background-color: var(--color-grey-dark);
}

.stat-card--dark .stat-card__number {
  color: var(--color-white);
}

.stat-card--dark .stat-card__label {
  color: rgba(255, 255, 255, 0.75);
}

.stat-card--dark .stat-card__icon {
  background-color: rgba(255, 255, 255, 0.10);
}


/* ============================================================
   12. QUOTE / TESTIMONIAL SECTION
   ============================================================ */

.quotes {
  padding: 80px 0;
  background-color: var(--color-off-white);
  overflow: hidden;
}

.quotes__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

.quote-card {
  padding: 40px;
  background-color: var(--color-white);
  border-radius: 20px;
  border: 1px solid rgba(0, 0, 0, 0.04);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.07), 0 1px 4px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

/* Large decorative opening quotation mark — Georgia serif for editorial weight */
.quote-card::before {
  content: '\201C';
  display: block;
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 700;
  font-size: 64px;
  line-height: 1;
  color: var(--color-orange);
  margin-bottom: 16px;
}

.quote-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.10), 0 2px 8px rgba(0, 0, 0, 0.06);
  border-color: rgba(254, 164, 75, 0.20);
}

.quote-card__text {
  font-family: var(--font-primary);
  font-weight: var(--weight-regular);
  font-size: 16px;
  line-height: 1.75;
  color: var(--color-grey-dark);
  font-style: normal;
  flex: 1;
}

.quote-card__divider {
  border: none;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  margin: 24px 0;
}

.quote-card__author {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.quote-card__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--color-off-white);
  background-color: var(--color-grey-border);
}

.quote-card__name {
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 15px;
  color: #1a1a1a;
  font-style: normal;
  line-height: 1.3;
}

.quote-card__role {
  font-family: var(--font-primary);
  font-weight: var(--weight-regular);
  font-size: 13px;
  color: #545454;
  font-style: normal;
  letter-spacing: 0.02em;
}


/* ============================================================
   13. MEMBERS LOGO GRID
   Clean white background, logos in responsive grid
   ============================================================ */

.members {
  padding: 6.5rem 0;
  background-color: var(--color-off-white);
  border-top: 1px solid var(--color-grey-border);
  border-bottom: 1px solid var(--color-grey-border);
}

.members__header {
  text-align: center;
  margin-bottom: var(--space-12);
}

.members__eyebrow {
  font-family: var(--font-primary);
  font-weight: var(--weight-bold);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #545454;
  font-style: normal;
  margin-bottom: var(--space-3);
}

.members__title {
  font-family: var(--font-primary);
  font-weight: var(--weight-light);
  font-size: var(--text-display-sm);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-black);
  font-style: normal;
  line-height: 1.1;
}

.members__subtitle {
  font-family: var(--font-primary);
  font-weight: var(--weight-regular);
  font-size: var(--text-body);
  color: var(--color-grey-mid);
  font-style: normal;
  margin-top: var(--space-4);
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

/* Category filter pills */
.members__filters {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-10);
}

.members__filter {
  padding: 0.4rem 1.1rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-primary);
  font-weight: var(--weight-medium);
  font-size: var(--text-sm);
  color: var(--color-grey-dark);
  border: 1.5px solid var(--color-grey-border);
  background: none;
  cursor: pointer;
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast);
  font-style: normal;
  text-decoration: none;
}

.members__filter:hover {
  border-color: var(--color-orange);
  color: var(--color-orange);
}

.members__filter.is-active {
  background-color: #545454;
  border-color: #545454;
  color: var(--color-white);
}

/* Logo grid */
.members__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-4);
}

.member-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6) var(--space-4);
  background-color: var(--color-white);
  border: 1px solid var(--color-grey-border);
  border-radius: var(--radius-md);
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast);
  min-height: 80px;
}

.member-logo:hover {
  border-color: var(--color-orange-mid);
  box-shadow: 0 2px 12px rgba(254, 164, 75, 0.15);
  transform: translateY(-2px);
}

.member-logo img {
  max-height: 36px;
  width: auto;
  max-width: 120px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.65;
  transition: filter var(--transition-fast), opacity var(--transition-fast);
}

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

/* Count badge */
.members__count {
  text-align: center;
  margin-top: var(--space-10);
  font-family: var(--font-primary);
  font-weight: var(--weight-medium);
  font-size: var(--text-sm);
  color: var(--color-grey-mid);
  font-style: normal;
}

.members__count strong {
  color: var(--color-orange);
  font-weight: var(--weight-bold);
}


/* ============================================================
   14. CTA BAND
   Full-width orange or grey band with headline + button
   ============================================================ */

.cta-band {
  position: relative;
  padding: 6.5rem 0;
  overflow: hidden;
}

/* Orange variant */
.cta-band--orange {
  background-color: var(--color-orange);
}

/* Dark grey variant */
.cta-band--dark {
  background-color: var(--color-grey-dark);
}

/* Off-white variant */
.cta-band--light {
  background-color: var(--color-off-white);
}

/* Logo watermark in CTA band */
.cta-band__watermark {
  position: absolute;
  right: -6%;
  bottom: -20%;
  width: 420px;
  height: 420px;
  background-image: url('../assets/images/logo-symbol.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  opacity: 0.15;
  pointer-events: none;
  filter: brightness(0) invert(1); /* white tint */
}

.cta-band__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-10);
}

.cta-band__text {
  max-width: 600px;
}

.cta-band__label {
  margin-bottom: var(--space-6);
}

/* Headline — UPPERCASE + weight 300 (title rule) */
.cta-band__title {
  font-family: var(--font-primary);
  font-weight: var(--weight-light);
  font-size: clamp(var(--text-2xl), 4vw, var(--text-display-sm));
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.1;
  color: var(--color-white);
  font-style: normal;
  margin-bottom: var(--space-4);
}

.cta-band--light .cta-band__title {
  color: var(--color-black);
}

.cta-band__sub {
  font-family: var(--font-primary);
  font-weight: var(--weight-regular);
  font-size: var(--text-body);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.82);
  font-style: normal;
  max-width: 480px;
}

.cta-band--light .cta-band__sub {
  color: var(--color-grey-dark);
}

.cta-band__actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-shrink: 0;
}

/* Centered variant */
.cta-band--centered .cta-band__inner {
  flex-direction: column;
  text-align: center;
  align-items: center;
}

.cta-band--centered .cta-band__sub {
  margin-left: auto;
  margin-right: auto;
}

.cta-band--centered .cta-band__actions {
  justify-content: center;
  margin-top: var(--space-8);
}


/* ============================================================
   15. FOOTER
   Dark grey background, 3 columns, orange logo, white links
   ============================================================ */

.footer {
  position: relative;
  background-color: #3a3a3a;
  color: var(--color-white);
  overflow: hidden;
  padding-top: var(--space-20);
}

/* Watermark */
.footer__watermark {
  position: absolute;
  bottom: -15%;
  left: -8%;
  width: 480px;
  height: 480px;
  background-image: url('../assets/images/logo-symbol.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  opacity: 0.12;
  pointer-events: none;
  filter: sepia(1) saturate(2) hue-rotate(0deg) brightness(0.9);
}

.footer__main {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1fr;
  gap: var(--space-12);
  padding-bottom: var(--space-16);
}

/* Column 1 — brand column */
.footer__brand {
  display: flex;
  flex-direction: column;
}

/* Column 4 — STAY UP TO DATE column */
.footer__col4 {
  display: flex;
  flex-direction: column;
}

.footer__logo {
  display: inline-flex;
  margin-bottom: var(--space-6);
  transition: opacity var(--transition-fast);
}

.footer__logo:hover {
  opacity: 0.8;
}

.footer__logo img {
  height: 44px;
  width: auto;
}

.footer__tagline {
  font-family: var(--font-primary);
  font-weight: var(--weight-regular);
  font-size: var(--text-sm);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.65);
  font-style: normal;
  max-width: 280px;
  margin-bottom: var(--space-8);
}

.footer__social {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.20);
  color: rgba(255, 255, 255, 0.70);
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast);
  font-style: normal;
  text-decoration: none;
}

.footer__social-link:hover {
  background-color: var(--color-orange);
  border-color: var(--color-orange);
  color: var(--color-white);
}

.footer__social-link svg {
  width: 16px;
  height: 16px;
}

.footer__col4 .footer__social {
  margin-top: var(--space-6);
}

/* Navigation columns */
.footer__col-title {
  font-family: var(--font-primary);
  font-weight: var(--weight-bold);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-white);
  font-style: normal;
  margin-bottom: var(--space-6);
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer__link {
  font-family: var(--font-primary);
  font-weight: var(--weight-regular);
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.60);
  font-style: normal;
  text-decoration: none;
  line-height: 1.5;
  transition: color var(--transition-fast);
}

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

/* Newsletter / Contact info in footer */
.footer__contact-item {
  font-family: var(--font-primary);
  font-weight: var(--weight-regular);
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.65);
  font-style: normal;
  line-height: 1.6;
  margin-bottom: var(--space-3);
}

.footer__contact-item a {
  color: var(--color-orange);
  transition: opacity var(--transition-fast);
  text-decoration: none;
  font-style: normal;
}

.footer__contact-item a:hover {
  opacity: 0.75;
}

/* Subscribe form */
.footer__subscribe {
  display: flex;
  gap: var(--space-2);
  margin-top: 0;
}

.footer__subscribe input[type="email"] {
  flex: 1;
  padding: 0.6rem 1rem;
  background: rgba(255, 255, 255, 0.10);
  border: 1.5px solid rgba(255, 255, 255, 0.20);
  border-radius: var(--radius-pill);
  color: var(--color-white);
  font-family: var(--font-primary);
  font-size: var(--text-sm);
  font-style: normal;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.footer__subscribe input[type="email"]::placeholder {
  color: rgba(255, 255, 255, 0.40);
}

.footer__subscribe input[type="email"]:focus {
  outline: none;
  border-color: var(--color-orange);
  background: rgba(255, 255, 255, 0.13);
}

.footer__subscribe button {
  padding: 0.6rem 1.2rem;
  border-radius: var(--radius-pill);
  background-color: var(--color-orange);
  color: var(--color-white);
  font-family: var(--font-primary);
  font-weight: var(--weight-medium);
  font-size: var(--text-sm);
  font-style: normal;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--transition-fast);
}

.footer__subscribe button:hover {
  background-color: var(--color-orange-hover);
}

/* Bottom bar */
.footer__bottom {
  position: relative;
  z-index: 1;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  padding: var(--space-6) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
}

.footer__copy {
  font-family: var(--font-primary);
  font-weight: var(--weight-regular);
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.40);
  font-style: normal;
}

.footer__legal-links {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.footer__legal-link {
  font-family: var(--font-primary);
  font-weight: var(--weight-regular);
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.40);
  font-style: normal;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.footer__legal-link:hover {
  color: var(--color-orange);
}


/* ============================================================
   16. PAGE HEADER (inner pages)
   Used on About, FAQ, Contact, etc.
   ============================================================ */

.page-header {
  position: relative;
  padding: var(--space-20) 0 var(--space-16);
  background-color: var(--color-off-white);
  overflow: hidden;
  border-bottom: 1px solid var(--color-grey-border);
}

.page-header__watermark {
  position: absolute;
  right: -5%;
  bottom: -25%;
  width: 360px;
  height: 360px;
  background-image: url('../assets/images/logo-symbol.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  opacity: 0.10;
  pointer-events: none;
  filter: sepia(1) saturate(3) hue-rotate(0deg);
}

.page-header__inner {
  position: relative;
  z-index: 1;
}

.page-header__eyebrow {
  font-family: var(--font-primary);
  font-weight: var(--weight-bold);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-orange);
  font-style: normal;
  margin-bottom: var(--space-4);
}

.page-header__title {
  font-family: var(--font-primary);
  font-weight: var(--weight-light);
  font-size: clamp(var(--text-display-sm), 6vw, var(--text-display-md));
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.05;
  color: var(--color-black);
  font-style: normal;
  max-width: 700px;
  margin-bottom: var(--space-6);
}

.page-header__lead {
  font-family: var(--font-primary);
  font-weight: var(--weight-regular);
  font-size: var(--text-lg);
  line-height: 1.65;
  color: var(--color-grey-dark);
  font-style: normal;
  max-width: 560px;
}

/* Breadcrumb */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

.breadcrumb__item {
  font-family: var(--font-primary);
  font-weight: var(--weight-regular);
  font-size: var(--text-sm);
  color: var(--color-grey-mid);
  font-style: normal;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.breadcrumb__item:hover {
  color: var(--color-orange);
}

.breadcrumb__sep {
  color: var(--color-grey-light);
  font-size: var(--text-xs);
}

.breadcrumb__item--current {
  color: var(--color-grey-dark);
  pointer-events: none;
}

/* FAQ accordion */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.faq-item {
  border-bottom: 1px solid var(--color-grey-border);
}

.faq-item:first-child {
  border-top: 1px solid var(--color-grey-border);
}

.faq-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-6) 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  gap: var(--space-6);
  font-style: normal;
}

.faq-trigger__question {
  font-family: var(--font-primary);
  font-weight: var(--weight-medium);
  font-size: var(--text-body);
  color: var(--color-black);
  line-height: 1.5;
  font-style: normal;
  transition: color var(--transition-fast);
}

.faq-trigger:hover .faq-trigger__question {
  color: var(--color-orange);
}

.faq-trigger__icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid var(--color-grey-border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    transform var(--transition-base);
  color: var(--color-grey-mid);
  font-style: normal;
}

.faq-item.is-open .faq-trigger__icon {
  background-color: var(--color-orange);
  border-color: var(--color-orange);
  color: var(--color-white);
  transform: rotate(45deg);
}

.faq-body {
  display: none;
  padding-bottom: var(--space-6);
  font-family: var(--font-primary);
  font-weight: var(--weight-regular);
  font-size: var(--text-body);
  line-height: 1.75;
  color: var(--color-grey-dark);
  font-style: normal;
  max-width: 720px;
}

.faq-item.is-open .faq-body {
  display: block;
}

/* Contact form */
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.form-label {
  font-family: var(--font-primary);
  font-weight: var(--weight-medium);
  font-size: var(--text-sm);
  color: var(--color-black);
  letter-spacing: 0.03em;
  font-style: normal;
}

.form-input,
.form-textarea,
.form-select {
  width: 100%;
  padding: 0.8rem 1.1rem;
  background-color: var(--color-white);
  border: 1.5px solid var(--color-grey-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-primary);
  font-weight: var(--weight-regular);
  font-size: var(--text-body);
  color: var(--color-black);
  font-style: normal;
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
  outline: none;
  -webkit-appearance: none;
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--color-grey-light);
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  border-color: var(--color-orange);
  box-shadow: 0 0 0 3px rgba(254, 164, 75, 0.12);
}

.form-textarea {
  min-height: 140px;
  resize: vertical;
}


/* ============================================================
   17. ANIMATIONS & TRANSITIONS
   ============================================================ */

/* Fade up — used for section entries */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-32px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.94);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Pulse for orange dot in label tags */
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%       { transform: scale(1.4); opacity: 0.7; }
}

/* Apply animations */
.anim-fade-up {
  animation: fadeUp 0.65s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.anim-fade-in {
  animation: fadeIn 0.5s ease both;
}

.anim-slide-left {
  animation: slideInLeft 0.6s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.anim-scale-in {
  animation: scaleIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* Staggered children */
.anim-stagger > *:nth-child(1) { animation-delay: 0ms; }
.anim-stagger > *:nth-child(2) { animation-delay: 80ms; }
.anim-stagger > *:nth-child(3) { animation-delay: 160ms; }
.anim-stagger > *:nth-child(4) { animation-delay: 240ms; }
.anim-stagger > *:nth-child(5) { animation-delay: 320ms; }
.anim-stagger > *:nth-child(6) { animation-delay: 400ms; }

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .hero__bg,
  .editorial__image img {
    transition: none;
  }
}


/* ============================================================
   18. MOBILE RESPONSIVE (max-width: 768px)
   ============================================================ */

@media (max-width: 1100px) {

  :root {
    --container-padding: var(--space-6);
    --text-display-lg:   3.75rem;
    --text-display-md:   3rem;
    --text-display-sm:   2.5rem;
  }

  .nav__links {
    display: none;
  }

  .nav__cta {
    display: none;
  }

  .nav__hamburger {
    display: flex;
  }

  .footer__main {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-10);
  }

  .editorial {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .editorial--reverse {
    direction: ltr;
  }

  .editorial__image {
    min-height: 400px;
  }

  .editorial__content {
    padding: var(--space-12) var(--space-8);
  }

  .stats__inner {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
  }

  .quotes__grid {
    grid-template-columns: 1fr;
    max-width: 600px;
    margin: 0 auto;
  }

  .cta-band__inner {
    flex-direction: column;
    text-align: center;
  }

  .cta-band__sub {
    margin: 0 auto;
  }

  .cta-band__actions {
    justify-content: center;
  }
}

@media (max-width: 768px) {

  :root {
    --container-padding: var(--space-5);
    --nav-height:        64px;
    --watermark-size:    320px;
    --text-display-lg:   2.75rem;
    --text-display-md:   2.25rem;
    --text-display-sm:   1.875rem;
  }

  /* Nav */
  .nav__hamburger {
    display: flex;
  }

  /* Hero */
  .hero {
    min-height: 90vh;
  }

  .hero--short {
    min-height: 55vh;
  }

  .hero__headline {
    font-size: clamp(2rem, 9vw, 2.75rem);
    max-width: 100%;
  }

  .hero__lead {
    font-size: var(--text-body);
    max-width: 100%;
  }

  .hero__cta {
    flex-direction: column;
    align-items: flex-start;
  }

  .hero__cta .btn {
    width: 100%;
    justify-content: center;
  }

  /* Editorial */
  .editorial {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .editorial__image {
    min-height: 280px;
  }

  .editorial__content {
    padding: var(--space-10) var(--space-6);
  }

  .editorial__title {
    font-size: var(--text-display-sm);
  }

  /* Stats */
  .stats__inner {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .stat-card {
    padding: var(--space-8) var(--space-6);
  }

  .stat-card__number {
    font-size: 3.5rem;
  }

  /* Members grid */
  .members__grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: var(--space-3);
  }

  .members__filters {
    gap: var(--space-2);
  }

  /* Quotes */
  .quotes__grid {
    grid-template-columns: 1fr;
  }

  /* CTA band */
  .cta-band {
    padding: var(--space-16) 0;
  }

  .cta-band__inner {
    flex-direction: column;
    text-align: center;
  }

  .cta-band__title {
    font-size: var(--text-display-sm);
  }

  .cta-band__sub {
    max-width: 100%;
    margin: 0 auto;
  }

  .cta-band__actions {
    flex-direction: column;
    width: 100%;
    justify-content: center;
  }

  .cta-band__actions .btn {
    width: 100%;
  }

  /* Footer */
  .footer__main {
    grid-template-columns: 1fr;
    gap: var(--space-8);
    padding-bottom: var(--space-10);
  }

  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
  }

  .footer__legal-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    width: 100%;
  }

  .footer__legal-links a,
  .footer__legal-links span {
    display: block;
    width: 100%;
    text-align: center;
  }

  /* Page header */
  .page-header__title {
    font-size: var(--text-display-sm);
  }

  .page-header__lead {
    font-size: var(--text-body);
  }

  /* Section spacing */
  .section {
    padding-top: var(--space-16);
    padding-bottom: var(--space-16);
  }

  .section--lg {
    padding-top: var(--space-20);
    padding-bottom: var(--space-20);
  }

  /* Grid overrides */
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }

  /* Typography scale down */
  .t-display--lg  { font-size: var(--text-display-sm); }
  .t-display--md  { font-size: var(--text-2xl); }
  .t-headline     { font-size: var(--text-xl); }
  .t-headline--lg { font-size: var(--text-display-sm); }

  /* Editorial tab panel — allow natural height on mobile */
  .editorial__tab-panels {
    min-height: auto;
  }
}

@media (max-width: 480px) {

  :root {
    --container-padding: var(--space-4);
  }

  .hero__headline {
    font-size: 2rem;
  }

  .btn--lg {
    padding: 0.875rem 1.75rem;
    font-size: var(--text-body);
  }

  .stat-card__number {
    font-size: 3rem;
  }

  .members__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer__subscribe {
    flex-direction: column;
  }

  .footer__subscribe input,
  .footer__subscribe button {
    width: 100%;
  }
}