/* ==========================================================================
   Design tokens — Future State Performance (site-v3, premium tune 2026-10-15)
   Colours from Figma BfXzfapKtNusKXflQn976p. Sizes, spacing, radii follow ../../FST-DESIGN.md.
   Rule: NO new colours. Every rgba()/gradient below is built from the palette colours only.
   Shared by every page. Page CSS must use var(--…) from here, never magic numbers.
   ========================================================================== */

/* Size-matched fallback for Bebas Neue (display-swap): Arial scaled to Bebas' measured average cap width (0.5716), so headings wrap the same
   before and after the web font arrives (no layout shift). Measured 2026-10-15; no extra file. */
@font-face {
  font-family: "Bebas Fallback";
  src: local("Arial"), local("Liberation Sans"), local("Helvetica");
  size-adjust: 57.2%; ascent-override: 157%; descent-override: 52%; line-gap-override: 0%;
}

:root {
  /* ---- Colors (palette — the only hex values on the site) ---- */
  --color-navy-900: #020615;        /* header bg, body text */
  --color-blue-700: #183d89;        /* brand blue (sections, buttons, headings) */
  --color-yellow-400: #ffc10e;      /* accent / CTA */
  --color-white: #ffffff;
  --color-neutral-100: #f4f4f4;     /* image slots */
  --color-neutral-200: #e6e8ee;     /* media placeholders */
  --color-neutral-300: #f1f3f7;     /* Figma var Neutral/300 */
  --color-primary: #2388ff;         /* Figma var Primary/Primary — glows only */
  --color-red-play: #ff0033;        /* video play button */
  --color-black: #000000;
  --color-navy-800: #0d2050;        /* dark gradient end (contact office, white paper, playbook dark card) */
  --color-blue-800: #12306d;        /* .btn--blue hover, blue band gradient end */
  --color-neutral-250: #e4e7ee;     /* figure / media frame bg */
  --color-yellow-500: #f2b500;      /* yellow pill hover */

  /* ---- Hairlines (navy / white at alpha) ---- */
  --hairline-light: rgba(2, 6, 21, 0.1);          /* 1px lines on light bands (.08–.14) */
  --hairline-light-strong: rgba(2, 6, 21, 0.14);  /* rings, input borders on light */
  --hairline-dark: rgba(255, 255, 255, 0.14);     /* 1px lines on dark bands (.12–.18) */
  --hairline-dark-strong: rgba(255, 255, 255, 0.18);
  --color-rule: var(--hairline-light);            /* thin divider lines on light bg */
  --color-faq-line: var(--hairline-light);        /* FAQ accordion dividers */
  --color-hairline: var(--hairline-light);        /* 1px card / FAQ borders (was solid #e4e7ee) */
  --color-line-strong: var(--hairline-light-strong);   /* rings/dots on light */
  --color-border-dark: var(--hairline-dark);      /* header hairline */
  --color-line-on-dark: var(--hairline-dark-strong);   /* dividers on dark */
  --color-ring-on-dark: rgba(255, 255, 255, 0.4); /* icon-button rings, checkbox */
  --color-hover-on-dark: rgba(255, 255, 255, 0.1);  /* icon-button hover */
  --color-header-bg: rgba(2, 6, 21, 0.72);        /* glass header (was .9) */
  --color-media-bg: var(--color-navy-900);        /* behind photos/video */

  /* ---- Form fields ---- */
  --color-input-bg: rgba(2, 6, 21, 0.03);         /* calm input on light (navy at 3%) */
  --color-input-border: var(--hairline-light-strong);
  --color-placeholder: rgba(2, 6, 21, 0.55);
  --color-error: #c62828;           /* error text/border on light bg */
  --color-error-on-dark: #ffb4a8;   /* error text/border on dark bg */
  --input-on-dark-bg: rgba(2, 6, 21, 0.35);
  --input-on-dark-line: rgba(255, 255, 255, 0.28);
  --focus-ring-light: 0 0 0 4px rgba(24, 61, 137, 0.18);
  --focus-ring-dark: 0 0 0 4px rgba(255, 193, 14, 0.3);

  /* ---- Text colours — 8 roles only ----
     light bands: text / text-muted / brand / brand-faint
     dark bands:  on-dark / on-dark-muted / on-dark-faint / accent (yellow) */
  --color-text: #020615;
  --color-text-muted: rgba(2, 6, 21, 0.72);
  --color-brand-faint: rgba(24, 61, 137, 0.25);   /* big decorative numbers */
  --color-on-dark: #ffffff;
  --color-on-dark-muted: rgba(255, 255, 255, 0.80);
  --color-on-dark-faint: rgba(255, 255, 255, 0.55);
  /* legacy aliases -> the roles above (kept so old selectors keep working) */
  --color-text-soft: var(--color-text-muted);
  --color-text-body: var(--color-text-muted);
  --color-text-label: var(--color-text-muted);
  --color-label-muted: var(--color-text-muted);
  --color-parchment: var(--color-neutral-100);

  /* ---- Surfaces: cards ---- */
  --glass-bg: rgba(255, 255, 255, 0.06);          /* glass card on a dark band */
  --glass-line: var(--hairline-dark-strong);
  --glass-blur: 12px;
  --glass-photo-bg: rgba(2, 6, 21, 0.34);         /* card over a photo */
  --glass-photo-line: rgba(255, 255, 255, 0.3);
  --tint-brand: rgba(24, 61, 137, 0.05);          /* open FAQ, selected row on light */
  --tint-brand-strong: rgba(24, 61, 137, 0.1);    /* hover fill for ghost buttons on light */
  --card-pad: var(--space-6);       /* text cards */
  --card-pad-sm: var(--space-5);    /* small tiles + media-card bodies */
  --panel-pad: var(--space-8);      /* wide banner panels (CTA, newsletter) */

  /* ---- Depth recipes — gradients + glows from palette colours only ---- */
  --glow-primary: radial-gradient(60% 50% at 50% 0%, rgba(35, 136, 255, 0.22) 0%, rgba(35, 136, 255, 0) 100%);
  --glow-primary-soft: radial-gradient(50% 40% at 50% 0%, rgba(35, 136, 255, 0.14) 0%, rgba(35, 136, 255, 0) 100%);
  --glow-yellow: radial-gradient(40% 30% at 85% 100%, rgba(255, 193, 14, 0.10) 0%, rgba(255, 193, 14, 0) 100%);
  --glow-blue-corner: radial-gradient(45% 45% at 100% 100%, rgba(24, 61, 137, 0.55) 0%, rgba(24, 61, 137, 0) 100%);
  --gradient-hero: var(--glow-primary), linear-gradient(180deg, var(--color-navy-900) 0%, var(--color-navy-800) 55%, var(--color-blue-700) 100%);
  --gradient-hero-flat: linear-gradient(180deg, var(--color-navy-900) 0%, var(--color-navy-800) 55%, var(--color-blue-700) 100%);
  --gradient-dark: linear-gradient(180deg, var(--color-navy-900) 0%, var(--color-navy-800) 100%);
  --gradient-dark-glow: var(--glow-primary-soft), linear-gradient(180deg, var(--color-navy-900) 0%, var(--color-navy-800) 100%);
  --gradient-band-blue: var(--glow-primary), var(--glow-yellow), linear-gradient(180deg, var(--color-blue-700) 0%, var(--color-blue-800) 100%);
  --gradient-band-blue-flat: linear-gradient(180deg, var(--color-blue-700) 0%, var(--color-blue-800) 100%);
  --gradient-menu: var(--glow-primary-soft), linear-gradient(180deg, var(--color-navy-900) 0%, var(--color-navy-800) 100%);
  --gradient-light: linear-gradient(180deg, var(--color-white) 0%, var(--color-neutral-100) 100%);
  --gradient-card-glass: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%);
  /* photo overlays */
  --overlay-photo: linear-gradient(180deg, rgba(2, 6, 21, 0.85) 0%, rgba(24, 61, 137, 0.66) 50%, rgba(24, 61, 137, 0.8) 100%);   /* centred photo heroes */
  --overlay-photo-deep: linear-gradient(180deg, rgba(2, 6, 21, 0.8) 0%, rgba(2, 6, 21, 0.55) 40%, rgba(2, 6, 21, 0.92) 100%);   /* photo bands with text low / long text */
  --overlay-photo-side: linear-gradient(90deg, rgba(2, 6, 21, 0.88) 0%, rgba(2, 6, 21, 0.6) 55%, rgba(2, 6, 21, 0.15) 100%);    /* text left over photo */
  --overlay-photo-bottom: linear-gradient(180deg, rgba(2, 6, 21, 0) 35%, rgba(2, 6, 21, 0.78) 100%);   /* caption on the lower part of a photo */
  --overlay-tint: rgba(24, 61, 137, 0.62);   /* flat brand tint on a photo tile */
  --overlay-dim: rgba(0, 0, 0, 0.28);        /* darken a photo/video still */
  --gradient-media-shade: linear-gradient(180deg, rgba(24, 61, 137, 0.86) 0%, var(--color-media-bg) 100%);
  /* one photo grade for every event photo */
  --overlay-hero: var(--glow-primary-soft), var(--overlay-photo-deep);   /* ONE recipe for every inner-page photo hero (about, contact, playbook) */
  --hero-min-h: 640px;   /* inner heroes: 640 desktop / 560 tablet / 460 phone (min-height of the whole band, header overlap included) */
  --photo-grade: saturate(0.9) contrast(1.04);
  --photo-grade-logo: grayscale(1) opacity(0.55);   /* logo strip quieter than its heading (FST-DESIGN ~60%) */
  /* book mock-up (home + white paper) */
  --gradient-book-shine: linear-gradient(90deg, rgba(2,6,21,.55) 0%, rgba(2,6,21,.16) 4%, rgba(255,255,255,.13) 7%, rgba(255,255,255,0) 16%, rgba(255,255,255,0) 88%, rgba(255,255,255,.07) 100%);
  --gradient-book-pages: linear-gradient(90deg, var(--color-white) 0 11%, var(--color-neutral-100) 11% 33%, var(--color-white) 33% 44%, var(--color-neutral-100) 44% 65%, var(--color-white) 65% 76%, var(--color-neutral-100) 76% 98%, var(--color-white) 98%);
  --gradient-book-shadow: radial-gradient(ellipse at center, rgba(2, 6, 21, 0.42) 0%, rgba(2, 6, 21, 0) 78%);
  --book-spine-line: rgba(255, 255, 255, 0.22);
  --shadow-play: drop-shadow(0 12px 16px rgba(2, 6, 21, 0.28));
  --text-shadow-media: 0 7.96px 19.9px rgba(0, 0, 0, .55);

  /* ---- Font families ---- */
  --font-display: "Bebas Neue", "Bebas Fallback", "Arial Narrow", sans-serif;
  --font-body: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-alt: "Montserrat", system-ui, sans-serif;
  --font-ui: "Inter", system-ui, sans-serif;   /* CEO Circle only */

  /* ---- Type scale — stepped (734 / 1068). Desktop values here; tablet + phone below. ---- */
  --fs-display-xl: 80px;   /* hero H1                    */
  --fs-display-lg: 56px;   /* band H2                    */
  --fs-display-md: 40px;   /* card / H3                  */
  --fs-display-sm: 30px;   /* FAQ, small heads           */
  --fs-lead: 20px;         /* leads / intros             */
  --fs-tagline: 19px;
  --fs-body-lg: 17px;      /* legacy alias               */
  --fs-body: 17px;
  --fs-link: 15px;
  --fs-small: 14px;        /* small print minimum        */
  --fs-label: 13px;        /* eyebrows, form labels, nav */
  --fs-xs: 12px;

  --lh-display: 1.06;      /* Bebas headlines 1.04–1.08 */
  --lh-display-tight: 1.04;/* hero H1 */
  --lh-tight: 1.15;
  --lh-lead: 1.4;
  --lh-body: 1.5;          /* 17/25.5 */

  /* letter-spacing */
  --ls-display: 0.015em;   /* Bebas headlines .01–.02em */
  --ls-display-xl: 0.01em; /* hero H1 */
  --ls-kicker: 0.14em;     /* eyebrow labels */
  --ls-nav: 0.08em;        /* header nav */
  --ls-btn: 0.04em;        /* buttons */
  --ls-label: 0.06em;      /* form labels, small caps */

  /* ---- Spacing (8px base) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 80px;
  --space-10: 96px;
  /* rhythm inside a band */
  --gap-head-intro: 20px;  /* heading -> intro (20–24) */
  --gap-intro-content: 56px; /* intro -> cards / media (48–56) */
  --gap-content-cta: 48px;

  /* ---- Layout ---- */
  --section-pad-y: 128px;          /* band padding desktop */
  --section-pad-y-sm: 64px;        /* strips: logos, proof rows */
  --container-text: 980px;
  --container-max: 1520px;
  --container-wide: 1440px;
  --gutter: 24px;
  --grid-gap: 24px;
  --header-h: 76px;
  --hero-pad-top: calc(var(--space-9) + var(--header-h));   /* every hero band: it slides under the glass header, so add its height */
  --hero-pad-bottom: var(--space-8);
  /* text measures (max line length) */
  --measure-intro: 56ch;     /* leads / section intros (52–60) */
  --measure-body: 64ch;      /* paragraphs, forms */
  --measure-head: 20ch;      /* big display headlines: 2–3 lines */
  --measure-statement: 40ch; /* Bebas statement lines (display-sm/md) */

  /* ---- Radius ---- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;                /* cards, photos, covers */
  --radius-xl: var(--radius-lg);    /* legacy alias */
  --radius-pill: 9999px;

  /* ---- Elevation: one rest shadow (photos, covers, floating cards) + one lift shadow (hover) ---- */
  --shadow-rest: 0 10px 40px rgba(2, 6, 21, 0.25);
  --shadow-lift: 0 18px 48px rgba(2, 6, 21, 0.32);
  --shadow-card: var(--shadow-rest);   /* legacy alias */
  --shadow-card-soft: 0 1px 2px rgba(2, 6, 21, 0.04), 0 10px 30px rgba(2, 6, 21, 0.06);   /* resting white card on a light band */
  --shadow-btn-yellow: 0 10px 24px rgba(255, 193, 14, 0.28);
  --shadow-btn-blue: 0 10px 24px rgba(24, 61, 137, 0.3);
  --shadow-btn-white: 0 10px 24px rgba(2, 6, 21, 0.25);

  /* ---- Buttons ---- */
  --btn-h: 48px;
  --btn-h-sm: 40px;          /* header pill */
  --btn-pad-x: 28px;
  --btn-pad-x-lg: 34px;
  --btn-fs: 14px;
  --btn-lift: -2px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur-fast: 150ms;
  --dur-mid: 250ms;          /* every hover */
  --dur-slow: 700ms;         /* reveals */
  --dur-media: 600ms;        /* image zoom inside a card */
  --rise-y: 24px;            /* reveal distance */
  --stagger: 80ms;

  /* ---- Role size maxes (FST-DESIGN.md Global size rules) ---- */
  --media-max: 1100px; --promo-max: 320px; --logo-h: 44px; --icon: 48px; --split-img-max-h: 640px;
  --brand-logo-h: 32px;      /* header logo */
  --brand-logo-h-footer: 36px;
  --social-size: 40px;
}

/* Tablet — 735-1068px */
@media (max-width: 1068px) {
  :root {
    --fs-display-xl: 60px;
    --fs-display-lg: 48px;
    --fs-display-md: 36px;
    --fs-display-sm: 28px;
    --fs-lead: 19px;
    --section-pad-y: 96px;
    --section-pad-y-sm: 56px;
    --gap-intro-content: 48px;
    --gap-content-cta: 40px;
    --hero-pad-top: calc(var(--space-8) + var(--header-h));
    --hero-min-h: 560px;
    --gutter: 24px;
    --logo-h: 40px; --icon: 44px; --promo-max: 280px;
  }
}
/* Phone — <=734px */
@media (max-width: 734px) {
  :root {
    --fs-display-xl: 40px;
    --fs-display-lg: 32px;   /* band H2 on phones */
    --fs-display-md: 28px;
    --fs-display-sm: 24px;
    --fs-lead: 18px;
    --section-pad-y: 72px;
    --section-pad-y-sm: 48px;
    --gap-intro-content: 40px;
    --gap-content-cta: 32px;
    --hero-pad-top: calc(var(--space-8) + var(--header-h));
    --hero-pad-bottom: var(--space-7);
    --hero-min-h: 460px;
    --gutter: 16px;
    --grid-gap: 16px;
    --header-h: 64px;
    --btn-h: 44px;
    --btn-pad-x: 24px;
    --btn-pad-x-lg: 28px;
    --measure-head: none;      /* no one-word-per-line headings on phones */
    --measure-intro: none;
    --card-pad: var(--space-5);
    --logo-h: 32px; --icon: 40px; --promo-max: 240px;
    --brand-logo-h: 28px;
    --brand-logo-h-footer: 32px;
  }
}