/* ==========================================================================
   Land Tours & Travel
   1. Tokens          6. Cards & grids
   2. Base            7. Sections
   3. Layout          8. Forms
   4. Header & nav    9. Journal & detail pages
   5. Hero & finder  10. Footer & responsive
   ========================================================================== */

/* 1. Tokens --------------------------------------------------------------- */

:root {
  --forest: #183b2a;
  --forest-deep: #0d261a;
  --sand: #d8c3a5;
  --ivory: #f7f5ef;
  --gold: #c9a45c;
  --charcoal: #17201b;

  --ink: #17201b;
  --ink-soft: #4d5850;
  --ink-faint: #7b857d;
  --line: #e2ded2;
  --line-strong: #cfc8b6;
  --white: #ffffff;

  --display: "Playfair Display", "Iowan Old Style", Georgia, serif;
  --body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --shell: 1240px;
  --gutter: 24px;
  --radius: 3px;
  --shadow-sm: 0 1px 2px rgba(13, 38, 26, .06), 0 4px 14px rgba(13, 38, 26, .06);
  --shadow-lg: 0 18px 50px rgba(13, 38, 26, .16);
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* 2. Base ----------------------------------------------------------------- */

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--ivory);
  -webkit-font-smoothing: antialiased;
}

body.is-locked { overflow: hidden; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -.01em;
  margin: 0 0 .5em;
  color: var(--forest-deep);
}

h1 { font-size: clamp(2.4rem, 5.4vw, 4.1rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.85rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); }
h4 { font-size: 1.1rem; }

p { margin: 0 0 1.1em; max-width: 68ch; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul { margin: 0 0 1.1em; padding-left: 1.15em; }
li { margin-bottom: .4em; }

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

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--forest-deep); color: var(--ivory);
  padding: 12px 20px;
}
.skip-link:focus { left: 12px; top: 12px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* 3. Layout --------------------------------------------------------------- */

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

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

.section { padding-block: clamp(64px, 9vw, 118px); }
.section--tight { padding-block: clamp(48px, 6vw, 76px); }
.section--forest { background: var(--forest-deep); color: rgba(247, 245, 239, .82); }
.section--forest h2, .section--forest h3 { color: var(--ivory); }
.section--sand { background: #efe9dc; }
.section--white { background: var(--white); }

/* A photograph behind a band, under a scrim in the forest palette. Photograph
   and scrim sit on negative layers, so the section keeps its flat forest
   background beneath them — if the image never loads, the band reads as it did
   before. The scrim is deliberately heavy: these photographs run from dark
   forest to bright grassland, and the copy has to hold on either.

   The photograph is a background rather than an <img> so it can be locked to
   the viewport: as the band scrolls past, the image stays put and a moving
   window travels across it. site.js sets the url, the same COMMONS key it used
   for the <img> before. */
.section--photo { position: relative; overflow: hidden; isolation: isolate; }
.section--photo > .section__media {
  position: absolute; inset: 0; z-index: -2;
  background-attachment: fixed;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
.section--photo::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(150deg, rgba(13, 38, 26, .94) 0%, rgba(24, 59, 42, .8) 48%, rgba(13, 38, 26, .95) 100%),
    linear-gradient(to top, rgba(13, 38, 26, .55) 0%, rgba(13, 38, 26, 0) 58%);
}

/* Touch browsers either ignore a fixed attachment or repaint the whole band on
   every scroll frame, so there the photograph simply scrolls with the section.
   Same reasoning for a visitor who has asked for less movement: the parallax is
   the motion, and without it the band still looks like itself. */
@media (hover: none), (max-width: 820px), (prefers-reduced-motion: reduce) {
  .section--photo > .section__media { background-attachment: scroll; }
}

/* Stat tiles are an opaque forest block by default, which over a photograph
   reads as one slab dropped across it. Inside a photo band they go translucent
   so the landscape carries through, and the 1px grid still separates them. */
.section--photo .stat { background: rgba(13, 38, 26, .55); backdrop-filter: blur(2px); }

.section-head { margin-bottom: clamp(32px, 4vw, 54px); max-width: 62ch; }
.section-head p { color: var(--ink-soft); margin-bottom: 0; }
.section--forest .section-head p { color: rgba(247, 245, 239, .74); }

.head-row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}

.rule {
  width: 46px; height: 2px; background: var(--gold);
  border: 0; margin: 0 0 22px;
}

.lede { font-size: 1.15rem; color: var(--ink-soft); }

/* Buttons ---------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--body); font-size: .93rem; font-weight: 500;
  letter-spacing: .02em;
  padding: 15px 30px;
  border: 1px solid transparent; border-radius: var(--radius);
  cursor: pointer; text-align: center;
  transition: background .25s var(--ease), color .25s var(--ease),
              border-color .25s var(--ease), transform .25s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--gold { background: var(--gold); color: var(--forest-deep); }
.btn--gold:hover { background: #d9b877; }

.btn--forest { background: var(--forest); color: var(--ivory); }
.btn--forest:hover { background: var(--forest-deep); }

.btn--ghost { border-color: currentColor; color: var(--forest-deep); background: transparent; }
.btn--ghost:hover { background: var(--forest-deep); color: var(--ivory); border-color: var(--forest-deep); }

.btn--light { border-color: rgba(247, 245, 239, .55); color: var(--ivory); background: rgba(13, 38, 26, .22); backdrop-filter: blur(4px); }
.btn--light:hover { background: var(--ivory); color: var(--forest-deep); border-color: var(--ivory); }

.btn--block { width: 100%; }
.btn--sm { padding: 11px 20px; font-size: .85rem; }

.link-more {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: .92rem; font-weight: 500; color: var(--forest);
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 3px;
  transition: border-color .25s var(--ease), color .25s var(--ease);
}
.link-more:hover { border-color: var(--gold); color: var(--forest-deep); }
.link-more .arw { transition: transform .25s var(--ease); }
.link-more:hover .arw { transform: translateX(5px); }
.section--forest .link-more { color: var(--sand); border-color: rgba(216, 195, 165, .4); }

/* 4. Header & nav --------------------------------------------------------- */

.site-header {
  position: fixed; inset: 0 0 auto; z-index: 90;
  transition: background .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header .shell {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; min-height: 82px;
}

.brand { display: flex; align-items: center; }
/* The artwork is white, which reads on the transparent header but would vanish
   against the ivory of .is-solid — so it is knocked to dark on the same
   transition the wordmark beside it already uses. alt is empty because that
   wordmark names the company; the mark would only repeat it. */
.brand__logo {
  height: 54px; width: auto; flex: none; display: block;
  transition: filter .3s var(--ease);
}
.site-header.is-solid .brand__logo { filter: brightness(0); }
.brand__name {
  font-family: var(--display); font-size: 1.28rem; letter-spacing: .01em;
  color: var(--ivory); transition: color .3s var(--ease);
}

.nav { display: flex; align-items: center; gap: 24px; }
.nav a {
  font-size: .93rem; color: rgba(247, 245, 239, .9);
  padding: 6px 0; position: relative;
  transition: color .3s var(--ease);
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease);
}
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }

.header-actions { display: flex; align-items: center; gap: 14px; }

.icon-btn {
  display: grid; place-items: center; width: 40px; height: 40px;
  border: 1px solid rgba(247, 245, 239, .35); border-radius: 50%;
  color: var(--ivory); background: transparent;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.icon-btn:hover { background: var(--ivory); color: var(--forest-deep); border-color: var(--ivory); }
.icon-btn svg { width: 18px; height: 18px; fill: currentColor; }

/* Language picker ---------------------------------------------------------
   A native select, so a phone gets its own picker wheel and the keyboard works
   with no script of ours. The closed control borrows the icon-button treatment
   because it sits on photographs, and flips to ink when the header goes solid.
   Its options are given explicit colours: native option lists take the system
   palette rather than inheriting ivory-on-transparent. */
.lang { display: inline-flex; align-items: center; }
.lang select {
  appearance: none; -webkit-appearance: none;
  font-family: var(--body); font-size: .8rem; letter-spacing: .04em;
  color: var(--ivory); cursor: pointer;
  border: 1px solid rgba(247, 245, 239, .35); border-radius: 100px;
  padding: 9px 34px 9px 16px;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23f7f5ef' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; background-size: 10px;
  transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.lang select:hover { background-color: rgba(247, 245, 239, .14); }
.lang select:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.lang option { color: #1f2420; background: #fff; }

.site-header.is-solid .lang select {
  color: var(--forest); border-color: var(--line-strong);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23183b2a' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
}
.site-header.is-solid .lang select:hover { background-color: rgba(13, 38, 26, .07); }

/* In the drawer it is a menu row rather than a control tucked into a corner. */
.lang--drawer { margin-bottom: 20px; }
.lang--drawer select { font-size: 1rem; padding: 11px 38px 11px 18px; }

.site-header.is-solid {
  background: rgba(247, 245, 239, .96);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--line);
  box-shadow: 0 1px 20px rgba(13, 38, 26, .07);
}
.site-header.is-solid .brand__name { color: var(--forest-deep); }
.site-header.is-solid .nav a { color: var(--ink); }
.site-header.is-solid .icon-btn { color: var(--forest); border-color: var(--line-strong); }
.site-header.is-solid .icon-btn:hover { background: var(--forest); color: var(--ivory); border-color: var(--forest); }
.site-header.is-solid .btn--light { border-color: var(--forest); color: var(--forest); background: transparent; }
.site-header.is-solid .btn--light:hover { background: var(--forest); color: var(--ivory); }

.burger {
  display: none; width: 42px; height: 42px; border: 0; background: transparent;
  color: var(--ivory); cursor: pointer; padding: 10px;
}
.site-header.is-solid .burger { color: var(--forest-deep); }
.burger span {
  display: block; height: 1.5px; background: currentColor; margin: 5px 0;
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.burger.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.drawer {
  position: fixed; inset: 0; z-index: 85;
  background: var(--forest-deep); color: var(--ivory);
  padding: 110px var(--gutter) 40px;
  display: flex; flex-direction: column;
  transform: translateY(-100%); visibility: hidden;
  transition: transform .45s var(--ease), visibility .45s;
  overflow-y: auto;
}
.drawer.is-open { transform: translateY(0); visibility: visible; }
.drawer a { font-family: var(--display); font-size: 1.75rem; padding: 12px 0; display: block; }
.drawer hr { border: 0; border-top: 1px solid rgba(216, 195, 165, .25); margin: 22px 0; }
.drawer .btn { margin-bottom: 12px; }

/* Floating WhatsApp button ------------------------------------------------
   Sits below the drawer and header in the stack so an open menu covers it. */
.wa-fab {
  position: fixed; right: 26px; bottom: 26px; z-index: 70;
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--forest); color: var(--ivory);
  box-shadow: var(--shadow-lg);
  transition: transform .3s var(--ease), background .3s var(--ease);
}
.wa-fab svg { width: 28px; height: 28px; fill: currentColor; }
.wa-fab:hover { background: var(--forest-deep); transform: translateY(-3px); }
.wa-fab:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }

/* Mobile bottom bar ------------------------------------------------------- */

.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  display: none; background: rgba(13, 38, 26, .97);
  border-top: 1px solid rgba(216, 195, 165, .2);
  padding-bottom: env(safe-area-inset-bottom);
}
.dock a {
  flex: 1; text-align: center; color: var(--ivory);
  padding: 11px 4px 12px; font-size: .7rem; letter-spacing: .04em;
}
.dock a svg { width: 19px; height: 19px; fill: currentColor; margin: 0 auto 4px; display: block; }
.dock a.is-primary { color: var(--gold); }

/* 5. Hero & finder -------------------------------------------------------- */

.hero {
  position: relative; min-height: 100svh;
  display: flex; align-items: flex-end;
  color: var(--ivory); overflow: hidden;
  background: var(--forest-deep);
}
.hero__media { position: absolute; inset: 0; }
.hero__media img {
  width: 100%; height: 100%; object-fit: cover;
  animation: slowzoom 26s var(--ease) forwards;
}
@keyframes slowzoom { from { transform: scale(1.09); } to { transform: scale(1); } }

.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(13, 38, 26, .92) 0%, rgba(13, 38, 26, .45) 42%, rgba(13, 38, 26, .3) 70%, rgba(13, 38, 26, .55) 100%);
}
.hero__inner { position: relative; padding-bottom: clamp(56px, 9vw, 120px); padding-top: 130px; width: 100%; }
.hero h1 { color: var(--ivory); max-width: 15ch; margin-bottom: .28em; }
.hero__sub {
  font-family: var(--display); font-style: italic;
  font-size: clamp(1.2rem, 2.1vw, 1.7rem); color: var(--sand);
  margin-bottom: 1.1em;
}
.hero__text { color: rgba(247, 245, 239, .88); max-width: 52ch; margin-bottom: 2em; }
.hero__cta { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 2.4em; }
.hero__where {
  display: flex; gap: 22px; flex-wrap: wrap;
  font-size: .82rem; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(216, 195, 165, .95);
}
.hero__where span { display: flex; align-items: center; gap: 22px; }
.hero__where span::after { content: ""; width: 5px; height: 5px; background: var(--gold); border-radius: 50%; }
.hero__where span:last-child::after { display: none; }

/* Hero slideshow ---------------------------------------------------------
   Slides are stacked and cross-faded. Each photograph is a background image,
   which is what lets it be locked to the viewport for the scroll parallax
   further down; the pan below only runs where that lock is stood down. Timings
   live here and site.js reads them back, so the interval is set in one place. */
.hero {
  --hero-interval: 6500ms;
  --hero-fade: 1500ms;
}
.hero__media--slides .hero__slide {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0; animation: none;
  transition: opacity var(--hero-fade) var(--ease);
  will-change: opacity, transform;
}
.hero__media--slides .hero__slide.is-active { opacity: 1; }

/* Three pan variants, cycled so consecutive photographs never move alike.
   Scale stays above 1 throughout, otherwise a pan would expose the edges. */
.hero__media--slides .hero__slide.is-active { animation: heroPanIn 9s var(--ease) forwards; }
.hero__media--slides .hero__slide:nth-child(3n+2).is-active { animation-name: heroPanOut; }
.hero__media--slides .hero__slide:nth-child(3n).is-active { animation-name: heroPanSide; }

@keyframes heroPanIn { from { transform: scale(1.14); } to { transform: scale(1.02); } }
@keyframes heroPanOut { from { transform: scale(1.02); } to { transform: scale(1.14); } }
@keyframes heroPanSide {
  from { transform: scale(1.12) translate3d(2%, 0, 0); }
  to { transform: scale(1.12) translate3d(-2%, 0, 0); }
}

/* Photographs vary from a dark forest to bright grassland, so the text column
   gets a gradient of its own rather than relying on each image being dark. */
.hero--slides .hero__scrim {
  background:
    linear-gradient(to top, rgba(13, 38, 26, .92) 0%, rgba(13, 38, 26, .5) 42%, rgba(13, 38, 26, .34) 70%, rgba(13, 38, 26, .58) 100%),
    linear-gradient(to right, rgba(13, 38, 26, .62) 0%, rgba(13, 38, 26, .3) 46%, rgba(13, 38, 26, 0) 74%);
}

/* The film carries its own movement, so it sits still rather than also being
   panned — two motions at once reads as a wobble. */
.hero__media--slides video.hero__slide.is-active { animation: none; transform: scale(1.02); }

/* The hero photograph lags behind the page on a transform rather than on a fixed
   background attachment. It has to be a transform: the slides run a slow zoom,
   and any transform on a layer pins its own background back to that layer, so a
   fixed attachment and a zoom cannot share one. Moving the whole stack instead
   leaves each slide free to zoom, and unlike a fixed attachment it stays smooth
   on touch. site.js feeds --hero-py from how far the hero has scrolled past;
   the layer is 15% taller than the hero at each edge to give that travel
   somewhere to go, which is the factor site.js multiplies by. */
.hero--slides .hero__media--slides {
  top: -15%; bottom: -15%;
  transform: translate3d(0, var(--hero-py, 0px), 0);
  will-change: transform;
}

/* Indicators double as a progress bar for the current slide. */
.hero__dots { display: flex; gap: 10px; margin-top: 30px; }
.hero__dot {
  width: 42px; height: 3px; padding: 0; border: 0; cursor: pointer;
  background: rgba(247, 245, 239, .28); border-radius: 2px;
  position: relative; overflow: hidden;
  transition: background .25s var(--ease);
}
.hero__dot:hover { background: rgba(247, 245, 239, .5); }
.hero__dot:focus-visible { outline: 2px solid var(--gold); outline-offset: 5px; }
.hero__dot::after {
  content: ""; position: absolute; inset: 0 auto 0 0;
  width: 0; background: var(--gold);
}
.hero__dot.is-active::after { animation: heroDot var(--hero-interval) linear forwards; }
@keyframes heroDot { from { width: 0; } to { width: 100%; } }

@media (prefers-reduced-motion: reduce) {
  .hero__media img,
  .hero__media--slides .hero__slide.is-active { animation: none; }
  .hero__media--slides .hero__slide { transition-duration: 400ms; }
  .hero__dot.is-active::after { animation: none; width: 100%; }
}

.hero--page { min-height: 62svh; }
.hero--page h1 { max-width: 20ch; }

/* 5b. Opening scene ------------------------------------------------------- */

/* A forest curtain that splits to reveal the hero. The scroll lock and the
   hidden hero copy hang off body.intro-on, which site.js removes when the
   scene finishes — so a failure to run leaves the page usable, not blank. */
body.intro-on { overflow: hidden; }
body.intro-on .hero__inner .shell > * { opacity: 0; }

.intro { position: fixed; inset: 0; z-index: 300; pointer-events: none; }
.intro__panel {
  position: absolute; left: 0; right: 0; height: 50.2%;
  background: var(--forest-deep);
  transition: transform 1.05s cubic-bezier(.7, 0, .2, 1);
}
.intro__panel--top { top: 0; }
.intro__panel--bottom { bottom: 0; }

.intro__inner {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 0 24px;
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
/* The logo carries the wordmark inside it, so the scene shows the mark rather
   than repeating the name in type underneath. Width is capped against both the
   viewport and its height so it never crowds a short landscape window. */
.intro__logo {
  width: min(320px, 62vw); height: auto; max-height: 34vh; object-fit: contain;
  opacity: 0; animation: introRise 1s var(--ease) .15s both;
}
.intro__sub {
  font-size: clamp(.58rem, 1.5vw, .72rem); letter-spacing: .38em;
  text-transform: uppercase; color: var(--sand);
  margin: 18px 0 0; opacity: 0; animation: introRise .9s var(--ease) .38s both;
}
.intro__bar {
  display: block; width: min(180px, 42vw); height: 2px; margin-top: 30px;
  background: rgba(216, 195, 165, .22); overflow: hidden;
  opacity: 0; animation: introRise .6s var(--ease) .5s both;
}
.intro__bar i {
  display: block; width: 100%; height: 100%; background: var(--gold);
  transform: scaleX(0); transform-origin: left;
  animation: introFill 2.6s cubic-bezier(.3, .8, .3, 1) .55s both;
}

@keyframes introRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes introFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* The wordmark clears out first, then the two halves part. */
.intro.is-done .intro__inner { opacity: 0; transform: translateY(-8px); }
.intro.is-done .intro__panel--top { transform: translateY(-100%); }
.intro.is-done .intro__panel--bottom { transform: translateY(100%); }
.intro.is-done .intro__panel { transition-delay: .22s; }

/* Hero copy rises as the curtain parts. Fill mode both holds each line at the
   opening frame during its delay, so nothing flashes in before its turn. */
body.is-ready .hero__inner .shell > * { animation: introRise .95s var(--ease) both; }
body.is-ready .hero__inner .shell > *:nth-child(1) { animation-delay: .50s; }
body.is-ready .hero__inner .shell > *:nth-child(2) { animation-delay: .60s; }
body.is-ready .hero__inner .shell > *:nth-child(3) { animation-delay: .68s; }
body.is-ready .hero__inner .shell > *:nth-child(4) { animation-delay: .76s; }
body.is-ready .hero__inner .shell > *:nth-child(5) { animation-delay: .84s; }
body.is-ready .hero__inner .shell > *:nth-child(6) { animation-delay: .92s; }

@media (prefers-reduced-motion: reduce) {
  .intro__panel, .intro__inner { transition-duration: .2s; }
  .intro__logo, .intro__sub, .intro__bar, .intro__bar i,
  body.is-ready .hero__inner .shell > * { animation: none; opacity: 1; transform: none; }
}

/* Safari finder ---------------------------------------------------------- */

.finder-wrap { position: relative; z-index: 5; margin-top: -74px; }
.finder {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding: 26px 26px 22px;
}
.finder__title {
  font-family: var(--display); font-size: 1.35rem; color: var(--forest-deep);
  margin-bottom: 18px;
}
.finder__grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(4, 1fr) auto;
  align-items: end;
}
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field > label {
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 500;
}
.field select, .field input, .field textarea {
  font-family: var(--body); font-size: .96rem; color: var(--ink);
  padding: 12px 13px; border: 1px solid var(--line-strong);
  border-radius: var(--radius); background: var(--white); width: 100%;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23183b2a' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; background-size: 11px;
  padding-right: 34px;
}
.field select:focus, .field input:focus, .field textarea:focus {
  border-color: var(--gold); outline: none;
  box-shadow: 0 0 0 3px rgba(201, 164, 92, .18);
}
.field textarea { resize: vertical; min-height: 130px; }

.stepper {
  display: flex; align-items: center; justify-content: space-between;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  padding: 5px 8px;
}
.stepper button {
  width: 30px; height: 30px; border: 0; border-radius: 50%;
  background: #efe9dc; color: var(--forest-deep);
  font-size: 1.05rem; line-height: 1; cursor: pointer;
  transition: background .2s var(--ease);
}
.stepper button:hover { background: var(--sand); }
.stepper output { font-size: .95rem; }

/* 6. Cards & grids -------------------------------------------------------- */

.grid { display: grid; gap: 26px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* Experience tiles */
.tile {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--radius); min-height: 340px;
  color: var(--ivory); isolation: isolate;
}
.tile img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: -2;
  transition: transform .7s var(--ease);
}
.tile::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(13, 38, 26, .88) 4%, rgba(13, 38, 26, .28) 55%, rgba(13, 38, 26, .12) 100%);
  transition: background .4s var(--ease);
}
.tile:hover img { transform: scale(1.06); }
.tile:hover::after { background: linear-gradient(to top, rgba(13, 38, 26, .92) 4%, rgba(13, 38, 26, .42) 60%, rgba(13, 38, 26, .2) 100%); }
.tile__body { position: absolute; inset: auto 0 0 0; padding: 24px; }
.tile__icon { display: block; margin-bottom: 10px; }
.tile__icon svg { width: 30px; height: 30px; display: block; }
.tile__title { font-family: var(--display); font-size: 1.5rem; margin-bottom: 4px; color: var(--white); }
.tile__place { font-size: .84rem; color: var(--white); margin-bottom: 12px; }
.tile__go {
  font-size: .85rem; display: inline-flex; align-items: center; gap: 8px;
  border-bottom: 1px solid rgba(216, 195, 165, .5); padding-bottom: 2px;
}
.tile--tall { min-height: 440px; }

/* Journey cards */
.journey {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  display: flex; flex-direction: column;
  transition: box-shadow .35s var(--ease), transform .35s var(--ease), border-color .35s var(--ease);
}
.journey:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); border-color: var(--line-strong); }
.journey__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #e6e0d2; }
.journey__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.journey:hover .journey__media img { transform: scale(1.05); }
.badge {
  position: absolute; top: 14px; left: 14px;
  background: rgba(13, 38, 26, .88); color: var(--sand);
  font-size: .7rem; letter-spacing: .12em; text-transform: uppercase;
  padding: 6px 11px; border-radius: 2px; backdrop-filter: blur(3px);
}
.journey__body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.journey__place { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.journey h3 { margin-bottom: .35em; }
.journey p { font-size: .95rem; color: var(--ink-soft); margin-bottom: 1.2em; }
.journey__meta {
  display: flex; gap: 8px; flex-wrap: wrap;
  font-size: .8rem; color: var(--ink-faint); margin-bottom: 18px;
}
.journey__meta span { padding-right: 9px; border-right: 1px solid var(--line-strong); line-height: 1.1; }
.journey__meta span:last-child { border-right: 0; padding-right: 0; }
.journey__foot {
  margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.price { font-family: var(--display); font-size: 1.3rem; color: var(--forest-deep); }
.price small { font-family: var(--body); font-size: .72rem; color: var(--ink-faint); display: block; letter-spacing: .06em; }

/* Destination cards */
.dest {
  position: relative; display: block; overflow: hidden; border-radius: var(--radius);
  min-height: 420px; color: var(--ivory); isolation: isolate;
}
.dest img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .8s var(--ease); }
.dest::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(13, 38, 26, .9) 8%, rgba(13, 38, 26, .25) 60%, rgba(13, 38, 26, .1) 100%);
}
.dest:hover img { transform: scale(1.06); }
.dest__body { position: absolute; inset: auto 0 0 0; padding: 26px; }
.dest__flag { font-size: 1.6rem; }
.dest h3 { color: var(--ivory); font-size: 1.85rem; margin: 6px 0 2px; }
.dest__sub { font-family: var(--display); font-style: italic; color: var(--sand); margin-bottom: 12px; }
.dest__tags { font-size: .82rem; color: rgba(247, 245, 239, .78); }

/* Stats */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(216, 195, 165, .25); }
.stat { background: var(--forest-deep); padding: 34px 22px; text-align: center; }
.stat__num { font-family: var(--display); font-size: clamp(2.2rem, 4vw, 3.1rem); color: var(--gold); line-height: 1; }
.stat__label { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(247, 245, 239, .72); margin-top: 12px; }

/* Checklist */
.checks { list-style: none; padding: 0; columns: 2; column-gap: 40px; }
.checks li { display: flex; gap: 11px; margin-bottom: 13px; break-inside: avoid; font-size: .97rem; }
.checks svg { width: 17px; height: 17px; fill: var(--gold); flex: none; margin-top: 4px; }

/* Process */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.step { padding: 30px 26px 30px 0; border-top: 2px solid var(--gold); position: relative; }
.step + .step { padding-left: 26px; }
.step__n { font-family: var(--display); font-size: 1.05rem; color: var(--gold); margin-bottom: 12px; }
.step h3 { font-size: 1.22rem; margin-bottom: .4em; }
.step p { font-size: .93rem; color: var(--ink-soft); margin: 0; }
.section--forest .step p { color: rgba(247, 245, 239, .74); }
.section--forest .step { border-top-color: rgba(201, 164, 92, .7); }

/* Testimonials */
.quote {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 30px;
  display: flex; flex-direction: column;
}
.stars { color: var(--gold); letter-spacing: 3px; margin-bottom: 16px; font-size: .95rem; }
.quote blockquote {
  margin: 0 0 20px; font-family: var(--display); font-size: 1.16rem;
  line-height: 1.55; color: var(--forest-deep);
}
.quote cite { font-style: normal; font-size: .9rem; margin-top: auto; }
.quote cite b { display: block; font-weight: 500; }
.quote cite span { color: var(--ink-faint); font-size: .85rem; }

.trust {
  display: flex; gap: 30px; flex-wrap: wrap; align-items: center;
  justify-content: center; padding-top: 34px; margin-top: 34px;
  border-top: 1px solid var(--line);
  font-size: .87rem; color: var(--ink-soft);
}
.trust b { color: var(--forest-deep); }

/* Gallery */
.gallery {
  display: grid; gap: 12px;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 190px;
  grid-auto-flow: dense;
}
.gallery button {
  padding: 0; border: 0; cursor: pointer; overflow: hidden;
  border-radius: var(--radius); background: #e6e0d2; position: relative;
}
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease), opacity .4s; }
.gallery button:hover img { transform: scale(1.05); opacity: .92; }
.gallery button:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.gallery button:nth-child(4) { grid-column: span 2; }
.gallery button:nth-child(6) { grid-row: span 2; }

.lightbox {
  position: fixed; inset: 0; z-index: 120;
  background: rgba(13, 38, 26, .95);
  display: none; align-items: center; justify-content: center;
  padding: 40px 20px;
}
.lightbox.is-open { display: flex; }
.lightbox img { max-width: min(1100px, 92vw); max-height: 84vh; object-fit: contain; border-radius: 2px; }
.lightbox__close, .lightbox__nav {
  position: absolute; background: rgba(247, 245, 239, .12); color: var(--ivory);
  border: 1px solid rgba(247, 245, 239, .3); border-radius: 50%;
  width: 46px; height: 46px; cursor: pointer; font-size: 1.2rem;
  display: grid; place-items: center;
  transition: background .2s var(--ease);
}
.lightbox__close:hover, .lightbox__nav:hover { background: rgba(247, 245, 239, .28); }
.lightbox__close { top: 24px; right: 24px; }
.lightbox__nav.prev { left: 24px; top: 50%; transform: translateY(-50%); }
.lightbox__nav.next { right: 24px; top: 50%; transform: translateY(-50%); }
.lightbox__cap {
  position: absolute; bottom: 26px; left: 0; right: 0; text-align: center;
  color: rgba(247, 245, 239, .8); font-size: .85rem; padding-inline: 80px;
}

/* Split feature */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.split__media { position: relative; }
.split__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); }
.split--flip .split__media { order: 2; }
.split__stamp {
  position: absolute; right: -18px; bottom: 28px;
  background: var(--gold); color: var(--white);
  padding: 16px 20px; border-radius: var(--radius); max-width: 200px;
  font-family: var(--display); font-size: 1.02rem; line-height: 1.3;
  box-shadow: var(--shadow-lg);
}

/* Immersive break */
.break {
  position: relative; min-height: 62svh; display: grid; place-items: center;
  text-align: center; color: var(--ivory); overflow: hidden; isolation: isolate;
}
.break img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.break::after { content: ""; position: absolute; inset: 0; background: rgba(13, 38, 26, .62); z-index: -1; }
.break h2 { color: var(--ivory); font-size: clamp(2rem, 5vw, 3.6rem); margin-bottom: .25em; }
.break p { font-family: var(--display); font-style: italic; font-size: 1.2rem; color: var(--sand); margin: 0 auto 2em; }

/* 7. Sections ------------------------------------------------------------- */

.filters {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  padding-bottom: 26px; margin-bottom: 34px; border-bottom: 1px solid var(--line);
}
.chip {
  border: 1px solid var(--line-strong); background: transparent;
  padding: 9px 17px; border-radius: 100px; font-size: .87rem;
  font-family: var(--body); color: var(--ink-soft); cursor: pointer;
  transition: all .22s var(--ease);
}
.chip:hover { border-color: var(--forest); color: var(--forest); }
.chip.is-active { background: var(--forest); border-color: var(--forest); color: var(--ivory); }

.result-count { font-size: .88rem; color: var(--ink-faint); margin-left: auto; }

.empty {
  text-align: center; padding: 70px 20px; border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
}
.empty h3 { margin-bottom: .3em; }
.empty p { margin: 0 auto 1.4em; color: var(--ink-soft); }

/* 8. Forms ---------------------------------------------------------------- */

.form-card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: clamp(24px, 4vw, 42px);
  box-shadow: var(--shadow-sm);
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-grid .span-2 { grid-column: span 2; }

.progress { display: flex; gap: 6px; margin-bottom: 30px; }
.progress span { flex: 1; height: 3px; background: var(--line); border-radius: 2px; }
.progress span.is-done { background: var(--gold); }

.fstep { display: none; }
.fstep.is-active { display: block; }
.fstep h3 { margin-bottom: .2em; }
.fstep > p { color: var(--ink-soft); margin-bottom: 1.8em; }

.opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 26px; }
.opt {
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  padding: 16px; cursor: pointer; background: var(--white);
  font-family: var(--body); font-size: .93rem; text-align: left;
  transition: all .22s var(--ease);
}
.opt:hover { border-color: var(--gold); }
.opt.is-on { border-color: var(--forest); background: #f2efe6; box-shadow: inset 0 0 0 1px var(--forest); }
.opt b { display: flex; align-items: center; gap: 9px; margin-bottom: 3px; }
.opt b svg { width: 22px; height: 22px; flex: none; color: var(--forest); }
.opt span { color: var(--ink-faint); font-size: .82rem; }

.form-nav { display: flex; justify-content: space-between; gap: 14px; margin-top: 8px; }

.note { font-size: .84rem; color: var(--ink-faint); }

.alert {
  background: #eef3ee; border-left: 3px solid var(--forest);
  padding: 18px 20px; border-radius: var(--radius); margin-bottom: 24px;
}
.alert.is-hidden { display: none; }
.alert p { margin: 0; font-size: .94rem; }

/* 9. Journal & detail ----------------------------------------------------- */

.crumbs { font-size: .84rem; color: var(--ink-faint); margin-bottom: 26px; }
.crumbs a { border-bottom: 1px solid var(--line-strong); }
.crumbs a:hover { border-color: var(--gold); }
.crumbs span { margin: 0 8px; }

.detail-layout { display: grid; grid-template-columns: 1fr 340px; gap: clamp(30px, 4vw, 60px); align-items: start; }

.aside {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 26px;
  position: sticky; top: 104px; box-shadow: var(--shadow-sm);
}
.aside h4 { margin-bottom: .5em; }
.aside .price { margin-bottom: 4px; }
.aside dl { margin: 0 0 22px; font-size: .9rem; }
.aside dt { color: var(--ink-faint); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; margin-top: 14px; }
.aside dd { margin: 3px 0 0; }

.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li { position: relative; padding: 0 0 30px 32px; border-left: 1px solid var(--line-strong); }
.timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }
.timeline li::before {
  content: ""; position: absolute; left: -6px; top: 5px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--gold); border: 2px solid var(--ivory);
}
.timeline .day { font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.timeline h4 { margin: 4px 0 .35em; font-family: var(--display); font-size: 1.24rem; }
.timeline p { font-size: .95rem; color: var(--ink-soft); margin: 0; }

.facts { list-style: none; padding: 0; margin: 0; }
.facts li { display: flex; justify-content: space-between; gap: 20px; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: .93rem; }
.facts li b { font-weight: 500; color: var(--ink-faint); flex: none; }
.facts li span { text-align: right; }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; }

.post-card { display: flex; flex-direction: column; }
.post-card__media { aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--radius); background: #e6e0d2; margin-bottom: 16px; }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.post-card:hover .post-card__media img { transform: scale(1.05); }
.post-card__cat { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.post-card h3 { font-size: 1.3rem; margin-bottom: .3em; }
.post-card p { font-size: .93rem; color: var(--ink-soft); margin-bottom: .8em; }
.post-card time { font-size: .82rem; color: var(--ink-faint); }

.article-body { font-size: 1.06rem; }
.article-body p { max-width: 70ch; }
.article-body p:first-of-type { font-size: 1.18rem; color: var(--forest-deep); }

.accordion { border-top: 1px solid var(--line); }
.accordion details { border-bottom: 1px solid var(--line); }
.accordion summary {
  cursor: pointer; list-style: none; padding: 22px 40px 22px 0;
  font-family: var(--display); font-size: 1.18rem; color: var(--forest-deep);
  position: relative;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after {
  content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  font-family: var(--body); font-size: 1.4rem; color: var(--gold); font-weight: 300;
}
.accordion details[open] summary::after { content: "–"; }
.accordion details p { padding: 0 40px 22px 0; color: var(--ink-soft); margin: 0; }

.info-list { list-style: none; padding: 0; margin: 0; }
.info-list li { padding: 16px 0; border-bottom: 1px solid var(--line); }
.info-list b { display: block; font-size: .76rem; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 4px; font-weight: 500; }

.vehicle { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; }
.fleet-banner {
  width: 100%; aspect-ratio: 21 / 9; object-fit: cover;
  border-radius: var(--radius); margin-bottom: 34px; display: block;
}
.vehicle h3 { font-size: 1.25rem; margin-bottom: .2em; }
.vehicle .rate { font-family: var(--display); font-size: 1.5rem; color: var(--forest-deep); margin: 14px 0 4px; }
.vehicle ul { list-style: none; padding: 0; margin: 16px 0 0; font-size: .89rem; color: var(--ink-soft); }
.vehicle ul li { display: flex; gap: 9px; }
.vehicle ul li::before { content: "—"; color: var(--gold); }

/* Reveal (used sparingly: stats + gallery only) */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

/* 10. Footer & responsive ------------------------------------------------- */

.site-footer { background: var(--forest-deep); color: rgba(247, 245, 239, .72); padding-top: clamp(56px, 7vw, 88px); }
.site-footer a:hover { color: var(--gold); }
.footer-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 36px; padding-bottom: 46px; }
.footer-brand .brand__name { color: var(--ivory); font-size: 1.4rem; }
.footer-brand p { font-size: .93rem; margin: 16px 0 0; max-width: 30ch; }
.footer-col h4 { color: var(--sand); font-family: var(--body); font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 16px; }
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: 10px; font-size: .93rem; }
.footer-bottom {
  border-top: 1px solid rgba(216, 195, 165, .2); padding: 24px 0 34px;
  display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  font-size: .84rem;
}
.footer-bottom nav { display: flex; gap: 22px; }


/* Seven links, the language picker and the call to action need about 1200px of
   header before the logo starts being squeezed — and more once the labels are
   translated, since Kinyarwanda and French run longer than English. So the links
   fold into the burger below that, where the drawer already carries all of them.
   The call to action stays in the header down to 900px; only the links move. */
@media (max-width: 1180px) {
  .nav { display: none; }
  .burger { display: block; }
}

@media (max-width: 1080px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .step { padding-right: 20px; }
  .step:nth-child(odd) { padding-left: 0; }
  .step:nth-child(even) { padding-left: 20px; }
  .footer-top { grid-template-columns: repeat(3, 1fr); }
  .detail-layout { grid-template-columns: 1fr; }
  .aside { position: static; }
}

@media (max-width: 900px) {
  .header-actions .btn { display: none; }
  .dock { display: flex; }
  body { padding-bottom: 62px; }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; }
  .split--flip .split__media { order: 0; }
  .split__stamp { right: 12px; }
  .brand__logo { height: 44px; }
  /* The dock along the bottom already carries WhatsApp here, so the floating
     button would both duplicate it and sit on top of it. */
  .wa-fab { display: none; }
  .finder__grid { grid-template-columns: repeat(2, 1fr); }
  .finder__grid .field--go { grid-column: span 2; }
  .finder__grid .btn { width: 100%; }
  .gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; }
  .gallery button:nth-child(4) { grid-column: span 1; }
  .gallery button:nth-child(6) { grid-row: span 1; }
  .two-col { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: 1fr; }
  .step, .step + .step { padding-left: 0; padding-right: 0; }
  .checks { columns: 1; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .span-2 { grid-column: span 1; }
  .opts { grid-template-columns: 1fr; }
  .finder-wrap { margin-top: -40px; }
  .finder { padding: 20px; }
  .hero__cta .btn { width: 100%; }
  .lightbox__nav.prev { left: 10px; }
  .lightbox__nav.next { right: 10px; }
  .footer-top { grid-template-columns: repeat(2, 1fr); }
  .footer-brand { grid-column: span 2; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

@media print {
  .site-header, .dock, .drawer, .break, .site-footer { display: none; }
  body { background: #fff; }
}

/* Credits page */
.credits { list-style: none; padding: 0; margin: 0; column-count: 2; column-gap: 44px; }
.credits li { padding: 11px 0; border-bottom: 1px solid var(--line); font-size: .9rem; break-inside: avoid; }
.credits a { border-bottom: 1px solid var(--line-strong); }
.credits a:hover { border-color: var(--gold); }
@media (max-width: 700px) { .credits { column-count: 1; } }