/* Sanctuary Retreat — exported from Figma "GRIGOLETTO — 56 templates", page "53 — Sanctuary Retreat".
   Desktop (>=1100px): every layer is a 1440x810 design canvas scaled by --u and anchored to a viewport edge,
   so the inner coordinates below are Figma pixels. Steps 1–4 = Screen 01–04; transitions recreate Smart Animate. */

:root {
  --u: 1;
  --ease: cubic-bezier(.65, .05, .25, 1);
  --dur: 1.1s;
  --ink: #fff;
  --muted: #e7e2e0;
  --gold: #facf78;
  --dark: #1e1711;
  --glass: rgba(255, 236, 197, .07);
  --glass-strong: rgba(255, 236, 197, .13);
  --glass-pill: rgba(255, 236, 197, .2);
  --page: #1d1917;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--page); }
body {
  color: var(--ink);
  font-family: "Nanum Gothic", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
}
img { display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, ol { margin: 0; padding: 0; }
ol { list-style: none; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ---------- Scroll scene ---------- */
.hero { position: relative; height: 400vh; height: 400svh; }
.pinned .hero { height: 100vh; height: 100svh; }
.stage {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: hidden;
  background: var(--page);
  isolation: isolate;
}

/* Anchored design layers */
.layer { position: absolute; width: 1440px; height: 810px; transform: scale(var(--u)); pointer-events: none; }
.layer > * { pointer-events: auto; }
.l-tl { left: 0; top: 0; transform-origin: 0 0; }
.l-tc { left: calc(50% - 720px); top: 0; transform-origin: 50% 0; }
.l-tr { right: 0; top: 0; transform-origin: 100% 0; }
.l-c  { left: calc(50% - 720px); top: calc(50% - 405px); transform-origin: 50% 50%; }
.l-r  { right: 0; top: calc(50% - 405px); transform-origin: 100% 50%; }
.l-bl { left: 0; bottom: 0; transform-origin: 0 100%; }
.l-bc { left: calc(50% - 720px); bottom: 0; transform-origin: 50% 100%; }
.l-br { right: 0; bottom: 0; transform-origin: 100% 100%; }

/* Shared motion: hidden by default, each step reveals its own elements */
.title, .lodges, .species, .stat, .feature, .intro, .gallery__img, .dots, .cue, .nav {
  transition:
    opacity calc(var(--dur) * .8) var(--ease),
    transform var(--dur) var(--ease),
    visibility 0s linear var(--dur);
}

/* ---------- Backdrops ---------- */
.backdrops { position: absolute; inset: 0; }
.bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transform-origin: 0 0;
  transition: opacity 1.2s var(--ease), transform 1.7s var(--ease);
  will-change: transform, opacity;
}
.bg-lodge  { transform: translate(-3%, -3%) scale(1.06); }
.bg-valley { opacity: 0; transform: none; }
.bg-peak   { opacity: 0; transform: translate(-12.5%, -8.75%) scale(1.25); }
.bg-wide   { opacity: 0; transform: none; }

[data-step="1"] .bg-lodge, [data-step="2"] .bg-lodge { transform: none; }
[data-step="3"] .bg-lodge, [data-step="4"] .bg-lodge { opacity: 0; transform: translate(-68.6%, -59.5%) scale(2.4); }
[data-step="3"] .bg-valley { opacity: 1; transform: translate(-13.889%, -1.605%) scale(1.2785); }
[data-step="4"] .bg-valley { opacity: 0; transform: translate(-45%, -31.5%) scale(1.9); }
[data-step="4"] .bg-peak   { opacity: 1; transform: none; }

/* Camera-move video (Figma Screen 05). Added by JS; the images above stay for ?still QA,
   reduced motion and as a fallback if the video can't play. */
.bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.bg-video.is-on { opacity: 1; }
.has-video .bg { visibility: hidden; }

/* Figma "Star 1": dark star, layer blur 400 */
.shade { position: absolute; left: -528px; top: 128px; width: 1200px; height: 1200px; filter: blur(200px); transition: transform 1.4s var(--ease); }
.shade__star {
  width: 100%; height: 100%; background: #20160f;
  clip-path: polygon(50% 0, 61.23% 34.55%, 97.55% 34.55%, 68.17% 55.9%, 79.39% 90.45%, 50% 69.1%, 20.61% 90.45%, 31.83% 55.9%, 2.45% 34.55%, 38.77% 34.55%);
  transition: background-color 1.4s var(--ease);
}
[data-step="3"] .shade__star { background: #211f0e; }
[data-step="4"] .shade { transform: translate(-33px, 40px); }
[data-step="4"] .shade__star { background: #181a1d; }

/* ---------- Titles: Figma's own outlines ("Marko"), placed at their render bounds ---------- */
.title { position: absolute; inset: 0; opacity: 0; visibility: hidden; }
.title .line { position: absolute; display: block; max-width: none; }

.t-sanctuary { transform: translateY(30px); transform-origin: 712px 340px; }
.t-sanctuary .l1 { left: 89.93px; top: 151.36px; }
.t-sanctuary .l2 { left: 332.74px; top: 290.87px; }

/* Screen 03 size; Screen 02 is the same layer at 60.6/142 scale inside the window */
.t-elevation {
  inset: auto; left: 413.51px; top: 231.14px; width: 600px; height: 210px;
  transform-origin: 0 0;
  transform: translate(171.49px, 59.86px) scale(.4268);
}
.t-elevation .l1 { left: 0; top: 0; }
.t-elevation .l2 { left: 23.48px; top: 110.98px; }

.t-moonlight { transform: translateX(-80px); } /* enters from its Screen 05 position */
.t-moonlight .l1 { left: 162px; top: 120.86px; }
.t-moonlight .l2 { left: 162px; top: 232px; }

[data-step="1"] .t-sanctuary { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
[data-step="2"] .t-sanctuary, [data-step="3"] .t-sanctuary, [data-step="4"] .t-sanctuary { transform: scale(.55); }
/* Outgoing titles fade quickly so they never overlap the incoming one */
[data-step="2"] .t-sanctuary, [data-step="1"] .t-elevation, [data-step="3"] .t-moonlight {
  transition: opacity .45s var(--ease), transform var(--dur) var(--ease), visibility 0s linear .45s;
}
[data-step="4"] .t-elevation {
  transition: opacity .7s cubic-bezier(.7, 0, .9, .5), transform .7s cubic-bezier(.55, 0, .85, .35), visibility 0s linear .7s;
}
[data-step="2"] .t-elevation { opacity: 1; visibility: visible; transition-delay: .35s, 0s, 0s; }
[data-step="3"] .t-elevation { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
/* Screen 05 zoom-through: the title flies past the viewer (~8x in .7s) before Moonlight lands */
[data-step="4"] .t-elevation { transform: translate(300px, 105px) scale(8) translate(-300px, -105px); }
[data-step="4"] .t-moonlight {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .45s var(--ease) .65s, transform .7s var(--ease) .6s, visibility 0s linear 0s;
}

/* ---------- Destinations list ---------- */
.lodges { position: absolute; left: 0; top: 0; opacity: 0; visibility: hidden; transform: translateY(40px); }
.lodge { position: absolute; left: 82px; width: 310px; height: 229px; transition: opacity var(--dur) var(--ease); }
.lodge[data-i="1"] { top: 505px; }
.lodge[data-i="2"] { top: 771px; opacity: .2; }
.lodge[data-i="3"] { top: 1037px; opacity: .2; }
.lodge__num { position: absolute; left: .34px; top: -.53px; }
.lodge[data-i="1"] .lodge__num { left: 5.33px; top: -.35px; }
.lodge__num img, .species__num img, .stat__value img { display: block; }
.lodge__rail, .species__rail {
  position: absolute; width: 1px; opacity: .4;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 50%, rgba(255, 255, 255, 0));
}
.lodge__rail { left: 17px; top: 26px; height: 203px; }
.lodge__title, .species__title, .stat__title, .feature__title {
  font-weight: 700; font-size: 16px; line-height: 22.4px; text-transform: uppercase; white-space: nowrap;
}
.lodge__title { position: absolute; left: 69px; top: .44px; }
.lodge__text, .species__text, .feature__text, .intro {
  font-size: 14px; line-height: 19.6px; letter-spacing: -.56px; color: var(--muted);
}
.lodge__text { position: absolute; left: 69px; top: 59px; width: 241px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 51px; padding: 0 20px; border-radius: 8px;
  background: var(--gold); color: var(--dark);
  font-weight: 700; font-size: 14px; line-height: 14px; white-space: nowrap;
  transition: opacity var(--dur) var(--ease), background-color .25s, transform .25s;
}
.btn:hover { background: #ffdc93; }
.lodge__btn { position: absolute; left: 70px; top: 145px; }

[data-step="1"] .lodges, [data-step="3"] .lodges, [data-step="4"] .lodges { opacity: 1; visibility: visible; transition-delay: 0s; }
[data-step="1"] .lodges, [data-step="2"] .lodges { transform: none; }
[data-step="3"] .lodges { transform: translateY(-264px); }
[data-step="4"] .lodges { transform: translateY(-528px); }
[data-step="3"] .lodge[data-i="1"] { opacity: .2; }
[data-step="3"] .lodge[data-i="2"] { opacity: 1; }
[data-step="4"] .lodge[data-i="1"] { opacity: .1; }
[data-step="4"] .lodge[data-i="3"] { opacity: 1; }
[data-step="3"] .lodge[data-i="1"] .btn,
[data-step="4"] .lodge[data-i="1"] .btn,
[data-step="4"] .lodge[data-i="2"] .btn { opacity: 0; pointer-events: none; }

/* Screen 02 list variant */
.species { position: absolute; inset: 0; opacity: 0; visibility: hidden; }
.species > * { position: absolute; }
.species__num.n1 { left: 83.17px; top: 504.65px; }
.species__num.n2 { left: 82.59px; top: 744.06px; opacity: .6; }
.species__num.n3 { left: 83.5px; top: 838px; opacity: .2; }
.species__rail.r1 { left: 90px; top: 531px; height: 203px; }
.species__rail.r2 { left: 89px; top: 763px; height: 67px; opacity: .1; }
.species__title { left: 141px; top: 505.44px; }
.species__text { left: 141px; top: 564px; width: 241px; }
.species__btn { left: 142px; top: 650px; }
[data-step="2"] .species { opacity: 1; visibility: visible; transition-delay: 0s; }

/* ---------- Glass cards ---------- */
.glass {
  background: var(--glass);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.stat, .feature {
  position: absolute; border-radius: 12px; overflow: hidden;
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  opacity: 0; visibility: hidden; transform: translateY(60px);
}
.stat { left: 957px; top: 634px; width: 459px; height: 289px; }
.stat > * { position: absolute; }
.stat__title { left: 33px; top: 44.44px; height: 46px; width: 200px; }
.stat__title .sw { position: absolute; left: 0; top: 0; transition: opacity .6s var(--ease); }
.stat__title .b { opacity: 0; }
[data-step="2"] .stat__title .a { opacity: 0; }
[data-step="2"] .stat__title .b { opacity: 1; }
/* "54%" in PP Monument Extended: Figma outlines; the "4" sits in its clip box and rolls up into place */
.stat__value { left: 0; top: 0; }
.stat__value > span { position: absolute; }
.d5 { left: 310px; top: 47.59px; }
.d4box { left: 353.1px; top: 43px; width: 41px; height: 35px; overflow: hidden; }
.d4 { position: absolute; left: 0; top: 0; transform: translateY(110%); transition: transform .9s var(--ease) .45s; }
.pct { left: 396.12px; top: 46.72px; }
.stat__avatars { left: 33px; top: 123px; display: flex; gap: 6px; }
.stat__avatars img { width: 33px; height: 33px; border-radius: 50%; object-fit: cover; }
.stat__avatars.alt { opacity: 0; }
.stat__arrow { left: 408px; top: 139px; width: 24px; height: 24px; transition: transform .3s var(--ease); }
.stat__arrow:hover { transform: translate(3px, -3px); }
.stat__arrow svg { display: block; overflow: visible; }
.stat__play { left: 377px; top: 208px; width: 66px; height: 66px; border-radius: 99px; background: rgba(255, 255, 255, .14); }

[data-step="1"] .stat, [data-step="2"] .stat { opacity: 1; visibility: visible; transform: none; transition-delay: .15s, .15s, 0s; }
[data-step="1"] .d4, [data-step="2"] .d4 { transform: none; }

.feature { left: 1078px; top: 381px; width: 342px; height: 409px; transform-origin: 0 0; }
.feature > * { position: absolute; }
.feature__img { left: 20px; top: 20px; width: 175px; height: 209px; border-radius: 9px; object-fit: cover; }
.feature__plus {
  left: 269px; top: 10px; width: 63px; height: 63px; border-radius: 50%;
  display: grid; place-items: center; background: var(--gold);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .08);
  transition: transform .3s var(--ease);
}
.feature__plus:hover { transform: rotate(90deg); }
.feature__title { left: 31px; top: 259.44px; }
.feature__text { left: 31px; top: 299px; width: 274px; }
/* Grows from / shrinks back to its Screen 05 state (76.6%, offset +76,+96) */
.feature { transform: translate(76px, 96px) scale(.766); }
[data-step="3"] .feature { opacity: 1; visibility: visible; transform: none; transition-delay: .25s, .25s, 0s; }

/* ---------- Step 4: intro + gallery ---------- */
.intro { position: absolute; left: 1081px; top: 152px; width: 272px; opacity: 0; visibility: hidden; transform: translateY(30px); }
.gallery { position: absolute; left: 945px; top: 318px; width: 495px; height: 273px; overflow: hidden; }
.gallery__track { display: flex; gap: 22px; transition: transform .8s var(--ease); }
.gallery__img {
  flex: none; width: 205px; height: 273px; border-radius: 12px; object-fit: cover;
  opacity: 0; visibility: hidden; transform: translateX(120px);
}
.dots { position: absolute; left: 945px; top: 618px; display: flex; gap: 12px; opacity: 0; visibility: hidden; }
.dot { width: 11px; height: 11px; border-radius: 50%; box-shadow: inset 0 0 0 1px #fff; transition: background-color .3s; }
.dot.is-on { background: #fff; }

[data-step="4"] .intro { opacity: 1; visibility: visible; transform: none; transition-delay: .35s, .35s, 0s; }
[data-step="4"] .gallery__img { opacity: 1; visibility: visible; transform: none; }
[data-step="4"] .gallery__img:nth-child(1) { transition-delay: .3s, .3s, 0s; }
[data-step="4"] .gallery__img:nth-child(2) { transition-delay: .38s, .38s, 0s; }
[data-step="4"] .gallery__img:nth-child(3) { transition-delay: .46s, .46s, 0s; }
[data-step="4"] .gallery__img:nth-child(4) { transition-delay: .54s, .54s, 0s; }
[data-step="4"] .dots { opacity: 1; visibility: visible; transition-delay: .6s, 0s, 0s; }

/* ---------- Scroll cue ---------- */
.cue { position: absolute; left: 624px; top: 733px; width: 34px; height: 57px; border-radius: 999px; box-shadow: inset 0 0 0 1px #fff; opacity: 0; visibility: hidden; }
.cue__dot { position: absolute; left: 14px; top: 40px; width: 5px; height: 5px; border-radius: 50%; background: #fff; animation: cue 2.2s var(--ease) infinite; }
@keyframes cue {
  0%, 15% { transform: none; opacity: 1; }
  60% { transform: translateY(-18px); opacity: 0; }
  61% { transform: none; opacity: 0; }
  100% { opacity: 1; }
}
[data-step="1"] .cue, [data-step="2"] .cue, [data-step="3"] .cue { opacity: 1; visibility: visible; transition-delay: 0s; }
[data-step="4"] .cue { transform: translateX(79px); } /* drifts toward its Screen 05 position as it leaves */

/* ---------- Header ---------- */
.logo { position: absolute; left: 24px; top: 20px; width: 30px; height: 45px; }
.logo img { width: 100%; height: 100%; object-fit: fill; }
.nav {
  position: absolute; top: 15px; display: flex; align-items: center;
  padding: 4px; border-radius: 12px;
}
.nav-a { left: 480px; height: 57px; font-family: "Nanum Gothic", sans-serif; }
.nav-b { left: 471px; height: 56px; font-family: "Parkinsans", sans-serif; opacity: 0; visibility: hidden; }
.nav__item {
  display: flex; align-items: center; height: 49px; padding: 0 20px; border-radius: 8px;
  font-size: 12px; line-height: 12px; white-space: nowrap; color: rgba(255, 255, 255, .6);
  transition: color .25s, background-color .25s;
}
.nav-b .nav__item { height: 48px; line-height: 16.8px; }
.nav__item:hover { color: #fff; }
.nav__item.is-on { background: var(--glass-pill); color: #fff; }
.nav__search { display: grid; place-items: center; width: 56px; height: 30px; border-radius: 8px; }
[data-step="2"] .nav-a, [data-step="3"] .nav-a, [data-step="4"] .nav-a { opacity: 0; visibility: hidden; }
[data-step="2"] .nav-b, [data-step="3"] .nav-b, [data-step="4"] .nav-b { opacity: 1; visibility: visible; transition-delay: 0s; }

.menu-btn {
  position: absolute; left: 1360px; top: 15px; width: 56px; height: 56px; border-radius: 12px;
  display: grid; place-items: center; background: var(--glass);
  transition: background-color .25s;
}
.menu-btn:hover, .menu-btn[aria-expanded="true"] { background: var(--glass-pill); }
.menu {
  position: absolute; right: calc(24px * var(--u)); top: calc(80px * var(--u));
  display: grid; padding: 8px; border-radius: 12px; min-width: 200px; z-index: 5;
  background: rgba(40, 32, 26, .55);
}
.menu[hidden] { display: none; }
.menu a { padding: 12px 16px; border-radius: 8px; font-family: "Parkinsans", sans-serif; font-size: 14px; }
.menu a:hover { background: var(--glass-pill); }

/* ---------- Step 5 = Figma "Screen 05" (the ANIMATION frame) ----------
   Reference only (?step=5): every layer of the scene at once, with the in-between offsets the
   designer left on it — Moonlight -80px, feature card at 76.6% (+76,+96), scroll cue +79px.
   Those offsets are reused as the "from" positions of the step transitions above. */
[data-step="5"] .bg-lodge { opacity: 0; transform: none; }
[data-step="5"] .bg-wide { opacity: 1; }
[data-step="5"] .title, [data-step="5"] .lodges, [data-step="5"] .stat, [data-step="5"] .feature,
[data-step="5"] .intro, [data-step="5"] .gallery__img, [data-step="5"] .dots, [data-step="5"] .cue {
  opacity: 1; visibility: visible; transform: none; transition-delay: 0s;
}
[data-step="5"] .t-moonlight { transform: translateX(-80px); }
[data-step="5"] .feature { transform: translate(76px, 96px) scale(.766); }
[data-step="5"] .cue { transform: translateX(79px); }
[data-step="5"] .d4 { transform: none; }
[data-step="5"] .stat__avatars { opacity: 0; }
[data-step="5"] .stat__avatars.alt { opacity: 1; }
[data-step="5"] .l-cards { z-index: 1; }

/* ---------- Film: Screen 05 played as designed (on landing, via Replay, or ?film) ---------- */
.film-reset *, .film-reset *::before, .film-reset *::after { transition: none !important; }
.replay {
  position: absolute; left: 1214px; top: 23px; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 999px;
  font-family: "Parkinsans", sans-serif; font-size: 13px; color: rgba(255, 255, 255, .8);
  background: var(--glass);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: background-color .25s, color .25s;
}
.replay[hidden] { display: none; }
.replay:hover { background: var(--glass-pill); color: #fff; }

/* ---------- QA freeze (?step=N&still) and reduced motion ---------- */
.still *, .still *::before, .still *::after { transition: none !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01s !important; animation: none !important; }
  .bg, .title, .lodges, .species, .stat, .feature, .intro, .gallery__img, .dots, .cue, .nav { transition-duration: .4s !important; }
}

/* =====================================================================
   Compact layout (< 1100px): tablets and phones. Layers stop scaling and
   every block is laid out in viewport units instead of design pixels.
   --tfs: title size, --ttop: title top; step-4 content flows below the title.
   ===================================================================== */
@media (max-width: 1099px) {
  :root { --tfs: clamp(48px, min(14vw, 15svh), 132px); --ttop: 13svh; --intro-top: calc(var(--ttop) + var(--tfs) * 2.1 + 18px); }
  .layer { width: 100%; height: 100%; left: 0; top: 0; right: auto; bottom: auto; transform: none; }

  /* Header */
  .logo { left: 20px; top: 18px; }
  .nav { display: none; }
  .menu-btn { left: auto; right: 16px; top: 16px; width: 48px; height: 48px; }
  .replay { left: auto; right: 76px; top: 20px; padding: 0 14px; }
  .menu { right: 16px; top: 76px; }

  /* Shade becomes a soft gradient (cheaper than a 200px blur on mobile GPUs) */
  .shade { display: none; }
  .backdrops::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(20, 15, 11, .82) 0%, rgba(20, 15, 11, .35) 42%, rgba(20, 15, 11, 0) 60%),
                linear-gradient(to bottom, rgba(20, 15, 11, .45), rgba(20, 15, 11, 0) 22%);
  }

  /* Titles */
  .title { inset: auto; left: 0; right: 0; top: var(--ttop); height: auto; width: auto; text-align: center; font-size: var(--tfs); }
  .title .line { position: static; display: block; width: auto; height: calc(var(--tfs) * var(--h, .72)); margin: 0 auto; }
  .title .l2 { margin-top: calc(var(--tfs) * .1); }
  .t-sanctuary { transform-origin: 50% 40%; }
  .t-sanctuary .l1 { --h: .8; }
  .t-sanctuary .l2 { --h: .78; }
  .t-moonlight .line { margin: 0; }
  .t-moonlight .l2 { --h: .78; margin-top: calc(var(--tfs) * .1); }
  .t-elevation { transform-origin: 50% 50%; transform: translateY(18svh) scale(.42); }
  [data-step="4"] .t-elevation { transform: scale(6); }
  .t-moonlight { left: 20px; right: 20px; text-align: left; }

  /* Destinations: only the active one, pinned to the bottom */
  .lodges, .species { left: 20px; right: 20px; top: auto; bottom: 32px; height: 230px; }
  .lodge { left: 0; right: 0; top: 0 !important; width: auto; height: 100%; }
  .lodge[data-i="2"], .lodge[data-i="3"] { opacity: 0; }
  [data-step="3"] .lodges, [data-step="4"] .lodges { transform: none; }
  [data-step="3"] .lodge[data-i="1"], [data-step="4"] .lodge[data-i="1"], [data-step="4"] .lodge[data-i="2"] { opacity: 0; pointer-events: none; }
  [data-step="3"] .lodge[data-i="2"], [data-step="4"] .lodge[data-i="3"] { opacity: 1; }
  .lodge__text, .species__text { width: min(260px, calc(100% - 69px)); }
  .species__num.n1 { left: 5.33px; top: -.35px; }
  .species__rail.r1 { left: 17px; top: 26px; }
  .species__title { left: 69px; top: .44px; }
  .species__text { left: 69px; top: 59px; }
  .species__btn { left: 70px; top: 145px; }
  .species__num.n2, .species__num.n3, .species__rail.r2 { display: none; }

  /* Cards sit bottom-right (hidden on phones) */
  .stat, .feature { left: auto; right: 24px; top: auto; bottom: 24px; }
  .stat { width: 340px; height: 176px; }
  .stat__value { left: -110px; }
  .stat__arrow { left: 296px; }
  .stat__play { display: none; }
  .feature { width: 300px; height: 380px; }
  .feature__img { width: 160px; height: 190px; }
  .feature__plus { left: 225px; }
  .feature__title { top: 236px; }
  .feature__text { top: 274px; width: 250px; }

  /* Step 4 */
  .intro { left: 20px; right: 20px; top: var(--intro-top); width: auto; max-width: 420px; }
  .gallery { left: 20px; right: 0; top: calc(var(--intro-top) + 112px); width: auto; height: 200px; }
  .gallery__track { gap: 14px; }
  .gallery__img { width: 150px; height: 200px; }
  .dots { left: 20px; top: calc(var(--intro-top) + 328px); }

  .cue { left: calc(50% - 17px); top: auto; bottom: 28px; display: none; }
}

/* Tablet portrait */
@media (max-width: 1099px) and (min-width: 700px) {
  .lodges, .species { right: auto; width: 340px; }
  .cue { display: block; }
  .gallery { height: 220px; }
  .gallery__img { width: 165px; height: 220px; }
  .dots { top: calc(var(--intro-top) + 346px); }
}

/* Tablet landscape: the gallery moves to the bottom-right, beside the destination */
@media (max-width: 1099px) and (min-width: 700px) and (min-aspect-ratio: 1/1) {
  :root { --ttop: 12svh; }
  .gallery { left: 50%; top: auto; bottom: 32px; height: 230px; }
  .gallery__img { width: 172px; height: 230px; }
  .dots { left: 50%; top: auto; bottom: 280px; }
  .cue { display: none; }
}

/* Phones */
@media (max-width: 699px) {
  .stat, .feature { display: none; }
  [data-step="4"] .lodges { opacity: 0; visibility: hidden; }
}
@media (max-width: 699px) and (max-height: 760px) {
  .intro { display: none; }
  .gallery { top: calc(var(--intro-top) - 4px); }
  .dots { top: calc(var(--intro-top) + 212px); }
}