@font-face {
      font-family: 'Neue Haas Grotesk Display Pro';
      src: url('fonts/fonnts.com-Neue_Haas_Grotesk_Display_Pro_75_Bold.otf') format('opentype');
      font-weight: 700;
      font-style: normal;
      font-display: swap;
  }

  :root {
      --blue: #0000ee;
      --silver: #E0E0E0;
      --scarlet: #eb2800;
      --iron: #2E3538;
      --bg-0: #06060c;
      --ink: #ffffff;
      --ink-dim: rgba(255, 255, 255, 0.62);
      --ink-faint: rgba(255, 255, 255, 0.38);
      --line: rgba(255, 255, 255, 0.14);
      --line-strong: rgba(255, 255, 255, 0.32);
      --field-bg: rgba(255, 255, 255, 0.04);
      --field-bg-focus: rgba(255, 255, 255, 0.08);
  }

  * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
  }

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

  html,
  body {
      height: 100%;
  }

  body {
      font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
      color: var(--ink);
      background: #000;
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      letter-spacing: -0.011em;
  }

  /* Shared strip nav */
  .strip {
      display: grid;
      grid-template-columns: 1fr auto auto auto auto;
      column-gap: 40px;
      align-items: center;
      padding: 22px 32px;
      font-size: 11px;
      line-height: 1.35;
      font-weight: 500;
      letter-spacing: 0.01em;
      color: var(--ink);
  }

  .strip .brand {
      font-weight: 700;
      font-size: 13px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      justify-self: start;
      display: inline-flex;
      align-items: baseline;
      gap: 4px;
  }

  .strip .brand .star {
      color: var(--scarlet);
      font-size: 10px;
      line-height: 1;
      transform: translateY(-1px);
  }

  .strip .cell {
      max-width: 280px;
      color: var(--ink);
  }

  .strip .cell.right {
      text-align: right;
  }

  .strip .cta {
      color: var(--ink);
      text-decoration: none;
      border: none;
      border-bottom: 1px solid var(--ink);
      padding: 0 0 2px 0;
      background: transparent;
      font: inherit;
      letter-spacing: inherit;
      cursor: pointer;
      transition: color .15s, border-color .15s;
  }

  .strip .cta:hover {
      color: var(--silver);
      border-bottom-color: var(--silver);
  }

  .strip .ya-circle {
      width: 32px;
      height: 32px;
      display: block;
      filter: brightness(0) invert(1);
  }

  /* ============ 1. Video hero ============ */
  .hero-video {
      position: relative;
      width: 100%;
      height: 100vh;
      min-height: 640px;
      overflow: hidden;
      background: #111;
  }

  .hero-video video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: 0;
  }

  .hero-video::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg,
              rgba(0, 0, 0, 0.30) 0%,
              rgba(0, 0, 0, 0.65) 100%);
      z-index: 1;
      pointer-events: none;
  }

  .hero-nav {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      z-index: 3;
  }

  .hero-top-nav {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      z-index: 4;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 48px;
      padding: 30px 44px;
      color: #fff;
  }

  .hero-top-copy,
  .hero-top-dates {
      display: flex;
      flex-direction: column;
      gap: 2px;
      font-size: 13px;
      font-weight: 500;
      line-height: 1.3;
      letter-spacing: 0.005em;
      text-shadow: 0 1px 12px rgba(0, 0, 0, 0.4);
  }

  .hero-top-register {
      align-self: center;
      font-size: 13px;
      font-weight: 500;
      color: #fff;
      letter-spacing: 0.005em;
      line-height: 1.3;
      text-shadow: 0 1px 12px rgba(0, 0, 0, 0.4);
      transition: opacity .18s ease;
  }

  .hero-top-register:hover {
      opacity: 0.75;
  }

  .hero-top-register:focus-visible {
      outline: 2px solid #fff;
      outline-offset: 4px;
  }

  .hero-top-icons {
      display: flex;
      align-items: center;
      gap: 16px;
      align-self: center;
  }

  .hero-top-social {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      width: 32px;
      height: 32px;
      transition: opacity .18s ease;
  }

  .hero-top-social:hover {
      opacity: 0.75;
  }

  .hero-top-social svg {
      width: 24px;
      height: 24px;
  }

  .hero-ya-circle {
      width: 42px;
      height: 42px;
      display: block;
      filter: brightness(0) invert(1);
  }

  .mega {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 2;
      font-family: 'Neue Haas Grotesk Display Pro', 'Inter', 'Helvetica Neue', sans-serif;
      font-weight: 700;
      font-size: 28vw;
      line-height: 0.8;
      letter-spacing: -0.01em;
      text-align: center;
      color: var(--ink);
      text-transform: uppercase;
      user-select: none;
      pointer-events: none;
      white-space: nowrap;
  }

  /* Scroll-driven: scripts.js positions the wordmark with a transform as it
     glides from the hero into the top-left corner. */
  .mega.is-floating {
      position: fixed;
      top: 0;
      left: 0;
      right: auto;
      bottom: auto;
      z-index: 59;
      width: max-content;
      transform-origin: 0 0;
      will-change: transform;
  }

  /* Once docked it floats over every section: white over dark areas, blue
     over the light ones (marked data-light-bg in index.html). */
  .mega.is-floating {
      transition: color .25s ease;
  }

  .mega.is-docked.on-light {
      color: var(--blue);
  }

  /* ============ 2. Scroll story ============ */
  .scroll-story {
      position: relative;
      /* 180vh of animation plus --story-hold of scrolling where the finished
         full-screen video stays pinned, so it isn't skipped past too easily.
         scripts.js reads --story-hold to know where the animation ends. */
      --story-hold: 70vh;
      height: calc(180vh + var(--story-hold));
      background-color: #09090d;
  }

  .story-viewport {
      position: sticky;
      top: 0;
      height: 100vh;
      overflow: hidden;
      isolation: isolate;
  }

  .story-backdrop {
      position: absolute;
      inset: 0;
      z-index: 0;
      background:
          linear-gradient(rgba(4, 4, 10, 0.2), rgba(4, 4, 10, 0.2)),
          url('media/images/large/SAINTS_UpperRoom-28.webp') center / cover no-repeat;
      filter: grayscale(1) contrast(1.14) brightness(0.62);
  }

  .story-backdrop::after {
      content: "";
      position: absolute;
      inset: 0;
      opacity: 0.72;
      mix-blend-mode: overlay;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='noise'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='table' tableValues='0 0.85'/></feComponentTransfer></filter><rect width='100%25' height='100%25' filter='url(%23noise)'/></svg>");
      background-size: 240px 240px;
      pointer-events: none;
  }

  .story-words {
      position: absolute;
      inset: 0;
      z-index: 2;
      overflow: hidden;
      pointer-events: none;
  }

  .story-word {
      position: absolute;
      font-family: 'Neue Haas Grotesk Display Pro', 'Inter', sans-serif;
      font-size: clamp(70px, 13vw, 220px);
      font-weight: 700;
      line-height: 0.78;
      letter-spacing: -0.07em;
      text-transform: uppercase;
      color: var(--blue);
      opacity: 1;
      /* scripts.js sets --push-* (shoved aside by the growing video) and
         --hover-* (leans toward the cursor). */
      transform:
          perspective(900px)
          translate3d(calc(var(--push-x, 0px) + var(--hover-x, 0px)), calc(var(--push-y, 0px) + var(--hover-y, 0px)), 0)
          rotateX(var(--hover-rx, 0deg)) rotateY(var(--hover-ry, 0deg))
          scale(calc(var(--push-scale, 1) * var(--hover-scale, 1)));
      white-space: nowrap;
      text-shadow:
          0 0 18px rgba(0, 0, 238, 0.22),
          0 0 45px rgba(0, 0, 238, 0.12);
  }

  .story-word.gather {
      top: 9%;
      right: 1%;
  }

  .story-word.equip {
      top: 43%;
      left: 1%;
  }

  .story-word.send {
      bottom: 8%;
      right: 5%;
  }
  /* Above the growing video so the words are visibly shoved aside by it. */
  .story-word-front {
      z-index: 5;
      pointer-events: none;
  }

  /* Photos and words that react to the cursor (added by scripts.js on
     devices with a mouse). */
  .dispo.is-hoverable,
  .story-word.is-hoverable {
      pointer-events: auto;
  }
  .dispo {
      position: absolute;
      width: 22vw;
      max-width: 440px;
      aspect-ratio: 3 / 4;
      overflow: hidden;
      border-radius: 5px;
      box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.55);
      will-change: transform, opacity;
      pointer-events: none;
      z-index: 3;
      /* --parallax-* from the scroll story, --hover-* lean toward the cursor. */
      transform:
          perspective(900px)
          translate3d(calc(var(--parallax-x, 0px) + var(--hover-x, 0px)), calc(var(--parallax-y, 0px) + var(--hover-y, 0px)), 0)
          rotateX(var(--hover-rx, 0deg)) rotateY(var(--hover-ry, 0deg))
          scale(var(--hover-scale, 1))
          rotate(var(--parallax-rotate, 0deg));
  }

  .dispo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      /* Scale up from the top so the bottom ~10% (old logo watermark) is
         clipped by the container's overflow: hidden. */
      transform: scale(1.111);
      transform-origin: top center;
  }

  .dispo.d1 {
      top: 16%;
      left: 4%;
      z-index: 3;
  }

  .dispo.d2 {
      top: 76%;
      left: 13%;
      width: 18vw;
      max-width: 360px;
      z-index: 3;
  }

  .dispo.d2 img {
      animation-delay: -5s;
  }

  .dispo.d3 {
      top: -5%;
      right: 25%;
      z-index: 1;
  }

  .dispo.d3 img {
      animation-delay: -10s;
  }

  .dispo.d4 {
      top: 30%;
      left: 35%;
      width: 17vw;
      max-width: 320px;
  }

  .dispo.d5 {
      top: 68%;
      right: 20%;
      width: 17vw;
      max-width: 320px;
  }

  .dispo.d6 {
      top: 35%;
      right: 5%;
      width: 16vw;
      max-width: 300px;
  }

  .sess66 {
      position: absolute;
      top: var(--sess66-y, 88%);
      left: var(--sess66-x, 38%);
      width: var(--sess66-w, 24vw);
      height: var(--sess66-h, 60vh);
      max-width: unset;
      overflow: hidden;
      border-radius: 5px;
      box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.55);
      will-change: top, left, width, height;
      z-index: 4;
  }

  .sess66 video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
  }

  .sess66::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.82) 11%, transparent 32%);
  }

  .sess66-copy {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-end;
      text-align: center;
      padding: 48px 32px 8vh;
      color: var(--ink);
      color: var(--blue);
      transform: translateY(var(--copy-y, 110vh));
      z-index: 5;
      pointer-events: none;
  }

  .sess66-copy h2 {
      font-family: "Font Sans Variable", "Arial Narrow", -apple-system, BlinkMacSystemFont, "Avenir Next", Avenir, "Segoe UI", "Helvetica Neue", Helvetica, Cantarell, Ubuntu, Roboto, Noto, Arial, sans-serif;
      font-variation-settings: "wght" 700;
      text-rendering: optimizeLegibility;
      font-weight: 700;
      font-size: clamp(52px, 6.4vw, 108px);
      line-height: 0.94;
      letter-spacing: -0.03em;
      text-transform: uppercase;
      text-shadow: 0 6px 40px rgba(0, 0, 0, 0.55);
  }

  .sess66-copy p {
      margin-top: 24px;
      font-size: clamp(15px, 1.3vw, 20px);
      max-width: 640px;
      line-height: 1.55;
      color: rgba(255, 255, 255, 0.9);
      text-shadow: 0 3px 20px rgba(0, 0, 0, 0.6);
  }

  /* ============ 3. Mission + CTA ============ */
  .mission-cta {
      position: relative;
      min-height: 100vh;
      isolation: isolate;
      background: #f4f4f4;
      color: #111111;
      display: flex;
      flex-direction: column;
  }

  .mission-cta .backdrop {
      position: absolute;
      inset: 0;
      z-index: 0;
      overflow: hidden;
      background:
          radial-gradient(ellipse 80% 62% at 8% 8%, rgba(255, 255, 255, 0.95), transparent 66%),
          radial-gradient(ellipse 72% 58% at 92% 96%, rgba(230, 230, 230, 0.75), transparent 70%),
          linear-gradient(150deg, #fcfcfc 0%, #f2f2f2 52%, #ececec 100%);
  }

  .mission-cta .swirls {
      display: none;
  }


  .mission-cta .swirls path {
      fill: none;
      stroke-linecap: round;
      mix-blend-mode: screen;
  }

  .mission-cta .grain-2 {
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      opacity: 0.1;
      mix-blend-mode: multiply;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='3.2' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1.6 -0.2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  }

  /* Full-bleed intro banner: header + why copy over a worship photo. */
  .mission-banner {
      position: relative;
      z-index: 4;
      overflow: hidden;
      isolation: isolate;
      background: #080808;
      color: #fff;
      padding-bottom: clamp(48px, 6vw, 88px);
  }

  /* Photo sits on its own blurred, dimmed layer so the lettering and stage
     lights in the image don't compete with the copy on top. */
  .mission-banner::before,
  .mission-banner::after {
      content: "";
      position: absolute;
      z-index: -1;
      pointer-events: none;
  }

  /* Extra height above and below gives the photo room to slide on scroll
     (data-parallax in index.html, see scripts.js). */
  .mission-banner::before {
      inset: -35% -24px;
      transform: translate3d(0, var(--photo-y, 0px), 0);
      will-change: transform;
      background: url('media/images/large/SAINTS_UpperRoom-28.webp') center 40% / cover no-repeat;
      filter: blur(1.5px) brightness(0.7);
  }

  .mission-banner::after {
      inset: 0;
      background:
          /* Long, soft fade from the black the story video ends on, so there's
             no hard line between the video and the banner. */
          linear-gradient(180deg, #000 0, rgba(0, 0, 0, 0.75) 50px, rgba(0, 0, 0, 0.35) 110px, rgba(0, 0, 0, 0) 170px),
          /* ...and the bottom settles into the solid navy the venue photo fades
             up from, so both sides of that seam are the same colour. */
          linear-gradient(0deg, rgb(8, 8, 8) 0, rgba(8, 8, 8, 0.6) 60px, rgba(8, 8, 8, 0) 140px),
          linear-gradient(180deg, rgba(8, 8, 8, 0.6) 0%, rgba(8, 8, 8, 0.7) 50%, rgba(8, 8, 8, 0.85) 100%);
  }

  .mission-banner .mission-top-nav {
      color: #fff;
      border-bottom: 0;
  }

  .mission-banner .mission-top-headline,
  .mission-banner .mission-top-sub {
      color: #fff;
  }

  .mission-banner .mission-ya-circle {
      background-color: #fff;
  }

  .mission-banner .why-come {
      margin: clamp(40px, 5vw, 72px) auto 0;
      padding: 0 32px;
      max-width: 980px;
  }

  .mission-banner .why-copy {
      margin-top: 0;
      color: #fff;
      font-size: clamp(22px, 2.6vw, 38px);
      font-weight: 500;
  }

  .mission-top-nav {
      position: relative;
      z-index: 4;
      display: grid;
      /* Left column stays empty: the floating hero wordmark docks there. */
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      gap: 24px;
      padding: 26px 32px;
      color: var(--blue);
      border-bottom: 1px solid rgba(0, 0, 238, 0.16);
  }

  .mission-top-copy {
      display: flex;
      flex-direction: column;
      align-items: center;
      grid-column: 2;
      justify-self: center;
      text-align: center;
      gap: 4px;
      line-height: 1.2;
  }

  .mission-top-headline {
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 0.04em;
      color: var(--blue);
  }

  .mission-top-sub {
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--blue);
      opacity: 0.7;
  }

  .mission-ya-circle {
      grid-column: 3;
      justify-self: end;
      display: block;
      width: 38px;
      height: 38px;
      background-color: var(--blue);
      -webkit-mask-image: url('media/images/YA Logo.svg');
      mask-image: url('media/images/YA Logo.svg');
      -webkit-mask-size: contain;
      mask-size: contain;
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      -webkit-mask-position: center;
      mask-position: center;
  }

  .mission-inner {
      position: relative;
      z-index: 3;
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      /* No top padding: the When banner sits flush under the venue photo. */
      padding: 0 32px 96px;
      gap: 56px;
      width: min(1180px, 100%);
      margin: 0 auto;
  }

  .mission-kicker {
      margin-bottom: -12px;
      color: #555555;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.16em;
      text-transform: uppercase;
  }

  .event-date {
      margin-bottom: 12px;
      color: var(--blue);
      font-size: clamp(24px, 3.2vw, 44px);
      font-weight: 700;
      letter-spacing: -0.055em;
      line-height: 1;
  }

  .mission-line {
      font-size: clamp(16px, 1.4vw, 22px);
      line-height: 1.55;
      color: #555555;
      max-width: 620px;
      margin: 0 auto;
  }

  .section-heading h3,
  .timetable-panel h3 {
      margin-top: 10px;
      color: #111111;
      font-size: clamp(28px, 3.1vw, 48px);
      line-height: 1;
      letter-spacing: -0.045em;
  }

  .why-come {
      max-width: 780px;
      align-self: center;
      text-align: center;
  }

  .why-copy {
      margin-top: 14px;
      color: #444444;
      font-size: clamp(20px, 2vw, 30px);
      line-height: 1.27;
      letter-spacing: -0.035em;
  }

  .why-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      margin-top: 28px;
  }

  .why-card {
      min-height: 230px;
      padding: 28px;
      border: 1px solid rgba(0, 0, 0, 0.16);
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.5);
  }

  .why-card span {
      color: var(--blue);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.12em;
  }

  .why-card h4 {
      margin-top: 54px;
      color: #111111;
      font-size: 21px;
      letter-spacing: -0.035em;
  }

  .why-card p,
  .timetable-note {
      margin-top: 10px;
      color: #666666;
      font-size: 14px;
      line-height: 1.5;
  }

  /* ============ Feature grid (bento) ============ */
  .feature-grid-section {
      position: relative;
      width: 100%;
  }

  /* ---- When banner: full-bleed photo, dates + countdown on the right ---- */
  .when-banner {
      --photo-y: 0px;
      position: relative;
      isolation: isolate;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      width: 100vw;
      margin-left: calc(50% - 50vw);
      min-height: max(460px, 70vh);
      padding: 64px 32px;
      background: #111111;
      color: #fff;
  }

  .when-photo {
      position: absolute;
      left: 0;
      top: -20%;
      z-index: -2;
      width: 100%;
      height: 140%;
      object-fit: cover;
      object-position: center;
      transform: translate3d(0, var(--photo-y), 0);
      will-change: transform;
  }

  /* Darkest on the right, where the text sits. */
  .when-shade {
      position: absolute;
      inset: 0;
      z-index: -1;
      background:
          /* Top edge fades up into the venue photo above, matching its fade. */
          linear-gradient(180deg, rgb(8, 8, 8) 0, rgba(8, 8, 8, 0.75) 50px, rgba(8, 8, 8, 0.35) 110px, rgba(8, 8, 8, 0) 170px),
          linear-gradient(90deg, rgba(10, 10, 10, 0.15) 0%, rgba(10, 10, 10, 0.45) 45%, rgba(10, 10, 10, 0.85) 100%);
  }

  .when-content {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 14px;
      max-width: 640px;
      text-align: right;
  }

  .when-banner .tile-label {
      color: rgba(255, 255, 255, 0.85);
      font-size: clamp(16px, 1.6vw, 22px);
      letter-spacing: 0.24em;
  }

  .when-dates {
      font-size: clamp(40px, 6vw, 96px);
      font-weight: 700;
      line-height: 0.95;
      letter-spacing: -0.04em;
      text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
  }

  .countdown {
      display: flex;
      gap: clamp(14px, 2.4vw, 32px);
      margin-top: 18px;
  }

  .countdown-unit {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      min-width: 2.4em;
  }

  .countdown-num {
      font-size: clamp(34px, 4.4vw, 64px);
      font-weight: 700;
      line-height: 1;
      letter-spacing: -0.03em;
      font-variant-numeric: tabular-nums;
  }

  .countdown-label {
      color: rgba(255, 255, 255, 0.7);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.16em;
      text-transform: uppercase;
  }

  .countdown-note {
      color: rgba(255, 255, 255, 0.75);
      font-size: 14px;
  }

  .tile {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 28px 30px;
      background: rgba(255, 255, 255, 0.75);
      border: 1px solid rgba(0, 0, 0, 0.08);
      border-radius: 24px;
      color: #111111;
      overflow: hidden;
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      transition: box-shadow .24s ease, border-color .24s ease, background .24s ease;
  }

  .tile:hover {
      background: rgba(255, 255, 255, 0.94);
      border-color: rgba(83, 83, 83, 0.35);
      /* box-shadow: 0 0 0 3px rgba(0, 0, 238, 0.08), 0 12px 28px -24px rgba(0, 0, 0, 0.45); */
  }

  .tile:focus-within {
      /* border-color: rgba(0, 0, 238, 0.45); */
      /* box-shadow: 0 0 0 3px rgba(0, 0, 238, 0.12); */
  }

  .tile-label {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: #666666;
  }

  .tile-value {
      margin-top: auto;
      color: #111111;
      font-weight: 800;
      line-height: 0.9;
      letter-spacing: -0.05em;
      font-size: clamp(44px, 5.4vw, 88px);
  }

  .tile-sub {
      color: #666666;
      font-size: 14px;
      line-height: 1.35;
  }

  .tile-heading {
      color: #111111;
      font-size: clamp(22px, 2.4vw, 34px);
      font-weight: 700;
      line-height: 1;
      letter-spacing: -0.02em;
      margin-top: 2px;
  }

  .tile-address {
      color: #666666;
      font-size: 14px;
      line-height: 1.55;
      margin-top: 4px;
  }

  /* Location tile — full-screen venue photo straight after the banner. The
     words travel up the photo as the page scrolls (see scripts.js). */
  .tile-location {
      --photo-y: 0px;
      z-index: 3;
      width: 100%;
      height: 100vh;
      height: 100svh;
      min-height: 560px;
      padding: 0;
      gap: 0;
      justify-content: center;
      align-items: center;
      text-align: center;
      border: 0;
      border-radius: 0;
      background: #111111;
      isolation: isolate;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
  }

  .tile-location:hover {
      background: #111111;
  }

  .venue-photo {
      position: absolute;
      left: 0;
      top: -20%;
      z-index: -2;
      display: block;
      width: 100%;
      height: 140%;
      object-fit: cover;
      object-position: center;
      transform: translate3d(0, var(--photo-y), 0);
      will-change: transform;
      pointer-events: none;
  }

  .venue-shade {
      position: absolute;
      inset: 0;
      z-index: -1;
      background:
          /* Fade the top edge into the banner's dark navy so there's no seam
             (same 170px fade as the top of the banner). */
          linear-gradient(180deg, rgb(8, 8, 8) 0, rgba(8, 8, 8, 0.75) 50px, rgba(8, 8, 8, 0.35) 110px, rgba(8, 8, 8, 0) 170px),
          /* ...and the bottom edge into the When banner below (same fade). */
          linear-gradient(0deg, rgb(8, 8, 8) 0, rgba(8, 8, 8, 0.75) 50px, rgba(8, 8, 8, 0.35) 110px, rgba(8, 8, 8, 0) 170px),
          radial-gradient(ellipse 60% 45% at 50% 50%, rgba(10, 10, 10, 0.35), transparent 75%),
          linear-gradient(180deg, rgba(10, 10, 10, 0.35) 0%, rgba(10, 10, 10, 0.25) 50%, rgba(10, 10, 10, 0.6) 100%);
      pointer-events: none;
  }

  .tile-location-body {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      padding: 0 32px;
  }

  .tile-location .tile-label {
      color: rgba(255, 255, 255, 0.85);
      font-size: clamp(16px, 1.6vw, 22px);
      letter-spacing: 0.24em;
  }

  .tile-location .tile-heading {
      color: #fff;
      font-size: clamp(40px, 7vw, 112px);
      letter-spacing: -0.04em;
      line-height: 0.95;
      text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
  }

  .tile-location .tile-address {
      color: rgba(255, 255, 255, 0.9);
      font-size: clamp(15px, 1.4vw, 19px);
  }

  .venue-parking {
      max-width: 520px;
      margin-top: 14px;
      padding-top: 16px;
      border-top: 1px solid rgba(255, 255, 255, 0.28);
      color: rgba(255, 255, 255, 0.82);
      font-size: 14px;
      line-height: 1.55;
  }

  .venue-parking strong {
      display: block;
      margin-bottom: 4px;
      color: rgba(255, 255, 255, 0.78);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.16em;
      text-transform: uppercase;
  }

  /* Small map thumbnail in the corner; expands to fill the tile on click. */
  .venue-map {
      position: absolute;
      right: 32px;
      bottom: 32px;
      z-index: 2;
      width: 200px;
      height: 200px;
      border-radius: 18px;
      overflow: hidden;
      background: #e6e6e6;
      border: 2px solid rgba(255, 255, 255, 0.9);
      box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.6);
      transition: width .42s cubic-bezier(.2, .8, .2, 1), height .42s cubic-bezier(.2, .8, .2, 1),
          top .42s cubic-bezier(.2, .8, .2, 1), right .42s cubic-bezier(.2, .8, .2, 1),
          bottom .42s cubic-bezier(.2, .8, .2, 1),
          border-radius .42s ease, border-color .42s ease;
  }

  .venue-map-frame {
      display: block;
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border: 0;
      filter: saturate(.75) contrast(.95);
      pointer-events: none;
  }

  .venue-map-open {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: flex-end;
      justify-content: flex-end;
      padding: 7px;
      border: 0;
      background: transparent;
      cursor: zoom-in;
  }

  .venue-map-open svg,
  .venue-map-close svg {
      width: 16px;
      height: 16px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
  }

  .venue-map-open svg {
      box-sizing: content-box;
      padding: 5px;
      border-radius: 8px;
      background: var(--blue);
      color: #fff;
      transition: transform .18s ease;
  }

  .venue-map-open:hover svg,
  .venue-map-open:focus-visible svg {
      transform: scale(1.1);
  }

  .venue-map-close {
      position: absolute;
      top: 12px;
      right: 12px;
      display: grid;
      place-items: center;
      width: 36px;
      height: 36px;
      border: 0;
      border-radius: 10px;
      background: #fff;
      color: #111111;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
      cursor: pointer;
      opacity: 0;
      visibility: hidden;
      transition: opacity .2s ease, visibility .2s ease;
  }

  .tile-location.is-map-open .venue-map {
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      border-radius: 0;
      border-color: transparent;
  }

  .tile-location.is-map-open .venue-map-frame {
      pointer-events: auto;
  }

  .tile-location.is-map-open .venue-map-open {
      display: none;
  }

  .tile-location.is-map-open .venue-map-close {
      opacity: 1;
      visibility: visible;
      transition-delay: .3s;
  }

  @media (prefers-reduced-motion: reduce) {
      .venue-map {
          transition: none;
      }
  }

  /* ============ Programme: stacked day cards ============
     Modelled on silent-house.com's Studios / Productions / Touring stack.
     Each day card is sticky and pins a "tab" height lower than the one
     before, so as you scroll the next day slides up over the last and the
     earlier days' number + name stay visible along the top. scripts.js sets
     --op (0 → 1) on a card as the next one covers it, fading its details. */
  /* Full-bleed: breaks out of the centred column to span the whole page. */
  .day-stack-section {
      --stick: 72px;          /* clear of the docked SAINTS / register band */
      --tab: 64px;            /* visible strip of each covered card */
      width: 100vw;
      margin: 12px 0 0 calc(50% - 50vw);
  }

  .day-stack-head {
      display: flex;
      flex-direction: column;
      gap: 6px;
      padding: 28px 32px 20px;
  }

  .day-stack {
      --n: 3;                 /* number of day cards */
      list-style: none;
  }

  /* Each card's bottom margin reaches down to where the last card ends, so
     when the stack scrolls away all the cards leave together and the tabs
     stay intact. The next card's negative top margin cancels it back out so
     the cards sit edge to edge in the normal flow. */
  .day-card {
      position: sticky;
      top: calc(var(--stick) + var(--i) * var(--tab));
      margin-bottom: calc((var(--n) - 1 - var(--i)) * var(--tab));
  }

  .day-card + .day-card {
      margin-top: calc(0px - (var(--n) - var(--i)) * var(--tab));
  }

  .day-card-inner {
      display: grid;
      grid-template-columns: 56px minmax(0, 4fr) minmax(0, 5fr) minmax(0, 4fr);
      column-gap: 32px;
      align-items: start;
      /* Every card is the height left under the pinned tabs, so once all
         three are stacked the last one fills the rest of the screen. */
      height: calc(100vh - var(--stick) - (var(--n) - 1) * var(--tab));
      height: calc(100svh - var(--stick) - (var(--n) - 1) * var(--tab));
      min-height: 420px;
      padding: 18px 32px 32px;
      background: #fff;
      border-top: 1px solid rgba(0, 0, 0, 0.12);
      box-shadow: 0 -18px 40px -30px rgba(0, 0, 0, 0.35);
      color: var(--blue);
  }

  .day-num,
  .day-name {
      font-size: clamp(24px, 2.6vw, 36px);
      font-weight: 700;
      line-height: 1;
      letter-spacing: -0.03em;
  }

  .day-num {
      color: rgba(0, 0, 238, 0.4);
  }

  .day-date {
      margin-top: 10px;
      color: var(--blue);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
  }

  .day-date,
  .day-body,
  .day-photo {
      opacity: calc(1 - var(--op, 0));
  }

  .day-body .schedule-row {
      padding: 12px 0;
      font-size: 14px;
  }

  /* Programme text is all brand blue: times a softer blue, events full. */
  .day-stack-head .tile-label,
  .day-stack-head .tile-heading,
  .day-body .schedule-row strong {
      color: var(--blue);
  }

  .day-body .schedule-row {
      color: rgba(0, 0, 238, 0.65);
      border-bottom-color: rgba(0, 0, 238, 0.16);
  }

  .day-body .schedule-row:first-child {
      border-top: 1px solid rgba(0, 0, 238, 0.16);
  }

  .day-photo {
      height: 100%;
      max-height: 100%;
      min-height: 0;
      overflow: hidden;
      background: #e6e6e6;
  }

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

  .schedule-note {
      margin-top: 16px;
      padding: 0 4px;
      color: #8a8a8a;
      font-size: 12px;
      line-height: 1.55;
  }

  /* Tablets and phones: a card can be taller than the screen, so drop the
     sticky stacking and show the days one after another. */
  @media (max-width: 900px) {
      .day-card {
          position: relative;
          top: auto;
          margin-bottom: 0;
      }

      .day-card + .day-card {
          margin-top: 0;
      }

      .day-card-inner {
          grid-template-columns: auto minmax(0, 1fr);
          column-gap: 16px;
          row-gap: 18px;
          height: auto;
          min-height: 0;
          padding: 24px 20px;
      }

      .day-body,
      .day-photo {
          grid-column: 1 / -1;
      }

      .day-photo {
          height: auto;
          aspect-ratio: 16 / 9;
      }
  }

  @media (max-width: 720px) {
      .when-banner {
          min-height: 480px;
          padding: 48px 20px;
      }

      .when-shade {
          background:
              linear-gradient(180deg, rgb(8, 8, 8) 0, rgba(8, 8, 8, 0.75) 50px, rgba(8, 8, 8, 0.35) 110px, rgba(8, 8, 8, 0) 170px),
              linear-gradient(180deg, rgba(10, 10, 10, 0.35) 0%, rgba(10, 10, 10, 0.8) 100%);
      }

      .tile {
          padding: 22px 22px;
      }

      .tile-location {
          padding: 0;
          min-height: 480px;
      }

      .tile-location-body {
          padding: 0 22px;
      }

      .venue-map {
          right: 16px;
          bottom: 16px;
          width: 128px;
          height: 128px;
      }
  }

  .event-guide {
      position: relative;
      width: 100%;
  }

  .event-guide-stage {
      position: relative;
      width: 100%;
      height: 660px;
      padding-bottom: 44px;
      perspective: 2800px;
      perspective-origin: 50% 55%;
      touch-action: pan-y;
      cursor: grab;
      user-select: none;
      -webkit-user-select: none;
      overflow: visible;
      /* Angle between adjacent facets — softer than a true 45° octagon. */
      --eg-spacing: 32deg;
  }

  .event-guide-stage.is-dragging {
      cursor: grabbing;
  }

  .event-guide-track {
      position: absolute;
      inset: 0;
      transform-style: preserve-3d;
      transform: rotateY(var(--angle, 0deg));
      transition: transform 520ms cubic-bezier(.2, .72, .18, 1);
      will-change: transform;
  }

  .event-guide-stage.is-dragging .event-guide-track {
      transition: none;
  }

  .eg-face {
      position: absolute;
      top: 50%;
      left: 50%;
      width: min(340px, 78vw);
      height: 530px;
      margin-top: -230px;
      margin-left: calc(min(340px, 78vw) / -2);
      transform-origin: 50% 50%;
      transform: rotateY(calc(var(--pos) * var(--eg-spacing, 32deg))) translateZ(630px);
      transform-style: preserve-3d;
      cursor: pointer;
  }

  .eg-face-front,
  .eg-face-back {
      position: absolute;
      inset: 0;
      border: 1px solid rgba(0, 0, 0, 0.18);
      border-radius: 10px;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.28);
      overflow: hidden;
  }

  .eg-face-front {
      padding: 30px;
      background: rgba(255, 255, 255, 0.9);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      display: flex;
      flex-direction: column;
  }

  .eg-face-back {
      background: #ffffff;
      transform: rotateY(180deg);
      box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05),
          0 30px 60px -30px rgba(0, 0, 0, 0.28);
  }

  .eg-face-front .map-card {
      margin-top: 20px;
      min-height: 0;
      flex: 1;
      /* Own compositor layer so the iframe raster survives the 3D transform. */
      transform: translateZ(0);
      will-change: transform;
  }

  /* Render the iframe oversized then scale it down: the extra pixels stay crisp
     when the parent card is magnified by the perspective transform. */
  .eg-face-front .map-card iframe {
      width: 140%;
      height: 140%;
      transform: scale(0.7143);
      transform-origin: 0 0;
  }

  .eg-body {
      margin-top: 14px;
      color: #666666;
      font-size: 14px;
      line-height: 1.55;
  }

  .eg-dots {
      position: absolute;
      left: 50%;
      bottom: 6px;
      transform: translateX(-50%);
      display: flex;
      gap: 10px;
      z-index: 3;
  }

  .eg-dot {
      width: 8px;
      height: 8px;
      padding: 0;
      border: 1px solid rgba(0, 0, 0, 0.35);
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.6);
      cursor: pointer;
      transition: background 220ms ease, transform 220ms ease;
  }

  .eg-dot[aria-current="true"] {
      background: #111111;
      transform: scale(1.25);
  }

  .venue-panel h3 {
      margin-top: 12px;
      color: #111111;
      font-size: clamp(28px, 3.1vw, 48px);
      line-height: 1;
      letter-spacing: -0.045em;
  }

  .venue-address {
      margin-top: 12px;
      color: #666666;
      font-size: 14px;
      line-height: 1.5;
  }

  .detail-row,
  .schedule-row {
      display: flex;
      justify-content: space-between;
      gap: 18px;
      padding: 15px 0;
      border-bottom: 1px solid rgba(0, 0, 0, 0.13);
      color: #666666;
      font-size: 13px;
  }

  .detail-row strong,
  .schedule-row strong {
      color: #111111;
      font-weight: 600;
      text-align: right;
  }

  .map-card {
      position: relative;
      flex: 1;
      min-height: 360px;
      margin-top: 24px;
      overflow: hidden;
      border-radius: 5px;
      background: #e6e6e6;
  }

  .map-card iframe {
      display: block;
      width: 100%;
      height: 100%;
      border: 0;
      filter: saturate(0.72) contrast(0.9);
  }

  .map-caption {
      position: absolute;
      left: 12px;
      bottom: 12px;
      padding: 7px 9px;
      color: #111111;
      background: rgba(255, 255, 255, 0.9);
      border-radius: 3px;
      font-size: 11px;
      font-weight: 700;
  }


  .pillar-panel {
      justify-content: center;
      text-align: left;
      gap: 22px;
  }

  .pillar-panel .pillar-num {
      color: var(--scarlet);
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.24em;
  }

  .pillar-panel h3 {
      color: #111111;
      font-size: clamp(48px, 6vw, 92px);
      line-height: 0.9;
      letter-spacing: -0.055em;
      text-transform: uppercase;
      font-weight: 800;
  }

  .pillar-body {
      color: #666666;
      font-size: clamp(15px, 1.15vw, 18px);
      line-height: 1.5;
      max-width: 32ch;
  }

  .timetable-panel h3 {
      margin-bottom: 18px;
  }

  .schedule-day+.schedule-day {
      margin-top: 28px;
  }

  .schedule-day-head {
      display: flex;
      justify-content: space-between;
      padding: 14px 0;
      color: var(--blue);
      border-top: 1px solid rgba(0, 0, 0, 0.2);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
  }

  .meta {
      display: grid;
      grid-template-columns: repeat(3, auto);
      gap: 48px;
      padding: 24px 0;
      border-top: 1px solid rgba(0, 0, 0, 0.18);
      border-bottom: 1px solid rgba(0, 0, 0, 0.18);
  }

  .meta-item .label {
      font-size: 10px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: #707070;
      margin-bottom: 8px;
      font-weight: 500;
  }

  .meta-item .val {
      font-weight: 500;
      font-size: 15px;
      letter-spacing: -0.01em;
      color: #111111;
  }

  .registration-actions {
      display: grid;
      grid-template-columns: 1fr;
      gap: 12px;
      width: min(760px, 100%);
      align-self: center;
  }

  .register-cta,
  .sponsor-cta {
      min-width: 0;
      padding: 26px 30px;
      font-family: inherit;
      font-size: 14px;
      font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: #fff;
      background: var(--blue);
      border-radius: 24px;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      transition: transform .18s ease, background .18s ease, box-shadow .18s ease, border-color .18s ease;
  }

  .register-cta {
      background: var(--blue);
  }

  .sponsor-cta {
      color: #111111;
      background: rgba(255, 255, 255, 0.55);
      border: 1px solid rgba(0, 0, 0, 0.2);
  }

  .register-cta:hover {
      background: #103f96;
      box-shadow: 0 0 0 3px rgba(0, 0, 238, 0.14), 0 10px 22px -16px rgba(0, 0, 238, 0.85);
  }

  .sponsor-cta:hover {
      background: #fff;
      border-color: rgba(0, 0, 238, 0.35);
      box-shadow: 0 0 0 3px rgba(0, 0, 238, 0.08), 0 10px 22px -18px rgba(0, 0, 0, 0.55);
  }

  .register-cta .star {
      color: var(--scarlet);
      font-size: 14px;
  }

  .register-cta svg,
  .sponsor-cta svg {
      transition: transform .18s;
  }

  .register-cta:hover svg,
  .sponsor-cta:hover svg {
      transform: translateX(6px);
  }

  .register-cta:focus-visible,
  .sponsor-cta:focus-visible,
  .venue-map-close:focus-visible {
      outline: 3px solid var(--blue);
      outline-offset: 3px;
  }

  .venue-map-open:focus-visible {
      outline: 3px solid #fff;
      outline-offset: -3px;
  }

  /* ============ 4. Modal ============ */
  .modal {
      position: fixed;
      inset: 0;
      z-index: 100;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 24px;
  }

  .modal.open {
      display: flex;
  }

  .modal-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(6, 6, 12, 0.7);
      backdrop-filter: blur(16px) saturate(1.2);
      -webkit-backdrop-filter: blur(16px) saturate(1.2);
      animation: fadeIn .25s ease;
  }

  @keyframes fadeIn {
      from {
          opacity: 0
      }

      to {
          opacity: 1
      }
  }

  @keyframes slideUp {
      from {
          opacity: 0;
          transform: translateY(20px)
      }

      to {
          opacity: 1;
          transform: translateY(0)
      }
  }

  .card {
      position: relative;
      z-index: 2;
      width: 100%;
      max-width: 480px;
      padding: 36px 36px 32px;
      border-radius: 6px;
      background: rgba(8, 8, 8, 0.85);
      border: 1px solid var(--line-strong);
      box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.7);
      animation: slideUp .3s ease;
  }

  .modal-close {
      position: absolute;
      top: 14px;
      right: 14px;
      background: transparent;
      border: none;
      color: var(--ink);
      font-size: 22px;
      line-height: 1;
      cursor: pointer;
      width: 32px;
      height: 32px;
      display: grid;
      place-content: center;
      border-radius: 50%;
      transition: background .12s;
  }

  .modal-close:hover {
      background: var(--field-bg);
  }

  .card-head {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      margin-bottom: 26px;
      padding-bottom: 16px;
      border-bottom: 1px solid var(--line);
  }

  .card-head h2 {
      font-weight: 700;
      font-size: 20px;
      letter-spacing: 0.02em;
      text-transform: uppercase;
  }

  .card-head .kicker {
      font-size: 10px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--silver);
      font-weight: 600;
  }

  form {
      display: flex;
      flex-direction: column;
      gap: 12px;
  }

  .row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
  }

  .field {
      position: relative;
  }

  .field label {
      position: absolute;
      top: 14px;
      left: 14px;
      font-size: 11px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--ink-faint);
      pointer-events: none;
      transition: all .18s ease;
  }

  .field input {
      width: 100%;
      padding: 22px 14px 10px;
      font-family: inherit;
      font-size: 15px;
      color: var(--ink);
      background: var(--field-bg);
      border: 1px solid var(--line);
      border-radius: 4px;
      outline: none;
      transition: border-color .18s, background .18s;
      letter-spacing: -0.005em;
  }

  .field input:focus {
      border-color: var(--silver);
      background: var(--field-bg-focus);
  }

  .field input:focus+label,
  .field input:not(:placeholder-shown)+label {
      top: 7px;
      font-size: 9px;
      color: var(--silver);
  }

  button.submit {
      margin-top: 10px;
      width: 100%;
      padding: 18px 22px;
      font-family: inherit;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--silver);
      background: var(--blue);
      border: none;
      border-radius: 4px;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      transition: background .15s, color .15s;
  }

  button.submit:hover {
      background: #000;
      color: var(--ink);
  }

  button.submit svg {
      transition: transform .18s;
  }

  button.submit:hover svg {
      transform: translateX(5px);
  }

  button.submit.success {
      background: var(--scarlet);
      color: var(--ink);
  }

  button:focus-visible,
  input:focus-visible {
      outline: 2px solid var(--silver);
      outline-offset: 3px;
  }

  button:disabled {
      cursor: wait;
  }

  @media (prefers-reduced-motion: reduce) {

      *,
      *::before,
      *::after {
          animation-duration: 0.01ms !important;
          animation-iteration-count: 1 !important;
          scroll-behavior: auto !important;
          transition-duration: 0.01ms !important;
      }
  }

  @media (max-width: 720px) {
      .strip {
          grid-template-columns: 1fr auto;
          gap: 16px;
          padding: 18px 20px;
          font-size: 10px;
      }

      .strip .cell,
      .strip .ya-circle {
          display: none;
      }

      /* Hero */
      .hero-video {
          min-height: 100svh;
          height: 100svh;
      }

      .mega {
          font-size: 28vw;
          letter-spacing: -0.03em;
      }

      /* Mobile hero: spread the left column down the screen and cluster the
         icons top-right — matches the design mockup. */
      .hero-top-nav {
          inset: 0;
          display: grid;
          grid-template-columns: 1fr auto;
          grid-auto-rows: min-content;
          grid-template-areas:
              "copy     icons"
              "dates    ."
              "register .";
          row-gap: 22vh;
          column-gap: 14px;
          padding: 22px 22px 30vh;
          align-content: start;
      }

      .hero-top-copy    { grid-area: copy; }
      .hero-top-dates   { grid-area: dates; }
      .hero-top-register { grid-area: register; align-self: start; }
      .hero-top-icons   { grid-area: icons; align-self: start; gap: 12px; }

      .hero-top-copy,
      .hero-top-dates {
          font-size: 13px;
          line-height: 1.3;
      }

      .hero-top-register {
          font-size: 13px;
      }

      .hero-top-social {
          width: 28px;
          height: 28px;
      }

      .hero-top-social svg {
          width: 22px;
          height: 22px;
      }

      .hero-ya-circle {
          width: 30px;
          height: 30px;
      }

      .mission-top-nav {
          gap: 12px;
          padding: 18px 20px;
      }

      .mission-top-headline {
          font-size: 11px;
      }

      .mission-top-sub {
          font-size: 9px;
          letter-spacing: 0.16em;
      }

      .mission-ya-circle {
          width: 30px;
          height: 30px;
      }

      /* Scroll story */
      .scroll-story {
          height: calc(220vh + var(--story-hold));
      }

      /* Mirror the desktop composition (positions + relative sizing) so the
         mobile parallax reads the same, just scaled to a narrower viewport. */
      .dispo.d1 {
          top: 45%;
          left: 4%;
          z-index: 0;
          width: 38vw;
      }

      .dispo.d2 {
          top: 76%;
          left: 13%;
          width: 32vw;
          z-index: 3;
      }

      .dispo.d3 {
          top: -5%;
          right: 6%;
          width: 40vw;
      }

      .dispo.d4 {
          top: 25%;
          left: 26%;
          width: 30vw;
      }

      .dispo.d5 {
          top: 68%;
          right: 4%;
          width: 30vw;
      }

      .dispo.d6 {
          top: 35%;
          right: 3%;
          width: 28vw;
      }

      .story-word {
          font-size: clamp(62px, 22vw, 120px);
          letter-spacing: -0.06em;
      }

      .story-word.gather {
          top: 11%;
          right: -1%;
      }

      .story-word.equip {
          top: 40%;
          left: -4%;
          z-index: 1;
      }

      .story-word.send {
          bottom: 28%;
          right: -2%;
      }

      /* Full-viewport growing image copy */
      .sess66-copy {
          padding: 40px 22px 10vh;
      }

      .sess66-copy h2 {
          font-size: clamp(40px, 12.5vw, 68px);
          line-height: 0.94;
          letter-spacing: -0.04em;
      }

      .sess66-copy p {
          margin-top: 16px;
          font-size: 15px;
          line-height: 1.5;
          max-width: 92vw;
      }

      /* Mission section */
      .mission-inner {
          padding: 0 20px 72px;
          gap: 48px;
      }

      .why-copy,
      .mission-banner .why-copy {
          font-size: clamp(18px, 4.8vw, 24px);
          line-height: 1.32;
          letter-spacing: -0.02em;
      }

      .mission-banner .why-come {
          padding: 0 20px;
      }

      .why-grid {
          grid-template-columns: 1fr;
      }

      .event-guide-stage {
          height: auto;
          padding-bottom: 0;
          perspective: none;
          overflow: visible;
          touch-action: auto;
          cursor: auto;
      }

      .event-guide-track {
          position: static;
          transform: none !important;
          transform-style: flat;
          display: grid;
          grid-template-columns: 1fr;
          gap: 16px;
      }

      .eg-face {
          position: static;
          width: 100%;
          height: auto;
          margin: 0;
          transform: none !important;
          transform-style: flat;
          cursor: auto;
      }

      .eg-face-front,
      .eg-face-back {
          position: static;
          backface-visibility: visible;
      }

      .eg-face-back {
          display: none;
      }

      .eg-face-front .map-card {
          min-height: 240px;
          flex: none;
          height: 240px;
      }

      .eg-dots {
          display: none;
      }

      .why-card,
      .venue-panel,
      .timetable-panel {
          padding: 22px;
      }

      .why-card {
          min-height: 185px;
      }

      .why-card h4 {
          margin-top: 34px;
      }

      .venue-panel h3,
      .timetable-panel h3 {
          font-size: clamp(26px, 8vw, 36px);
          letter-spacing: -0.035em;
      }

      .venue-address {
          font-size: 14px;
      }

      .map-card {
          height: auto;
          min-height: 240px;
          margin-top: 20px;
      }

      .schedule-day+.schedule-day {
          margin-top: 22px;
      }

      .schedule-day-head {
          padding: 12px 0;
          font-size: 11px;
      }

      .schedule-row {
          padding: 12px 0;
          gap: 12px;
          font-size: 13px;
      }

      .schedule-row span {
          flex-shrink: 0;
      }

      .schedule-row strong {
          text-align: right;
      }

      .timetable-note {
          margin-top: 14px;
          font-size: 12px;
      }

      .meta {
          grid-template-columns: 1fr;
          gap: 20px;
          text-align: center;
      }

      /* Register CTA */
      .registration-actions {
          grid-template-columns: 1fr;
      }

      .register-cta {
          padding: 22px 24px;
          font-size: 12px;
          letter-spacing: 0.14em;
      }

      .sponsor-cta {
          padding: 22px 24px;
          font-size: 12px;
          letter-spacing: 0.14em;
      }

      /* Modal + form */
      .modal {
          padding: 16px;
          align-items: flex-start;
      }

      .modal.open {
          padding-top: 6vh;
      }

      .card {
          padding: 28px 20px 24px;
          max-height: 88vh;
          overflow-y: auto;
          -webkit-overflow-scrolling: touch;
      }

      .card-head {
          margin-bottom: 22px;
          padding-bottom: 14px;
      }

      .card-head h2 {
          font-size: 17px;
      }

      .row {
          grid-template-columns: 1fr;
      }

      /* 16px minimum prevents iOS Safari zoom-on-focus */
      .field input {
          font-size: 16px;
          padding: 24px 14px 10px;
      }

      button.submit {
          padding: 16px 20px;
          font-size: 12px;
      }
  }

  @media (max-width: 480px) {
      /* Mission strip still has to collapse the long headline at iPhone widths. */
      .mission-top-headline {
          display: none;
      }

      .mission-top-sub {
          font-size: 10px;
      }
  }

  @media (max-width: 380px) {
      .hero-top-copy,
      .hero-top-dates,
      .hero-top-register {
          font-size: 12px;
      }

      .mission-inner {
          padding: 0 16px 64px;
          gap: 40px;
      }

      .why-card,
      .venue-panel,
      .timetable-panel {
          padding: 18px;
      }

      .sess66-copy h2 {
          font-size: clamp(34px, 12vw, 54px);
      }
  }

  /* ============ Floating register CTA ============ */
  .register-float {
      position: fixed;
      top: 0px;
      right: 0px;
      bottom: auto;
      z-index: 60;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 22px 50px;
      background: var(--blue);
      color: #fff;
      font: 700 12px/1 'Inter', sans-serif;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      border-radius: 0 0 0 6px;
      /* box-shadow: 0 12px 30px -16px rgba(0, 0, 238, 0.75);  */
      opacity: 0;
      transform: translateY(-12px);
      pointer-events: none;
      transition: opacity .28s ease, transform .28s ease, filter .18s ease, background .18s ease;
  }

  .register-float.is-visible {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
  }

  .register-float:hover {
      background: #103f96;
      filter: none;
  }

  .register-float:focus-visible {
      outline: 2px solid #fff;
      outline-offset: 3px;
  }

  .register-float svg {
      flex-shrink: 0;
  }

  @media (max-width: 720px) {
      .register-float {
          top: 0px;
          right: 0px;
          padding: 10px 16px;
          font-size: 11px;
          gap: 8px;
      }
  }

  /* ============ Rolling image marquee ============ */
  .saints-marquee {
      position: relative;
      overflow: hidden;
      background: #06060c;
      /* padding: 40px 0; */
      isolation: isolate;
  }

  .saints-marquee::before,
  .saints-marquee::after {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      width: 96px;
      z-index: 2;
      pointer-events: none;
  }

  .saints-marquee::before {
      left: 0;
      background: linear-gradient(90deg, #06060c, rgba(6, 6, 12, 0));
  }

  .saints-marquee::after {
      right: 0;
      background: linear-gradient(270deg, #06060c, rgba(6, 6, 12, 0));
  }

  .saints-marquee-track {
      display: flex;
      /* gap: 22px; */
      width: max-content;
      will-change: transform;
      animation: saints-marquee-scroll 110s linear infinite;
  }

  .saints-marquee:hover .saints-marquee-track {
      animation-play-state: paused;
  }

  .saints-marquee-item {
      flex: 0 0 auto;
      width: clamp(170px, 18vw, 240px);
      aspect-ratio: 3 / 2;
      overflow: hidden;
      /* border-radius: 6px; */
      background: #0d0d16;
  }

  .saints-marquee-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      user-select: none;
      -webkit-user-drag: none;
      transform: scale(1.111);
      transform-origin: top center;
  }

  @keyframes saints-marquee-scroll {
      from { transform: translate3d(-50%, 0, 0); }
      to { transform: translate3d(0, 0, 0); }
  }

  @media (max-width: 720px) {
      .saints-marquee {
          /* padding: 16px 0; */
      }
      .saints-marquee-track {
          /* gap: 14px; */
          animation-duration: 80s;
      }
      .saints-marquee-item {
          width: clamp(120px, 38vw, 180px);
      }
      .saints-marquee::before,
      .saints-marquee::after {
          width: 56px;
      }
  }

  @media (prefers-reduced-motion: reduce) {
      .saints-marquee-track {
          animation: none;
          transform: translate3d(-25%, 0, 0);
      }
  }

  /* ============ FAQ ============ */
  .faq-section {
      position: relative;
      color: #111111;
      padding: 120px 32px 140px;
      isolation: isolate;
      overflow: hidden;
      background:
          radial-gradient(ellipse 80% 62% at 8% 8%, rgba(255, 255, 255, 0.95), transparent 66%),
          radial-gradient(ellipse 72% 58% at 92% 96%, rgba(230, 230, 230, 0.75), transparent 70%),
          linear-gradient(150deg, #fcfcfc 0%, #f2f2f2 52%, #ececec 100%);
  }

  .faq-mark {
      position: absolute;
      bottom: -1vw;
      right: -1vw;
      z-index: 0;
      font-family: 'Neue Haas Grotesk Display Pro', 'Inter', 'Helvetica Neue', sans-serif;
      font-weight: 700;
      font-size: 8vw;
      line-height: 0.8;
      letter-spacing: -0.03em;
      text-transform: uppercase;
      color: var(--blue);
      opacity: 0.35;
      white-space: nowrap;
      pointer-events: none;
      user-select: none;
  }

  .faq-grain {
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      opacity: 0.1;
      mix-blend-mode: multiply;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='3.2' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1.6 -0.2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  }

  .faq-inner {
      position: relative;
      z-index: 2;
      width: min(880px, 100%);
      margin: 0 auto;
  }

  .faq-title {
      font-size: clamp(56px, 9vw, 128px);
      font-weight: 800;
      letter-spacing: -0.05em;
      line-height: 0.9;
      text-transform: uppercase;
      color: #111111;
      margin-bottom: 40px;
  }

  .faq-list {
      display: flex;
      flex-direction: column;
      gap: 12px;
      border-top: 0;
  }

  .faq-item {
      background: rgba(255, 255, 255, 0.75);
      border: 1px solid rgba(0, 0, 0, 0.08);
      border-radius: 24px;
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      overflow: hidden;
      transition: background .24s ease, border-color .24s ease;
  }

  .faq-item:hover {
      background: rgba(255, 255, 255, 0.94);
      border-color: rgba(83, 83, 83, 0.35);
  }

  .faq-item summary {
      list-style: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      padding: 22px 28px;
      font-size: clamp(16px, 1.6vw, 20px);
      font-weight: 600;
      letter-spacing: -0.02em;
      color: #111111;
      transition: color .18s ease;
  }

  .faq-item summary::-webkit-details-marker {
      display: none;
  }

  .faq-item summary::marker {
      content: "";
  }

  .faq-item summary:hover {
      color: var(--blue);
  }

  .faq-item .faq-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 30px;
      height: 30px;
      border: 1px solid rgba(0, 0, 0, 0.28);
      border-radius: 999px;
      color: #111111;
      font-size: 18px;
      font-weight: 400;
      line-height: 1;
      background: transparent;
      transition: transform .25s ease, background .18s ease, border-color .18s ease, color .18s ease;
      flex-shrink: 0;
  }

  .faq-item[open] .faq-icon {
      transform: rotate(45deg);
      background: var(--blue);
      border-color: var(--blue);
      color: #fff;
  }

  .faq-answer {
      padding: 0 28px 24px;
      color: #666666;
      font-size: clamp(14px, 1.2vw, 16px);
      line-height: 1.65;
      max-width: 720px;
  }

  .faq-answer p+p {
      margin-top: 12px;
  }

  .faq-answer ul {
      list-style: disc;
      padding-left: 22px;
      margin: 6px 0 12px;
  }

  .faq-answer li+li {
      margin-top: 6px;
  }

  .faq-answer a {
      color: var(--blue);
      font-weight: 600;
      border-bottom: 1px solid rgba(0, 0, 238, 0.35);
      padding-bottom: 1px;
      transition: color .18s ease, border-color .18s ease;
  }

  .faq-answer a:hover {
      color: #103f96;
      border-color: rgba(0, 0, 238, 0.7);
  }

  .faq-answer strong {
      color: #111111;
      font-weight: 600;
  }

  @media (max-width: 720px) {
      .faq-section {
          padding: 80px 20px 100px;
      }

      .faq-title {
          margin-bottom: 36px;
      }

      .faq-item summary {
          padding: 20px 22px;
          gap: 16px;
          font-size: 15px;
      }

      .faq-answer {
          padding: 0 22px 20px;
      }

      .faq-item .faq-icon {
          width: 26px;
          height: 26px;
          font-size: 16px;
      }
  }