/* css/reset.css */
/* css/reset.css */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bb-black);
  color: var(--bb-silver);
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; background: none; border: 0; cursor: pointer; color: inherit; }
input, textarea { font: inherit; background: transparent; color: inherit; border: 0; }
:focus-visible { outline: 2px solid var(--bb-crimson); outline-offset: 2px; border-radius: 2px; }

/* css/tokens.css */
/* css/tokens.css — BlackBird brand tokens (per BlackBird Media Design System v2026-05) */

/* === BRAND WEBFONTS — subsetted WOFF2 (Latin + extras + em-dash). Only weights used on this site. === */
/* Clash Display: display headlines + buttons (500 medium, 600 semibold, 700 bold) */
@font-face { font-family: 'Clash Display'; src: url(https://theblackbirdmedia.com/wp-content/uploads/bbv3/assets/fonts/ClashDisplay-Medium.woff2) format('woff2');   font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Clash Display'; src: url(https://theblackbirdmedia.com/wp-content/uploads/bbv3/assets/fonts/ClashDisplay-Semibold.woff2) format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Clash Display'; src: url(https://theblackbirdmedia.com/wp-content/uploads/bbv3/assets/fonts/ClashDisplay-Bold.woff2) format('woff2');     font-weight: 700; font-style: normal; font-display: swap; }
/* Ginora Sans: body / labels (400 regular, 700 bold) */
@font-face { font-family: 'Ginora Sans';   src: url(https://theblackbirdmedia.com/wp-content/uploads/bbv3/assets/fonts/GinoraSans-Regular.woff2) format('woff2');    font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Ginora Sans';   src: url(https://theblackbirdmedia.com/wp-content/uploads/bbv3/assets/fonts/GinoraSans-Bold.woff2) format('woff2');       font-weight: 700; font-style: normal; font-display: swap; }
/* Stolzl removed: not used on this site (alt display, reserved for print pieces per spec) */

:root {
  /* === BLACKBIRD MEDIA DESIGN SYSTEM — CANONICAL VALUES ===
     Source of truth: D:/New work/bbd/BlackBird Media Design System/colors_and_type.css */

  /* NEUTRALS — black-first palette (BB is a dark brand by default) */
  --bb-black-pure:  #000000;   /* hero canvases, logo bg */
  --bb-black:       #0A0A0A;   /* default app/canvas bg, softer than pure black */
  --bb-dark:        #111111;   /* card surface on top of bb-black */
  --bb-dark-mid:    #1A1A1A;   /* elevated card / hover surface */
  --bb-dark-high:   #222222;   /* borders on dark, row dividers */

  --bb-grey-900:    #1A1A1A;
  --bb-grey-800:    #2A2A2A;
  --bb-grey-700:    #555555;   /* disabled text on dark */
  --bb-grey-500:    #888888;   /* tertiary text */
  --bb-grey-400:    #9B9B9B;   /* eyebrow muted */
  --bb-grey-300:    #CCCCCC;   /* body subtext on dark */
  --bb-grey-200:    #E5E5E5;
  --bb-grey-100:    #F4F4F4;
  --bb-white:       #FFFFFF;

  /* ACCENTS */
  --bb-red:         #C0392B;   /* primary accent, CTA, marks */
  --bb-red-deep:    #8B0000;   /* deeper crimson, letterheads, gradients */
  --bb-red-glow:    #FF4433;   /* glow / eyebrow accent on dark */
  --bb-red-soft:    rgba(192, 57, 43, 0.07);
  --bb-gold:        #D4A853;   /* premium accent, used sparingly */
  --bb-orange:      #FF7A1A;   /* hero tagline highlight 'the win' */
  --bb-orange-deep: #D45200;
  --bb-orange-glow: rgba(255, 122, 26, 0.55);

  /* Legacy aliases kept so existing CSS keeps working without a sweep */
  --bb-void:        var(--bb-black-pure);
  --bb-charcoal:    var(--bb-dark-mid);
  --bb-charcoal-2:  var(--bb-dark-high);
  --bb-deep-red:    var(--bb-red);
  --bb-crimson:     var(--bb-red-deep);
  --bb-silver:      var(--bb-grey-300);
  --bb-mid-gray:    var(--bb-grey-400);
  --bb-light-gray:  var(--bb-grey-100);

  /* === TYPE FAMILIES — 4-lane system (per BB Design System v2026-05) ===
     Lane A: House (default — 90% of output)
     Lane B: Product surfaces (dashboards, settings, data UI)
     Lane C: KAIRA / AI product surfaces
     Lane D: Editorial / founder essays / manifesto pieces
     Marketing site = Lane A. Other variables ship for forward-compat. */
  --ff-display:   'Clash Display', 'Stolzl', 'Poppins', system-ui, sans-serif;
  --ff-body:      'Ginora Sans', 'Inter', system-ui, -apple-system, sans-serif;
  --ff-alt:       'Stolzl', 'Clash Display', system-ui, sans-serif;
  --ff-mono:      'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
  --ff-product:   'Inter', system-ui, sans-serif;
  --ff-product-body: 'Krub', 'Inter', sans-serif;
  --ff-kaira:     'Orbitron', 'Clash Display', sans-serif;
  --ff-kaira-body:'Roboto Mono', 'JetBrains Mono', monospace;
  --ff-editorial: 'Playfair Display', Georgia, serif;
  --ff-editorial-body: 'Raleway', 'Ginora Sans', sans-serif;

  /* === TYPE SCALE — derived from DS (web-scaled from card scale) ===
     Card scale lives in DS for 1080×1350 social cards.
     Web scale below is calibrated for landing pages. */
  --fs-eyebrow:   13px;            /* DS card 20px → web 13px */
  --fs-body:      17px;            /* DS card 24px → web 17px */
  --fs-body-lg:   20px;            /* DS card 28px → web 20px */
  --fs-h3:        22px;            /* DS card 32px → web 22px */
  --fs-h2-mobile: 36px;
  --fs-h2:        clamp(36px, 4.6vw, 56px);   /* DS h2: 40px card */
  --fs-h1-mobile: 48px;
  --fs-h1:        clamp(48px, 7vw, 84px);     /* DS display-md: 84px */
  --fs-display:   clamp(56px, 8.5vw, 116px);  /* DS display-lg, used for hero */
  --fs-mono-sm:   12px;
  --fs-mono-md:   14px;

  /* === TRACKING — canonical from DS === */
  --tr-tight:     -0.025em;        /* display, big numerals */
  --tr-snug:      -0.01em;         /* H1 / H2 */
  --tr-normal:    0;
  --tr-loose:     0.08em;
  --tr-eyebrow:   0.32em;          /* all-caps red eyebrows — DS canonical */
  --tr-pill:      0.10em;          /* CTA pill */
  --tr-mono:      0.14em;          /* mono labels */

  /* === LINE-HEIGHT — canonical from DS === */
  --lh-display:   0.94;
  --lh-headline:  1.08;
  --lh-h1:        1.04;
  --lh-snug:      1.25;
  --lh-body:      1.55;
  --lh-loose:     1.7;

  /* Spacing scale */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  /* Layout */
  --content-max: 1280px;
  --gutter: clamp(20px, 4vw, 64px);
  --section-y: clamp(64px, 10vw, 128px);

  /* === RADII — canonical from DS === */
  --r-xs:    4px;
  --r-sm:    8px;     /* CTA pill, inputs */
  --r-md:    14px;    /* buttons */
  --r-lg:    18px;    /* cards */
  --r-xl:    26px;    /* glass quote card */
  --r-full:  9999px;
  --r-pill:  9999px;
  --r-logo:  22%;     /* logo squircle */

  /* === MOTION — canonical from DS ("the bird flies fast") === */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:    120ms;
  --dur:         220ms;
  --dur-slow:    420ms;
  /* Legacy aliases */
  --t-fast: var(--dur-fast) var(--ease-out);
  --t-base: var(--dur) var(--ease-out);

  /* === SHADOWS — canonical from DS === */
  --shadow-1:           0 1px 2px rgba(0,0,0,0.40);
  --shadow-2:           0 4px 14px rgba(0,0,0,0.35);
  --shadow-3:           0 12px 36px rgba(0,0,0,0.45);
  --shadow-4:           0 24px 70px rgba(0,0,0,0.48);
  --shadow-glow-red:    0 0 48px rgba(255, 68, 51, 0.40);
  --shadow-glow-orange: 0 0 80px rgba(255, 122, 26, 0.45);

  /* === SPEC ALIASES + MISSING SEMANTIC LAYER === */
  --bb-grey-100:   var(--bb-light-gray);

  /* Semantic layer */
  --fg:   var(--bb-white);
  --fg-1: var(--bb-white);
  --fg-2: var(--bb-silver);
  --fg-3: var(--bb-mid-gray);
  --bg:   var(--bb-black);
  --surface: var(--bb-dark);
  --border-soft:   rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.18);
  --accent:        var(--bb-deep-red);
  --accent-glow:   var(--bb-red-glow);

  /* Tracking ramp */
  --tr-tight:   -0.025em;
  --tr-snug:    -0.01em;
  --tr-eyebrow: 0.32em;
  --tr-pill:    0.10em;
  --tr-loose:   0.08em;

  /* Shadow ladder + signature glow */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.40);
  --shadow-2: 0 4px 14px rgba(0,0,0,0.35);
  --shadow-3: 0 12px 36px rgba(0,0,0,0.45);
  --shadow-4: 0 24px 70px rgba(0,0,0,0.48);
  --shadow-glow-red:    0 0 48px rgba(255, 68, 51, 0.40);
  --shadow-glow-orange: 0 0 80px rgba(255, 122, 26, 0.45);

  /* Gradient tokens */
  --grad-canvas-red:    radial-gradient(ellipse 900px 1400px at -8% 50%, rgba(192, 57, 43, 0.07), transparent 65%);
  --grad-hero-orange:   radial-gradient(ellipse 900px 720px at 50% 56%, rgba(255, 122, 26, 0.16), transparent 68%),
                        radial-gradient(ellipse 600px 500px at 50% 85%, rgba(212, 82, 0, 0.10), transparent 75%);
  --grad-photo-shade:   linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.18) 42%, rgba(0,0,0,0.58) 100%);
}

/* css/layout.css */
/* css/layout.css */
.container { max-width: var(--content-max); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }

.eyebrow {
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.32em;
  color: var(--bb-red-glow);
  text-transform: uppercase;
  margin-bottom: var(--s-4);
}

/* Selector chain: WP Mighti theme has its own `.h2` rule that wins by source order
   on live, painting headlines #484848 (3:1 ratio failure on charcoal). The `main`
   prefix bumps our specificity to 0,0,1,1 so we win without resorting to !important.
   Same treatment for the eyebrow + sub-paragraph utility classes. */
main .h2,
.h2 {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: var(--fs-h2-mobile);
  line-height: var(--lh-headline);
  letter-spacing: var(--tr-snug);
  color: var(--bb-white);
  text-transform: uppercase;
  text-wrap: balance;
}
@media (min-width: 1025px) { main .h2, .h2 { font-size: var(--fs-h2); } }
main .h2 em, main .h2 .h2-accent,
.h2 em, .h2 .h2-accent {
  /* Match hero accent — --bb-red per Lane A spec, glow reserved for ambient. */
  font-style: normal;
  color: var(--bb-red);
  text-shadow: 0 0 24px rgba(192, 57, 43, 0.26);
}
/* Eyebrow + sub paragraphs need the same theme-override hardening. */
main .eyebrow,
.eyebrow { color: var(--bb-red-glow); }
main .process-sub,
.process-sub { color: var(--bb-silver); }

/* CTA bands (Uppit-style mid-section + final closer) */
.mid-cta-band, .final-cta-band {
  text-align: center;
  position: relative;
  background: var(--bb-black);
}
.mid-cta-band {
  padding-block: var(--s-9);
  border-top: 1px solid var(--bb-charcoal-2);
  border-bottom: 1px solid var(--bb-charcoal-2);
}
.mid-cta-band .mid-cta-prompt {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: clamp(22px, 2.4vw, 30px);
  color: var(--bb-white);
  letter-spacing: var(--tr-snug);
  margin-bottom: var(--s-5);
}
.final-cta-band {
  padding-block: var(--s-10) var(--s-9);
  background:
    radial-gradient(ellipse 900px 600px at 50% 0%, rgba(192, 57, 43, 0.10), transparent 70%),
    var(--bb-black);
}
.final-cta-band .h2 { margin-bottom: var(--s-4); }
.final-cta-band .final-cta-sub {
  font-family: var(--ff-body);
  color: var(--bb-silver);
  font-size: var(--fs-body-lg);
  max-width: 620px;
  margin: 0 auto var(--s-7);
  line-height: 1.5;
}
.final-cta-band .btn-primary { padding: 22px 40px; font-size: 18px; }

.founder-cta-primary {
  font-family: var(--ff-display);
  font-weight: 700;
  color: var(--bb-red-glow) !important;
  border-bottom: 1px solid var(--bb-red-glow);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
}
.skip-link:focus {
  left: var(--gutter);
  top: var(--s-4);
  background: var(--bb-deep-red);
  padding: 12px 16px;
  color: var(--bb-white);
  z-index: 999;
  border-radius: var(--r-sm);
}

/* css/header.css */
/* css/header.css */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(10, 10, 10, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--bb-charcoal-2);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}
.site-header .brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
}
.site-header .brand img {
  height: 28px;
  width: auto;
}

.btn-cta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;          /* mobile tap target floor */
  padding: 12px 22px;
  border-radius: var(--r-sm);
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.02em;
  background: transparent;
  color: var(--bb-white);
  border: 1px solid var(--bb-crimson);
  transition: background var(--t-base), transform var(--t-base);
}
.btn-cta:hover {
  background: var(--bb-deep-red);
  transform: translateY(-1px);
}

@media (max-width: 640px) {
  .site-header .container { height: 64px; }
  .site-header .brand img { height: 22px; }
  .btn-cta { padding: 10px 16px; font-size: 13px; }
}

/* css/sections/hero.css */
/* css/sections/hero.css */
#hero {
  position: relative;
  padding-block: var(--s-9) var(--s-10);
  overflow: hidden;
  background: var(--bb-black);
}
#hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--grad-canvas-red);
  pointer-events: none;
}
#hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
/* v3.1 — single column, centered. No more right-column photo/Spline. */
#hero .hero-grid {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
}
.hero-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 920px;
  width: 100%;
}

/* === HERO — applies BlackBird Media Design System type styles ===
   References: D:/New work/bbd/BlackBird Media Design System/_ref/cover.png
                                                              /green-hero.png
   Pattern: ALL-CAPS bold Clash Display H1 with one accent word in red glow,
            silver mono eyebrow above, body subtitle below. */
.hero-manifesto {
  font-family: var(--ff-body);
  font-weight: 400;
  font-style: italic;
  font-size: 15px;
  line-height: var(--lh-body);
  letter-spacing: 0;
  color: var(--bb-grey-500);
  max-width: 520px;
  margin-bottom: var(--s-5);
  padding: 0;
  border: none;
}
.hero-eyebrow {
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: var(--fs-eyebrow);
  color: var(--bb-red-glow);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  margin-bottom: var(--s-5);
}
.hero-h1 {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: var(--fs-h1-mobile);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-tight);
  color: var(--bb-white);
  text-transform: uppercase;
  margin-bottom: var(--s-6);
  max-width: 14ch;
  text-wrap: balance;
}
@media (min-width: 1025px) {
  .hero-h1 { font-size: var(--fs-display); }
}
.hero-h1-accent {
  /* Per DS Lane A specimen: title em uses --bb-red (deeper crimson),
     not --bb-red-glow. Red glow reserved for ambient/hover states. */
  color: var(--bb-red);
  text-shadow: 0 0 28px rgba(192, 57, 43, 0.32);
  font-style: normal;
}
.hero-sub {
  font-family: var(--ff-body);
  font-weight: 400;
  font-size: var(--fs-body-lg);
  color: var(--bb-grey-300);
  max-width: 600px;
  line-height: var(--lh-body);
  margin-bottom: var(--s-7);
  text-wrap: pretty;
}
.hero-pill {
  display: inline-block;
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--bb-mid-gray);
  border: 1px solid var(--bb-charcoal-2);
  padding: 6px 14px;
  border-radius: var(--r-pill);
  margin-bottom: var(--s-6);
}

/* Hero stats — 2-column credibility row, centered under the CTAs. */
.hero-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-8);
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--bb-charcoal-2);
  width: 100%;
  max-width: 720px;
}
.hero-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.hero-stat-num {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 32px;
  line-height: 1;
  letter-spacing: var(--tr-snug);
  color: var(--bb-white);
}
.hero-stat-label {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--bb-mid-gray);
  text-transform: uppercase;
}
@media (max-width: 640px) {
  .hero-stats { gap: var(--s-5); }
  .hero-stat-num { font-size: 24px; }
}

.hero-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-4); }

/* Canonical House CTA — per preview/buttons.html in DS:
     Clash 600 · 14px · 0.10em tracking · UPPERCASE
     8px radius · 14px/28px padding
     always-on red glow (36px) · grows on hover (48px) */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  background: var(--bb-red);
  color: var(--bb-white);
  border: 0;
  border-radius: var(--r-sm);
  box-shadow: 0 0 36px rgba(255, 68, 51, 0.40);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 48px rgba(255, 68, 51, 0.55);
}
.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--bb-white);
  border-radius: var(--r-sm);
  background: transparent;
  transition: border-color var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
.btn-outline:hover {
  border-color: rgba(255, 255, 255, 0.30);
  background: rgba(255, 255, 255, 0.05);
}

/* ---------- Hero Spline 3D scene (replaces founder photo above the fold) ---------- */
.hero-spline-wrap {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: radial-gradient(ellipse at 50% 40%, rgba(178, 34, 34, 0.18) 0%, rgba(10, 10, 10, 0.95) 70%);
  isolation: isolate;
}
/* CSS-only orb that paints instantly and acts as the loading skeleton + reduced-motion fallback. */
.hero-spline-orb {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 45%, rgba(255, 68, 51, 0.55) 0%, rgba(178, 34, 34, 0.25) 22%, rgba(10, 10, 10, 0) 55%),
    radial-gradient(circle at 30% 70%, rgba(178, 34, 34, 0.18) 0%, rgba(10, 10, 10, 0) 45%);
  filter: blur(2px);
  transition: opacity 600ms ease;
  opacity: 1;
  pointer-events: none;
}
.hero-spline {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity 800ms ease;
}
.hero-spline-loaded .hero-spline { opacity: 1; }
.hero-spline-loaded .hero-spline-orb { opacity: 0; }

/* Mobile + reduced-motion + save-data: never load the viewer; the orb stays as the visual. */
.hero-spline-skip .hero-spline { display: none; }
@media (max-width: 1024px) {
  /* Hide the right column entirely on small screens — copy already stacks alone. */
  .hero-spline-wrap { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-spline { display: none; }
  .hero-spline-orb { filter: none; }
}

/* === BLUR ORB — CSS-only ambient glow matching uppit.ai pattern ===
   Full-hero absolute layer; sits above canvas (z-index 0) below copy (z-index 1). */
.hero-blur-orb {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 0;
}
.hero-blur-orb::before {
  content: '';
  width: 600px;
  height: 400px;
  background: rgba(192, 57, 43, 0.10);
  border-radius: 50%;
  filter: blur(100px);
  animation: orb-breathe 6s ease-in-out infinite;
}
@keyframes orb-breathe {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%       { opacity: 1;    transform: scale(1.14); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-blur-orb::before { animation: none; opacity: 0.7; }
}

/* === HERO FADE-IN STAGGER (uppit.ai pattern) ===
   Each hero child gets .hero-fade-child and an inline animation-delay.
   Animation fires on page load — no scroll trigger needed for above-fold content. */
.hero-fade-child {
  opacity: 0;
  animation: hero-fade-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes hero-fade-up {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-fade-child { opacity: 1; animation: none; }
}

/* === HERO STATS DIVIDER === */
.hero-stat-divider {
  display: block;
  width: 1px;
  height: 48px;
  background: rgba(255, 255, 255, 0.12);
  align-self: center;
  flex-shrink: 0;
}
@media (max-width: 640px) { .hero-stat-divider { height: 36px; } }

/* css/sections/process.css */
/* css/sections/process.css */
#process { background: var(--bb-black); }
#process .process-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--s-8);
}
#process .process-sub {
  font-size: var(--fs-body-lg);
  color: var(--bb-silver);
  margin-top: var(--s-4);
}

.process-grid {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: 1fr;
}
@media (min-width: 720px)  { .process-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1025px) { .process-grid { grid-template-columns: repeat(3, 1fr); } }

.process-card {
  background: var(--bb-charcoal);
  border: 1px solid var(--bb-charcoal-2);
  border-radius: var(--r-md);
  padding: var(--s-7);
  position: relative;
  transition: transform var(--t-base), border-color var(--t-base);
}
.process-card:hover {
  transform: translateY(-4px);
  border-color: var(--bb-deep-red);
}
.process-card .card-num {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 48px;
  color: var(--bb-deep-red);
  line-height: 1;
  margin-bottom: var(--s-4);
}
.process-card .card-day {
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.15em;
  color: var(--bb-mid-gray);
  text-transform: uppercase;
  margin-bottom: var(--s-3);
}
.process-card .card-title {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: var(--fs-h3);
  letter-spacing: var(--tr-snug);
  color: var(--bb-white);
  margin-bottom: var(--s-4);
}
.process-card .card-body {
  color: var(--bb-silver);
  font-size: 16px;
  line-height: 1.6;
}

/* === CARD ICON (uppit.ai pattern) ===
   Circle icon with number badge overlay, sits above the card-num. */
.card-icon-wrap {
  position: relative;
  width: 48px;
  height: 48px;
  margin-bottom: var(--s-5);
}
.card-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(192, 57, 43, 0.10);
  border: 2px solid var(--bb-deep-red);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-red-glow);
}
.card-icon svg { width: 22px; height: 22px; flex-shrink: 0; }
.card-badge {
  position: absolute;
  top: -6px;
  right: -8px;
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 11px;
  color: var(--bb-red-glow);
  background: var(--bb-charcoal);
  border: 1px solid rgba(192, 57, 43, 0.30);
  padding: 2px 6px;
  border-radius: var(--r-pill);
  letter-spacing: 0.05em;
}

/* === CARD BULLETS (uppit.ai pattern) === */
.card-bullets {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
}
.card-bullets li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--bb-silver);
  font-size: 15px;
  line-height: 1.55;
}
.card-bullets li::before {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(192, 57, 43, 0.60);
  flex-shrink: 0;
  margin-top: 7px;
}

/* css/sections/trust.css */
/* css/sections/trust.css */
#trust { background: var(--bb-charcoal); }
#trust .trust-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--s-7);
}

.trust-logos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-7);
  justify-content: center;
  align-items: center;
  margin-bottom: var(--s-3);
  filter: grayscale(100%);
  opacity: 0.55;
}
.trust-note {
  text-align: center;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bb-silver);   /* WCAG AA on #1a1a1a charcoal (was mid-gray + 0.7 opacity → 3.72:1, fail) */
  margin: 0 auto var(--s-7);
}
.trust-logos .logo-text {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 24px;
  color: var(--bb-white);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.trust-logos img {
  height: 32px;
  width: auto;
}
@media (min-width: 1025px) {
  .trust-logos img { height: 40px; }
  .trust-logos .logo-text { font-size: 28px; }
}

/* Outcome cards (replaces the old testimonial card pattern — no fabricated quotes, real shipped work) */
.outcomes-grid {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: 1fr;
  max-width: 1080px;
  margin: 0 auto;
}
@media (min-width: 720px)  { .outcomes-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1025px) { .outcomes-grid { grid-template-columns: repeat(3, 1fr); } }

.outcome-card {
  background: var(--bb-void);
  border: 1px solid var(--bb-charcoal-2);
  border-radius: var(--r-md);
  padding: var(--s-6);
  transition: transform var(--t-base), border-color var(--t-base);
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.outcome-card:hover { transform: translateY(-4px); border-color: var(--bb-deep-red); }

.outcome-card .outcome-eyebrow {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bb-red-glow);
  margin-bottom: var(--s-2);
}
.outcome-card .outcome-context {
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bb-mid-gray);
  margin-bottom: var(--s-5);
}
.outcome-card .outcome-metric {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.25;
  color: var(--bb-white);
  letter-spacing: var(--tr-snug);
  margin-bottom: var(--s-4);
  overflow-wrap: break-word;
}
.outcome-card .outcome-detail {
  font-family: var(--ff-body);
  color: var(--bb-silver);
  font-size: 15px;
  line-height: 1.55;
  margin-top: auto;
}
.outcomes-note {
  margin-top: var(--s-6);
  text-align: center;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--bb-mid-gray);
  text-transform: uppercase;
  opacity: 0.6;
}

/* css/sections/services.css */
/* css/sections/services.css */
#services { background: var(--bb-void); }
#services .services-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto var(--s-8);
}

.services-grid {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: 1fr;
}
@media (min-width: 720px)  { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1025px) { .services-grid { grid-template-columns: repeat(3, 1fr); } }

.service-card {
  background: var(--bb-charcoal);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  padding: var(--s-6);
  transition: transform var(--t-base), border-color var(--t-base);
}
.service-card:hover {
  transform: translateY(-4px);
  border-color: var(--bb-deep-red);
}
.service-card .card-num {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.18em;
  color: var(--bb-deep-red);
  margin-bottom: var(--s-4);
  display: inline-block;
  border-bottom: 1px solid var(--bb-deep-red);
  padding-bottom: 4px;
}
.service-card.is-cta .card-num { color: var(--bb-white); border-color: var(--bb-white); }
.service-card .card-title {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 22px;
  color: var(--bb-white);
  letter-spacing: var(--tr-snug);
  margin-bottom: var(--s-3);
}
.service-card .card-body {
  color: var(--bb-silver);
  font-size: 15px;
  line-height: 1.6;
}

.service-card.is-cta { background: var(--bb-deep-red); }
.service-card.is-cta .card-icon,
.service-card.is-cta .card-title { color: var(--bb-white); }
.service-card.is-cta .card-body { color: rgba(255, 255, 255, 0.85); }
.service-card.is-cta .card-link {
  display: inline-block;
  margin-top: var(--s-4);
  font-family: var(--ff-display);
  font-weight: 500;
  color: var(--bb-white);
  border-bottom: 1px solid currentColor;
}

.services-tag {
  margin-top: var(--s-7);
  text-align: center;
  font-family: var(--ff-body);
  font-style: italic;
  font-size: var(--fs-body);
  color: var(--bb-mid-gray);
}

/* css/sections/founder.css */
/* css/sections/founder.css */
#founder { background: var(--bb-black); }

.founder-grid {
  display: grid;
  gap: var(--s-8);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 1025px) { .founder-grid { grid-template-columns: 0.4fr 0.6fr; } }

.founder-photo-wrap {
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 32px 64px -32px rgba(139, 26, 26, 0.5);
  aspect-ratio: 1 / 1;
  border: 4px solid rgba(192, 57, 43, 0.20);
  max-width: 340px;
  margin: 0 auto;
}
@media (min-width: 1025px) { .founder-photo-wrap { margin: 0; } }
.founder-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 35% 65%;
}

.founder-name {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(40px, 5vw, 64px);
  line-height: var(--lh-headline);
  letter-spacing: var(--tr-tight);
  color: var(--bb-white);
  text-transform: uppercase;
  margin-bottom: var(--s-3);
}
.founder-role {
  font-family: var(--ff-mono);
  font-size: 14px;
  letter-spacing: 0.15em;
  color: var(--bb-mid-gray);
  text-transform: uppercase;
  margin-bottom: var(--s-6);
}
.founder-bio {
  font-size: 18px;
  color: var(--bb-silver);
  line-height: 1.7;
}
.founder-bio p + p { margin-top: var(--s-4); }
.founder-bio .closer {
  font-family: var(--ff-display);
  font-weight: 700;
  color: var(--bb-white);
  letter-spacing: var(--tr-snug);
  font-size: 26px;
}

.founder-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5);
  margin-top: var(--s-6);
}
.founder-links a {
  font-family: var(--ff-display);
  font-weight: 500;
  color: var(--bb-white);
  border-bottom: 1px solid var(--bb-deep-red);
  display: inline-flex;
  align-items: center;
  min-height: 44px;          /* mobile tap target floor */
  padding: 0 2px;
  transition: color var(--t-base);
}
.founder-links a:hover { color: var(--bb-deep-red); }

/* css/footer.css */
/* css/footer.css */
.site-footer {
  background: var(--bb-void);
  padding-block: 0 var(--s-7);
  border-top: 0;
  position: relative;
}
.site-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(192, 57, 43, 0.45) 50%,
    transparent 100%
  );
  pointer-events: none;
}

/* ---------- Mini CTA band (closes the page) ---------- */
.footer-cta {
  text-align: center;
  padding-block: var(--s-9) var(--s-8);
  border-bottom: 1px solid var(--bb-charcoal-2);
  margin-bottom: var(--s-8);
}
.footer-cta-line {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: var(--lh-headline);
  letter-spacing: var(--tr-tight);
  color: var(--bb-white);
  text-transform: uppercase;
  max-width: 720px;
  margin: 0 auto var(--s-6);
  text-wrap: balance;
}
.footer-cta-accent {
  color: var(--bb-red);
  text-shadow: 0 0 24px rgba(192, 57, 43, 0.30);
}

/* ---------- Main grid: brand | company | reach ---------- */
.footer-grid {
  display: grid;
  gap: var(--s-7);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 720px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1.2fr; } }

.footer-brand img { height: 28px; width: auto; }
.footer-tagline {
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.15em;
  color: var(--bb-mid-gray);
  text-transform: uppercase;
  margin-top: var(--s-3);
}

.footer-col-head {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bb-mid-gray);
  margin-bottom: var(--s-4);
}

.footer-links,
.footer-reach { display: flex; flex-direction: column; gap: 0; }
.footer-links a,
.footer-reach a {
  color: var(--bb-silver);
  font-size: 14px;
  padding-block: 12px;       /* tap target ≥44px on mobile */
  transition: color var(--t-base);
}
.footer-links a:hover,
.footer-reach a:hover { color: var(--bb-white); }

/* ---------- Trapdoor "Follow Us" pill ----------
   Two doors slide apart vertically on hover/focus to reveal the social icons.
   Door label "Follow Us" is split: top door clips to top half of text,
   bottom door clips to bottom half — they reunite when closed. */
.footer-follow-pill {
  position: relative;
  width: 100%;
  max-width: 220px;
  height: 52px;
  margin-top: var(--s-4);
  overflow: hidden;
  border-radius: 999px;
  border: 1px solid var(--bb-charcoal-2);
  background: var(--bb-void);
  cursor: pointer;
  outline: none;
}
.footer-follow-pill:focus-visible {
  border-color: var(--bb-deep-red);
  box-shadow: 0 0 0 2px rgba(192, 57, 43, 0.30);
}
.footer-follow-pill .door {
  position: absolute;
  left: 0;
  right: 0;
  height: 50%;
  background: var(--bb-charcoal);
  display: block;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
  transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}
.footer-follow-pill .door-top {
  top: 0;
  border-bottom: 1px solid rgba(192, 57, 43, 0.35);
  border-radius: 999px 999px 0 0;
}
.footer-follow-pill .door-bottom {
  bottom: 0;
  border-top: 1px solid rgba(192, 57, 43, 0.35);
  border-radius: 0 0 999px 999px;
}
/* Label spans both doors: each door clips its half via overflow:hidden + positioning */
.footer-follow-pill .door-label {
  position: absolute;
  left: 0;
  right: 0;
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bb-silver);
  text-align: center;
  white-space: nowrap;
}
.footer-follow-pill .door-top .door-label   { bottom: -6px; }
.footer-follow-pill .door-bottom .door-label { top: -6px; }

/* Open: doors slide off vertically */
.footer-follow-pill:hover .door-top,
.footer-follow-pill:focus-within .door-top { transform: translateY(-100%); }
.footer-follow-pill:hover .door-bottom,
.footer-follow-pill:focus-within .door-bottom { transform: translateY(100%); }

/* Social icons sit underneath, revealed when doors part */
.footer-follow-pill .footer-social {
  position: absolute;
  inset: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .footer-follow-pill .door { transition: none; }
}

/* Social row sits at the bottom of the Reach column */
.footer-social {
  display: flex;
  gap: var(--s-3);
  align-items: center;
  margin-top: var(--s-3);
}
.footer-social a {
  color: var(--bb-mid-gray);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;            /* tap target ≥44px (was 40) */
  min-height: 44px;
  border-radius: var(--r-sm);
  transition: color var(--t-base), transform var(--t-base), background var(--t-base);
}
.footer-social a svg { display: block; }
.footer-social a:hover {
  color: var(--bb-deep-red);
  background: rgba(192, 57, 43, 0.08);
  transform: translateY(-2px);
}
.footer-social a:focus-visible {
  outline: 2px solid var(--bb-red-glow);
  outline-offset: 2px;
}

.footer-copy {
  margin-top: var(--s-7);
  border-top: 1px solid var(--bb-charcoal-2);
  padding-top: var(--s-5);
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--bb-mid-gray);
  letter-spacing: 0.1em;
  text-align: center;
}

/* ---------- Slim variant for /contact/ ---------- */
.site-footer-slim {
  background: var(--bb-void);
  padding-block: var(--s-6);
  position: relative;
  border-top: 0;
}
.site-footer-slim::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(192, 57, 43, 0.45) 50%,
    transparent 100%
  );
  pointer-events: none;
}
.site-footer-slim .footer-slim-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-4);
  text-align: center;
}
@media (min-width: 720px) {
  .site-footer-slim .footer-slim-row {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}
.site-footer-slim .brand { height: 24px; width: auto; }
.site-footer-slim .footer-copy {
  margin: 0;
  border-top: 0;
  padding-top: 0;
}

/* css/scroll-choreography.css */
/* css/scroll-choreography.css — section slide-in transitions, child cascades,
   parallax via CSS var. Pairs with js/scroll-choreography.js. */

/* Section entrance */
.sc-section {
  opacity: 0;
  transition: opacity 900ms cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 900ms cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}
/* Vertical slide-in (was horizontal — caused +48px page overflow on every viewport). */
.sc-section.sc-from-left,
.sc-section.sc-from-right { transform: translate3d(0, 32px, 0); }
.sc-section.is-revealed   { opacity: 1; transform: translate3d(0, 0, 0); }

/* Hero never slides — it's first paint and slide-in feels janky there.
   It still cross-fades opacity so the entrance feels intentional. */
#hero.sc-section { transform: none !important; }

/* Children of common content wrappers — gentle bottom→up rise with stagger */
.sc-stagger > * {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity 700ms cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}
.is-revealed .sc-stagger > * {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Card grid items rise individually (already have own transition-delay set in JS) */
.sc-card {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition: opacity 700ms cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}
.sc-card.is-revealed {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Parallax targets read --sc-parallax-y from JS rAF.
   We override .hero-spline-wrap / .founder-photo-wrap transforms here. */
[data-parallax] {
  --sc-parallax-y: 0px;
  transform: translate3d(0, var(--sc-parallax-y), 0);
  will-change: transform;
}

/* Reduce-motion override — disable all translates, keep cross-fade. */
@media (prefers-reduced-motion: reduce) {
  .sc-section,
  .sc-section.sc-from-left,
  .sc-section.sc-from-right { transform: none !important; transition: opacity 400ms ease !important; }
  .sc-stagger > *,
  .sc-card { transform: none !important; transition: opacity 400ms ease !important; }
  [data-parallax] { transform: none !important; }
}

/* css/interactions.css */
/* css/interactions.css — micro-interactions paired with js/interactions.js.
   Unified cyber CTA scan + mask reveal + ASCII scramble baseline. */

/* ---------- ASCII scramble baseline ---------- */
/* While JS is mid-resolve, the element renders with a slightly wider tracking
   so glyphs don't collapse against each other; reverts on resolve. */
.fx-scramble {
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
}

/* ---------- Spotlight CTA hover (v3.4 — CSS-only) ----------
   Single unified treatment for every solid CTA. Pure CSS so it works under
   WP Rocket "delay JS until interaction" without falling back to nothing.
     · Idle: scan line sweeps button bottom→top (4.5s loop) — quiet attention.
     · Hover: radial spotlight grows from center, button lifts 2px + scales
       1.02, red shadow intensifies. Cursor-tracking variant was tried and
       removed because WP Rocket's script delay broke per-button mousemove
       listeners on production.
   Reduced-motion: all transitions disabled, scan line off. */
.btn-primary,
.btn-submit,
.btn-cta { position: relative; overflow: hidden; }

.btn-scanner {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.btn-scanner::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.35);
  mix-blend-mode: screen;
  animation: btn-scan-idle 4.5s ease-in-out infinite;
}
@keyframes btn-scan-idle {
  0%   { top: 100%; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 0.80; }
  100% { top: -2px; opacity: 0; }
}
/* Spotlight grows from center on hover/focus. */
.btn-scanner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle 130px at 50% 50%,
    rgba(255, 255, 255, 0.28) 0%,
    rgba(255, 255, 255, 0.14) 28%,
    transparent 60%
  );
  mix-blend-mode: screen;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.btn-primary:hover .btn-scanner::after,
.btn-primary:focus-visible .btn-scanner::after,
.btn-submit:hover .btn-scanner::after,
.btn-submit:focus-visible .btn-scanner::after,
.btn-cta:hover .btn-scanner::after,
.btn-cta:focus-visible .btn-scanner::after {
  opacity: 1;
  transform: scale(1);
}
/* Pause idle scan line while interacting — spotlight becomes the focal effect. */
.btn-primary:hover .btn-scanner::before,
.btn-submit:hover .btn-scanner::before,
.btn-cta:hover .btn-scanner::before { animation-play-state: paused; opacity: 0; }

/* Subtle lift + scale on solid CTAs (.btn-primary, .btn-submit have own shadow rules,
   so we only add the transform; the shadow tier already exists in their section CSS). */
.btn-primary,
.btn-submit { transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease; }
.btn-primary:hover,
.btn-submit:hover { transform: translateY(-2px) scale(1.015); }
.btn-primary:active,
.btn-submit:active { transform: translateY(0) scale(0.985); transition-duration: 0.15s; }

/* Header outline button stays calmer — just a border-color brighten + slight lift. */
.btn-cta { transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s ease, background 0.3s ease; }
.btn-cta:hover { transform: translateY(-1px); border-color: var(--bb-red-glow); }

.btn-label {
  display: inline-flex;
  align-items: center;
  position: relative;
  z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
  .btn-scanner::before { animation: none; opacity: 0; }
  .btn-scanner::after { transition: none; transform: scale(1); }
  .btn-primary, .btn-submit, .btn-cta { transition: none !important; }
  .btn-primary:hover, .btn-submit:hover, .btn-cta:hover { transform: none; }
}

/* css/ambient-bg.css */
/* css/ambient-bg.css — fixed full-viewport canvas behind all content.
   Pairs with js/ambient-bg.js (cyberpunk/AI particle field + grid pan). */
#ambient-bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  /* Sit just above the body bg, but below all content. Sections that have
     their own backgrounds (process, trust, mid-cta, founder) will hide it
     where opaque, and let it show through where the section bg is var(--bb-black). */
  opacity: 0.85;
  mix-blend-mode: screen;
}

/* Make the body bg explicitly black so the ambient screens through it nicely */
body { background: var(--bb-black); }

/* Each section needs to sit above the ambient layer */
.site-header, main#main, .site-footer { position: relative; z-index: 1; }

/* css/pages.css */
/* css/pages.css
   Everything the multi-page build added: real navigation, sticky mobile CTA,
   inner-page heroes, pillar rows, FAQ, case cards, and the two-step form.
   Uses only tokens from tokens.css so the brand stays in one place. */

/* ============================================================ NAVIGATION */
.site-nav {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  margin-inline: auto;
}
.nav-link {
  position: relative;
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.01em;
  color: var(--bb-silver);
  padding-block: 6px;
  transition: color var(--t-base);
}
.nav-link:hover, .nav-link:focus-visible { color: var(--bb-white); }
.nav-link::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--bb-red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-base);
}
.nav-link:hover::after, .nav-link.is-current::after { transform: scaleX(1); }
.nav-link.is-current { color: var(--bb-white); }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  padding: 0 10px;
  background: none;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 1.5px;
  background: var(--bb-white);
  transition: transform var(--t-base), opacity var(--t-base);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.mobile-nav[hidden] { display: none; }   /* the hidden attribute must win */
.mobile-nav {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-5) var(--gutter) var(--s-6);
  background: rgba(10, 10, 10, 0.98);
  border-top: 1px solid var(--border-soft);
}
.mobile-nav .nav-link { font-size: 20px; padding-block: 12px; }
.mobile-nav-cta, .mobile-nav-alt {
  display: block;
  margin-top: var(--s-3);
  padding: 16px 20px;
  text-align: center;
  border-radius: var(--r-sm);
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 16px;
}
.mobile-nav-cta { background: var(--bb-red); color: var(--bb-white); }
.mobile-nav-alt { border: 1px solid var(--border-strong); color: var(--bb-white); }
body.nav-open { overflow: hidden; }

@media (max-width: 980px) {
  .site-nav { display: none; }
  .site-header .btn-cta { display: none; }
  .nav-toggle { display: flex; }
}
@media (min-width: 981px) {
  .mobile-nav { display: none !important; }
}

/* ==================================================== STICKY MOBILE CTA */
.mobile-cta-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  display: none;
  gap: var(--s-3);
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: rgba(10, 10, 10, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--border-soft);
  transform: translateY(110%);
  transition: transform var(--dur-slow) var(--ease-out);
}
.mobile-cta-bar.is-visible { transform: translateY(0); }
.mcb-primary {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 18px;
  border-radius: var(--r-sm);
  background: var(--bb-red);
  color: var(--bb-white);
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 16px;
  text-align: center;
}
.mcb-alt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px; min-height: 52px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-strong);
  color: #25D366;
}
@media (max-width: 900px) { .mobile-cta-bar { display: flex; } }
@media (max-width: 900px) { .site-footer { padding-bottom: 84px; } }

/* ============================================================ PAGE HERO */
.page-hero {
  position: relative;
  padding-block: clamp(56px, 9vw, 120px) clamp(40px, 6vw, 80px);
  overflow: hidden;
}
.page-hero.is-tight { padding-block-end: var(--s-6); }
.section.is-tight-top { padding-block-start: var(--s-7); }

.crumbs {
  display: flex;
  gap: var(--s-3);
  align-items: center;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bb-mid-gray);
  margin-bottom: var(--s-5);
}
.crumbs a { color: var(--bb-mid-gray); transition: color var(--t-base); }
.crumbs a:hover { color: var(--bb-white); }
.crumbs span[aria-current] { color: var(--bb-silver); }

.page-h1 {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--tr-snug);
  color: var(--bb-white);
  margin-block: var(--s-3) var(--s-5);
  max-width: 18ch;
}
.page-lead {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  color: var(--bb-silver);
  max-width: 62ch;
  margin-bottom: var(--s-6);
}
.container.narrow { max-width: 900px; }

/* ==================================================== HERO CRO ADDITIONS */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 14px 26px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-strong);
  color: var(--bb-white);
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: 16px;
  transition: border-color var(--t-base), background var(--t-base), transform var(--t-base);
}
.btn-ghost:hover {
  border-color: var(--bb-red);
  background: var(--bb-red-soft);
  transform: translateY(-1px);
}
.hero-reassure, .mid-cta-reassure, .footer-cta-reassure {
  margin-top: var(--s-4);
  font-size: 14px;
  color: var(--bb-mid-gray);
  max-width: 52ch;
}
.mid-cta-reassure, .footer-cta-reassure { margin-inline: auto; text-align: center; }
.hero-logos-line {
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--border-soft);
  font-size: 14px;
  color: var(--bb-mid-gray);
  max-width: 60ch;
}
.hero-logos-line strong { color: var(--bb-silver); font-weight: 700; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; }

/* ========================================================= PILLAR ROWS */
.pillar-list { display: flex; flex-direction: column; gap: var(--s-3); }
.pillar-row {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: var(--s-5);
  padding: var(--s-6) var(--s-5);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
  transition: border-color var(--t-base), transform var(--t-base);
  scroll-margin-top: 96px;
}
.pillar-row:hover { border-color: rgba(192, 57, 43, 0.45); transform: translateY(-2px); }
.pillar-num {
  font-family: var(--ff-mono);
  font-size: 34px;
  color: var(--bb-red);
  opacity: 0.85;
  line-height: 1;
}
.pillar-title {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: var(--fs-h3);
  color: var(--bb-white);
  margin-bottom: var(--s-3);
}
.pillar-short { color: var(--bb-silver); line-height: var(--lh-body); max-width: 70ch; }
.pillar-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--s-4);
  margin-top: var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px solid var(--border-soft);
}
.pillar-meta dt {
  font-size: 12px;
  letter-spacing: var(--tr-loose);
  text-transform: uppercase;
  color: var(--bb-red-glow);
  margin-bottom: var(--s-2);
}
.pillar-meta dd { color: var(--bb-silver); font-size: 15px; line-height: var(--lh-body); }

@media (max-width: 700px) {
  .pillar-row { grid-template-columns: 1fr; gap: var(--s-3); padding: var(--s-5) var(--s-4); }
  .pillar-num { font-size: 26px; }
}

/* ================================================================= FAQ */
.faq-list { display: flex; flex-direction: column; gap: var(--s-2); }
.faq-item {
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  background: rgba(255,255,255,0.015);
  transition: border-color var(--t-base);
}
.faq-item[open] { border-color: rgba(192, 57, 43, 0.4); }
.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-5);
  cursor: pointer;
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: 18px;
  color: var(--bb-white);
  list-style: none;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q::after {
  content: '+';
  flex: 0 0 auto;
  font-size: 24px;
  line-height: 1;
  color: var(--bb-red);
  transition: transform var(--t-base);
}
.faq-item[open] .faq-q::after { transform: rotate(45deg); }
.faq-a { padding: 0 var(--s-5) var(--s-5); }
.faq-a p { color: var(--bb-silver); line-height: var(--lh-loose); max-width: 78ch; }

/* ========================================================= CASE CARDS */
.case-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-6) var(--s-5);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255,255,255,0.025), transparent);
  transition: border-color var(--t-base), transform var(--t-base);
}
.case-card:hover { border-color: rgba(192,57,43,0.45); transform: translateY(-3px); }
.case-client {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 20px;
  color: var(--bb-white);
}
.case-context { font-size: 13px; color: var(--bb-mid-gray); margin-top: 2px; }
.case-metric {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 21px;
  line-height: 1.25;
  color: var(--bb-red-glow);
}
.case-detail { color: var(--bb-silver); line-height: var(--lh-body); font-size: 15px; }
.case-stack {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: auto;
  padding-top: var(--s-4);
  list-style: none;
}
.case-stack li {
  padding: 5px 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-full);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--bb-mid-gray);
}

/* ============================================================ CONTACT */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
}
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-form-wrap {
  padding: clamp(20px, 3vw, 40px);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  background: rgba(255,255,255,0.02);
}

.form-progress { display: flex; gap: var(--s-2); margin-bottom: var(--s-6); }
.fp-step {
  height: 3px; flex: 1;
  border-radius: var(--r-full);
  background: var(--bb-charcoal-2);
  transition: background var(--t-base);
}
.fp-step.is-active { background: var(--bb-red); }

.form-step { border: 0; padding: 0; margin: 0; }
.form-step-legend {
  font-size: 12px;
  letter-spacing: var(--tr-loose);
  text-transform: uppercase;
  color: var(--bb-red-glow);
  margin-bottom: var(--s-5);
}
.field { margin-bottom: var(--s-5); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }

.field label, .checkgroup legend {
  display: block;
  margin-bottom: var(--s-2);
  font-size: 14px;
  font-weight: 700;
  color: var(--bb-white);
}
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 52px;
  padding: 14px 16px;
  background: var(--bb-black);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
  color: var(--bb-white);
  font-family: var(--ff-body);
  font-size: 16px; /* 16px stops iOS zooming on focus */
  transition: border-color var(--t-base), box-shadow var(--t-base);
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--bb-red);
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.18);
}
.field input::placeholder, .field textarea::placeholder { color: var(--bb-grey-700); }
.field-hint { display: block; margin-top: var(--s-2); font-size: 13px; color: var(--bb-mid-gray); }
.field-error { display: none; margin-top: var(--s-2); font-size: 13px; color: #FF6B5A; }
.field.is-invalid .field-error { display: block; }
.field.is-invalid input, .field.is-invalid textarea, .field.is-invalid select { border-color: #FF6B5A; }

.checkgroup { border: 0; padding: 0; margin-bottom: var(--s-5); }
.checkgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--s-2); }
.checkitem {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 12px 14px;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: 14px;
  color: var(--bb-silver);
  transition: border-color var(--t-base), background var(--t-base);
}
.checkitem:hover { border-color: var(--border-strong); }
.checkitem input { width: 18px; height: 18px; min-height: 0; accent-color: var(--bb-red); }
.checkitem:has(input:checked) { border-color: var(--bb-red); background: var(--bb-red-soft); color: var(--bb-white); }

.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-actions { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; }
.btn-next, .btn-submit { min-height: 56px; }
.btn-submit.is-loading { opacity: 0.6; pointer-events: none; }
.form-microcopy { margin-top: var(--s-4); font-size: 13px; color: var(--bb-mid-gray); }

.form-success { text-align: center; padding-block: var(--s-6); }
.form-success p { color: var(--bb-silver); margin-top: var(--s-4); line-height: var(--lh-body); }
.form-success a { color: var(--bb-red-glow); text-decoration: underline; }
.form-error-banner {
  margin-top: var(--s-5);
  padding: var(--s-4);
  border: 1px solid #FF6B5A;
  border-radius: var(--r-sm);
  background: rgba(255, 107, 90, 0.08);
}
.form-error-banner p { color: var(--bb-silver); font-size: 14px; }
.form-error-banner a { color: var(--bb-white); text-decoration: underline; }

/* reassurance rail */
.contact-rail { display: flex; flex-direction: column; gap: var(--s-4); position: sticky; top: 96px; }
@media (max-width: 900px) { .contact-rail { position: static; } }
.rail-card {
  padding: var(--s-5);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  background: rgba(255,255,255,0.02);
}
.rail-title {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 17px;
  color: var(--bb-white);
  margin-bottom: var(--s-4);
}
.rail-steps { list-style: none; counter-reset: rail; display: flex; flex-direction: column; gap: var(--s-4); }
.rail-steps li {
  counter-increment: rail;
  position: relative;
  padding-left: 34px;
  font-size: 14px;
  line-height: var(--lh-body);
  color: var(--bb-silver);
}
.rail-steps li::before {
  content: counter(rail);
  position: absolute;
  left: 0; top: 0;
  width: 24px; height: 24px;
  display: grid;
  place-items: center;
  border-radius: var(--r-full);
  border: 1px solid var(--bb-red);
  color: var(--bb-red-glow);
  font-family: var(--ff-mono);
  font-size: 12px;
}
.rail-steps strong { color: var(--bb-white); }
.rail-text { font-size: 14px; color: var(--bb-mid-gray); line-height: var(--lh-body); }
.rail-cta {
  display: block;
  margin-top: var(--s-3);
  padding: 12px 14px;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
  color: var(--bb-white);
  font-size: 14px;
  text-align: center;
  transition: border-color var(--t-base), background var(--t-base);
}
.rail-cta:hover { border-color: var(--bb-red); background: var(--bb-red-soft); }
.trust-logos.is-stacked { flex-direction: column; align-items: flex-start; gap: var(--s-2); }

/* =========================================================== A11Y/MOTION */
@media (prefers-reduced-motion: reduce) {
  .mobile-cta-bar, .pillar-row, .case-card, .btn-ghost, .nav-link::after { transition: none; }
}

/* ================================================ MOBILE TAP TARGETS (WCAG 2.5.8)
   Every interactive element needs a 44px-high hit area on touch, even when the
   visible glyph is smaller. Padding does the work so the design does not change. */
@media (max-width: 900px) {
  .site-header .brand {
    min-height: 44px;
    padding-block: 11px;
    align-items: center;
  }
  .footer-links a,
  .footer-reach a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
  }
  .footer-copy a {
    display: inline-block;
    padding-block: 12px;
  }
  .crumbs a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}
@media (max-width: 900px) {
  .services-tag a,
  .card-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* ============================== HERO FOLD (CRO)
   On a laptop the primary CTA was landing below 900px. Tighten the hero on
   short desktop viewports so the button and the proof are visible on load. */
@media (min-width: 1025px) {
  #hero { padding-block: var(--s-7) var(--s-8); }
  #hero .hero-h1 { font-size: clamp(52px, 5.6vw, 82px); margin-bottom: var(--s-5); }
  #hero .hero-manifesto { margin-bottom: var(--s-4); }
  #hero .hero-eyebrow { margin-bottom: var(--s-4); }
  #hero .hero-sub { margin-bottom: var(--s-5); }
  #hero .hero-stats { margin-top: var(--s-5); padding-top: var(--s-4); }
  #hero .hero-logos-line { margin-top: var(--s-4); padding-top: var(--s-4); }
}
@media (min-width: 1025px) and (max-height: 820px) {
  #hero { padding-block: var(--s-6) var(--s-7); }
  #hero .hero-h1 { font-size: clamp(44px, 4.6vw, 66px); }
  #hero .hero-manifesto { display: none; }
}

/* Contact headline is smaller than a marketing hero: the form is the point. */
.page-hero.is-tight .page-h1 { font-size: clamp(34px, 4.2vw, 58px); max-width: 24ch; }

/* ============================================ CSS-ONLY MOBILE MENU
   No JavaScript in the open/close path: WP Rocket rewrites and re-executes
   bundles, so a JS-bound toggle can miss the first tap. The checkbox is
   keyboard reachable and screen-reader labelled; the label is the visual
   hamburger. JS only adds Escape-to-close as an enhancement. */
.nav-checkbox {
  position: absolute;
  width: 1px; height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
.nav-checkbox:focus-visible + .container .nav-toggle {
  outline: 2px solid var(--bb-red);
  outline-offset: 2px;
}
.mobile-nav { display: none; }
.nav-checkbox:checked ~ .mobile-nav { display: flex; }
.nav-toggle { cursor: pointer; }
.nav-checkbox:checked ~ .container .nav-toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-checkbox:checked ~ .container .nav-toggle span:nth-child(2) { opacity: 0; }
.nav-checkbox:checked ~ .container .nav-toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
@media (min-width: 981px) { .nav-checkbox:checked ~ .mobile-nav { display: none; } }

/* ================================ MOBILE HEADER: NO TOGGLE AT ALL
   The hamburger depended on a click being allowed to do its default thing, and
   something in the theme/plugin stack cancels that click. With only four short
   destinations there is no need for a disclosure: show them. Nothing to
   intercept, nothing to mistime, and one less tap to reach any page. */
@media (max-width: 980px) {
  .site-header .container {
    flex-wrap: wrap;
    height: auto;
    row-gap: 4px;
    padding-block: 8px;
  }
  .nav-toggle,
  .mobile-nav,
  .nav-checkbox:checked ~ .mobile-nav { display: none !important; }

  .site-header .brand { margin-right: auto; }

  .site-nav {
    display: flex;
    order: 3;
    width: 100%;
    margin-inline: 0;
    justify-content: space-between;
    gap: 4px;
  }
  .site-nav .nav-link {
    font-size: 13px;
    letter-spacing: 0;
    padding: 10px 6px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  /* the sticky bar already carries the primary action on small screens */
  .site-header .btn-cta { display: none; }
}
@media (max-width: 360px) {
  .site-nav .nav-link { font-size: 12px; padding-inline: 3px; }
}

/* css/wp-overrides.css */
/* css/wp-overrides.css
   Only relevant once the build is running inside WordPress. Harmless locally,
   because none of these selectors match the static prototype.

   The site uses Elementor Header & Footer Builder, which injects template 4907
   into every page including elementor_canvas ones. That duplicates our own
   header and footer. Hiding it is scoped to the five pages we own, so any other
   page that still depends on the shared header keeps working untouched. */

body.page-id-13111 [data-elementor-post-type="elementor-hf"],
body.page-id-13279 [data-elementor-post-type="elementor-hf"],
body.page-id-13257 [data-elementor-post-type="elementor-hf"],
body.page-id-5789  [data-elementor-post-type="elementor-hf"],
body.page-id-52    [data-elementor-post-type="elementor-hf"] {
  display: none !important;
}

/* The theme prints its own page wrappers with padding that fights our
   full-bleed sections. Neutralise only on our pages. */
body.page-id-13111 .ehf-header,
body.page-id-13279 .ehf-header,
body.page-id-13257 .ehf-header,
body.page-id-5789  .ehf-header,
body.page-id-52    .ehf-header { display: none !important; }

/* Our own header is the sticky one. Make sure nothing the theme injects
   sits above it in the stacking order. */
body.page-id-13111 .site-header,
body.page-id-13279 .site-header,
body.page-id-13257 .site-header,
body.page-id-5789  .site-header,
body.page-id-52    .site-header { z-index: 9000; }

/* ===================================================== CONTRAST (WCAG AA)
   Found by axe on the live site. These come from the original v2 tokens, not
   from the new pages, but they fail AA for small text so they are corrected
   here rather than left in place. */

/* Pillar numerals: deep red on charcoal measured 3.2:1. The glow red is the
   same hue at a luminance that clears 4.5:1. */
.service-card .card-num { color: var(--bb-red-glow); }

/* Body copy inside the red CTA card measured 4.33:1 at 85% white. */
.service-card.is-cta .card-body { color: #fff; }

/* Section lead paragraphs resolved to #74787c (4.45:1). */
.lead, .process-sub { color: var(--bb-mid-gray); }