/* ==========================================================================
   FREE STATE FAIR TICKETS — styles.css
   Creative Church campaign site foundation
   Sections: tokens → @font-face → reset → base type → layout → components
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Brand colors */
  --cobalt:  #002ABA;
  --white:   #FFFFFF;
  --ink:     #15161A;
  --cream:   #F7F6F2;

  /* Extended palette — derived, not invented */
  --cobalt-hover:    #0033e0;
  --cobalt-subtle:   #EEF1FB;   /* cobalt at ~6% opacity on white */
  --ink-muted:       #5A5C63;   /* secondary text */
  --ink-faint:       #9A9CA3;   /* tertiary / placeholder labels */
  --border:          #E3E2DC;   /* warm hairline */

  /* Typography */
  --font-display: "ChunkFive", Georgia, serif;
  --font-body:    "Inter", system-ui, sans-serif;

  /* Spacing scale (fluid) */
  --space-xs:   clamp(0.5rem,  1vw,  0.75rem);
  --space-sm:   clamp(0.75rem, 1.5vw, 1rem);
  --space-md:   clamp(1rem,    2vw,   1.5rem);
  --space-lg:   clamp(1.5rem,  3vw,   2.5rem);
  --space-xl:   clamp(2.5rem,  5vw,   4rem);
  --space-2xl:  clamp(4rem,    8vw,   7rem);

  /* Layout */
  --max-width:     1180px;
  --gutter:        clamp(20px, 5vw, 48px);
  --radius:        4px;
  --radius-lg:     10px;

  /* Motion */
  --ease-out:      cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 180ms;
  --duration-base: 320ms;
}

/* --------------------------------------------------------------------------
   2. @FONT-FACE — ChunkFive self-hosted
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "ChunkFive";
  src: url("assets/fonts/chunkfive.woff2") format("woff2"),
       url("assets/fonts/chunkfive.otf")   format("opentype");
  font-weight: 400;   /* ChunkFive is a single-weight display face */
  font-style:  normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   3. MINIMAL RESET
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin:     0;
  padding:    0;
}

html {
  -webkit-text-size-adjust: 100%;
  font-size: 16px;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

img,
video,
svg,
canvas {
  display:   block;
  max-width: 100%;
  height:    auto;
}

ul[class],
ol[class] {
  list-style: none;
}

a {
  color:           inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font:    inherit;
  color:   inherit;
  border:  none;
  background: transparent;
  cursor: pointer;
}

/* Accessible focus — cobalt ring, never invisible */
:focus-visible {
  outline:        2px solid var(--cobalt);
  outline-offset: 3px;
  border-radius:  var(--radius);
}

/* Remove focus for mouse users where browser supports :focus-visible */
:focus:not(:focus-visible) {
  outline: none;
}

/* --------------------------------------------------------------------------
   4. BASE TYPOGRAPHY
   -------------------------------------------------------------------------- */
body {
  font-family:        var(--font-body);
  font-size:          1rem;
  line-height:        1.65;
  color:              var(--ink);
  background-color:   var(--cream);
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Heading scale — body font for most headings; display font applied via class */
h1, h2, h3, h4, h5, h6 {
  font-family:  var(--font-body);
  font-weight:  600;
  line-height:  1.15;
  color:        var(--ink);
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2rem,   5vw,  3.5rem); }
h2 { font-size: clamp(1.5rem, 3vw,  2.25rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.5rem); }
h4 { font-size: 1.1rem; }

p {
  max-width: 68ch; /* comfortable measure */
}

p + p {
  margin-top: var(--space-sm);
}

strong { font-weight: 600; }
em     { font-style: italic; }

/* --------------------------------------------------------------------------
   5. LAYOUT / CONTAINER
   -------------------------------------------------------------------------- */
.container {
  max-width:      var(--max-width);
  margin-inline:  auto;
  padding-inline: var(--gutter);
}

/* --------------------------------------------------------------------------
   6. ACCESSIBILITY — SKIP LINK
   -------------------------------------------------------------------------- */
.skip-link {
  position:   absolute;
  top:        var(--space-sm);
  left:       var(--space-sm);
  z-index:    9999;

  display:          inline-block;
  padding:          var(--space-xs) var(--space-md);
  background-color: var(--cobalt);
  color:            var(--white);
  font-family:      var(--font-body);
  font-size:        0.875rem;
  font-weight:      600;
  letter-spacing:   0.03em;
  text-transform:   uppercase;
  border-radius:    var(--radius);

  /* Hidden until focused */
  transform: translateY(calc(-100% - var(--space-sm)));
  transition: transform var(--duration-fast) var(--ease-out);
}

.skip-link:focus-visible {
  transform:      translateY(0);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   7. SHARED COMPONENTS
   -------------------------------------------------------------------------- */

/* -- 7a. Eyebrow --
   ChunkFive display, cobalt, uppercase — the campaign's visual signature.
   Use sparingly: once or twice per section as a label above headings. */
.eyebrow {
  display:        block;
  font-family:    var(--font-display);
  font-size:      clamp(0.75rem, 1.2vw, 0.875rem);
  font-weight:    400;         /* ChunkFive is single-weight */
  color:          var(--cobalt);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height:    1;
  margin-bottom:  var(--space-xs);
}

/* -- 7b. Buttons -- */

/* Base button */
.btn {
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  gap:              0.5em;
  padding:          0.75em 1.75em;
  font-family:      var(--font-body);
  font-size:        0.9375rem;
  font-weight:      600;
  letter-spacing:   0.02em;
  line-height:      1;
  border-radius:    var(--radius);
  cursor:           pointer;
  white-space:      nowrap;
  transition:       background-color var(--duration-fast) var(--ease-out),
                    color            var(--duration-fast) var(--ease-out),
                    box-shadow       var(--duration-fast) var(--ease-out),
                    transform        var(--duration-fast) var(--ease-out);
}

.btn:active {
  transform: scale(0.97);
}

/* Primary — cobalt fill; the main CTA */
.btn-primary {
  background-color: var(--cobalt);
  color:            var(--white);
  box-shadow:       0 1px 3px rgb(0 42 186 / 0.20),
                    0 4px 12px rgb(0 42 186 / 0.12);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background-color: var(--cobalt-hover);
  box-shadow:       0 2px 6px rgb(0 42 186 / 0.25),
                    0 8px 20px rgb(0 42 186 / 0.18);
}

/* Ghost — ink outline; secondary/tertiary actions */
.btn-ghost {
  background-color: transparent;
  color:            var(--ink);
  box-shadow:       inset 0 0 0 1.5px var(--border);
}

.btn-ghost:hover,
.btn-ghost:focus-visible {
  background-color: var(--cobalt-subtle);
  color:            var(--cobalt);
  box-shadow:       inset 0 0 0 1.5px var(--cobalt);
}

/* -- 7c. Media placeholder --
   Blueprint/sketch feel — signals where photography will live.
   Min-height set here; sections override as needed. */
.media-ph {
  position:         relative;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  min-height:       320px;
  background-color: var(--cream);
  border:           1.5px dashed var(--border);
  border-radius:    var(--radius-lg);
  overflow:         hidden;
}

/* Crosshair grid lines — light blueprint feel */
.media-ph::before,
.media-ph::after {
  content:  "";
  position: absolute;
  inset:    0;
  pointer-events: none;
}

.media-ph::before {
  border-top:    1px solid var(--border);
  top:    50%;
  bottom: auto;
  height: 1px;
  left:   0;
  right:  0;
}

.media-ph::after {
  border-left: 1px solid var(--border);
  left:   50%;
  right:  auto;
  width:  1px;
  top:    0;
  bottom: 0;
}

/* Label rendered via data-label attribute (set by later tasks) or default */
.media-ph__label {
  position:    relative;    /* above the crosshairs */
  z-index:     1;
  display:     inline-block;
  padding:     0.35em 0.75em;
  font-family: var(--font-body);
  font-size:   0.75rem;
  font-weight: 600;
  color:       var(--ink-faint);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border:      1px solid var(--border);
  border-radius: var(--radius);
  background:  var(--white);
}

/* -- 7d. Reveal animation --
   Sections add .reveal to children; IntersectionObserver in main.js
   adds .is-visible to trigger entry. Respects prefers-reduced-motion. */
.reveal {
  opacity:    0;
  translate:  0 24px;
  transition: opacity    var(--duration-base) var(--ease-out),
              translate  var(--duration-base) var(--ease-out);
}

.reveal.is-visible {
  opacity:   1;
  translate: 0 0;
}

/* Stagger siblings — works automatically with nth-child delay */
.reveal:nth-child(2) { transition-delay: 80ms;  }
.reveal:nth-child(3) { transition-delay: 160ms; }
.reveal:nth-child(4) { transition-delay: 240ms; }
.reveal:nth-child(5) { transition-delay: 320ms; }

/* Disable transforms for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    translate:   none;
    opacity:     1;
    transition:  none;
  }

  .reveal.is-visible {
    /* already visible — no-op */
  }
}

/* ==========================================================================
   END OF FOUNDATION — later task stylesheets append below this line
   ========================================================================== */

/* ==========================================================================
   TASK 3 — Empathy Hook (#why) + 3-Step Plan (#plan)
   StoryBrand spine: problem beat → guide's clear path forward
   ========================================================================== */

/* --------------------------------------------------------------------------
   10. BAND — shared section wrapper
   Reusable modifier system for alternating section backgrounds
   -------------------------------------------------------------------------- */
.band {
  padding-block: clamp(64px, 10vw, 120px);
}

.band--cream {
  background-color: var(--cream);
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   10a. Band typography — empathy/hook copy
   -------------------------------------------------------------------------- */
.band__title {
  font-family:    var(--font-display);
  font-weight:    400;
  font-size:      clamp(1.75rem, 4vw, 3rem);
  line-height:    1.15;
  letter-spacing: -0.01em;
  color:          var(--ink);
  max-width:      22ch;
  margin-block:   var(--space-sm) var(--space-md);
}

.band__lead {
  font-family:  var(--font-body);
  font-size:    clamp(1rem, 1.8vw, 1.1875rem);
  font-weight:  400;
  line-height:  1.65;
  color:        var(--ink-muted);
  max-width:    52ch;
}

/* --------------------------------------------------------------------------
   11. PLAN SECTION — 3 numbered steps
   -------------------------------------------------------------------------- */
.plan {
  background-color: var(--white);
  padding-block:    clamp(64px, 10vw, 120px);
}

.plan__title {
  font-family:    var(--font-display);
  font-weight:    400;
  font-size:      clamp(1.75rem, 4vw, 3rem);
  line-height:    1.15;
  letter-spacing: -0.01em;
  color:          var(--ink);
  margin-block:   var(--space-sm) clamp(40px, 6vw, 72px);
}

/* --------------------------------------------------------------------------
   Steps grid — 3-col responsive, stacks clean on mobile
   -------------------------------------------------------------------------- */
.steps {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap:                   clamp(32px, 5vw, 56px) clamp(24px, 4vw, 48px);
  list-style:            none;
  padding:               0;
  margin:                0;
}

/* --------------------------------------------------------------------------
   Individual step — editorial: big numeral anchors the eye, text follows
   -------------------------------------------------------------------------- */
.step {
  position:      relative;
  padding-block-start: var(--space-md);
  /* Subtle cobalt top rule — the only decorative border, not a card */
  border-block-start: 2px solid var(--cobalt);
}

/* Photo at the top of each step; the numeral overlays its lower-left corner */
.step__media {
  position:      relative;
  aspect-ratio:  4 / 3;
  border-radius: var(--radius-lg);
  overflow:      hidden;
  margin-block-end: var(--space-md);
  background-color: var(--cobalt-subtle);
}
.step__media img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
}
/* Scrim so the white numeral stays legible over any photo */
.step__media::after {
  content:    "";
  position:   absolute;
  inset:      0;
  background: linear-gradient(to top, rgb(0 10 40 / 0.55), transparent 52%);
  pointer-events: none;
}

.step__num {
  position:       absolute;
  left:           0.5em;
  bottom:         0.15em;
  z-index:        1;
  font-family:    var(--font-display);
  font-weight:    400;
  font-size:      clamp(3rem, 5vw, 4.5rem);
  line-height:    0.85;
  letter-spacing: -0.03em;
  color:          var(--white);
  user-select:    none;
}

.step__head {
  font-family:    var(--font-body);
  font-weight:    600;
  font-size:      clamp(1.1rem, 1.8vw, 1.25rem);
  line-height:    1.25;
  letter-spacing: -0.01em;
  color:          var(--ink);
  margin-block-end: var(--space-xs);
}

.step p {
  font-family:  var(--font-body);
  font-size:    0.9375rem;
  font-weight:  400;
  line-height:  1.65;
  color:        var(--ink-muted);
  max-width:    36ch;
}

/* Bold copy inside step paragraphs — ink-dark, not cobalt */
.step p strong {
  font-weight: 600;
  color:       var(--ink);
}

/* --------------------------------------------------------------------------
   Reveal stagger delays for steps
   (base .reveal transition is 320ms; these add sequential offset)
   -------------------------------------------------------------------------- */
.steps .step:nth-child(1) { transition-delay: 80ms;  }
.steps .step:nth-child(2) { transition-delay: 200ms; }
.steps .step:nth-child(3) { transition-delay: 320ms; }

/* --------------------------------------------------------------------------
   Mobile refinements ≤ 600px
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
  .step__num {
    /* Tighten the numeral slightly on small screens */
    font-size: clamp(3.5rem, 14vw, 5rem);
  }

  .step p {
    max-width: 100%;
  }
}

/* ==========================================================================
   8. SITE HEADER
   Task 2: fixed overlay bar → solid white on scroll
   ========================================================================== */

.site-header {
  position:         fixed;
  inset-block-start: 0;
  inset-inline:     0;
  z-index:          900;
  display:          flex;
  align-items:      center;
  justify-content:  space-between;
  padding-inline:   var(--gutter);
  height:           72px;
  transition:
    background-color var(--duration-base) var(--ease-out),
    box-shadow       var(--duration-base) var(--ease-out),
    color            var(--duration-base) var(--ease-out);
}

/* Overlay state — hero visible underneath */
.site-header--overlay {
  background-color: transparent;
  color:            var(--white);
}

/* Scrolled state — hero out of view */
.site-header--scrolled {
  background-color: var(--white);
  color:            var(--ink);
  box-shadow:       0 1px 0 var(--border), 0 4px 24px rgb(21 22 26 / 0.06);
}

/* --------------------------------------------------------------------------
   Brand / wordmark
   -------------------------------------------------------------------------- */
.brand {
  display:     flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}

/* Logo-swap: both horizontal logos live in .brand; CSS shows the light one in
   the overlay state and the dark one in the scrolled state — no src swapping. */
.brand-logo {
  display:    block;
  height:     30px;
  width:      auto;
}

.brand-logo--dark { display: none; }

.site-header--scrolled .brand-logo--light { display: none; }
.site-header--scrolled .brand-logo--dark  { display: block; }

/* --------------------------------------------------------------------------
   Nav — desktop (>820px)
   -------------------------------------------------------------------------- */
.site-nav {
  display:     flex;
  align-items: center;
  gap:         var(--space-md);
}

.site-nav__link {
  font-family:  var(--font-body);
  font-size:    0.9375rem;
  font-weight:  500;
  color:        inherit;
  opacity:      0.85;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition:   opacity var(--duration-fast) var(--ease-out);
}

.site-nav__link:hover,
.site-nav__link:focus-visible {
  opacity: 1;
}

/* External "creativechurch.com" link — the arrow marks it opens a new tab */
.site-nav__ext {
  margin-left:   0.25em;
  font-size:     0.85em;
  opacity:       0.7;
}

/* CTA inside nav inherits .btn .btn-primary — no colour override needed;
   on overlay the blue button is on-brand and readable. */

/* --------------------------------------------------------------------------
   Hamburger toggle — hidden at desktop
   -------------------------------------------------------------------------- */
.nav-toggle {
  display:         none;
  flex-direction:  column;
  justify-content: center;
  align-items:     center;
  gap:             5px;
  width:           44px;
  height:          44px;
  padding:         10px;
  background:      transparent;
  border:          none;
  cursor:          pointer;
  /* z above nav panel */
  position:        relative;
  z-index:         10;
}

.nav-toggle__bar {
  display:    block;
  width:      22px;
  height:     2px;
  border-radius: 2px;
  /* colour from parent .site-header */
  background-color: currentColor;
  transition:
    transform  var(--duration-fast) var(--ease-out),
    opacity    var(--duration-fast) var(--ease-out),
    width      var(--duration-fast) var(--ease-out);
  transform-origin: center;
}

/* Animate bars to ✕ when open */
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
  opacity: 0;
  width:   0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* --------------------------------------------------------------------------
   Mobile nav — ≤ 820px
   -------------------------------------------------------------------------- */
@media (max-width: 820px) {
  .nav-toggle {
    display: flex;
  }

  .site-nav {
    position:         fixed;
    inset-block-start: 0;
    inset-inline-end:  0;
    inset-block-end:   0;
    width:            min(300px, 85vw);
    flex-direction:   column;
    align-items:      flex-start;
    justify-content:  center;
    gap:              var(--space-lg);
    padding:          var(--space-xl) var(--gutter);
    background-color: var(--white);
    box-shadow:       -4px 0 40px rgb(21 22 26 / 0.14);
    /* Slide in from right */
    transform:        translateX(100%);
    transition:       transform var(--duration-base) var(--ease-out);
    z-index:          800;
  }

  .site-nav.site-nav--open {
    transform: translateX(0);
  }

  .site-nav__link {
    font-size: 1.125rem;
    color:     var(--ink);
    opacity:   1;
  }

  .site-nav__link:hover {
    color: var(--cobalt);
  }

  /* Force ink text on scrolled mobile nav link since drawer is always white */
  .site-nav.site-nav--open .site-nav__link {
    color: var(--ink);
  }
}

/* ==========================================================================
   9. HERO SECTION
   Task 2: full-viewport, photography-first, cinematic
   ========================================================================== */

/* Scoped hero custom properties */
.hero {
  --hero-ph-bg: #2a2218; /* warm dark, only visible behind the placeholder until real photo lands */
}

.hero {
  position:   relative;
  display:    flex;
  align-items: flex-end;   /* content sits at bottom — editorial feel */
  min-height: clamp(560px, 88vh, 900px);
  overflow:   hidden;
  /* Push content below the fixed header on mobile once we add padding */
  padding-block-end: var(--space-xl);
}

/* --------------------------------------------------------------------------
   Hero photo placeholder — fills the entire hero
   -------------------------------------------------------------------------- */
.hero__media {
  position:      absolute;
  inset:         0;
  min-height:    0;   /* override .media-ph default min-height */
  height:        100%;
  border-radius: 0;   /* override .media-ph border-radius for full-bleed */
  border:        none;
  /* Warm, cinematic tint on the placeholder bg */
  background-color: var(--hero-ph-bg);
  /* Label text is white on dark bg */
  color:         rgb(255 255 255 / 0.35);
  font-size:     0.8125rem;
  font-style:    italic;
  letter-spacing: 0.04em;
  /* Remove crosshair pseudo — replaced by the scrim */
  z-index:       0;
}

/* Suppress the default crosshair lines for the hero placeholder */
.hero__media::before,
.hero__media::after {
  display: none;
}

/* Hero video — cover-fill the hero, behind the scrim */
.hero__video {
  width:      100%;
  height:     100%;
  object-fit: cover;
  object-position: center;
}

/* --------------------------------------------------------------------------
   Scrim — cobalt-tinted gradient for text legibility
   -------------------------------------------------------------------------- */
.hero__scrim {
  position: absolute;
  inset:    0;
  z-index:  1;
  /* Deep cobalt-smoke gradient: opaque bottom, transparent top-right */
  background:
    linear-gradient(
      160deg,
      rgb(0 10 60 / 0.15)   0%,
      rgb(0 10 40 / 0.45)  45%,
      rgb(0  4 24 / 0.80)  100%
    );
}

/* --------------------------------------------------------------------------
   Hero inner content
   -------------------------------------------------------------------------- */
.hero__inner {
  position:   relative;
  z-index:    2;
  width:      100%;
  /* Content sits at bottom-left by default (parent is flex align-items: flex-end) */
  padding-block-start: calc(72px + var(--space-xl)); /* clear fixed header */
}

/* --------------------------------------------------------------------------
   Eyebrow override for dark background
   -------------------------------------------------------------------------- */
.eyebrow--on-dark {
  color:   rgb(255 255 255 / 0.72);
  /* Slightly larger on dark to hold its own */
  font-size: clamp(0.8rem, 1.3vw, 0.9375rem);
}

/* --------------------------------------------------------------------------
   Hero lockup — the campaign's typographic signature
   -------------------------------------------------------------------------- */
.hero__lockup {
  font-weight:    400;   /* ChunkFive is single-weight */
  font-size:      clamp(3.5rem, 11vw, 9rem);
  line-height:    0.92;
  letter-spacing: -0.01em;
  color:          var(--white);
  margin-block:   var(--space-sm) var(--space-md);
  /* Override base h1 font which is Inter */
  font-family:    var(--font-display);
}

/* --------------------------------------------------------------------------
   Hero hook (subheadline / StoryBrand empathy line)
   -------------------------------------------------------------------------- */
.hero__hook {
  font-family:  var(--font-body);
  font-size:    clamp(1rem, 2vw, 1.1875rem);
  font-weight:  400;
  line-height:  1.5;
  color:        rgb(255 255 255 / 0.88);
  max-width:    46ch;
  margin-block-end: var(--space-md);
}

/* --------------------------------------------------------------------------
   Hero date pill — campaign window, high in the hero
   -------------------------------------------------------------------------- */
.hero__dates {
  display:          inline-block;
  font-family:      var(--font-body);
  font-size:        clamp(0.8125rem, 1.4vw, 0.95rem);
  font-weight:      600;
  letter-spacing:   0.05em;
  text-transform:   uppercase;
  color:            var(--white);
  background-color: var(--cobalt);
  padding:          0.55em 1.1em;
  border-radius:    999px;
  box-shadow:       0 4px 16px rgb(0 42 186 / 0.30);
  margin-block-end: var(--space-md);
  max-width:        none;
}

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

/* Ghost button variant for dark backgrounds */
.btn-ghost--on-dark {
  color:     var(--white);
  box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.45);
}

.btn-ghost--on-dark:hover,
.btn-ghost--on-dark:focus-visible {
  background-color: rgb(255 255 255 / 0.12);
  color:            var(--white);
  box-shadow:       inset 0 0 0 1.5px rgb(255 255 255 / 0.80);
}

/* --------------------------------------------------------------------------
   Hero — stagger reveal delays for the inner elements
   (parent .hero__inner holds: eyebrow, h1, dates, hook, actions — 1-indexed;
   the h1 isn't a .reveal so its nth-child rule simply no-ops)
   -------------------------------------------------------------------------- */
.hero__inner .reveal:nth-child(1) { transition-delay:  80ms; }
.hero__inner .reveal:nth-child(2) { transition-delay: 180ms; }
.hero__inner .reveal:nth-child(3) { transition-delay: 280ms; }
.hero__inner .reveal:nth-child(4) { transition-delay: 380ms; }
.hero__inner .reveal:nth-child(5) { transition-delay: 480ms; }

/* --------------------------------------------------------------------------
   Responsive tweaks
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  .hero__actions {
    flex-direction: column;
    align-items:    flex-start;
  }

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

/* ==========================================================================
   TASK 5 — Cobalt Claim band + Details/eligibility + map
   Color climax: the ONE full-bleed cobalt section; calm editorial fine print
   ========================================================================== */

/* --------------------------------------------------------------------------
   13. CLAIM BAND — full-bleed cobalt, white ChunkFive, centered
   -------------------------------------------------------------------------- */

/* Scoped non-palette tint: cobalt-glass-rule used only for the hairline
   separator inside the claim band. Derived from --cobalt at ~20% white. */
.claim {
  --claim-rule-color: rgb(255 255 255 / 0.18);
}

.claim {
  background-color: var(--cobalt);
  color:            var(--white);
  padding-block:    clamp(80px, 12vw, 140px);
  text-align:       center;
}

/* Inner wrapper — slightly narrower than full container for better measure */
.claim__inner {
  max-width: min(780px, 100%);
}

/* Eyebrow inverse variant: white on cobalt, holds optical weight */
.eyebrow--on-cobalt {
  color:     rgb(255 255 255 / 0.70);
  font-size: clamp(0.75rem, 1.2vw, 0.875rem);
}

/* Claim headline — ChunkFive, large, white: the typographic climax */
.claim__title {
  font-family:    var(--font-display);
  font-weight:    400;
  font-size:      clamp(2rem, 5vw, 3.75rem);
  line-height:    1.1;
  letter-spacing: -0.01em;
  color:          var(--white);
  margin-block:   var(--space-sm) var(--space-md);
  max-width:      24ch;
  margin-inline:  auto;
}

/* Lead copy — softened white, comfortable measure */
.claim__lead {
  font-family:  var(--font-body);
  font-size:    clamp(1rem, 1.8vw, 1.125rem);
  font-weight:  400;
  line-height:  1.6;
  color:        rgb(255 255 255 / 0.80);
  max-width:    50ch;
  margin-inline: auto;
}

/* Service times line — hairline rule above for visual separation */
.claim__times {
  display:      block;
  font-family:  var(--font-body);
  font-size:    0.9375rem;
  font-weight:  400;
  color:        rgb(255 255 255 / 0.72);
  letter-spacing: 0.02em;
  max-width:    none;
  margin-block: var(--space-md);
  padding-block-start: var(--space-md);
  border-block-start:  1px solid var(--claim-rule-color);
}

.claim__times strong {
  font-weight: 600;
  color:       var(--white);
}

/* Actions row — centers the button */
.claim__actions {
  display:         flex;
  justify-content: center;
  flex-wrap:       wrap;
  gap:             var(--space-sm);
}

/* --------------------------------------------------------------------------
   Button variant: white fill, cobalt label — inverse of .btn-primary
   Use ONLY on cobalt backgrounds (passes AA: #002ABA on #FFFFFF = 8.5:1)
   -------------------------------------------------------------------------- */
.btn-primary--on-cobalt {
  background-color: var(--white);
  color:            var(--cobalt);
  box-shadow:       0 1px 4px rgb(0 0 0 / 0.14),
                    0 4px 14px rgb(0 0 0 / 0.08);
}

.btn-primary--on-cobalt:hover,
.btn-primary--on-cobalt:focus-visible {
  background-color: var(--cream);
  color:            var(--cobalt);
  box-shadow:       0 2px 8px rgb(0 0 0 / 0.18),
                    0 8px 22px rgb(0 0 0 / 0.12);
}

/* Focus ring on cobalt surface — white ring visible against the background */
.claim .btn-primary--on-cobalt:focus-visible {
  outline:        2px solid var(--white);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Claim reveal — single block reveal (all children inside .claim__inner)
   -------------------------------------------------------------------------- */
.claim__inner.reveal { transition-delay: 60ms; }

/* --------------------------------------------------------------------------
   14. DETAILS SECTION — warm fine print; two-column, stacks mobile
   -------------------------------------------------------------------------- */
.details {
  background-color: var(--white);
  padding-block:    clamp(72px, 11vw, 128px);
}

/* Two-column layout: left = eligibility text, right = address + map */
.details__grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   clamp(40px, 7vw, 96px);
  align-items:           start;
}

/* --------------------------------------------------------------------------
   Details title — calm editorial weight
   -------------------------------------------------------------------------- */
.details__title {
  font-family:    var(--font-display);
  font-weight:    400;
  font-size:      clamp(1.75rem, 3.5vw, 2.5rem);
  line-height:    1.12;
  letter-spacing: -0.01em;
  color:          var(--ink);
  margin-block:   var(--space-xs) var(--space-md);
}

/* --------------------------------------------------------------------------
   Eligibility list — clean checked list with cobalt dot
   -------------------------------------------------------------------------- */
.details__list {
  list-style:    none;
  padding:       0;
  margin:        0;
  margin-block-end: var(--space-lg);
}

.details__list li {
  position:      relative;
  padding-inline-start: 1.5em;
  font-family:   var(--font-body);
  font-size:     clamp(0.9375rem, 1.6vw, 1.0625rem);
  font-weight:   400;
  line-height:   1.6;
  color:         var(--ink-muted);
  padding-block: 0.45em;
}

/* Hairline separator between items */
.details__list li + li {
  border-block-start: 1px solid var(--border);
}

/* Cobalt square bullet */
.details__list li::before {
  content:  "";
  position: absolute;
  left:     0;
  top:      calc(0.45em + 0.55em); /* vertically aligned to cap-height */
  width:    6px;
  height:   6px;
  border-radius: 1px;
  background-color: var(--cobalt);
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Email/phone note — friendly warm tone, slightly italicized for voice
   -------------------------------------------------------------------------- */
.details__note {
  font-family:  var(--font-body);
  font-size:    0.9375rem;
  font-style:   italic;
  font-weight:  400;
  line-height:  1.65;
  color:        var(--ink-muted);
  max-width:    44ch;
  padding:      var(--space-md);
  background:   var(--cream);
  border-radius: var(--radius-lg);
  border-inline-start: 3px solid var(--cobalt);
}

/* --------------------------------------------------------------------------
   Address block
   -------------------------------------------------------------------------- */
.details__addr {
  font-family:  var(--font-body);
  font-size:    clamp(0.9375rem, 1.6vw, 1.0625rem);
  font-weight:  400;
  line-height:  1.7;
  color:        var(--ink-muted);
  max-width:    none;
}

.details__addr strong {
  font-weight: 600;
  color:       var(--ink);
}

.details__addr + .details__addr {
  margin-block-start: var(--space-sm);
  margin-block-end:   var(--space-md);
}

/* --------------------------------------------------------------------------
   Map embed — responsive iframe wrapper, 4:3 aspect ratio
   -------------------------------------------------------------------------- */
.details__map {
  position:      relative;
  width:         100%;
  aspect-ratio:  4 / 3;
  border-radius: var(--radius-lg);
  overflow:      hidden;
  /* Scoped shadow — only for the map container */
  box-shadow:    0 1px 4px rgb(21 22 26 / 0.06),
                 0 8px 24px rgb(21 22 26 / 0.08);
  margin-block-start: var(--space-xs);
}

.details__map iframe {
  position: absolute;
  inset:    0;
  width:    100%;
  height:   100%;
  border:   0;
  display:  block;
}

/* --------------------------------------------------------------------------
   Reveal stagger for details columns
   -------------------------------------------------------------------------- */
.details__grid .reveal:nth-child(1) { transition-delay:  60ms; }
.details__grid .reveal:nth-child(2) { transition-delay: 180ms; }

/* --------------------------------------------------------------------------
   Mobile — ≤ 700px: single column, full-width map
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
  .details__grid {
    grid-template-columns: 1fr;
    gap:                   clamp(40px, 10vw, 64px);
  }

  .details__list li {
    max-width: 100%;
  }

  .details__note {
    max-width: 100%;
  }

  .details__map {
    aspect-ratio: 4 / 3;
  }
}

/* --------------------------------------------------------------------------
   Claim band mobile — center text, allow wrapping at narrow viewports
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  .claim__actions .btn-primary--on-cobalt {
    width:           100%;
    justify-content: center;
  }

  .claim__title {
    font-size: clamp(1.75rem, 8vw, 2.5rem);
  }
}

/* ==========================================================================
   TASK 4 — Feature sections: "What to expect" + "Kids experience"
   StoryBrand fear-reduction beats — editorial photo-left/right alternating
   ========================================================================== */

/* --------------------------------------------------------------------------
   12. FEATURE — shared photo+text alternating component
   Two-column grid: media ~1fr / body ~1fr; generous gap and whitespace.
   .feature--reverse swaps column order on desktop only (photo flips right).
   -------------------------------------------------------------------------- */
.feature {
  background-color: var(--cream);
  padding-block:    clamp(72px, 11vw, 128px);
}

/* Alternate rows — even features get white bg for breathing variation */
.feature + .feature {
  background-color: var(--white);
}

.feature__grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   clamp(40px, 6vw, 80px);
  align-items:           center;
}

/* --------------------------------------------------------------------------
   Feature media slot — tall, editorial photo proportions
   -------------------------------------------------------------------------- */
.feature__media {
  /* Scoped tint shown only while the photo loads */
  --feature-ph-bg: #ede9e1;
  min-height:    0;
  aspect-ratio:  4 / 5;
  border-radius: var(--radius-lg);
  background-color: var(--feature-ph-bg);
  overflow:      hidden;   /* clip the photo + spotlight glow to the rounded corners */
}

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

/* --------------------------------------------------------------------------
   Feature body — generous leading, relaxed measure
   -------------------------------------------------------------------------- */
.feature__body {
  /* Constrain body width inside the grid cell for comfortable reading */
  max-width: 44ch;
}

.feature__title {
  font-family:    var(--font-display);
  font-weight:    400;
  font-size:      clamp(1.75rem, 3.5vw, 2.75rem);
  line-height:    1.12;
  letter-spacing: -0.01em;
  color:          var(--ink);
  margin-block:   var(--space-xs) var(--space-md);
}

.feature__body p {
  font-family:  var(--font-body);
  font-size:    clamp(1rem, 1.8vw, 1.125rem);
  font-weight:  400;
  line-height:  1.7;
  color:        var(--ink-muted);
  max-width:    42ch;
}

/* --------------------------------------------------------------------------
   Reverse variant — photo moves to right column (order swap, no markup change)
   -------------------------------------------------------------------------- */
.feature--reverse .feature__media {
  order: 2;
}

.feature--reverse .feature__body {
  order: 1;
}

/* --------------------------------------------------------------------------
   Reveal stagger — media and body animate in sequence per section
   -------------------------------------------------------------------------- */
.feature__grid .reveal:nth-child(1) { transition-delay:  60ms; }
.feature__grid .reveal:nth-child(2) { transition-delay: 180ms; }

/* --------------------------------------------------------------------------
   Mobile — ≤ 700px: single column, media always on top
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
  .feature__grid {
    grid-template-columns: 1fr;
    gap:                   clamp(24px, 6vw, 40px);
  }

  /* Reset column order so media is always first (above the body) */
  .feature--reverse .feature__media,
  .feature--reverse .feature__body {
    order: unset;
  }

  .feature__media {
    /* On narrow screens use a landscape-ish ratio — fits the viewport better */
    aspect-ratio: 3 / 2;
  }

  .feature__body {
    max-width: 100%;
  }

  .feature__body p {
    max-width: 100%;
  }
}

/* ==========================================================================
   TASK 6 — Footer + reveal-on-scroll polish + a11y / responsive fixes
   ========================================================================== */

/* --------------------------------------------------------------------------
   15. SITE FOOTER — calm, editorial, minimal
   Two-tone: cream body / white bottom bar. Three columns → stacks mobile.
   -------------------------------------------------------------------------- */

/* Scoped footer custom props — derived from palette, never bare hex */
.site-footer {
  --footer-bg:          var(--cream);
  --footer-bottom-bg:   var(--white);
  --footer-rule:        var(--border);
  --footer-label-color: var(--cobalt);
}

.site-footer {
  background-color: var(--footer-bg);
  border-block-start: 1px solid var(--footer-rule);
  color: var(--ink-muted);
  font-family: var(--font-body);
}

/* --------------------------------------------------------------------------
   Footer inner grid — three columns, generous gap, aligns tops
   -------------------------------------------------------------------------- */
.site-footer__inner {
  display:               grid;
  grid-template-columns: minmax(210px, 1fr) 2.6fr;
  gap:                   clamp(36px, 5vw, 72px);
  padding-block:         clamp(56px, 9vw, 96px);
  align-items:           start;
}

/* Brand / contact column — stacked */
.site-footer__brand {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-sm);
  align-items:    flex-start;
}

/* The five link columns (mirrors creativechurch.com) */
.site-footer__cols {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap:                   clamp(28px, 3vw, 44px);
}

/* Contact block (email + phone) */
.site-footer__contact {
  font-size:   0.875rem;
  line-height: 1.7;
  max-width:   none;
}
.site-footer__contact-link {
  color:      var(--ink-muted);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}
.site-footer__contact-link:hover,
.site-footer__contact-link:focus-visible {
  color: var(--cobalt);
}

/* --------------------------------------------------------------------------
   Brand column
   -------------------------------------------------------------------------- */
.site-footer__logo {
  /* Dark horizontal logo on the cream footer */
  display: block;
  height:  34px;
  width:   auto;
}

.site-footer__brand .brand {
  display: inline-flex;
}


/* --------------------------------------------------------------------------
   Info + links column shared label style
   -------------------------------------------------------------------------- */
.site-footer__label {
  font-family:    var(--font-display);
  font-size:      0.6875rem;
  font-weight:    400;
  color:          var(--footer-label-color);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height:    1;
  margin-block-end: var(--space-sm);
  max-width: none;
}

/* --------------------------------------------------------------------------
   Service times
   -------------------------------------------------------------------------- */
.site-footer__times {
  font-size:    clamp(0.9375rem, 1.5vw, 1rem);
  font-weight:  500;
  color:        var(--ink);
  line-height:  1.55;
  margin-block-end: var(--space-sm);
  max-width: none;
}

/* --------------------------------------------------------------------------
   Address — not italic, friendly block
   -------------------------------------------------------------------------- */
.site-footer__addr {
  font-style:  normal;
  font-size:   0.875rem;
  line-height: 1.65;
  color:       var(--ink-muted);
}

/* --------------------------------------------------------------------------
   Footer nav list
   -------------------------------------------------------------------------- */
.site-footer__nav {
  list-style: none;
  padding:    0;
  margin:     0;
  display:    grid;
  gap:        0.55rem;
}

.site-footer__nav-link {
  font-size:    0.875rem;
  font-weight:  500;
  color:        var(--ink-muted);
  text-decoration: none;
  letter-spacing: 0.01em;
  transition:   color var(--duration-fast) var(--ease-out);
}

.site-footer__nav-link:hover,
.site-footer__nav-link:focus-visible {
  color: var(--cobalt);
}

/* --------------------------------------------------------------------------
   Social row — text labels, no icon files
   -------------------------------------------------------------------------- */
.site-footer__social {
  list-style: none;
  padding:    0;
  margin:     0;
  display:    flex;
  flex-wrap:  wrap;
  gap:        var(--space-sm) clamp(12px, 2vw, 20px);
}

.site-footer__social-link {
  font-size:    0.8125rem;
  font-weight:  500;
  color:        var(--ink-muted);
  text-decoration: none;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  transition:   color var(--duration-fast) var(--ease-out);
}

.site-footer__social-link:hover,
.site-footer__social-link:focus-visible {
  color: var(--cobalt);
}

/* --------------------------------------------------------------------------
   Bottom bar — white, hairline separator, copyright
   -------------------------------------------------------------------------- */
.site-footer__bottom {
  background-color: var(--footer-bottom-bg);
  border-block-start: 1px solid var(--footer-rule);
  padding-block: var(--space-md);
}

.site-footer__bottom-inner {
  display:         flex;
  flex-wrap:       wrap;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--space-sm) var(--space-lg);
}

.site-footer__copy {
  font-size:    0.8125rem;
  color:        var(--ink-muted);
  letter-spacing: 0.01em;
  max-width: none;
}

.site-footer__legal-link {
  font-size:    0.8125rem;
  color:        var(--ink-muted);
  text-decoration: none;
  transition:   color var(--duration-fast) var(--ease-out);
}
.site-footer__legal-link:hover,
.site-footer__legal-link:focus-visible {
  color: var(--cobalt);
}

/* --------------------------------------------------------------------------
   Footer — responsive collapse
   ≤ 860px: brand stacks above the link columns
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
  .site-footer__inner {
    grid-template-columns: 1fr;
    row-gap: clamp(40px, 7vw, 64px);
  }
}

/* --------------------------------------------------------------------------
   16. ACCESSIBILITY + RESPONSIVE FIXES (Task 6 sweep)
   -------------------------------------------------------------------------- */

/* Ensure .btn-primary--on-cobalt has a proper focus ring when used outside
   the .claim context (belt-and-suspenders, covers any future reuse) */
.btn-primary--on-cobalt:focus-visible {
  outline:        2px solid var(--white);
  outline-offset: 3px;
}

/* Ensure the nav-toggle has a visible focus ring at all header states.
   The default :focus-visible ring is cobalt which is invisible when the
   header is in overlay (white text on dark). Override to white on overlay. */
.site-header--overlay .nav-toggle:focus-visible {
  outline-color: var(--white);
}

/* Map iframe: ensure pointer-events work and no layout-breaking overflow */
.details__map iframe {
  pointer-events: auto;
}

/* --------------------------------------------------------------------------
   17. RESPONSIVE OVERFLOW FIXES — narrow viewport (≤ 400px) guards
   Prevent any horizontal scroll at 360px.
   -------------------------------------------------------------------------- */

/* Hero lockup: allow line breaks naturally and prevent blowout at 360px */
@media (max-width: 400px) {
  .hero__lockup {
    /* Already clamp-based, but add a hard cap for 360px safety */
    font-size: clamp(2.75rem, 15vw, 4.5rem);
    word-break: break-word;
  }

  .plan__title,
  .band__title {
    /* Prevent long words from causing overflow at smallest viewport */
    overflow-wrap: break-word;
  }

  /* Ensure claim title stays inside at 360 */
  .claim__title {
    overflow-wrap: break-word;
  }
}

/* Prevent any inline-block/flex child from escaping the viewport */
@media (max-width: 480px) {
  .hero__inner {
    /* Clip any overflow so hero content cannot cause horizontal scroll at narrow viewports */
    overflow: hidden;
  }
}


/* ==========================================================================
   REACT-BITS-INSPIRED EFFECTS (ported to vanilla CSS/JS)
   Subtle, on-brand, all reduced-motion safe. Added after the page build.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Hero lockup — word reveal + shine sweep
   -------------------------------------------------------------------------- */
.hero__lockup .lockup-word {
  display:   inline-block;
  /* Pad the painted box (so background-clip:text covers the i-dot and cap tops
     that a tight line-height would otherwise clip) and pull it back with a
     matching negative margin to keep the tight stacked spacing. */
  padding-block:  0.16em;
  margin-block:  -0.16em;
  opacity:   0;
  transform: translateY(0.5em);
  filter:    blur(10px);
  animation: lockupWordIn 0.7s var(--ease-out) forwards;
}
.hero__lockup .lockup-word:nth-of-type(1) { animation-delay: 0.10s; }
.hero__lockup .lockup-word:nth-of-type(2) { animation-delay: 0.24s; }
.hero__lockup .lockup-word:nth-of-type(3) { animation-delay: 0.38s; }

@keyframes lockupWordIn {
  to { opacity: 1; transform: none; filter: blur(0); }
}

/* Shine: a bright white band sweeps across the near-white letters */
.hero__lockup--shine .lockup-word {
  background: linear-gradient(
    110deg,
    #e9edff 0%, #e9edff 38%,
    #ffffff 50%,
    #e9edff 62%, #e9edff 100%
  );
  background-size: 250% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  /* word-in PLUS a slow infinite sheen (starts after the reveal settles) */
  animation:
    lockupWordIn 0.7s var(--ease-out) forwards,
    lockupShine  7s   linear 1.1s infinite;
}

@keyframes lockupShine {
  0%   { background-position: 220% 0; }
  100% { background-position: -120% 0; }
}

/* --------------------------------------------------------------------------
   2. Gloss sweep — a single light glint crosses the primary CTA on hover/focus
   -------------------------------------------------------------------------- */
.btn--gloss {
  position: relative;
  overflow: hidden;
}
.btn--gloss::after {
  content:        "";
  position:       absolute;
  top:            0;
  left:           0;
  height:         100%;
  width:          45%;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    transparent,
    rgb(255 255 255 / 0.50),
    transparent
  );
  transform: translateX(-250%) skewX(-18deg);
}
.btn--gloss:hover::after,
.btn--gloss:focus-visible::after {
  animation: btnGloss 0.75s var(--ease-out);
}
@keyframes btnGloss {
  from { transform: translateX(-250%) skewX(-18deg); }
  to   { transform: translateX(450%)  skewX(-18deg); }
}

/* --------------------------------------------------------------------------
   3. Spotlight glow — soft cobalt light follows the cursor (JS sets --mx/--my)
   -------------------------------------------------------------------------- */
.spotlight { position: relative; }
.spotlight__glow {
  position:      absolute;
  inset:         0;
  z-index:       2;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(
    circle 240px at var(--mx, 50%) var(--my, 50%),
    rgb(0 42 186 / 0.16),
    transparent 70%
  );
  /* Feather the glow toward the card edges so it dissolves into the page
     instead of getting clipped into a hard rectangular border. */
  -webkit-mask-image: radial-gradient(ellipse 118% 118% at 50% 50%, #000 38%, transparent 84%);
          mask-image: radial-gradient(ellipse 118% 118% at 50% 50%, #000 38%, transparent 84%);
  opacity:    0;
  transition: opacity 0.3s var(--ease-out);
}
.spotlight.spotlight--active .spotlight__glow { opacity: 1; }

/* --------------------------------------------------------------------------
   4. Animated cobalt claim band — drifting lighter-cobalt aurora
   -------------------------------------------------------------------------- */
.claim { position: relative; overflow: hidden; }
.claim__inner { position: relative; z-index: 1; }

.claim__aurora {
  position: absolute;
  inset:    0;
  z-index:  0;
  pointer-events: none;
  /* scoped lighter-cobalt glows — only ever seen blurred over the cobalt band */
  --aurora-a: var(--cobalt-hover);   /* #0033e0 */
  --aurora-b: #2a52ff;               /* lighter cobalt, scoped to this effect */
}
.claim__aurora::before,
.claim__aurora::after {
  content:       "";
  position:      absolute;
  width:         60vmax;
  height:        60vmax;
  border-radius: 50%;
  filter:        blur(70px);
  opacity:       0.45;
  will-change:   transform;
}
.claim__aurora::before {
  top:  -25%;
  left: -10%;
  background: radial-gradient(circle, var(--aurora-a), transparent 68%);
  animation: auroraDriftA 19s ease-in-out infinite alternate;
}
.claim__aurora::after {
  bottom: -30%;
  right:  -12%;
  background: radial-gradient(circle, var(--aurora-b), transparent 68%);
  animation: auroraDriftB 24s ease-in-out infinite alternate;
}
@keyframes auroraDriftA {
  from { transform: translate3d(0, 0, 0)        scale(1);    }
  to   { transform: translate3d(14%, 10%, 0)    scale(1.18); }
}
@keyframes auroraDriftB {
  from { transform: translate3d(0, 0, 0)        scale(1.1);  }
  to   { transform: translate3d(-12%, -8%, 0)   scale(1);    }
}

/* --------------------------------------------------------------------------
   Reduced-motion: kill all autonomous motion; keep everything legible/visible
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .hero__lockup .lockup-word {
    opacity:   1;
    transform: none;
    filter:    none;
    animation: none;
    background: none;
    color: var(--white);
    -webkit-text-fill-color: var(--white);
  }
  .btn--gloss::after { animation: none; }
  .claim__aurora::before,
  .claim__aurora::after    { animation: none; }
  .spotlight__glow         { transition: none; }
}

/* ==========================================================================
   "LIFE AT CREATIVE" — auto-advancing, swipeable photo strip
   A real scroll container (overflow-x:auto). main.js duplicates the items and
   drives scrollLeft for a seamless auto-loop that pauses on interaction; users
   can also swipe it by touch. Reduced-motion → no auto-advance, still swipeable.
   ========================================================================== */
.strip {
  padding-block:    clamp(56px, 9vw, 96px);
  background-color: var(--white);
}

.strip__head {
  margin-block-end: clamp(20px, 3.5vw, 36px);
}

.strip__title {
  font-family: var(--font-display);
  font-weight: 400;
  color:       var(--ink);
  font-size:   clamp(1.6rem, 3.5vw, 2.4rem);
  line-height: 1.1;
  max-width:   none;
}

/* Real scroll container: auto-advances via JS AND is swipeable on touch.
   Works reliably on mobile (no transform-animation freeze on iOS). */
.strip__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;               /* Firefox */
  -webkit-overflow-scrolling: touch;
  /* Soft fade at both edges so photos dissolve in/out rather than hard-cut */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.strip__viewport::-webkit-scrollbar { display: none; }   /* Chrome / Safari */

.strip__track {
  display:     flex;
  width:       max-content;
  list-style:  none;
  margin:      0;
  padding:     0;
}

.strip__item {
  flex: 0 0 auto;
  margin-inline-end: clamp(12px, 1.5vw, 20px);
}

.strip__item img {
  height:        clamp(200px, 46vw, 330px);
  width:         auto;
  display:       block;
  border-radius: var(--radius-lg);
  object-fit:    cover;
  -webkit-user-drag: none;
  user-select:   none;
}