/* ==========================================================================
   Noble Explorer — "Sable" design system
   Warm paper, Moroccan light, dune waves. Built on the brand's own colours:
   the lilac / coral / peach of the logo and the turquoise of the old header.
   ========================================================================== */

/* --------------------------------------------------------------- 1. tokens */

:root {
  /* surfaces — warm paper, not white */
  --paper: #fdfaf6;
  --paper-2: #ffffff;
  --sand: #f8efe4;
  --sand-2: #f2e2d1;

  /* ink — a deep aubergine pulled from the logo's lilac */
  --ink: #1e1726;
  --ink-2: #2b2138;

  /* text steps. Percentages are tuned so even the small mono labels
     clear 4.5:1 on --paper; --text-ghost is decorative only. */
  --text: #1e1726;
  --text-soft: rgb(30 23 38 / 0.82);
  --text-mute: rgb(30 23 38 / 0.70);
  --text-faint: rgb(30 23 38 / 0.62);
  --text-ghost: rgb(30 23 38 / 0.30);

  /* brand ramp — straight off the logo and the original dune header */
  --lilac: #a47bb4;
  --lilac-d: #7b5090;
  --coral: #eb6572;
  --coral-d: #c93a4a;
  --peach: #f3a36b;
  --peach-d: #a0521a; /* burnt sienna — the readable weight of --peach on paper */
  --lagoon: #22c9e0;
  --lagoon-d: #05768c;

  --sunset: linear-gradient(100deg, var(--coral) 0%, var(--peach) 52%, var(--lagoon) 100%);
  /* the same ramp at readable weights — for type, never for fills */
  --sunset-text: linear-gradient(100deg, var(--coral-d) 0%, var(--peach-d) 52%, var(--lagoon-d) 100%);

  --line: rgb(30 23 38 / 0.13);
  --line-soft: rgb(30 23 38 / 0.07);

  /* on the dark punctuation bands */
  --on-ink: #fdfaf6;
  --on-ink-mute: rgb(253 250 246 / 0.72);
  --on-ink-faint: rgb(253 250 246 / 0.55);
  --line-ink: rgb(253 250 246 / 0.16);

  /* category keying */
  --c-adventure: var(--coral-d);
  --c-classic: var(--peach-d);
  --c-experience: var(--lilac-d);
  --c-trekking: var(--lagoon-d);

  /* type */
  --font-display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "DM Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* fluid scale — 380px → 1600px */
  --step--1: clamp(0.78rem, 0.75rem + 0.14vw, 0.86rem);
  --step-0:  clamp(0.95rem, 0.9rem + 0.22vw, 1.06rem);
  --step-1:  clamp(1.12rem, 1.02rem + 0.42vw, 1.4rem);
  --step-2:  clamp(1.4rem, 1.2rem + 0.85vw, 2rem);
  --step-3:  clamp(1.8rem, 1.4rem + 1.7vw, 3rem);
  --step-4:  clamp(2.3rem, 1.6rem + 3vw, 4.5rem);
  --step-5:  clamp(2.8rem, 1.6rem + 5.2vw, 6.6rem);
  --step-6:  clamp(3.3rem, 1.4rem + 8.6vw, 10rem);

  /* rhythm */
  --gutter: clamp(1.25rem, 4vw, 4.5rem);
  --shell: 1500px;
  --section: clamp(4rem, 8vw, 9rem);
  --radius: 8px;
  --radius-lg: 22px;
  --radius-xl: 34px;

  --shadow-sm: 0 1px 2px rgb(30 23 38 / 0.05), 0 4px 12px rgb(30 23 38 / 0.05);
  --shadow-md: 0 2px 6px rgb(30 23 38 / 0.05), 0 14px 34px rgb(30 23 38 / 0.09);
  --shadow-lg: 0 4px 12px rgb(30 23 38 / 0.06), 0 30px 70px rgb(30 23 38 / 0.13);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --masthead-h: 168px;

  /* the floating-button stack. The assistant panel sits above it, so both the
     offset and the panel's height ceiling derive from these rather than from
     the same arithmetic written out twice. */
  --fab-size: 56px;
  --fab-gap: 0.7rem;
  --fab-inset: clamp(0.9rem, 2.2vw, 1.75rem);
  --fab-count: 3;
  --fab-stack: calc(
    var(--fab-inset) + var(--fab-count) * var(--fab-size)
    + (var(--fab-count) - 1) * var(--fab-gap)
  );
}

@media (max-width: 68rem) { :root { --masthead-h: 120px; } }
@media (max-width: 30rem) { :root { --fab-size: 50px; --fab-inset: 0.9rem; } }

/* ----------------------------------------------------------- 2. base reset */

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

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

body {
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* clip, not hidden: `hidden` would make body a scroll container and
     break `position: sticky` on the filter bar and booking rail */
  overflow-x: clip;
}

img, picture, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }

::selection { background: var(--peach); color: var(--ink); }

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

/* zellige star, tiled very faintly — the paper has a weave */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.4;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cpath d='M32 22l2.6 5.1 5.7-1.8-1.8 5.7 5.1 2.6-5.1 2.6 1.8 5.7-5.7-1.8L32 46l-2.6-5.1-5.7 1.8 1.8-5.7L20.4 34l5.1-2.6-1.8-5.7 5.7 1.8z' fill='%231e1726' fill-opacity='.035'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------ 3. typography */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 0.94;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.headline {
  font-size: var(--step-5);
  line-height: 0.9;
  letter-spacing: -0.04em;
}

.title { font-size: var(--step-3); }
.subtitle { font-size: var(--step-2); }

.serif {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.01em;
  text-transform: none;
}

/* the sunset gradient, poured into type */
.grad {
  background: var(--sunset-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-inline: 0.12em;
  margin-inline: -0.12em;
}

/* on ink, the vivid ramp already reads; keep the punch */
.section--ink .grad,
.footer .grad {
  background: var(--sunset);
  -webkit-background-clip: text;
  background-clip: text;
}

.lede {
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--text-mute);
  max-width: 46ch;
  text-wrap: pretty;
}

.prose p { color: var(--text-soft); text-wrap: pretty; }
.prose p + p { margin-top: 1.1em; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--peach-d);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 2px;
  border-radius: 2px;
  background: var(--sunset);
  flex: none;
}

.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.muted { color: var(--text-mute); }

/* --------------------------------------------------------------- 4. layout */

.shell {
  width: min(100% - var(--gutter) * 2, var(--shell));
  margin-inline: auto;
}

.section { padding-block: var(--section); position: relative; }
.section--tight { padding-block: clamp(2.75rem, 5.5vw, 5.5rem); }

/* dark punctuation band */
.section--ink { background: var(--ink); color: var(--on-ink); }
.section--ink .eyebrow { color: var(--peach); }
.section--ink .muted,
.section--ink .lede { color: var(--on-ink-mute); }

.stack > * + * { margin-top: var(--stack-gap, 1.5rem); }

.rule { height: 1px; background: var(--line); border: 0; }

.section-head {
  display: grid;
  gap: clamp(1rem, 2vw, 2rem);
  grid-template-columns: 1fr;
  align-items: end;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

@media (min-width: 62rem) {
  .section-head { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
  .section-head__aside { justify-self: end; text-align: right; }
}

.grid { display: grid; gap: clamp(1rem, 1.8vw, 2rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }

/* three is the ceiling: a fourth column makes the card too narrow for the
   title to sit over the photograph without wrapping to four lines */
@media (min-width: 62rem) {
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.grid--4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }

/* ----------------------------------------------------- 5. the dune waves */

.wave {
  display: block;
  width: 100%;
  height: clamp(66px, 9vw, 150px);
  pointer-events: none;
}

.wave svg { width: 100%; height: 100%; display: block; }

/* a slow tidal drift; the paths overhang the viewBox so no edge is exposed */
.wave__front { animation: tide 14s var(--ease-in-out) infinite alternate; }
.wave__mid { animation: tide 19s var(--ease-in-out) infinite alternate-reverse; }

@keyframes tide {
  from { transform: translateX(-1.2%); }
  to { transform: translateX(1.2%); }
}

/* ------------------------------------------------------------- 6. controls */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1rem 1.7rem;
  background: var(--ink);
  color: var(--on-ink);
  border: 1px solid var(--ink);
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  box-shadow: var(--shadow-sm);
  transition: color 0.4s var(--ease-out), transform 0.4s var(--ease-out),
              box-shadow 0.4s var(--ease-out), border-color 0.4s;
}

.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--sunset);
  transform: translateY(101%);
  transition: transform 0.55s var(--ease-out);
}

.btn:hover::before,
.btn:focus-visible::before { transform: translateY(0); }

.btn:hover {
  color: var(--ink);
  border-color: transparent;
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.btn:active { transform: translateY(0) scale(0.98); }
.btn__arrow { transition: transform 0.4s var(--ease-out); flex: none; }
.btn:hover .btn__arrow { transform: translateX(4px); }

/* warm primary — the sunset, filled */
.btn--sun { background: var(--sunset); border-color: transparent; color: var(--ink); }
.btn--sun::before { background: var(--ink); }
.btn--sun:hover { color: var(--on-ink); }

.btn--ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--line);
  box-shadow: none;
}

.btn--ghost:hover { color: var(--ink); border-color: transparent; }

.btn--ink { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.btn--lg { padding: 1.2rem 2.1rem; }

.section--ink .btn--ghost { color: var(--on-ink); border-color: var(--line-ink); }
.section--ink .btn--ghost:hover { color: var(--ink); }

.link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text);
  padding-bottom: 3px;
  background-image: var(--sunset);
  background-size: 0% 2px;
  background-repeat: no-repeat;
  background-position: left bottom;
  transition: background-size 0.45s var(--ease-out), color 0.3s;
}

.link:hover { background-size: 100% 2px; color: var(--coral-d); }
.section--ink .link { color: var(--on-ink); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: var(--paper-2);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-mute);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.3s, border-color 0.3s, background 0.3s, box-shadow 0.3s, transform 0.3s var(--ease-out);
}

.chip:hover {
  color: var(--text);
  border-color: transparent;
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.chip[aria-pressed="true"] {
  color: var(--on-ink);
  background: var(--ink);
  border-color: var(--ink);
}

.chip[aria-pressed="true"] .chip__dot { box-shadow: 0 0 0 3px rgb(253 250 246 / 0.18); }

.chip--onDark {
  background: rgb(253 250 246 / 0.14);
  border-color: rgb(253 250 246 / 0.24);
  color: var(--on-ink);
  backdrop-filter: blur(8px);
}

.chip--onDark:hover { background: var(--paper-2); color: var(--ink); }

.chip__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--dot, var(--text-ghost));
  flex: none;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-mute);
}

[data-cat*="ADVENTURE"] { --dot: var(--c-adventure); }
[data-cat*="CLASSIC"] { --dot: var(--c-classic); }
[data-cat*="EXPERIENCE"] { --dot: var(--c-experience); }
[data-cat*="TREKKING"] { --dot: var(--c-trekking); }

/* the dark bands need the undarkened hues */
.marquee [data-cat*="ADVENTURE"], .section--ink [data-cat*="ADVENTURE"] { --dot: var(--coral); }
.marquee [data-cat*="CLASSIC"], .section--ink [data-cat*="CLASSIC"] { --dot: var(--peach); }
.marquee [data-cat*="EXPERIENCE"], .section--ink [data-cat*="EXPERIENCE"] { --dot: var(--lilac); }
.marquee [data-cat*="TREKKING"], .section--ink [data-cat*="TREKKING"] { --dot: var(--lagoon); }

/* ------------------------------------------------------------ 7. masthead */

.masthead {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  transition: transform 0.5s var(--ease-out);
}

/* tier 1 — the utility strip */
.util {
  background:
    radial-gradient(130% 340% at 86% 0%, rgb(235 101 114 / 0.22), transparent 60%),
    var(--ink);
  color: var(--on-ink-mute);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  transition: margin-top 0.45s var(--ease-out);
}

.util__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 40px;
}

.util__facts { display: none; gap: 1.75rem; align-items: center; }
@media (min-width: 56rem) { .util__facts { display: flex; } }

.util a { transition: color 0.3s; }
.util a:hover { color: var(--peach); }

.util__socials { display: flex; align-items: center; gap: 0.35rem; margin-left: auto; }

.util__socials a {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: var(--on-ink-mute);
  border: 1px solid rgb(255 255 255 / 0.11);
  transition: color 0.3s, background 0.3s, border-color 0.3s, transform 0.3s var(--ease-out);
}

.util__socials a:hover {
  color: var(--ink);
  background: var(--sunset);
  border-color: transparent;
  transform: translateY(-2px);
}
.util__socials svg { width: 14px; height: 14px; }

/* the strip slides away on scroll, the bar stays */
.masthead[data-stuck="true"] .util { margin-top: -40px; }

/* tier 2 — the nav bar */
.bar {
  position: relative;
  background: var(--paper);
  transition: background 0.45s, box-shadow 0.45s,
              margin 0.45s var(--ease-out), border-radius 0.45s var(--ease-out);
}

.masthead[data-stuck="true"] .bar {
  /* it detaches from the edge and rides above the page */
  margin-inline: clamp(0.5rem, 2.2vw, 1.6rem);
  border-radius: 20px;
  background: rgb(253 250 246 / 0.82);
  backdrop-filter: blur(20px) saturate(160%);
  box-shadow:
    0 12px 36px rgb(30 23 38 / 0.11),
    inset 0 0 0 1px rgb(255 255 255 / 0.55);
}

.bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  height: 84px;
  transition: height 0.45s var(--ease-out);
}

.masthead[data-stuck="true"] .bar__inner { height: 66px; }

.brand { display: flex; align-items: center; flex: none; }
.brand img { width: clamp(150px, 14vw, 196px); height: auto; }

/* at 320px the bar needs 276px of logo + actions and has 265, which clipped
   the burger by 8px; the logo gives the room back rather than the controls */
@media (max-width: 21.5rem) {
  .brand img { width: 132px; }
}

.nav { display: none; align-items: center; gap: clamp(0.1rem, 0.5vw, 0.4rem); }
@media (min-width: 70rem) { .nav { display: flex; } }

.nav__link {
  position: relative;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text-mute);
  padding: 0.5rem clamp(0.55rem, 1.1vw, 0.95rem);
  border-radius: 100px;
  transition: color 0.3s, background 0.3s;
}

.nav__link::after {
  content: "";
  position: absolute;
  left: clamp(0.55rem, 1.1vw, 0.95rem);
  right: clamp(0.55rem, 1.1vw, 0.95rem);
  bottom: 0.15rem;
  height: 2px;
  border-radius: 2px;
  background: var(--sunset);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.45s var(--ease-out);
}

.nav__link:hover { color: var(--text); background: var(--sand); }
.nav__link[aria-current="page"] { color: var(--coral-d); background: var(--sand); }

.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }

.masthead__actions { display: flex; align-items: center; gap: 0.6rem; }

/* --- the tours dropdown -------------------------------------------------- */

.navitem { position: relative; display: flex; align-items: center; }

/* moving the pointer from the link down to the panel crosses a gap;
   this keeps the hover alive on the way */
.navitem::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 0.7rem;
}

.nav__link--parent {
  display: inline-flex;
  align-items: center;
  gap: 0.34rem;
}

.nav__caret {
  width: 12px;
  height: 12px;
  flex: none;
  color: var(--text-faint);
  transition: transform 0.35s var(--ease-out), color 0.3s;
}

.navmenu {
  position: absolute;
  z-index: 40;
  top: calc(100% + 0.55rem);
  left: 50%;
  min-width: 13.5rem;
  padding: 0.4rem;
  list-style: none;
  background: var(--paper-2);
  border-radius: 16px;
  box-shadow:
    0 18px 44px rgb(30 23 38 / 0.16),
    inset 0 0 0 1px var(--line-soft);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 8px);
  transition: opacity 0.25s var(--ease-out), transform 0.3s var(--ease-out),
              visibility 0s linear 0.3s;
}

.navitem:hover .navmenu,
.navitem:focus-within .navmenu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition: opacity 0.25s var(--ease-out), transform 0.3s var(--ease-out), visibility 0s;
}

.navitem:hover .nav__caret,
.navitem:focus-within .nav__caret { transform: rotate(180deg); color: var(--coral-d); }

.navitem:hover .nav__link--parent,
.navitem:focus-within .nav__link--parent { color: var(--text); background: var(--sand); }

.navmenu a {
  display: block;
  padding: 0.6rem 0.85rem;
  border-radius: 11px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-soft);
  white-space: nowrap;
  transition: color 0.25s, background 0.25s, transform 0.25s var(--ease-out);
}

.navmenu a:hover,
.navmenu a:focus-visible {
  color: var(--ink);
  background: var(--sand);
  transform: translateX(3px);
}

@media (min-width: 70rem) {
  .masthead__actions::before {
    content: "";
    width: 1px;
    height: 22px;
    margin-right: 0.35rem;
    background: var(--line);
  }
}

/* the dune seam under the bar — the header's signature */
.masthead__seam {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: clamp(30px, 3.6vw, 58px);
  pointer-events: none;
  overflow: hidden;
}

.masthead__seam svg { width: 100%; height: 100%; }

/* wind over the crest — a thin stream of sand along the header dune */
.sand {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: clamp(30px, 3.6vw, 58px);
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
}

.sand__grain {
  position: absolute;
  left: 0;
  width: var(--size, 3px);
  height: var(--size, 3px);
  border-radius: 50%;
  background: var(--tint, var(--peach-d));
  opacity: 0;
  will-change: transform, opacity;
  animation: gust var(--dur, 12s) linear infinite;
  animation-delay: var(--delay, 0s);
}

@keyframes gust {
  0%   { transform: translate3d(-6vw, 0, 0) scale(0.5); opacity: 0; }
  10%  { opacity: var(--op, 0.4); }
  88%  { opacity: var(--op, 0.4); }
  100% { transform: translate3d(106vw, var(--rise, -8px), 0) scale(1); opacity: 0; }
}

/* burger + drawer */
.burger {
  width: 46px;
  height: 46px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--paper-2);
  cursor: pointer;
  transition: box-shadow 0.3s, border-color 0.3s;
}

.burger:hover { box-shadow: var(--shadow-sm); border-color: transparent; }
@media (min-width: 70rem) { .burger { display: none; } }

.burger span {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform 0.4s var(--ease-out), opacity 0.25s;
}

/* 2px bars with a 4px gap sit at -6, 0 and +6 from the centre, so the
   outer pair travel exactly 6px to meet in the middle as an X */
body[data-drawer="open"] .burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body[data-drawer="open"] .burger span:nth-child(2) { opacity: 0; transform: scaleX(0.3); }
body[data-drawer="open"] .burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.drawer {
  position: fixed;
  inset: 0;
  z-index: 99;
  background:
    radial-gradient(120% 60% at 50% 0%, var(--sand) 0%, transparent 60%),
    var(--paper);
  clip-path: inset(0 0 100% 0);
  /* visibility keeps the closed drawer out of the tab order */
  visibility: hidden;
  transition: clip-path 0.6s var(--ease-out), visibility 0s linear 0.6s;
  overflow-y: auto;
  overscroll-behavior: contain;
}

body[data-drawer="open"] { overflow: hidden; }

body[data-drawer="open"] .drawer {
  clip-path: inset(0 0 0 0);
  visibility: visible;
  transition: clip-path 0.6s var(--ease-out), visibility 0s;
}

.drawer__inner {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  min-height: 100%;
  /* clears the bar, which stays above the drawer so the burger can close it */
  padding: calc(var(--masthead-h) + 1.5rem) var(--gutter) 2rem;
}

.drawer__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* --- the links ---------------------------------------------------------- */

.drawer__nav { display: flex; flex-direction: column; }

.drawer__nav > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--text);
  opacity: 0;
  transform: translateY(0.35em);
  transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out), color 0.3s;
}

body[data-drawer="open"] .drawer__nav > a,
body[data-drawer="open"] .drawer__sub,
body[data-drawer="open"] .drawer__actions,
body[data-drawer="open"] .drawer__foot {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--i) * 45ms + 110ms);
}

.drawer__nav > a:hover,
.drawer__nav > a[aria-current="page"] { color: var(--coral-d); }

.drawer__chev {
  width: 15px;
  height: 15px;
  flex: none;
  color: var(--text-faint);
  transition: transform 0.3s var(--ease-out);
}

.drawer__nav > a[aria-current="page"] .drawer__chev { color: var(--coral-d); }

/* the themes, as chips rather than a second tier of headlines */
.drawer__sub {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line-soft);
  opacity: 0;
  transform: translateY(0.35em);
  transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out);
}

.drawer__sub a {
  padding: 0.45rem 0.8rem;
  border-radius: 100px;
  background: var(--paper-2);
  box-shadow: inset 0 0 0 1px var(--line-soft);
  font-size: 0.85rem;
  color: var(--text-soft);
  transition: color 0.25s, background 0.25s;
}

.drawer__sub a:hover { color: var(--ink); background: var(--sand-2); }

/* --- the two things people came for -------------------------------------- */

/* On a small phone the list scrolls, and these were 300px below the fold —
   the two things someone opens the menu to do should not need finding. */
.drawer__actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.55rem;
  margin-top: auto;
  padding-block: 0.75rem;
  background: linear-gradient(to bottom, transparent, var(--paper) 22%);
  opacity: 0;
  transform: translateY(0.35em);
  transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out);
}

.drawer__quote,
.drawer__wa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 52px;
  padding: 0 1.2rem;
  border: 0;
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s;
}

.drawer__quote { background: var(--sunset); color: var(--ink); }
.drawer__wa { background: #25d366; color: #0b3d24; }
.drawer__wa svg { width: 17px; height: 17px; }

.drawer__quote:hover,
.drawer__wa:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* --- reaching a person --------------------------------------------------- */

.drawer__foot {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  opacity: 0;
  transform: translateY(0.35em);
  transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out);
}

.drawer__line {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-mute);
  transition: color 0.3s;
}

.drawer__line svg { width: 15px; height: 15px; color: var(--peach-d); flex: none; }
.drawer__line:hover { color: var(--ink); }

.drawer__social { display: flex; gap: 0.4rem; margin-top: 0.35rem; }

.drawer__social a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--paper-2);
  box-shadow: inset 0 0 0 1px var(--line-soft);
  color: var(--text-mute);
  transition: color 0.3s, background 0.3s, transform 0.3s var(--ease-out);
}

.drawer__social a svg { width: 16px; height: 16px; }

.drawer__social a:hover {
  color: var(--ink);
  background: var(--sand);
  transform: translateY(-2px);
}
/* scroll progress hairline */
.progress {
  position: fixed;
  inset: 0 0 auto;
  height: 3px;
  z-index: 101;
  background: var(--sunset);
  transform-origin: left;
  transform: scaleX(var(--p, 0));
}

@supports (animation-timeline: scroll()) {
  .progress {
    transform: scaleX(0);
    animation: progress-grow linear;
    animation-timeline: scroll(root block);
  }
  @keyframes progress-grow { to { transform: scaleX(1); } }
}

/* ---------------------------------------------------------------- 8. hero */

.hero {
  position: relative;
  padding-top: calc(var(--masthead-h) + clamp(2rem, 5vw, 4.5rem));
  padding-bottom: clamp(5rem, 9vw, 9rem);
  overflow: clip;
  background: var(--sand);
}

/* warm light blooming behind the type */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(46rem 30rem at 84% 6%, rgb(243 163 107 / 0.5), transparent 62%),
    radial-gradient(38rem 28rem at 2% 62%, rgb(164 123 180 / 0.28), transparent 66%),
    radial-gradient(30rem 24rem at 60% 100%, rgb(34 201 224 / 0.2), transparent 68%);
}

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

.hero__grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }

@media (min-width: 64rem) {
  .hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
}

.hero__title {
  font-family: var(--font-display);
  font-size: var(--step-6);
  font-weight: 700;
  line-height: 0.88;
  letter-spacing: -0.045em;
  max-width: 12ch;
}

.hero__title .serif { font-size: 1.02em; line-height: 0.96; letter-spacing: -0.025em; }

/* per-word reveal.
   Clips downward only. `overflow: hidden` also cut the italic overhang and
   the right padding that .grad needs to stop background-clip:text trimming
   the final letter — which is what sliced the "c" off "au Maroc". */
.reveal-word {
  display: inline-block;
  vertical-align: bottom;
  clip-path: inset(-0.4em -0.6em 0 -0.6em);
}

.reveal-word > span {
  display: inline-block;
  transform: translateY(102%);
  animation: word-up 1s var(--ease-out) forwards;
  animation-delay: calc(var(--i, 0) * 70ms + 180ms);
}

@keyframes word-up { to { transform: translateY(0); } }

/* the photo stack */
.hero__stack {
  position: relative;
  /* every child is absolutely positioned, so the box has no intrinsic
     width — it needs an explicit one or the auto margins collapse it */
  width: 100%;
  aspect-ratio: 1 / 0.94;
  max-width: 40rem;
  margin-inline: auto;
}

.hero__shot {
  position: absolute;
  overflow: hidden;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  background: var(--sand-2);
}

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

.hero__shot--a { inset: 0 22% 26% 0; z-index: 2; }
.hero__shot--b { inset: 34% 0 0 40%; z-index: 3; }
.hero__shot--c { inset: 6% 0 54% 62%; z-index: 1; border-radius: 50%; box-shadow: var(--shadow-md); }

@media (prefers-reduced-motion: no-preference) {
  .hero__shot--a { animation: float 9s var(--ease-in-out) infinite alternate; }
  .hero__shot--b { animation: float 11s var(--ease-in-out) infinite alternate-reverse; }
  .hero__shot--c { animation: float 7s var(--ease-in-out) infinite alternate; }
}

@keyframes float {
  from { translate: 0 -0.8%; }
  to { translate: 0 0.8%; }
}

/* the floating rating pill */
/* placement only — the rating badge carries its own type and surface */
.hero__rating {
  position: absolute;
  left: 0;
  bottom: 20%;
  z-index: 4;
  box-shadow: var(--shadow-md);
}

.hero__rating:hover { box-shadow: var(--shadow-md), 0 0 0 1px var(--line-soft); }

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.5rem;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--text-faint);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* quick search */
.quickbar {
  display: grid;
  gap: 0.4rem;
  padding: 0.5rem;
  background: var(--paper-2);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

@media (min-width: 50rem) {
  .quickbar { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: center; }
}

.quickbar label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 0.1rem;
}

.quickbar__field {
  padding: 0.6rem 1rem;
  border-radius: calc(var(--radius-lg) - 8px);
  transition: background 0.3s;
}

.quickbar__field + .quickbar__field { box-shadow: inset 1px 0 0 var(--line-soft); }
.quickbar__field:focus-within { background: var(--sand); box-shadow: none; }

.quickbar select,
.quickbar input {
  width: 100%;
  background: transparent;
  border: 0;
  padding: 0;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
}

.quickbar select:focus, .quickbar input:focus { outline: none; }

/* --------------------------------------------------------------- 9. marquee */

.marquee {
  display: flex;
  overflow: hidden;
  padding-block: clamp(0.9rem, 1.6vw, 1.4rem);
  background: var(--ink);
  user-select: none;
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.marquee__track {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  padding-right: 2.5rem;
  flex: none;
  min-width: 100%;
  animation: marquee 46s linear infinite;
}

.marquee:hover .marquee__track { animation-play-state: paused; }

@keyframes marquee { to { transform: translateX(-100%); } }

.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  font-family: var(--font-display);
  font-size: clamp(1rem, 2vw, 1.7rem);
  color: var(--on-ink-faint);
  white-space: nowrap;
  letter-spacing: -0.02em;
  transition: color 0.3s;
}

.marquee__item:hover { color: var(--peach); }

/* ---------------------------------------------------------- 10. tour cards */

.tcard {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--paper-2);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line-soft);
  isolation: isolate;
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}

.tcard:hover,
.tcard:focus-within {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg), inset 0 0 0 1px transparent;
}

.tcard__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--sand-2);
}

.tcard__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 0.9s var(--ease-out);
}

.tcard:hover .tcard__media img,
.tcard:focus-within .tcard__media img { transform: scale(1.09); }

/* the scrim earns the title its contrast without dulling the whole photograph */
.tcard__over {
  position: absolute;
  z-index: 2;
  inset: auto 0 0 0;
  padding: 3.5rem 1.15rem 1.15rem;
  background: linear-gradient(
    to top,
    rgb(30 23 38 / 0.88) 0%,
    rgb(30 23 38 / 0.62) 38%,
    rgb(30 23 38 / 0.16) 72%,
    transparent 100%
  );
}

.tcard__stay {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
  padding: 0.3rem 0.7rem;
  border-radius: 100px;
  background: rgb(253 250 246 / 0.16);
  backdrop-filter: blur(6px);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-ink);
}

.tcard__over .tcard__title {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--on-ink);
  text-wrap: balance;
}

.tcard__badge {
  position: absolute;
  z-index: 2;
  top: 0.8rem;
  left: 0.8rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.75rem;
  border-radius: 100px;
  background: rgb(253 250 246 / 0.92);
  backdrop-filter: blur(8px);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

.tcard__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.9rem;
  padding: 1.15rem 1.15rem 1.25rem;
}

.tcard__lede {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--text-mute);
  /* three lines keeps every card in a row the same shape */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* where the route actually goes — better copy than anything we could write */
.tcard__stops {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  list-style: none;
}

.tcard__stops li {
  padding: 0.3rem 0.65rem;
  border-radius: 100px;
  background: var(--sand);
  font-size: 0.74rem;
  line-height: 1.35;
  color: var(--text-soft);
}

.tcard__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--line-soft);
}

.tcard__price {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--ink);
}

.tcard__price small {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.55rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* above the stretched link, or neither button could be clicked */
.tcard__actions { position: relative; z-index: 4; display: flex; gap: 0.45rem; }

.tcard__cta,
.tcard__wa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.6rem 1rem;
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s, background 0.3s, color 0.3s;
}

.tcard__cta { background: var(--ink); color: var(--on-ink); }
.tcard__cta:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

.tcard__wa { background: #25d366; color: #0b3d24; }
.tcard__wa svg { width: 15px; height: 15px; }
.tcard__wa:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

@media (max-width: 26rem) {
  .tcard__wa span { display: none; }
  .tcard__wa { padding-inline: 0.8rem; }
}

.tcard__link::before { content: ""; position: absolute; inset: 0; z-index: 3; }

/* wide editorial row — a listing line rather than a card */
.tcard--wide {
  flex-direction: row;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding: 0.7rem;
}

.tcard--wide .tcard__media {
  aspect-ratio: 1;
  width: clamp(5.5rem, 15vw, 11rem);
  flex: none;
  border-radius: calc(var(--radius-lg) - 10px);
}

.tcard--wide .tcard__body { flex: 1; gap: 0.55rem; padding: 0; }

.tcard--wide .tcard__title {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--ink);
  transition: color 0.3s;
}

.tcard--wide:hover .tcard__title { color: var(--coral-d); }

.tcard--wide .tcard__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.tcard--wide .tcard__price { margin-right: 0.6rem; text-align: right; }

.tcard[hidden] { display: none; }
/* ------------------------------------------------------------- 11. themes */

.bento { display: grid; gap: clamp(0.75rem, 1.4vw, 1.4rem); grid-template-columns: repeat(2, 1fr); }

@media (min-width: 62rem) {
  .bento { grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(0, 1fr); }
  .bento__cell:nth-child(1) { grid-column: span 2; grid-row: span 2; }
  .bento__cell:nth-child(2) { grid-column: span 2; }
  .bento__cell:nth-child(3), .bento__cell:nth-child(4) { grid-column: span 1; }
}

.bento__cell {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.5rem;
  min-height: clamp(13rem, 22vw, 19rem);
  padding: clamp(1.1rem, 2vw, 2rem);
  overflow: hidden;
  border-radius: var(--radius-lg);
  color: var(--on-ink);
  isolation: isolate;
  box-shadow: var(--shadow-sm);
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}

.bento__cell:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }

.bento__cell img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.03);
  transition: transform 1s var(--ease-out);
}

.bento__cell::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(175deg, rgb(30 23 38 / 0.12) 22%, rgb(30 23 38 / 0.92));
  transition: background 0.5s;
}

.bento__cell:hover img { transform: scale(1.09); }
.bento__cell:hover::after { background: linear-gradient(175deg, rgb(30 23 38 / 0.06) 18%, rgb(30 23 38 / 0.86)); }

.bento__cell h3 { font-size: clamp(1.15rem, 2.6vw, 2.1rem); }
.bento__cell:nth-child(1) h3 { font-size: clamp(1.6rem, 4vw, 3rem); }
.bento__cell p { color: var(--on-ink-mute); font-size: var(--step--1); max-width: 32ch; }

.bento__count {
  position: absolute;
  top: clamp(1.1rem, 2vw, 2rem);
  right: clamp(1.1rem, 2vw, 2rem);
  padding: 0.3rem 0.7rem;
  border-radius: 100px;
  background: rgb(253 250 246 / 0.16);
  backdrop-filter: blur(6px);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--on-ink);
}

/* ---------------------------------------------------------- 12. statistics */

.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 2vw, 2rem); }
@media (min-width: 56rem) { .stats { grid-template-columns: repeat(4, 1fr); } }

.stat {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding-top: 1.25rem;
  border-top: 2px solid var(--line-ink);
  transition: border-color 0.4s;
}

.stat:hover { border-top-color: var(--peach); }

.stat__value {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 6vw, 4.6rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
  background: var(--sunset);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.stat__label {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-ink-mute);
}

/* -------------------------------------------------------- 13. why / pillars */

.why { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
@media (min-width: 60rem) { .why { grid-template-columns: repeat(3, 1fr); } }

.why__item {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: clamp(1.5rem, 2.5vw, 2rem);
  background: var(--paper-2);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}

.why__item:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }

.why__metric {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  font-weight: 700;
  line-height: 0.88;
  letter-spacing: -0.05em;
  background: var(--sunset-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.why__title {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text);
}

.why__body { color: var(--text-mute); font-size: 0.95rem; }

/* --------------------------------------------------- 14. testimonials rail */

.rail {
  display: flex;
  gap: clamp(1rem, 2vw, 1.75rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0.5rem var(--gutter) 2rem;
  margin-inline: calc(var(--gutter) * -1);
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
  cursor: grab;
}

.rail[data-dragging="true"] { cursor: grabbing; scroll-snap-type: none; }
.rail::-webkit-scrollbar { height: 4px; }
.rail::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }

/* the testimonial card is a <blockquote class="quote">; the quote *modal*
   is a <dialog class="quote">, so these two are scoped by element */
blockquote.quote {
  flex: 0 0 min(88%, 30rem);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--paper-2);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}

blockquote.quote:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }

.quote__mark {
  font-family: var(--font-serif);
  font-size: 3.5rem;
  line-height: 0.6;
  background: var(--sunset-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.quote__body {
  font-family: var(--font-serif);
  font-style: normal;
  font-size: var(--step-1);
  line-height: 1.45;
  color: var(--text-soft);
}

.quote__by {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-top: auto;
}

.quote__by::before { content: ""; width: 1.5rem; height: 2px; border-radius: 2px; background: var(--sunset); }

/* ---------------------------------------------------------------- 15. band */

.band {
  position: relative;
  overflow: hidden;
  background: var(--sunset);
  color: var(--ink);
  border-radius: var(--radius-xl);
  padding: clamp(2rem, 5vw, 4.5rem);
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: center;
  box-shadow: var(--shadow-md);
}

@media (min-width: 60rem) { .band { grid-template-columns: minmax(0, 1.4fr) auto; } }

.band__title {
  font-family: var(--font-display);
  font-size: var(--step-4);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.045em;
}

.band p { color: rgb(30 23 38 / 0.78); max-width: 46ch; }
.band .eyebrow { color: rgb(30 23 38 / 0.72); }
.band .eyebrow::before { background: var(--ink); }
.band__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.seal {
  position: absolute;
  right: clamp(-3rem, -2vw, 0rem);
  top: -3rem;
  width: clamp(9rem, 16vw, 14rem);
  aspect-ratio: 1;
  opacity: 0.22;
  animation: spin 26s linear infinite;
  pointer-events: none;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------- 16. forms */

.field { display: flex; flex-direction: column; gap: 0.4rem; }

.field label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 0.95rem;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--peach);
  box-shadow: 0 0 0 4px rgb(243 163 107 / 0.22);
}

.field textarea { resize: vertical; min-height: 8rem; }

/* ---------------------------------------------------- 17. tours index page */

.filters {
  position: sticky;
  top: calc(var(--masthead-h) - 32px);
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.1rem;
  background: rgb(253 250 246 / 0.92);
  backdrop-filter: blur(18px) saturate(150%);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.filters__row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }

.filters__row--split {
  justify-content: space-between;
  border-top: 1px solid var(--line-soft);
  padding-top: 0.95rem;
}

.filters__search {
  flex: 1 1 14rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 1rem;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 100px;
  color: var(--text-faint);
  transition: border-color 0.3s, box-shadow 0.3s;
}

.filters__search:focus-within { border-color: var(--peach); box-shadow: 0 0 0 4px rgb(243 163 107 / 0.2); }
.filters__search input { flex: 1; background: transparent; border: 0; font-size: 0.9rem; color: var(--text); }
.filters__search input:focus { outline: none; }

.range {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  text-transform: uppercase;
}

.range input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: clamp(6rem, 14vw, 11rem);
  height: 4px;
  border-radius: 4px;
  background: var(--sand-2);
}

.range input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--ink);
  cursor: pointer;
  border: 4px solid var(--paper);
  box-shadow: var(--shadow-sm);
}

.range input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 4px solid var(--paper);
  border-radius: 50%;
  background: var(--ink);
  cursor: pointer;
}

.range output { color: var(--text); min-width: 5.5ch; }

.sort {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 0.5rem 1rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-mute);
  cursor: pointer;
}

.results-count {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.results-count b { color: var(--coral-d); font-weight: 500; }

.empty { grid-column: 1 / -1; padding: clamp(3rem, 8vw, 6rem) 0; text-align: center; color: var(--text-mute); }

/* ---------------------------------------------------- 18. tour detail page */

.thero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(74svh, 44rem);
  padding-top: calc(var(--masthead-h) + clamp(1.5rem, 4vw, 3rem));
  padding-bottom: clamp(3.5rem, 7vw, 6rem);
  overflow: clip;
  background: var(--ink);
}

.thero__media { position: absolute; inset: 0; z-index: 0; }

.thero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  animation: thero-drift 26s var(--ease-in-out) infinite alternate;
}

@keyframes thero-drift { to { transform: scale(1.13) translate3d(-1.4%, -1%, 0); } }

/* a scrim that keeps the type readable over any photograph */
.thero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgb(30 23 38 / 0.62) 0%, rgb(30 23 38 / 0.18) 34%, rgb(30 23 38 / 0.9) 100%),
    radial-gradient(60rem 30rem at 12% 100%, rgb(30 23 38 / 0.5), transparent 70%);
}

.thero__inner { position: relative; z-index: 1; color: var(--on-ink); }
.thero__inner .crumbs { color: var(--on-ink-faint); }
.thero__inner .crumbs a:hover { color: var(--peach); }

.thero__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.25rem; }

.thero__title {
  font-family: var(--font-display);
  font-size: var(--step-5);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.045em;
  max-width: 15ch;
  text-wrap: balance;
}

.thero__from {
  margin-top: 1.25rem;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-ink-mute);
}

.thero__from strong { color: var(--peach); font-weight: 400; }

/* facts ride up over the seam between photograph and page */
.factbar {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(0.6rem, 1.2vw, 1rem);
  margin-top: clamp(-3.5rem, -5vw, -2.5rem);
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
}

@media (min-width: 50rem) { .factbar { grid-template-columns: repeat(4, 1fr); } }

.fact {
  background: var(--paper-2);
  border-radius: var(--radius-lg);
  padding: clamp(1rem, 2vw, 1.5rem);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  box-shadow: var(--shadow-md);
}

.fact__k {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.fact__v { font-family: var(--font-display); font-size: var(--step-1); font-weight: 600; letter-spacing: -0.03em; }

.fact--price .fact__v {
  background: var(--sunset-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* in-page section nav */
.tournav {
  position: sticky;
  top: calc(var(--masthead-h) - 46px);
  z-index: 30;
  background: rgb(253 250 246 / 0.9);
  backdrop-filter: blur(18px) saturate(150%);
  border-block: 1px solid var(--line-soft);
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

.tournav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 62px;
}

.tournav__list {
  display: flex;
  gap: clamp(0.75rem, 2vw, 2rem);
  overflow-x: auto;
  scrollbar-width: none;
  padding-block: 0.9rem;
}

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

.tournav__list a {
  position: relative;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding-block: 0.35rem;
  transition: color 0.3s;
}

.tournav__list a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: var(--sunset);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease-out);
}

.tournav__list a:hover,
.tournav__list a[aria-current="true"] { color: var(--text); }
.tournav__list a[aria-current="true"]::after { transform: scaleX(1); }

.tournav__cta { display: none; flex: none; padding: 0.75rem 1.3rem; }
@media (min-width: 62rem) { .tournav__cta { display: inline-flex; } }

.tour-section { scroll-margin-top: calc(var(--masthead-h) + 44px); }

/* route map — a real Google embed, with the stops repeated as text */
.tourmap {
  position: relative;
  border-radius: var(--radius-lg);
  background: var(--paper-2);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.tourmap__frame {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--sand-2);
}

@media (max-width: 46rem) { .tourmap__frame { aspect-ratio: 4 / 3.4; } }

.tourmap__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* the itinerary in words — legible if the embed is blocked, and the target
   for the day-by-day hover linking */
.tourmap__stops {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: clamp(0.9rem, 2vw, 1.25rem);
  border-top: 1px solid var(--line-soft);
}

.tourmap__stop {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.8rem 0.4rem 0.4rem;
  border-radius: 100px;
  background: var(--sand);
  font-size: 0.86rem;
  color: var(--text-mute);
  transition: background 0.3s, color 0.3s, transform 0.3s var(--ease-out);
}

.tourmap__pin {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 50%;
  background: var(--paper-2);
  color: var(--text-faint);
  font-size: 0.68rem;
  transition: background 0.3s, color 0.3s;
}

.tourmap__stop.is-terminus { background: var(--ink); color: var(--on-ink); }
.tourmap__stop.is-terminus .tourmap__pin { background: var(--peach); color: var(--ink); }

.tourmap__stop.is-active {
  background: var(--sunset);
  color: var(--ink);
  transform: translateY(-2px);
}

.tourmap__stop.is-active .tourmap__pin { background: var(--ink); color: var(--on-ink); }

.tourmap__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem clamp(1rem, 2vw, 1.5rem);
  border-top: 1px solid var(--line-soft);
  background: var(--sand);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.tour-layout { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (min-width: 66rem) { .tour-layout { grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr); } }

/* itinerary drawn as a route */
.route { position: relative; padding-left: 2.9rem; }

.route::before {
  content: "";
  position: absolute;
  left: 0.72rem;
  top: 1rem;
  bottom: 1rem;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(var(--coral), var(--peach) 50%, var(--lagoon));
}

.route__stop {
  position: relative;
  padding-block: 1.05rem;
  border-bottom: 1px solid var(--line-soft);
  transition: background 0.3s;
}

.route__stop:last-child { border-bottom: 0; }

.route__stop::before {
  content: "";
  position: absolute;
  left: -2.9rem;
  top: 1.5rem;
  width: 12px;
  height: 12px;
  margin-left: 0.42rem;
  border-radius: 50%;
  background: var(--paper);
  border: 3px solid var(--peach-d);
  transition: background 0.3s, transform 0.3s var(--ease-out);
}

.route__stop:hover::before { background: var(--peach-d); transform: scale(1.2); }

/* a day tied to a map stop, and the day the hovered stop belongs to */
.route__stop[data-day-stop]:hover,
.route__stop.is-linked { background: var(--sand); border-radius: var(--radius); }

.route__stop.is-linked .route__where { color: var(--coral-d); }

.route__day {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 0.2rem;
}

.route__where {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -0.025em;
  transition: color 0.3s;
}

/* includes / excludes */
.ledger { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
@media (min-width: 44rem) { .ledger { grid-template-columns: 1fr 1fr; } }

.ledger__panel {
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  background: var(--paper-2);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border-top: 3px solid var(--lagoon-d);
}

.ledger__panel--out { border-top-color: var(--coral-d); }

.ledger__head {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
}

.ledger__list { display: flex; flex-direction: column; gap: 0.65rem; margin-top: 1.1rem; }

.ledger__list li {
  display: flex;
  gap: 0.85rem;
  align-items: center;
  font-size: 0.93rem;
  color: var(--text-soft);
  padding: 0.7rem 0.9rem;
  background: var(--paper-2);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.ledger__list li::before {
  content: "";
  width: 20px;
  height: 20px;
  flex: none;
  border-radius: 50%;
  background: var(--lagoon-d);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l4 4 8-8' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat;
}

.ledger__list--out li::before {
  background: var(--coral-d);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 5.5l9 9M14.5 5.5l-9 9' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* inside a panel the rows already sit on white */
.ledger__panel .ledger__list li {
  background: transparent;
  box-shadow: none;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--line-soft);
  border-radius: 0;
}

.ledger__panel .ledger__list li:last-child { border-bottom: 0; }

/* neutral bullets for legal prose */
.ledger__list--plain li { align-items: flex-start; }

.ledger__list--plain li::before {
  background: var(--text-ghost);
  margin-top: 0.2rem;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10h10' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* sticky booking rail */
.booking {
  position: sticky;
  top: calc(var(--masthead-h) - 20px);
  scroll-margin-top: calc(var(--masthead-h) + 44px);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: clamp(1.25rem, 2.5vw, 2rem);
  background: var(--paper-2);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.booking__price { display: flex; align-items: baseline; gap: 0.6rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }

.booking__price strong {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.05em;
  background: var(--sunset-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.booking__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.booking__grid .field--full { grid-column: 1 / -1; }

.share { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.share a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--text-mute);
  transition: color 0.3s, border-color 0.3s, background 0.3s, transform 0.3s var(--ease-out);
}

.share a:hover { color: var(--ink); background: var(--peach); border-color: transparent; transform: translateY(-2px); }
.share svg { width: 15px; height: 15px; }

/* -------------------------------------------------------- 19. page headers */

.pagehead {
  position: relative;
  padding-top: calc(var(--masthead-h) + clamp(2rem, 5vw, 4rem));
  padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
  background: var(--sand);
  overflow: clip;
}

.pagehead::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(44rem 26rem at 85% 0%, rgb(243 163 107 / 0.45), transparent 62%),
    radial-gradient(36rem 26rem at 0% 60%, rgb(34 201 224 / 0.22), transparent 66%);
}

.pagehead > * { position: relative; }

.pagehead__title {
  font-family: var(--font-display);
  font-size: var(--step-5);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.045em;
}

.crumbs {
  display: flex;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 1.5rem;
}

.crumbs a:hover { color: var(--coral-d); }

/* --------------------------------------------------------- 20. misc blocks */

.notice {
  display: grid;
  gap: 1rem;
  align-items: center;
  padding: clamp(1.25rem, 2.5vw, 2rem);
  border-radius: var(--radius-lg);
  background: var(--paper-2);
  box-shadow: var(--shadow-sm);
  border-left: 4px solid var(--peach);
}

@media (min-width: 54rem) { .notice { grid-template-columns: auto minmax(0, 1fr); gap: 2rem; } }

.notice__label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--peach-d);
}

.notice p { color: var(--text-mute); font-size: 0.93rem; }

/* numbered feature list */
.ilist { display: grid; gap: 0; }

.ilist__item {
  display: grid;
  gap: 0.5rem 2rem;
  padding: clamp(1.25rem, 2.5vw, 2rem) clamp(0.75rem, 2vw, 1.5rem);
  border-top: 1px solid var(--line);
  align-items: start;
  border-radius: var(--radius-lg);
  transition: background 0.4s, box-shadow 0.4s, transform 0.4s var(--ease-out);
}

@media (min-width: 54rem) { .ilist__item { grid-template-columns: 4rem minmax(0, 1fr) minmax(0, 1.5fr); } }

.ilist__item:last-child { border-bottom: 1px solid var(--line); }

.ilist__item:hover {
  background: var(--paper-2);
  box-shadow: var(--shadow-md);
  transform: translateX(4px);
  border-color: transparent;
}

.ilist__n {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--coral-d);
  padding-top: 0.4rem;
}

.ilist__t { font-family: var(--font-display); font-size: var(--step-2); font-weight: 600; line-height: 1.05; letter-spacing: -0.03em; }
.ilist__b { color: var(--text-mute); font-size: 0.95rem; }

/* team */
.people { display: grid; gap: clamp(1rem, 2vw, 1.75rem); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 48rem) { .people { grid-template-columns: repeat(4, 1fr); } }

.person { display: flex; flex-direction: column; gap: 0.85rem; }

.person__shot {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--sand-2);
  box-shadow: var(--shadow-sm);
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}

.person:hover .person__shot { transform: translateY(-5px); box-shadow: var(--shadow-md); }

.person__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.9);
  transition: transform 0.9s var(--ease-out), filter 0.5s;
}

.person:hover .person__shot img { transform: scale(1.06); filter: saturate(1.05); }

.person__name { font-family: var(--font-display); font-size: var(--step-1); font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; }
.person__role { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); }

/* gallery */
.gallery { display: grid; gap: clamp(0.6rem, 1.2vw, 1rem); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 48rem) { .gallery { grid-template-columns: repeat(4, 1fr); } }

.gallery figure {
  overflow: hidden;
  border-radius: var(--radius-lg);
  aspect-ratio: 1;
  background: var(--sand-2);
  box-shadow: var(--shadow-sm);
}

.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease-out); }
.gallery figure:hover img { transform: scale(1.07); }
@media (min-width: 48rem) { .gallery figure:nth-child(4n + 1) { grid-row: span 2; aspect-ratio: 1 / 2.06; } }

/* season accordion */
.season { border-top: 1px solid var(--line); }
.season:last-of-type { border-bottom: 1px solid var(--line); }

.season__head {
  width: 100%;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: clamp(1.25rem, 2.5vw, 2rem);
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
}

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

.season__name {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
  transition: color 0.3s;
}

.season__head:hover .season__name { color: var(--coral-d); }

.season__months {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-left: auto;
}

.season__sign {
  flex: none;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--sand);
  font-family: var(--font-mono);
  color: var(--coral-d);
  transition: transform 0.4s var(--ease-out), background 0.3s;
}

.season[open] .season__sign { transform: rotate(45deg); background: var(--peach); color: var(--ink); }

.season__body { display: grid; gap: clamp(1rem, 2vw, 1.75rem); padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
@media (min-width: 54rem) { .season__body { grid-template-columns: repeat(2, 1fr); } }

.season__item {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: clamp(1rem, 2vw, 1.5rem);
  background: var(--paper-2);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.season__place { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--coral-d); }
.season__item p { color: var(--text-mute); font-size: 0.93rem; }

/* ---------------------------------------------------------------- 21. footer */

.footer { position: relative; background: var(--ink); color: var(--on-ink); overflow: clip; }
.footer__top { padding-top: clamp(3rem, 6vw, 5rem); }

.footer__grid { display: grid; gap: clamp(2rem, 4vw, 3rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 54rem) { .footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 76rem) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1.4fr; } }

.footer__h {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--peach);
  margin-bottom: 1.1rem;
}

.footer__list { display: flex; flex-direction: column; gap: 0.55rem; }

.footer__list a {
  color: var(--on-ink-mute);
  font-size: 0.92rem;
  transition: color 0.3s, transform 0.3s var(--ease-out);
  width: fit-content;
}

.footer__list a:hover { color: var(--peach); transform: translateX(4px); }

.footer__office { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 1.25rem; }
.footer__office span { font-size: 0.9rem; color: var(--on-ink-mute); }
.footer__office a { font-size: 0.9rem; color: var(--on-ink-mute); transition: color 0.3s; }
.footer__office a:hover { color: var(--peach); }

.footer__office strong {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--peach);
  font-weight: 400;
}

.footer .lede { color: var(--on-ink-mute); }

.footer__wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3rem, 14vw, 13rem);
  line-height: 0.78;
  letter-spacing: -0.055em;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1px rgb(253 250 246 / 0.2);
  white-space: nowrap;
  user-select: none;
  padding-bottom: 0.06em;
}

.footer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding-block: 1.5rem;
  border-top: 1px solid var(--line-ink);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--on-ink-faint);
}

.footer__bar a { transition: color 0.3s; }
.footer__bar a:hover { color: var(--peach); }

.creds { display: flex; gap: 1.5rem; }
.creds div { display: flex; flex-direction: column; }
.creds strong { color: var(--on-ink-mute); font-weight: 400; }

.footer .share a { border-color: var(--line-ink); color: var(--on-ink-mute); }
.footer .share a:hover { color: var(--ink); background: var(--peach); border-color: transparent; }

/* --------------------------------------------------------------- 22. motion */

[data-anim] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
  transition-delay: var(--d, 0ms);
}

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

/* custom cursor — fine pointers only */
.cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9998;
  width: 26px;
  height: 26px;
  border: 2px solid var(--coral);
  border-radius: 50%;
  pointer-events: none;
  transform: translate3d(-100px, -100px, 0);
  transition: width 0.35s var(--ease-out), height 0.35s var(--ease-out), background 0.35s, border-color 0.35s, opacity 0.3s;
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  .cursor { display: block; }
  body[data-cursor="link"] .cursor {
    width: 54px;
    height: 54px;
    background: rgb(235 101 114 / 0.16);
    border-color: var(--coral);
  }
}

/* while a page is being swapped in */
body[data-swapping="true"] { cursor: progress; }

/* the language switch cross-fades the page rather than snapping it; without
   this the default transition is fast enough to still read as a flash */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.34s;
  animation-timing-function: var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
}

/* ------------------------------------------------------ 23. language switch */

.langswitch { position: relative; }

.langswitch__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.8rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.3s, box-shadow 0.3s, opacity 0.3s;
}

.langswitch__toggle:hover { background: var(--sand); }
.langswitch__toggle[aria-expanded="true"] { background: var(--sand); box-shadow: var(--shadow-sm); }

.langswitch__now { line-height: 1; }
@media (max-width: 30rem) { .langswitch__now { display: none; } }

.flag {
  width: 21px;
  height: 14px;
  flex: none;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgb(30 23 38 / 0.14) inset;
}

.langswitch__caret {
  width: 13px;
  height: 13px;
  flex: none;
  color: var(--text-faint);
  transition: transform 0.35s var(--ease-out);
}

.langswitch__toggle[aria-expanded="true"] .langswitch__caret { transform: rotate(180deg); }

.langswitch__menu {
  position: absolute;
  z-index: 40;
  top: calc(100% + 0.6rem);
  right: 0;
  min-width: 12.5rem;
  padding: 0.4rem;
  background: var(--paper-2);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(0.97);
  transform-origin: top right;
  transition: opacity 0.25s var(--ease-out), transform 0.3s var(--ease-out),
              visibility 0s linear 0.3s;
}

.langswitch__toggle[aria-expanded="true"] + .langswitch__menu {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.25s var(--ease-out), transform 0.3s var(--ease-out), visibility 0s;
}

.langswitch__menu a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0.85rem;
  border-radius: 11px;
  font-size: 0.95rem;
  color: var(--text-soft);
  transition: background 0.25s, color 0.25s;
}

.langswitch__menu a:hover { background: var(--sand); color: var(--text); }
.langswitch__menu a[aria-selected="true"] { color: var(--text); font-weight: 500; }
.langswitch__menu a span { flex: 1; }

.langswitch__tick {
  width: 15px;
  height: 15px;
  flex: none;
  color: var(--coral-d);
  opacity: 0;
  transition: opacity 0.25s;
}

.langswitch__menu a[aria-selected="true"] .langswitch__tick { opacity: 1; }

/* a brief veil while the other language is fetched */
.langswitch[data-busy="true"] .langswitch__toggle { opacity: 0.5; pointer-events: none; }

/* ------------------------------------ 24. header furniture retracts on scroll */

.masthead__seam,
.sand { transition: opacity 0.4s var(--ease-out); }

.masthead[data-stuck="true"] .masthead__seam,
.masthead[data-stuck="true"] .sand { opacity: 0; }

/* no point animating what nobody can see */
.masthead[data-stuck="true"] .sand__grain { animation-play-state: paused; }

/* --------------------------------------------------- 25. floating actions */

.fabs {
  position: fixed;
  right: var(--fab-inset);
  bottom: var(--fab-inset);
  z-index: 90;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
  gap: var(--fab-gap);
  transition: opacity 0.3s var(--ease-out);
}

/* out of the way while the mobile menu is open */
body[data-drawer="open"] .fabs { opacity: 0; pointer-events: none; }

.fab {
  --fab-bg: var(--ink);
  --fab-fg: var(--on-ink);
  position: relative;
  display: flex;
  align-items: center;
  height: var(--fab-size);
  border-radius: 100px;
  background: var(--fab-bg);
  color: var(--fab-fg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  cursor: pointer;
  border: 0;
  animation: fab-in 0.6s var(--ease-out) backwards;
  transition: box-shadow 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}

.fab:nth-child(1) { animation-delay: 0.5s; }
.fab:nth-child(2) { animation-delay: 0.62s; }
.fab:nth-child(3) { animation-delay: 0.74s; }

@keyframes fab-in {
  from { opacity: 0; transform: translateY(14px) scale(0.85); }
  to   { opacity: 1; transform: none; }
}

/* after the first soft navigation the buttons are already familiar —
   replaying their entrance on every swap reads as a flicker */
body[data-swapped="true"] .fab { animation: none; }

.fab:hover,
.fab:focus-visible { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.fab:active { transform: translateY(-1px) scale(0.97); }

.fab__icon { display: grid; place-items: center; width: var(--fab-size); height: var(--fab-size); flex: none; }
.fab__icon svg { width: 25px; height: 25px; }

/* the label unfurls on hover, and is always available to screen readers */
.fab__label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
  max-width: 0;
  opacity: 0;
  padding-right: 0;
  transition: max-width 0.5s var(--ease-out), opacity 0.3s var(--ease-out), padding-right 0.5s var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .fab:hover .fab__label,
  .fab:focus-visible .fab__label { max-width: 15rem; opacity: 1; padding-right: 1.4rem; }
}

.fab--whatsapp { --fab-bg: #1faf54; --fab-fg: #fff; }
.fab--assistant { --fab-bg: var(--lilac-d); --fab-fg: #fff; }
.fab--quote { --fab-bg: var(--ink); --fab-fg: var(--on-ink); }

/* a slow halo so the group reads as an invitation, not furniture */
.fab--whatsapp::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgb(31 175 84 / 0.5);
  animation: fab-pulse 3.4s ease-out infinite;
  animation-delay: 2s;
  pointer-events: none;
}

@keyframes fab-pulse {
  0%   { box-shadow: 0 0 0 0 rgb(31 175 84 / 0.45); }
  55%  { box-shadow: 0 0 0 14px rgb(31 175 84 / 0); }
  100% { box-shadow: 0 0 0 0 rgb(31 175 84 / 0); }
}

@media (max-width: 30rem) {
  .fab__icon svg { width: 22px; height: 22px; }
}

/* -------------------------------------------------------------- 24b. journal */

/* a column narrow enough to read comfortably, for prose rather than layout */
.shell--narrow { max-width: 46rem; }

/* the newest story, given the whole width */
.lead-post {
  display: grid;
  gap: clamp(1.2rem, 3vw, 2.6rem);
  align-items: center;
  padding: clamp(0.75rem, 1.5vw, 1rem);
  background: var(--paper-2);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line-soft);
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}

.lead-post:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg), inset 0 0 0 1px transparent;
}

@media (min-width: 56rem) {
  .lead-post { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
}

.lead-post__media {
  display: block;
  overflow: hidden;
  border-radius: calc(var(--radius-xl) - 10px);
  aspect-ratio: 16 / 10;
  background: var(--sand-2);
}

.lead-post__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 0.9s var(--ease-out);
}

.lead-post:hover .lead-post__media img { transform: scale(1.07); }

.lead-post__body {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: clamp(0.5rem, 2vw, 1.75rem) clamp(0.5rem, 2vw, 1.5rem) clamp(1rem, 2vw, 1.75rem);
}

.lead-post__flag {
  align-self: flex-start;
  padding: 0.32rem 0.75rem;
  border-radius: 100px;
  background: var(--sunset);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.lead-post__title {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--ink);
  text-wrap: balance;
  transition: color 0.3s;
}

.lead-post:hover .lead-post__title { color: var(--coral-d); }

.lead-post__lede { color: var(--text-mute); line-height: 1.65; }

.lead-post__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.4rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line-soft);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.lead-post__go { color: var(--coral-d); }
.lead-post:hover .lead-post__go span { display: inline-block; transform: translateX(4px); transition: transform 0.3s var(--ease-out); }

/* the rest of the run */
.posts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
  gap: clamp(1.2rem, 2.4vw, 2rem);
  margin-top: clamp(1.6rem, 3.5vw, 2.8rem);
}

@media (min-width: 62rem) {
  .posts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .posts--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.pcard { display: flex; flex-direction: column; }

.pcard__media {
  display: block;
  overflow: hidden;
  border-radius: var(--radius-lg);
  aspect-ratio: 3 / 2;
  background: var(--sand-2);
}

.pcard__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 0.9s var(--ease-out);
}

.pcard:hover .pcard__media img { transform: scale(1.08); }

.pcard__body { display: flex; flex-direction: column; gap: 0.55rem; padding: 1.1rem 0.25rem 0; }

.pcard__date {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.pcard__title {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.pcard__title a { color: var(--ink); transition: color 0.3s; }
.pcard:hover .pcard__title a { color: var(--coral-d); }

.pcard__lede {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--text-mute);
  /* three lines keeps a row of cards the same shape */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pcard__more {
  margin-top: auto;
  padding-top: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--coral-d);
}

.pcard:hover .pcard__more span { display: inline-block; transform: translateX(4px); transition: transform 0.3s var(--ease-out); }

/* --- the post itself ---------------------------------------------------- */

.post__head {
  padding-top: calc(var(--masthead-h) + clamp(1.5rem, 4vw, 3rem));
  padding-bottom: clamp(1.6rem, 3.5vw, 2.6rem);
  text-align: center;
}

.post__head .crumbs { justify-content: center; }

.post__kicker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 1.4rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--peach-d);
}

.post__title {
  font-family: var(--font-display);
  font-size: var(--step-4);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.04em;
  margin-top: 0.8rem;
  text-wrap: balance;
}

.post__standfirst {
  max-width: 38rem;
  margin: 1.2rem auto 0;
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--text-mute);
  text-wrap: pretty;
}

/* the hero band: a blurred copy of the picture fills the width, the picture
   itself stays its own size in the middle */
.post__hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(1.5rem, 4vw, 3rem);
  margin-bottom: clamp(2.2rem, 4.5vw, 3.75rem);
}

.post__hero-wash {
  position: absolute;
  inset: -6%;
  z-index: -1;
  background-size: cover;
  background-position: center;
  filter: blur(38px) saturate(115%);
  transform: scale(1.12);
  opacity: 0.5;
}

.post__hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, var(--paper) 0%, transparent 22%, transparent 78%, var(--paper) 100%);
}

/* align-items defaults to stretch, which collapses an img with height:auto
   to the line height — the picture rendered 0px tall. Centre it instead,
   and reserve the band so the layout does not jump when it arrives. */
.post__hero-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(12rem, 30vw, 26rem);
}

.post__hero-frame img {
  max-width: min(100%, 60rem);
  max-height: 30rem;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-xl);
  box-shadow: 0 26px 60px rgb(30 23 38 / 0.24);
}

/* --- the article ---------------------------------------------------------- */

.prose--article { font-size: 1.06rem; line-height: 1.78; color: var(--text-soft); }

.prose--article > p + p { margin-top: 1.35rem; }

/* the opening paragraph carries the reader in */
.prose--article > p:first-of-type {
  font-size: 1.18rem;
  line-height: 1.65;
  color: var(--text);
}

.prose--article > p:first-of-type::first-letter {
  float: left;
  margin: 0.08em 0.5rem 0 0;
  font-family: var(--font-display);
  font-size: 3.3em;
  font-weight: 700;
  line-height: 0.82;
  color: var(--coral-d);
}

.prose--article h2 {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin-top: clamp(2.2rem, 4vw, 3rem);
  margin-bottom: 0.9rem;
  text-wrap: balance;
}

/* a rule that belongs to the heading rather than sitting between things */
.prose--article h2::before {
  content: "";
  display: block;
  width: 2.2rem;
  height: 3px;
  border-radius: 3px;
  margin-bottom: 1rem;
  background: var(--sunset);
}

.post__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: clamp(2.4rem, 4.5vw, 3.5rem);
  padding-top: clamp(1.3rem, 2.5vw, 2rem);
  border-top: 1px solid var(--line);
}

.post__back {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-mute);
  transition: color 0.3s;
}

.post__back:hover { color: var(--coral-d); }
.post__back:hover span { display: inline-block; transform: translateX(-3px); transition: transform 0.3s var(--ease-out); }
/* ------------------------------------------------ 25a. institutional logos */

/* a centred head, for the sections that are an announcement rather than a
   heading with something alongside it */
.section-head--centred {
  display: block;
  text-align: center;
  max-width: 44rem;
  margin-inline: auto;
}

.section-head--centred .lede { margin-inline: auto; }
.section-head--centred .eyebrow { justify-content: center; }

.partners {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: clamp(1rem, 2.2vw, 1.6rem);
  margin-top: clamp(2.4rem, 5vw, 3.6rem);
  list-style: none;
}

.partner__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  height: 100%;
  padding: clamp(1.6rem, 3vw, 2.2rem) 1.4rem clamp(1.2rem, 2.4vw, 1.6rem);
  text-align: center;
  background: var(--paper-2);
  border-radius: var(--radius-lg);
  box-shadow: inset 0 0 0 1px var(--line-soft);
  transition: box-shadow 0.35s, transform 0.35s var(--ease-out), background 0.35s;
}

a.partner__inner:hover {
  background: var(--paper);
  box-shadow: inset 0 0 0 1px transparent, var(--shadow-md);
  transform: translateY(-4px);
}

/* the logos arrive at wildly different aspect ratios, so the box is fixed and
   the artwork fits inside it rather than the other way round */
.partner__mark {
  --mark-h: 74px;
  display: grid;
  grid-template-rows: var(--mark-h);
  place-items: center;
  width: 100%;
  height: var(--mark-h);
  margin-bottom: 1.1rem;
}

.partner__mark img {
  max-width: 100%;
  max-height: var(--mark-h);
  width: auto;
  height: auto;
  object-fit: contain;
}

/* stands in until the real artwork lands */
.partner__wordmark {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1;
  background: var(--sunset-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-inline: 0.12em;
  margin-inline: -0.12em;
}

.partner__name {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
}

.partner__full {
  font-size: 0.83rem;
  line-height: 1.45;
  color: var(--text-faint);
  margin-top: 0.3rem;
  max-width: 22ch;
}
/* ------------------------------------------------- 25b. tripadvisor score */

.rating {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 1rem 0.6rem 0.75rem;
  border-radius: 100px;
  background: var(--paper-2);
  box-shadow: inset 0 0 0 1px var(--line-soft);
  transition: box-shadow 0.3s, transform 0.3s var(--ease-out), background 0.3s;
}

.rating:hover {
  background: var(--sand);
  box-shadow: inset 0 0 0 1px transparent, var(--shadow-sm);
  transform: translateY(-2px);
}

.rating__score {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.rating__logo {
  width: 30px;
  height: 30px;
  flex: none;
  color: var(--lagoon-d);
  transition: color 0.3s, transform 0.3s var(--ease-out);
}

.rating:hover .rating__logo { color: var(--ink); transform: scale(1.06); }

.rating--compact .rating__logo { width: 24px; height: 24px; }

.rating__stars { display: inline-flex; gap: 3px; }

.rating__dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--line);
}

.rating__dot.is-on { background: var(--peach-d); }

.rating__dot.is-half {
  background: linear-gradient(90deg, var(--peach-d) 50%, var(--line) 50%);
}

.rating__meta {
  display: flex;
  flex-direction: column;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--text-faint);
}

.rating__meta b { font-weight: 500; color: var(--text); }

.rating--compact { padding: 0.4rem 0.8rem 0.4rem 0.55rem; gap: 0.5rem; }
.rating--compact .rating__score { font-size: 1.15rem; }
.rating--compact .rating__stars { display: none; }

/* A review arrives with a name, a date, a rating and a source. It is a
   different object from an unattributed pull quote, so it is built as one:
   rating and source on top, then the title, then the words, then who said them. */
.quote--verified {
  display: flex;
  flex-direction: column;
  background: var(--paper-2);
  box-shadow: inset 0 0 0 1px var(--line-soft);
  transition: box-shadow 0.35s, transform 0.35s var(--ease-out);
}

.quote--verified:hover {
  box-shadow: inset 0 0 0 1px transparent, var(--shadow-md);
  transform: translateY(-3px);
}

.quote__source {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-bottom: 0.95rem;
  margin-bottom: 0.95rem;
  border-bottom: 1px solid var(--line-soft);
}

.quote__stars { display: inline-flex; gap: 3px; }

.quote__stars span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--peach-d);
}

.quote__source a {
  display: inline-flex;
  color: var(--lagoon-d);
  transition: color 0.3s, transform 0.3s var(--ease-out);
}

.quote__source svg { width: 22px; height: 22px; }
.quote__source a:hover { color: var(--ink); transform: scale(1.08); }

/* scoped: dialog.quote also has a .quote__title, and without this rule the
   review titles inherit the modal heading's display size */
.quote--verified .quote__title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: 0.5rem;
  /* two review titles run to five lines and dragged every card in the
     rail up to their height; the full title is one click away */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.quote--verified .quote__body { flex: 1; }

/* The generic .quote__by is mono, uppercase and single-line, which a handle
   like "Explorer61806895893" cannot fit and which split "Brice G" in two.
   The name gets its own line, in normal case, and truncates rather than wraps. */
.quote__author {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 1.6rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line-soft);
}

.quote__avatar {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 50%;
  background: var(--sand);
  color: var(--peach-d);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
}

.quote__who {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;                 /* lets the name truncate instead of pushing out */
}

.quote__who b {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.quote__when {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.quote__when a {
  color: var(--lagoon-d);
  border-bottom: 1px solid currentColor;
  transition: color 0.3s;
}

.quote__when a:hover { color: var(--coral-d); }

/* the badge sits above the drag hint in a section head */
.section-head__aside .rating { margin-left: auto; }
/* ------------------------------------------------------------ 26. assistant */

/* above the masthead (100) and the progress hairline (101): the panel is
   something the visitor opened, so nothing may paint over it. The wrapper is
   pointer-events: none, so it still does not block the page underneath. */
.assistant { position: fixed; inset: 0; z-index: 102; pointer-events: none; }

.assistant__panel {
  position: absolute;
  right: var(--fab-inset);
  bottom: calc(var(--fab-stack) + 0.7rem);
  /* wider and taller than a notification bubble: this is a conversation, and
     the replies carry lists of tours */
  width: min(28rem, calc(100vw - 1.8rem));
  max-height: min(40rem, calc(100svh - var(--fab-stack) - 3rem));
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border-radius: var(--radius-xl);
  box-shadow: 0 30px 70px rgb(30 23 38 / 0.26);
  overflow: hidden;
  pointer-events: auto;
  transform-origin: bottom right;
  opacity: 0;
  transform: translateY(14px) scale(0.96);
  transition: opacity 0.28s var(--ease-out), transform 0.36s var(--ease-out),
              visibility 0s linear 0.36s;
  visibility: hidden;
}

.assistant__panel:not([hidden]) {
  opacity: 1;
  transform: none;
  visibility: visible;
  transition: opacity 0.28s var(--ease-out), transform 0.36s var(--ease-out), visibility 0s;
}

/* `hidden` alone would drop it from the flow before the transition runs */
.assistant__panel[hidden] { display: flex; }

@media (max-width: 34rem) {
  .assistant__panel {
    right: 0.6rem;
    left: 0.6rem;
    width: auto;
    bottom: calc(var(--fab-inset) + var(--fab-size) + 0.7rem);
    max-height: min(34rem, calc(100svh - min(var(--masthead-h), 8rem)
                                - var(--fab-inset) - var(--fab-size) - 1.9rem));
  }
}

/* with the height to spare, sit below the site header instead of over it */
/* wider than the phone rule below it, which would otherwise be overridden */
@media (min-height: 44rem) and (min-width: 34.0625rem) {
  .assistant__panel {
    max-height: min(40rem, calc(100svh - min(var(--masthead-h), 8rem) - var(--fab-stack) - 1.25rem));
  }
}

/* a laptop in landscape has no height to spare either: same trade as the
   phone rule, the panel sits over the floating stack and closes itself */
@media (min-width: 34.0625rem) and (max-height: 52rem) {
  .assistant__panel {
    bottom: calc(var(--fab-inset) + var(--fab-size) + 0.7rem);
    max-height: calc(100svh - min(var(--masthead-h), 8rem)
                             - var(--fab-inset) - var(--fab-size) - 1.9rem);
  }
}

.assistant__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.35rem 1rem;
  background:
    radial-gradient(80% 120% at 90% 0%, rgb(164 123 180 / 0.3), transparent 70%),
    var(--sand);
}

.assistant__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lilac-d);
}

.assistant__title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.05;
  margin-top: 0.3rem;
}

.assistant__close {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--paper-2);
  color: var(--text-mute);
  cursor: pointer;
  transition: color 0.3s, background 0.3s, transform 0.3s var(--ease-out);
}

.assistant__close svg { width: 15px; height: 15px; }
.assistant__close:hover { color: var(--ink); background: var(--sand-2); transform: rotate(90deg); }

/* the conversation owns everything between the header and the input */
.assistant__log {
  flex: 1 1 auto;
  min-height: 8rem;
  overflow-y: auto;
  padding: 1.15rem 1.35rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}

.assistant__msg {
  max-width: 90%;
  padding: 0.8rem 1.05rem;
  border-radius: 18px;
  font-size: 0.93rem;
  line-height: 1.6;
  animation: msg-in 0.35s var(--ease-out) backwards;
}

@keyframes msg-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.assistant__msg--bot {
  align-self: flex-start;
  background: var(--sand);
  color: var(--text-soft);
  border-bottom-left-radius: 6px;
}

.assistant__msg--user {
  align-self: flex-end;
  background: var(--ink);
  color: var(--on-ink);
  border-bottom-right-radius: 6px;
}

/* tour results inside a reply */
.assistant__results { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.8rem; }

.assistant__result {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.6rem 0.8rem;
  border-radius: 12px;
  background: var(--paper-2);
  color: var(--text);
  font-size: 0.87rem;
  transition: background 0.25s, transform 0.25s var(--ease-out);
}

.assistant__result:hover { background: var(--sand-2); transform: translateX(2px); }
.assistant__result b { font-weight: 500; }

.assistant__result span {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-faint);
  white-space: nowrap;
}

.assistant__action {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.8rem;
  padding: 0.55rem 1rem;
  border-radius: 100px;
  background: var(--sunset);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  cursor: pointer;
  border: 0;
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s;
}

.assistant__action:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }

/* follow-up questions, sitting in the thread rather than in a fixed strip —
   they scroll with the conversation, so nothing squeezes them out */
.assistant__suggest {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding-top: 0.15rem;
  animation: msg-in 0.4s var(--ease-out) 0.1s backwards;
}

.assistant__suggest-label {
  flex: 1 0 100%;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 0.1rem;
}

.assistant__chip {
  padding: 0.5rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: var(--paper-2);
  font-size: 0.83rem;
  line-height: 1.35;
  color: var(--text-soft);
  cursor: pointer;
  text-align: left;
  transition: color 0.25s, border-color 0.25s, background 0.25s, transform 0.25s var(--ease-out);
}

.assistant__chip:hover {
  color: var(--ink);
  border-color: transparent;
  background: var(--sand);
  transform: translateY(-1px);
}

/* the opening menu: one door per line, sized to its label, the way a person
   would lay out a short list of choices */
.assistant__suggest:has(.assistant__chip--topic) {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
}

.assistant__chip--topic {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 0.95rem 0.4rem 0.4rem;
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--text);
}

.assistant__chip--topic:hover { transform: translateX(3px); }

.assistant__chip-icon {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  flex: none;
  border-radius: 8px;
  background: var(--sand);
  font-size: 0.9rem;
  line-height: 1;
  transition: background 0.25s;
}

.assistant__chip--topic:hover .assistant__chip-icon { background: var(--paper); }

/* the way out of any list — deliberately quieter than the questions above it */
.assistant__chip--back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.15rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  background: transparent;
  border-style: dashed;
}

.assistant__chip--back .assistant__chip-icon {
  width: auto;
  height: auto;
  background: none;
  font-size: 0.95rem;
}

.assistant__chip--back:hover {
  color: var(--ink);
  background: var(--paper-2);
  border-style: solid;
}

.assistant__form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 0.7rem 0.65rem 1.2rem;
  border-top: 1px solid var(--line-soft);
  background: var(--paper-2);
}

.assistant__form input {
  flex: 1;
  border: 0;
  background: transparent;
  font-size: 0.93rem;
  color: var(--text);
}

.assistant__form input:focus { outline: none; }

.assistant__form button {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  border: 0;
  border-radius: 50%;
  background: var(--ink);
  color: var(--on-ink);
  cursor: pointer;
  transition: background 0.3s, transform 0.3s var(--ease-out);
}

.assistant__form button svg { width: 18px; height: 18px; }
.assistant__form button:hover { transform: translateX(2px); }

.assistant__foot {
  padding: 0.55rem 1.35rem 0.85rem;
  font-size: 0.7rem;
  color: var(--text-faint);
  background: var(--paper-2);
  border-top: 1px solid var(--line-soft);
}

.assistant__foot .link { font-size: 0.7rem; }
/* ------------------------------------------------------- 27. quote modal */

dialog.quote {
  width: min(100% - 1.5rem, 46rem);
  max-height: min(92svh, 54rem);
  /* A modal dialog is centred by the UA with `margin: auto` against `inset: 0`.
     Our `* { margin: 0 }` reset wipes the margin, which pins the box to the
     top-left and — with both block insets still 0 — stretches it to the full
     height of the viewport. Restoring the margin restores both. */
  inset: 0;
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: var(--radius-xl);
  background: var(--paper);
  color: var(--text);
  box-shadow: 0 40px 90px rgb(30 23 38 / 0.28);
  overflow: hidden auto;
  /* the entrance; `allow-discrete` lets display/overlay join the transition */
  opacity: 0;
  transform: translateY(16px) scale(0.97);
  transition:
    opacity 0.32s var(--ease-out),
    transform 0.4s var(--ease-out),
    overlay 0.4s allow-discrete,
    display 0.4s allow-discrete;
}

dialog.quote[open] { opacity: 1; transform: none; }

@starting-style {
  dialog.quote[open] { opacity: 0; transform: translateY(16px) scale(0.97); }
}

dialog.quote::backdrop {
  background: rgb(30 23 38 / 0.55);
  backdrop-filter: blur(5px);
  opacity: 0;
  transition: opacity 0.32s var(--ease-out), overlay 0.4s allow-discrete, display 0.4s allow-discrete;
}

dialog.quote[open]::backdrop { opacity: 1; }

@starting-style {
  dialog.quote[open]::backdrop { opacity: 0; }
}

.quote__close-form { position: absolute; top: 0; right: 0; z-index: 3; }

.quote__close {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin: 1rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--paper-2);
  color: var(--text-mute);
  cursor: pointer;
  transition: color 0.3s, background 0.3s, transform 0.3s var(--ease-out);
}

.quote__close svg { width: 17px; height: 17px; }
.quote__close:hover { color: var(--ink); background: var(--sand); transform: rotate(90deg); }

/* head sits on sand so the form below reads as the working area */
.quote__head {
  padding: clamp(1.75rem, 4vw, 2.5rem) clamp(1.25rem, 3vw, 2.5rem) clamp(1.25rem, 2.5vw, 1.75rem);
  background:
    radial-gradient(70% 100% at 85% 0%, rgb(243 163 107 / 0.28), transparent 70%),
    var(--sand);
}

.quote__title {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.04em;
  margin-top: 0.85rem;
}

.quote__lede { color: var(--text-mute); font-size: 0.95rem; margin-top: 0.75rem; max-width: 46ch; }

/* the tour you were looking at when you opened it */
.quote__context {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.25rem;
  padding: 0.5rem 0.95rem;
  border-radius: 100px;
  background: var(--paper-2);
  box-shadow: var(--shadow-sm);
  font-size: 0.88rem;
  font-weight: 500;
}

.quote__context .num { color: var(--text-faint); font-weight: 400; font-size: 0.78rem; }

.quote__body { padding: clamp(1.25rem, 3vw, 2.5rem); }

.quote__group { border: 0; padding: 0; margin: 0 0 clamp(1.5rem, 3vw, 2rem); }

.quote__group legend {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--peach-d);
  padding: 0 0 0.9rem;
}

.quote__grid { display: grid; grid-template-columns: 1fr; gap: 0.9rem; }

@media (min-width: 34rem) {
  .quote__grid { grid-template-columns: 1fr 1fr; }
  .quote__grid .field--full { grid-column: 1 / -1; }
}

.quote__check {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.92rem;
  color: var(--text-soft);
  cursor: pointer;
}

.quote__check input { width: 20px; height: 20px; accent-color: var(--coral-d); cursor: pointer; }

.quote__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 1.25rem;
  padding-top: clamp(1rem, 2vw, 1.5rem);
  border-top: 1px solid var(--line);
}

.quote__note { font-size: 0.78rem; color: var(--text-faint); flex: 1 1 16rem; }

.quote__alt {
  margin-top: 1.25rem;
  font-size: 0.88rem;
  color: var(--text-mute);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}

/* the page behind must not scroll while the dialog is up */
body:has(dialog.quote[open]) { overflow: hidden; }

/* ----------------------------------------------------------- 28. a11y prefs */

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

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

  [data-anim] { opacity: 1; transform: none; }
  .reveal-word > span { transform: none; }
  .cursor { display: none !important; }
  .fab { animation: none; }
  .fab--whatsapp::after { animation: none; }
  .assistant__panel, .assistant__msg { transition: none; animation: none; }
  .assistant__close:hover { transform: none; }
  dialog.quote, dialog.quote::backdrop { transition: none; }
  .quote__close:hover { transform: none; }
}

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

@view-transition { navigation: auto; }

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.4s;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}