/* ============================================================
   FONT FACES — Aileron, CC0 public domain
   Source: TipoType / Sora Sagano (Dot Colon)
   ============================================================ */

   @font-face {
    font-family: "Aileron";
    src: url("assets/fonts/Aileron-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
  
  @font-face {
    font-family: "Aileron";
    src: url("assets/fonts/Aileron-Italic.woff2") format("woff2");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
  }
  
  @font-face {
    font-family: "Aileron";
    src: url("assets/fonts/Aileron-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }
  
  @font-face {
    font-family: "Aileron";
    src: url("assets/fonts/Aileron-Heavy.woff2") format("woff2");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
  }
  
  /* ============================================================
     AERODROME — Design Tokens
     ------------------------------------------------------------
     Source: design.md (Mid-Century Kinetic / Jet-Age Editorial)
     Every component references these. Change a token, change
     the system. Do not introduce ad-hoc values elsewhere.
     ============================================================ */
  
  :root {
    /* --------------------------------------------------------
       COLOR — Flat fields, no gradients, no shadows.
       Container variants are lighter siblings of their parent,
       used for the "overlap" stacking pattern (see design.md
       §4 Layering Principle).
       -------------------------------------------------------- */
  
    /* Primary — teal */
    --color-primary: #2a9d8f;
    --color-primary-container: #38b0a1;
    --color-on-primary: #ffffff;
    --color-on-primary-container: #f4fffc;
    --color-inverse-primary: #7ad6cb;
    --color-primary-fixed: #96f3e7;
    --color-primary-fixed-dim: #7ad6cb;
    --color-on-primary-fixed: #00201d;
    --color-on-primary-fixed-variant: #00504a;

    /* Secondary — muted teal-green */
    --color-secondary: #43655b;
    --color-secondary-container: #c5ebde;
    --color-on-secondary: #ffffff;
    --color-on-secondary-container: #496b61;
    --color-secondary-fixed: #c5ebde;
    --color-secondary-fixed-dim: #aacec2;
    --color-on-secondary-fixed: #002019;
    --color-on-secondary-fixed-variant: #2b4d44;

    /* Tertiary — rust */
    --color-tertiary: #8e492e;
    --color-tertiary-container: #ac6044;
    --color-on-tertiary: #ffffff;
    --color-on-tertiary-container: #fffbff;
    --color-tertiary-fixed: #ffdbcf;
    --color-tertiary-fixed-dim: #ffb59b;
    --color-on-tertiary-fixed: #380d00;
    --color-on-tertiary-fixed-variant: #74341b;

    /* Error */
    --color-error: #ba1a1a;
    --color-on-error: #ffffff;
    --color-error-container: #ffdad6;
    --color-on-error-container: #93000a;

    /* Surface — MCM Sage Green canvas, ramp derived from it */
    --color-surface: #c9d6c6;
    --color-surface-dim: #adb9aa;
    --color-surface-bright: #d9e6d6;
    --color-surface-container-lowest: #ffffff;
    --color-surface-container-low: #b8e0d2;
    --color-surface-container: #aed4c7;
    --color-surface-container-high: #a4c9bd;
    --color-surface-container-highest: #9abdb1;
    --color-surface-variant: #aacec2;
    --color-surface-tint: #2a9d8f;
    --color-on-surface: #181c1c;
    --color-on-surface-variant: #3e4947;
    --color-inverse-surface: #2d3130;
    --color-inverse-on-surface: #eef2f0;
    --color-background: #c9d6c6;
    --color-on-background: #181c1c;

    /* Outline */
    --color-outline: #6e7977;
    --color-outline-variant: #bdc9c6;
  
    /* --------------------------------------------------------
       SPACING — 4px base unit. Scale is non-linear to encourage
       bold rhythm choices. Do not use values between these tokens.
       -------------------------------------------------------- */
    --space-1: 0.25rem;   /*  4px */
    --space-2: 0.5rem;    /*  8px */
    --space-3: 0.75rem;   /* 12px */
    --space-4: 1rem;      /* 16px */
    --space-6: 1.5rem;    /* 24px */
    --space-8: 2rem;      /* 32px */
    --space-12: 3rem;     /* 48px */
    --space-16: 4rem;     /* 64px */
    --space-24: 6rem;     /* 96px */
    --space-32: 8rem;     /* 128px */
  
    /* --------------------------------------------------------
       TYPOGRAPHY — Aileron throughout, hierarchy by weight & scale.
       -------------------------------------------------------- */
  
    --font-display: "Aileron", system-ui, -apple-system, sans-serif;
    --font-body: "Aileron", system-ui, -apple-system, sans-serif;
    --font-label: "Aileron", system-ui, -apple-system, sans-serif;
  
    /* Type scale — display sizes are deliberately oversized */
    --text-label-sm: 0.75rem;   /* 12px */
    --text-label-md: 0.875rem;  /* 14px */
    --text-body-sm: 0.9375rem;  /* 15px */
    --text-body-md: 1.0625rem;  /* 17px */
    --text-body-lg: 1.25rem;    /* 20px */
    --text-title-sm: 1.5rem;    /* 24px */
    --text-title-md: 2rem;      /* 32px */
    --text-title-lg: 2.75rem;   /* 44px */
    --text-display-sm: 3.5rem;  /* 56px */
    --text-display-md: 4.5rem;  /* 72px */
    --text-display-lg: 6rem;    /* 96px — hero moments */
    --text-display-xl: 8rem;    /* 128px — single-line hero */
  
    /* Weights */
    --weight-regular: 400;
    --weight-bold: 700;
    --weight-black: 900;
  
    /* Line heights */
    --leading-tight: 0.95;      /* Display headlines, architectural */
    --leading-snug: 1.15;       /* Titles */
    --leading-normal: 1.5;      /* Body text */
    --leading-loose: 1.7;       /* Long-form, generous reading */
  
    /* Letter spacing */
    --tracking-tight: -0.02em;  /* Display, compresses for impact */
    --tracking-normal: 0;
    --tracking-wide: 0.05em;    /* Labels, mimics technical markings */
    --tracking-widest: 0.15em;  /* All-caps utility labels */
  
    /* --------------------------------------------------------
       LAYOUT — Breakpoints, max widths, geometric utilities.
       -------------------------------------------------------- */
  
    /* Breakpoints — used in @media queries via min-width */
    --bp-sm: 640px;
    --bp-md: 768px;
    --bp-lg: 1024px;
    --bp-xl: 1280px;
  
    /* Content max-width — prevents text running too wide */
    --max-content: 72rem;       /* 1152px */
    --max-text: 38rem;          /* 608px, ~65ch for body copy */
  
    /* Diagonal angles — the Jet-Age cuts (§4 design.md) */
    --angle-shallow: 15deg;
    --angle-steep: 30deg;
  
    /* --------------------------------------------------------
       RADIUS — Strictly zero. Listed for documentation only.
       -------------------------------------------------------- */
    --radius: 0;
  
    /* --------------------------------------------------------
       MOTION — Subtle, mechanical. No spring physics.
       -------------------------------------------------------- */
    --duration-fast: 120ms;
    --duration-base: 200ms;
    --duration-slow: 400ms;
    --easing-standard: cubic-bezier(0.4, 0, 0.2, 1);

    /* --------------------------------------------------------
       LAYOUT SHELLS — component sizing tokens.
       Add tokens here instead of inlining values in sections.
       -------------------------------------------------------- */
    --container-max: var(--max-content);
    --container-inline: var(--space-6);
    --section-block: var(--space-24);
    --section-block-tight: var(--space-16);
    --rule-thickness: 1px;
    --eyebrow-rule: var(--space-8);
    --button-pad-y: var(--space-3);
    --button-pad-x: var(--space-6);
    --bullet-mark: 1rem;

    /* Waitlist form */
    --hero-max-width: var(--max-content);
  }
  
  /* ============================================================
     DARK THEME — token overrides only.
     Driven by [data-theme="dark"] on <html>. Components reference
     the same tokens, so flipping these cascades everywhere.
     ============================================================ */

  :root[data-theme="dark"] {
    /* Surfaces — neutral dark grays, anchored to inverse-surface */
    --color-surface: #1a1d1f;
    --color-surface-dim: #131517;
    --color-surface-bright: #404446;
    --color-surface-container-lowest: #0d1011;
    --color-surface-container-low: #22262a;
    --color-surface-container: #2d3133;
    --color-surface-container-high: #383c3e;
    --color-surface-container-highest: #434749;
    --color-surface-variant: #434749;
    --color-on-surface: #eef1f3;
    --color-on-surface-variant: #c4b0ad;
    --color-inverse-surface: #eef1f3;
    --color-inverse-on-surface: #2d3133;
    --color-background: #1a1d1f;
    --color-on-background: #eef1f3;

    /* Primary lifts to the fixed light teal so CTAs stay visible */
    --color-primary: #7ad6cb;
    --color-on-primary: #00201d;
    --color-primary-container: #00504a;
    --color-on-primary-container: #96f3e7;

    /* Outlines */
    --color-outline: #889390;
    --color-outline-variant: #3e4947;
  }

  /* Paper-grain noise inverts on dark for a soft linen feel. */
  [data-theme="dark"] body {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 0.95 0 0 0 0 0.85 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  /* Targeted dark-mode component overrides where token-swap alone
     would collapse contrast (input bg = surface bg, etc.) */
  [data-theme="dark"] .specialist__role {
    color: var(--color-secondary-fixed-dim);
  }

  /* ============================================================
     BASE STYLES — minimal reset + foundational defaults
     ============================================================ */
  
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  
  html {
    /* 1rem = 16px. Don't change without auditing every rem value. */
    font-size: 100%;
  }
  
  body {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--text-body-md);
    line-height: var(--leading-normal);
    color: var(--color-on-surface);
    background-color: var(--color-surface);
  
    /* The linen/paper grain — SVG noise, no image dependency */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.08 0 0 0 0 0.05 0 0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat: repeat;
  
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }
  
  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    margin: 0;
  }
  
  p {
    margin: 0;
    max-width: var(--max-text);
  }
  
  a {
    color: inherit;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.2em;
  }
  
  img, svg {
    display: block;
    max-width: 100%;
    height: auto;
  }
  
  /* Strip default button styles — we'll style buttons explicitly */
  button {
    font: inherit;
    color: inherit;
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
    cursor: pointer;
  }
  
  /* Accessibility: respect reduced-motion preference */
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }

  /* ============================================================
     SHARED PRIMITIVES — container, eyebrow, button, section head
     ============================================================ */

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

  /* Eyebrow label: small caps with flanking horizontal rules */
  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    margin: 0;
    font-family: var(--font-label);
    font-size: var(--text-label-sm);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--color-on-surface-variant);
  }

  .eyebrow::before,
  .eyebrow--centered::after {
    content: "";
    display: block;
    width: var(--eyebrow-rule);
    height: var(--rule-thickness);
    background: currentColor;
    opacity: 0.5;
  }

  .eyebrow--centered {
    display: flex;
    justify-content: center;
  }

  /* Buttons */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--button-pad-y) var(--button-pad-x);
    font-family: var(--font-label);
    font-size: var(--text-body-sm);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    text-decoration: none;
    border-radius: var(--radius);
    transition: background-color var(--duration-fast) var(--easing-standard),
                color var(--duration-fast) var(--easing-standard);
  }

  .btn--primary {
    background: var(--color-primary);
    color: var(--color-on-primary);
  }
  .btn--primary:hover,
  .btn--primary:focus-visible {
    background: var(--color-primary-container);
  }

  .btn--text {
    padding-inline: 0;
    background: transparent;
    color: var(--color-on-surface);
    text-decoration: underline;
    text-decoration-thickness: var(--rule-thickness);
    text-underline-offset: 0.35em;
  }
  .btn--text:hover {
    color: var(--color-secondary);
  }

  /* Theme switch — labeled toggle in the header */
  .theme-switch {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    font-family: var(--font-label);
    font-size: var(--text-label-md);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-on-surface);
  }
  .theme-switch__label {
    opacity: 0.4;
    transition: opacity var(--duration-fast) var(--easing-standard);
  }
  .theme-switch__label--light {
    opacity: 1;
  }
  [data-theme="dark"] .theme-switch__label--light {
    opacity: 0.4;
  }
  [data-theme="dark"] .theme-switch__label--dark {
    opacity: 1;
  }
  .theme-switch__track {
    position: relative;
    width: 2.75rem;
    height: 1.375rem;
    padding: 0;
    background: var(--color-surface-container-high);
    border: var(--rule-thickness) solid var(--color-outline);
    border-radius: 999px;
    cursor: pointer;
  }
  .theme-switch__knob {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(1.375rem - 2 * var(--rule-thickness));
    height: calc(1.375rem - 2 * var(--rule-thickness));
    background: var(--color-on-surface);
    border-radius: 50%;
    transition: left var(--duration-base) var(--easing-standard);
  }
  [data-theme="dark"] .theme-switch__knob {
    left: calc(100% - 1.375rem + 2 * var(--rule-thickness));
  }
  .theme-switch__track:focus-visible {
    outline: var(--rule-thickness) solid var(--color-primary);
    outline-offset: var(--rule-thickness);
  }

  /* Section head — eyebrow + headline + lede, centered or stacked */
  .section-head {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin: 0 auto;
    max-width: var(--max-text);
  }
  .section-head--centered {
    text-align: center;
    align-items: center;
  }
  .section-head__title {
    font-size: var(--text-display-sm);
    font-weight: var(--weight-black);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--color-on-surface);
  }
  .section-head__lede {
    font-size: var(--text-body-md);
    line-height: var(--leading-normal);
    color: var(--color-on-surface-variant);
    max-width: var(--max-text);
  }

  /* ============================================================
     SITE HEADER
     ============================================================ */

  .site-header {
    position: relative;
    z-index: 10;
    padding-block: var(--space-8) var(--space-6);
    background: var(--color-surface);
  }
  .site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-inline);
  }
  .brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
  }
  .brand__logo {
    display: block;
    height: var(--space-12);
    width: auto;
    max-width: none;
  }

  /* ============================================================
     NAV MENU — top-right trigger + attached dropdown card
     ============================================================ */

  .nav-menu {
    position: relative;
  }
  .nav-menu__trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    font-family: var(--font-label);
    font-size: var(--text-label-md);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-on-surface);
    cursor: pointer;
    transition: color var(--duration-fast) var(--easing-standard);
  }
  .nav-menu__trigger:hover,
  .nav-menu__trigger:focus-visible {
    color: var(--color-primary);
  }
  .nav-menu__trigger:focus-visible {
    outline: var(--rule-thickness) solid var(--color-primary);
    outline-offset: var(--rule-thickness);
  }
  .nav-menu__icon {
    display: inline-flex;
    flex-direction: column;
    justify-content: space-between;
    width: 1.125rem;
    height: 0.75rem;
  }
  .nav-menu__icon span {
    display: block;
    width: 100%;
    height: 2px;
    background: currentColor;
    transition: transform var(--duration-base) var(--easing-standard),
                opacity var(--duration-fast) var(--easing-standard);
  }
  .nav-menu__trigger--open .nav-menu__icon span:nth-child(1) {
    transform: translateY(calc(0.375rem - 1px)) rotate(45deg);
  }
  .nav-menu__trigger--open .nav-menu__icon span:nth-child(2) {
    opacity: 0;
  }
  .nav-menu__trigger--open .nav-menu__icon span:nth-child(3) {
    transform: translateY(calc(-0.375rem + 1px)) rotate(-45deg);
  }

  /* Panel pins to the trigger and forces a fixed white / dark palette
     regardless of page theme by overriding the relevant tokens locally. */
  .nav-menu__panel {
    --color-surface-container-low: #ffffff;
    --color-surface-container-high: #c9d6c6;
    --color-on-surface: #181c1c;
    --color-on-surface-variant: #3e4947;
    --color-outline: #6e7977;
    --color-outline-variant: #bdc9c6;

    position: absolute;
    top: calc(100% + var(--space-3));
    right: 0;
    width: 18rem;
    max-width: calc(100vw - 2 * var(--container-inline));
    background: #ffffff;
    color: #181c1c;
    border: var(--rule-thickness) solid #bdc9c6;
    border-radius: 6px;
    z-index: 20;
  }
  .nav-menu__panel[hidden] {
    display: none;
  }
  .nav-menu__inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    padding: var(--space-6);
  }
  .nav-menu__theme {
    align-self: flex-start;
    color: #181c1c;
  }
  .nav-menu__section {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }
  .nav-menu__section-title {
    font-family: var(--font-label);
    font-size: var(--text-label-sm);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: #3e4947;
    margin: 0;
    padding-bottom: var(--space-2);
    border-bottom: var(--rule-thickness) solid #bdc9c6;
  }
  .nav-menu__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }
  .nav-menu__link {
    display: inline-block;
    font-family: var(--font-display);
    font-size: var(--text-body-lg);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-tight);
    color: #181c1c;
    text-decoration: none;
    padding: var(--space-1) 0;
    transition: color var(--duration-fast) var(--easing-standard);
  }
  .nav-menu__link:hover,
  .nav-menu__link:focus-visible {
    color: var(--color-primary);
  }
  .nav-menu__link[aria-current="page"] {
    color: var(--color-primary);
  }
  .hero__cta .btn {
    padding: var(--space-4) var(--space-8);
    font-size: var(--text-body-md);
  }

  /* ============================================================
     HERO
     ============================================================ */

  .hero {
    padding-block: var(--space-12) var(--section-block-tight);
    background: var(--color-surface);
  }
  .hero__inner {
    width: 100%;
    max-width: var(--hero-max-width);
    margin-inline: auto;
    padding-inline: var(--container-inline);
  }
  .hero__copy {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
  }
  .hero__headline {
    font-size: var(--text-display-xl);
    font-weight: var(--weight-black);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--color-on-surface);
    white-space: nowrap;
  }
  .hero__subhead {
    font-size: var(--text-title-sm);
    font-weight: var(--weight-regular);
    line-height: var(--leading-snug);
    color: var(--color-on-surface-variant);
    max-width: var(--max-text);
  }
  .hero__headline-mark {
    display: inline-block;
    padding: 0 var(--space-3);
    margin: 0 var(--space-1);
    background: var(--color-primary-container);
    color: var(--color-on-primary-container);
  }
  .hero__headline-tm {
    font-size: 0.8em;
    vertical-align: baseline;
  }
  .hero__bullets {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    font-size: var(--text-body-md);
    color: var(--color-on-surface);
  }
  .hero__bullets li {
    position: relative;
    padding-left: calc(var(--bullet-mark) + var(--space-3));
  }
  .hero__bullets li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.5em;
    width: var(--bullet-mark);
    height: var(--bullet-mark);
    background: var(--color-primary);
    clip-path: polygon(20% 50%, 45% 75%, 85% 25%, 75% 15%, 45% 55%, 30% 40%);
  }
  /* ============================================================
     SPECIALISTS — five-column cast
     ============================================================ */

  .specialists {
    padding-block: var(--section-block-tight) var(--section-block);
    background: var(--color-surface);
  }
  .specialists__inner {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-inline);
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
  }
  .specialists__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: auto auto auto;
    column-gap: var(--space-8);
    row-gap: var(--space-3);
  }
  .specialist {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    justify-items: center;
    align-items: start;
    text-align: center;
  }
  .specialist__name {
    font-size: var(--text-title-sm);
    font-weight: var(--weight-black);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-tight);
    color: var(--color-on-surface);
  }
  .specialist__role {
    font-family: var(--font-label);
    font-size: var(--text-label-sm);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--color-secondary);
  }
  .specialist__desc {
    font-size: var(--text-body-sm);
    line-height: var(--leading-normal);
    color: var(--color-on-surface-variant);
    max-width: 100%;
  }

  /* ============================================================
     GAP — "The gap we fill" intro
     ============================================================ */

  .gap {
    padding-block: var(--section-block);
    background: var(--color-surface);
  }
  .gap__inner {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-inline);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-8);
  }
  .gap__headline {
    font-size: var(--text-display-sm);
    font-weight: var(--weight-black);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-tight);
    color: var(--color-on-surface);
    max-width: var(--max-content);
  }
  .gap__emph {
    font-style: italic;
    color: var(--color-on-surface);
  }
  .gap__emph--strong {
    background: var(--color-primary-container);
    color: var(--color-on-primary-container);
    font-style: italic;
    padding: 0 var(--space-2);
  }
  .gap__lede {
    font-size: var(--text-body-md);
    line-height: var(--leading-normal);
    color: var(--color-on-surface-variant);
    max-width: var(--max-text);
  }

  /* ============================================================
     LEGAL PAGE — long-form policy / terms content
     ============================================================ */

  .legal-page {
    padding-block: var(--space-12) var(--section-block-tight);
    background: var(--color-surface);
  }
  .legal-page__inner {
    width: 100%;
    max-width: 52rem;
    margin-inline: auto;
    padding-inline: var(--container-inline);
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
  }
  .legal-page__title {
    font-size: var(--text-display-sm);
    font-weight: var(--weight-black);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--color-on-surface);
  }
  .legal-page__effective {
    font-family: var(--font-label);
    font-size: var(--text-label-sm);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--color-on-surface-variant);
  }
  .legal-page__intro {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }
  .legal-page__intro p {
    font-size: var(--text-body-md);
    line-height: var(--leading-loose);
    color: var(--color-on-surface);
    max-width: 100%;
  }
  .legal-page__section {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding-top: var(--space-8);
    border-top: var(--rule-thickness) solid var(--color-outline-variant);
  }
  .legal-page__section-title {
    font-size: var(--text-title-sm);
    font-weight: var(--weight-bold);
    line-height: var(--leading-snug);
    color: var(--color-on-surface);
  }
  .legal-page__subhead {
    font-family: var(--font-label);
    font-size: var(--text-label-sm);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--color-secondary);
    margin: var(--space-2) 0 0;
  }
  .legal-page__section p {
    font-size: var(--text-body-md);
    line-height: var(--leading-loose);
    color: var(--color-on-surface-variant);
    max-width: 100%;
  }
  .legal-page__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }
  .legal-page__list li {
    position: relative;
    padding-left: calc(var(--bullet-mark) + var(--space-3));
    font-size: var(--text-body-md);
    line-height: var(--leading-normal);
    color: var(--color-on-surface-variant);
  }
  .legal-page__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.5em;
    width: var(--bullet-mark);
    height: var(--bullet-mark);
    background: var(--color-primary);
    clip-path: polygon(20% 50%, 45% 75%, 85% 25%, 75% 15%, 45% 55%, 30% 40%);
  }
  .legal-page__contact {
    font-style: normal;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    font-size: var(--text-body-md);
    line-height: var(--leading-normal);
    color: var(--color-on-surface);
  }
  .legal-page__contact a {
    color: var(--color-primary);
    text-decoration-thickness: 1px;
  }

  /* ============================================================
     LEGAL FOOTER — muted disclaimer at the bottom of the page
     ============================================================ */

  .legal {
    padding-block: var(--section-block-tight) var(--space-12);
    background: var(--color-surface);
    border-top: var(--rule-thickness) solid var(--color-outline-variant);
  }
  .legal__inner {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-inline);
  }
  .legal__body {
    max-width: var(--max-text);
    margin-inline: auto;
    font-size: var(--text-label-md);
    line-height: var(--leading-loose);
    color: var(--color-on-surface-variant);
    opacity: 0.75;
    text-align: center;
  }

  /* ============================================================
     RESPONSIVE — mobile first; desktop fidelity is the priority
     ============================================================ */

  @media (max-width: 1024px) {
    .hero__headline {
      font-size: var(--text-display-md);
      white-space: normal;
    }
    .specialists__grid {
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: none;
      column-gap: var(--space-8);
      row-gap: var(--space-12);
    }
    .specialist {
      display: flex;
      flex-direction: column;
      grid-row: auto;
      grid-template-rows: none;
      gap: var(--space-3);
    }
  }

  @media (max-width: 640px) {
    :root {
      --section-block: var(--space-16);
    }
    .hero {
      padding-block: var(--space-8) var(--section-block);
    }
    .hero__headline {
      font-size: var(--text-display-sm);
    }
    .section-head__title,
    .gap__headline {
      font-size: var(--text-title-lg);
    }
    .specialists__grid {
      grid-template-columns: 1fr;
      gap: var(--space-12);
    }
    .nav-menu__trigger-label {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }
    .legal-page__title {
      font-size: var(--text-title-lg);
    }
  }