/* ==========================================================================
   WalkNessebar — promotional site
   Palette and type follow the app itself: deep navy, warm gold, a high-contrast
   serif for display, system sans for everything else.
   ========================================================================== */

:root {
  --ink:        #060f1c;
  --ink-2:      #0b1a30;
  --ink-3:      #12253f;
  --paper:      #ffffff;
  --paper-2:    #f5f5f7;
  --paper-3:    #ebebef;

  --gold:       #c9a15a;
  --gold-lit:   #e3c48c;
  --sunset:     #e08a4a;
  --sea:        #7fb0dc;

  --text-dark:  #1d1d1f;
  --text-mid:   #6e6e73;
  --text-light: rgba(255, 255, 255, .74);
  --text-faint: rgba(255, 255, 255, .52);

  --serif: "Cochin", "Hoefler Text", "New York", "Iowan Old Style",
           "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans:  -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
           "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;

  --wrap: 1120px;
  --nav-h: 52px;
  --pad: clamp(22px, 5vw, 40px);
  --sec-y: clamp(84px, 12vw, 168px);

  --ease: cubic-bezier(.22, .61, .36, 1);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 12px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--text-dark);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  letter-spacing: -.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a   { color: inherit; text-decoration: none; }

::selection { background: rgba(201, 161, 90, .3); }

/* ------------------------------------------------------------------ layout */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad);
}
.wrap--wide { max-width: 1320px; }

.sec {
  position: relative;
  padding-block: var(--sec-y);
  overflow: hidden;
}
.sec--paper { background: var(--paper); }
.sec--gray  { background: var(--paper-2); }

.sec--dark {
  background: var(--ink);
  color: #fff;
}
.sec--dark h1, .sec--dark h2, .sec--dark h3 { color: #fff; }
.sec--dark p { color: var(--text-light); }

.sec--tight { padding-block: clamp(60px, 8vw, 110px); }

/* ------------------------------------------------------------------- type  */

h1, h2, h3 { margin: 0; font-weight: 400; letter-spacing: -.015em; }

.eyebrow {
  margin: 0 0 20px;
  font-family: var(--sans);
  font-size: clamp(11px, 1.1vw, 12px);
  font-weight: 600;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--gold);
}
.sec--paper .eyebrow, .sec--gray .eyebrow { color: #9a7838; }

.h1 {
  font-family: var(--serif);
  /* also bound by viewport height so the hero composition survives a laptop */
  font-size: clamp(34px, min(5.7vw, 8.6vh), 76px);
  line-height: 1.04;
  letter-spacing: -.022em;
}
.h2 {
  font-family: var(--serif);
  font-size: clamp(32px, 4.6vw, 62px);
  line-height: 1.08;
  letter-spacing: -.018em;
}
.h3 {
  font-family: var(--serif);
  font-size: clamp(25px, 2.9vw, 38px);
  line-height: 1.14;
  /* let a longer heading find its own even break rather than orphaning a word */
  text-wrap: balance;
}
.h4 {
  margin: 0 0 8px;
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.01em;
}

.lede {
  margin: 22px 0 0;
  font-size: clamp(17px, 1.55vw, 21px);
  line-height: 1.5;
  color: var(--text-mid);
  max-width: 40ch;
}
.sec--dark .lede { color: var(--text-light); }
.lede--wide { max-width: 56ch; }

.center { text-align: center; }
.center .lede { margin-inline: auto; }

.gold { color: var(--gold); }
.sec--paper .gold, .sec--gray .gold { color: #9a7838; }

.rule {
  width: 34px; height: 1px; margin: 30px 0 0;
  background: var(--gold);
  opacity: .8;
}
.center .rule { margin-inline: auto; }

/* -------------------------------------------------------------------- nav  */

/* Three states, all driven by script:
   bare       — at rest on the hero, nothing behind the links at all
   .is-bar    — a dark frosted pane, from the moment the hero copy reaches it
   + .is-solid — the light pane, whenever a paper section is behind it
   Without a pane the white links ran straight over the hero headline. */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--nav-h);
  display: flex; align-items: center;
  background: transparent;
  box-shadow: none;
  transition: background .45s var(--ease), box-shadow .45s var(--ease);
}
.nav.is-bar {
  background: rgba(6, 15, 28, .68);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .08);
}
.nav__in {
  width: 100%; max-width: 1320px; margin-inline: auto;
  padding-inline: var(--pad);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}

.nav.is-bar.is-solid {
  background: rgba(255, 255, 255, .74);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .08);
}

/* mark + wordmark: the stacked app lockup is unreadable at nav height, so the
   mark is paired with the name set in the same serif */
.brand { display: flex; align-items: center; gap: 9px; }
.brand__mark { position: relative; flex: none; width: 20px; height: 27px; }
.brand__mark img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: contain;
  transition: opacity .4s var(--ease);
}
.brand__word {
  font-family: var(--serif);
  font-size: 18px; line-height: 1;
  color: #fff;
  transition: color .4s var(--ease);
}
.brand__navy  { opacity: 0; }
.nav.is-solid .brand__white { opacity: 0; }
.nav.is-solid .brand__navy  { opacity: 1; }
.nav.is-solid .brand__word  { color: #1d1d1f; }

.nav__links { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 32px); }
.nav__links a {
  font-size: 13px; font-weight: 400; letter-spacing: -.005em;
  color: rgba(255, 255, 255, .84);
  transition: color .3s var(--ease), opacity .3s var(--ease);
}
.nav__links a:hover { color: #fff; }
.nav.is-solid .nav__links a { color: rgba(29, 29, 31, .82); }
.nav.is-solid .nav__links a:hover { color: #000; }

.nav__cta {
  padding: 6px 15px; border-radius: 980px;
  background: var(--gold); color: var(--ink) !important;
  font-weight: 600; font-size: 12.5px !important;
  transition: background .3s var(--ease), transform .3s var(--ease);
}
.nav__cta:hover { background: var(--gold-lit); transform: translateY(-1px); }

.nav__burger {
  display: none; width: 34px; height: 34px; padding: 0;
  border: 0; background: none; cursor: pointer;
}
.nav__burger span {
  display: block; width: 18px; height: 1.5px; margin: 4px auto;
  background: #fff; border-radius: 2px;
  transition: transform .35s var(--ease), opacity .25s var(--ease),
              background .4s var(--ease);
}
.nav.is-solid .nav__burger span { background: #1d1d1f; }
/* the open menu is a dark overlay — a frosted white bar across its top would
   read as a seam, so the nav drops back to its transparent state */
body.menu-open .nav {
  background: transparent; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
body.menu-open .brand__white { opacity: 1; }
body.menu-open .brand__navy  { opacity: 0; }
body.menu-open .brand__word  { color: #fff; }
body.menu-open .nav__burger span { background: #fff; }
body.menu-open .nav__burger span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
body.menu-open .nav__burger span:nth-child(2) { opacity: 0; }
body.menu-open .nav__burger span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

.menu {
  position: fixed; inset: 0; z-index: 90;
  display: flex; flex-direction: column; justify-content: center; gap: 6px;
  padding: 0 var(--pad);
  background: rgba(6, 15, 28, .97);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  opacity: 0; visibility: hidden;
  transition: opacity .42s var(--ease), visibility .42s var(--ease);
}
body.menu-open .menu { opacity: 1; visibility: visible; }
.menu a {
  font-family: var(--serif);
  font-size: clamp(30px, 8vw, 46px);
  color: #fff; padding: 10px 0;
  opacity: 0; transform: translateY(14px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
body.menu-open .menu a { opacity: 1; transform: none; }
body.menu-open .menu a:nth-child(1) { transition-delay: .06s; }
body.menu-open .menu a:nth-child(2) { transition-delay: .10s; }
body.menu-open .menu a:nth-child(3) { transition-delay: .14s; }
body.menu-open .menu a:nth-child(4) { transition-delay: .18s; }
body.menu-open .menu a:nth-child(5) { transition-delay: .22s; }
body.menu-open .menu a:nth-child(6) { transition-delay: .26s; }

/* ------------------------------------------------------------------- hero  */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center;
  padding-top: calc(var(--nav-h) + clamp(18px, 4vh, 56px));
  padding-bottom: clamp(34px, 6vh, 80px);
  background: var(--ink);
  color: #fff;
  text-align: center;
  overflow: hidden;
}

/* a slow warm dawn behind the devices — cinematic, never busy */
.hero__glow {
  position: absolute; left: 50%; top: 38%;
  width: min(1500px, 165vw); aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(closest-side, rgba(224, 138, 74, .30), rgba(224, 138, 74, 0) 70%),
    radial-gradient(closest-side, rgba(127, 176, 220, .16), rgba(127, 176, 220, 0) 68%);
  background-position: 42% 44%, 66% 62%;
  background-size: 92% 92%, 78% 78%;
  background-repeat: no-repeat;
  filter: blur(14px);
  pointer-events: none;
}
.hero__vignette {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 78% at 50% 30%, rgba(6, 15, 28, 0) 40%, rgba(6, 15, 28, .82) 100%),
    linear-gradient(to bottom, rgba(6, 15, 28, .55), rgba(6, 15, 28, 0) 30%);
}
.hero > .wrap { position: relative; z-index: 2; }

.hero .h1 { max-width: 15ch; margin-inline: auto; }
.hero .lede {
  max-width: 54ch; margin-inline: auto;
  color: var(--text-light);
  font-size: clamp(16px, 1.35vw, 19px);
}

/* The two devices — day and night, side by side. Both source renders are 1160px
   tall, so driving them off a shared stage height keeps their scale honest and
   lets the composition track the viewport instead of overflowing it. */
.hero__stage {
  position: relative; z-index: 2;
  width: 100%; max-width: 900px;
  height: clamp(250px, 41vh, 470px);
  margin: clamp(22px, 3.4vh, 48px) auto 0;
  padding-inline: var(--pad);
  display: flex; align-items: flex-end; justify-content: center;
  gap: clamp(0px, 1.2vw, 22px);
}
.hero__phone { height: 100%; }
.hero__phone > .float { height: 100%; }
.hero__phone img {
  height: 100%; width: auto;
  filter: drop-shadow(0 34px 60px rgba(0, 0, 0, .58));
}
.hero__phone--night { margin-left: -2.5%; }

.hero__actions {
  position: relative; z-index: 3;
  margin-top: clamp(22px, 3.4vh, 44px);
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
}

.scroll-cue {
  position: absolute; left: 50%; bottom: 16px; z-index: 2;
  transform: translateX(-50%);
  font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--text-faint);
}
/* only shown when the composition leaves real room beneath the buttons */
@media (max-height: 1000px) { .scroll-cue { display: none; } }
.scroll-cue span {
  display: block; width: 1px; height: 30px; margin: 12px auto 0;
  background: linear-gradient(to bottom, var(--gold), transparent);
  animation: cue 2.4s var(--ease) infinite;
}
@keyframes cue {
  0%, 100% { opacity: 0; transform: scaleY(.3); transform-origin: top; }
  40%      { opacity: 1; transform: scaleY(1);  transform-origin: top; }
  70%      { opacity: 0; transform: scaleY(1);  transform-origin: bottom; }
}

/* ------------------------------------------------------------ store badges */

.badge {
  display: inline-flex; align-items: center; gap: 10px;
  height: 52px; padding: 0 20px 0 17px;
  border-radius: 11px;
  background: #000; color: #fff;
  border: 1px solid rgba(255, 255, 255, .22);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease),
              border-color .35s var(--ease);
}
.badge:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, .45);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .35);
}
.badge svg { flex: none; }
.badge__txt { display: flex; flex-direction: column; line-height: 1.12; text-align: left; }
.badge__txt b {
  font-size: 17px; font-weight: 500; letter-spacing: -.02em;
}
.badge__txt i {
  font-style: normal; font-size: 9.5px; letter-spacing: .06em;
  text-transform: uppercase; opacity: .82;
}
.sec--paper .badge, .sec--gray .badge { border-color: rgba(0, 0, 0, .1); }
.sec--paper .badge:hover, .sec--gray .badge:hover { border-color: rgba(0, 0, 0, .28); }

.badge-note {
  margin: 16px 0 0;
  font-size: 12px; letter-spacing: .02em;
  color: var(--text-faint);
}
.sec--paper .badge-note, .sec--gray .badge-note { color: var(--text-mid); }

/* --------------------------------------------------------------- trailer   */

.trailer { background: linear-gradient(to bottom, var(--ink), var(--ink-2) 42%); }
.trailer::before {
  content: ""; position: absolute; inset: -30% -10% auto -10%; height: 70%;
  background: radial-gradient(closest-side, rgba(201, 161, 90, .13), transparent 72%);
  pointer-events: none;
}

.device {
  position: relative;
  width: min(330px, 74vw);
  margin: clamp(34px, 5vw, 56px) auto 0;
  aspect-ratio: 296 / 608;
  filter: drop-shadow(0 40px 70px rgba(0, 0, 0, .55));
}
.device__frame {
  position: absolute; inset: 0; z-index: 3;
  width: 100%; height: 100%;
  pointer-events: none;
}
/* screen hole measured from the frame artwork itself */
.device__screen {
  position: absolute;
  left: 4.7297%; top: 1.9737%;
  width: 90.5405%; height: 96.0526%;
  z-index: 1;
  overflow: hidden;
  border-radius: 12.4% / 6.1%;
  background: #000;
}
.device__screen video,
.device__screen img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}

/* the same shell used to hold a still screenshot rather than the trailer */
.device--still { margin: 0; width: 100%; }

.device__play {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  border: 0; padding: 0; cursor: pointer;
  background: linear-gradient(to bottom, rgba(6, 15, 28, .1), rgba(6, 15, 28, .42));
  border-radius: 12.4% / 6.1%;
  transition: opacity .45s var(--ease), visibility .45s var(--ease);
}
.device__play i {
  display: flex; align-items: center; justify-content: center;
  width: 62px; height: 62px; border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .5);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  transition: transform .35s var(--ease), background .35s var(--ease);
}
.device__play:hover i { transform: scale(1.07); background: rgba(255, 255, 255, .24); }
.device__play svg { margin-left: 3px; }
.device.is-playing .device__play { opacity: 0; visibility: hidden; }

/* ---------------------------------------------------------------- devices  */

.phone { filter: drop-shadow(0 30px 55px rgba(6, 16, 29, .30)); }
.sec--dark .phone { filter: drop-shadow(0 34px 60px rgba(0, 0, 0, .55)); }

.shot {
  border-radius: 0;                    /* corners are baked into the artwork */
  filter: drop-shadow(0 20px 40px rgba(6, 16, 29, .26));
}
.sec--dark .shot { filter: drop-shadow(0 22px 44px rgba(0, 0, 0, .5)); }

/* A fanned trio: the framed device forward, two bare screens tucked behind.
   Overlap comes from negative margins, not transforms, so the section still
   reserves the right height. */
.fan {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  margin-top: clamp(36px, 5vw, 64px);
  padding-bottom: clamp(18px, 3vw, 34px);
}
/* Direct children only — as a descendant selector these also caught the <img>s
   inside a framed device sitting in the fan, rotating its screen and resizing
   its frame. */
.fan > img { width: clamp(124px, 18vw, 214px); }
.fan > img:nth-child(1) { transform: rotate(-6deg); margin-right: -5%; z-index: 1; }
.fan > img:nth-child(2) { width: clamp(178px, 25.5vw, 296px);          z-index: 3; }
.fan > img:nth-child(3) { transform: rotate(6deg);  margin-left: -5%;  z-index: 2; }

/* a horizontal rail of screenshots */
.rail {
  display: flex; gap: clamp(14px, 2vw, 26px);
  margin-top: clamp(36px, 5vw, 60px);
  padding-inline: var(--pad);
  padding-bottom: 30px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* centred when the items fit, flush-left the moment they overflow */
  justify-content: safe center;
  /* soft edges so it reads as "this continues" on any background */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
}
.rail::-webkit-scrollbar { display: none; }
.rail::before, .rail::after { content: ""; flex: none; width: max(0px, calc((100vw - var(--wrap)) / 2 - var(--pad))); }
.rail img {
  flex: none;
  width: clamp(168px, 21vw, 244px);
  scroll-snap-align: center;
}
.rail--tall img { width: clamp(190px, 24vw, 280px); }

/* A two-up, offset pair. The offset is a margin, not a transform, so the
   section still reserves room for it. A bare screenshot reads larger than a
   framed render at equal width, so the framed one is given more. */
.duo {
  display: flex; align-items: flex-end; justify-content: center;
  gap: clamp(10px, 2.4vw, 40px);
  margin-top: clamp(34px, 5vw, 58px);
  padding-bottom: clamp(16px, 2.4vw, 30px);
}
.duo .shot  { width: clamp(132px, 20vw, 246px); }
.duo .phone { width: clamp(164px, 24.5vw, 296px); }
.duo > :first-child { margin-bottom: clamp(14px, 2.4vw, 30px); }

/* a pair shown in device shells rather than as bare screens */
.duo__dev { flex: none; width: clamp(146px, 21vw, 268px); }
.duo--devices { gap: clamp(16px, 3vw, 52px); }

/* split: text one side, device the other */
.split {
  display: grid; gap: clamp(38px, 6vw, 90px);
  grid-template-columns: 1fr 1fr;
  align-items: center;
}
.split--flip .split__media { order: -1; }
.split__media { display: flex; justify-content: center; }
.split__media img { width: min(100%, 330px); }
.split__text .lede { max-width: 38ch; }
/* a half-width column cannot carry full display size without wrapping raggedly */
.split__text .h2 { font-size: clamp(29px, 3.5vw, 47px); }

/* two equal feature columns (Two Ways to Explore) */
.pair {
  display: grid; gap: clamp(44px, 6vw, 78px);
  grid-template-columns: 1fr 1fr;
  /* the guided-tour column carries an extra cluster, so both columns hang from
     the top rather than stretching to match */
  align-items: start;
  margin-top: clamp(40px, 5vw, 70px);
}
.pair__col { text-align: center; }
.pair__col img { width: min(100%, 300px); margin-inline: auto; }
.pair__col .h3 { margin-top: clamp(26px, 3vw, 40px); }
.pair__col p {
  margin: 14px auto 0; max-width: 34ch;
  color: var(--text-mid); font-size: 16px;
}
.sec--dark .pair__col p { color: var(--text-light); }

/* ------------------------------------------------------------ full-bleed   */

.bleed {
  position: relative;
  min-height: min(86svh, 720px);
  padding-block: clamp(72px, 9vw, 130px);
  display: flex; align-items: center;
  color: #fff;
  overflow: hidden;
}
/* devices inside a band stay clear of its edges */
.bleed .split__media img { width: min(100%, 292px); }
.bleed__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  will-change: transform;
}
.bleed__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(6, 15, 28, .88) 0%, rgba(6, 15, 28, .62) 46%, rgba(6, 15, 28, .34) 100%);
}
.bleed__scrim--even {
  background: linear-gradient(to bottom, rgba(6, 15, 28, .58), rgba(6, 15, 28, .78));
}
.bleed .wrap { position: relative; z-index: 2; }
.bleed .lede { color: rgba(255, 255, 255, .8); }

/* A band with no photograph: a colour wash lit by the same soft glow as the
   hero, so it still feels cinematic rather than flat. */
.bleed--plain { background: var(--band-bg); }
.bleed__glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(58% 68% at 24% 28%, var(--band-a), transparent 72%),
    radial-gradient(52% 62% at 80% 76%, var(--band-b), transparent 74%);
}
.bleed--plain::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 84% at 50% 46%, transparent 42%, rgba(0, 0, 0, .5) 100%);
}

.bleed--amber {                          /* Local Gems — lamplit and warm */
  --band-bg: #17110a;
  --band-a: rgba(214, 168, 88, .30);
  --band-b: rgba(224, 128, 62, .18);
}
.bleed--night {                          /* Hidden Nessebar — moonlight and one gold marker */
  --band-bg: #08172b;
  --band-a: rgba(201, 161, 90, .24);
  --band-b: rgba(104, 146, 208, .16);
}
.bleed--dusk {                           /* Built around discovery — bookends the hero */
  --band-bg: var(--ink);
  --band-a: rgba(224, 138, 74, .24);
  --band-b: rgba(127, 176, 220, .15);
}

/* Guided-tour cluster: a tilted device on the left, two flat screens stepping
   down on the right. Sits inside the GPS column, so it is sized against half
   the wrap rather than the full page. */
.tour {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(12px, 1.5vw, 20px);
  margin: clamp(28px, 3.4vw, 44px) auto clamp(30px, 3.6vw, 46px);
  max-width: 100%;
}
.tour__frame {
  flex: none;
  width: clamp(104px, 11.5vw, 152px);
  transform: rotate(-5deg);
}
.tour__side {
  display: flex; align-items: flex-start;
  gap: clamp(10px, 1.3vw, 18px);
}
.tour__side figure { margin: 0; width: clamp(80px, 9vw, 120px); }
.tour__side figure:first-child { margin-top: clamp(12px, 2.2vw, 32px); }
.tour__side figcaption {
  margin-top: 10px;
  font-size: 11.5px; letter-spacing: .01em; line-height: 1.4;
  color: var(--text-mid);
}

/* below 900 the pair is a single column, so the cluster gets the full width */
@media (max-width: 900px) {
  .tour { gap: clamp(14px, 3vw, 34px); margin-top: clamp(30px, 5vw, 46px); }
  .tour__frame { width: clamp(132px, 27vw, 224px); }
  .tour__side { gap: clamp(12px, 2.6vw, 30px); }
  .tour__side figure { width: clamp(104px, 21vw, 174px); }
  .tour__side figcaption { font-size: 12.5px; }
}
/* three across stops fitting on a narrow phone */
@media (max-width: 430px) {
  .tour { flex-direction: column; gap: 26px; }
  .tour__frame { width: 48vw; }
  .tour__side { justify-content: center; gap: 14px; }
  .tour__side figure { width: 40vw; margin-top: 0 !important; }
}

/* a wide, chrome-free photograph pulled from the app itself */
.wide {
  margin: clamp(30px, 4vw, 54px) auto 0;
  max-width: 1320px;
  padding-inline: var(--pad);
}
.wide img { width: 100%; border-radius: clamp(10px, 1.2vw, 18px); }
.wide figcaption {
  margin-top: 16px;
  text-align: center;
  font-size: 13.5px; letter-spacing: .01em;
  color: var(--text-faint);
}

/* the framed centrepiece of a fan, when it is a device shell rather than an <img> */
.fan__dev { position: relative; flex: none; width: clamp(178px, 25.5vw, 296px); z-index: 3; }

/* a second screen tucked in behind the hero device, peeking out on the left */
.split__media > .phone { position: relative; z-index: 1; }
.split__media .split__behind {
  order: -1; flex: none;
  position: relative; z-index: 0;
  width: min(48%, 196px);
  align-self: center;
  margin-right: -12%;
  transform: rotate(-8deg) translateY(-5%);
}
/* on a phone the two together are wider than the column, so both give ground */
@media (max-width: 620px) {
  .split__media .split__behind { width: 34%; margin-right: -13%; }
  .split__media > .phone { width: min(74%, 250px); }
}

/* a bare screen tucked in beside a framed render */
.split__media { position: relative; }
.gems__pin {
  width: min(38%, 150px) !important;
  align-self: flex-end;
  margin: 0 -6% clamp(20px, 3vw, 44px) 0;
  order: -1;
}
@media (max-width: 900px) {
  .gems__pin { margin-inline: -4% 0; }
}
@media (max-width: 560px) {
  .gems__pin { display: none; }
}

/* --------------------------------------------------------------- features  */

.features {
  display: grid; gap: 2px;
  margin-top: clamp(34px, 4vw, 50px);
  padding: 0;                 /* .features IS the <ul> — without this it keeps
                                 the browser's 40px list indent */
  max-width: 460px;
}
.features li {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 15px 0;
  list-style: none;
  border-bottom: 1px solid rgba(0, 0, 0, .08);
}
.sec--dark .features li { border-bottom-color: rgba(255, 255, 255, .1); }
.features li:last-child { border-bottom: 0; }
.features svg { flex: none; margin-top: 1px; color: var(--gold); }
.features b { font-weight: 600; font-size: 16px; display: block; }
.features span { font-size: 14.5px; color: var(--text-mid); }
.sec--dark .features span { color: var(--text-faint); }

/* -------------------------------------------------------------- travellers */

/* No card chrome — seven quiet marks in a row reads calmer than seven boxes. */
.who {
  display: flex; flex-wrap: wrap; justify-content: center;
  /* sized so all seven sit on one row at desktop widths */
  gap: clamp(26px, 3.4vw, 44px) clamp(14px, 2vw, 26px);
  margin-top: clamp(46px, 5.5vw, 74px);
}
.who__item {
  flex: 0 0 auto;
  width: clamp(92px, 8.6vw, 120px);
  text-align: center;
  transition: transform .45s var(--ease);
}
.who__item:hover { transform: translateY(-3px); }
.who__item svg {
  width: 30px; height: 30px;
  margin: 0 auto 12px;
  color: #9a7838;
  opacity: .85;
}
.who__item b {
  display: block;
  font-size: 14px; font-weight: 500; letter-spacing: -.005em;
  color: var(--text-dark);
  line-height: 1.35;
}

/* ------------------------------------------------------------- stat strip  */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: clamp(26px, 4vw, 54px);
  margin-top: clamp(46px, 6vw, 74px);
  text-align: center;
}
.stats b {
  display: block;
  font-family: var(--serif);
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 400; line-height: 1;
  color: var(--gold);
}
.stats span {
  display: block; margin-top: 10px;
  font-size: 12px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--text-faint);
}

/* --------------------------------------------------------------- chapters  */

/* Each chapter carries its own hue so the five journeys read as five places
   rather than one long dark run. All are dark enough for white type and gold. */
.chapter { position: relative; padding-block: clamp(70px, 9vw, 130px); }
.chapter--people { background: #1b1529; }   /* deep violet   */
.chapter--frames { background: #1a1a1d; }   /* darkroom grey */
.chapter--shores { background: #05202b; }   /* sea teal      */
.chapter--icons  { background: #1f1011; }   /* oxblood       */
.chapter__no {
  font-family: var(--sans);
  font-size: 11px; font-weight: 600; letter-spacing: .2em;
  color: rgba(255, 255, 255, .34);
  margin-bottom: 14px;
}

/* ------------------------------------------------------------------ footer */

.foot {
  background: var(--ink);
  color: var(--text-faint);
  padding-block: clamp(50px, 6vw, 76px) 40px;
  font-size: 13px;
}
.foot__top {
  display: flex; flex-wrap: wrap; gap: 32px;
  justify-content: space-between; align-items: flex-start;
  padding-bottom: 34px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.foot__brand img { width: 128px; opacity: .95; }
.foot__brand p { margin: 16px 0 0; max-width: 30ch; line-height: 1.6; }
.foot__cols { display: flex; flex-wrap: wrap; gap: clamp(34px, 6vw, 78px); }
.foot__col h5 {
  margin: 0 0 14px;
  font-size: 11px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(255, 255, 255, .82);
}
.foot__col a { display: block; padding: 5px 0; transition: color .3s var(--ease); }
.foot__col a:hover { color: #fff; }
.foot__bottom {
  padding-top: 26px;
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between;
  font-size: 12px;
}

.foot__col--contact { max-width: 220px; }
/* sits under the "Contact" heading (~67px wide), a touch larger so the
   wordmark stays legible */
.foot__cc { width: 96px; margin: 2px 0 14px; opacity: .95; }

/* ------------------------------------------------------- legal / privacy  */

.legal {
  padding-block: calc(var(--nav-h) + clamp(52px, 8vw, 96px)) clamp(70px, 9vw, 120px);
  background: var(--paper);
}
.legal .wrap { max-width: 760px; }

.legal__head { padding-bottom: clamp(30px, 4vw, 46px); border-bottom: 1px solid rgba(0, 0, 0, .1); }
.legal__head .h2 { margin-bottom: 10px; }
.legal__date {
  margin: 0 0 22px;
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-mid);
}
.legal__head .lede { margin-top: 0; max-width: none; }

.legal__sec { padding-block: clamp(26px, 3.4vw, 40px); }
.legal__sec + .legal__sec { border-top: 1px solid rgba(0, 0, 0, .07); }
.legal__sec .h4 { margin-bottom: 14px; font-size: 19px; }
.legal__sec p {
  margin: 0 0 15px;
  color: #38383d;
  font-size: 16.5px; line-height: 1.62;
}
.legal__sec p:last-child { margin-bottom: 0; }
.legal__sec a { color: #8a6a2c; text-decoration: underline; text-underline-offset: 2px; }

/* the safety section is the one people must actually read */
.legal__sec--flag {
  margin-block: 10px;
  padding: clamp(24px, 3.4vw, 38px);
  border: 0; border-radius: 16px;
  background: var(--paper-2);
  border-left: 3px solid var(--gold);
}
.legal__sec--flag + .legal__sec { border-top: 0; }

.legal__operator {
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: clamp(30px, 4vw, 44px);
  border-top: 1px solid rgba(0, 0, 0, .1);
  color: var(--text-mid); font-size: 15px; line-height: 1.7;
}
.legal__operator-logo { width: 168px; margin-bottom: 18px; }
.legal__operator p { margin: 0 0 12px; }
.legal__operator b { color: var(--text-dark); font-weight: 600; }
.legal__operator a { color: #8a6a2c; }

/* ------------------------------------------------------------------ reveal */

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: .09s; }
.reveal[data-d="2"] { transition-delay: .18s; }
.reveal[data-d="3"] { transition-delay: .27s; }
.reveal[data-d="4"] { transition-delay: .36s; }

.float { animation: float 7s ease-in-out infinite; }
.float--b { animation-duration: 8.5s; animation-delay: -2.5s; }
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-11px); }
}
/* the hero devices carry their own offsets, so float them via a wrapper */
.hero__phone--day .float   { animation-duration: 8s; }
.hero__phone--night .float { animation-duration: 9.4s; animation-delay: -3s; }

/* ------------------------------------------------------------- responsive  */

@media (max-width: 900px) {
  .split, .pair { grid-template-columns: 1fr; }
  .split--flip .split__media { order: 0; }
  .split__text { text-align: center; }
  .split__text .lede, .split__text .features { margin-inline: auto; }
  .split__text .rule { margin-inline: auto; }
  .bleed__scrim {
    background: linear-gradient(to bottom, rgba(6, 15, 28, .5), rgba(6, 15, 28, .85));
  }
}

@media (max-width: 760px) {
  .nav__links { display: none; }
  .nav__burger { display: block; }
  .hero__stage { gap: 0; max-width: 460px; }
  .hero__phone { width: 52%; }
  .hero__phone--night { width: 48%; margin-left: -8%; }
  /* direct children only, and sized so the trio fits the column without
     spilling past the section's edges */
  .fan > img   { width: 28vw; }
  .fan__dev    { width: 39vw; }
  .fan > img:nth-child(1) { transform: rotate(-7deg); margin-right: -8%; }
  .fan > img:nth-child(3) { transform: rotate(7deg);  margin-left: -8%; }
  .duo img:first-child { transform: translateY(16px); }
  .rail::before, .rail::after { width: 0; }
  .foot__top { flex-direction: column; }
}

@media (max-width: 480px) {
  body { font-size: 16px; }
  .badge { height: 48px; padding: 0 16px 0 14px; }
  .badge__txt b { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .float, .scroll-cue span { animation: none; }
  .bleed__bg { transform: none !important; }
}