<!-- ============================================================
SCROLLYCORE
Paste this ONCE near the top of any Squarespace page that uses ScrollyBlocks.

This is infrastructure only:
- shared styles
- progress bar
- shared JavaScript behaviors

Individual ScrollyBlocks go in separate code blocks below this one.
============================================================ -->

<style>
/* ============================================================
   LAUREN-PROOF AREA #1: STYLE SETTINGS
   Safe edits: colors, max width, and fonts.
============================================================ */
    :root {
      --bg: #f7f4ee;
      --text: #222222;
      --muted: #666666;
      --card: #ffffff;
      --accent: #425c45;
      --accent-light: #dce5dc;
      --max-width: 1180px;
      --serif: Georgia, 'Times New Roman', serif;
      --sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      background: var(--bg);
      color: var(--text);
      font-family: var(--sans);
      line-height: 1.6;
    }

    img {
      max-width: 100%;
      display: block;
    }


    h1, h2, h3 {
      font-family: var(--serif);
      line-height: 1.08;
      margin: 0 0 1rem;
    }

    h1 {
      font-size: clamp(3rem, 9vw, 6.5rem);
    }

    h2 {
      font-size: clamp(2rem, 5vw, 4rem);
    }

    h3 {
      font-size: clamp(1.5rem, 3vw, 2.35rem);
    }

    p {
      margin: 0 0 1rem;
      font-size: clamp(1rem, 1.5vw, 1.18rem);
    }

    .lede {
      font-size: clamp(1.2rem, 2vw, 1.5rem);
      color: #333;
    }

    .scroll-progress {
      position: fixed;
      top: 0;
      left: 0;
      width: 0%;
      height: 5px;
      background: var(--accent);
      z-index: 1000;
    }


    .section {
      padding: 5rem 1.25rem;
    }

    .section.screen {
      min-height: 100vh;
      display: grid;
      align-items: center;
    }

    .section.tall {
      min-height: 140vh;
      display: grid;
      align-items: center;
    }

    .section-inner {
      width: min(100%, var(--max-width));
      margin: 0 auto;
    }

    .centered {
      max-width: 780px;
      margin: 0 auto;
      text-align: center;
    }

    .centered p {
      font-size: clamp(1.15rem, 2vw, 1.45rem);
    }

    .split {
      display: grid;
      gap: clamp(1.5rem, 4vw, 4rem);
      align-items: center;
    }

    .split.ratio-50-50 {
      grid-template-columns: 1fr 1fr;
    }

    .split.ratio-30-70 {
      grid-template-columns: 3fr 7fr;
    }

    .split.ratio-70-30 {
      grid-template-columns: 7fr 3fr;
    }

    .full-media {
      width: min(100%, 1400px);
      margin: 0 auto;
    }

    .full-media img,
    .media-card img {
      width: 100%;
      border-radius: 1.25rem;
      box-shadow: 0 20px 50px rgba(0,0,0,0.14);
      object-fit: cover;
    }

    .media-card img.cover {
      aspect-ratio: 4 / 3;
    }

    .caption {
      margin-top: 0.75rem;
      color: var(--muted);
      font-size: 0.92rem;
    }

    .text-card {
      background: rgba(255,255,255,0.72);
      padding: clamp(1.25rem, 3vw, 2.25rem);
      border-radius: 1.25rem;
      box-shadow: 0 12px 35px rgba(0,0,0,0.08);
    }

/* ============================================================
   LAUREN-PROOF AREA #2D: LIGHTWEIGHT HOVER POLISH
   These effects make cards, images, buttons, and diagrams feel
   more responsive without changing the story content.
============================================================ */
    .text-card,
    .media-card,
    .full-media,
    .switcher-media figure,
    .scroll-swap-media,
    .background-story-card,
    .rabbit-hole-card,
    .swap-step,
    .diagram-step,
    .step,
    .expandable-note {
      transition: transform 220ms ease, box-shadow 220ms ease, filter 220ms ease;
    }

    .text-card:hover,
    .background-story-card:hover,
    .rabbit-hole-card:hover,
    .swap-step:hover,
    .diagram-step:hover,
    .step:hover,
    .expandable-note:hover {
      transform: translateY(-4px);
      box-shadow: 0 18px 45px rgba(0,0,0,0.14);
    }

    .media-card,
    .full-media,
    .switcher-media figure,
    .scroll-swap-media,
    .sticky-visual {
      overflow: hidden;
      border-radius: 1.25rem;
    }

    .media-card img,
    .full-media img,
    .switcher-media img,
    .scroll-swap-media img,
    .sticky-visual img {
      transition: transform 450ms ease, filter 450ms ease;
    }

    .media-card:hover img,
    .full-media:hover img,
    .switcher-media figure:hover img,
    .scroll-swap-media:hover img,
    .sticky-visual:hover img {
      transform: scale(1.025);
      filter: brightness(1.04);
    }

    .switcher-button:hover,
    .rabbit-hole-button:hover,
    .rabbit-hole-close:hover,
    .rabbit-hole-link:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 24px rgba(0,0,0,0.13);
    }

 
    .switcher {
      display: grid;
      grid-template-columns: 1fr 1.15fr;
      gap: clamp(1.5rem, 4vw, 4rem);
      align-items: center;
    }

    .switcher-buttons {
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem;
      margin: 1.5rem 0 2.5rem;
    }

    .switcher-button {
      border: 2px solid var(--accent);
      background: transparent;
      color: var(--accent);
      border-radius: 999px;
      padding: 0.7rem 1rem;
      font: inherit;
      font-weight: 700;
      cursor: pointer;
      transition: background 180ms ease, color 180ms ease, transform 180ms ease;
    }

    .switcher-button:hover,
    .switcher-button:focus-visible {
      background: var(--accent-light);
      outline: 3px solid rgba(66, 92, 69, 0.25);
      outline-offset: 3px;
    }

    .switcher-button.active {
      background: var(--accent);
      color: #ffffff;
    }

    .switcher-media img {
      width: 100%;
      aspect-ratio: 4 / 3;
      object-fit: cover;
      border-radius: 1.25rem;
      box-shadow: 0 20px 50px rgba(0,0,0,0.14);
    }

    .switcher-panel {
      display: none;
    }

    .switcher-panel.active {
      display: block;
    }

/* ============================================================
   LAUREN-PROOF AREA #2: SCROLLSWAP ALIGNMENT KNOBS
   Safe edits: image/text alignment, spacing, and column balance.
============================================================ */
    .scroll-swap {
      /* Alignment knobs for the scrollSwap section:
         - image-top controls where the sticky image sits in the browser window.
         - steps-top nudges the whole stack of step cards down.
         - step-gap controls the vertical distance between step cards.
         - image-width and text-width control column balance.
      */
      --scroll-swap-image-top: 4rem;
      --scroll-swap-steps-top: 0rem;
      --scroll-swap-step-gap: 35vh;
      --scroll-swap-image-width: 1fr;
      --scroll-swap-text-width: 1fr;

      display: grid;
      grid-template-columns: var(--scroll-swap-image-width) var(--scroll-swap-text-width);
      gap: clamp(2rem, 5vw, 5rem);
      align-items: start;
      padding-top: 0;
    }

    .scroll-swap-intro {
      max-width: 820px;
      margin: 0 auto 4rem;
    }

    .scroll-swap-media {
      position: sticky;
      top: var(--scroll-swap-image-top);
      margin: 0;
    }

    .scroll-swap-media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 1.25rem;
  box-shadow: 0 20px 50px rgba(0,0,0,0.14);
 transition: opacity 900ms ease, transform 1200ms ease, filter 1200ms ease;
  transform: scale(1);
}

.scroll-swap-media img.is-changing {
  opacity: 0;
  transform: scale(1.018);
  filter: blur(1px);
}

    .scroll-swap-steps {
      display: grid;
      gap: var(--scroll-swap-step-gap);
      padding: var(--scroll-swap-steps-top) 0 20vh;
      margin: 0;
    }

    .swap-step {
      background: rgba(255,255,255,0.78);
      padding: clamp(1.25rem, 3vw, 2rem);
      border-radius: 1.25rem;
      box-shadow: 0 12px 35px rgba(0,0,0,0.08);
      opacity: 0.45;
      transform: translateY(16px);
      transition: opacity 350ms ease, transform 350ms ease;
      margin: 0;
    }

    .swap-step.active {
      opacity: 1;
      transform: translateY(0);
    }

    .parallax-section {
      min-height: 90vh;
      display: grid;
      place-items: center;
      padding: 5rem 1.25rem;
      color: #ffffff;
      text-align: center;
      position: relative;
      overflow: hidden;
      isolation: isolate;
    }

    .parallax-bg {
      position: absolute;
      inset: -28% 0;
      background-image: linear-gradient(rgba(20, 24, 20, 0.42), rgba(20, 24, 20, 0.42)), var(--parallax-image);
      background-size: cover;
      min-height: 130%;
      background-position: center;
      z-index: -1;
      transform: translateY(0);
      will-change: transform;
    }

    .parallax-card {
      max-width: 780px;
      background: rgba(0, 0, 0, 0.35);
      padding: clamp(1.5rem, 4vw, 3rem);
      border-radius: 1.25rem;
      backdrop-filter: blur(4px);
    }
/* ============================================================
   LAUREN-PROOF AREA #2A: VIDEO HERO / VIDEO STORY SETTINGS
   Use videoHero when you want a video behind text.

   Safe beginner edits happen in storyData:
   - video = video file URL
   - poster = fallback image while video loads
   - overlay = darkness layer for readability
   - title/body/label = text shown over the video

   Important: background videos should usually be muted, slow,
   atmospheric, and not essential for understanding the story.
============================================================ */
    .video-hero {
      min-height: 100vh;
      position: relative;
      display: grid;
      place-items: center;
      padding: 5rem 1.25rem;
      overflow: hidden;
      color: #ffffff;
      text-align: center;
      isolation: isolate;
    }

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

    .video-hero::before {
      content: "";
      position: absolute;
      inset: 0;
      background: var(--video-overlay, rgba(0, 0, 0, 0.42));
      z-index: -1;
    }

    .video-hero-card {
      max-width: 820px;
      background: rgba(0, 0, 0, 0.28);
      padding: clamp(1.5rem, 4vw, 3rem);
      border-radius: 1.25rem;
      backdrop-filter: blur(4px);
      box-shadow: 0 20px 50px rgba(0,0,0,0.22);
    }

    .video-hero-card .section-label {
      color: #ffffff;
    }

/* ============================================================
   LAUREN-PROOF AREA #2B: BACKGROUNDSTORY SETTINGS
   Use backgroundStory when you want a full-screen background image
   while several text cards scroll over it.

   Safe beginner edits:
   - overlay controls image darkness
   - card-width controls text card width
   - card-position controls left / center / right placement
   - card-gap controls vertical distance between cards
============================================================ */
    .background-story {
      --background-story-overlay: rgba(0, 0, 0, 0.38);
      --background-story-card-width: 560px;
      --background-story-card-position: flex-start;
      --background-story-card-gap: 65vh;

      position: relative;
      min-height: 220vh;
      color: #ffffff;
      isolation: isolate;
    }

    .background-story-bg {
      position: sticky;
      top: 0;
      height: 100vh;
      width: 100%;
      background-image: linear-gradient(var(--background-story-overlay), var(--background-story-overlay)), var(--background-story-image);
      background-size: cover;
      background-position: center;
      z-index: -1;
    }

    .background-story-content {
      width: min(100%, var(--max-width));
      margin: -100vh auto 0;
      padding: 25vh 1.25rem 35vh;
      display: flex;
      flex-direction: column;
      align-items: var(--background-story-card-position);
      gap: var(--background-story-card-gap);
    }

    .background-story-card {
      width: min(100%, var(--background-story-card-width));
      background: rgba(255, 255, 255, 0.82);
      color: var(--text);
      padding: clamp(1.25rem, 3vw, 2.25rem);
      border-radius: 1.25rem;
      box-shadow: 0 20px 50px rgba(0,0,0,0.22);
      backdrop-filter: blur(4px);
    }

    .background-story-card .section-label {
      color: var(--accent);
    }

/* ============================================================
   LAUREN-PROOF AREA #2C: RABBIT HOLES + EXPANDABLE NOTES
   expandableNote = opens extra explanation inside the normal flow.
   rabbitHole = opens a modal overlay on top of the page.

   Safe beginner edits happen in storyData:
   - button text
   - title
   - summary/body text
   - optional link URL
============================================================ */
    .expandable-note {
      max-width: 820px;
      margin: 0 auto;
      border: 1px solid rgba(66, 92, 69, 0.24);
      border-radius: 1.25rem;
      background: rgba(255,255,255,0.78);
      box-shadow: 0 12px 35px rgba(0,0,0,0.08);
      overflow: hidden;
    }

    .expandable-note summary {
      cursor: pointer;
      padding: clamp(1.1rem, 3vw, 1.75rem);
      font-weight: 800;
      color: var(--accent);
      list-style: none;
    }

    .expandable-note summary::-webkit-details-marker {
      display: none;
    }

    .expandable-note summary::before {
      content: "＋";
      display: inline-block;
      margin-right: 0.65rem;
      font-weight: 900;
    }

    .expandable-note[open] summary::before {
      content: "−";
    }

    .expandable-note-content {
      padding: 0 clamp(1.1rem, 3vw, 1.75rem) clamp(1.1rem, 3vw, 1.75rem);
    }

    .rabbit-hole-card {
      max-width: 820px;
      margin: 0 auto;
      background: rgba(255,255,255,0.78);
      padding: clamp(1.25rem, 3vw, 2.25rem);
      border-radius: 1.25rem;
      box-shadow: 0 12px 35px rgba(0,0,0,0.08);
    }

    .rabbit-hole-button,
    .rabbit-hole-close,
    .rabbit-hole-link {
      border: 2px solid var(--accent);
      background: var(--accent);
      color: #ffffff;
      border-radius: 999px;
      padding: 0.75rem 1.1rem;
      font: inherit;
      font-weight: 800;
      cursor: pointer;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.4rem;
      margin-top: 1rem;
    }

    .rabbit-hole-close {
      margin-top: 0;
      background: #ffffff;
      color: var(--accent);
    }

    .rabbit-hole-overlay {
      position: fixed;
      inset: 0;
      z-index: 2000;
      background: rgba(20, 20, 20, 0.62);
      display: none;
      align-items: center;
      justify-content: center;
      padding: 2rem;
    }

    .rabbit-hole-overlay.open {
      display: flex;
    }

    .rabbit-hole-modal {
      width: min(100%, 980px);
      max-height: min(88vh, 820px);
      overflow: auto;
      background: var(--bg);
      color: var(--text);
      border-radius: 1.25rem;
      box-shadow: 0 30px 90px rgba(0,0,0,0.35);
      padding: clamp(1.25rem, 3vw, 2rem);
    }

    .rabbit-hole-modal-header {
      display: flex;
      justify-content: space-between;
      gap: 1rem;
      align-items: start;
      margin-bottom: 1rem;
    }

    .rabbit-hole-modal-body {
      display: grid;
      gap: 1rem;
    }

    body.rabbit-hole-open {
      overflow: hidden;
    }

    .diagram-layout {
      display: grid;
      grid-template-columns: 1.15fr 1fr;
      gap: clamp(2rem, 5vw, 5rem);
      align-items: start;
    }

    .diagram-visual {
      position: sticky;
      top: 4rem;
      background: rgba(255,255,255,0.72);
      border-radius: 1.25rem;
      padding: 1rem;
      box-shadow: 0 20px 50px rgba(0,0,0,0.10);
    }

    .diagram-visual svg {
      width: 100%;
      height: auto;
      display: block;
    }

    .diagram-node,
    .diagram-link {
      opacity: 0.25;
      transition: opacity 350ms ease, stroke-width 350ms ease, transform 350ms ease, filter 220ms ease;
      transform-origin: center;
      cursor: pointer;
    }

    .diagram-node.active,
    .diagram-link.active {
      opacity: 1;
      stroke-width: 5;
    }

    .diagram-node:hover,
    .diagram-link:hover,
    .diagram-node.hover-match,
    .diagram-link.hover-match {
      opacity: 1;
      stroke-width: 5;
      filter: brightness(1.08);
    }

    .diagram-text {
      display: grid;
      gap: 35vh;
      padding: 20vh 0;
    }

    .diagram-step {
      background: rgba(255,255,255,0.78);
      padding: clamp(1.25rem, 3vw, 2rem);
      border-radius: 1.25rem;
      box-shadow: 0 12px 35px rgba(0,0,0,0.08);
      opacity: 0.45;
      transform: translateY(16px);
      transition: opacity 350ms ease, transform 350ms ease;
    }

    .diagram-step.active {
      opacity: 1;
      transform: translateY(0);
    }

    .sticky-section {
      padding: 6rem 1.25rem;
    }

    .sticky-grid {
      width: min(100%, var(--max-width));
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(2rem, 5vw, 5rem);
      align-items: start;
    }

    .sticky-visual {
      position: sticky;
      top: 4rem;
    }

    .sticky-visual img {
      width: 100%;
      border-radius: 1.25rem;
      box-shadow: 0 20px 50px rgba(0,0,0,0.14);
    }

    .steps {
      display: grid;
      gap: 35vh;
      padding: 20vh 0;
    }

    .step {
      background: rgba(255,255,255,0.78);
      padding: clamp(1.25rem, 3vw, 2rem);
      border-radius: 1.25rem;
      box-shadow: 0 12px 35px rgba(0,0,0,0.08);
      opacity: 0.45;
      transform: translateY(16px);
      transition: opacity 350ms ease, transform 350ms ease;
    }

    .step.active {
      opacity: 1;
      transform: translateY(0);
    }

    .fade-in {
      opacity: 0;
      transform: translateY(22px);
      transition: opacity 700ms ease, transform 700ms ease;
    }

    .fade-in.visible {
      opacity: 1;
      transform: translateY(0);
    }

    .section-label {
      color: var(--accent);
      font-size: 0.82rem;
      font-weight: 800;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      margin-bottom: 0.85rem;
    }


    /* ============================================================
   LAUREN-PROOF AREA #3: PHONE / SMALL SCREEN SETTINGS
============================================================ */

     @media (max-width: 780px) {

      .section {
        padding: 3rem 1rem;
      }

      .section.screen,
      .section.tall {
        min-height: auto;
      }

      h1 {
        font-size: clamp(2.5rem, 14vw, 4.25rem);
      }

      h2 {
        font-size: clamp(1.9rem, 10vw, 3rem);
      }

      h3 {
        font-size: clamp(1.35rem, 7vw, 2rem);
      }

      p,
      .lede {
        font-size: 1rem;
      }

      .text-card,
      .parallax-card,
      .background-story-card,
      .rabbit-hole-card,
      .swap-step,
      .diagram-step,
      .step {
        padding: 1.15rem;
        border-radius: 1rem;
      }
      .rabbit-hole-overlay {
        padding: 0.75rem;
      }

      .rabbit-hole-modal {
        max-height: 92vh;
        border-radius: 1rem;
      }

      .rabbit-hole-modal-header {
        flex-direction: column;
      }

      .rabbit-hole-button,
      .rabbit-hole-close,
      .rabbit-hole-link {
        width: 100%;
      }

      .split,
      .split.ratio-50-50,
      .split.ratio-30-70,
      .split.ratio-70-30,
      .sticky-grid,
      .scroll-swap,
      .diagram-layout {
        grid-template-columns: 1fr;
      }

 
      .switcher {
        grid-template-columns: 1fr;
        gap: 1.5rem;
      }

      .switcher-buttons {
        gap: 0.5rem;
        margin: 1.25rem 0 1.5rem;
      }

      .switcher-button {
        width: 100%;
        text-align: center;
      }

      .scroll-swap-media,
      .sticky-visual,
      .diagram-visual {
        position: relative;
        top: auto;
      }

      .scroll-swap-intro {
        margin: 0 auto 2rem;
      }

      .scroll-swap-media {
        order: 1;
      }

      .scroll-swap-steps {
        order: 2;
      }

      .scroll-swap-media img,
      .switcher-media img,
      .media-card img.cover {
        aspect-ratio: 4 / 3;
      }

      .full-media img,
      .sticky-visual img,
      .diagram-visual {
        border-radius: 1rem;
      }

      .scroll-swap-steps,
      .diagram-text,
      .steps {
        gap: 1.25rem;
        padding: 1.25rem 0 0;
      }

      .swap-step,
      .diagram-step {
        opacity: 1;
        transform: none;
      }

      .parallax-section {
        min-height: 70vh;
        padding: 3rem 1rem;
      }

      .parallax-bg {
        inset: 0;
        transform: none !important;
      }


      .background-story {
        --background-story-card-position: center;
        --background-story-card-gap: 1.25rem;
        min-height: auto;
      }

      .background-story-bg {
        position: relative;
        height: 55vh;
      }

      .background-story-content {
        margin: 0 auto;
        padding: 1.25rem 1rem 3rem;
        gap: 1.25rem;
      }


      .step {
        opacity: 1;
        transform: none;
      }

      .caption {
        font-size: 0.85rem;
      }

      .section-label {
        font-size: 0.74rem;
        letter-spacing: 0.11em;
      }

      .text-card:hover,
      .background-story-card:hover,
      .rabbit-hole-card:hover,
      .swap-step:hover,
      .diagram-step:hover,
      .step:hover,
      .expandable-note:hover {
        transform: none;
      }

      .media-card:hover img,
      .full-media:hover img,
      .switcher-media figure:hover img,
      .scroll-swap-media:hover img,
      .sticky-visual:hover img {
        transform: none;
        filter: none;
      }
    }

    @media (max-width: 480px) {

      .section,
      .sticky-section {
        padding: 2.5rem 0.85rem;
      }

      .text-card,
      .parallax-card,
      .background-story-card,
      .rabbit-hole-card,
      .swap-step,
      .diagram-step,
      .step {
        padding: 1rem;
      }

      .scroll-swap,
      .sticky-grid,
      .diagram-layout,
      .switcher,
      .split {
        gap: 1rem;
      }

      .diagram-visual {
        padding: 0.5rem;
      }

      .diagram-visual svg text {
        font-size: 20px;
      }
    }
    @media (prefers-reduced-motion: reduce) {
      *,
      *::before,
      *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
      }

      .fade-in,
      .step,
      .swap-step,
      .diagram-step,
      .background-story-card {
        opacity: 1;
        transform: none;
      }

      .parallax-bg {
        inset: 0;
        transform: none !important;
      }

      .text-card,
      .media-card,
      .full-media,
      .switcher-media figure,
      .scroll-swap-media,
      .background-story-card,
      .rabbit-hole-card,
      .swap-step,
      .diagram-step,
      .step,
      .expandable-note,
      .media-card img,
      .full-media img,
      .switcher-media img,
      .scroll-swap-media img,
      .sticky-visual img {
        transition: none !important;
        transform: none !important;
      }
    }
  </style>

<div class="scroll-progress" id="scrollProgress"></div>

  <script>
/* ============================================================
   SCROLLYCORE JAVASCRIPT
   This is the shared behavior engine.
   Keep this once near the top of any Squarespace page that uses ScrollyBlocks.
============================================================ */
(function () {
  function initScrollyCore() {
    const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;

    if (prefersReducedMotion) {
      document.querySelectorAll(".video-hero video").forEach(video => {
        video.pause();
        video.removeAttribute("autoplay");
      });
    }

    const fadeObserver = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          entry.target.classList.add("visible");
        }
      });
    }, { threshold: 0.15 });

    document.querySelectorAll(".fade-in").forEach(el => fadeObserver.observe(el));

    const stepObserver = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          const group = entry.target.closest("[data-step-group]") || document;
          group.querySelectorAll(".step").forEach(step => step.classList.remove("active"));
          entry.target.classList.add("active");
        }
      });
    }, { threshold: 0.55 });

    document.querySelectorAll(".step").forEach(step => stepObserver.observe(step));

    document.querySelectorAll(".switcher-button").forEach(button => {
      button.addEventListener("click", () => {
        const parent = button.closest("[data-switcher]");
        if (!parent) return;

        const itemIndex = button.dataset.switcherItem;

        parent.querySelectorAll(".switcher-button").forEach(btn => {
          btn.classList.remove("active");
          btn.setAttribute("aria-pressed", "false");
        });

        button.classList.add("active");
        button.setAttribute("aria-pressed", "true");

        parent.querySelectorAll(".switcher-panel").forEach(panel => panel.classList.remove("active"));
        parent.querySelectorAll(`[data-switcher-panel="${itemIndex}"], [data-switcher-media="${itemIndex}"]`).forEach(panel => {
          panel.classList.add("active");
        });
      });
    });

    document.querySelectorAll("[data-rabbit-open]").forEach(button => {
      button.addEventListener("click", () => {
        const modalId = button.dataset.rabbitOpen;
        const modal = document.getElementById(modalId);
        if (!modal) return;
        modal.classList.add("open");
        document.body.classList.add("rabbit-hole-open");
        const closeButton = modal.querySelector("[data-rabbit-close]");
        if (closeButton) closeButton.focus();
      });
    });

    document.querySelectorAll("[data-rabbit-close]").forEach(button => {
      button.addEventListener("click", () => {
        const modalId = button.dataset.rabbitClose;
        const modal = document.getElementById(modalId);
        if (!modal) return;
        modal.classList.remove("open");
        document.body.classList.remove("rabbit-hole-open");
        const opener = document.querySelector(`[data-rabbit-open="${modalId}"]`);
        if (opener) opener.focus();
      });
    });

    document.querySelectorAll(".rabbit-hole-overlay").forEach(overlay => {
      overlay.addEventListener("click", event => {
        if (event.target !== overlay) return;
        overlay.classList.remove("open");
        document.body.classList.remove("rabbit-hole-open");
      });
    });

    document.addEventListener("keydown", event => {
      if (event.key !== "Escape") return;
      document.querySelectorAll(".rabbit-hole-overlay.open").forEach(modal => {
        modal.classList.remove("open");
      });
      document.body.classList.remove("rabbit-hole-open");
    });

/* ============================================================
   LAUREN-PROOF AREA #6: SCROLLSWAP IMAGE-SWITCH TIMING
   More negative rootMargin switches later. Less negative switches earlier.
============================================================ */
    const swapStepObserver = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (!entry.isIntersecting) return;

        const step = entry.target;
        const parent = step.closest("[data-scroll-swap]");
        if (!parent) return;

        const image = parent.querySelector("[data-scroll-swap-image]");
        const caption = parent.querySelector("[data-scroll-swap-caption]");
        const newImage = step.dataset.image;
        const newAlt = step.dataset.alt || "";
        const newCaption = step.dataset.caption || "";

        if (!image || !newImage) return;

        parent.querySelectorAll(".swap-step").forEach(s => s.classList.remove("active"));
        step.classList.add("active");

        image.classList.add("is-changing");

        window.setTimeout(() => {
          image.src = newImage;
          image.alt = newAlt;
          if (caption) caption.textContent = newCaption;

          image.addEventListener("load", () => {
            image.classList.remove("is-changing");
          }, { once: true });
        }, 420);
      });
    }, { threshold: 0.3, rootMargin: window.matchMedia("(max-width: 780px)").matches ? "0px 0px -20% 0px" : "0px 0px -50% 0px" });

    document.querySelectorAll(".swap-step").forEach(step => swapStepObserver.observe(step));

    const diagramStepObserver = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (!entry.isIntersecting) return;

        const step = entry.target;
        const target = step.dataset.diagramTarget;
        const parent = step.closest("[data-diagram]");
        if (!parent) return;

        parent.querySelectorAll(".diagram-step").forEach(s => s.classList.remove("active"));
        step.classList.add("active");

        parent.querySelectorAll(".diagram-node, .diagram-link").forEach(part => {
          part.classList.toggle("active", part.dataset.diagramPart === target || target === "capacity");
        });
      });
    }, { threshold: 0.55 });

    document.querySelectorAll(".diagram-step").forEach(step => diagramStepObserver.observe(step));

    document.querySelectorAll(".diagram-node, .diagram-link").forEach(part => {
      part.addEventListener("mouseenter", () => {
        const diagram = part.closest("[data-diagram]");
        if (!diagram) return;
        const key = part.dataset.diagramPart;
        diagram.querySelectorAll(".diagram-node, .diagram-link").forEach(piece => {
          piece.classList.toggle("hover-match", piece.dataset.diagramPart === key);
        });
      });

      part.addEventListener("mouseleave", () => {
        const diagram = part.closest("[data-diagram]");
        if (!diagram) return;
        diagram.querySelectorAll(".diagram-node, .diagram-link").forEach(piece => {
          piece.classList.remove("hover-match");
        });
      });
    });

    function updateParallax() {
      if (prefersReducedMotion) return;

      document.querySelectorAll("[data-parallax-section]").forEach(section => {
        const bg = section.querySelector(".parallax-bg");
        if (!bg) return;
        const rect = section.getBoundingClientRect();
        const windowHeight = window.innerHeight;
        const progress = (windowHeight - rect.top) / (windowHeight + rect.height);
        const clamped = Math.max(0, Math.min(1, progress));
        const movement = (clamped - 0.5) * 800;
        bg.style.transform = `translateY(${movement}px)`;
      });
    }

    function updateProgress() {
      const progressBar = document.getElementById("scrollProgress");
      if (!progressBar) return;
      const scrollTop = window.scrollY;
      const docHeight = document.documentElement.scrollHeight - window.innerHeight;
      const progress = docHeight > 0 ? (scrollTop / docHeight) * 100 : 0;
      progressBar.style.width = `${progress}%`;
    }

    window.addEventListener("scroll", () => {
      updateProgress();
      updateParallax();
    });

    window.addEventListener("resize", updateParallax);

    updateProgress();
    updateParallax();
  }

  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", initScrollyCore);
  } else {
    initScrollyCore();
  }
})();
  </script>