/* ==========================================================================
   LOVE WEEK 2026 — Kings Church
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------- */
:root {
  --red:        #e84446;
  --red-nav:    #ea5052;
  --red-deep:   #c9302f;
  --red-soft:   #fdecec;
  --ink:        #0b0b0c;
  --ink-70:     rgba(11, 11, 12, .70);
  --ink-45:     rgba(11, 11, 12, .45);
  --paper:      #ffffff;
  --line:       rgba(11, 11, 12, .12);

  --nav-h:      4.5rem;
  --gutter:     clamp(1.25rem, 5vw, 4.5rem);
  --maxw:       76rem;

  --ease:       cubic-bezier(.22, 1, .36, 1);

  --track-wide: .18em;
  --track-nav:  .14em;
}

/* --- Reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a   { color: inherit; text-decoration: none; }
h1, h2, h3, p, figure { margin: 0; }

::selection { background: var(--red); color: #fff; }

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* --- Utilities ---------------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.eyebrow {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--red);
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 2.875rem;
  padding: .75rem 1.5rem;
  border: 1px solid var(--ink);
  border-radius: 999px;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: var(--track-nav);
  text-transform: uppercase;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background .35s var(--ease), color .35s var(--ease),
              border-color .35s var(--ease), transform .35s var(--ease);
}
.btn:hover  { background: var(--ink); color: #fff; transform: translateY(-2px); }
.btn:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

.btn--red   { background: var(--red); border-color: var(--red); color: #fff; }
.btn--red:hover { background: var(--ink); border-color: var(--ink); }

.btn--ghost { border-color: rgba(255,255,255,.5); color: #fff; }
.btn--ghost:hover { background: #fff; border-color: #fff; color: var(--ink); }

/* --- Nav ---------------------------------------------------------------- */
/* 1fr auto 1fr keeps the menu block optically centred on the page no matter
   how wide the brand mark is. */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding-inline: var(--gutter);
  /* Breathing room between the menu block and the hairline at the bar's edge */
  padding-block-end: .875rem;
  transition: background .4s var(--ease), box-shadow .4s var(--ease);
}
.nav.is-stuck {
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  box-shadow: 0 1px 0 var(--line);
}

/* Gets out of the way while the photo wall owns the screen */
.nav.is-immersed {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-100%);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}

.nav__brand {
  justify-self: start;
  display: block;
  padding-block: 1rem;
}
.nav__brand img {
  display: block;
  height: 1.0625rem;
  width: auto;
}

/* The menu block: flush to the top edge, curved along the bottom */
.nav__links {
  grid-column: 2;
  align-self: start;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 2rem);
  padding: 1.15rem clamp(1.5rem, 3vw, 2.5rem) 1.2rem;
  background: var(--red-nav);
  color: #fff;
  border-radius: 0 0 1.375rem 1.375rem;
}
.nav__links a {
  position: relative;
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: var(--track-nav);
  text-transform: uppercase;
  padding-block: .35rem;
  color: #fff;
  transition: color .3s var(--ease), opacity .3s var(--ease);
}
.nav__links a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .4s var(--ease);
}
.nav__links a:hover { opacity: .75; }
.nav__links a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav__links a.is-cta { font-weight: 700; }

/* Mobile nav */
.nav__toggle {
  display: none;
  width: 2.75rem; height: 2.75rem;
  margin-right: -.75rem;
  border: 0; background: none; padding: 0;
  cursor: pointer;
}
.nav__toggle span {
  display: block;
  width: 1.375rem; height: 1.5px;
  margin: 5px auto;
  background: var(--ink);
  transition: transform .4s var(--ease), opacity .3s var(--ease);
}
.nav.is-open .nav__toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav.is-open .nav__toggle span:nth-child(2) { opacity: 0; }
.nav.is-open .nav__toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 860px) {
  .nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: var(--nav-h);
  }
  .nav__toggle { display: block; }
  .nav__links {
    position: fixed;
    inset: var(--nav-h) var(--gutter) auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: .5rem 1.5rem 1.25rem;
    border-radius: 0 0 1.375rem 1.375rem;
    background: var(--red-nav);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s var(--ease), transform .35s var(--ease), visibility .35s;
  }
  .nav.is-open .nav__links { opacity: 1; visibility: visible; transform: none; }
  .nav__links a { padding-block: 1rem; font-size: .8125rem; border-bottom: 1px solid rgba(255,255,255,.25); }
  .nav__links a:last-child { border-bottom: 0; }
  .nav__links a::after { display: none; }
}

/* --- Hero --------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: calc(var(--nav-h) + 2rem) var(--gutter) 5rem;
  overflow: hidden;
  isolation: isolate;
}

/* Big brand hearts bleeding off both edges (carried over from the 2025 site).
   Enough of each one stays on screen to still read as a heart — cropped much
   harder and a solid shape just becomes a red blob. */
.hero__arc {
  position: absolute;
  top: 50%;
  height: min(46vh, 24rem);
  width: auto;
  max-width: none;
  z-index: -2;
  pointer-events: none;
  user-select: none;
}
.hero__arc--l { left: 0;  transform: translate(-26%, -50%) rotate(-14deg); }
.hero__arc--r { right: 0; transform: translate(26%, -50%) rotate(14deg); }

@media (max-width: 860px) {
  /* Anchored to opposite corners so they frame the logo instead of crossing it */
  .hero__arc { height: 26vh; opacity: .5; }
  .hero__arc--l { top: 0;    transform: translate(-34%, -22%) rotate(-14deg); }
  .hero__arc--r { top: 100%; transform: translate(34%, -78%) rotate(14deg); }
}

.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 60rem;
  text-align: center;
}

.hero__logo {
  display: block;
  width: min(74vw, 32rem);
  margin-inline: auto;
  animation: float 6s ease-in-out infinite;
  will-change: transform;
}
@media (max-width: 600px) { .hero__logo { width: min(86vw, 25rem); } }

.hero__tagline {
  margin-top: 1.75rem;
  font-size: clamp(.8125rem, 1.4vw, .9375rem);
  font-weight: 500;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink-70);
  animation: rise .9s var(--ease) .25s backwards;
}
.hero__dates {
  margin-top: .5rem;
  font-size: clamp(.75rem, 1.2vw, .8125rem);
  font-weight: 600;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--red);
  animation: rise .9s var(--ease) .35s backwards;
}

.hero__actions {
  margin-top: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .625rem;
  animation: rise .9s var(--ease) .45s backwards;
}

/* Ambient floating hearts (hero-section-7 pattern).
   Each one gets its own drift curve, duration and negative delay so no two
   ever line up — a single shared keyframe reads as a synchronised bounce. */
.hero__float {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  user-select: none;
  will-change: transform;
  opacity: .9;
}
.hero__float img { width: 100%; height: auto; }

.hero__float--1 { width: clamp(2.75rem, 5.2vw, 4.5rem);   top: 11%;    left: 16%;  animation: driftB 11s ease-in-out infinite; }
.hero__float--2 { width: clamp(1.375rem, 2.6vw, 2.125rem); top: 14%;    right: 24%; animation: driftD  7s ease-in-out -1.4s infinite; }
.hero__float--3 { width: clamp(2rem, 3.7vw, 3.25rem);      bottom: 21%; left: 14%;  animation: driftA  9s ease-in-out -2.6s infinite; }
.hero__float--4 { width: clamp(1.125rem, 2.1vw, 1.75rem);  bottom: 31%; right: 19%; animation: driftC 12s ease-in-out -3.4s infinite; }
.hero__float--5 { width: clamp(1rem, 1.7vw, 1.375rem);     top: 45%;    left: 25%;  animation: float   6.5s ease-in-out -4.8s infinite; }
.hero__float--6 { width: clamp(1.75rem, 3.1vw, 2.75rem);   bottom: 11%; right: 7%;  animation: driftA 8.5s ease-in-out -6.2s infinite; }

/* Between ~860 and 1100px the logo is wide enough to sit under --5. */
@media (max-width: 1100px) {
  .hero__float--5 { display: none; }
}

/* Same breakpoint as the corner hearts. Below it the logo takes nearly the full
   width, so the only clear space is above it and below the buttons — two
   floaters, both parked there, clear of the two corner hearts. */
@media (max-width: 860px) {
  .hero__float--2, .hero__float--4, .hero__float--5, .hero__float--6 { display: none; }
  .hero__float--1 { top: auto; bottom: 7%; left: 7%; }
  .hero__float--3 { top: 13%; left: auto; right: 8%; bottom: auto; }
}

/* Scroll cue */
.hero__cue {
  position: absolute;
  left: 50%;
  bottom: 1.75rem;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .625rem;
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink-45);
  z-index: 2;
}
.hero__cue i {
  display: block;
  width: 1px; height: 2.5rem;
  background: linear-gradient(to bottom, var(--red), transparent);
  animation: cue 2.4s ease-in-out infinite;
}

/* The reference curve — used by the logo itself */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-20px); }
}

/* Drift variants for the ambient hearts */
@keyframes driftA {           /* bob with a lean */
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-6deg); }
  50%      { transform: translate3d(9px, -26px, 0) rotate(7deg); }
}
@keyframes driftB {           /* slow figure of eight */
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  25%      { transform: translate3d(-13px, -11px, 0) rotate(-9deg); }
  50%      { transform: translate3d(0, -24px, 0) rotate(0deg); }
  75%      { transform: translate3d(13px, -11px, 0) rotate(9deg); }
}
@keyframes driftC {           /* deep lazy rise with a pulse */
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(-7px, -32px, 0) scale(1.1); }
}
@keyframes driftD {           /* tight, quicker shimmer */
  0%, 100% { transform: translate3d(0, 0, 0) rotate(5deg); }
  33%      { transform: translate3d(7px, -9px, 0) rotate(-6deg); }
  66%      { transform: translate3d(-6px, -18px, 0) rotate(4deg); }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes cue {
  0%, 100% { transform: scaleY(1);   opacity: 1; transform-origin: top; }
  50%      { transform: scaleY(.35); opacity: .4; transform-origin: top; }
}

/* --- Zoom parallax ------------------------------------------------------ */
.zoom {
  position: relative;
  height: 300vh;
  background: var(--paper);
}

.zoom__sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
}

/* --k is a resolution trick, not a layout one.
   `will-change: transform` pins a layer's raster at its layout size, so a tile
   scaled 4x on scroll ends up a 4x-upscaled blur. Laying every frame out --k
   times larger and starting the transform at 1/--k keeps the geometry
   identical while rasterising at the size the tile actually reaches. */
.zoom__sticky { --k: 4; }

.zoom__item {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform;
  transform: scale(calc(1 / 4));
  backface-visibility: hidden;
}

.zoom__frame {
  position: relative;
  overflow: hidden;
  border-radius: 2px;
  background: var(--ink);
}
.zoom__frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .7s var(--ease);
}
.zoom__frame img.is-in { opacity: 1; }

/* Desktop tile geometry — the base vw/vh values match the reference component
   exactly; every one is multiplied by --k and divided back out by the transform. */
.zoom__item:nth-child(1) .zoom__frame { width: calc(25vw * var(--k)); height: calc(25vh * var(--k)); }
.zoom__item:nth-child(2) .zoom__frame { width: calc(35vw * var(--k)); height: calc(30vh * var(--k)); top: calc(-30vh * var(--k)); left: calc(5vw * var(--k)); }
.zoom__item:nth-child(3) .zoom__frame { width: calc(20vw * var(--k)); height: calc(45vh * var(--k)); top: calc(-10vh * var(--k)); left: calc(-25vw * var(--k)); }
.zoom__item:nth-child(4) .zoom__frame { width: calc(25vw * var(--k)); height: calc(25vh * var(--k)); left: calc(27.5vw * var(--k)); }
.zoom__item:nth-child(5) .zoom__frame { width: calc(20vw * var(--k)); height: calc(25vh * var(--k)); top: calc(27.5vh * var(--k)); left: calc(5vw * var(--k)); }
.zoom__item:nth-child(6) .zoom__frame { width: calc(30vw * var(--k)); height: calc(25vh * var(--k)); top: calc(27.5vh * var(--k)); left: calc(-22.5vw * var(--k)); }
.zoom__item:nth-child(7) .zoom__frame { width: calc(15vw * var(--k)); height: calc(15vh * var(--k)); top: calc(22.5vh * var(--k)); left: calc(25vw * var(--k)); }

/* Caption that sits over the very first frame before the zoom starts */
.zoom__intro {
  position: absolute;
  inset: auto 0 8vh 0;
  text-align: center;
  z-index: 5;
  pointer-events: none;
  transition: opacity .5s var(--ease);
}
.zoom__intro p {
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink-45);
}

/* Mobile: fewer, larger tiles + a shorter scroll track.
   Portrait screens need a taller, denser cluster or the mid-zoom frames
   leave big holes of white where a wide desktop layout would have tiles. */
@media (max-width: 860px) {
  .zoom { height: 250vh; }
  /* Phones have the GPU memory to spare far less than desktops, so instead of
     the --k layer trick they simply drop will-change and let Chrome re-raster:
     measured free at this viewport size, and just as sharp. */
  .zoom__sticky { --k: 1; }
  .zoom__item { will-change: auto; transform: scale(1); }
  .zoom__item:nth-child(n + 7) { display: none; }

  .zoom__item:nth-child(1) .zoom__frame { width: 60vw; height: 24vh; top: 0;     left: 0; }
  .zoom__item:nth-child(2) .zoom__frame { width: 54vw; height: 23vh; top: -25vh; left: 2vw; }
  .zoom__item:nth-child(3) .zoom__frame { width: 42vw; height: 26vh; top: -22vh; left: -33vw; }
  .zoom__item:nth-child(4) .zoom__frame { width: 48vw; height: 22vh; top: 25vh;  left: -12vw; }
  .zoom__item:nth-child(5) .zoom__frame { width: 38vw; height: 20vh; top: 24vh;  left: 34vw; }
  .zoom__item:nth-child(6) .zoom__frame { width: 34vw; height: 22vh; top: -1vh;  left: 38vw; }
}

/* --- About -------------------------------------------------------------- */
.about {
  position: relative;
  padding: clamp(5rem, 12vh, 9rem) 0 clamp(4rem, 9vh, 7rem);
  background: var(--paper);
}

.about__head {
  display: grid;
  gap: clamp(1.75rem, 4vw, 4rem);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 1000px) {
  .about__head { grid-template-columns: 1.05fr 1fr; }
  .about__head > .eyebrow { grid-column: 1 / -1; margin-bottom: -1.25rem; }
  .about__head > .about__title { margin-top: 0; }
  .about__body { padding-top: .625rem; }
}
.about__body > * + * { margin-top: 1.25rem; }

.about__title {
  margin-top: 1.25rem;
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: clamp(2.125rem, 6.2vw, 4.25rem);
  line-height: .98;
  letter-spacing: -.03em;
  text-transform: uppercase;
}
.about__title em {
  font-style: normal;
  color: var(--red);
}

.about__lead {
  margin-top: 1.75rem;
  font-size: clamp(1.0625rem, 1.9vw, 1.375rem);
  line-height: 1.55;
  color: var(--ink);
  max-width: 42rem;
}

.about__grid {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: clamp(1.75rem, 4vw, 3rem);
  padding-top: clamp(2.5rem, 6vw, 3.5rem);
  border-top: 1px solid var(--line);
}
.about__grid h3 {
  font-family: 'Poppins', sans-serif;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: var(--track-nav);
  text-transform: uppercase;
}
.about__grid h3::before {
  content: '';
  display: block;
  width: 1.75rem; height: 2px;
  margin-bottom: 1rem;
  background: var(--red);
}
.about__grid p {
  margin-top: .75rem;
  font-size: .9375rem;
  color: var(--ink-70);
}

/* Stat strip */
.stats {
  background: var(--ink);
  color: #fff;
  padding: clamp(3rem, 7vw, 4.5rem) 0;
}
.stats__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: clamp(2rem, 5vw, 3rem);
  text-align: center;
}
.stats dt {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(2.25rem, 5.5vw, 3.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--red);
}
.stats dd {
  margin: .75rem 0 0;
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: rgba(255,255,255,.65);
}

/* --- Action cards ------------------------------------------------------- */
.actions {
  padding: clamp(4.5rem, 11vh, 8rem) 0;
  background: var(--paper);
}
.actions__grid {
  margin-top: clamp(2rem, 5vw, 3rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.action {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .625rem;
  padding: clamp(1.75rem, 3.5vw, 2.5rem);
  background: var(--paper);
  overflow: hidden;
  transition: background .4s var(--ease), color .4s var(--ease);
}
.action__n {
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: var(--track-wide);
  color: var(--red);
  transition: color .4s var(--ease);
}
.action h3 {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1.125rem, 2.2vw, 1.5rem);
  font-weight: 800;
  letter-spacing: -.01em;
  text-transform: uppercase;
  line-height: 1.1;
}
.action p {
  font-size: .875rem;
  color: var(--ink-70);
  transition: color .4s var(--ease);
}
.action__go {
  margin-top: auto;
  padding-top: 1.5rem;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: var(--track-nav);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.action__go svg { transition: transform .4s var(--ease); }
.action:hover { background: var(--red); color: #fff; }
.action:hover .action__n { color: rgba(255,255,255,.7); }
.action:hover p          { color: rgba(255,255,255,.85); }
.action:hover .action__go svg { transform: translateX(5px); }

/* --- Footer ------------------------------------------------------------- */
.foot {
  border-top: 1px solid var(--line);
  padding: clamp(3rem, 7vw, 4.5rem) 0 2rem;
  background: var(--paper);
}
.foot__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding-bottom: 2.5rem;
}
.foot__logo { width: min(60vw, 13rem); }
.foot__links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2rem;
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: var(--track-nav);
  text-transform: uppercase;
}
.foot__links a:hover { color: var(--red); }
.foot__bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .75rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
  font-size: .625rem;
  letter-spacing: var(--track-nav);
  text-transform: uppercase;
  color: var(--ink-45);
}
.foot__bar a:hover { color: var(--red); }

/* --- Sub-page hero (service projects / give) ---------------------------- */
.page {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--nav-h) + 4rem) 0 5rem;
  background: var(--red);
  color: #fff;
  overflow: hidden;
}
.page::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(11,11,12,.30) 0%, rgba(11,11,12,0) 26%,
                            rgba(11,11,12,0) 55%, rgba(11,11,12,.42) 100%);
  pointer-events: none;
}
.page__bg {
  position: absolute;
  inset: 0;
  object-fit: cover;
  width: 100%; height: 100%;
  opacity: .20;
  filter: saturate(.15) contrast(1.1);
}

/* Inverted chrome for the red sub-pages — a red menu block on a red hero would
   vanish, so the block flips to white with red type. */
body.is-inverse .nav__links { background: #fff; color: var(--red); }
body.is-inverse .nav__links a { color: var(--red); }
body.is-inverse .nav__toggle span { background: #fff; }
body.is-inverse .nav.is-stuck { background: transparent; box-shadow: none; backdrop-filter: none; }
@media (max-width: 860px) {
  body.is-inverse .nav__links a { border-color: rgba(232, 68, 70, .22); }
}
.page__inner { position: relative; z-index: 2; }
.page .eyebrow { color: rgba(255,255,255,.7); }
.page__title {
  margin-top: 1rem;
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: clamp(2.25rem, 7vw, 4.75rem);
  line-height: .98;
  letter-spacing: -.03em;
  text-transform: uppercase;
}
.page__sub { margin-top: 1.25rem; max-width: 34rem; color: rgba(255,255,255,.85); }

.tiles {
  margin-top: clamp(2.5rem, 6vw, 3.5rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: .75rem;
}
.tile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem;
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 3px;
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: background .35s var(--ease), color .35s var(--ease),
              border-color .35s var(--ease), transform .35s var(--ease);
}
.tile svg { flex: none; transition: transform .35s var(--ease); }
.tile:hover { background: #fff; color: var(--red); border-color: #fff; transform: translateY(-3px); }
.tile:hover svg { transform: translateX(4px); }

.tile--info { flex-direction: column; align-items: flex-start; gap: .5rem; cursor: default; }
.tile--info:hover { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); transform: none; }
.tile--info small {
  font-family: 'Poppins', sans-serif;
  font-size: .8125rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(255,255,255,.8);
}

/* Must sit above .page__bg (an absolutely positioned img, so it would otherwise
   paint over this static footer and swallow every click on the links). */
.page .foot { position: relative; z-index: 2; background: transparent; border-color: rgba(255,255,255,.28); }
.page .foot__bar { border-color: rgba(255,255,255,.28); color: rgba(255,255,255,.82); }
.page .foot__links a:hover, .page .foot__bar a:hover { color: rgba(255,255,255,.65); }

/* --- Reveal on scroll --------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* --- Reduced motion ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }

  /* Collapse the parallax into a plain, readable grid */
  .zoom { height: auto; }
  .zoom__sticky { position: static; height: auto; overflow: visible; padding: 4rem var(--gutter); }
  .zoom__item { position: static; display: block; transform: none !important; }
  .zoom__frame {
    width: 100% !important; height: auto !important;
    top: 0 !important; left: 0 !important;
    aspect-ratio: 3 / 2; margin-bottom: .75rem;
  }
  .zoom__intro { display: none; }
}