/* ==========================================================================
   Nomadra — stylesheet
   --------------------------------------------------------------------------
   Order of this file:
     1. Design tokens
     2. Reset and base elements
     3. Layout utilities
     4. Motion (reveals, split text, curtains, loops)
     5. Components (button, badge, section head, cards, carousels, form)
     6. Page sections, top to bottom
     7. Responsive
     8. Reduced motion

   Naming follows BEM: .block, .block__element, .block--variant.
   Change a colour or a size once in section 1 and the whole page follows.

   Three rules worth knowing before editing:
   - Every animated "hidden" state is written under `html.js`. If the scripts
     never run, nothing is hidden. See section 4.
   - Sizes live in tokens, redefined at each breakpoint in section 7. A heading
     therefore never carries its own media query.
   - Grid columns are always minmax(0, …), never 1fr on its own: a plain 1fr
     refuses to shrink below its content and pushes the page sideways.
   ========================================================================== */

/* ==========================================================================
   1. Design tokens
   ========================================================================== */

:root {
  /* --- Palette. These ten lines are the whole thing. ---
     The accent comes in three shades on purpose: the plain blue passes on
     white and on the pale page, but it disappears on a photo, so text and
     dots laid over an image use the lit version. Change one, change all three
     — the contrast ratios are in the README. */
  --color-accent: #2739ff; /* buttons, index numbers, icons     6.7:1 on white */
  --color-accent-strong: #1c2ad6; /* the same blue one step down (hover)      */
  --color-accent-light: #7f8cff; /* the same blue lit up, for dark panels     */

  --color-page: #ecf2f6; /* page background */
  --color-surface: #ffffff; /* cards laid on the page */
  --color-surface-2: #fbfbfb; /* cards that need to step back a notch */
  --color-deep: #020e26; /* packages band, footer */
  --color-deep-2: #101a2d; /* cards inside the dark band */
  --color-sky: #b0dffb; /* the pale blue "why choose us" band */
  --color-sky-soft: #e6f6ff; /* icon discs, quiet fills */

  /* Text. Never hard-code a grey: derive it from the ink. */
  --color-ink: #030505;
  --color-ink-soft: rgba(0, 0, 0, 0.6);
  --color-line: rgba(0, 0, 0, 0.12);
  --on-dark: #ffffff;
  --on-dark-soft: rgba(255, 255, 255, 0.6);
  --on-dark-line: rgba(255, 255, 255, 0.14);
  --on-dark-fill: rgba(255, 255, 255, 0.06);

  /* --- Typography --- */
  --font-display: "Arimo", Arial, "Helvetica Neue", sans-serif;
  --font-body: "Inter Tight", system-ui, -apple-system, sans-serif;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semi: 600;
  --weight-bold: 700;

  /* Type scale, measured on the reference. Redefined in section 7.
     The wordmark is sized so it spans the viewport minus a margin; a longer
     brand name needs a smaller number here (the reference word had one narrow
     letter more, and sat at 27vw). */
  --word-size: 24vw; /* the giant hero wordmark */
  --h2-size: 60px;
  --h2-letter: -0.17rem;
  --h3-size: 28px;
  --h4-size: 24px;
  --text-large: 20px;
  --text-medium: 18px;
  --text-base: 16px;
  --counter-size: 80px;
  --logo-size: 15.3rem;
  --mail-size: 52px;
  --foot-link-size: 28px;
  --index-size: 24px;

  --line-tight: 1; /* headings */
  --line-title: 1.2; /* card titles, links */
  --line-body: 1.4; /* paragraphs */
  --line-label: 1.5; /* counter captions */
  --letter-small: -0.02em;

  /* --- Spacing. Same ladder as the reference: rem steps of a quarter. --- */
  --gap-01: 0.25rem;
  --gap-02: 0.5rem;
  --gap-03: 0.75rem;
  --gap-04: 1rem;
  --gap-05: 1.25rem;
  --gap-06: 1.5rem;
  --gap-07: 2rem;
  --gap-08: 2.5rem;
  --gap-09: 3rem;
  --gap-10: 3.5rem;
  --gap-11: 4.5rem;

  --section-gap: 8rem; /* the vertical air between two sections */
  --shell-width: 82rem; /* 1312px, padding included */
  --shell-pad: 1rem;

  /* --- Radii --- */
  --radius-sm: 1rem;
  --radius-md: 1.25rem;
  --radius-lg: 1.5rem;
  --radius-xl: 1.75rem;
  --radius-2xl: 2rem;
  --radius-pill: 999px;

  /* --- Motion. The four curves the reference animates with, written as the
     bezier that matches each named easing. --- */
  --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);

  --reveal-time: 700ms;
  --hover-time: 300ms;

  /* Layout numbers the destinations block needs in two places. */
  --places-card: 447px;
  --places-index: 281px;
  --places-scroll: 3600px; /* how long the pinned block stays pinned */
  --places-stage: 1050px; /* the height of what stays on screen */
}

/* ==========================================================================
   2. Reset and base elements
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Chromium leaves <summary> in content-box whatever the universal rule says. */
summary {
  box-sizing: border-box;
}

html {
  /* clip, not hidden: hidden would turn the root into a scroll container and
     break every position: sticky further down the page. */
  overflow-x: clip;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-page);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--line-body);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
p,
figure,
blockquote {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

img,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

svg {
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

hr {
  border: 0;
  border-top: 1px solid var(--on-dark-line);
  margin: 0;
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--gap-04);
  z-index: 100;
  padding: var(--gap-03) var(--gap-05);
  border-radius: var(--radius-pill);
  background: var(--color-deep);
  color: var(--on-dark);
  font-weight: var(--weight-medium);
  transition: top 200ms var(--ease-out-quart);
}

.skip-link:focus {
  top: var(--gap-04);
}

/* ==========================================================================
   3. Layout utilities
   ========================================================================== */

.shell {
  width: 100%;
  max-width: var(--shell-width);
  margin-inline: auto;
  padding-inline: var(--shell-pad);
}

/* Every heading in the page uses this one block. Each section sets how wide
   its title is allowed to get through --title-max; without that ceiling a
   title inside a centred flex column would size itself to max-content and
   run off the page on one very long line. */
.section-title {
  width: 100%;
  max-width: var(--title-max, none);
  font-family: var(--font-display);
  font-size: var(--h2-size);
  font-weight: var(--weight-normal);
  line-height: var(--line-tight);
  letter-spacing: var(--h2-letter);
  color: var(--color-ink);
}

.section-title--light {
  color: var(--on-dark);
}

.section-lead {
  width: 100%;
  max-width: var(--lead-max, 37rem);
  color: var(--color-ink-soft);
  line-height: var(--line-body);
}

.section-lead--light {
  color: var(--on-dark-soft);
}

.section-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-05);
}

.section-head--center {
  align-items: center;
  text-align: center;
}

.section-head--center .section-title,
.section-head--center .section-lead {
  margin-inline: auto;
}

.section-head--split {
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--gap-09);
}

.section-head--split > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-05);
  max-width: 41rem;
}

.section-head--split .section-lead {
  max-width: 27rem;
}

/* ==========================================================================
   4. Motion
   --------------------------------------------------------------------------
   Everything hidden here is hidden *only* when `html.js` is set, and the
   class is set by enhance.js in <head>. Scripts fail to load → the page is
   simply readable, with no empty blocks and no page-long white gaps.

   The reveal threshold is 15% of the viewport measured on the *screen*, not
   on the element: a threshold expressed as a share of the element would keep
   anything taller than the window invisible for ever. See main.js.
   ========================================================================== */

.js [data-reveal] {
  opacity: 0;
  will-change: transform, opacity;
}

.js [data-reveal="rise"] {
  transform: translateY(48px);
}

.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--reveal-time) var(--ease-out-quart),
    transform var(--reveal-time) var(--ease-out-quart);
  transition-delay: var(--reveal-delay, 0ms);
}

/* --- Split text -------------------------------------------------------
   main.js wraps each character (or each line) of a heading in a span. The
   spans below are what actually moves; the heading itself never does. */

.split__char,
.split__line {
  display: inline-block;
  will-change: transform, opacity;
}

.split__line {
  display: block;
}

/* A line mask is a strip with clipped overflow, so the line slides out from
   under its own edge rather than fading in place. */
.split__mask {
  display: block;
  overflow: clip;
}

.js [data-split] .split__char {
  opacity: 0;
  transform: translateY(60%);
}

.js [data-split][data-split-mask] .split__char {
  opacity: 0;
  transform: translateY(100%);
}

.js [data-split] .split__line {
  opacity: 0;
  transform: translateY(100%);
}

.js [data-split].is-in .split__char,
.js [data-split].is-in .split__line {
  opacity: 1;
  transform: none;
  transition:
    opacity 700ms var(--ease-out-quart),
    transform 700ms var(--ease-out-quart);
  transition-delay: calc(var(--reveal-delay, 0ms) + var(--stagger, 0ms));
}

.js [data-split][data-split-mask].is-in .split__char {
  transition-timing-function: var(--ease-in-out-quart);
  transition-duration: 1000ms;
}

/* The story paragraph is the one text tied to the scroll position rather
   than to a single trigger: each character lifts from 20% to full opacity as
   the block crosses the middle of the screen. main.js sets --lit. */
.js [data-split-scrub] .split__char {
  opacity: 0.2;
  transform: none;
  transition: opacity 260ms linear;
}

.js [data-split-scrub] .split__char.is-lit {
  opacity: 1;
}

/* --- Curtains ---------------------------------------------------------
   The two story photos uncover sideways, the contact photo downwards. The
   wrapper clips, the image inside is full size, so nothing is scaled. */

.js [data-curtain] {
  overflow: clip;
}

/* 101% and not 100%: the engine rounds the clip edge to 1/64th of a pixel and
   leaves a hairline of image showing at exactly 100%. */
.js .story__photo--left img,
.js .story__photo--right img {
  clip-path: inset(0 101% 0 0);
  transition: clip-path 700ms var(--ease-in-out-quart);
}

.js .story__photo.is-in img {
  clip-path: inset(0 0 0 0);
}

.js .story__photo--right img {
  transition-delay: 590ms;
}

.js [data-curtain] img {
  clip-path: inset(0 0 101% 0);
  transition: clip-path 800ms var(--ease-in-out-quart);
}

.js [data-curtain].is-in img {
  clip-path: inset(0 0 0 0);
}

/* --- Counters ---------------------------------------------------------
   main.js turns "189K+" into one reel per character. Each reel holds the
   digits 0-9 (or the single symbol) stacked vertically and slides to the
   right one. */

.counter {
  display: flex;
  font-family: var(--font-display);
  font-size: var(--counter-size);
  line-height: var(--line-tight);
}

.counter__reel {
  display: block;
  height: 1em;
  overflow: clip;
}

.counter__digits {
  display: block;
  transform: translateY(var(--stop, 0));
}

.js .counter.is-in .counter__digits {
  transition: transform 2000ms var(--ease-in-out-quad);
  transition-delay: var(--stagger, 0ms);
}

.js .counter:not(.is-in) .counter__digits {
  transform: translateY(0);
}

.counter__digit {
  display: block;
  height: 1em;
}

/* --- Loops ------------------------------------------------------------
   Two strips scroll for ever: the three reason cards, and the destination
   cards below 992px. Both are written twice in the markup and travel exactly
   half their own height, which is why the seam never shows. */

@keyframes strip-loop {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-50%);
  }
}

/* ==========================================================================
   5. Components
   ========================================================================== */

/* --- Button ------------------------------------------------------------
   A white pill holding the label twice. On hover the pair slides up by one
   label height, so the second copy takes the place of the first; the disc
   turns a quarter turn and its arrow leaves through the right edge while a
   second arrow comes in from the left. */

.button {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-03);
  padding: var(--gap-02);
  padding-left: var(--gap-06);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-ink);
  font-family: var(--font-display);
  font-weight: var(--weight-semi);
  line-height: var(--line-tight);
  box-shadow: 0 1px 2px rgba(2, 14, 38, 0.06);
}

/* The pill is exactly one label tall and clips: the second copy waits just
   below the edge. 1.3em and not 1em — at 1em the descenders are cut off. */
.button__pill {
  display: block;
  height: 1.3em;
  overflow: clip;
}

.button__text {
  display: block;
  height: 1.3em;
  line-height: 1.3;
  transition: transform var(--hover-time) var(--ease-in-out-quart);
}

.button:hover .button__text,
.button:focus-visible .button__text {
  transform: translateY(-100%);
}

.button__disc {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  overflow: clip;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--on-dark);
  transition:
    transform var(--hover-time) var(--ease-in-out-quart),
    background-color var(--hover-time) var(--ease-in-out-quart);
}

.button:hover .button__disc,
.button:focus-visible .button__disc {
  transform: rotate(-45deg);
  background: var(--color-accent-strong);
}

/* 200% and not 100%: the arrow is 16px inside a 40px disc, so one own-width
   still leaves it half visible through the clipped edge. */
.button__arrow {
  grid-area: 1 / 1;
  width: 16px;
  height: 16px;
  transition: transform 400ms var(--ease-in-out-quart);
  transition-delay: 250ms;
}

.button__arrow--ghost {
  transform: translateX(-200%);
}

.button:hover .button__arrow,
.button:focus-visible .button__arrow {
  transform: translateX(200%);
}

.button:hover .button__arrow--ghost,
.button:focus-visible .button__arrow--ghost {
  transform: translateX(0);
}

/* Two plainer variants: a bordered one on the pale blue band, a solid one
   for the form. */
.button--ghost {
  gap: var(--gap-02);
  padding: var(--gap-03) var(--gap-05);
  border: 1px solid var(--color-line);
  background: var(--color-surface);
  transition: background-color var(--hover-time) var(--ease-out-quart);
}

.button--ghost svg {
  width: 16px;
  height: 16px;
  transition: transform var(--hover-time) var(--ease-out-quart);
}

.button--ghost:hover svg {
  transform: translateX(4px);
}

.button--solid {
  padding: var(--gap-04) var(--gap-07);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--on-dark);
  cursor: pointer;
  transition: background-color var(--hover-time) var(--ease-out-quart);
}

.button--solid:hover {
  background: var(--color-accent-strong);
}

.button--pale {
  padding: var(--gap-04) var(--gap-07);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-ink);
  font-family: var(--font-display);
  font-weight: var(--weight-semi);
  cursor: pointer;
  transition: background-color var(--hover-time) var(--ease-out-quart);
}

.button--pale:hover {
  background: var(--color-sky-soft);
}

/* --- Badge -------------------------------------------------------------
   The little capsule above every section title. */

.badge {
  align-self: flex-start;
  padding: var(--gap-02) var(--gap-04);
  border-radius: var(--radius-pill);
  background: var(--on-dark-fill);
  color: var(--on-dark);
  font-size: var(--text-base);
}

.badge--dark {
  background: var(--color-deep);
}

.section-head--center .badge {
  align-self: center;
}

/* --- Brand and navigation ---------------------------------------------- */

.brand {
  font-family: var(--font-display);
  font-size: var(--h4-size);
  font-weight: var(--weight-semi);
  letter-spacing: var(--letter-small);
  color: var(--on-dark);
}

.nav__list {
  display: flex;
  align-items: center;
  gap: var(--gap-01);
  padding: var(--gap-01);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.24);
  backdrop-filter: blur(6px);
}

.nav__link {
  display: block;
  padding: var(--gap-03) var(--gap-05);
  border-radius: var(--radius-pill);
  font-weight: var(--weight-medium);
  line-height: var(--line-title);
  color: var(--on-dark);
  transition:
    background-color var(--hover-time) var(--ease-out-quart),
    color var(--hover-time) var(--ease-out-quart);
}

.nav__link:hover {
  background: rgba(255, 255, 255, 0.4);
}

.nav__link.is-current {
  background: var(--color-surface);
  color: var(--color-ink);
}

.burger {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  cursor: pointer;
}

.burger__bar {
  display: block;
  width: 18px;
  height: 2px;
  margin: 4px auto;
  background: var(--color-ink);
  transition: transform 200ms var(--ease-out-quart);
}

.burger[aria-expanded="true"] .burger__bar:first-child {
  transform: translateY(3px) rotate(45deg);
}

.burger[aria-expanded="true"] .burger__bar:last-child {
  transform: translateY(-3px) rotate(-45deg);
}

/* --- Video player ------------------------------------------------------
   The card shows the poster until the visitor presses play; only then is the
   <video> created and the file requested. */

.player {
  position: relative;
  width: 100%;
  height: 18.9375rem;
  overflow: clip;
  border-radius: var(--radius-md);
  background: var(--color-deep-2);
}

.player__poster,
.player video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.player__button {
  position: absolute;
  right: var(--gap-04);
  bottom: var(--gap-04);
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-ink);
  cursor: pointer;
  transition: transform var(--hover-time) var(--ease-out-quart);
}

.player__button:hover {
  transform: scale(1.06);
}

.player__icon {
  grid-area: 1 / 1;
  width: 22px;
  height: 22px;
}

.player__icon--pause,
.player.is-playing .player__icon--play {
  display: none;
}

.player.is-playing .player__icon--pause {
  display: block;
}

/* --- Form -------------------------------------------------------------- */

.form {
  display: flex;
  flex-direction: column;
  gap: var(--gap-05);
}

.form__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--gap-05);
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--gap-02);
}

.field__label {
  font-weight: var(--weight-medium);
  line-height: var(--line-title);
}

.field__input {
  width: 100%;
  padding: var(--gap-04);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  transition: border-color var(--hover-time) var(--ease-out-quart);
}

.field__input:hover,
.field__input:focus {
  border-color: var(--color-accent);
}

.field__input--area {
  resize: vertical;
  min-height: 8rem;
}

.form__actions {
  margin: 0;
}

.form__note:empty {
  display: none;
}

.form__note {
  margin: 0;
  color: var(--color-accent);
  font-weight: var(--weight-medium);
}

/* ==========================================================================
   6. Page sections, top to bottom
   ========================================================================== */

/* --- 6.1 Hero ---------------------------------------------------------- */

.hero {
  position: relative;
  padding-top: var(--gap-05);
  padding-bottom: var(--gap-09);
  overflow: clip;
  background:
    linear-gradient(rgba(102, 102, 102, 0.12) 9.21%, rgba(0, 0, 0, 0.2) 90.57%),
    url("../img/hero-mountain-dawn.webp") 50% / cover no-repeat;
  color: var(--on-dark);
}

.hero__haze {
  position: absolute;
  inset: 0 0 auto;
  width: 100%;
  height: 36.1873rem;
  object-fit: cover;
  pointer-events: none;
}

.hero__bar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-05);
}

.hero__word {
  position: relative;
  z-index: 1;
  margin-top: var(--gap-10);
  font-family: var(--font-display);
  font-size: var(--word-size);
  font-weight: var(--weight-bold);
  line-height: 0.7;
  letter-spacing: -0.035em;
  text-align: center;
  /* The word fades into the page from its own middle downwards. */
  background-image: linear-gradient(185deg, #fff 50.59%, rgba(153, 153, 153, 0) 90%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.hero__grid {
  position: relative;
  z-index: 2;
  top: -52px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--gap-09);
}

.hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-06);
  max-width: 37rem;
}

.hero__title {
  font-family: var(--font-display);
  font-size: var(--h2-size);
  font-weight: var(--weight-normal);
  line-height: var(--line-tight);
  letter-spacing: var(--h2-letter);
}

.hero__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-04);
  width: 100%;
  max-width: 25.5rem;
  padding: var(--gap-06) var(--gap-03) var(--gap-03);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  color: var(--color-ink);
  text-align: center;
}

.hero__card-title {
  display: flex;
  align-items: center;
  gap: var(--gap-03);
  font-size: var(--text-large);
  font-weight: var(--weight-medium);
  line-height: var(--line-title);
}

.hero__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
}

.hero__card-text {
  max-width: 20rem;
  color: var(--color-ink-soft);
}

.hero__card .player {
  max-width: 24.125rem;
}

/* --- 6.2 Story --------------------------------------------------------- */

.story {
  padding-block: var(--section-gap);
}

.story__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 0.8fr);
  align-items: start;
  gap: var(--gap-09);
}

.story__photo {
  overflow: clip;
  border-radius: var(--radius-lg);
}

.story__photo--left {
  aspect-ratio: 1;
}

.story__photo--right {
  margin-top: 8rem;
  aspect-ratio: 500 / 458;
}

.story__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.story__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-08);
}

.story__text {
  font-family: var(--font-display);
  font-size: var(--h3-size);
  font-weight: var(--weight-normal);
  line-height: var(--line-title);
  letter-spacing: var(--letter-small);
}

.counters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap-05);
  margin-top: 3.5rem;
}

.counter-card {
  display: flex;
  flex-direction: column;
  gap: var(--gap-04);
  padding: var(--gap-07);
  border-radius: var(--radius-2xl);
  background: var(--color-surface);
}

.counter-card--accent {
  background: var(--color-accent);
  color: var(--on-dark);
}

.counter-card__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-left: auto;
  border-radius: 50%;
  background: var(--color-sky-soft);
  color: var(--color-ink);
}

.counter-card__icon svg {
  width: 22px;
  height: 22px;
}

.counter-card .counter {
  margin-top: 3.5rem;
}

.counter-card__label {
  font-family: var(--font-display);
  font-size: var(--text-large);
  line-height: var(--line-label);
  text-transform: uppercase;
}

/* --- 6.3 Destinations --------------------------------------------------
   Desktop: the stage is a tall empty block; everything you see lives in the
   sticky child. main.js reads how far the stage has travelled and writes a
   0→1 progress value, which moves the list and lights the index.

   Both the tall stage and the pinning are behind `html.js`: with no script
   the section collapses to its natural height and the cards simply stack. */

.places {
  padding-bottom: var(--section-gap);
}

.js .places__stage {
  height: var(--places-scroll);
}

.js .places__pin {
  position: sticky;
  top: 2.5rem;
  height: var(--places-stage);
}

.places__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--places-card) var(--places-index);
  align-items: start;
  gap: var(--gap-09);
  height: 100%;
}

.places__intro {
  padding-top: 8rem;
}

.places__viewport {
  height: 100%;
  overflow: clip;
}

.places__list {
  display: flex;
  flex-direction: column;
  gap: var(--gap-05);
  transform: translateY(calc(var(--progress, 0) * -60%));
}

.place {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--gap-04);
  padding: var(--gap-03) var(--gap-03) var(--gap-04);
  border-radius: var(--radius-2xl);
  background: var(--color-surface);
}

.place__photo {
  grid-column: 1 / -1;
  overflow: clip;
  border-radius: var(--radius-lg);
  aspect-ratio: 423 / 322;
}

.place__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms var(--ease-in-out-quart);
}

.place:hover .place__photo img {
  transform: scale(1.15);
}

.place__body {
  display: flex;
  flex-direction: column;
  gap: var(--gap-02);
  padding-left: var(--gap-02);
}

.place__rating,
.place__where {
  display: flex;
  align-items: center;
  gap: var(--gap-02);
  color: var(--color-ink-soft);
}

.place__rating svg {
  width: 15px;
  height: 15px;
  color: var(--color-ink);
}

.place__where svg {
  width: 15px;
  height: 15px;
}

.place__name {
  font-family: var(--font-display);
  font-size: var(--h3-size);
  line-height: var(--line-title);
  letter-spacing: var(--letter-small);
}

.place__go {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  overflow: clip;
  border-radius: 50%;
  background: var(--color-sky-soft);
}

.place__go svg {
  width: 18px;
  height: 18px;
  transition: transform 500ms var(--ease-in-out-quart);
}

.place:hover .place__go svg {
  transform: translateX(100%);
}

.places__index {
  display: flex;
  flex-direction: column;
  padding-top: 22rem;
}

.places__entry {
  position: relative;
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  align-items: center;
  gap: var(--gap-04);
  padding-block: var(--gap-05);
}

.places__number {
  font-family: var(--font-display);
  font-size: var(--index-size);
  line-height: var(--line-tight);
  color: var(--color-accent);
  transform: scale(0);
  transform-origin: center;
  transition: transform 400ms var(--ease-out-quart);
}

.places__entry.is-active .places__number {
  transform: scale(1);
}

.places__label {
  font-family: var(--font-display);
  text-align: center;
  opacity: 0.2;
  transition: opacity 400ms linear;
}

.places__entry.is-active .places__label {
  opacity: 1;
}

.places__rule {
  position: absolute;
  right: 0;
  bottom: 0;
  display: block;
  width: calc(100% - 3.5rem);
  height: 1px;
  background: var(--color-line);
}

.places__rule-fill {
  display: block;
  width: 0;
  height: 100%;
  background: var(--color-accent);
  transition: width 400ms var(--ease-out-quart);
}

.places__entry.is-active .places__rule-fill {
  width: 100%;
}

/* --- 6.4 Packages ------------------------------------------------------ */

.packages {
  padding-block: var(--section-gap);
  background: var(--color-deep);
  color: var(--on-dark);
}

.packages .section-head {
  --title-max: 49rem;
  --lead-max: 37rem;
}

.packages__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-05);
  margin-top: 3.5rem;
}

.package {
  position: relative;
  display: grid;
  grid-template-columns: 286px minmax(0, 1fr);
  gap: var(--gap-06);
  padding: var(--gap-02) var(--gap-04) var(--gap-02) var(--gap-02);
  border-radius: var(--radius-xl);
  background: var(--color-deep-2);
  height: 100%;
}

.package__photo {
  overflow: clip;
  border-radius: var(--radius-lg);
  aspect-ratio: 286 / 310;
}

.package__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms var(--ease-in-out-quart);
}

.package:hover .package__photo img {
  transform: scale(1.2);
}

.package__body {
  display: flex;
  flex-direction: column;
  gap: var(--gap-03);
  padding-block: var(--gap-05);
  padding-right: 3rem;
}

.package__title {
  max-width: 12rem;
  font-family: var(--font-display);
  font-size: var(--h4-size);
  line-height: var(--line-title);
  letter-spacing: var(--letter-small);
}

.package__text {
  color: var(--on-dark-soft);
}

.package__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-04);
  margin-top: auto;
}

.package__price {
  font-weight: var(--weight-medium);
  line-height: var(--line-title);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.package__score {
  display: flex;
  align-items: center;
  gap: var(--gap-02);
  color: var(--on-dark-soft);
}

.package__score svg {
  width: 15px;
  height: 15px;
  color: var(--on-dark);
}

.package__go {
  position: absolute;
  top: var(--gap-05);
  right: var(--gap-04);
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  overflow: clip;
  border-radius: 50%;
  background: var(--on-dark-fill);
}

.package__go svg {
  width: 16px;
  height: 16px;
  transition: transform 500ms var(--ease-in-out-quart);
}

.package:hover .package__go svg {
  transform: translateX(100%);
}

.packages__cta {
  display: flex;
  justify-content: center;
  margin-top: 3.5rem;
}

/* --- 6.5 Services ------------------------------------------------------
   Four <details>. The row opens on hover on a pointer device (main.js) and
   on click or Enter everywhere, which is what makes it usable by keyboard —
   the reference opened on hover only. */

.services {
  padding-bottom: var(--section-gap);
}

.services .section-head {
  --title-max: 52rem;
}

.services__list {
  display: flex;
  flex-direction: column;
  gap: var(--gap-05);
  margin-top: 3.5rem;
}

.service {
  border-radius: var(--radius-2xl);
  background: var(--color-surface);
  overflow: clip;
}

.service__head {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--gap-06);
  padding: var(--gap-07);
  cursor: pointer;
  list-style: none;
}

.service__head::-webkit-details-marker {
  display: none;
}

.service__number {
  color: var(--color-ink-soft);
}

.service__title {
  font-family: var(--font-display);
  font-size: var(--h4-size);
  line-height: var(--line-title);
  letter-spacing: var(--letter-small);
}

.service__sign {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  color: var(--color-ink);
  transition: transform var(--hover-time) var(--ease-in-out-quart);
}

.service__sign svg {
  width: 18px;
  height: 18px;
}

.service[open] .service__sign {
  transform: rotate(90deg);
  color: var(--color-accent);
}

.service__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 401px;
  align-items: start;
  gap: var(--gap-07);
  padding: 0 var(--gap-07) var(--gap-07);
}

.service__text {
  max-width: 34rem;
  color: var(--color-ink-soft);
}

.service__photo {
  display: block;
  overflow: clip;
  border-radius: var(--radius-md);
  aspect-ratio: 401 / 205;
}

.service__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- 6.6 Experiences --------------------------------------------------- */

.experiences {
  padding-bottom: var(--section-gap);
}

.experiences .section-head--split > div {
  --title-max: 41rem;
}

.experiences__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap-05);
  margin-top: 3.5rem;
}

.experience {
  display: flex;
  flex-direction: column;
  gap: var(--gap-04);
  padding: var(--gap-03) var(--gap-03) var(--gap-07) var(--gap-04);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.experience__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--gap-03);
}

.experience__tag {
  padding: var(--gap-02) var(--gap-04);
  border-radius: var(--radius-pill);
  background: rgba(108, 108, 108, 0.06);
  transition: background-color var(--hover-time) var(--ease-in-out-quart);
}

.experience:hover .experience__tag {
  background: var(--color-sky-soft);
}

.experience__photo {
  display: block;
  width: 65%;
  overflow: clip;
  border-radius: var(--radius-sm);
  aspect-ratio: 250 / 205;
  transition: width 500ms var(--ease-in-out-quart);
}

.experience:hover .experience__photo {
  width: 100%;
}

.experience__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.experience__title {
  font-family: var(--font-display);
  font-size: var(--h4-size);
  font-weight: var(--weight-normal);
  line-height: var(--line-title);
  letter-spacing: var(--letter-small);
}

.experience__text {
  max-width: 20rem;
  color: var(--color-ink-soft);
}

/* --- 6.7 Reasons ------------------------------------------------------- */

.reasons {
  padding-block: var(--section-gap);
  background: var(--color-sky);
}

.reasons__grid {
  display: grid;
  grid-template-columns: minmax(0, 704fr) minmax(0, 528fr);
  align-items: center;
  gap: var(--gap-09);
}

.reasons__copy {
  --title-max: 33rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-05);
  max-width: 33rem;
}

.reasons__viewport {
  height: 34rem;
  overflow: clip;
  /* The strip fades out top and bottom instead of being cut square. */
  mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent);
}

.reasons__strip {
  display: flex;
  flex-direction: column;
  gap: var(--gap-05);
  animation: strip-loop 20s linear infinite;
}

.reasons__viewport:hover .reasons__strip,
.reasons__strip:focus-within {
  animation-play-state: paused;
}

.reason {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--gap-03);
  padding: var(--gap-08) var(--gap-08) 3.25rem;
  border-radius: var(--radius-xl);
  background: var(--color-surface);
}

.reason__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--on-dark);
}

.reason__icon svg {
  width: 26px;
  height: 26px;
}

.reason__title {
  font-family: var(--font-display);
  font-size: var(--h4-size);
  font-weight: var(--weight-normal);
  line-height: var(--line-title);
  letter-spacing: var(--letter-small);
}

.reason__text {
  max-width: 20rem;
  color: var(--color-ink-soft);
}

.reason__go {
  position: absolute;
  top: var(--gap-08);
  right: var(--gap-08);
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-sky-soft);
}

.reason__go svg {
  width: 16px;
  height: 16px;
}

/* --- 6.8 Gallery -------------------------------------------------------
   Without JS: a swipeable strip with scroll-snap, reachable by keyboard.
   With JS: main.js adds `is-coverflow`, which lifts the cards out of the
   flow so it can place them around the active one. */

.gallery {
  padding-bottom: var(--section-gap);
}

.gallery .section-head {
  --title-max: 38rem;
}

.gallery__stage {
  margin-top: 3.5rem;
}

.gallery__track {
  display: flex;
  gap: var(--gap-07);
  padding-inline: var(--shell-pad);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}

.shot {
  position: relative;
  flex: 0 0 286px;
  height: 346px;
  overflow: clip;
  border-radius: var(--radius-xl);
  scroll-snap-align: center;
}

.shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.shot__tag {
  position: absolute;
  right: var(--gap-04);
  bottom: var(--gap-04);
  left: var(--gap-04);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-02);
  padding: var(--gap-03);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(6px);
  color: var(--color-ink);
}

.shot__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
}

/* Coverflow — one absolutely placed card per photo, sized from the distance
   to the active one. main.js writes --x, --w, --h, --y and --o per card. */
.gallery__stage.is-coverflow .gallery__track {
  position: relative;
  display: block;
  height: 532px;
  padding: 0;
  overflow: clip;
  scroll-snap-type: none;
}

.gallery__stage.is-coverflow .shot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--w);
  height: var(--h);
  opacity: var(--o, 1);
  transform: translate(-50%, -50%) translate(var(--x, 0), var(--y, 0));
  z-index: var(--z, 1);
  transition:
    width 850ms var(--ease-in-out-quart),
    height 850ms var(--ease-in-out-quart),
    transform 850ms var(--ease-in-out-quart),
    opacity 850ms var(--ease-in-out-quart);
}

.gallery__stage.is-coverflow .shot__tag {
  opacity: 0;
  transform: translateY(44px);
  transition:
    opacity 640ms var(--ease-out-quart),
    transform 640ms var(--ease-out-quart);
}

.gallery__stage.is-coverflow .shot.is-active .shot__tag {
  opacity: 1;
  transform: none;
}

.gallery__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-02);
  margin-top: var(--gap-07);
}

.gallery__dots:empty {
  display: none;
}

.gallery__dot {
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.gallery__dot::before {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  margin: auto;
  border-radius: 50%;
  background: rgba(39, 57, 255, 0.28);
  opacity: 0.45;
  transition:
    transform 560ms var(--ease-out-quart),
    opacity 560ms var(--ease-out-quart),
    background-color 560ms var(--ease-out-quart);
}

.gallery__dot[aria-selected="true"]::before {
  background: var(--color-accent);
  opacity: 1;
  transform: scale(1.8);
}

/* --- 6.9 Reviews ------------------------------------------------------- */

.reviews {
  padding-bottom: var(--section-gap);
}

.reviews .section-head {
  --title-max: 33rem;
}

.reviews__stage {
  position: relative;
  margin-top: 3.5rem;
}

.reviews__track {
  display: flex;
  gap: var(--gap-05);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border-radius: var(--radius-lg);
}

.reviews__track::-webkit-scrollbar {
  display: none;
}

.review {
  display: grid;
  grid-template-columns: 432px minmax(0, 1fr);
  gap: var(--gap-09);
  flex: 0 0 100%;
  padding: var(--gap-03);
  padding-right: 14rem;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  scroll-snap-align: start;
}

.review__photo {
  display: block;
  overflow: clip;
  border-radius: var(--radius-sm);
  aspect-ratio: 432 / 477;
}

.review__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.review__body {
  display: flex;
  flex-direction: column;
  gap: var(--gap-09);
  padding-block: var(--gap-08);
}

.review__quote {
  font-size: var(--text-medium);
  font-weight: var(--weight-medium);
  color: var(--color-ink-soft);
}

.review__who {
  display: flex;
  align-items: center;
  gap: var(--gap-04);
  margin-top: auto;
}

.review__name {
  padding: var(--gap-03) var(--gap-05);
  border-radius: var(--radius-pill);
  background: var(--color-sky-soft);
  font-weight: var(--weight-semi);
}

.review__role {
  color: var(--color-ink-soft);
}

.reviews__nav {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 13rem;
}

.reviews__arrow {
  flex: 1;
  display: grid;
  place-items: center;
  border: 0;
  border-left: 1px solid var(--color-line);
  background: none;
  color: var(--color-accent);
  cursor: pointer;
  transition: background-color var(--hover-time) var(--ease-out-quart);
}

.reviews__arrow + .reviews__arrow {
  border-top: 1px solid var(--color-line);
  color: var(--color-ink-soft);
}

.reviews__arrow:hover {
  background: var(--color-sky-soft);
}

.reviews__arrow svg {
  width: 22px;
  height: 22px;
}

/* --- 6.10 FAQ ---------------------------------------------------------- */

.faq {
  padding-bottom: var(--section-gap);
}

.faq .section-head {
  --title-max: 33rem;
}

.faq__list {
  display: flex;
  flex-direction: column;
  gap: var(--gap-04);
  max-width: 43.25rem;
  margin: 3.5rem auto 0;
}

.faq__item {
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--color-surface-2);
  transition: border-color var(--hover-time) var(--ease-in-out-quart);
}

.faq__item[open] {
  border-color: var(--color-accent);
}

.faq__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-05);
  padding: var(--gap-07);
  font-family: var(--font-display);
  font-size: var(--h4-size);
  font-weight: var(--weight-medium);
  line-height: var(--line-title);
  letter-spacing: var(--letter-small);
  cursor: pointer;
  list-style: none;
}

.faq__head::-webkit-details-marker {
  display: none;
}

/* The plus sign is two rules, so it can rotate into a cross. */
.faq__sign {
  position: relative;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  transition:
    transform var(--hover-time) var(--ease-in-out-quart),
    color var(--hover-time) var(--ease-in-out-quart);
}

.faq__sign::before,
.faq__sign::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto;
  height: 2px;
  background: currentColor;
}

.faq__sign::after {
  inset: 0 50% auto;
  width: 2px;
  height: 100%;
}

.faq__item[open] .faq__sign {
  transform: rotate(45deg);
  color: var(--color-accent);
}

.faq__body {
  padding: 0 var(--gap-07) var(--gap-07);
  color: var(--color-ink-soft);
}

/* --- 6.11 Contact ------------------------------------------------------ */

.contact {
  padding-bottom: var(--section-gap);
}

.contact__card {
  display: grid;
  grid-template-columns: minmax(0, 393fr) minmax(0, 787fr);
  gap: 6.25rem;
  padding: var(--gap-08);
  border-radius: var(--radius-2xl);
  background: var(--color-surface);
}

.contact__left {
  display: flex;
  flex-direction: column;
  gap: var(--gap-08);
}

.contact__title {
  font-family: var(--font-display);
  font-size: var(--h3-size);
  font-weight: var(--weight-normal);
  line-height: var(--line-title);
  letter-spacing: var(--letter-small);
}

.contact__text {
  margin-top: var(--gap-05);
  max-width: 20rem;
  color: var(--color-ink-soft);
}

.contact__photo {
  position: relative;
  display: block;
  min-height: 0;
  overflow: clip;
  border-radius: var(--radius-md);
  aspect-ratio: 373 / 356;
}

.contact__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- 6.12 Call to action ----------------------------------------------- */

.cta {
  position: relative;
  display: grid;
  place-items: center;
  padding-block: 9rem;
  overflow: clip;
  background: var(--color-deep);
  color: var(--on-dark);
  text-align: center;
}

.cta__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.35;
}

.cta__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-06);
}

.cta__inner {
  --title-max: 38rem;
  --lead-max: 33rem;
}

.cta__inner .section-lead {
  text-align: center;
}

/* --- 6.13 Footer ------------------------------------------------------- */

.site-footer {
  padding-top: 6.75rem;
  padding-bottom: var(--gap-09);
  background: var(--color-deep);
  color: var(--on-dark);
  overflow: clip;
}

.site-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 778fr) minmax(0, 486fr);
  gap: var(--gap-04);
}

.site-footer__kicker {
  color: var(--on-dark-soft);
}

.site-footer__mail {
  display: inline-block;
  margin-top: var(--gap-02);
  font-size: var(--mail-size);
  line-height: var(--line-title);
}

.site-footer__mail:hover {
  color: var(--color-accent-light);
}

.site-footer__heading {
  font-family: var(--font-display);
  font-size: var(--h4-size);
  font-weight: var(--weight-medium);
  line-height: var(--line-title);
}

.site-footer__form {
  flex-direction: row;
  align-items: center;
  gap: var(--gap-03);
  margin-top: var(--gap-05);
  flex-wrap: wrap;
}

.site-footer__form .field__input {
  flex: 1 1 12rem;
  border-color: var(--on-dark-line);
  border-radius: var(--radius-pill);
  padding: var(--gap-04) var(--gap-06);
  background: transparent;
  color: var(--on-dark);
}

.site-footer__form .field__input::placeholder {
  color: var(--on-dark-soft);
}

.site-footer__form .form__note {
  flex: 1 0 100%;
  color: var(--color-accent-light);
}

.site-footer__columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap-04);
  margin-top: 7.25rem;
}

.site-footer__links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Footer links carry their label twice: on hover the pair rolls up. */
.foot-link {
  display: block;
  height: 1.3em;
  margin-block: var(--gap-02);
  overflow: clip;
  font-size: var(--foot-link-size);
  color: var(--on-dark-soft);
  transition: color 350ms var(--ease-in-out-quart);
}

.foot-link__text {
  display: block;
  height: 1.3em;
  line-height: 1.3;
  transition: transform 350ms var(--ease-in-out-quart);
}

.foot-link:hover,
.foot-link:focus-visible {
  color: var(--on-dark);
}

.foot-link:hover .foot-link__text,
.foot-link:focus-visible .foot-link__text {
  transform: translateY(-100%);
}

.site-footer__office {
  text-align: right;
  color: var(--on-dark-soft);
}

.site-footer__office .site-footer__heading {
  color: var(--on-dark);
  margin-bottom: var(--gap-04);
}

.site-footer__office p {
  font-size: var(--text-medium);
  line-height: var(--line-body);
}

.site-footer__rule {
  margin-top: 5rem;
}

.site-footer__mark {
  display: flex;
  align-items: flex-end;
  gap: var(--gap-06);
  margin-top: 3.25rem;
}

.site-footer__badge {
  display: flex;
  align-items: center;
  gap: var(--gap-06);
  padding-bottom: 1.5rem;
}

.site-footer__badge-letter {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--on-dark-line);
  border-radius: 50%;
  font-size: var(--text-base);
}

.site-footer__badge-rule {
  display: block;
  width: 8rem;
  height: 3px;
  background: var(--on-dark);
}

.site-footer__logo {
  flex: 1;
  font-family: var(--font-display);
  font-size: var(--logo-size);
  font-weight: var(--weight-semi);
  line-height: var(--line-tight);
  letter-spacing: var(--letter-small);
  color: var(--on-dark);
  /* The wordmark fades out to the right, like the hero word. A mask and not a
     background-clip: the letters are their own spans, and a clipped background
     would stop at the parent. */
  -webkit-mask-image: linear-gradient(100deg, #000 42%, rgba(0, 0, 0, 0.35) 78%);
  mask-image: linear-gradient(100deg, #000 42%, rgba(0, 0, 0, 0.35) 78%);
}

/* ==========================================================================
   7. Responsive
   --------------------------------------------------------------------------
   Only tokens and layout change here. No heading has its own rule: editing
   --h2-size below moves every title on the page at that width.
   ========================================================================== */

@media (max-width: 1200px) {
  :root {
    --places-card: 380px;
    --places-index: 240px;
  }

  .review {
    padding-right: 11rem;
  }

  .reviews__nav {
    width: 10rem;
  }
}

@media (max-width: 991px) {
  :root {
    --word-size: 25vw;
    --h2-size: 52px;
    --h2-letter: -0.12rem;
    --h3-size: 25.6px;
    --h4-size: 22.4px;
    --counter-size: 56px;
    --logo-size: 9.2rem;
    --mail-size: 44px;
    --foot-link-size: 25.6px;
    --index-size: 22.4px;
    --section-gap: 6rem;
    --gap-09: 2.5rem;
  }

  .burger {
    display: block;
    order: 3;
  }

  .hero__bar-cta {
    display: none;
  }

  .nav {
    order: 4;
    flex: 1 0 100%;
    display: none;
  }

  .nav.is-open {
    display: block;
  }

  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: var(--gap-02);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
  }

  .nav__link {
    color: var(--color-ink);
    text-align: center;
  }

  .hero__bar {
    flex-wrap: wrap;
    row-gap: var(--gap-04);
  }

  .hero__grid {
    top: -20px;
    gap: var(--gap-09);
  }

  .hero__card {
    max-width: 22rem;
  }

  .hero__haze {
    height: 28rem;
  }

  .player {
    height: 17rem;
  }

  .story__top {
    gap: var(--gap-07);
  }

  .story__photo--right {
    margin-top: 5rem;
  }

  /* Destinations: no pinning below this width. The list loops on its own,
     the index disappears — same call the reference makes. */
  .js .places__stage {
    height: auto;
  }

  .js .places__pin {
    position: static;
    height: auto;
  }

  .places__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--gap-07);
    height: auto;
  }

  .places__intro {
    padding-top: 0;
  }

  .places__index {
    display: none;
  }

  .places__viewport {
    height: 800px;
    mask-image: linear-gradient(transparent, #000 8%, #000 92%, transparent);
  }

  .places__list {
    transform: none;
    animation: strip-loop 30s linear infinite;
  }

  .places__viewport:hover .places__list,
  .places__list:focus-within {
    animation-play-state: paused;
  }

  .packages__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .experiences__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .service__body {
    grid-template-columns: minmax(0, 1fr) 300px;
  }

  .reasons__grid {
    grid-template-columns: minmax(0, 525fr) minmax(0, 394fr);
  }

  .reasons__viewport {
    height: 32rem;
  }

  .review {
    grid-template-columns: 300px minmax(0, 1fr);
    gap: var(--gap-07);
    padding-right: 8rem;
  }

  .review__body {
    gap: var(--gap-07);
    padding-block: var(--gap-09);
  }

  .reviews .section-head {
    --title-max: 26rem;
  }

  .reviews__nav {
    width: 8rem;
  }

  .contact__card {
    gap: 3rem;
  }

  .site-footer {
    padding-top: 5rem;
  }

  .site-footer__columns {
    margin-top: 5rem;
  }
}

@media (max-width: 767px) {
  :root {
    --h2-size: 44px;
    --h2-letter: -0.1rem;
    --h3-size: 24px;
    --h4-size: 20.8px;
    --text-large: 18px;
    --text-medium: 16px;
    --counter-size: 48px;
    --logo-size: 7rem;
    --mail-size: 40px;
    --foot-link-size: 24px;
    --index-size: 20.8px;
    --section-gap: 5rem;
  }

  .hero__word {
    margin-top: var(--gap-05);
  }

  .hero {
    padding-bottom: var(--gap-05);
  }

  .hero__grid {
    top: 0;
    flex-direction: column;
    align-items: stretch;
    gap: var(--gap-06);
    margin-top: var(--gap-06);
  }

  /* Same call the reference makes: the last two experience cards step out
     below this width rather than adding two more full rows. */
  .experience--wide {
    display: none;
  }

  .reasons__viewport {
    height: 30rem;
  }

  .hero__card,
  .hero__copy {
    max-width: none;
  }

  .hero__haze {
    height: 20rem;
  }

  .player {
    height: 12rem;
  }

  .story__photo--right {
    margin-top: 2rem;
  }

  .counters,
  .experiences__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .package {
    grid-template-columns: 200px minmax(0, 1fr);
  }

  .package__body {
    padding-right: var(--gap-08);
  }

  .service__head {
    grid-template-columns: 2.5rem minmax(0, 1fr) auto;
    gap: var(--gap-04);
    padding: var(--gap-06);
  }

  .service__body {
    grid-template-columns: minmax(0, 1fr);
    padding: 0 var(--gap-06) var(--gap-06);
  }

  .reasons__grid {
    grid-template-columns: minmax(0, 400fr) minmax(0, 300fr);
    gap: var(--gap-07);
  }

  .contact__card {
    grid-template-columns: minmax(0, 1fr);
  }

  /* One column, so the photo is cropped to a band instead of standing up
     700px tall next to nothing. */
  .contact__photo {
    aspect-ratio: 16 / 6;
  }

  .contact__card {
    gap: var(--gap-07);
    padding: var(--gap-06);
  }

  .contact__left {
    gap: var(--gap-06);
  }

  .review {
    grid-template-columns: 250px minmax(0, 1fr);
    padding-right: var(--gap-03);
    padding-bottom: 6rem;
  }

  .review__body {
    gap: var(--gap-07);
    padding: var(--gap-06) var(--gap-04) var(--gap-06) 0;
  }

  .reviews__nav {
    top: auto;
    bottom: var(--gap-04);
    right: var(--gap-04);
    flex-direction: row;
    width: auto;
    height: auto;
  }

  .reviews__arrow {
    width: 44px;
    height: 44px;
    border: 1px solid var(--color-line);
    border-radius: 50%;
  }

  .reviews__arrow + .reviews__arrow {
    border-top: 1px solid var(--color-line);
  }

  .site-footer {
    padding-top: 5rem;
  }

  .site-footer__top {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--gap-07);
  }

  .site-footer__columns {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gap-05);
    margin-top: 3rem;
  }

  .site-footer__rule {
    margin-top: 3rem;
  }

  .site-footer__office {
    text-align: left;
  }

  .site-footer__badge-rule {
    width: 4rem;
  }

  .faq__head {
    padding: var(--gap-06);
  }

  .faq__body {
    padding: 0 var(--gap-06) var(--gap-06);
  }

  .cta {
    padding-block: 6rem;
  }
}

@media (max-width: 479px) {
  :root {
    --h2-size: 36px;
    --h2-letter: -0.09rem;
    --h3-size: 22.4px;
    --h4-size: 20px;
    --text-large: 16px;
    --counter-size: 44px;
    --logo-size: 4rem;
    --mail-size: 36px;
    --foot-link-size: 20px;
    --index-size: 20px;
    --section-gap: 4rem;
    --gap-08: 1.5rem;
  }

  .story__top,
  .counters,
  .experiences__grid,
  .places__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .package,
  .review,
  .form__row,
  .reasons__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .site-footer__columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: var(--gap-07);
  }

  .reasons__viewport {
    height: 30rem;
  }

  .hero__word {
    margin-top: var(--gap-07);
  }

  .hero__grid {
    gap: var(--gap-07);
    margin-top: var(--gap-07);
  }

  /* The reference drops the first story photo at this width and keeps the
     landscape one; two square photos stacked would double the section. */
  .story__photo--left {
    display: none;
  }

  .story__photo--right {
    margin-top: 0;
    aspect-ratio: 16 / 10;
  }

  .story__copy {
    gap: var(--gap-06);
  }

  .counters {
    margin-top: var(--gap-07);
  }

  .counter-card {
    padding: var(--gap-05);
  }

  .counter-card .counter {
    margin-top: var(--gap-04);
  }

  .places__viewport {
    height: 620px;
  }

  .contact__photo {
    aspect-ratio: 16 / 9;
  }

  .faq__head {
    padding: var(--gap-05);
  }

  .faq__body {
    padding: 0 var(--gap-05) var(--gap-05);
  }

  .experience--wide {
    display: flex;
  }

  .package__photo {
    aspect-ratio: 16 / 10;
  }

  .package__body {
    padding: 0 var(--gap-04) var(--gap-05);
  }

  .review__photo {
    aspect-ratio: 16 / 10;
  }

  .review__body {
    padding: var(--gap-04);
  }

  /* Below this width the photo of an experience card is the card. */
  .experience__photo,
  .experience:hover .experience__photo {
    width: 45%;
  }

  .experience {
    gap: var(--gap-03);
    padding-bottom: var(--gap-05);
  }

  .contact__card,
  .reason {
    padding: var(--gap-05);
  }

  .contact__photo {
    aspect-ratio: 16 / 7;
  }

  .form {
    gap: var(--gap-04);
  }

  .reason__go {
    top: var(--gap-05);
    right: var(--gap-05);
  }

  .shot {
    flex-basis: 240px;
    height: 300px;
  }

  .gallery__stage.is-coverflow .gallery__track {
    height: 452px;
  }

  .cta {
    padding-block: 5rem;
  }
}

/* ==========================================================================
   8. Reduced motion
   --------------------------------------------------------------------------
   Final states applied immediately — delays included, because a delay is
   movement spread over time.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
  }

  .js [data-reveal],
  .js [data-split] .split__char,
  .js [data-split] .split__line {
    opacity: 1 !important;
    transform: none !important;
  }

  .js [data-split-scrub] .split__char {
    opacity: 1 !important;
  }

  .js .story__photo img,
  .js [data-curtain] img {
    clip-path: none !important;
  }

  .reasons__strip,
  .places__list {
    animation: none !important;
  }

  .gallery__stage.is-coverflow .shot__tag {
    opacity: 1;
    transform: none;
  }
}