/* ============================================================
   ACS Website — Global Design System
   Alternative Concept Studio (umbrella company)
   Token Architecture: primitive → semantic → component
   Cascade layers: reset → tokens → base → layout → components → pages → utilities
   Brand decisions logged in: ACS-Website/docs/brand-decisions.md
   ============================================================ */

/* --- Layer order ------------------------------------------ */
@layer reset, tokens, base, layout, components, pages, utilities;

/* ============================================================
   TIER 1: PRIMITIVE TOKENS
   Raw values. Never used directly in components.
   ============================================================ */
@layer tokens {
  :root {

    /* --- Colour primitives --------------------------------- */

    /* Neutral ramp */
    --primitive-neutral-950: #0D0D0D;
    --primitive-neutral-900: #1b1b1b;   /* confirmed from teardown: Epic UI bg */
    --primitive-neutral-850: #222222;
    --primitive-neutral-800: #2A2A2A;
    --primitive-neutral-700: #333333;
    --primitive-neutral-600: #3A3A3A;
    --primitive-neutral-400: #787878;
    --primitive-neutral-300: #A0A0A0;
    --primitive-neutral-200: #C8C8C8;
    --primitive-neutral-100: #E8E8E8;
    --primitive-neutral-000: #FFFFFF;

    /* ACS umbrella accent — warm champagne gold
       Rationale: neutral across all LOBs, suggests quality, heritage, studio craft.
       #D4BC96 on #1b1b1b: luminance ratio ≈ 8.8:1 — WCAG AAA ✓ */
    --primitive-gold-600: #B89A6E;
    --primitive-gold-500: #C8A87A;
    --primitive-gold-400: #D4BC96;
    --primitive-gold-300: #E2D0B0;
    --primitive-gold-100-a15: rgba(212, 188, 150, 0.15);

    /* eSport Simulation accent — Pantone 485 C (Andy-confirmed) */
    --primitive-esport-red: #DA291C;
    --primitive-esport-red-dim: rgba(218, 41, 28, 0.18);
    --primitive-esport-red-glow: rgba(218, 41, 28, 0.35);

    /* ACT accent — indigo (from ACT-Website) */
    --primitive-act-indigo: #5865F7;
    --primitive-act-indigo-dim: rgba(88, 101, 247, 0.15);
    --primitive-act-indigo-glow: rgba(88, 101, 247, 0.30);

    /* Alternative Photographic accent — AP gold (#C8A96A, codified brand colour)
       Updated from #B0A898 warm silver per Serge/Andy sign-off. */
    --primitive-ap-silver: #C8A96A;
    --primitive-ap-silver-dim: rgba(200, 169, 106, 0.12);
    --primitive-ap-silver-glow: rgba(200, 169, 106, 0.20);

    /* Carol Campbell Art accent — CCA teal (from CCA Design Style Guide)
       Updated from #C4826A terracotta per Rachel/Andy sign-off. */
    --primitive-cca-terra: #4A8FA8;
    --primitive-cca-terra-dim: rgba(74, 143, 168, 0.15);
    --primitive-cca-terra-glow: rgba(74, 143, 168, 0.30);

    /* Pickled Poems accent — deeper, cooler green
       Updated from #6B9E7A sage per Julie/Andy sign-off. */
    --primitive-pp-sage: #4A8A60;
    --primitive-pp-sage-dim: rgba(74, 138, 96, 0.12);
    --primitive-pp-sage-glow: rgba(74, 138, 96, 0.28);

    /* --- Typography primitives ----------------------------- */
    --font-display: 'Bebas Neue', 'Impact', 'Arial Narrow', sans-serif;
    --font-body:    'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;

    /* Type scale — fluid where used in clamp() */
    --size-11: 0.6875rem;
    --size-12: 0.75rem;
    --size-14: 0.875rem;
    --size-15: 0.9375rem;
    --size-16: 1rem;
    --size-18: 1.125rem;
    --size-20: 1.25rem;
    --size-24: 1.5rem;
    --size-32: 2rem;
    --size-40: 2.5rem;
    --size-48: 3rem;
    --size-64: 4rem;
    --size-80: 5rem;
    --size-96: 6rem;
    --size-120: 7.5rem;

    /* --- Spacing (8px base) -------------------------------- */
    --sp-1:   8px;
    --sp-2:  16px;
    --sp-3:  24px;
    --sp-4:  32px;
    --sp-5:  40px;
    --sp-6:  48px;
    --sp-8:  64px;
    --sp-10: 80px;
    --sp-12: 96px;
    --sp-16: 128px;

    /* --- Motion -------------------------------------------- */
    --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out:   cubic-bezier(0.45, 0, 0.55, 1);
    --dur-fast:      150ms;
    --dur-normal:    250ms;
    --dur-slow:      400ms;
    --dur-carousel:  700ms;
  }


  /* ============================================================
     TIER 2: SEMANTIC TOKENS
     Named by purpose, not by value.
     ============================================================ */
  :root {

    /* Backgrounds */
    --bg-base:     var(--primitive-neutral-900);   /* #1b1b1b — page base */
    --bg-surface:  var(--primitive-neutral-850);   /* #222222 — lifted surface */
    --bg-elevated: var(--primitive-neutral-800);   /* #2a2a2a */
    --border:      var(--primitive-neutral-600);   /* #3a3a3a */
    --border-muted: var(--primitive-neutral-700);  /* #333333 */

    /* Text */
    --text-primary:   var(--primitive-neutral-000);  /* #ffffff */
    --text-secondary: var(--primitive-neutral-300);  /* #a0a0a0 */
    --text-muted:     var(--primitive-neutral-400);  /* #787878 */

    /* ACS umbrella accent */
    --accent:         var(--primitive-gold-500);      /* #C8A87A — decorative/bg */
    --accent-hover:   var(--primitive-gold-400);      /* #D4BC96 — hover */
    --accent-text:    var(--primitive-gold-400);      /* #D4BC96 — text AA on dark */
    --accent-dim:     var(--primitive-gold-100-a15);  /* transparent for bg badges */
    --focus-ring:     var(--primitive-gold-400);      /* #D4BC96 */

    /* Layout */
    --nav-height:       120px;
    --max-width:        1440px;
    --content-width:    1200px;
    --page-padding:     clamp(24px, 5vw, 80px);
    --section-pad-y:    clamp(80px, 10vw, 128px);
    --card-radius:      6px;
    --card-gap:         24px;
  }

  @media (max-width: 767px) {
    :root {
      --nav-height:    80px;
      --section-pad-y: 64px;
    }
  }
}

/* ============================================================
   RESET
   ============================================================ */
@layer reset {
  *, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  html {
    scroll-behavior: smooth;
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
  }

  img, picture, video, canvas, svg { display: block; max-width: 100%; }
  input, button, textarea, select { font: inherit; }
  p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
  ul[role="list"], ol[role="list"] { list-style: none; }
}

/* ============================================================
   BASE
   ============================================================ */
@layer base {
  body {
    background-color: var(--bg-base);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  h1, h2, h3 {
    font-family: var(--font-body);
    color: var(--text-primary);
    line-height: 1.1;
    letter-spacing: -0.02em;
  }
  h1 { font-size: clamp(32px, 5vw, 56px); font-weight: 700; }
  h2 { font-size: clamp(28px, 4vw, 44px); font-weight: 700; }
  h3 { font-size: 22px; font-weight: 600; line-height: 1.3; }
  p  { color: var(--text-secondary); }
  strong { color: var(--text-primary); font-weight: 600; }

  a {
    color: var(--accent-text);
    text-decoration: none;
    transition: color var(--dur-fast) ease;
  }
  a:hover {
    color: var(--accent-hover);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  a:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 3px;
    border-radius: 2px;
  }

  /* Skip to content — accessibility first element in body */
  .skip-link {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 9999;
    padding: 10px 18px;
    background: var(--accent);
    color: #0a0a0a;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    transform: translateY(-200%);
    transition: transform var(--dur-fast) ease;
    text-decoration: none;
  }
  .skip-link:focus { transform: translateY(0); }
  .skip-link:hover { text-decoration: none; }

  /* Display font class — Bebas Neue role */
  .font-display {
    font-family: var(--font-display);
    letter-spacing: 0.03em;
    line-height: 1.0;
    font-weight: 400; /* Bebas Neue has only one weight */
  }
}

/* ============================================================
   LAYOUT UTILITIES
   ============================================================ */
@layer layout {
  .container {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 0 var(--page-padding);
  }

  .container--wide {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--page-padding);
  }

  .section {
    padding: var(--section-pad-y) 0;
  }

  /* Push body content below fixed header — hero and all sections start clear of nav */
  #main-content {
    padding-top: var(--nav-height);
  }

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

/* ============================================================
   TIER 3: COMPONENT TOKENS + COMPONENTS
   ============================================================ */
@layer components {

  /* ---- Eyebrow label ------------------------------------ */
  .eyebrow {
    font-family: var(--font-body);
    font-size: var(--size-11);
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent-text);
    margin-bottom: var(--sp-3);
    display: block;
  }

  /* ---- Buttons ------------------------------------------ */
  --btn-height:        48px;
  --btn-padding-x:     28px;
  --btn-radius:        4px;
  --btn-font-size:     15px;
  --btn-font-weight:   500;
  --btn-transition:    background-color var(--dur-fast) ease,
                       color var(--dur-fast) ease,
                       border-color var(--dur-fast) ease,
                       box-shadow var(--dur-fast) ease;

  .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: var(--btn-height, 48px);
    padding: 0 var(--btn-padding-x, 28px);
    border-radius: var(--btn-radius, 4px);
    font-family: var(--font-body);
    font-size: var(--btn-font-size, 15px);
    font-weight: var(--btn-font-weight, 500);
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    border: 1.5px solid transparent;
    transition:
      background-color var(--dur-fast) ease,
      color var(--dur-fast) ease,
      border-color var(--dur-fast) ease,
      box-shadow var(--dur-fast) ease;
    white-space: nowrap;
  }
  .btn:hover { text-decoration: none; }
  .btn:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 3px;
  }

  /* Primary — dark text on accent gold
     #0a0a0a on #C8A87A ≈ 7.4:1 — WCAG AAA ✓ */
  .btn-primary {
    background: var(--accent);
    color: #0a0a0a;
    border-color: var(--accent);
  }
  .btn-primary:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    color: #0a0a0a;
    box-shadow: 0 0 20px rgba(200, 168, 122, 0.3);
  }

  /* Ghost — white text on transparent */
  .btn-ghost {
    background: transparent;
    color: var(--text-primary);
    border-color: rgba(255, 255, 255, 0.3);
  }
  .btn-ghost:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.6);
    color: var(--text-primary);
  }

  /* LOB-accented button — used inside biz sections */
  .btn-lob {
    background: var(--lob-accent, var(--accent));
    color: var(--lob-btn-text, #ffffff);
    border-color: var(--lob-accent, var(--accent));
  }
  .btn-lob:hover {
    filter: brightness(1.15);
    color: var(--lob-btn-text, #ffffff);
  }
}

/* ============================================================
   NAVIGATION
   ============================================================ */
@layer components {
  .site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 200;
    height: var(--nav-height);
    background: transparent;
    transition:
      background-color var(--dur-normal) ease,
      border-bottom-color var(--dur-normal) ease,
      backdrop-filter var(--dur-normal) ease;
    border-bottom: 1px solid transparent;
  }
  .site-header.is-scrolled {
    background: rgba(27, 27, 27, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom-color: var(--border-muted);
  }

  .nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--nav-height);
    gap: var(--sp-4);
  }

  /* Logo image link */
  .nav-wordmark {
    display: flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
  }
  .nav-wordmark:hover { text-decoration: none; }

  /* Nav logo — replaces text lockup.
     height: 88px renders the full stacked mark at doubled size within the 120px nav bar
     (16px top/bottom via align-items: center); width: auto preserves the
     1778:1000 canvas aspect ratio (~1.78:1, content ~1.98:1 at 1709:863).
     At 88px rendered height, 2× display density requires 176px source — source is 1000px, crisp.
     Mobile (≤767px): scaled to 56px / 80px nav-height — keeps doubling intent within 390px viewport.
     Source: Brand Guidelines/logonew.png → images/logonew.webp (lossless,
     RGBA, transparent background confirmed; white lettering preserved — no
     near-white pixel removal applied). */
  .nav-logo {
    height: 88px;
    width: auto;
  }

  /* Desktop nav links */
  .nav-links {
    display: flex;
    align-items: center;
    gap: 32px;
  }
  .nav-link {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
    letter-spacing: 0.02em;
    transition: color var(--dur-fast) ease;
    position: relative;
    padding: 4px 0;
  }
  .nav-link:hover { color: var(--text-primary); text-decoration: none; }
  .nav-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 1.5px;
    background: var(--accent);
    border-radius: 1px;
    transform: scaleX(0);
    transition: transform var(--dur-fast) ease;
    transform-origin: left;
  }
  .nav-link:hover::after { transform: scaleX(1); }

  /* Hamburger */
  .nav-hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    background: none;
    border: 1.5px solid var(--border);
    border-radius: 4px;
    cursor: pointer;
    padding: 8px;
    color: var(--text-primary);
    transition: border-color var(--dur-fast) ease, background-color var(--dur-fast) ease;
  }
  .nav-hamburger:hover {
    border-color: var(--text-secondary);
    background: var(--bg-elevated);
  }
  .nav-hamburger:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 3px;
  }
  .hamburger-bar {
    display: block;
    width: 18px;
    height: 1.5px;
    background: currentColor;
    border-radius: 1px;
    transition: transform var(--dur-normal) ease, opacity var(--dur-normal) ease;
    transform-origin: center;
  }

  @media (max-width: 767px) {
    .nav-hamburger { display: flex; }

    /* Scale logo down proportionally — 56px keeps the doubling intent on 390px viewports */
    .nav-logo { height: 56px; }

    .nav-links {
      position: absolute;
      top: var(--nav-height);
      left: 0;
      right: 0;
      flex-direction: column;
      align-items: stretch;
      gap: 0;
      background: rgba(27, 27, 27, 0.97);
      border-bottom: 1px solid var(--border);
      padding: 8px 0;
      display: none;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }
    .nav-links.is-open { display: flex; }

    .nav-link {
      padding: 16px var(--page-padding);
      font-size: 16px;
    }
    .nav-link::after { display: none; }
  }
}

/* ============================================================
   HERO CAROUSEL
   ============================================================ */
@layer components {

  /* TIER 3: Carousel component tokens */
  :root {
    --carousel-height: calc(100svh - var(--nav-height));
    --carousel-min-height: 600px;
    --carousel-dot-size: 8px;
    --carousel-dot-active-w: 28px;
    --carousel-transition: opacity var(--dur-carousel) ease, visibility var(--dur-carousel) ease;
  }

  .hero-carousel {
    position: relative;
    height: var(--carousel-height);
    min-height: var(--carousel-min-height);
    overflow: hidden;
    background: var(--bg-base);
  }

  /* Track holds all slides stacked */
  .carousel-track {
    position: absolute;
    inset: 0;
  }

  /* Individual slides — cross-fade opacity transition */
  .carousel-slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    padding-bottom: clamp(80px, 10vw, 120px);
    opacity: 0;
    visibility: hidden;
    transition: var(--carousel-transition);
    /* Background image slot — swap here when real imagery exists */
    /* background-image: url('/images/hero-[lob].jpg'); */
    background-size: cover;
    background-position: center;
  }
  .carousel-slide.is-active {
    opacity: 1;
    visibility: visible;
  }

  /* Gradient overlay for text legibility on all slides */
  .carousel-slide::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.1) 100%),
      linear-gradient(to right, rgba(0,0,0,0.4) 0%, transparent 60%);
    z-index: 1;
    pointer-events: none;
  }

  /* SLIDE BACKGROUNDS
     All 5 slides: real imagery wired (2026-07-20).
     The .carousel-slide rule already sets background-size: cover; background-position: center.
     Gradient overlay for text legibility lives on .carousel-slide::before — not here. */
  .slide--esport {
    /* Source: ESS Hero.png 2880x1800 → hero-esport.webp (1920x1200, 51.8 KB) */
    background-color: #0E0505;
    background-image: url('../images/hero-esport.webp');
  }
  .slide--act {
    /* Source: ACT Hero.png 2880x1800 → hero-act.webp (1920x1200, 59.7 KB). Placeholder gradient retired. */
    background-color: #05060F;
    background-image: url('../images/hero-act.webp');
  }
  .slide--act .slide-eyebrow {
    /* ACT-only: pale CAD/FEA UI background makes the indigo eyebrow borderline.
       Tight text-shadow punches it out without looking heavy. 2026-07-20 */
    text-shadow: 0 1px 4px rgba(0,0,0,0.9);
  }
  /* AP: real imagery — Serge's bottom-heavy gradient override on ::before.
     The global ::before (bottom + left vignette) is replaced for this slide only.
     Spec: linear-gradient(to top, rgba(10,10,10,0.88) 0%, transparent 50%) — bottom-heavy,
     no full-field mask, no centred vignette. */
  .slide--ap {
    /* Source: hero-ap.webp — re-optimized 2026-07-20 to 1920x1200, 47.7 KB (was 355 KB at 2880x1800) */
    background-color: #0A0906;
    background-image: url('../images/hero-ap.webp');
  }
  .slide--ap::before {
    /* Serge's spec: bottom-heavy only — do not reintroduce the right-to-left side gradient */
    background: linear-gradient(to top, rgba(10,10,10,0.88) 0%, transparent 50%);
  }
  /* CCA: real imagery wired (2026-07-20). Placeholder teal-gradient retired. Global ::before vignette handles text legibility. */
  .slide--cca {
    /* Source: CCA-Hero.png 2880x1800 → hero-cca.webp (1920x1200, 67.9 KB) */
    background-color: #060C0E;
    background-image: url('../images/hero-cca.webp');
  }
  /* PP: real imagery */
  .slide--pp {
    /* Source: PP-Hero.png 2880x1800 → hero-pp.webp (1920x1200, 84.0 KB) */
    background-color: #060C08;
    background-image: url('../images/hero-pp.webp');
  }

  /* Slide content */
  .slide-content {
    position: relative;
    z-index: 2;
    /* padding-top: var(--nav-height) removed — hero now starts below the fixed nav
       via #main-content { padding-top: var(--nav-height) }, so this offset is no longer needed */
    padding-top: 0;
    width: 100%;
  }

  .slide-eyebrow {
    font-family: var(--font-body);
    font-size: var(--size-11);
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--slide-accent, var(--accent-text));
    margin-bottom: var(--sp-2);
    display: block;
    opacity: 0.9;
  }

  .slide-headline {
    font-family: var(--font-display);
    font-size: clamp(64px, 10vw, 140px);
    line-height: 1.0;
    color: var(--text-primary);
    margin-bottom: var(--sp-3);
    letter-spacing: 0.02em;
    max-width: 900px;
    /* Animate in when slide becomes active */
    transform: translateY(16px);
    opacity: 0;
    transition:
      transform var(--dur-slow) var(--ease-out) 100ms,
      opacity var(--dur-slow) ease 100ms;
  }

  .slide-descriptor {
    font-size: clamp(16px, 2vw, 20px);
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.75);
    max-width: 540px;
    margin-bottom: var(--sp-5);
    transform: translateY(12px);
    opacity: 0;
    transition:
      transform var(--dur-slow) var(--ease-out) 200ms,
      opacity var(--dur-slow) ease 200ms;
  }

  .slide-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    transform: translateY(10px);
    opacity: 0;
    transition:
      transform var(--dur-slow) var(--ease-out) 300ms,
      opacity var(--dur-slow) ease 300ms;
  }

  /* Animate content in when slide is active */
  .carousel-slide.is-active .slide-headline,
  .carousel-slide.is-active .slide-descriptor,
  .carousel-slide.is-active .slide-ctas {
    transform: translateY(0);
    opacity: 1;
  }

  /* No animation when reduced-motion is set */
  @media (prefers-reduced-motion: reduce) {
    .carousel-slide { transition: none; }
    .slide-headline, .slide-descriptor, .slide-ctas {
      transform: none !important;
      opacity: 1 !important;
      transition: none;
    }
  }

  /* LOB accent colours per slide — eyebrow text, lightened for dark bg */
  .slide--esport   { --slide-accent: #DA291C; }
  .slide--act      { --slide-accent: #8B98FF; }   /* lightened for legibility on dark */
  .slide--ap       { --slide-accent: #D4BE8C; }   /* AP gold lightened for dark bg */
  .slide--cca      { --slide-accent: #7EC0D8; }   /* CCA teal lightened for dark bg */
  .slide--pp       { --slide-accent: #7AB090; }   /* PP green lightened for dark bg */

  /* CTA button variants per slide accent */
  .slide--esport   .btn-slide { background: #DA291C; color: #fff; border-color: #DA291C; }
  .slide--esport   .btn-slide:hover { background: #F03020; border-color: #F03020; }
  .slide--act      .btn-slide { background: #5865F7; color: #fff; border-color: #5865F7; }
  .slide--act      .btn-slide:hover { background: #6B7AFF; border-color: #6B7AFF; }
  /* AP gold: dark text — #0A0A0A on #C8A96A ≈ 7.6:1 WCAG AAA ✓ */
  .slide--ap       .btn-slide { background: #C8A96A; color: #0A0A0A; border-color: #C8A96A; }
  .slide--ap       .btn-slide:hover { background: #D8B97A; border-color: #D8B97A; }
  /* CCA teal: dark text — #0A0A0A on #4A8FA8 ≈ 5.5:1 WCAG AA ✓
     Rachel-confirmed, Eleanor-mandated accessibility fix (white was 3.63:1, failed AA). */
  .slide--cca      .btn-slide { background: #4A8FA8; color: #0A0A0A; border-color: #4A8FA8; }
  .slide--cca      .btn-slide:hover { background: #5EA5BE; border-color: #5EA5BE; }
  /* PP green: dark text — #0A0A0A on #4A8A60 ≈ 5.09:1 WCAG AA ✓
     (white on #4A8A60 ≈ 4.12:1 fails AA; dark text applied) */
  .slide--pp       .btn-slide { background: #4A8A60; color: #0A0A0A; border-color: #4A8A60; }
  .slide--pp       .btn-slide:hover { background: #5A9A70; border-color: #5A9A70; }

  /* --- Carousel controls --------------------------------- */
  .carousel-controls {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    align-items: center;
    gap: var(--sp-3);
  }

  .carousel-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: rgba(255,255,255,0.08);
    border: 1.5px solid rgba(255,255,255,0.18);
    border-radius: 50%;
    cursor: pointer;
    color: var(--text-primary);
    transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease;
  }
  .carousel-arrow:hover {
    background: rgba(255,255,255,0.18);
    border-color: rgba(255,255,255,0.40);
  }
  .carousel-arrow:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 3px;
  }

  /* Dot indicators */
  .carousel-dots {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .carousel-dot {
    height: var(--carousel-dot-size);
    width: var(--carousel-dot-size);
    border-radius: 99px;
    background: rgba(255,255,255,0.28);
    border: none;
    cursor: pointer;
    transition:
      width var(--dur-normal) var(--ease-out),
      background-color var(--dur-normal) ease;
    padding: 0;
  }
  .carousel-dot.is-active {
    width: var(--carousel-dot-active-w);
    background: var(--text-primary);
  }
  .carousel-dot:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 3px;
  }

  /* Pause button — WCAG 2.2.2 */
  .carousel-pause {
    position: absolute;
    top: calc(var(--nav-height) + 16px);
    right: 24px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(0,0,0,0.4);
    border: 1.5px solid rgba(255,255,255,0.2);
    border-radius: 50%;
    cursor: pointer;
    color: var(--text-secondary);
    transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease;
  }
  .carousel-pause:hover {
    background: rgba(0,0,0,0.7);
    color: var(--text-primary);
  }
  .carousel-pause:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 3px;
  }

  /* Slide counter */
  .carousel-counter {
    position: absolute;
    bottom: 38px;
    right: 24px;
    z-index: 10;
    font-size: 12px;
    font-weight: 500;
    color: rgba(255,255,255,0.45);
    letter-spacing: 0.08em;
    font-family: var(--font-body);
    pointer-events: none;
  }

  @media (max-width: 600px) {
    .slide-ctas { gap: 12px; }
    .slide-ctas .btn { font-size: 14px; padding: 0 20px; height: 44px; }
    .carousel-counter { display: none; }
  }
}

/* ============================================================
   BUSINESS LINE SECTIONS
   ============================================================ */
@layer pages {

  /* Full-bleed showcase modules — one per LOB */
  .biz-section {
    position: relative;
    min-height: 70vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    /* LOB accent exposed as custom property for child elements */
    --lob-accent: var(--accent);
    --lob-accent-glow: rgba(200, 168, 122, 0.25);
    --lob-accent-dim: rgba(200, 168, 122, 0.12);
    --lob-btn-text: #0a0a0a;
  }

  /* Background gradient layer — placeholder until imagery is supplied
     SWAP: add background-image: url('/images/[lob].jpg') to the variant class */
  .biz-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.20) 70%, rgba(0,0,0,0.05) 100%);
    z-index: 1;
    pointer-events: none;
  }

  .biz-section--esport {
    background-color: #110404;
    background-image:
      radial-gradient(ellipse 80% 60% at 80% 50%, rgba(218,41,28,0.30) 0%, transparent 65%);
    --lob-accent: #DA291C;
    --lob-accent-glow: rgba(218,41,28,0.25);
    --lob-accent-dim: rgba(218,41,28,0.12);
    --lob-btn-text: #ffffff;
    border-top: 1px solid rgba(218,41,28,0.15);
  }
  .biz-section--act {
    background-color: #06070F;
    background-image:
      radial-gradient(ellipse 70% 60% at 20% 50%, rgba(88,101,247,0.28) 0%, transparent 60%);
    --lob-accent: #5865F7;
    --lob-accent-glow: rgba(88,101,247,0.25);
    --lob-accent-dim: rgba(88,101,247,0.12);
    --lob-btn-text: #ffffff;
    border-top: 1px solid rgba(88,101,247,0.12);
  }
  /* AP: accent updated to #C8A96A (AP gold); dark btn text for contrast */
  .biz-section--ap {
    background-color: #0B0A08;
    background-image:
      radial-gradient(ellipse 60% 55% at 75% 45%, rgba(200,169,106,0.18) 0%, transparent 55%);
    --lob-accent: #C8A96A;
    --lob-accent-glow: rgba(200,169,106,0.20);
    --lob-accent-dim: rgba(200,169,106,0.10);
    --lob-btn-text: #0A0A0A;
    border-top: 1px solid rgba(200,169,106,0.10);
  }
  /* CCA: terracotta retired; CCA teal (#4A8FA8) from CCA Design Style Guide.
     Dark btn text — #0A0A0A on #4A8FA8 ≈ 5.5:1 WCAG AA ✓ (Eleanor-mandated fix). */
  .biz-section--cca {
    background-color: #060C0E;
    background-image:
      radial-gradient(ellipse 75% 65% at 25% 55%, rgba(74,143,168,0.28) 0%, transparent 60%);
    --lob-accent: #4A8FA8;
    --lob-accent-glow: rgba(74,143,168,0.22);
    --lob-accent-dim: rgba(74,143,168,0.12);
    --lob-btn-text: #0A0A0A;
    border-top: 1px solid rgba(74,143,168,0.12);
  }
  /* PP: deeper cooler green (#4A8A60); dark btn text — #0A0A0A on #4A8A60 ≈ 5.09:1 WCAG AA ✓ */
  .biz-section--pp {
    background-color: #060C08;
    background-image:
      radial-gradient(ellipse 65% 55% at 70% 50%, rgba(74,138,96,0.25) 0%, transparent 55%);
    --lob-accent: #4A8A60;
    --lob-accent-glow: rgba(74,138,96,0.20);
    --lob-accent-dim: rgba(74,138,96,0.10);
    --lob-btn-text: #0A0A0A;
    border-top: 1px solid rgba(74,138,96,0.10);
  }

  /* Content container
     NOTE: horizontal padding comes from .container--wide (layout layer).
     Use padding-top/bottom here only — shorthand would override the horizontal
     padding from the earlier cascade layer. */
  .biz-content {
    position: relative;
    z-index: 2;
    padding-top: var(--section-pad-y);
    padding-bottom: var(--section-pad-y);
    width: 100%;
  }

  .biz-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(48px, 6vw, 96px);
    align-items: center;
  }

  /* Right-aligned layout: content in second column */
  .biz-inner--right .biz-text { grid-column: 2; grid-row: 1; }
  .biz-inner--right .biz-visual { grid-column: 1; grid-row: 1; }

  @media (max-width: 767px) {
    .biz-inner,
    .biz-inner--right {
      grid-template-columns: 1fr;
    }
    .biz-inner--right .biz-text { grid-column: 1; grid-row: 1; }
    .biz-inner--right .biz-visual { grid-column: 1; grid-row: 2; }
  }

  .biz-eyebrow {
    font-size: var(--size-11);
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--lob-accent);
    margin-bottom: var(--sp-2);
    display: block;
    opacity: 0.9;
  }

  .biz-heading {
    font-family: var(--font-display);
    font-size: clamp(48px, 7vw, 88px);
    line-height: 1.0;
    color: var(--text-primary);
    margin-bottom: var(--sp-3);
    letter-spacing: 0.02em;
  }

  .biz-desc {
    font-size: clamp(15px, 1.5vw, 18px);
    line-height: 1.65;
    color: rgba(255,255,255,0.70);
    margin-bottom: var(--sp-5);
    max-width: 480px;
  }

  .biz-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    align-items: center;
  }

  .biz-status {
    font-size: 12px;
    color: rgba(255,255,255,0.40);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  /* Visual slot — real imagery wired 2026-07-20.
     .biz-visual clips the img via aspect-ratio + overflow:hidden. */
  .biz-visual {
    aspect-ratio: 16 / 10;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
  }

  .biz-visual-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* Accent line */
  .biz-accent-bar {
    display: block;
    width: 40px;
    height: 3px;
    background: var(--lob-accent);
    border-radius: 2px;
    margin-bottom: var(--sp-3);
    opacity: 0.8;
  }

  /* Reveal animation — toggled by IntersectionObserver in main.js */
  .reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  }
  .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
  .reveal-delay-1 { transition-delay: 80ms; }
  .reveal-delay-2 { transition-delay: 160ms; }
  .reveal-delay-3 { transition-delay: 240ms; }
  .reveal-delay-4 { transition-delay: 320ms; }

  @media (prefers-reduced-motion: reduce) {
    .reveal, .reveal.is-visible {
      opacity: 1;
      transform: none;
      transition: none;
    }
  }
}

/* ============================================================
   FOOTER
   ============================================================ */
@layer components {
  .site-footer {
    background: var(--primitive-neutral-950);
    border-top: 1px solid var(--border-muted);
    padding: 48px 0 32px;
  }

  .footer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--sp-8);
    margin-bottom: var(--sp-6);
  }

  /* Footer logo — replaces ACS text lockup (footer-brand-mark + footer-tagline removed 2026-07-20).
     height matches the desktop header logo (88px); 56px on mobile. */
  .footer-brand-link {
    display: inline-flex;
    text-decoration: none;
    transition: opacity var(--dur-fast) ease;
  }
  .footer-brand-link:hover {
    opacity: 0.8;
    text-decoration: none;
  }

  .footer-logo {
    height: 88px;
    width: auto;
  }

  @media (max-width: 767px) {
    .footer-logo { height: 56px; }
  }

  .footer-heading {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: var(--sp-3);
  }

  .footer-links {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .footer-link {
    font-size: 14px;
    color: var(--text-muted);
    text-decoration: none;
    transition: color var(--dur-fast) ease;
  }
  .footer-link:hover { color: var(--text-primary); text-decoration: none; }

  .footer-link--live::after {
    content: '↗';
    margin-left: 4px;
    font-size: 11px;
    opacity: 0.6;
  }

  .footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding-top: 24px;
    border-top: 1px solid var(--border-muted);
  }

  .footer-copy {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
  }

  /* .footer-legal and .footer-legal-link retained for future use
     when Privacy Policy and Terms pages exist. */
  .footer-legal {
    display: flex;
    gap: 24px;
  }

  .footer-legal-link {
    font-size: 12px;
    color: var(--text-muted);
    text-decoration: none;
    transition: color var(--dur-fast) ease;
  }
  .footer-legal-link:hover { color: var(--text-secondary); text-decoration: none; }

  @media (max-width: 900px) {
    .footer-grid { grid-template-columns: 1fr 1fr; }
  }

  @media (max-width: 560px) {
    .footer-grid { grid-template-columns: 1fr; gap: var(--sp-5); }
    .footer-bottom {
      flex-direction: column;
      align-items: flex-start;
      gap: var(--sp-2);
    }
  }
}