/* ==========================================================================
   Duneva — stylesheet
   --------------------------------------------------------------------------
   Order of this file:
     1. Design tokens
     2. Reset and base elements
     3. Layout utilities
     4. Motion (scroll reveals, scroll-driven curtains, the 3D ring)
     5. Components (buttons, links, stars, avatars, slider, accordion, dialog)
     6. Header
     7. Page sections, top to bottom
     8. Responsive
     9. 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 8. A heading
     therefore never carries its own media query.
   - The two scroll-driven effects read a single custom property each
     (--curtain, --frame) that main.js updates. At their default value the
     content is fully visible, which is what makes them safe without JS.
   ========================================================================== */

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

:root {
  /* --- Colours. These eight lines are the whole palette. --- */
  --color-ink: #0f0a01; /* body text on light backgrounds */
  --color-ink-soft: rgba(15, 10, 1, 0.6); /* secondary text on light */
  --color-paper: #f8f8f8; /* page background */
  --color-surface: #ffffff; /* cards, the white section */
  --color-deep: #08070c; /* dark sections: tours and footer */
  --color-gold: #febd1a; /* the arrow of the newsletter field */
  --color-star: #fa9200; /* review stars */
  --color-star-off: #d9d9d9; /* the fifth, unlit star */

  /* Text and lines over the dark sections. Never hard-code a translucent
     white twice: name it once here. */
  --on-dark: #ffffff;
  --on-dark-soft: rgba(255, 255, 255, 0.7);
  --on-dark-dim: rgba(255, 255, 255, 0.6);
  --on-dark-line: rgba(255, 255, 255, 0.15);
  --on-light-line: rgba(0, 0, 0, 0.15);

  /* --- Typography --- */
  --font-sans: "Switzer", system-ui, -apple-system, "Segoe UI", sans-serif;
  --weight-light: 300;
  --weight-normal: 400;

  /* Type scale, measured on the reference at 1440px.
     Redefined at 991, 767 and 479px in section 8. */
  --hero-size: 90px;
  --display-xl-size: 56px;
  --display-lg-size: 40px;
  --display-md-size: 48px;
  --display-quote-size: 32px;
  --display-sm-size: 24px;
  --text-xl-size: 20px;
  --text-lg-size: 18px;
  --text-base-size: 16px;

  /* Three line heights for the whole page. The tight one opens up on small
     screens, which is why it is a token and not a number. */
  --line-tight: 1.13; /* large display text */
  --line-snug: 1.25; /* medium display text */
  --line-loose: 1.5; /* running text */

  /* Two letter-spacings: the page-wide one, and the tighter one that only
     large display text uses. */
  --track-text: -0.006em;
  --track-display: -0.036em;

  /* --- Spacing ladder, same as the reference --- */
  --space-2xs: 6px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 40px;
  --space-3xl: 48px;
  --space-4xl: 56px;
  --space-5xl: 64px;
  --space-6xl: 64px; /* same value at 1440, but it shrinks more slowly */
  --space-header: 96px; /* the footer's top padding, fixed at every width */
  --space-section: 128px; /* the gap between two sections */

  /* --- Shapes --- */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-full: 999px;

  /* --- Motion. One duration and one curve per family. --- */
  --ease-out: cubic-bezier(0.25, 1, 0.5, 1); /* the reference's custom ease */
  --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --reveal-duration: 0.7s;
  --reveal-step: 0.12s; /* delay between two staggered items */
  --ring-duration: 50s; /* one full turn of the hero ring */
}

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

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

html {
  /* clip, not hidden: hidden would turn the root into a scroll container and
     break the sticky FAQ photo further down the page. */
  overflow-x: clip;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--text-base-size);
  font-weight: var(--weight-normal);
  line-height: var(--line-loose);
  letter-spacing: var(--track-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

h1,
h2 {
  font-weight: var(--weight-light);
}

h3 {
  font-weight: var(--weight-normal);
}

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

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

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

button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  cursor: pointer;
}

hr {
  border: 0;
}

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

.skip-link {
  position: absolute;
  top: -60px;
  left: var(--space-md);
  z-index: 1000;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  background: var(--color-deep);
  color: var(--on-dark);
  transition: top 0.2s;
}

.skip-link:focus {
  top: var(--space-md);
}

/* The SVG that only holds the gooey filter definition. */
.filters {
  position: absolute;
  width: 0;
  height: 0;
}

/* --- Type scale. Every size on the page comes from one of these. --- */

.display-hero {
  font-size: var(--hero-size);
  line-height: var(--line-tight);
  letter-spacing: var(--track-display);
  font-weight: var(--weight-light);
  text-transform: capitalize;
}

.display-xl {
  font-size: var(--display-xl-size);
  line-height: var(--line-tight);
  letter-spacing: var(--track-display);
}

.display-lg {
  font-size: var(--display-lg-size);
  line-height: var(--line-tight);
}

.display-md {
  font-size: var(--display-md-size);
  line-height: var(--line-tight);
  font-weight: var(--weight-normal);
}

.display-quote {
  font-size: var(--display-quote-size);
  line-height: var(--line-snug);
  font-weight: var(--weight-normal);
}

.display-sm {
  font-size: var(--display-sm-size);
  line-height: var(--line-snug);
  font-weight: var(--weight-normal);
}

.text-xl {
  font-size: var(--text-xl-size);
  line-height: var(--line-snug);
  letter-spacing: var(--track-display);
}

.text-lg {
  font-size: var(--text-lg-size);
  line-height: var(--line-loose);
}

.text-base {
  font-size: var(--text-base-size);
  line-height: var(--line-loose);
}

/* Two text colours, picked by the section they sit in. */
.text-soft {
  color: var(--color-ink-soft);
}

.tours .text-soft,
.site-footer .text-soft,
.trip .text-soft {
  color: var(--on-dark-soft);
}

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

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

/* The whole site lives in a 1440px frame with 8px of air around it: that
   margin is what lets each section show its rounded corners. */
.page {
  max-width: 1440px;
  margin-inline: auto;
  padding: var(--space-xs);
}

.wrap {
  padding-inline: 5%;
}

.shell {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
}

.shell--narrow {
  max-width: 1065px;
}

/* Every section but the hero is pushed down by the same gap. */
.about,
.tours,
.trips,
.story,
.reviews,
.faq,
.site-footer {
  margin-top: var(--space-section);
}

/* The label above a section title: "(About Us)", "(FAQ)"… */
.section-label {
  font-size: var(--text-base-size);
  line-height: var(--line-loose);
}

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

/* ==========================================================================
   4. Motion
   --------------------------------------------------------------------------
   Everything here is written under `html.js`. Without JavaScript the page
   never hides anything: no reveal, no curtain, no closed frame.
   ========================================================================== */

/* --- 4.1 Scroll reveals ---------------------------------------------------
   main.js watches [data-reveal] with an IntersectionObserver whose margin
   fires at 15% from the bottom of the *viewport* — not a percentage of the
   element, which would leave anything taller than the screen hidden forever.
   Once revealed, the class stays: nothing re-hides on the way back up. */

/* "lines" is deliberately left out: that heading is not hidden as a block,
   each of its lines is (see 4.2). Hiding both would hide it twice. */
.js [data-reveal="up"],
.js [data-reveal="right"],
.js [data-reveal="rise"] {
  opacity: 0;
  transition:
    opacity var(--reveal-duration) var(--ease-out),
    transform var(--reveal-duration) var(--ease-out);
  transition-delay: var(--reveal-delay, 0s);
}

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

.js [data-reveal="right"] {
  transform: translateX(15px);
}

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

.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* A container marked [data-reveal-stagger] hands its children a growing
   delay; [data-reveal-stagger-cell] does the same across a grid row. Both
   delays are set by main.js, which is the only place that knows how many
   columns the row has at the current width. */

/* --- 4.2 Split lines ------------------------------------------------------
   Section titles come in one line at a time. main.js wraps each visual line
   in .line > .line__inner, so the mask is a real element and the text stays
   a single text node in the HTML. */

/* The mask is 0.16em taller than the line and pulled back up by the same
   amount: without it, a tight line-height clips the descenders of g, p, y. */
.line {
  display: block;
  padding-bottom: 0.16em;
  margin-bottom: -0.16em;
  overflow: hidden;
}

.line__inner {
  display: block;
  transform: translateY(25px);
  opacity: 0;
  transition:
    opacity 0.8s var(--ease-out),
    transform 0.8s var(--ease-out);
  transition-delay: var(--line-delay, 0s);
}

.is-in .line__inner,
.is-loaded .line__inner {
  transform: none;
  opacity: 1;
}

/* --- 4.3 Load animation ---------------------------------------------------
   The hero plays on load rather than on scroll: it is already on screen. */

.js [data-load="fade"],
.js [data-load="rise"] {
  opacity: 0;
  transition:
    opacity 0.8s var(--ease-out),
    transform 0.8s var(--ease-out);
  transition-delay: calc(var(--load-delay, 0) * 0.12s);
}

.js [data-load="fade"] {
  transform: translateY(40px);
}

.js [data-load="rise"] {
  transform: translateY(50px) scale(0.8);
}

.js [data-load].is-loaded {
  opacity: 1;
  transform: none;
}

/* --- 4.4 Scroll-driven clip paths -----------------------------------------
   Two effects share one mechanism: main.js writes a 0→1 progress into a
   custom property while the block crosses the screen. At the default value
   (0) both are fully open, so a page without JavaScript shows the photos. */

.about__photo {
  clip-path: inset(calc(var(--curtain, 0) * 100%) 0 0 0 round var(--radius));
}

.story__frame {
  clip-path: inset(calc(var(--frame, 0) * 25%) round var(--radius));
}

/* --- 4.5 The hero ring ----------------------------------------------------
   Fourteen photos on a cylinder. Each slot is turned by its share of 360°
   and pushed 480px out; the track then spins around its own axis. The mask
   fades both ends so the photos do not hit the edge of the block.

   The --i on each slot is what places it: there is no counter in CSS, so
   the fourteen lines below are the price of doing this without JavaScript. */

.ring {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 381px;
  perspective: 2500px;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 5%, #000 95%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 5%, #000 95%, transparent 100%);
}

.ring__track {
  --slots: 14;
  position: relative;
  width: 200px;
  height: 198px;
  transform-style: preserve-3d;
  animation: ring-spin var(--ring-duration) linear infinite;
}

.ring__slot {
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  backface-visibility: hidden;
  transform: rotateY(calc((var(--i) - 1) * (360deg / var(--slots)))) translateZ(480px);
}

.ring__slot:nth-child(1) { --i: 1; }
.ring__slot:nth-child(2) { --i: 2; }
.ring__slot:nth-child(3) { --i: 3; }
.ring__slot:nth-child(4) { --i: 4; }
.ring__slot:nth-child(5) { --i: 5; }
.ring__slot:nth-child(6) { --i: 6; }
.ring__slot:nth-child(7) { --i: 7; }
.ring__slot:nth-child(8) { --i: 8; }
.ring__slot:nth-child(9) { --i: 9; }
.ring__slot:nth-child(10) { --i: 10; }
.ring__slot:nth-child(11) { --i: 11; }
.ring__slot:nth-child(12) { --i: 12; }
.ring__slot:nth-child(13) { --i: 13; }
.ring__slot:nth-child(14) { --i: 14; }

.ring__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius);
}

@keyframes ring-spin {
  from {
    transform: rotateX(6deg) rotateY(0deg);
  }
  to {
    transform: rotateX(6deg) rotateY(-360deg);
  }
}

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

/* --- 5.1 The pill button --------------------------------------------------
   A white pill and a round icon, 6px apart. On hover the circle slides 8px
   towards the pill and the gooey SVG filter melts the two shapes together
   before they touch. The filter is defined once at the end of index.html. */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  filter: url(#gooey);
  color: var(--color-ink);
}

.btn__label {
  padding: var(--space-sm) var(--space-md) var(--space-sm) var(--space-xl);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  white-space: nowrap;
}

.btn__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background: var(--color-surface);
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.btn__icon svg {
  width: 20px;
  height: 20px;
}

.btn:hover .btn__icon {
  transform: translateX(-8px);
}

/* Dark variant, used on the light sections. */
.btn--dark {
  color: var(--on-dark);
}

.btn--dark .btn__label,
.btn--dark .btn__icon {
  background: #000000;
}

/* --- 5.2 The arrow link ---------------------------------------------------
   "Explore Now", "Book Now". The arrow leaves through the top-right corner
   while its copy comes in from the bottom-left, both inside an 18px window.
   Two icons and one overflow: no JavaScript. */

.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  position: relative;
}

.arrow-link__label {
  white-space: nowrap;
}

.arrow-link__icons {
  position: relative;
  width: 18px;
  height: 18px;
  overflow: hidden;
  flex: none;
}

.arrow-link__icon {
  position: absolute;
  inset: 0;
  width: 18px;
  height: 18px;
  transition: transform 0.4s var(--ease-soft);
}

.arrow-link__icon--ghost {
  transform: translate(-100%, 100%);
}

.arrow-link:hover .arrow-link__icon {
  transform: translate(100%, -100%);
}

.arrow-link:hover .arrow-link__icon--ghost {
  transform: none;
}

/* The version under the tour cards carries a rule that stays put. */
.arrow-link--underline .arrow-link__label {
  padding-bottom: 2px;
  border-bottom: 1px solid currentColor;
}

/* --- 5.3 The round button (trip cards) --- */

.round-btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-ink);
  transition: transform 0.3s cubic-bezier(0.86, 0, 0.07, 1);
  flex: none;
}

.round-btn__icons {
  position: relative;
  width: 18px;
  height: 18px;
  overflow: hidden;
}

.round-btn__icon {
  position: absolute;
  inset: 0;
  width: 18px;
  height: 18px;
  transition: transform 0.4s var(--ease-soft);
}

.round-btn__icon--ghost {
  transform: translate(-100%, 100%);
}

.trip:hover .round-btn__icon {
  transform: translate(100%, -100%);
}

.trip:hover .round-btn__icon--ghost {
  transform: none;
}

.trip:active .round-btn {
  transform: scale(0.95);
}

/* --- 5.4 Stars and avatar rows --- */

.stars {
  display: flex;
  gap: 2px;
  margin-top: var(--space-sm);
  color: var(--color-gold);
}

.stars--warm {
  gap: var(--space-2xs);
  margin-top: 0;
  color: var(--color-star);
}

.stars__star {
  width: 18px;
  height: 18px;
}

.stars--warm .stars__star {
  width: 20px;
  height: 20px;
}

.stars__star--off {
  color: var(--color-star-off);
}

/* Overlapping round portraits. The row is pushed right by one overlap so the
   first face still lines up with the text above it. */
.avatars {
  display: flex;
  align-items: center;
  margin-left: var(--space-sm);
}

.avatars__face {
  width: 44px;
  height: 44px;
  margin-left: -12px;
  border-radius: var(--radius-full);
  object-fit: cover;
  flex: none;
}

.avatars__count {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-left: -12px;
  border: 2px solid var(--color-star-off);
  border-radius: var(--radius-full);
  background: var(--color-deep);
  color: var(--on-dark);
  flex: none;
}

.avatars--large {
  margin-left: 30px;
}

.avatars--large .avatars__face {
  width: 88px;
  height: 88px;
  margin-left: -30px;
}

/* --- 5.5 The review slider ------------------------------------------------
   A scroll-snap track: it drags, it swipes, it takes Tab and the arrow keys
   on its own. The two buttons only call scrollBy, so if the script fails the
   track is still usable. */

.slider {
  position: relative;
  flex: 1;
  min-height: 0;
  padding: var(--space-lg);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.slider__track {
  display: flex;
  height: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  scroll-behavior: smooth;
}

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

.slider__slide {
  flex: 0 0 100%;
  display: flex;
  scroll-snap-align: start;
}

.review {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.review__quote {
  margin-top: var(--space-lg);
  margin-bottom: var(--space-lg);
  font-style: normal;
}

.review__author {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-top: auto;
}

.review__face {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-full);
  object-fit: cover;
  object-position: 50% 0%;
  flex: none;
}

.slider__status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.slider__controls {
  position: absolute;
  right: var(--space-lg);
  bottom: var(--space-lg);
  display: flex;
  gap: var(--space-sm);
}

.slider__btn {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  transition: border-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.slider__btn:hover {
  border-color: rgba(0, 0, 0, 0.6);
}

.slider__btn svg {
  width: 28px;
  height: 28px;
}

/* --- 5.6 The accordion ----------------------------------------------------
   <details> does the work. main.js only animates the height, because a
   closed <details> is hidden with content-visibility: keyframes inside it
   never replay, so the opening has to be driven from the script. */

.faq__item {
  padding: var(--space-lg);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  cursor: pointer;
  list-style: none;
}

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

/* The plus sign: one bar, plus a second one that rotates away on open. */
.faq__sign {
  position: relative;
  width: 16px;
  height: 16px;
  flex: none;
}

.faq__sign::before,
.faq__sign::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 16px;
  height: 1.5px;
  border-radius: 20px;
  background: #000000;
}

.faq__sign::after {
  transform: rotate(90deg);
  transition: transform 0.4s var(--ease-out);
}

.faq__item[open] .faq__sign::after {
  transform: rotate(0deg);
}

.faq__answer {
  padding-top: var(--space-md);
  max-width: 38.125rem;
}

/* --- 5.7 The video dialog --- */

.video-dialog {
  width: min(92vw, 1100px);
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: var(--color-deep);
  overflow: visible;
}

.video-dialog::backdrop {
  background: rgba(0, 0, 0, 0.8);
}

.video-dialog__player {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}

.video-dialog__close {
  position: absolute;
  top: -44px;
  right: 0;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-ink);
}

.video-dialog__close svg {
  width: 20px;
  height: 20px;
}

/* ==========================================================================
   6. Header
   ========================================================================== */

.site-header {
  position: absolute;
  top: var(--space-xs);
  left: 0;
  right: 0;
  z-index: 999;
  padding-top: var(--space-2xl);
}

.site-header__inner {
  position: relative;
}

/* The logo sits in a wedge cut out of the header, drawn as an inline SVG so
   it can take the page background colour. */
.brand {
  position: relative;
  flex: none;
  width: 280px;
}

.brand__wedge {
  display: block;
  width: 100%;
  height: auto;
  color: var(--color-paper);
  margin-top: -3px;
}

.brand__logo {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 139px;
  height: 32px;
  object-fit: contain;
}

.brand--mobile {
  display: none;
}

.nav__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(28px, -19px + 7.7vw, 80px);
}

.nav__group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  width: 100%;
}

.nav__link,
.nav__cta {
  position: relative;
  display: block;
  padding-top: 4px;
  overflow: hidden;
  color: var(--on-dark);
  white-space: nowrap;
}

/* The rule under a menu entry slides in from the left on hover. */
.nav__line {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: translateX(-100%);
  transition: transform 0.3s linear;
}

.nav__link:hover .nav__line {
  transform: none;
}

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

.burger {
  display: none;
  flex-direction: column;
  gap: 6px;
  padding: 0;
}

.burger__bar {
  display: block;
  width: 24px;
  height: 1px;
  background: var(--on-dark);
  transition:
    transform 0.4s var(--ease-out),
    opacity 0.4s var(--ease-out);
}

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

/* --- 7.1 Hero --- */

.hero {
  position: relative;
  height: 851px;
  padding-top: 150px;
  border-radius: var(--radius);
  background-image: url("../img/hero-desert-road.avif");
  background-position: 50% 50%;
  background-size: cover;
}

.hero__inner {
  position: relative;
  z-index: 2;
}

/* The ring is wider than the text column: this is what keeps it inside. */
.hero .shell {
  overflow: hidden;
}

.hero__veil {
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  background-image: linear-gradient(rgba(0, 0, 0, 0.1), #000000);
}

.hero__content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero__title {
  max-width: 652px;
  text-align: center;
  color: var(--on-dark);
}

.hero__lead {
  max-width: 557px;
  margin-top: var(--space-md);
  text-align: center;
  color: var(--on-dark);
}

.hero__cta {
  margin-top: 28px;
}

.hero__ring {
  margin-top: var(--space-2xl);
}

/* --- 7.2 About --- */

.about__inner {
  display: flex;
  gap: var(--space-3xl);
}

.about__aside {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  width: 205px;
}

.about__head--mobile {
  display: none;
}

.about__main {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-3xl);
  min-width: 0;
}

.trust {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.about__cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: var(--space-md);
}

.about__figure {
  height: 220px;
  min-width: 0;
}

.about__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius);
}

.about__panel {
  width: 248px;
  margin-left: var(--space-4xl);
}

/* The rating repeats inside the panel; the reference shows one copy or the
   other depending on the width, never both. */
.trust--panel {
  display: none;
  margin-top: var(--space-md);
}

.about__panel-cta {
  margin-top: var(--space-lg);
}

/* --- 7.3 Tours --- */

.tours {
  padding-block: var(--space-section);
  border-radius: var(--radius);
  background: var(--color-deep);
  color: var(--on-dark);
}

.tours__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2xl);
}

.tours__head .section-title {
  margin-top: var(--space-md);
}

.tours__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  margin-top: var(--space-4xl);
}

.tours__row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
}

/* Even rows are mirrored so the detail card lands on the right. Only the
   direction of the grid flips; each cell reads left to right again. */
.tours__row--mirror {
  direction: rtl;
}

.tours__row--mirror > * {
  direction: ltr;
}

.tour {
  display: flex;
  flex-direction: column;
  min-width: 310px;
  padding: var(--space-lg);
  border: 1px solid var(--on-dark-line);
  border-radius: var(--radius);
}

.tour__desc {
  margin-top: var(--space-md);
}

.tour__meta {
  display: flex;
  justify-content: space-between;
  gap: var(--space-lg);
  margin-top: var(--space-lg);
}

.tour__meta-col + .tour__meta-col {
  padding-left: var(--space-lg);
  border-left: 1px solid var(--on-dark-line);
}

.tour__meta dd {
  margin-top: var(--space-2xs);
}

.tour__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-md);
  margin-top: auto;
  padding-top: var(--space-lg);
}

.tour__price {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
  white-space: nowrap;
}

.tour__figure {
  height: 350px;
  min-width: 0;
  border-radius: var(--radius);
  overflow: hidden;
}

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

.tours__cta--mobile {
  display: none;
  justify-content: center;
  margin-top: var(--space-2xl);
}

/* --- 7.4 Trips --- */

.trips__head,
.reviews__head,
.faq__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  text-align: center;
}

.trips__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: end;
  gap: var(--space-md);
  margin-top: var(--space-4xl);
}

.trip {
  position: relative;
  display: block;
  height: 356px;
  border-radius: var(--radius);
  overflow: clip;
  color: var(--on-dark);
}

/* The two middle cards are taller; the row is baseline-aligned, so they grow
   upwards. That staircase is the whole point of this section. */
.trip--tall {
  height: 388px;
}

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

.trip__veil {
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  background-image: linear-gradient(rgba(1, 1, 1, 0) 60%, #000000);
}

.trip__foot {
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-md);
  width: 100%;
  padding: 0 var(--space-md) var(--space-md);
}

.trip__name {
  display: block;
}

/* --- 7.5 Story (the film) --- */

.story {
  padding-block: var(--space-section);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.story__frame {
  position: relative;
  height: 638px;
  border-radius: var(--radius);
  color: var(--on-dark);
}

.story__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius);
}

.story__veil {
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.4);
}

.story__top {
  position: absolute;
  top: var(--space-xl);
  left: var(--space-xl);
  z-index: 2;
}

.story__note {
  margin-top: var(--space-md);
  max-width: 321px;
}

.story__bottom {
  position: absolute;
  right: var(--space-xl);
  bottom: var(--space-xl);
  z-index: 2;
  max-width: 321px;
  text-align: right;
}

.story__play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-ink);
  transform: translate(-50%, -50%);
  transition: transform 0.3s var(--ease-soft);
}

.story__play:hover {
  transform: translate(-50%, -50%) scale(1.1);
}

.story__play svg {
  width: 13px;
  height: 14px;
  margin-left: 2px;
}

/* --- 7.6 Reviews --- */

.reviews__body {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 369fr) minmax(0, 680fr);
  gap: var(--space-md);
  margin-top: var(--space-4xl);
}

.reviews__featured {
  position: relative;
  height: 584px;
  border-radius: var(--radius);
  overflow: clip;
  color: var(--on-dark);
}

.reviews__featured-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.reviews__featured-veil {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(180deg, transparent 40%, #000000);
}

.reviews__featured-caption {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 0 var(--space-xl) var(--space-xl);
}

.reviews__featured-caption .text-xl {
  margin-top: var(--space-xs);
}

.reviews__column {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  min-width: 0;
}

.reviews__badge {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
  padding: var(--space-lg);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.reviews__badge .text-xl {
  margin-top: var(--space-xs);
}

/* --- 7.7 FAQ --- */

.faq__head {
  margin-bottom: var(--space-6xl);
}

.faq__body {
  display: flex;
  align-items: flex-start;
  gap: var(--space-5xl);
  margin-top: var(--space-4xl);
}

.faq__aside {
  position: sticky;
  top: var(--space-xl);
  flex: none;
  width: 416px;
  height: 527px;
}

.faq__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius);
}

.helpcard {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: var(--space-lg);
}

.helpcard::before {
  content: "";
  position: absolute;
  inset: var(--space-lg);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.helpcard__title,
.helpcard__text {
  position: relative;
  padding-inline: var(--space-lg);
}

/* Le pictogramme est centré par sa marge automatique et n'a pas besoin de la
   gouttière du texte. Il l'avait, et comme `box-sizing` est en border-box, ces
   deux fois 24 px se retiraient de ses 69 px de large : le « ? » sortait écrasé
   à un tiers de sa chasse. */
.helpcard__icon {
  position: relative;
}

.helpcard__title {
  text-align: center;
}

.helpcard__icon {
  width: 69px;
  height: 69px;
  margin: var(--space-3xl) auto 0;
}

.helpcard__title {
  margin-top: var(--space-xl);
}

.helpcard__text {
  margin: var(--space-md) auto var(--space-3xl);
  max-width: 340px;
}

.faq__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  width: 100%;
  min-width: 0;
  max-width: calc(38.125rem + 2 * var(--space-lg));
}

/* --- 7.8 Footer --- */

.site-footer {
  padding-top: var(--space-header);
  border-radius: var(--radius);
  background: var(--color-deep);
  color: var(--on-dark);
  overflow: clip;
}

.site-footer__top {
  display: flex;
  justify-content: space-between;
  gap: var(--space-5xl);
}

.site-footer__lead {
  position: relative;
  max-width: 565px;
}

/* The two tilted photos overlap the end of the headline. */
.site-footer__photos {
  position: absolute;
  top: 0;
  right: -25px;
  z-index: 2;
  display: flex;
  pointer-events: none;
}

.site-footer__photo {
  width: 128.5px;
  height: 144.5px;
  border-radius: 14px;
  object-fit: cover;
}

.site-footer__photo--a {
  margin-top: 18px;
  margin-left: -21px;
  transform: rotate(-14deg);
}

.site-footer__photo--b {
  margin-left: -100px;
  transform: rotate(18deg);
}

.js .site-footer__photo {
  opacity: 0;
  transition:
    opacity var(--reveal-duration) var(--ease-out),
    transform var(--reveal-duration) var(--ease-out);
}

.js .site-footer__photo--a {
  transform: rotate(0deg);
}

.js .site-footer__photo--b {
  transform: rotate(0deg);
}

.js .site-footer__photos.is-in .site-footer__photo {
  opacity: 1;
}

.js .site-footer__photos.is-in .site-footer__photo--a {
  transform: rotate(-14deg);
}

.js .site-footer__photos.is-in .site-footer__photo--b {
  transform: rotate(18deg);
}

.newsletter {
  position: relative;
  margin-top: 60px;
}

.newsletter__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.newsletter__input {
  width: 100%;
  padding: var(--space-xs) 40px var(--space-sm) 0;
  border: 0;
  border-bottom: 1px solid var(--on-dark-line);
  background: transparent;
  color: var(--on-dark);
  font: inherit;
  font-size: var(--text-base-size);
}

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

.newsletter__submit {
  position: absolute;
  top: 0;
  right: 0;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  color: var(--color-gold);
}

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

.newsletter__done {
  margin-top: var(--space-sm);
  color: var(--on-dark-soft);
}

.contacts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 90px var(--space-xl);
  flex: none;
  min-width: 400px;
}

.contacts dd {
  margin-top: var(--space-sm);
}

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

.contacts__link {
  transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.contacts__link:hover {
  color: var(--on-dark-dim);
}

.site-footer__rule {
  height: 1px;
  margin-block: var(--space-6xl);
  background: var(--on-dark-line);
}

.site-footer__bottom {
  display: flex;
  gap: clamp(40px, -458.8px + 50.33vw, 266px);
}

.site-footer__copy {
  flex: none;
  max-width: 158px;
}

.site-footer__copy--mobile {
  display: none;
}

.footer-nav {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2xl);
  width: 100%;
  margin-bottom: var(--space-4xl);
}

.footer-nav__group {
  display: flex;
  gap: var(--space-5xl);
}

.footer-nav__group ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.footer-nav__link {
  white-space: nowrap;
  transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.footer-nav__link:hover {
  color: var(--on-dark-dim);
}

/* The oversized name. It rises out of the bottom edge, which is why it gets
   its own reveal: the generic one ends at opacity 1, and this one stops at
   0.08 — the value that turns white into the near-black of the footer. */
.wordmark {
  overflow: hidden;
}

.wordmark__image {
  width: 100%;
  height: auto;
  opacity: 0.08;
}

.js .wordmark__image {
  opacity: 0;
  transform: translateY(100%);
  transition:
    opacity var(--reveal-duration) var(--ease-out),
    transform var(--reveal-duration) var(--ease-out);
}

.js .wordmark.is-in .wordmark__image {
  opacity: 0.08;
  transform: none;
}

/* ==========================================================================
   8. Responsive
   --------------------------------------------------------------------------
   Three breakpoints, the same as the reference: 991, 767 and 479px. Each one
   redeclares the type scale and then only the layouts that actually change.
   ========================================================================== */

@media (max-width: 991px) {
  :root {
    --hero-size: 80px;
    --display-xl-size: 46px;
    --display-lg-size: 34px;
    --display-md-size: 40px;
    --display-quote-size: 26px;
    --display-sm-size: 22px;
    --text-xl-size: 20px;
    --text-lg-size: 17px;
    --space-3xl: 44px;
    --space-4xl: 40px;
    --space-5xl: 48px;
    --space-section: 112px;
  }

  /* Header: the wedge hangs from the very top, burger on the other side. */
  .site-header {
    padding-top: 0;
  }

  .site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .brand--mobile {
    display: block;
    width: 240px;
  }

  .burger {
    display: flex;
    margin-top: var(--space-md);
  }

  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    padding-block: 20px;
    background: var(--color-paper);
    color: var(--color-ink);
  }

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

  .nav__row {
    flex-direction: column;
    gap: 20px;
  }

  .nav__row .brand {
    display: none;
  }

  .nav__group {
    flex-direction: column;
    align-items: flex-start;
    padding-left: 110px;
  }

  .nav__link,
  .nav__cta {
    color: var(--color-ink);
  }

  /* Burger → cross */
  .burger[aria-expanded="true"] .burger__bar:nth-child(1) {
    transform: translateY(7px) rotate(-45deg);
  }

  .burger[aria-expanded="true"] .burger__bar:nth-child(2) {
    opacity: 0;
  }

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

  .hero {
    padding-top: 180px;
  }

  .about__panel {
    width: 190px;
    margin-left: var(--space-xl);
  }

  .tour__meta {
    gap: var(--space-xs);
  }

  .tour__meta-col + .tour__meta-col {
    padding-left: var(--space-xs);
  }

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

  .trip--tall {
    height: 356px;
  }

  .story__frame {
    height: 600px;
  }

  .reviews__body {
    grid-template-columns: minmax(0, 300fr) minmax(0, 562fr);
  }

  .reviews__featured-caption {
    padding: 0 var(--space-lg) var(--space-lg);
  }

  .avatars--large .avatars__face {
    width: 66px;
    height: 66px;
  }

  .avatars--large .avatars__face--last {
    display: none;
  }

  .faq__body {
    gap: var(--space-lg);
  }

  .contacts {
    min-width: 370px;
  }

  .site-footer__copy {
    display: none;
  }

  .site-footer__bottom {
    flex-wrap: wrap;
  }

  .site-footer__copy--mobile {
    order: 2;
    display: block;
    width: 100%;
    max-width: none;
    margin-bottom: var(--space-2xl);
    text-align: center;
  }
}

@media (max-width: 767px) {
  :root {
    --hero-size: 56px;
    --display-xl-size: 32px;
    --display-lg-size: 28px;
    --display-md-size: 30px;
    --display-quote-size: 24px;
    --display-sm-size: 20px;
    --text-xl-size: 18px;
    --text-lg-size: 16px;
    --line-tight: 1.23;
    --space-lg: 16px;
    --space-xl: 24px;
    --space-3xl: 32px;
    --space-4xl: 32px;
    --space-5xl: 40px;
    --space-6xl: 56px;
    --space-section: 96px;
  }

  .wrap {
    padding-inline: 1.25rem;
  }

  .hero {
    height: 700px;
    padding-top: 92px;
  }

  .hero__title {
    max-width: 460px;
  }

  .hero__lead {
    max-width: 517px;
  }

  .nav__group {
    padding-left: 92px;
  }

  /* About: the heading moves to the top, the rating drops to the bottom. */
  .about__inner {
    flex-direction: column;
  }

  .about__head--mobile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-5xl);
    text-align: center;
  }

  .about__head--mobile .section-title {
    max-width: 340px;
  }

  .about__aside {
    order: 9999;
    width: 100%;
  }

  .about__label,
  .about__title,
  .about__aside .trust {
    display: none;
  }

  .trust--panel {
    display: flex;
  }

  /* Between 767 and 479 only the faces are kept, as on the reference. */
  .trust--panel .trust__score,
  .trust--panel .trust__label {
    display: none;
  }

  .about__figure {
    height: 240px;
  }

  .about__panel {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: auto;
    margin-left: 0;
  }

  .tours__head .tours__cta {
    display: none;
  }

  .tours__cta--mobile {
    display: flex;
  }

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

  .tour__figure--second {
    display: none;
  }

  .story__frame {
    height: 500px;
  }

  .story__note,
  .story__bottom {
    max-width: 288px;
  }

  .reviews__body {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-xl);
  }

  .reviews__featured {
    height: 320px;
  }

  /* The badge leaves the flow and lands on the photo. */
  .reviews__badge {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    background: transparent;
    color: var(--on-dark);
  }

  .reviews__badge .text-soft,
  .reviews__badge .display-md {
    color: var(--on-dark);
  }

  .avatars--large .avatars__face {
    width: 68px;
    height: 68px;
  }

  .avatars--large .avatars__face--last {
    display: block;
  }

  .review__quote {
    margin-bottom: 48px;
  }

  .faq__body {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: var(--space-2xl);
  }

  .faq__aside {
    position: static;
    width: 100%;
    height: 400px;
  }

  .faq__list {
    max-width: none;
  }

  .helpcard__text {
    max-width: 340px;
    text-align: center;
  }

  .site-footer__top {
    flex-direction: column;
    gap: var(--space-2xl);
  }

  .site-footer__lead {
    max-width: 439px;
  }

  .site-footer__lead h2 {
    max-width: 320px;
  }

  .site-footer__photos {
    margin-top: -32px;
  }

  .newsletter {
    margin-top: 102px;
  }

  .contacts {
    gap: var(--space-2xl);
  }

  .footer-nav {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  /* 64px between a column's label and its links: it is what pushes the third
     group onto its own row, as on the reference. */
  .footer-nav__group {
    gap: 64px;
  }
}

@media (max-width: 479px) {
  :root {
    --hero-size: 40px;
    --display-xl-size: 28px;
    --display-lg-size: 24px;
    --display-md-size: 26px;
    --display-quote-size: 20px;
    --display-sm-size: 18px;
    --text-xl-size: 16px;
    --line-tight: 1.32;
    --line-snug: 1.32;
    --space-lg: 12px;
    --space-xl: 16px;
    --space-3xl: 24px;
    --space-4xl: 28px;
    --space-5xl: 32px;
    --space-6xl: 40px;
    --space-section: 72px;
  }

  .wrap {
    padding-inline: 0.8rem;
  }

  .hero {
    padding-top: 106px;
  }

  .hero__title {
    max-width: 380px;
  }

  .hero__lead {
    max-width: 352px;
  }

  .brand--mobile {
    width: 200px;
  }

  .nav__group {
    padding-left: 60px;
  }

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

  .about__panel {
    padding: var(--space-md);
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: var(--radius);
  }

  .trust--panel .trust__score,
  .trust--panel .trust__label {
    display: block;
  }

  .trust--panel .trust__score {
    display: flex;
    align-items: center;
    gap: var(--space-md);
  }

  .trust--panel .stars {
    margin-top: 0;
  }

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

  .tour {
    min-width: 0;
    height: 350px;
    padding: 0.8rem;
  }

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

  .story__frame {
    height: 400px;
  }

  .story__top {
    top: var(--space-sm);
    left: var(--space-sm);
  }

  .story__bottom {
    right: var(--space-sm);
    bottom: var(--space-sm);
  }

  .story__play {
    width: 40px;
    height: 40px;
  }

  .reviews__featured-caption {
    padding: 0 var(--space-md) var(--space-md);
  }

  .avatars--large {
    margin-left: var(--space-md);
  }

  .avatars--large .avatars__face {
    width: 48px;
    height: 48px;
    margin-left: -16px;
  }

  .slider__btn {
    width: 38px;
    height: 38px;
  }

  .slider__btn svg {
    width: 20px;
    height: 20px;
  }

  .faq__item {
    padding: var(--space-sm);
  }

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

  .site-footer__bottom {
    flex-direction: column-reverse;
    gap: var(--space-md);
  }

  .site-footer__photos {
    right: 10px;
  }

  .footer-nav__group {
    justify-content: space-between;
    width: 100%;
  }
}

/* ==========================================================================
   9. Reduced motion
   --------------------------------------------------------------------------
   Final states applied at once — delays included, because a delay is motion
   spread over time. The ring stops on a frame rather than disappearing.
   ========================================================================== */

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

  .js [data-reveal],
  .js [data-load],
  .line__inner,
  .js .site-footer__photo {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    transition-delay: 0s !important;
  }

  .js .site-footer__photo--a {
    transform: rotate(-14deg) !important;
  }

  .js .site-footer__photo--b {
    transform: rotate(18deg) !important;
  }

  .about__photo,
  .story__frame {
    --curtain: 0;
    --frame: 0;
  }

  .ring__track {
    animation: none;
    transform: rotateX(6deg) rotateY(-14deg);
  }

  .btn__icon,
  .arrow-link__icon,
  .round-btn,
  .round-btn__icon,
  .story__play,
  .nav__line,
  .burger__bar,
  .faq__sign::after {
    transition: none !important;
  }

  .slider__track {
    scroll-behavior: auto;
  }
}