.journey {
      --journey-progress: 0;
      position: relative;
      background-color: #0a0a0a;
      background-image: linear-gradient(165deg, #030303 0%, #0a0a0a 100%);
      color: rgba(255, 255, 255, 0.88);
      padding: clamp(72px, 11vh, 120px) 0 clamp(88px, 12vh, 140px);
      overflow: visible;
      isolation: isolate;
      transition:
        background-color 1.85s cubic-bezier(0.42, 0, 0.22, 1),
        background-image 1.85s cubic-bezier(0.42, 0, 0.22, 1),
        color 1s cubic-bezier(0.35, 0, 0.25, 1);
    }

    .journey[data-era='0'] {
      background-color: #0a0a0a;
      background-image: linear-gradient(165deg, #030303 0%, #0a0a0a 100%);
    }

    .journey[data-era='1'] {
      background-color: #101010;
      background-image: linear-gradient(165deg, #050505 0%, #101010 100%);
    }

    .journey[data-era='2'] {
      background-color: #181818;
      background-image: linear-gradient(165deg, #080808 0%, #181818 100%);
    }

    .journey[data-era='3'] {
      background-color: #0a0a0a;
      background-image: linear-gradient(165deg, #050505 0%, #111111 48%, #0a0a0a 100%);
    }

    .journey[data-era='4'] {
      background-color: #ffffff;
      background-image: none;
    }

    .journey[data-era='5'] {
      background-color: #ffffff;
      background-image: none;
    }

    @media (prefers-reduced-motion: reduce) {
      .journey {
        transition: background-color 0.2s ease, background-image 0.2s ease, color 0.2s ease;
      }

      .journey::before,
      .journey::after,
      .journey__noise {
        transition: none;
      }

      .journey__noise {
        display: none;
      }
    }

    .journey::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 55% 40% at 15% 20%, rgba(255, 255, 255, 0.045), transparent 55%),
        radial-gradient(ellipse 50% 45% at 85% 75%, rgba(255, 255, 255, 0.04), transparent 60%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, transparent 12%, transparent 88%, rgba(0, 0, 0, 0.35) 100%),
        #0a0a0a;
      pointer-events: none;
      z-index: 0;
      transition: background 1.75s cubic-bezier(0.42, 0, 0.22, 1), opacity 1s ease;
    }

    .journey::after {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px);
      background-size: 100% 72px;
      background-position: 0 0;
      opacity: 0.12;
      pointer-events: none;
      z-index: 0;
      mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
      transition: opacity 1.6s ease;
    }

    .journey__noise {
      position: absolute;
      inset: 0;
      opacity: 0.035;
      z-index: 1;
      pointer-events: none;
      
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      mix-blend-mode: overlay;
      transition: opacity 1.6s ease, mix-blend-mode 0.8s ease;
    }

    html[data-journey-lite='1'] .journey__noise {
      display: none;
    }

    .journey.journey--pale::before {
      background:
        radial-gradient(ellipse 55% 42% at 15% 22%, rgba(255, 255, 255, 0.9), transparent 58%),
        radial-gradient(ellipse 50% 45% at 85% 72%, rgba(255, 255, 255, 0.5), transparent 62%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.12) 38%, transparent 65%, rgba(255, 255, 255, 0.18) 100%),
        #ffffff;
    }

    .journey.journey--pale::after {
      opacity: 0.07;
      background-image: linear-gradient(rgba(0, 0, 0, 0.05) 1px, transparent 1px);
    }

    .journey.journey--pale .journey__noise {
      opacity: 0.02;
      mix-blend-mode: multiply;
    }

    .journey__inner {
      position: relative;
      z-index: 2;
      max-width: var(--page-max-width);
      margin: 0 auto;
      padding: 0 28px;
    }

    .journey .section-tag {
      color: rgba(255, 255, 255, 0.38);
      margin: 0 auto 20px;
      text-align: center;
      max-width: 100%;
    }

    .journey .about-sec__header {
      text-align: center;
      opacity: 0;
      transform: translate3d(0, 22px, 0);
      transition: opacity 0.85s var(--ease-out-expo) 0.06s, transform 0.92s var(--ease-out-expo) 0.06s;
    }

    .journey[data-journey-boot='1'] .about-sec__header {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }

    @media (prefers-reduced-motion: reduce) {
      .journey .about-sec__header {
      opacity: 1;
        transform: none;
        transition: none;
      }
    }

    .journey .about__heading-wrap {
      display: inline-block;
      margin: 0 auto clamp(28px, 5vw, 48px);
    }

    .journey .about__heading-wrap .about__bracket-diamond,
    .journey .about__heading-wrap .about__bracket-line__fill {
      background: #fff;
    }

    .journey .about__heading {
      color: #fff;
    }

    .journey__layout {
      min-width: 0;
    }

    .journey__sticky-rail {
      display: grid;
      grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
      gap: clamp(28px, 5vw, 72px);
      align-items: stretch;
      min-width: 0;
      opacity: 0;
      transform: translate3d(0, 32px, 0);
      transition: opacity 0.95s var(--ease-out-expo) 0.12s, transform 1s var(--ease-out-expo) 0.1s;
    }

    .journey[data-journey-boot='1'] .journey__sticky-rail {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }

    @media (prefers-reduced-motion: reduce) {
      .journey__sticky-rail {
        opacity: 1;
        transform: none;
        transition: none;
      }
    }

    @media (max-width: 960px) {
      .journey__sticky-rail {
      display: flex;
      flex-direction: column;
        gap: clamp(24px, 4vw, 40px);
      }
    }

    .journey__anchor {
      position: sticky;
      top: clamp(64px, 10vh, 108px);
      align-self: start;
      width: 100%;
      max-width: 100%;
      display: flex;
      flex-direction: column;
      gap: clamp(20px, 3vh, 32px);
      padding-bottom: 24px;
      box-sizing: border-box;
    }

    @media (max-width: 960px) {
      .journey__anchor {
        position: sticky;
        top: max(12px, env(safe-area-inset-top, 0px));
        z-index: 4;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-end;
      justify-content: space-between;
        gap: 16px 20px;
        padding: 14px 0 18px;
        margin: 0 -8px 8px;
        padding-left: 8px;
        padding-right: 8px;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.94) 55%, rgba(0, 0, 0, 0));
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
      }

      .journey__kicker {
        width: 100%;
        order: -1;
        margin-bottom: -4px;
      }

      .journey__anchor-year {
        flex: 1 1 auto;
        min-width: 0;
      }

      .journey__year {
        font-size: clamp(2.75rem, 14vw, 4.25rem);
      }

      .journey__year-sub {
        font-size: 10px;
        letter-spacing: 0.18em;
        max-width: 42vw;
      }

      .journey__anchor-track {
        flex: 1 1 100%;
        max-width: none;
      }

      .journey__spine {
        max-width: none;
      }
    }

    .journey__kicker {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.38);
    }

    .journey__year-shell {
      overflow: hidden;
      position: relative;
      padding-top: 0.06em;
    }

    .journey__year {
      font-size: clamp(3.5rem, 12vw, 7.5rem);
      font-weight: 200;
      line-height: 1.08;
      letter-spacing: -0.045em;
      padding: 0.06em 0 0.02em;
      margin: 0;
      color: #fff;
      font-variant-numeric: tabular-nums;
      background: linear-gradient(165deg, #fff 0%, rgba(255, 255, 255, 0.72) 55%, rgba(255, 255, 255, 0.35) 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      transition: opacity 0.45s var(--ease-out-expo), transform 0.5s var(--ease-out-expo), letter-spacing 0.45s var(--ease-out-expo);
    }

    .journey__year.is-year-exit {
      transform: translate3d(0, -14px, 0);
      opacity: 0;
      letter-spacing: -0.02em;
    }

    .journey__year.is-year-enter {
      animation: journey-year-enter 0.52s var(--ease-out-expo) forwards;
    }

    @keyframes journey-year-enter {
      from {
        transform: translate3d(0, 18px, 0);
        opacity: 0;
      }
      to {
        transform: translate3d(0, 0, 0);
      opacity: 1;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .journey__year {
        color: #fff;
        background: none;
        -webkit-background-clip: border-box;
        background-clip: border-box;
      }

      .journey__year.is-year-exit,
      .journey__year.is-year-enter {
        animation: none;
        transform: none;
        opacity: 1;
      }
    }

    .journey__year-sub {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.35);
      margin-top: 8px;
      min-height: 1.2em;
    }

    .journey__spine {
      width: 100%;
      max-width: 280px;
      height: 3px;
      background: rgba(255, 255, 255, 0.08);
      position: relative;
      overflow: visible;
      border-radius: 2px;
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
      cursor: grab;
      touch-action: none;
      user-select: none;
      -webkit-user-select: none;
    }

    .journey__spine::before {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      top: -14px;
      bottom: -14px;
      z-index: 4;
    }

    .journey__spine.is-dragging {
      cursor: grabbing;
    }

    .journey__spine-fill {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      pointer-events: none;
      width: calc(var(--journey-progress) * 100%);
      border-radius: 2px;
      background: linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.55) 45%, rgba(255, 255, 255, 0.95) 100%);
      box-shadow: 0 0 22px rgba(255, 255, 255, 0.14);
      transition: width 0.08s linear;
    }

    .journey__spine-cap {
      position: absolute;
      top: 50%;
      left: calc(var(--journey-progress) * 100%);
      width: 9px;
      height: 9px;
      margin-left: -4.5px;
      margin-top: -4.5px;
      border-radius: 1px;
      background: #fff;
      box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.35),
        0 0 18px rgba(255, 255, 255, 0.45);
      pointer-events: none;
      opacity: calc(0.35 + var(--journey-progress) * 0.65);
      transition: opacity 0.2s ease;
      z-index: 2;
    }

    .journey__spine-marks {
      position: absolute;
      inset: 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 1px;
      pointer-events: none;
      z-index: 1;
    }

    .journey__spine-mark {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.14);
      transition:
        transform 0.45s var(--ease-soft),
        background 0.45s ease,
        border-color 0.45s ease,
        box-shadow 0.45s ease;
    }

    .journey__spine-mark.is-passed {
      background: rgba(255, 255, 255, 0.32);
      border-color: rgba(255, 255, 255, 0.28);
    }

    .journey__spine-mark.is-active {
      background: rgba(255, 255, 255, 0.95);
      border-color: rgba(255, 255, 255, 0.55);
      box-shadow: 0 0 14px rgba(255, 255, 255, 0.2);
      transform: scale(1.4);
    }

    @media (prefers-reduced-motion: reduce) {
      .journey__spine-mark {
        transition: background 0.25s ease, border-color 0.25s ease;
      }

      .journey__spine-mark.is-active {
        transform: none;
      }
    }

    .journey__step-counter {
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.32);
      margin-top: 8px;
      font-variant-numeric: tabular-nums;
    }

    @keyframes journey-phase-pulse {
      0% {
        opacity: 0.35;
        transform: translate3d(0, 4px, 0);
      }
      100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
      }
    }

    .journey__year-sub.is-phase-flash {
      animation: journey-phase-pulse 0.55s var(--ease-out-expo) forwards;
    }

    @media (prefers-reduced-motion: reduce) {
      .journey__year-sub.is-phase-flash {
        animation: none;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .journey__spine-fill {
        width: 100%;
        transition: none;
      }

      .journey__spine-cap {
        left: 100%;
        opacity: 1;
      }
    }

    .journey__spine-label {
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.28);
      margin-top: 10px;
    }

    .journey__scenes {
      --journey-scene-gap: clamp(36px, 6vh, 56px);
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: var(--journey-scene-gap);
      padding-bottom: clamp(24px, 4vh, 48px);
    }

    @media (max-width: 960px) {
      .journey__scenes {
        --journey-scene-gap: clamp(24px, 4vw, 40px);
      }
    }

    .journey__scene {
      --scene-y: 28px;
      position: relative;
      scroll-margin-top: min(12vh, 96px);
      scroll-margin-bottom: min(8vh, 64px);
      
      content-visibility: auto;
      contain-intrinsic-size: auto 400px;
    }

    .journey__scene:not(:last-child)::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: calc(-0.5 * var(--journey-scene-gap, clamp(36px, 6vh, 56px)));
      height: 1px;
      background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.06) 12%,
        rgba(255, 255, 255, 0.14) 50%,
        rgba(255, 255, 255, 0.06) 88%,
        transparent 100%
      );
      pointer-events: none;
      z-index: 1;
    }

    .journey__scene:nth-child(even) .journey__scene-panel {
      margin-left: clamp(0px, 8vw, 96px);
    }

    @media (max-width: 960px) {
      .journey__scene:nth-child(even) .journey__scene-panel {
        margin-left: 0;
      }
    }

    .journey__scene-panel {
      
      --journey-notch-o: 92px;
      --journey-notch-i: 82px;
      --journey-notch-depth: 15px;
      position: relative;
      border: 1px solid rgba(255, 255, 255, 0.12);
      background:
        linear-gradient(165deg, rgba(255, 255, 255, 0.05) 0%, transparent 42%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.015) 42%, rgba(0, 0, 0, 0.18) 100%);
      box-shadow:
        0 4px 0 rgba(255, 255, 255, 0),
        0 22px 48px rgba(0, 0, 0, 0.32);
      padding: clamp(26px, 3.5vw, 36px) clamp(22px, 3vw, 32px);
      -webkit-clip-path: polygon(
        0% 0%,
        calc(50% - var(--journey-notch-o)) 0%,
        calc(50% - var(--journey-notch-i)) var(--journey-notch-depth),
        calc(50% + var(--journey-notch-i)) var(--journey-notch-depth),
        calc(50% + var(--journey-notch-o)) 0%,
        100% 0%,
        100% 100%,
        calc(50% + var(--journey-notch-o)) 100%,
        calc(50% + var(--journey-notch-i)) calc(100% - var(--journey-notch-depth)),
        calc(50% - var(--journey-notch-i)) calc(100% - var(--journey-notch-depth)),
        calc(50% - var(--journey-notch-o)) 100%,
        0% 100%
      );
      clip-path: polygon(
        0% 0%,
        calc(50% - var(--journey-notch-o)) 0%,
        calc(50% - var(--journey-notch-i)) var(--journey-notch-depth),
        calc(50% + var(--journey-notch-i)) var(--journey-notch-depth),
        calc(50% + var(--journey-notch-o)) 0%,
        100% 0%,
        100% 100%,
        calc(50% + var(--journey-notch-o)) 100%,
        calc(50% + var(--journey-notch-i)) calc(100% - var(--journey-notch-depth)),
        calc(50% - var(--journey-notch-i)) calc(100% - var(--journey-notch-depth)),
        calc(50% - var(--journey-notch-o)) 100%,
        0% 100%
      );
      filter: brightness(1);
      opacity: 0;
      transform: translate3d(0, var(--scene-y), 0);
      transition:
        opacity 0.85s var(--ease-out-expo),
        transform 0.85s var(--ease-out-expo),
        border-color 0.5s var(--ease-soft),
        box-shadow 0.55s var(--ease-soft),
        background 0.55s var(--ease-soft),
        filter 0.45s var(--ease-soft),
        clip-path 0.55s var(--ease-soft),
        -webkit-clip-path 0.55s var(--ease-soft);
    }

    .journey__scene-panel::before {
      content: '';
      position: absolute;
      left: 0;
      top: 12%;
      bottom: 12%;
      width: 2px;
      background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.35), transparent);
      opacity: 0;
      transform: scaleY(0.6);
      transform-origin: center;
      transition: opacity 0.5s var(--ease-soft), transform 0.55s var(--ease-out-expo);
    }

    @media (hover: hover) and (pointer: fine) {
      .journey__scene.is-inview .journey__scene-panel:hover,
      .journey__scene.is-inview .journey__scene-panel:focus-within {
        --journey-notch-o: 108px;
        --journey-notch-i: 98px;
        filter: none;
        border-color: rgba(255, 255, 255, 0.28);
        background:
          linear-gradient(165deg, rgba(255, 255, 255, 0.1) 0%, transparent 42%),
          rgba(14, 14, 14, 0.98);
        box-shadow:
          0 0 0 1px rgba(255, 255, 255, 0.1),
          0 24px 48px rgba(0, 0, 0, 0.34);
      }
    }

    .journey__scene.is-inview:focus-within .journey__scene-panel {
      --journey-notch-o: 108px;
      --journey-notch-i: 98px;
      filter: none;
      border-color: rgba(255, 255, 255, 0.28);
      background:
        linear-gradient(165deg, rgba(255, 255, 255, 0.1) 0%, transparent 42%),
        rgba(14, 14, 14, 0.98);
      box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.1),
        0 24px 48px rgba(0, 0, 0, 0.34);
    }

    .journey__scene:focus-visible {
      outline: none;
    }

    .journey__scene:focus-visible .journey__scene-panel {
      outline: 2px solid rgba(255, 255, 255, 0.45);
      outline-offset: 3px;
    }

    .journey__scene.is-inview .journey__scene-panel {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }

    .journey__scene.is-active .journey__scene-panel {
      border-color: rgba(255, 255, 255, 0.26);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 0 0 1px rgba(255, 255, 255, 0.08),
        0 32px 64px rgba(0, 0, 0, 0.45);
    }

    

    .journey__scene.is-active .journey__scene-panel::before {
      opacity: 1;
      transform: scaleY(1);
    }

    @media (prefers-reduced-motion: reduce) {
      .journey__scene-panel {
        transform: none;
        transition:
          border-color 0.35s ease,
          box-shadow 0.35s ease,
          background 0.35s ease,
          opacity 0.35s ease,
          clip-path 0.01ms,
          -webkit-clip-path 0.01ms;
      }

      .journey__scene-panel::before {
        opacity: 0.7;
        transform: scaleY(1);
      }

      .journey__scene.is-active .journey__scene-panel::before {
        opacity: 1;
      }
    }

    .journey__scene-wm {
      position: absolute;
      right: clamp(12px, 2vw, 22px);
      top: clamp(10px, 1.5vw, 16px);
      font-size: clamp(3rem, 10vw, 5.5rem);
      font-weight: 800;
      letter-spacing: -0.04em;
      line-height: 1;
      color: rgba(255, 255, 255, 0.04);
      pointer-events: none;
      user-select: none;
    }

    .journey__scene-head {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      justify-content: space-between;
      gap: 10px 16px;
      margin-bottom: 10px;
    }

    .journey__scene-index {
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.14em;
      font-variant-numeric: tabular-nums;
      color: rgba(255, 255, 255, 0.22);
      flex-shrink: 0;
    }

    .journey__scene.is-active .journey__scene-index {
      color: rgba(255, 255, 255, 0.5);
    }

    .journey__scene-eyebrow {
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.38);
      margin: 0;
    }

    .journey__scene-title {
      font-size: clamp(1.15rem, 2.2vw, 1.45rem);
      font-weight: 400;
      letter-spacing: -0.03em;
      line-height: 1.2;
      color: #fff;
      margin-bottom: 12px;
      max-width: 28ch;
      opacity: 0;
      transform: translate3d(0, 12px, 0);
      transition: opacity 0.7s var(--ease-out-expo) 0.06s, transform 0.75s var(--ease-out-expo) 0.06s;
    }

    .journey__scene-text {
      font-size: 0.92rem;
      font-weight: 400;
      line-height: 1.68;
      color: rgba(255, 255, 255, 0.55);
      max-width: 48ch;
      opacity: 0;
      transform: translate3d(0, 10px, 0);
      transition: opacity 0.75s var(--ease-out-expo) 0.12s, transform 0.78s var(--ease-out-expo) 0.12s;
    }

    .journey__scene.is-inview .journey__scene-title,
    .journey__scene.is-inview .journey__scene-text,
    .journey__scene.is-inview .journey__scene-meta {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }

    @media (prefers-reduced-motion: reduce) {
      .journey__scene-title,
      .journey__scene-text,
      .journey__scene-meta {
        transform: none;
        transition: opacity 0.3s ease;
      }
    }

    .journey__scene-meta {
      margin-top: 18px;
      display: flex;
      flex-wrap: wrap;
      gap: 10px 18px;
      align-items: center;
      opacity: 0;
      transform: translate3d(0, 8px, 0);
      transition: opacity 0.65s var(--ease-out-expo) 0.2s, transform 0.7s var(--ease-out-expo) 0.2s;
    }

    .journey__scene-chip {
      font-size: 9px;
      font-weight: 400;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      padding: 8px 12px;
      border: 1px solid rgba(255, 255, 255, 0.14);
      color: rgba(255, 255, 255, 0.55);
      background: rgba(0, 0, 0, 0.25);
      transition: border-color 0.35s ease, color 0.35s ease;
    }

    .journey__scene.is-active .journey__scene-chip {
      border-color: rgba(255, 255, 255, 0.32);
      color: rgba(255, 255, 255, 0.88);
    }

    .journey.journey--pale {
      color: rgba(0, 0, 0, 0.92);
    }

    .journey.journey--pale .section-tag {
      color: rgba(0, 0, 0, 0.42);
    }

    .journey.journey--pale .about__heading-wrap .about__bracket-diamond,
    .journey.journey--pale .about__heading-wrap .about__bracket-line__fill {
      background: #111;
    }

    .journey.journey--pale .about__heading {
      color: #0a0a0a;
    }

    .journey.journey--pale .journey__kicker {
      color: rgba(0, 0, 0, 0.42);
    }

    .journey.journey--pale .journey__year {
      background: linear-gradient(165deg, #0a0a0a 0%, #111111 55%, #0a0a0a 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .journey.journey--pale .journey__year-sub {
      color: rgba(0, 0, 0, 0.45);
    }

    .journey.journey--pale .journey__spine {
      background: rgba(0, 0, 0, 0.08);
      box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
    }

    .journey.journey--pale .journey__spine-fill {
      background: linear-gradient(90deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.55) 45%, rgba(0, 0, 0, 0.88) 100%);
      box-shadow: 0 0 18px rgba(0, 0, 0, 0.12);
    }

    .journey.journey--pale .journey__spine-cap {
      background: #111;
      box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.35),
        0 0 14px rgba(0, 0, 0, 0.35);
    }

    .journey.journey--pale .journey__spine-mark {
      background: rgba(0, 0, 0, 0.08);
      border-color: rgba(0, 0, 0, 0.14);
    }

    .journey.journey--pale .journey__spine-mark.is-passed {
      background: rgba(0, 0, 0, 0.28);
      border-color: rgba(0, 0, 0, 0.22);
    }

    .journey.journey--pale .journey__spine-mark.is-active {
      background: #111;
      border-color: rgba(0, 0, 0, 0.45);
      box-shadow: 0 0 12px rgba(0, 0, 0, 0.35);
    }

    .journey.journey--pale .journey__step-counter {
      color: rgba(0, 0, 0, 0.42);
    }

    .journey.journey--pale .journey__spine-label {
      color: rgba(0, 0, 0, 0.38);
    }

    .journey.journey--pale .journey__scene:not(:last-child)::after {
      background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(0, 0, 0, 0.06) 12%,
        rgba(0, 0, 0, 0.12) 50%,
        rgba(0, 0, 0, 0.06) 88%,
        transparent 100%
      );
    }

    .journey.journey--pale .journey__scene-panel {
      border-color: rgba(0, 0, 0, 0.12);
      background:
        linear-gradient(165deg, rgba(255, 255, 255, 0.65) 0%, transparent 42%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.2) 42%, rgba(0, 0, 0, 0.04) 100%);
      box-shadow: 0 4px 0 rgba(0, 0, 0, 0), 0 22px 48px rgba(0, 0, 0, 0.08);
    }

    .journey.journey--pale .journey__scene-panel::before {
      background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.35), transparent);
    }

    .journey.journey--pale .journey__scene.is-active .journey__scene-panel {
      border-color: rgba(0, 0, 0, 0.2);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.65),
        0 0 0 1px rgba(0, 0, 0, 0.06),
        0 28px 56px rgba(0, 0, 0, 0.12);
      animation: none !important;
    }

    @media (hover: hover) and (pointer: fine) {
      .journey.journey--pale .journey__scene.is-inview .journey__scene-panel:hover,
      .journey.journey--pale .journey__scene.is-inview .journey__scene-panel:focus-within {
        --journey-notch-o: 108px;
        --journey-notch-i: 98px;
        border-color: rgba(0, 0, 0, 0.22);
        background:
          linear-gradient(165deg, rgba(255, 255, 255, 0.85) 0%, transparent 42%),
          rgba(248, 248, 248, 0.98);
        box-shadow:
          0 0 0 1px rgba(0, 0, 0, 0.08),
          0 24px 48px rgba(0, 0, 0, 0.12);
      }
    }

    .journey.journey--pale .journey__scene.is-inview:focus-within .journey__scene-panel {
      --journey-notch-o: 108px;
      --journey-notch-i: 98px;
      border-color: rgba(0, 0, 0, 0.22);
      background:
        linear-gradient(165deg, rgba(255, 255, 255, 0.85) 0%, transparent 42%),
        rgba(248, 248, 248, 0.98);
      box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.08),
        0 24px 48px rgba(0, 0, 0, 0.12);
    }

    .journey.journey--pale .journey__scene:focus-visible .journey__scene-panel {
      outline-color: rgba(0, 0, 0, 0.35);
    }

    .journey.journey--pale .journey__scene-wm {
      color: rgba(0, 0, 0, 0.06);
    }

    .journey.journey--pale .journey__scene-index {
      color: rgba(0, 0, 0, 0.28);
    }

    .journey.journey--pale .journey__scene.is-active .journey__scene-index {
      color: rgba(0, 0, 0, 0.5);
    }

    .journey.journey--pale .journey__scene-eyebrow {
      color: rgba(0, 0, 0, 0.42);
    }

    .journey.journey--pale .journey__scene-title {
      color: #0a0a0a;
    }

    .journey.journey--pale .journey__scene-text {
      color: rgba(0, 0, 0, 0.58);
    }

    .journey.journey--pale .journey__scene-chip {
      border-color: rgba(0, 0, 0, 0.14);
      color: rgba(0, 0, 0, 0.52);
      background: rgba(255, 255, 255, 0.55);
    }

    .journey.journey--pale .journey__scene.is-active .journey__scene-chip {
      border-color: rgba(0, 0, 0, 0.22);
      color: rgba(0, 0, 0, 0.82);
    }

    @media (max-width: 960px) {
      .journey.journey--pale .journey__anchor {
        background: linear-gradient(180deg, rgba(248, 248, 248, 0.96) 55%, rgba(248, 248, 248, 0));
        border-bottom-color: rgba(0, 0, 0, 0.08);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .journey.journey--pale .journey__year {
        color: #111;
        background: none;
        -webkit-background-clip: border-box;
        background-clip: border-box;
      }
    }

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

    .home-products__tag {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.55);
      margin: 0 0 16px;
    }

    .home-products__lead {
      font-size: clamp(14px, 1.35vw, 16px);
      font-weight: 300;
      line-height: 1.65;
      color: rgba(255, 255, 255, 0.72);
      margin: 0 0 24px;
      max-width: 42ch;
    }

    .home-products::before,
    .tfon-notch-panel::before {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background: var(--tfon-notch-ink);
      -webkit-clip-path: polygon(
        0% 100%,
        100% 100%,
        100% 0%,
        var(--tfon-notch-r) 0%,
        var(--tfon-notch-dip-r) var(--tfon-notch-depth),
        var(--tfon-notch-dip-l) var(--tfon-notch-depth),
        var(--tfon-notch-l) 0%,
        0% 0%
      );
      clip-path: polygon(
        0% 100%,
        100% 100%,
        100% 0%,
        var(--tfon-notch-r) 0%,
        var(--tfon-notch-dip-r) var(--tfon-notch-depth),
        var(--tfon-notch-dip-l) var(--tfon-notch-depth),
        var(--tfon-notch-l) 0%,
        0% 0%
      );
    }

    .tfon-notch-panel {
      position: relative;
      isolation: isolate;
      background: transparent;
    }

    .home-products__notch,
    .tfon-notch-panel__notch {
      position: absolute;
      left: 0;
      right: 0;
      width: 100%;
      height: var(--tfon-notch-depth);
      pointer-events: none;
      z-index: 1;
    }

    .home-products__notch--top,
    .tfon-notch-panel__notch--top {
      top: 0;
      margin-top: -1px;
      background: var(--tfon-notch-top-fill);
      -webkit-clip-path: polygon(
        var(--tfon-notch-l) 0%,
        var(--tfon-notch-r) 0%,
        var(--tfon-notch-dip-r) 100%,
        var(--tfon-notch-dip-l) 100%
      );
      clip-path: polygon(
        var(--tfon-notch-l) 0%,
        var(--tfon-notch-r) 0%,
        var(--tfon-notch-dip-r) 100%,
        var(--tfon-notch-dip-l) 100%
      );
    }

    
    .journey.tfon-notch-panel {
      --tfon-notch-depth: clamp(28px, 5.25vw, 52px);
    }

    
    .journey.tfon-notch-panel::before {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background:
        radial-gradient(ellipse 55% 40% at 15% 20%, rgba(255, 255, 255, 0.045), transparent 55%),
        radial-gradient(ellipse 50% 45% at 85% 75%, rgba(255, 255, 255, 0.04), transparent 60%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, transparent 12%, transparent 88%, rgba(0, 0, 0, 0.35) 100%),
        #0a0a0a;
      transition: background 1.75s cubic-bezier(0.42, 0, 0.22, 1), opacity 1s ease;
      -webkit-clip-path: polygon(
        0% 100%,
        100% 100%,
        100% 0%,
        var(--tfon-notch-r) 0%,
        var(--tfon-notch-dip-r) var(--tfon-notch-depth),
        var(--tfon-notch-dip-l) var(--tfon-notch-depth),
        var(--tfon-notch-l) 0%,
        0% 0%
      );
      clip-path: polygon(
        0% 100%,
        100% 100%,
        100% 0%,
        var(--tfon-notch-r) 0%,
        var(--tfon-notch-dip-r) var(--tfon-notch-depth),
        var(--tfon-notch-dip-l) var(--tfon-notch-depth),
        var(--tfon-notch-l) 0%,
        0% 0%
      );
    }

    .journey.journey--pale.tfon-notch-panel::before {
      background:
        radial-gradient(ellipse 55% 42% at 15% 22%, rgba(255, 255, 255, 0.9), transparent 58%),
        radial-gradient(ellipse 50% 45% at 85% 72%, rgba(255, 255, 255, 0.5), transparent 62%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.12) 38%, transparent 65%, rgba(255, 255, 255, 0.18) 100%),
        #ffffff;
    }

    .journey.tfon-notch-panel .journey__noise {
      z-index: 1;
    }

    .journey.tfon-notch-panel .tfon-notch-panel__notch {
      z-index: 2;
    }