/*
 * v12 /destinations mockup: every section except the scroll journey (journey.css).
 * Ports to CSS modules per section (PORT_SPEC.md section 3).
 *
 * THE CONTRACT (the home hero's and the travelers journey's)
 * - Base styles ARE each animation's end state, the poster. No JS, print and
 *   prefers-reduced-motion get complete, still pictures.
 * - Every keyframe and transition that moves something lives inside the
 *   @media (prefers-reduced-motion: no-preference) blocks.
 * - The stages scale to their room in CSS (the shared measured-scale hook), so nothing is measured
 *   in script and nothing shifts after paint.
 */

:root {
  --ink: #353b41; --ink2: #1e2422; --body: #4a3b35; --meta: #6e645a; --almond: #fbf7f4; --tint: #f3eae2;
  --line: #eae3da; --line2: #dcd4c4; --red: #cd4939; --red-t: #b73d2e; --near: #33302b; --forest: #465a3f;
  --ease: cubic-bezier(.22, 1, .36, 1); --io: cubic-bezier(.65, 0, .35, 1); --pop: cubic-bezier(.2, .9, .3, 1.25);
}
html { scroll-padding-top: 5rem; }
.dmain { overflow-x: clip; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: .875rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(53, 59, 65, .8); }
.eyebrow span { width: 6px; height: 6px; border-radius: 50%; background: var(--red); }
.ic { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.btn { display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 24px; border-radius: 999px; font-size: 1rem; font-weight: 700; text-decoration: none; white-space: nowrap; transition: background-color 150ms, box-shadow 150ms; }
.btn-red { background: var(--red); color: #fff; box-shadow: 0 1px 2px rgba(51, 48, 43, .2); }
.btn-red:hover { background: #b9402f; }
.btn-line { color: var(--ink); box-shadow: inset 0 0 0 1.5px rgba(53, 59, 65, .3); }
.btn-line:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn-sm { height: 40px; padding: 0 18px; font-size: .9375rem; }
.btn .btn-ar { width: 16px; height: 16px; }
.btn:focus-visible, .tlink:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.tlink { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--ink); text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 4px; border-radius: 4px; }
.tlink .ic { width: 15px; height: 15px; }
.sec-h { margin: 14px 0 0; font-size: var(--text-display-lg); line-height: 1.06; letter-spacing: -.02em; font-weight: 800; color: var(--ink); text-wrap: balance; }
.sec-lead { margin: 14px 0 0; font-size: var(--text-lead, 1.2rem); line-height: 1.55; color: #6e645a; text-wrap: pretty; max-width: 36rem; }
.avail { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--line2); font-size: 12px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.avail i { width: 7px; height: 7px; border-radius: 50%; background: var(--forest); }

/* ======================================================================
 * THE PHONE (the home hero's recipe) and the Explore screen furniture
 * ==================================================================== */
.ph { position: absolute; width: 302px; height: 634px; padding: 4px; border-radius: 56px; transform-origin: 0 0;
  background: linear-gradient(150deg, #fbfaf8 0%, #dad5ce 40%, #f2efeb 62%, #c9c3bb 100%);
  box-shadow: 0 50px 90px -40px rgba(51, 48, 43, .55), 0 24px 40px -24px rgba(51, 48, 43, .35), 0 0 0 1px rgba(51, 48, 43, .12); }
.ph-bz { width: 100%; height: 100%; padding: 8px; border-radius: 52px; background: #121110; }
.scr { position: relative; width: 278px; height: 610px; overflow: hidden; border-radius: 44px; background: #f2eee5; isolation: isolate; font-size: 11px; line-height: 1.3; color: var(--ink2); }
.scr p { margin: 0; }
.scr-dk { background: #0f0f0f; color: #fff; }
.sb { position: absolute; z-index: 10; left: 0; right: 0; top: 0; height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 6px 24px 0 30px; font-size: 13px; font-weight: 700; color: #1d1b19; }
.scr-dk .sb, .sb.lt { color: #fff; }
.sb-i { display: flex; align-items: center; gap: 5px; }
.sb svg { height: 11px; width: auto; fill: currentColor; }
.isl { position: absolute; z-index: 11; left: 50%; top: 10px; width: 86px; height: 25px; margin-left: -43px; border-radius: 14px; background: #0c0b0a; }
.hb { position: absolute; z-index: 12; left: 50%; bottom: 7px; width: 104px; height: 4px; margin-left: -52px; border-radius: 3px; background: rgba(29, 27, 25, .8); }
.scr-dk .hb { background: rgba(255, 255, 255, .7); }
.sb-fade { position: absolute; z-index: 9; left: 0; right: 0; top: 0; height: 50px; background: linear-gradient(rgba(242, 238, 229, .92), rgba(242, 238, 229, 0)); pointer-events: none; }
.tb { position: absolute; z-index: 6; left: 12px; right: 12px; top: 48px; display: flex; align-items: center; gap: 8px; }
.fab { display: flex; width: 36px; height: 36px; flex: none; align-items: center; justify-content: center; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(51, 48, 43, .16); color: var(--ink); }
.fab .ic { width: 17px; height: 17px; }
.fab.red { background: var(--red); color: #fff; }
.srch { display: flex; height: 36px; flex: 1; min-width: 0; align-items: center; gap: 6px; padding: 0 12px; border-radius: 18px; background: #fff; box-shadow: 0 2px 8px rgba(51, 48, 43, .16); }
.srch .mag { width: 15px; height: 15px; color: #8a857e; stroke-width: 2.2; }
.srch .spk { width: 15px; height: 15px; flex: none; margin-left: auto; fill: var(--red); }
.srch-t { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 10.5px; font-weight: 600; color: #8a857e; }
.bb { position: absolute; z-index: 5; left: 14px; right: 14px; bottom: 22px; display: flex; justify-content: space-between; }
.sq { display: flex; width: 38px; height: 38px; align-items: center; justify-content: center; border-radius: 12px; background: #fff; box-shadow: 0 2px 8px rgba(51, 48, 43, .16); color: var(--ink); }
.sq.rd { border-radius: 50%; }

/* the map: the 900 x 2160 frame at the screen's width */
.mp { position: absolute; left: 0; top: -28.6px; width: 278px; height: 667.2px; }
.mp .tile { position: absolute; left: 0; width: 100%; max-width: none; }
.mp-l { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

/* pins: .pn is a zero-size anchor at the place (the hero's) */
.pn { position: absolute; z-index: 1; width: 0; height: 0; }
.pn-in { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.pn-h { position: absolute; left: -17px; top: -42px; width: 34px; height: 34px; padding: 2.5px; border-radius: 50%; background: #fff; box-shadow: 0 5px 12px -4px rgba(29, 27, 25, .45), 0 0 0 .5px rgba(29, 27, 25, .12); }
.pn-h img, .pn-h .gd { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.gd { display: flex; align-items: center; justify-content: center; border-radius: 50%; }
.gd svg { width: 54%; height: 54%; fill: #fff; }
.pn-tip { position: absolute; left: -6px; top: -10px; width: 12px; height: 10px; background: #fff; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.pn-rip { position: absolute; left: -14px; top: -7px; width: 28px; height: 14px; border: 2px solid var(--red); border-radius: 50%; opacity: 0; }
.pn-l { position: absolute; left: 0; top: 4px; padding: 2px 7px; border-radius: 7px; background: #fff; box-shadow: 0 3px 8px -3px rgba(29, 27, 25, .35); font-size: 10px; font-weight: 700; color: #2a2724; white-space: nowrap; transform: translateX(-50%); }
.pn-l.l { left: -22px; top: -34px; transform: translateX(-100%); }
.pn-l.r { left: 22px; top: -36px; transform: none; }
.pn.big .pn-l.r { left: 26px; top: -44px; }
.dn-c { position: absolute; left: calc(var(--sz) / -2); top: calc(var(--sz) / -2); width: var(--sz); height: var(--sz); display: flex; align-items: center; justify-content: center; border-radius: 50%; box-shadow: 0 0 0 2px #fff, 0 4px 10px -3px rgba(29, 27, 25, .45); }
.dn-c::before { content: ""; position: absolute; inset: 22%; border-radius: 50%; background: #fff; }
.dn-c b { position: relative; font-size: 10.5px; font-weight: 800; color: #1c1917; }
.dn .pn-rip { left: -18px; top: -9px; width: 36px; height: 18px; }
.pn.big .pn-h { left: -22px; top: -52px; width: 44px; height: 44px; padding: 3px; }
.pn.big .pn-tip { left: -7px; top: -12px; width: 14px; height: 12px; }

/* the destination watermark (wander-mobile-mar DestinationWatermark.tsx) */
.wm { position: absolute; z-index: 7; left: 12px; right: 12px; bottom: 74px; display: flex; align-items: center; gap: 10px; padding: 11px 12px 11px 16px; border-radius: 18px; background: #fff; box-shadow: 0 18px 34px -14px rgba(29, 27, 25, .5), 0 0 0 1px rgba(29, 27, 25, .05); overflow: hidden; }
.wm-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 5px; }
.wm-logo { display: flex; width: 44px; height: 44px; flex: none; align-items: center; justify-content: center; border-radius: 12px; background: #f6f3ee; }
.wm-logo img { width: 36px; height: auto; }
.wm-t { display: flex; min-width: 0; flex-direction: column; }
.wm-e { font-size: 10px; font-weight: 500; color: #aaa; }
.wm-t b { font-size: 13.5px; font-weight: 800; line-height: 1.15; color: #111; letter-spacing: -.01em; white-space: nowrap; }
.wm-s { font-size: 10.5px; color: #999; }

/* ======================================================================
 * 1 · HERO
 * ==================================================================== */
.dh { position: relative; overflow: hidden; }
.dh::before { content: ""; position: absolute; right: -12%; top: -10%; width: 70%; height: 110%; z-index: -1; background: radial-gradient(closest-side, rgba(243, 234, 226, .9), rgba(243, 234, 226, 0)); pointer-events: none; }
.dh-grid { display: grid; gap: 28px; padding-top: 28px; padding-bottom: 8px; }
.dh-copy { display: flex; flex-direction: column; gap: 22px; }
.dh-copy h1 { margin: 0; color: var(--ink); text-wrap: balance; }
.dh-sub { margin: 0; max-width: 34rem; font-size: var(--text-lead, 1.2rem); line-height: 1.55; color: rgba(53, 59, 65, .8); text-wrap: pretty; }
.dh-btns { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 4px; }
.dh-room { --s: .8; position: relative; height: 31rem; }
.h-stage {
  --w: 360px; --h: 440px; --max: 1.15;
  position: absolute; left: 50%; top: calc(50% - 17px); width: var(--w); height: var(--h);
  margin: calc(var(--h) / -2) 0 0 calc(var(--w) / -2); transform: scale(var(--s)); transform-origin: 50% 50%;
}

.dh-foot { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 10px; justify-content: center; }
.dh-toggle { display: none; width: 30px; height: 30px; flex: none; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: #fff; color: var(--ink); box-shadow: 0 1px 4px rgba(51, 48, 43, .2), inset 0 0 0 1px var(--line); cursor: pointer; }
.dh-toggle .ic { width: 13px; height: 13px; }
.dh-toggle .i-play { display: none; }
[data-stopped] .dh-toggle .i-play { display: block; }
[data-stopped] .dh-toggle .i-pause { display: none; }
.dh-toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.dh-credit { margin: 0; font-size: 12px; font-weight: 600; color: #7a7066; text-align: center; text-wrap: balance; }

/* phones in the stage: main, then two that fan out behind it (sm layout first) */
.h-main { left: 150px; top: 6px; scale: .66; z-index: 3; }
.h-ea { left: 74px; top: 52px; scale: .5; rotate: -5deg; z-index: 2; }
.h-eb { left: 6px; top: 98px; scale: .44; rotate: -10deg; z-index: 1; }
.h-echo .scr::after { content: ""; position: absolute; inset: 0; z-index: 20; background: rgba(251, 247, 244, .08); pointer-events: none; }
@media (min-width: 1024px) {
  .dh-grid { grid-template-columns: minmax(0, 5.7fr) minmax(0, 6.3fr); align-items: center; gap: 24px; padding-top: 40px; padding-bottom: 20px; }
  .dh-room { --s: 1; height: 41rem; margin-right: -1rem; }
  .h-stage { --w: 640px; --h: 650px; --max: 1.08; }
  .h-main { left: 322px; top: 4px; scale: 1; }
  .h-ea { left: 160px; top: 70px; scale: .78; rotate: -4deg; }
  .h-eb { left: 14px; top: 132px; scale: .68; rotate: -9deg; }
}
@media (min-width: 1280px) { .dh-room { margin-right: -3rem; } }

/* main screen */
.h-scr { position: absolute; inset: 0; }
.h-map { transform-origin: 60% 45%; }
.h-trail { stroke-dasharray: 1; stroke-dashoffset: 0; }
/* the web screen: yosemite.com with its listing embed */
.ws { position: absolute; inset: 0; background: #fff; }
.ws-bar { position: absolute; left: 14px; right: 14px; top: 46px; height: 30px; display: flex; align-items: center; justify-content: center; gap: 5px; border-radius: 10px; background: #f1efec; font-size: 11px; font-weight: 600; color: #4a4642; }
.ws-lk { width: 11px; height: 11px; }
.ws-pg { position: absolute; left: 18px; right: 18px; top: 92px; display: flex; flex-direction: column; gap: 7px; }
.ws-k { font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #5d6a2a; }
.ws-h { margin: -2px 0 4px !important; font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: #1d1b19; }
.ws-ln { display: block; height: 7px; border-radius: 4px; background: #ece8e2; }
.ws-emb { position: relative; height: 250px; margin: 8px 0; overflow: hidden; border-radius: 12px; box-shadow: inset 0 0 0 1px #e3ddd4; }
.ws-cam { position: absolute; left: 0; top: 0; width: 242px; height: 250px; }
.ws-cam .mp { left: -305px; top: -517px; width: 556px; height: 1334.4px; }
.ws-chip { position: absolute; left: 10px; bottom: 10px; display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 10px; background: #fff; box-shadow: 0 6px 16px -6px rgba(29, 27, 25, .5); font-size: 11px; font-weight: 800; color: #1d1b19; }
.ws-chip i { width: 7px; height: 7px; border-radius: 50%; }
/* the trail screen: the Mist Trail */
.t-scr { position: absolute; inset: 0; background: #f2eee5; }
.t-cam { position: absolute; left: 0; top: 0; width: 278px; height: 610px; }
.t-cam .mp { left: -432px; top: -846px; width: 834px; height: 2001.6px; }
.tc { position: absolute; left: 12px; right: 12px; bottom: 28px; display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 18px; background: #fff; box-shadow: 0 16px 30px -14px rgba(29, 27, 25, .5); }
.tc-g { width: 38px; height: 38px; flex: none; }
.tc-t { display: flex; flex-direction: column; gap: 2px; }
.tc-t b { font-size: 15px; font-weight: 800; color: #111; }
.tc-t span { font-size: 11px; font-weight: 600; color: #8a857e; }

/* the fold-out paper map: four panels, each folding about its left edge (nested, preserve-3d) */
.pp { position: absolute; left: 0; top: 0; width: 600px; height: 330px; z-index: 6; transform-origin: 0 0;
  --px0: 8px; --py0: 62px; --ps0: .57; --px1: 147.9px; --py1: 9.9px; --ps1: 1.2233;
  translate: var(--px1) var(--py1); scale: var(--ps1); opacity: 0; perspective: 1800px; pointer-events: none; }
@media (min-width: 1024px) { .pp { --px0: 18px; --py0: 168px; --ps0: 1; --px1: 334px; --py1: 16px; --ps1: 1.8533; } }
.pp-f { position: absolute; top: 0; width: 150px; height: 330px; transform-style: preserve-3d; transform-origin: 0 50%; }
.p1 { left: 0; }
.p2, .p3, .p4 { left: 150px; }
.pp-face, .pp-back { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.pp-face { background: url(..//destinations/paper.webp) 0 0 / 600px 330px no-repeat; overflow: hidden; }
.pp-face > svg:not(.pp-n) { position: absolute; inset: 0; width: 100%; height: 100%; }
.pp-back { transform: rotateY(180deg); background: #efe6d4; box-shadow: inset 0 0 30px rgba(120, 90, 50, .18); }
.pp-sh { position: absolute; inset: 0; opacity: 0; background: linear-gradient(90deg, rgba(40, 28, 16, .35), rgba(40, 28, 16, 0) 60%); pointer-events: none; }
.p2 > .pp-face .pp-sh, .p4 > .pp-face .pp-sh { background: linear-gradient(90deg, rgba(255, 250, 240, .25), rgba(40, 28, 16, .3)); }
.pp-face::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 1px; background: linear-gradient(rgba(120, 90, 50, .0), rgba(120, 90, 50, .28) 30%, rgba(120, 90, 50, .28) 70%, rgba(120, 90, 50, 0)); }
.pp-lab { font-size: 9.5px; font-weight: 800; fill: #2c2620; paint-order: stroke; stroke: rgba(255, 250, 240, .85); stroke-width: 3px; letter-spacing: .01em; }
.pp-riv { font-size: 8.5px; font-style: italic; font-weight: 700; fill: #2f6f9c; paint-order: stroke; stroke: rgba(255, 250, 240, .7); stroke-width: 2.5px; letter-spacing: .08em; }
.pp-title { position: absolute; left: 10px; top: 10px; display: flex; align-items: center; gap: 7px; padding: 7px 9px 7px 7px; border-radius: 4px; background: rgba(255, 251, 243, .94); box-shadow: 0 1px 0 rgba(120, 90, 50, .3); }
.pp-title img { width: 30px; height: auto; }
.pp-title span { display: flex; flex-direction: column; }
.pp-title b { font-size: 11px; font-weight: 800; letter-spacing: -.01em; color: #2c2620; line-height: 1.1; }
.pp-title small { font-size: 7.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #6b5d2b; }
.pp-leg { position: absolute; right: 8px; bottom: 8px; display: flex; flex-direction: column; gap: 3px; padding: 6px 8px; border-radius: 3px; background: rgba(255, 251, 243, .92); font-size: 7.5px; font-weight: 700; color: #2c2620; }
.pp-leg span { display: flex; align-items: center; gap: 4px; }
.pp-leg i { width: 6px; height: 6px; border-radius: 50%; }
.pp-n { position: absolute; right: 12px; top: 12px; width: 16px; height: 16px; fill: #2c2620; }
.pp-shadow { position: absolute; left: 4%; right: 4%; bottom: -16px; height: 26px; border-radius: 50%; background: rgba(51, 48, 43, .35); filter: blur(12px); z-index: -1; }

/* ======================================================================
 * MOTION: hero (14 s loop). Outside this block the hero is its poster.
 * ==================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .dh-toggle { display: inline-flex; }
  .h-a, .h-a .pp-f, .h-a .pp-sh, .h-scr > *, .h-pin .pn-in, .h-pin .pn-rip, .h-pin .pn-l, .h-trail {
    animation-duration: 14s; animation-timing-function: linear; animation-iteration-count: infinite; animation-fill-mode: both; }
  [data-hero-demo][data-paused] :is(.h-a, .h-a .pp-f, .h-a .pp-sh, .h-scr > *, .h-pin .pn-in, .h-pin .pn-rip, .h-pin .pn-l, .h-trail) { animation-play-state: paused; }
  [data-hero-demo][data-stopped] :is(.h-a, .h-a .pp-f, .h-a .pp-sh, .h-scr > *, .h-pin .pn-in, .h-pin .pn-rip, .h-pin .pn-l, .h-trail) { animation: none; }
  .pp.h-a { animation-name: pp-fly; }
  .h-a .p2 { animation-name: fold-a; }
  .h-a .p3 { animation-name: fold-b; }
  .h-a .p4 { animation-name: fold-a; }
  .h-a .pp-sh { animation-name: fold-sh; }
  .h-main.h-a { animation-name: ph-in; }
  .h-scr > * { animation-name: scr-in; }
  .h-scr > .h-map { animation-name: cam-in; }
  .h-scr > .h-wm { animation-name: wm-in; }
  .h-pin .pn-in { animation-name: pin-drop; animation-delay: calc(var(--i) * .13s); }
  .h-pin .pn-rip { animation-name: pin-rip; animation-delay: calc(var(--i) * .13s); }
  .h-pin .pn-l { animation-name: pin-lab; }
  .h-trail { animation-name: trail-draw; }
  .h-ea.h-a { animation-name: echo-a; }
  .h-eb.h-a { animation-name: echo-b; }
}
/* 0-9 the paper map lies open · 9-25 it folds · 22-30 the phone arrives · 26-36 the folded map drops
   into it · 36-44 the map settles · 41-47 "You've wandered into" · 46-58 pins · 52-62 the Mist Trail ·
   60-70 two more phones fan out · hold to 88 · 88-93 clear · 93-100 the paper opens again */
@keyframes pp-fly {
  0%, 9% { opacity: 1; translate: var(--px0) var(--py0); scale: var(--ps0); rotate: -3deg; }
  25% { opacity: 1; translate: var(--px0) var(--py0); scale: var(--ps0); rotate: -3deg; animation-timing-function: cubic-bezier(.5, 0, .25, 1); }
  35% { opacity: 1; translate: var(--px1) var(--py1); scale: var(--ps1); rotate: 0deg; }
  37.5% { opacity: 0; translate: var(--px1) var(--py1); scale: var(--ps1); rotate: 0deg; }
  92% { opacity: 0; translate: var(--px0) var(--py0); scale: var(--ps0); rotate: -3deg; }
  96%, 100% { opacity: 1; translate: var(--px0) var(--py0); scale: var(--ps0); rotate: -3deg; }
}
@keyframes fold-a { 0%, 9% { transform: rotateY(0deg); } 24% { transform: rotateY(178deg); animation-timing-function: linear; } 92% { transform: rotateY(178deg); } 93%, 100% { transform: rotateY(0deg); } }
@keyframes fold-b { 0%, 9% { transform: rotateY(0deg); } 24% { transform: rotateY(-178deg); } 92% { transform: rotateY(-178deg); } 93%, 100% { transform: rotateY(0deg); } }
@keyframes fold-sh { 0%, 9% { opacity: 0; } 17% { opacity: 1; } 24%, 100% { opacity: 0; } }
@keyframes ph-in {
  0%, 22% { opacity: 0; translate: 0 26px; }
  30% { opacity: 1; translate: 0 0; animation-timing-function: linear; }
  88% { opacity: 1; translate: 0 0; } 92%, 100% { opacity: 0; translate: 0 0; }
}
@keyframes scr-in { 0%, 35% { opacity: 0; } 38.5% { opacity: 1; } 88% { opacity: 1; } 91%, 100% { opacity: 0; } }
@keyframes cam-in { 0%, 35% { opacity: 0; transform: scale(1.12); } 38.5% { opacity: 1; animation-timing-function: var(--ease); } 46% { transform: scale(1); } 88% { opacity: 1; transform: scale(1); } 91%, 100% { opacity: 0; } }
@keyframes wm-in {
  0%, 41% { opacity: 0; transform: translateY(130%); }
  44.5% { opacity: 1; transform: translateY(-6%); } 46.5% { transform: translateY(0); }
  88% { opacity: 1; transform: translateY(0); } 91%, 100% { opacity: 0; transform: translateY(0); }
}
@keyframes pin-drop {
  0%, 46% { opacity: 0; transform: translateY(-14px) scale(.55); }
  47.5% { opacity: 1; transform: translateY(2px) scale(1.06); animation-timing-function: ease-out; }
  49% { opacity: 1; transform: none; } 88% { opacity: 1; transform: none; } 91%, 100% { opacity: 0; transform: scale(.9); }
}
@keyframes pin-rip { 0%, 47% { opacity: 0; transform: scale(.3); } 48% { opacity: .7; transform: scale(.6); } 53%, 100% { opacity: 0; transform: scale(1.9); } }
@keyframes pin-lab { 0%, 53% { opacity: 0; margin-top: -4px; } 56% { opacity: 1; margin-top: 0; } 88% { opacity: 1; } 91%, 100% { opacity: 0; } }
@keyframes trail-draw { 0%, 52% { stroke-dashoffset: 1; } 62% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; } }
@keyframes echo-a {
  0%, 60% { opacity: 0; translate: 120px 0; }
  61% { opacity: 1; translate: 120px 0; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  68% { opacity: 1; translate: 0 0; } 88% { opacity: 1; translate: 0 0; } 92%, 100% { opacity: 0; translate: 0 0; }
}
@keyframes echo-b {
  0%, 63% { opacity: 0; translate: 220px 0; }
  64% { opacity: 1; translate: 220px 0; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  71% { opacity: 1; translate: 0 0; } 88% { opacity: 1; translate: 0 0; } 92%, 100% { opacity: 0; translate: 0 0; }
}
@media (max-width: 1023px) {
  @keyframes echo-a { 0%, 60% { opacity: 0; translate: 70px 0; } 61% { opacity: 1; translate: 70px 0; animation-timing-function: cubic-bezier(.22, 1, .36, 1); } 68% { opacity: 1; translate: 0 0; } 88% { opacity: 1; translate: 0 0; } 92%, 100% { opacity: 0; translate: 0 0; } }
  @keyframes echo-b { 0%, 63% { opacity: 0; translate: 130px 0; } 64% { opacity: 1; translate: 130px 0; animation-timing-function: cubic-bezier(.22, 1, .36, 1); } 71% { opacity: 1; translate: 0 0; } 88% { opacity: 1; translate: 0 0; } 92%, 100% { opacity: 0; translate: 0 0; } }
}

/* ======================================================================
 * 2 · THE DESTINATION SHOWCASES
 * ==================================================================== */
.ds { padding: 72px 0 88px; background: #f7f1ec; }
.ds-head { display: grid; gap: 14px; }
@media (min-width: 1024px) { .ds { padding: 104px 0 112px; } .ds-head { grid-template-columns: 1fr 1fr; align-items: end; gap: 48px; } .ds-head .sec-lead { justify-self: end; margin: 0 0 6px; } }
.ds-xl { margin-top: 44px; }
.ds-grid { display: grid; gap: 22px; margin: 22px 0 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .ds-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .ds-grid { gap: 28px; margin-top: 28px; } }
.dc { position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: 22px; background: #fff; box-shadow: 0 1px 2px rgba(51, 48, 43, .06), 0 22px 44px -30px rgba(51, 48, 43, .45), 0 0 0 1px rgba(234, 227, 218, .9); }
.dc-still { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #23201c; }
.dc-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dc-blank { background: radial-gradient(80% 70% at 30% 30%, #5a4a3e 0%, #33302b 70%); }
.wl { position: absolute; inset: 0; width: 100%; height: 100%; }
.dc-fade { position: absolute; inset: auto 0 0 0; height: 45%; background: linear-gradient(transparent, rgba(0, 0, 0, .55)); pointer-events: none; }
.dc-reg { position: absolute; left: 16px; bottom: 12px; margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -.01em; color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, .45); }
.dc-attr { position: absolute; right: 8px; top: 8px; margin: 0; padding: 1px 6px; border-radius: 4px; background: rgba(0, 0, 0, .45); font-size: 10px; font-weight: 500; color: rgba(255, 255, 255, .9); }
.dc-b { display: flex; flex: 1; flex-direction: column; gap: 14px; padding: 22px 22px 24px; }
.dc-n { margin: 0; font-size: 12.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: rgba(53, 59, 65, .78); }
.dc-h { margin: -6px 0 0; font-size: 1.32rem; line-height: 1.22; font-weight: 800; letter-spacing: -.015em; color: var(--ink); text-wrap: balance; }
.dc-p { margin: -2px 0 0; font-size: 15px; line-height: 1.55; color: #5e554c; text-wrap: pretty; }
.dc-lh { margin: 0 0 8px; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #8a7f74; }
.lgd { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.lg-c { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border: 0; border-radius: 999px; background: #f6f2ed; box-shadow: inset 0 0 0 1px #ece5dc; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--ink); cursor: default; transition: background-color 150ms, box-shadow 150ms; }
.lg-c:hover, .lg-c[aria-pressed="true"] { background: #fff; box-shadow: inset 0 0 0 1.5px var(--ink); }
.lg-c:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.lg-g { width: 20px; height: 20px; }
.dc-home { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: auto 0 0; padding-top: 4px; font-size: 14px; }
.dc-kind { font-size: 13px; color: #7a7066; }
.dc-fly { display: inline-flex; align-items: center; gap: 8px; width: fit-content; font-size: 15px; font-weight: 700; color: var(--ink); text-decoration: none; border-radius: 4px; }
.dc-fly .ic { width: 16px; height: 16px; color: var(--red); transition: translate 200ms var(--ease); }
.dc-fly:hover .ic { translate: 3px 0; }
.dc-fly:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.dc-src { margin: -6px 0 0; font-size: 12px; color: #8a7f74; }
/* Wrangell, the wide card: the still left, everything it holds on the right */
.dc-xl .dc-still { aspect-ratio: 1100 / 720; }
.dc-xl .dc-reg { font-size: 20px; }
.hl { display: grid; gap: 10px; margin: 2px 0 0; padding: 0; list-style: none; }
.hl li { display: flex; gap: 11px; align-items: flex-start; }
.hl-g { width: 30px; height: 30px; flex: none; margin-top: 1px; box-shadow: 0 0 0 2px #fff, 0 2px 6px -2px rgba(29, 27, 25, .4); }
.hl li > span { display: flex; flex-direction: column; gap: 1px; }
.hl b { font-size: 14.5px; font-weight: 800; color: var(--ink); }
.hl li > span > span { font-size: 13.5px; line-height: 1.42; color: #6b6158; text-wrap: pretty; }
.dc-off { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; font-size: 13px; color: #6b6158; }
@media (min-width: 1024px) {
  .dc-xl { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .dc-xl .dc-still { aspect-ratio: auto; min-height: 100%; }
  .dc-xl .dc-b { padding: 30px 30px 28px; gap: 16px; }
  .dc-xl .dc-h { font-size: 1.7rem; }
}
/* the Wander layer: a legend chip lights its category, the rest step back */
.wl-m, .wl-tr > g { transition: opacity 220ms var(--ease); }
.dc[data-hl]:not([data-hl=""]) .wl-m:not(.is-hl), .dc[data-hl]:not([data-hl=""]) .wl-tr > g:not(.is-hl) { opacity: .16; }
/* live embeds */
.emb { display: grid; gap: 18px; margin-top: 64px; }
@media (min-width: 1024px) { .emb { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 40px; align-items: start; } .emb-tabs { flex-direction: column; } .et { width: 100%; } .emb-l { position: sticky; top: 96px; } }
.emb-h { display: grid; gap: 8px; }
.emb-t { margin: 0; font-size: var(--text-display-sm); line-height: 1.12; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.emb-s { margin: 0; max-width: 40rem; font-size: 16px; line-height: 1.55; color: #6e645a; }
.emb-tabs { display: flex; gap: 8px; margin: 22px 0 14px; overflow-x: auto; scrollbar-width: none; }
.et { display: flex; flex: none; flex-direction: column; align-items: flex-start; gap: 1px; padding: 9px 16px; border: 0; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font: inherit; color: var(--ink); cursor: pointer; text-align: left; }
.et b { font-size: 14px; font-weight: 800; }
.et span { font-size: 12.5px; font-weight: 600; color: #7a7066; }
.et[aria-selected="true"] { background: var(--near); color: #fff; box-shadow: none; }
.et[aria-selected="true"] span { color: rgba(255, 255, 255, .72); }
.et:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.lf { overflow: hidden; border-radius: 24px; background: #fff; box-shadow: 0 30px 60px -36px rgba(51, 48, 43, .55), 0 0 0 1px var(--line); }
.lf-bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.lf-dots { display: none; gap: 6px; }
.lf-dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(53, 59, 65, .18); }
@media (min-width: 640px) { .lf-dots { display: flex; } }
.lf-url { display: inline-flex; min-width: 0; align-items: center; gap: 6px; margin: 0 auto; padding: 4px 12px; border-radius: 999px; background: #f4f0eb; font-size: 12.5px; font-weight: 600; color: #6e645a; }
.lf-url .ic { width: 12px; height: 12px; }
.lf-open { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 700; color: var(--ink); text-decoration: none; }
.lf-open .ic { width: 13px; height: 13px; }
.lf-shot { position: relative; aspect-ratio: 4 / 5; background: #26211d; }
@media (min-width: 640px) { .lf-shot { aspect-ratio: 16 / 10; } }
.lf-shot img, .lf-shot iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; background: #fff; }
.lf-scrim { position: absolute; inset: 0; background: linear-gradient(0deg, #1c1916 0%, rgba(28, 25, 22, .5) 45%, rgba(28, 25, 22, .05) 100%); }
.lf-cta { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 22px; }
@media (min-width: 640px) { .lf-cta { padding: 32px; } }
.lf-cta p { margin: 0; max-width: 30rem; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .9); }
.lf-cta .ic { width: 15px; height: 15px; fill: currentColor; stroke: none; }
.lf-attr { position: absolute; right: 10px; top: 10px; padding: 1px 6px; border-radius: 4px; background: rgba(0, 0, 0, .55); font-size: 10.5px; color: rgba(255, 255, 255, .9); }
@media (prefers-reduced-motion: no-preference) {
  [data-live] [data-play] .wl-m { transition: opacity 260ms var(--ease) calc(var(--t, 0) * 1ms), transform 560ms var(--pop) calc(var(--t, 0) * 1ms); }
  [data-live] [data-play]:not([data-played]) .wl-m { opacity: 0; transform: translateY(-10px); }
  [data-live] [data-play] .wl-line { stroke-dasharray: 1; transition: stroke-dashoffset 1400ms var(--io) 200ms; }
  [data-live] [data-play]:not([data-played]) .wl-line { stroke-dashoffset: 1; }
  .dc[data-hl] .wl-m { transition: opacity 220ms var(--ease); }
}

/* ======================================================================
 * PLAY-ONCE ENGINE for stages outside the journey ([data-play]): the journey engine's classes,
 * keyed to [data-played] (page.js). .j-a enters at cue --t (ms); .j-mv moves from --mx0/--my0 to its
 * base; .j-draw draws (pathLength 1); .j-pop drops a pin; .j-f flashes once.
 * ==================================================================== */
@property --fx { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --fy { syntax: "<number>"; inherits: false; initial-value: 16; }
@property --fs { syntax: "<number>"; inherits: false; initial-value: 1; }
@property --mx0 { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --my0 { syntax: "<number>"; inherits: false; initial-value: 0; }
.j-mv { --mx: var(--mx1, 0); --my: var(--my1, 0); transform: translate(calc(var(--mx) * 1px), calc(var(--my) * 1px)); }
.j-draw { stroke-dasharray: 1; stroke-dashoffset: 0; }
.j-draw.dot { stroke-dasharray: none; }
.j-f { opacity: 0; visibility: hidden; }
@media (prefers-reduced-motion: no-preference) {
  [data-live] [data-play] .j-a { transition: opacity 420ms var(--ease), transform 720ms cubic-bezier(.2, 1.1, .3, 1); transition-delay: calc(var(--t, 0) * 1ms); }
  [data-live] [data-play]:not([data-played]) .j-a { opacity: 0; transform: translate(calc(var(--fx, 0) * 1px), calc(var(--fy, 16) * 1px)) scale(var(--fs, 1)); transition: none; }
  [data-live] [data-play] .j-a.e-pop { transition: opacity 160ms var(--ease), transform 360ms var(--pop); transition-delay: calc(var(--t, 0) * 1ms); }
  [data-live] [data-play] .j-a.e-fade { transition: opacity 600ms var(--ease); transition-delay: calc(var(--t, 0) * 1ms); }
  [data-live] [data-play] .j-a.e-type { transition: opacity 140ms linear, clip-path 900ms steps(24); transition-delay: calc(var(--t, 0) * 1ms); clip-path: inset(0 0 0 0); }
  [data-live] [data-play]:not([data-played]) .j-a.e-type { transform: none; clip-path: inset(0 100% 0 0); }
  [data-live] [data-play] .j-mv { transition: transform 760ms cubic-bezier(.2, 1.1, .3, 1); transition-delay: calc(var(--t, 0) * 1ms); }
  [data-live] [data-play]:not([data-played]) .j-mv { --mx: var(--mx0, var(--mx1, 0)); --my: var(--my0, var(--my1, 0)); transition: none; }
  [data-live] [data-play] .j-draw { transition: stroke-dashoffset 1100ms var(--io), opacity 300ms; transition-delay: calc(var(--t, 0) * 1ms); }
  [data-live] [data-play]:not([data-played]) .j-draw { stroke-dashoffset: 1; transition: none; }
  [data-live] [data-play]:not([data-played]) .j-draw.dot { opacity: 0; stroke-dashoffset: 0; }
  [data-live] [data-play] .j-pop { transition: opacity 200ms var(--ease), transform 460ms var(--pop); transition-delay: calc(var(--t, 0) * 1ms); }
  [data-live] [data-play]:not([data-played]) .j-pop { opacity: 0; transform: translate(-50%, calc(-100% - 14px)) scale(.55); transition: none; }
  [data-live] [data-play][data-playing] .j-f { animation: p-flash calc(var(--dur, 1000) * 1ms) var(--ease) calc(var(--t, 0) * 1ms) both; }
}
@keyframes p-flash { 0% { opacity: 0; visibility: visible; } 20% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }

/* ======================================================================
 * 3 · HOW IT WORKS
 * ==================================================================== */
.hw { padding: 80px 0 72px; }
.hw-head { display: grid; gap: 4px; }
@media (min-width: 1024px) { .hw { padding: 112px 0 104px; } .hw-head { grid-template-columns: 1fr 1fr; align-items: end; gap: 48px; } .hw-head .sec-lead { justify-self: end; margin: 0 0 6px; } }
.hw-steps { display: flex; flex-direction: column; gap: 64px; margin: 48px 0 0; padding: 0; list-style: none; }
.hw-s { display: grid; gap: 26px; align-items: center; }
@media (min-width: 1024px) {
  .hw-steps { gap: 104px; margin-top: 72px; }
  .hw-s { grid-template-columns: minmax(0, 4.4fr) minmax(0, 7.6fr); gap: 56px; }
  .hw-s.flip .hw-copy { order: 2; }
  .hw-s.flip { grid-template-columns: minmax(0, 7.6fr) minmax(0, 4.4fr); }
}
.hw-copy { display: flex; flex-direction: column; gap: 14px; max-width: 30rem; }
.hw-n { margin: 0; }
.hw-n b { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 50%; background: var(--red); font-size: 15px; font-weight: 800; color: #fff; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.hw-t { margin: 0; font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); line-height: 1.08; font-weight: 800; letter-spacing: -.025em; color: var(--ink); text-wrap: balance; }
.hw-b { margin: 0; font-size: 1.1rem; line-height: 1.55; color: #5e554c; text-wrap: pretty; }
.hw-part { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 2px 0 0; padding: 12px 14px; border-radius: 14px; background: #f7f1ec; font-size: 15px; font-weight: 700; color: var(--ink); }
.hw-part span { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--red-t); }
.hw-cta { align-self: flex-start; margin-top: 4px; }
.hw-sub { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: hs; }
.hw-sub li { position: relative; padding-left: 30px; font-size: 1.02rem; line-height: 1.5; color: #5e554c; counter-increment: hs; text-wrap: pretty; }
.hw-sub li::before { content: counter(hs, lower-alpha); position: absolute; left: 0; top: 1px; display: flex; width: 20px; height: 20px; align-items: center; justify-content: center; border-radius: 50%; background: #f3eae2; font-size: 11.5px; font-weight: 800; color: var(--red-t); }
.hw-sub b { color: var(--ink); }
.hw-stage { min-width: 0; }
/* a stage: a fixed design space, scaled to the column (container units) */
.hs-room { --s: .62; position: relative; width: 100%; }
.hs-stage { position: relative; width: calc(var(--w) * 1px); height: calc(var(--h) * 1px); transform: scale(var(--s)); transform-origin: 0 0; margin-bottom: calc(var(--h) * 1px * (var(--s) - 1)); }

/* phones: step 1 drops the sources column so the builder reads larger */
@media (max-width: 767px) { .hs-s1 { --w: 500 !important; } .hs-s1 .srcs { display: none; } .hs-s1 .bw-1 { left: 0; } }

/* the builder window */
.bw { position: absolute; overflow: hidden; border-radius: 16px; background: #fff; box-shadow: 0 34px 60px -34px rgba(51, 48, 43, .55), 0 0 0 1px rgba(51, 48, 43, .1); font-size: 11px; color: var(--ink2); }
.bw-1 { left: 200px; top: 0; width: 500px; height: 400px; }
.bw-2 { left: 0; top: 0; width: 640px; height: 330px; }
.bw-bar { display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 12px; border-bottom: 1px solid #efe9e1; background: #fbf9f6; }
.bw-dots { display: flex; gap: 5px; }
.bw-dots i { width: 8px; height: 8px; border-radius: 50%; background: #e2dbd2; }
.bw-url { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 600; color: #8a7f74; }
.bw-url .ic { width: 10px; height: 10px; }
.bw-t { margin-left: auto; font-size: 10px; font-weight: 700; color: #6e645a; }
.bw-b { display: flex; height: calc(100% - 32px); }
.bs { width: 128px; flex: none; padding: 10px 8px; border-right: 1px solid #efe9e1; background: #fcfbf9; overflow: hidden; }
.bs-org { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; padding: 4px; }
.bs-org img { width: 22px; height: auto; }
.bs-org span { font-size: 9.5px; font-weight: 800; line-height: 1.15; }
.bs-g { margin: 8px 0 3px; padding: 0 6px; font-size: 8px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #a49a8e; }
.bs-i { display: block; padding: 4px 6px; border-radius: 6px; font-size: 10.5px; font-weight: 600; color: #4a433c; }
.bs-i.on { background: #f3eae2; color: var(--ink2); font-weight: 800; }
.bs-cats { margin-top: 8px; padding-top: 4px; border-top: 1px solid #efe9e1; }
.cat { display: flex; align-items: center; gap: 6px; padding: 3px 6px; font-size: 10px; font-weight: 700; color: #3c3631; white-space: nowrap; }
.cat-g { width: 15px; height: 15px; }
.bw-main { position: relative; flex: 1; min-width: 0; padding: 10px; }
.bw-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.bw-h b { font-size: 14px; font-weight: 800; }
.bw-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 99px; background: #faeeda; font-size: 9.5px; font-weight: 800; color: #854f0b; }
.bw-pill .ic { width: 11px; height: 11px; }
/* the canvas: Yosemite Valley */
.cv-in { position: absolute; top: 0; }
.cv { position: relative; overflow: hidden; border-radius: 10px; background: #e9e4d9; box-shadow: inset 0 0 0 1px rgba(51, 48, 43, .08); }
.cv-img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.cv-sat { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cv-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cp { position: absolute; z-index: 2; width: 26px; height: 33px; transform: translate(-50%, -100%); }
.cp-h { position: absolute; left: 0; top: 0; width: 26px; height: 26px; padding: 2px; border-radius: 50%; background: #fff; box-shadow: 0 3px 8px -2px rgba(29, 27, 25, .5); }
.cp-h img, .cp-h .gd { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.cp-tip { position: absolute; left: 8px; top: 24px; width: 10px; height: 8px; background: #fff; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.cp-l { position: absolute; left: 50%; top: 36px; padding: 2px 6px; border-radius: 6px; background: #fff; font-size: 9.5px; font-weight: 800; white-space: nowrap; transform: translateX(-50%); box-shadow: 0 2px 6px -2px rgba(29, 27, 25, .4); }
.cp-new .cp-h { box-shadow: 0 0 0 2px var(--red), 0 3px 8px -2px rgba(29, 27, 25, .5); }
.cm { position: absolute; z-index: 4; display: flex; gap: 6px; width: 170px; padding: 7px 9px; border-radius: 12px 12px 12px 3px; background: #fff; box-shadow: 0 12px 26px -12px rgba(29, 27, 25, .55); font-size: 10.5px; line-height: 1.35; }
.cm-av { display: flex; width: 22px; height: 22px; flex: none; align-items: center; justify-content: center; border-radius: 50%; background: var(--near); font-size: 7.5px; font-weight: 800; color: #fff; }
.cm-t { font-weight: 600; color: #2a2724; }
.cm-ok { position: absolute; z-index: 5; display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px 3px 6px; border-radius: 99px; background: #465a3f; font-size: 10px; font-weight: 800; color: #fff; translate: 108px 46px; }
.cm-ok .ic { width: 12px; height: 12px; stroke-width: 3; }
.cur { position: absolute; z-index: 6; display: flex; align-items: flex-start; gap: 2px; }
.cur svg { width: 16px; height: 16px; fill: var(--red); stroke: #fff; stroke-width: 1.5; }
.cur b { margin-top: 12px; padding: 2px 7px; border-radius: 6px; background: var(--red); font-size: 9.5px; font-weight: 800; color: #fff; white-space: nowrap; }
/* the research sources */
.srcs { position: absolute; left: 0; top: 18px; width: 178px; }
.srcs-h { margin: 0 0 10px; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--red-t); }
.srcs ul { display: flex; flex-direction: column; gap: 9px; margin: 0; padding: 0; list-style: none; }
.src { position: relative; display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 13px; background: #fff; box-shadow: 0 10px 22px -16px rgba(51, 48, 43, .55), 0 0 0 1px var(--line); }
.src-i { width: 26px; height: 26px; flex: none; padding: 5px; border-radius: 8px; background: #f3eae2; color: var(--red-t); }
.src > span { display: flex; flex-direction: column; min-width: 0; }
.src b { font-size: 12px; font-weight: 800; color: var(--ink); }
.src > span > span { font-size: 10px; color: #8a7f74; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.src-go { position: absolute; right: -16px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 4px rgba(205, 73, 57, .22); }
/* step 2: the map header, filters and the Look panel */
.bw-b2 .bw-main { padding: 12px; }
.cv-2 { width: 400px; }
.mh { position: absolute; z-index: 3; left: 8px; right: 8px; top: 8px; display: flex; align-items: center; gap: 8px; padding: 5px 6px 5px 5px; border-radius: 12px; overflow: hidden; color: #fff; }
.mh-bg { position: absolute; inset: 0; z-index: -1; background: #5d6a2a; }
.mh::before { content: ""; position: absolute; inset: 0; z-index: -2; background: #8a857e; }
.mh-logo { display: flex; width: 26px; height: 26px; align-items: center; justify-content: center; border-radius: 8px; background: #fff; }
.mh-logo img { width: 22px; height: auto; }
.mh-n { font-size: 11px; font-weight: 800; }
.mh-s { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; padding: 4px 10px; border-radius: 99px; background: rgba(255, 255, 255, .92); font-size: 9.5px; font-weight: 600; color: #6e645a; }
.mh-s .ic { width: 10px; height: 10px; }
.fl { position: absolute; z-index: 3; left: 8px; top: 46px; display: flex; gap: 5px; }
.fl-c { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px 3px 3px; border-radius: 99px; background: #fff; box-shadow: 0 2px 6px -2px rgba(29, 27, 25, .35); font-size: 9.5px; font-weight: 800; color: #2a2724; }
.fl-g { width: 14px; height: 14px; }
.fl-c:nth-child(3) { order: 3; } .fl-c:nth-child(4) { order: 4; }
.fl-a { order: 2; --mx0: -78; --mx1: 0; --t: 2800; }
.fl-b { order: 1; --mx0: 64; --mx1: 0; --t: 2800; box-shadow: 0 0 0 2px var(--near), 0 6px 14px -4px rgba(29, 27, 25, .45); }
.lk { width: 200px; flex: none; padding: 12px 14px; border-left: 1px solid #efe9e1; background: #fcfbf9; }
.lk-h { margin: 0 0 8px; font-size: 13px; font-weight: 800; }
.lk-r { display: flex; flex-direction: column; gap: 5px; margin-bottom: 11px; }
.lk-l { font-size: 9.5px; font-weight: 800; color: #6e645a; }
.lk-logo { display: flex; width: 58px; height: 36px; align-items: center; justify-content: center; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px #e3dcd2; }
.lk-logo img { width: 34px; height: auto; }
.lk-sw { position: relative; display: flex; gap: 6px; }
.lk-sw i { width: 20px; height: 20px; border-radius: 6px; }
.lk-ring { position: absolute; left: 75px; top: -3px; width: 26px; height: 26px; border-radius: 8px; box-shadow: 0 0 0 2px var(--ink2); }
.bm { position: relative; display: flex; gap: 6px; }
.bm-t { position: relative; display: flex; width: 78px; height: 52px; overflow: hidden; border-radius: 8px; background: #ddd; }
.bm-t img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bm-t b { position: absolute; left: 4px; bottom: 3px; padding: 1px 5px; border-radius: 5px; background: rgba(255, 255, 255, .9); font-size: 8.5px; font-weight: 800; }
.bm-ring { position: absolute; left: 81px; top: -3px; width: 84px; height: 58px; border-radius: 10px; box-shadow: 0 0 0 2px var(--red); }
.lk-drag { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 700; color: #4a433c; }
.lk-drag .ic { width: 13px; height: 13px; }
@media (prefers-reduced-motion: no-preference) {
  [data-live] [data-play]:not([data-played]) .cv-sat { opacity: 0; }
  [data-live] [data-play] .fl-a, [data-live] [data-play] .fl-b { transition-duration: 700ms; }
}
/* step 3a: the claim invitation, the owner's phone, the review queue */
.em { position: absolute; left: 0; top: 28px; width: 196px; overflow: hidden; border-radius: 14px; background: #fff; box-shadow: 0 22px 40px -26px rgba(51, 48, 43, .6), 0 0 0 1px var(--line); }
.em-top { display: flex; gap: 8px; padding: 10px; border-bottom: 1px solid #efe9e1; }
.em-i { width: 24px; height: 24px; flex: none; padding: 5px; border-radius: 7px; background: #f3eae2; color: var(--red-t); }
.em-top > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.em-top b { font-size: 10px; font-weight: 800; }
.em-top > span > span { font-size: 9.5px; font-weight: 700; line-height: 1.3; color: #4a433c; }
.em-b { display: flex; flex-direction: column; gap: 8px; padding: 10px; }
.em-hl { margin: 0; font-size: 12.5px; font-weight: 800; line-height: 1.25; color: var(--ink2); }
.em-card { display: flex; align-items: center; gap: 8px; padding: 7px; border-radius: 10px; background: #f7f3ee; }
.em-ph { width: 30px; height: 30px; flex: none; border-radius: 8px; background: linear-gradient(135deg, #7a5b43, #3f2d22); }
.em-card span { display: flex; flex-direction: column; }
.em-card b { font-size: 10.5px; } .em-card span span { font-size: 9px; color: #8a7f74; }
.em-btn { align-self: flex-start; padding: 6px 12px; border-radius: 99px; background: #024847; font-size: 10.5px; font-weight: 800; color: #fff; }
.cl-pos { position: absolute; left: 246px; top: 0; width: 152px; height: 300px; }
.cl-ph-w { scale: .58; left: -12px; top: -16px; }
.cl { position: absolute; inset: 0; padding: 54px 16px 0; background: #fff; }
.cl-k { font-size: 10px !important; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--red-t); }
.cl-n { margin: 2px 0 10px !important; font-size: 21px; font-weight: 800; letter-spacing: -.02em; color: var(--ink2); }
.cl-sec { margin-bottom: 12px; padding: 10px 12px; border-radius: 14px; background: #f7f3ee; }
.cl-h { display: flex; align-items: center; gap: 6px; margin-bottom: 6px !important; font-size: 12px; font-weight: 800; }
.cl-h .ic { width: 14px; height: 14px; }
.cl-row { display: flex; justify-content: space-between; padding: 3px 0; font-size: 12px; }
.cl-row span { color: #5e554c; }
.cl-ph { display: flex; gap: 6px; }
.cl-ph i { width: 62px; height: 52px; border-radius: 10px; }
.cl-note { font-size: 12.5px; font-weight: 600; color: #3c3631; white-space: nowrap; overflow: hidden; }
.cl-btn { display: flex; justify-content: center; margin-top: 4px; padding: 12px; border-radius: 99px; background: var(--red); font-size: 13px; font-weight: 800; color: #fff; }
.rv { position: absolute; left: 446px; top: 64px; width: 194px; padding: 10px; border-radius: 14px; background: #fff; box-shadow: 0 22px 40px -26px rgba(51, 48, 43, .6), 0 0 0 1px var(--line); }
.rv-h { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: 11.5px; font-weight: 800; }
.rv-i { width: 15px; height: 15px; color: var(--red-t); }
.rv-row { display: flex; gap: 8px; padding: 8px; border-radius: 10px; background: #f7f3ee; }
.rv-av { width: 28px; height: 28px; flex: none; border-radius: 8px; background: linear-gradient(135deg, #7a5b43, #3f2d22); }
.rv-row span { display: flex; flex-direction: column; }
.rv-row b { font-size: 10.5px; } .rv-row span span { font-size: 9.5px; color: #6e645a; }
.rv-acts { display: flex; gap: 6px; justify-content: flex-end; margin-top: 8px; }
.rv-acts span { padding: 4px 10px; border-radius: 99px; font-size: 10px; font-weight: 800; }
.rv-x { box-shadow: inset 0 0 0 1px #d9d0c4; color: #6e645a; }
.rv-ok { background: var(--near); color: #fff; }
.rv-done { display: flex; align-items: center; gap: 5px; margin: 8px 0 0; padding: 6px 8px; border-radius: 9px; background: #eef2ea; font-size: 10px; font-weight: 800; color: #465a3f; }
.rv-done .ic { width: 12px; height: 12px; stroke-width: 3; }
.cl-links { position: absolute; inset: 0; width: 640px; height: 300px; }
.cl-links path.dot, .cl-links path { fill: none; stroke: var(--red); stroke-width: 2; stroke-dasharray: 2 5 !important; stroke-linecap: round; }
/* publish switch */
.pub { display: flex; align-items: center; gap: 12px; margin-top: 4px; padding: 12px 14px; border-radius: 16px; background: #fff; box-shadow: 0 14px 30px -22px rgba(51, 48, 43, .55), 0 0 0 1px var(--line); }
.pub-sw { position: relative; display: flex; width: 48px; height: 28px; flex: none; border-radius: 99px; background: #465a3f; }
.pub-k { position: absolute; left: 23px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, .25); }
.pub-t { display: flex; flex-direction: column; }
.pub-t b { font-size: 15px; font-weight: 800; color: var(--ink); }
.pub-t span { font-size: 13px; color: #6e645a; }
@media (prefers-reduced-motion: no-preference) {
  [data-live] .pub:not([data-played]) .pub-sw { background: #cfc6ba; }
  [data-live] .pub .pub-sw { transition: background-color 300ms 600ms; }
}

/* ======================================================================
 * DISTRIBUTE: the wall
 * ==================================================================== */
.dist { margin-top: 88px; }
.dist-h { display: grid; gap: 10px; max-width: 46rem; }
.dist-t { margin: 0; font-size: var(--text-display-md); line-height: 1.06; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.dist-s { margin: 0; font-size: 1.1rem; line-height: 1.55; color: #6e645a; }
.dist-cap { margin: 18px 0 0; font-size: 13px; font-weight: 600; color: #7a7066; text-align: center; text-wrap: balance; }
.dw { position: relative; margin-top: 34px; padding: 28px 18px; border-radius: 28px; background: linear-gradient(180deg, #efe6dc, #f7f1ec); overflow: hidden; }
.dw-beams { display: none; }
.dw-grid { display: grid; gap: 16px; }
.dw-a, .dw-b, .dw-bb { display: grid; gap: 16px; }
.dw-bb { grid-template-columns: 1fr 1fr; }
.dw-c { position: relative; z-index: 2; display: flex; justify-content: center; height: 430px; }
.dp-ph { position: relative; scale: .66; transform-origin: 50% 0; }
@media (min-width: 1024px) {
  .dw { padding: 40px 36px; }
  .dw-beams { display: block; position: absolute; inset: 40px 36px; width: calc(100% - 72px); height: calc(100% - 80px); z-index: 1; pointer-events: none; }
  .dw-beams path, .dw-beams path.dot { fill: none; stroke: var(--red); stroke-width: 2; stroke-dasharray: 2 6; vector-effect: non-scaling-stroke; stroke-linecap: round; opacity: .8; }
  .dw-grid { grid-template-columns: 1fr 260px 1fr; align-items: center; gap: 28px; }
  .dw-c { height: 560px; align-items: center; }
  .dp-ph { scale: .86; transform-origin: 50% 50%; }
}
.pc { position: relative; z-index: 2; margin: 0; }
.pc figcaption { margin-top: 8px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #8a7f74; }
.qr { display: block; width: 100%; height: auto; shape-rendering: crispEdges; }
.bb-qr, .sg-q, .tt-face, .rk-p, .qrc { position: relative; }
@media (prefers-reduced-motion: no-preference) {
  [data-live] .dw[data-played] .pc .qr { animation: qr-ping 2.6s var(--ease) 2.2s infinite; }
  [data-live] .dw[data-played] .pc-sign .qr { animation-delay: 2.9s; }
  [data-live] .dw[data-played] .pc-tent .qr { animation-delay: 3.6s; }
  [data-live] .dw[data-played] .pc-rack .qr { animation-delay: 4.3s; }
}
@keyframes qr-ping { 0%, 70%, 100% { filter: none; } 10% { filter: drop-shadow(0 0 0 rgba(205, 73, 57, 0)) brightness(1); } 20% { filter: drop-shadow(0 0 6px rgba(205, 73, 57, .9)) brightness(1.05); } 40% { filter: none; } }
.mm { position: relative; display: block; overflow: hidden; }
.mm img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mm-d { position: absolute; left: 30%; top: 40%; width: 9px; height: 9px; border-radius: 50%; background: #487a7b; box-shadow: 0 0 0 2px #fff; }
.mm-d.b { left: 62%; top: 52%; background: #ffa600; } .mm-d.c { left: 46%; top: 30%; background: #897a27; }
/* billboard */
.bb-sky { position: relative; padding: 16px 16px 46px; border-radius: 18px; background: linear-gradient(#bcd6e6, #e9e2d4 80%); overflow: hidden; }
.bb-board { position: relative; z-index: 2; display: grid; grid-template-columns: 1.25fr 1fr auto; align-items: center; gap: 10px; padding: 10px; border-radius: 6px; background: #1d3b33; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .55), 0 0 0 5px #f2efe9; }
.bb-map { height: 74px; border-radius: 4px; }
.bb-txt { display: flex; flex-direction: column; gap: 3px; color: #fff; }
.bb-txt b { font-size: 13px; line-height: 1.12; font-weight: 800; letter-spacing: -.01em; }
.bb-txt span { font-size: 9.5px; color: rgba(255, 255, 255, .8); }
.bb-qr { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 54px; }
.bb-qr span { font-size: 8px; font-weight: 800; color: #fff; text-transform: uppercase; letter-spacing: .08em; }
.bb-post { position: absolute; z-index: 1; left: 30%; bottom: 0; width: 10px; height: 60px; background: #6b6157; }
.bb-post.r { left: auto; right: 30%; }
/* trailhead sign */
.sg { position: relative; display: flex; flex-direction: column; align-items: center; padding: 14px 14px 0; border-radius: 18px; background: linear-gradient(#d9e5d2, #ebe3d3); overflow: hidden; }
.sg-board { position: relative; z-index: 2; width: 100%; padding: 10px; border-radius: 8px; background: #5b3d26; box-shadow: inset 0 0 0 3px #7a5536, 0 12px 22px -14px rgba(0, 0, 0, .6); color: #fff; }
.sg-h { margin: 0 0 7px; font-size: 13px; font-weight: 800; letter-spacing: .01em; text-align: center; }
.sg-map { height: 70px; border-radius: 4px; box-shadow: 0 0 0 2px #f2e9dc; }
.sg-q { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 6px; border-radius: 6px; background: #f6efe2; color: #2a2724; }
.sg-q .qr { width: 44px; flex: none; }
.sg-q span { display: flex; flex-direction: column; }
.sg-q b { font-size: 10.5px; font-weight: 800; } .sg-q span span { font-size: 9px; color: #6e645a; }
.sg-post { width: 14px; height: 34px; background: #6b4a30; }
/* website */
.wb { overflow: hidden; border-radius: 12px; background: #fff; box-shadow: 0 16px 30px -20px rgba(51, 48, 43, .55), 0 0 0 1px var(--line); }
.wb-bar { display: flex; align-items: center; gap: 4px; padding: 6px 8px; border-bottom: 1px solid #efe9e1; }
.wb-bar i { width: 6px; height: 6px; border-radius: 50%; background: #e0d8cf; }
.wb-bar span { margin-left: 8px; font-size: 9px; font-weight: 600; color: #8a7f74; }
.wb-pg { display: grid; grid-template-columns: 1fr 1.3fr; gap: 10px; padding: 10px; }
.wb-col { display: flex; flex-direction: column; gap: 5px; }
.wb-col b { font-size: 12px; font-weight: 800; }
.wb-col i { height: 5px; border-radius: 3px; background: #ece6de; }
.wb-btn { align-self: flex-start; margin-top: 4px; padding: 4px 9px; border-radius: 99px; background: var(--red); font-size: 9px; font-weight: 800; color: #fff; }
.wb-map { height: 86px; border-radius: 6px; }
/* table tent */
.tt { position: relative; display: flex; justify-content: center; padding: 14px 0 10px; border-radius: 18px; background: linear-gradient(#efe6da, #e4d8c8); perspective: 400px; }
.tt-face { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 5px; width: 100px; padding: 10px 10px 12px; border-radius: 4px; background: #fffaf3; transform: rotateX(12deg); box-shadow: 0 12px 16px -10px rgba(0, 0, 0, .45); }
.tt-face p { margin: 0; font-size: 10px; font-weight: 800; color: var(--ink2); }
.tt-face .qr { width: 62px; }
.tt-face span { font-size: 8.5px; font-weight: 800; color: var(--red-t); text-transform: uppercase; letter-spacing: .08em; }
/* rack card */
.rk { display: flex; justify-content: center; gap: 2px; padding: 12px 0; border-radius: 18px; background: linear-gradient(#e6ece8, #e8e1d6); }
.rk-p { display: flex; flex-direction: column; gap: 4px; width: 66px; padding: 6px; border-radius: 2px; background: #fffaf3; box-shadow: 0 10px 14px -10px rgba(0, 0, 0, .5); }
.rk-p.r { background: #f6efe4; transform: skewY(-4deg); }
.rk-p.r i { height: 4px; border-radius: 2px; background: #e2d8ca; }
.rk-map { height: 40px; border-radius: 2px; }
.rk-p b { font-size: 7.5px; font-weight: 800; line-height: 1.1; }
.rk-p .qr { width: 30px; }
/* the phone in the middle of the wall */
.dp-scr { position: absolute; inset: 0; }
.dp-cam { position: absolute; inset: 0; }
.dp-map { left: -48px; top: -620px; width: 834px; height: 2001.6px; }
.dp-pill { position: absolute; z-index: 8; left: 14px; right: 14px; top: 52px; display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 14px; background: #fff; box-shadow: 0 12px 26px -12px rgba(29, 27, 25, .55); font-size: 11.5px; font-weight: 800; color: var(--ink2); }
.dp-pill .ic { width: 15px; height: 15px; color: var(--red); }

/* ======================================================================
 * 4 · THE DASHBOARD
 * ==================================================================== */
.db { padding: 80px 0 88px; background: var(--near); color: #f4ede6; }
.db .eyebrow { color: rgba(244, 237, 230, .72); }
.db .sec-h { color: #fbf7f4; }
.db .sec-lead { color: rgba(244, 237, 230, .72); }
.db-head { display: grid; gap: 6px; }
@media (min-width: 1024px) { .db { padding: 112px 0 104px; } .db-head { grid-template-columns: 1fr 1fr; align-items: end; gap: 48px; } .db-head .sec-lead { justify-self: end; margin: 0 0 6px; } }
.db-grid { display: grid; gap: 22px; margin-top: 40px; }
@media (min-width: 1024px) { .db-grid { grid-template-columns: minmax(0, 8.4fr) minmax(0, 3.6fr); align-items: stretch; gap: 28px; margin-top: 56px; } }
.dbw { overflow: hidden; border-radius: 20px; background: #fff; color: var(--ink2); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .7); }
.dbw-b { padding: 14px; background: #f8f6f3; }
.dbw-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.dbw-top > b { font-size: 18px; font-weight: 800; }
.tf { display: flex; gap: 2px; padding: 3px; border-radius: 99px; background: #ede8e1; font-size: 11.5px; font-weight: 700; color: #6e645a; }
.tf > * { padding: 4px 10px; border-radius: 99px; }
.tf b { background: #fff; color: var(--ink2); box-shadow: 0 1px 2px rgba(0, 0, 0, .1); }
.mv { overflow: hidden; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px #ebe5dd; }
.mv-h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 14px; }
.mv-t { margin: 0 auto 0 0; font-size: 14px; font-weight: 800; }
.mv-seg { display: flex; gap: 2px; padding: 3px; border-radius: 10px; background: #f1ece6; font-size: 11.5px; font-weight: 700; color: #6e645a; }
.mv-seg > * { padding: 3px 10px; border-radius: 7px; }
.mv-seg b { background: #fff; color: var(--ink2); box-shadow: 0 1px 2px rgba(0, 0, 0, .1); }
.mv-sw { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: #4a433c; }
.mv-sw i { position: relative; width: 28px; height: 16px; border-radius: 99px; background: var(--red); }
.mv-sw i::after { content: ""; position: absolute; right: 2px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; }
.mv-map { position: relative; aspect-ratio: 760 / 430; overflow: hidden; background: #f2f0ec; }
.mv-base, .mv-heat, .mv-pl { position: absolute; inset: 0; width: 100%; height: 100%; }
.mv-base { object-fit: cover; }
.mv-blank { background: #f2f0ec; }
.mv-heat { mix-blend-mode: multiply; }
.mv-lab { position: absolute; padding: 2px 7px; border-radius: 6px; background: rgba(255, 255, 255, .9); font-size: 11px; font-weight: 800; color: #3c3631; transform: translate(-50%, -160%); box-shadow: 0 2px 6px -2px rgba(0, 0, 0, .3); }
.mv-key { position: absolute; left: 12px; bottom: 12px; display: flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 9px; background: rgba(255, 255, 255, .92); font-size: 10.5px; font-weight: 700; color: #5e554c; }
.mv-key b { width: 70px; height: 7px; border-radius: 4px; background: linear-gradient(90deg, #f6e9e6, #cd4939, #c98a2e); }
.mv-key i { display: none; }
.mv-attr { position: absolute; right: 8px; bottom: 8px; padding: 1px 5px; border-radius: 4px; background: rgba(255, 255, 255, .8); font-size: 9.5px; color: #6e645a; }
.mv-scrub { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: center; padding: 12px 14px 14px; }
.mv-play { display: flex; width: 30px; height: 30px; align-items: center; justify-content: center; border-radius: 50%; background: var(--near); color: #fff; grid-row: span 2; }
.mv-play .ic { width: 13px; height: 13px; fill: currentColor; stroke: none; }
.mv-track { position: relative; height: 6px; border-radius: 3px; background: #ece6de; }
.mv-track > i { position: absolute; top: -3px; width: 1px; height: 12px; background: #d6cdc2; }
.mv-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; border-radius: 3px; background: var(--red); transform-origin: 0 50%; }
.mv-thumb { position: absolute; left: 100%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--red), 0 2px 5px rgba(0, 0, 0, .25); }
.mv-dates { display: flex; justify-content: space-between; font-size: 11px; font-weight: 700; color: #8a7f74; }
.db-side { display: flex; flex-direction: column; gap: 16px; }
.db-k { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: rgba(244, 237, 230, .6); }
.fgs { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.fg { display: flex; flex-direction: column; gap: 3px; padding: 16px 18px; border-radius: 16px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.fg b { font-size: 2.3rem; line-height: 1; font-weight: 800; letter-spacing: -.03em; color: #fff; font-variant-numeric: tabular-nums; }
.fg span { font-size: 15px; font-weight: 700; line-height: 1.35; color: #f4ede6; }
.fg small { font-size: 12.5px; line-height: 1.45; color: rgba(244, 237, 230, .6); }
.db-more { margin: 0; font-size: 14px; line-height: 1.55; color: rgba(244, 237, 230, .72); }
.db-foot { display: grid; gap: 14px; margin-top: 26px; }
@media (min-width: 1024px) { .db-foot { grid-template-columns: 1.2fr 1fr; gap: 40px; } }
.db-cap, .db-svc { margin: 0; font-size: 13.5px; line-height: 1.55; color: rgba(244, 237, 230, .66); }
.db-svc .avail { margin-right: 6px; background: rgba(255, 255, 255, .1); box-shadow: none; color: #fff; }
.db-svc .avail i { background: #9fc08f; }
@media (prefers-reduced-motion: no-preference) {
  [data-live] [data-play] .mv-c { transition: opacity 500ms var(--ease) calc(var(--t) * 1ms), r 900ms var(--ease) calc(var(--t) * 1ms); }
  [data-live] [data-play]:not([data-played]) .mv-c { opacity: 0; }
  [data-live] [data-play] .mv-fill { transition: transform 3000ms linear 300ms; }
  [data-live] [data-play]:not([data-played]) .mv-fill { transform: scaleX(0); }
  [data-live] [data-play] .mv-thumb { transition: left 3000ms linear 300ms; }
  [data-live] [data-play]:not([data-played]) .mv-thumb { left: 0; }
}

/* AJ D5: approved real Raleigh concepts and Durango collateral. */
.pc { position: relative; }
.dist-real { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:inherit; z-index:4; }
.pc-bill .dist-real, .pc-sign .dist-real { object-fit:cover; }
.pc-tent .dist-real, .pc-rack .dist-real { object-fit:cover; }
.pc .qr { position:absolute; z-index:6; right:7px; bottom:7px; width:48px; padding:3px; background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.25); }

/* Transformed demo art intentionally extends past its stage; keep it out of the
   document scroll range in both Chromium and WebKit. */
html, body { max-width: 100%; overflow-x: clip; }
.dmain { max-width: 100%; overflow-x: clip; contain: paint; }