:root {
      --bg: #101312;
      --panel: #171a18;
      --text: #f3eee7;
      --muted: rgba(243, 238, 231, .68);
      --soft: rgba(243, 238, 231, .13);
      --orange: #ef7435;
      --orange-soft: #ff9a55;
      --serif: "Playfair Display", Georgia, serif;
      --sans: "Instrument Sans", Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
    }

    .pm-hero-sequence, .pm-hero-sequence * { box-sizing: border-box; }
    .landing-experience-body { color: var(--text); font-family: var(--sans); }
    .landing-experience-body {
      overflow-x: hidden;
      background: var(--bg);
    }
    .landing-experience { padding-top: 0; }
    .pm-hero-sequence button, .pm-hero-sequence a { font: inherit; }

    .pm-hero-sequence {
      width: 100vw;
      height: 440vh;
    }

    .hero-scene {
      position: sticky;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      min-height: 720px;
      overflow: hidden;
      isolation: isolate;
      background: #101312;
    }

    .ambient-layer,
    .right-shade {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 30;
    }

    .ambient-layer {
      background:
        radial-gradient(circle at 55% 47%, rgba(239, 116, 53, .15), transparent 22%),
        radial-gradient(circle at 24% 58%, rgba(239, 116, 53, .11), transparent 25%),
        linear-gradient(90deg, rgba(8, 10, 9, .68), transparent 46%, rgba(7, 8, 8, .48)),
        linear-gradient(0deg, rgba(7, 8, 8, .84), transparent 42%, rgba(8, 9, 9, .62));
      mix-blend-mode: normal;
    }

    .right-shade {
      inset: 0 -10vw 0 10vw;
      background:
        linear-gradient(90deg, transparent 0 50%, rgba(9, 10, 10, .58) 72%, rgba(5, 6, 6, .98) 100%),
        radial-gradient(circle at 74% 68%, rgba(239, 116, 53, .13), transparent 22%);
      opacity: 0;
    }

    .top-nav {
      position: fixed;
      z-index: 100;
      top: 0;
      left: 0;
      right: 0;
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      gap: 28px;
      color: rgba(243, 238, 231, .78);
      padding: 23px clamp(32px, 5vw, 76px);
      border-bottom: 1px solid transparent;
      background: transparent;
      backdrop-filter: blur(0);
      -webkit-backdrop-filter: blur(0);
      transition: background-color .42s ease, border-color .42s ease, backdrop-filter .42s ease, -webkit-backdrop-filter .42s ease;
    }

    .top-nav.is-scrolled {
      background: linear-gradient(90deg, rgba(11, 16, 18, .46), rgba(15, 21, 23, .34) 50%, rgba(11, 16, 18, .46));
      border-bottom-color: rgba(226, 232, 229, .06);
      backdrop-filter: blur(14px) saturate(.88);
      -webkit-backdrop-filter: blur(14px) saturate(.88);
    }

    .brand {
      display: inline-flex;
      align-items: center;
      width: 90px;
    }

    .brand img {
      display: block;
      width: 100%;
      height: auto;
    }
    .navlinks {
      display: flex;
      align-items: center;
      gap: 34px;
      font-size: 15px;
      font-weight: 500;
      letter-spacing: .015em;
    }

    .navlinks a {
      color: rgba(243, 238, 231, .72);
      text-decoration: none;
      transition: color .2s ease;
    }

    .navlinks a:hover,
    .navlinks a:focus-visible {
      color: #ef7435;
    }

    .top-nav .login {
      justify-self: end;
      color: #fff5ee;
      border: 1px solid rgba(255, 157, 91, .72);
      border-radius: 7px;
      padding: 10px 16px;
      text-decoration: none;
      background: rgba(239, 116, 53, .82);
      font-size: 13px;
      font-weight: 650;
      letter-spacing: .01em;
      white-space: nowrap;
      transition: background .2s ease, border-color .2s ease, transform .2s ease;
    }

    .top-nav .login:hover {
      color: #fff4ec;
      border-color: rgba(255, 180, 126, .9);
      background: rgba(239, 116, 53, .95);
      transform: translateY(-1px);
    }

    .map-environment {
      position: absolute;
      inset: -13%;
      z-index: 1;
      opacity: 0;
      transform: scale(1.18);
      background:
        radial-gradient(circle at 30% 52%, rgba(82, 100, 94, .24), transparent 34%),
        linear-gradient(135deg, #151918, #101312 58%, #1c1915);
    }

    .map-group {
      position: absolute;
      left: 50%;
      top: 50%;
      transform-origin: 49% 57%;
      will-change: transform, opacity;
    }

    .map-base,
    .map-contours {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      filter: saturate(.94) contrast(1.06);
    }

    .map-contours {
      opacity: .18;
      mix-blend-mode: screen;
      filter: none;
    }

    .zoom-map {
      opacity: 0;
    }

    .zoom-map-1 {
      width: 132vw;
      aspect-ratio: 1448 / 1086;
    }

    .zoom-map-5 {
      width: 112vw;
      aspect-ratio: 1625 / 968;
    }

    .zoom-map-5 .map-base {
      filter: brightness(1.22) saturate(1.08) contrast(1.03);
    }

    .zoom-map-1 { opacity: 1; }

    .map-markers {
      position: absolute;
      inset: 0;
      z-index: 3;
      pointer-events: none;
    }

    .topographic-veil {
      position: absolute;
      inset: 0;
      opacity: .35;
      background-image:
        linear-gradient(rgba(235, 226, 210, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(235, 226, 210, .035) 1px, transparent 1px);
      background-size: 92px 92px, 92px 92px;
      mask-image: radial-gradient(circle at 39% 53%, #000, transparent 72%);
    }

    .photo-layer {
      position: absolute;
      inset: 0;
      width: 100vw;
      height: 100vh;
      z-index: 20;
      overflow: hidden;
      border: 0 solid rgba(255, 255, 255, .16);
      border-radius: 0;
      box-shadow: 0 0 0 rgba(0, 0, 0, 0);
      transform-origin: 61% 56%;
      will-change: inset, width, height, border-radius, transform, opacity;
    }

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

    .location-hint {
      position: absolute;
      left: 60.7%;
      top: 62%;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: var(--orange);
      box-shadow: 0 0 0 7px rgba(239, 116, 53, .13), 0 0 28px rgba(239, 116, 53, .58);
      opacity: .62;
      transform: translate(-50%, -50%);
    }

    .photo-card-meta {
      position: absolute;
      inset: auto 0 0 0;
      padding: 22px;
      opacity: 0;
      display: grid;
      gap: 12px;
      background: linear-gradient(0deg, rgba(9, 10, 10, .82), rgba(9, 10, 10, .08));
    }

    .photo-card-meta h3 { margin: 0; font-size: 17px; font-weight: 650; }
    .detail-row { display: flex; gap: 10px; flex-wrap: wrap; }
    .detail-row span {
      padding: 7px 10px;
      border: 1px solid rgba(243, 238, 231, .14);
      border-radius: 999px;
      color: rgba(243, 238, 231, .78);
      background: rgba(11, 12, 12, .5);
      font-size: 12px;
    }

    .marker {
      position: absolute;
      left: var(--x);
      top: var(--y);
      width: 24px;
      height: 24px;
      opacity: 0;
      transform: translate(-50%, -100%) scale(.55);
      will-change: transform, opacity;
    }

    .local-secondary {
      width: 19px;
      height: 19px;
    }

    .regional-marker {
      width: 20px;
      height: 20px;
    }

    .regional-featured {
      width: 28px;
      height: 28px;
      z-index: 2;
    }

    .marker img {
      width: 100%;
      height: 100%;
      display: block;
      filter:
        brightness(0)
        saturate(100%)
        invert(62%)
        sepia(89%)
        saturate(1182%)
        hue-rotate(331deg)
        brightness(99%)
        contrast(91%)
        drop-shadow(0 4px 10px rgba(239, 116, 53, .26));
    }

    .marker.primary {
      width: 34px;
      height: 34px;
      z-index: 2;
    }

    .marker.primary img {
      filter:
        brightness(0)
        saturate(100%)
        invert(62%)
        sepia(89%)
        saturate(1182%)
        hue-rotate(331deg)
        brightness(104%)
        contrast(96%)
        drop-shadow(0 6px 14px rgba(239, 116, 53, .42));
    }

    .marker.primary::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 82%;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      border: 1px solid rgba(239, 116, 53, .32);
      transform: translate(-50%, -50%);
      animation: pulse 3.2s ease-out infinite;
    }

    .regional-featured::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 82%;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      border: 1px solid rgba(239, 116, 53, .26);
      transform: translate(-50%, -50%);
    }

    @keyframes pulse {
      to { transform: scale(1.55); opacity: 0; }
    }

    .connector {
      position: absolute;
      z-index: 17;
      left: 50.2%;
      top: 46.2%;
      width: 1px;
      height: 136px;
      opacity: 0;
      transform-origin: bottom;
      transform: rotate(23deg) scaleY(0);
      background: linear-gradient(rgba(255, 154, 85, .5), rgba(239, 116, 53, .06));
      box-shadow: 0 0 10px rgba(239, 116, 53, .12);
    }

    .copy-layer {
      position: absolute;
      z-index: 45;
      left: clamp(32px, 8vw, 132px);
      bottom: clamp(58px, 11vh, 118px);
      width: min(760px, 58vw);
    }

    .stage1-copy p:not(.eyebrow),
    .stage2-copy p:not(.eyebrow) {
      max-width: 560px;
    }

    .stage2-copy,
    .stage3-copy,
    .static-hero-copy { opacity: 0; }

    .static-hero-copy { display: none; }

    .stage3-copy {
      left: auto;
      right: clamp(38px, 4.6vw, 74px);
      top: 38vh;
      bottom: auto;
      width: min(500px, 33vw);
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin: 0 0 18px;
      color: var(--orange-soft);
      font-size: 12.5px;
      letter-spacing: .12em;
      font-weight: 700;
    }

    .eyebrow::before,
    .eyebrow::after {
      width: 20px;
      height: 1px;
      background: currentColor;
      content: "";
      opacity: .8;
    }

    .pm-hero-sequence h1,
    .pm-hero-sequence h2 {
      margin: 0;
      font-family: var(--serif);
      font-weight: 500;
      line-height: .98;
      letter-spacing: 0;
    }

    .pm-hero-sequence h1 { font-size: clamp(48px, 5vw, 88px); }
    .pm-hero-sequence h2 { font-size: clamp(42px, 4.6vw, 74px); }
    .stage3-copy h2 {
      max-width: 550px;
      font-size: clamp(52px, 3.9vw, 64px);
      line-height: .94;
      letter-spacing: 0;
    }

    .copy-layer p:not(.eyebrow) {
      margin: 22px 0 0;
      color: var(--muted);
      font-size: 18px;
      line-height: 1.58;
    }

    .stage3-copy p:not(.eyebrow) {
      max-width: 492px;
      margin-top: 24px;
      font-size: 17.5px;
      line-height: 1.5;
      font-weight: 400;
      opacity: .72;
    }

    .scroll-cue {
      margin-top: 42px;
      color: var(--orange-soft);
      font-weight: 700;
    }

    .phone-layer {
      position: absolute;
      z-index: 38;
      left: calc(33.1% + 10px);
      top: 38vh;
      bottom: auto;
      width: min(440px, 27.2vw);
      height: min(390px, 24vw);
      opacity: 0;
      transform: translate3d(3.4vw, 2vh, 0) scale(.92);
      filter: drop-shadow(0 34px 42px rgba(0, 0, 0, .52));
      pointer-events: none;
    }

    .phone {
      position: absolute;
      bottom: 0;
      will-change: transform, opacity;
    }

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

    /* The new Play mockups have a larger visible phone within the canvas. */
    .phone-map img { width: 81.5%; }
    .phone-detail img { width: 77%; margin-left: auto; }

    .phone-map {
      left: 58px;
      bottom: 18px;
      z-index: 2;
      width: 60%;
      transform: rotate(-2.4deg);
    }

    .phone-detail {
      right: 0;
      width: 62%;
      transform: translateY(-8%) rotate(1.4deg);
    }

    .actions {
      display: flex;
      align-items: center;
      gap: 22px;
      margin-top: 28px;
    }

    .pm-hero-sequence .primary-cta {
      border: 1px solid rgba(255, 157, 91, .72);
      border-radius: 7px;
      padding: 12px 20px;
      color: #fff5ee;
      background: rgba(239, 116, 53, .82);
      font-size: 14px;
      font-weight: 650;
      letter-spacing: .01em;
      box-shadow: none;
      cursor: pointer;
      transition: background .2s ease, border-color .2s ease, transform .2s ease;
    }

    .pm-hero-sequence .primary-cta:hover {
      border-color: rgba(255, 180, 126, .9);
      background: rgba(239, 116, 53, .95);
      transform: translateY(-1px);
    }

    .secondary-cta {
      color: rgba(255, 173, 119, .86);
      text-decoration: none;
      font-size: 15px;
      font-weight: 650;
      white-space: nowrap;
      transition: color .2s ease;
    }

    .secondary-cta:hover {
      color: #fff0e6;
    }

    @media (max-width: 900px) {
      .hero-scene { min-height: 760px; }
      .top-nav { grid-template-columns: 1fr auto; }
      .navlinks { display: none; }
      .copy-layer, .stage3-copy { width: calc(100% - 48px); left: 24px; right: 24px; bottom: 56px; }
      .stage3-copy { top: 46vh; bottom: auto; }
      .phone-layer { width: 54vw; height: 38vw; left: 42vw; top: 24vh; bottom: auto; }
      .pm-hero-sequence h1,
      .pm-hero-sequence h2,
      .stage3-copy h2 { font-size: clamp(38px, 11vw, 44px); }
      .stage3-copy p:not(.eyebrow) { font-size: 15px; }
      .actions { gap: 14px; }
      .primary-cta { padding: 11px 16px; }
    }

    /*
     * The scroll-driven sequence needs a large, stable viewport. Compact
     * screens and reduced-motion users receive its final, static state.
     */
    @media (max-width: 900px) {
      .pm-hero-sequence { height: auto; }
      .hero-scene { position: relative; min-height: max(680px, 100svh); }
      .map-environment, .zoom-map-5, .phone-layer, .stage3-copy, .marker { opacity: 1; }
      .photo-layer { inset: 17% auto auto 7%; width: 33vw; height: 20vw; border-radius: 18px; border-width: 1px; }
      .stage1-copy, .stage2-copy, .zoom-map-1, .connector { display: none; }
    }

    /*
     * This is deliberately a separate composition, rather than a frozen
     * scroll stage. It preserves the information hierarchy without requiring
     * any animated state to have been reached first.
     */
    @media (prefers-reduced-motion: reduce) and (min-width: 901px) {
      .pm-hero-sequence {
        height: 100svh;
        min-height: 720px;
      }

      .hero-scene {
        position: relative;
        height: 100svh;
        min-height: 720px;
        background: #11110f;
      }

      .hero-scene::after {
        content: none;
      }

      .map-environment,
      .right-shade,
      .connector,
      .stage1-copy,
      .stage2-copy,
      .stage3-copy,
      .location-hint,
      .photo-card-meta,
      .marker { display: none; }

      .photo-layer {
        inset: 0;
        z-index: 1;
        width: 100%;
        height: 100%;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        opacity: 1;
        transform: none;
      }

      .photo-layer img { object-position: center 50%; }

      .ambient-layer {
        z-index: 20;
        background:
          linear-gradient(90deg, rgba(8, 10, 10, .8) 0%, rgba(8, 10, 10, .62) 35%, rgba(8, 10, 10, .1) 64%, rgba(8, 10, 10, .16) 100%),
          linear-gradient(0deg, rgba(8, 10, 10, .86) 0%, rgba(8, 10, 10, .24) 32%, rgba(8, 10, 10, .12) 100%);
      }

      .phone-layer {
        z-index: 38;
        top: auto;
        right: clamp(44px, 8.4vw, 142px);
        bottom: clamp(84px, 12vh, 120px);
        left: auto;
        width: min(548px, 35vw);
        height: min(620px, 45vw);
        opacity: 1;
        transform: none;
        filter: drop-shadow(0 30px 34px rgba(0, 0, 0, .58));
      }

      .phone-map {
        bottom: 16px;
        left: 0;
        width: 61%;
        transform: rotate(-3deg);
      }

      .phone-detail {
        right: 0;
        width: 62%;
        transform: translateY(-3%) rotate(2.1deg);
      }

      .static-hero-copy {
        position: absolute;
        z-index: 45;
        bottom: clamp(130px, 23vh, 216px);
        left: clamp(48px, 7vw, 116px);
        display: block;
        width: min(760px, 52vw);
        opacity: 1;
      }

      .static-hero-copy h2 {
        max-width: 800px;
        font-size: clamp(58px, 5.05vw, 84px);
        line-height: .95;
      }

      .static-hero-copy > p:not(.eyebrow) {
        max-width: 550px;
        margin: 24px 0 0;
        color: rgba(243, 238, 231, .76);
        font-size: clamp(16px, 1.22vw, 20px);
        line-height: 1.5;
      }

      .static-hero-copy .primary-cta {
        display: inline-flex;
        align-items: center;
        gap: 16px;
        margin-top: 34px;
        padding: 16px 34px;
        font-size: 17px;
        text-decoration: none;
      }
    }

    @media (max-width: 900px) {
      .hero-scene { min-height: max(620px, 100svh); }
      .photo-layer { inset: 12vh auto auto 7vw; width: 58vw; height: 35vw; }
      .phone-layer { display: none; }
      .stage3-copy { top: auto; bottom: 52px; }
      .stage3-copy h2 { font-size: clamp(40px, 11vw, 54px); }
    }

    /* Mobile is a dedicated static hero, rather than a compressed scroll stage. */
    @media (max-width: 900px) {
      .pm-hero-sequence { height: 100svh; min-height: 680px; }

      .hero-scene {
        min-height: 680px;
        height: 100svh;
        background: #101312;
      }

      .map-environment,
      .right-shade,
      .connector,
      .stage1-copy,
      .stage2-copy,
      .stage3-copy,
      .location-hint,
      .photo-card-meta,
      .marker { display: none; }

      .photo-layer {
        inset: 0;
        z-index: 1;
        width: 100%;
        height: 100%;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        opacity: 1;
        transform: none;
      }

      .photo-layer img { object-position: 52% center; }

      .ambient-layer {
        z-index: 20;
        background:
          linear-gradient(180deg, rgba(7, 9, 9, .28) 0%, rgba(7, 9, 9, .08) 24%, rgba(7, 9, 9, .66) 58%, rgba(7, 9, 9, .96) 100%),
          linear-gradient(90deg, rgba(7, 9, 9, .36), rgba(7, 9, 9, .04) 84%);
      }

      .static-hero-copy {
        position: absolute;
        z-index: 45;
        right: 24px;
        bottom: max(42px, env(safe-area-inset-bottom));
        left: 24px;
        display: block;
        width: auto;
        opacity: 1;
      }

      .static-hero-copy .eyebrow {
        margin-bottom: 12px;
        font-size: 10px;
        letter-spacing: .14em;
      }

      .static-hero-copy h2 {
        max-width: 510px;
        font-size: clamp(36px, 9.7vw, 42px);
        font-weight: 500;
        line-height: .98;
      }

      .static-hero-copy > p:not(.eyebrow) {
        max-width: 450px;
        margin-top: 16px;
        color: rgba(243, 238, 231, .78);
        font-size: 15px;
        line-height: 1.47;
      }

      .static-hero-copy .primary-cta {
        display: flex;
        justify-content: center;
        width: 100%;
        margin-top: 24px;
        padding: 15px 20px;
        font-size: 15px;
        text-decoration: none;
      }
    }