/* ==========================================================================
   Damneth Tours & Travels: site styles
   Every colour, size, radius, shadow and timing comes from tokens.css.
   Breakpoints: 40em (sm), 48em (md), 64em (lg), 80em (xl).
   ========================================================================== */

/* ---------- 1. Reset & base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-height) + var(--space-4));
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  min-height: 100vh;
  overflow-x: clip;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.menu-open {
  overflow: hidden;
}

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

img {
  height: auto;
}

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

button {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration-thickness: var(--border-thin);
  text-underline-offset: 0.22em;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--color-heading);
  text-wrap: balance;
}

p,
li,
dd {
  text-wrap: pretty;
}

/* Zero specificity, so component classes can set their own padding */
:where(ul[role="list"], ol[role="list"]) {
  padding: 0;
  list-style: none;
}

fieldset {
  min-width: 0;
  padding: 0;
  border: 0;
}

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

::selection {
  background: var(--color-accent);
  color: var(--color-on-accent);
}

/* ---------- 2. Utilities ---------- */
/* Filtered-out cards keep their layout display, so `hidden` must win */
[hidden] {
  display: none !important;
}

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

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

.skip-link {
  position: fixed;
  top: var(--space-3);
  inset-inline-start: var(--space-3);
  z-index: calc(var(--z-menu) + 10);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform var(--duration-fast) var(--ease-out);
}

.skip-link:focus {
  transform: none;
}

.icon {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon--sm {
  width: 1.125rem;
  height: 1.125rem;
}

.icon--lg {
  width: 2rem;
  height: 2rem;
}

/* ---------- 3. Typography ---------- */
.section {
  padding-block: var(--space-section);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  line-height: var(--leading-snug);
  text-transform: uppercase;
  color: var(--color-eyebrow);
}

.eyebrow::before {
  content: "";
  width: 1.75rem;
  border-top: var(--border-thick) dashed currentColor;
}

.section-title {
  font-size: var(--text-4xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.section-title--md {
  font-size: var(--text-3xl);
}

.lead {
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
}

.section-head {
  max-width: 44rem;
}

.section-head .lead {
  margin-top: var(--space-5);
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  color: var(--color-primary);
  text-decoration: none;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.24em;
  transition: color var(--duration-fast) var(--ease-out);
}

.theme-dark .text-link {
  color: var(--color-accent);
}

.text-link .icon {
  width: 1.15em;
  height: 1.15em;
  transition: transform var(--duration-fast) var(--ease-out);
}

.text-link:hover {
  text-decoration: underline;
  color: var(--color-primary-hover);
}

.theme-dark .text-link:hover {
  color: var(--color-gold-300);
}

.text-link:hover .icon {
  transform: translateX(4px);
}

/* ---------- 4. Buttons ---------- */
.btn {
  --btn-bg: transparent;
  --btn-fg: currentColor;
  --btn-border: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 3.25rem;
  padding: var(--space-3) var(--space-6);
  border: var(--border-thick) solid var(--btn-border);
  border-radius: var(--radius-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition:
    transform var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out);
}

.btn .icon {
  width: 1.3em;
  height: 1.3em;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn:active {
  transform: translateY(0);
}

.btn--accent {
  --btn-bg: var(--color-accent);
  --btn-fg: var(--color-on-accent);
  box-shadow: var(--shadow-accent);
}

.btn--accent:hover {
  --btn-bg: var(--color-accent-hover);
  box-shadow: var(--shadow-accent-hover);
}

.btn--accent:active {
  --btn-bg: var(--color-accent-pressed);
  box-shadow: var(--shadow-xs);
}

.btn--primary {
  --btn-bg: var(--color-primary);
  --btn-fg: var(--color-text-inverse);
}

.btn--primary:hover {
  --btn-bg: var(--color-primary-hover);
  box-shadow: var(--shadow-primary);
}

.btn--primary:active {
  --btn-bg: var(--color-primary-pressed);
  box-shadow: var(--shadow-xs);
}

.btn--dark {
  --btn-bg: var(--color-ocean-900);
  --btn-fg: var(--color-text-inverse);
}

.btn--dark:hover {
  --btn-bg: var(--color-ocean-800);
  box-shadow: var(--shadow-primary);
}

.btn--dark:active {
  --btn-bg: var(--color-ocean-950);
  box-shadow: var(--shadow-xs);
}

.btn--outline {
  --btn-border: currentColor;
}

.btn--outline:hover {
  --btn-bg: var(--color-primary-soft);
}

.btn--outline:active {
  --btn-bg: var(--color-primary-soft-strong);
}

.btn--lg {
  min-height: 3.75rem;
  padding-inline: var(--space-7);
  font-size: var(--text-md);
}

@media (max-width: 29.99em) {
  .btn {
    padding-inline: var(--space-5);
  }
}

.nowrap {
  white-space: nowrap;
}

.btn--block {
  width: 100%;
}

/* ---------- 5. Header & navigation ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-header);
  color: var(--color-text-inverse);
  transition:
    background-color var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out),
    color var(--duration-base) var(--ease-out);
}

.site-header::before {
  content: "";
  position: absolute;
  inset: 0 0 -2.5rem;
  background: var(--overlay-header);
  pointer-events: none;
  transition: opacity var(--duration-base) var(--ease-out);
}

.site-header.is-scrolled {
  --color-focus: var(--color-ocean-700);
  background: var(--color-header-solid);
  box-shadow: 0 1px 0 var(--color-header-line), var(--shadow-sm);
  color: var(--color-text);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
}

.site-header.is-scrolled::before {
  opacity: 0;
}

.site-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  height: var(--header-height);
}

/* Lockup: the round emblem (the company's own logo, on its white disc) beside the name
   set in Poppins as inline SVG, so the name stays sharp and readable at header size.
   --logo-h is the emblem's diameter; the name is sized from it. Over the dark hero (and
   the open mobile menu) the name is white with a soft shadow; on the light scrolled bar
   it turns ocean and the disc gets a fine ring. The lockup shrinks with a transform, so
   nothing around it moves. */
.logo {
  --logo-h: 3.125rem;
  --logo-ink: var(--color-white);
  --logo-tag: var(--color-white);
  --logo-glint: var(--color-gold-300);
  --logo-shadow:
    drop-shadow(0 1px 1px rgb(4 22 30 / 0.6))
    drop-shadow(0 2px 8px rgb(4 22 30 / 0.35));
  --logo-seal-shadow:
    0 0 0 1px rgb(255 255 255 / 0.5),
    0 2px 10px rgb(4 22 30 / 0.4);
  position: relative;
  z-index: calc(var(--z-menu) + 1);
  display: inline-flex;
  flex-shrink: 1;
  min-width: 0;
  border-radius: var(--radius-sm);
  text-decoration: none;
}

.logo__lockup {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--logo-h) * 0.22);
  transform-origin: left center;
  transition: transform var(--duration-base) var(--ease-out);
}

.logo__seal {
  display: block;
  flex: none;
  width: var(--logo-h);
  height: var(--logo-h);
  border-radius: 50%;
  background: var(--color-white);
  box-shadow: var(--logo-seal-shadow);
  transition: box-shadow var(--duration-base) var(--ease-out);
}

.logo__svg {
  display: block;
  flex: none;
  width: auto;
  height: calc(var(--logo-h) * 0.68);
  overflow: visible;
  filter: var(--logo-shadow);
  transition: filter var(--duration-base) var(--ease-out);
}

.logo__name,
.logo__tag {
  font-family: var(--font-display);
  transition: fill var(--duration-base) var(--ease-out);
}

.logo__name {
  font-size: 23.3px;
  font-weight: var(--weight-semibold);
  fill: var(--logo-ink);
}

.logo__tag {
  font-size: 8.6px;
  font-weight: var(--weight-medium);
  fill: var(--logo-tag);
}

.logo__glint-stop {
  stop-color: var(--logo-glint);
}

/* The light sweep rests off to the left until it runs */
.logo__glint {
  transform: skewX(-18deg);
}

@media (min-width: 64em) {
  .logo--header {
    --logo-h: 3.5rem;
  }
}

.site-header.is-scrolled .logo__lockup {
  transform: scale(0.86);
}

.site-header.is-scrolled:not(.menu-open) .logo--header {
  --logo-ink: var(--color-ocean-900);
  --logo-tag: var(--color-ocean-700);
  --logo-glint: var(--color-gold-500);
  --logo-shadow: drop-shadow(0 0 0 transparent);
  --logo-seal-shadow:
    0 0 0 1px rgb(13 92 117 / 0.2),
    0 1px 4px rgb(4 22 30 / 0.12);
}

/* Footer: the emblem on its own, larger, on the dark band */
.logo--footer {
  --logo-h: 9rem;
}

.logo--footer .logo__img {
  width: var(--logo-h);
  height: var(--logo-h);
  border-radius: 50%;
  background: var(--color-white);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.35), 0 6px 24px rgb(0 0 0 / 0.35);
}

@media (min-width: 48em) {
  .logo--footer {
    --logo-h: 10rem;
  }
}

@media (forced-colors: active) {
  .logo__svg {
    filter: none;
  }

  .logo__name,
  .logo__tag {
    fill: CanvasText;
  }

  .logo__glint {
    display: none;
  }
}

/* Motion: a light sweep crosses the name shortly after load, again every few seconds,
   and straight away on hover or keyboard focus. Transform only, inside a fixed-size box. */
@media (prefers-reduced-motion: no-preference) {
  .logo__glint {
    animation: logo-sweep 7s var(--ease-in-out) 0.6s infinite both;
  }

  .logo:hover .logo__glint,
  .logo:focus-visible .logo__glint {
    animation: logo-sweep-now 1.6s var(--ease-in-out) both;
  }
}

@keyframes logo-sweep {
  0% { transform: translateX(0) skewX(-18deg); }
  32%, 100% { transform: translateX(170px) skewX(-18deg); }
}

@keyframes logo-sweep-now {
  from { transform: translateX(0) skewX(-18deg); }
  to { transform: translateX(170px) skewX(-18deg); }
}

.nav-toggle {
  position: relative;
  z-index: calc(var(--z-menu) + 1);
  display: inline-grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-pill);
  border: var(--border-thin) solid currentColor;
  color: inherit;
}

.nav-toggle .icon-close,
.nav-toggle[aria-expanded="true"] .icon-open {
  display: none;
}

.nav-toggle[aria-expanded="true"] .icon-close {
  display: block;
}

.site-nav__list {
  display: flex;
  gap: var(--space-6);
}

.site-nav__link {
  position: relative;
  display: inline-block;
  padding-block: var(--space-2);
  font-weight: var(--weight-medium);
  text-decoration: none;
}

.site-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--border-thick);
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-base) var(--ease-out);
}

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

.site-nav__contact {
  display: none;
}

@media (max-width: 63.99em) {
  .site-nav {
    position: fixed;
    inset: 0;
    z-index: var(--z-menu);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--space-8);
    padding: calc(var(--header-height) + var(--space-8)) var(--gutter) var(--space-8);
    background: var(--color-bg-deep);
    color: var(--color-text-inverse);
    --color-focus: var(--color-gold-500);
    overflow-y: auto;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-1rem);
    transition:
      opacity var(--duration-base) var(--ease-out),
      transform var(--duration-base) var(--ease-out),
      visibility 0s linear var(--duration-base);
  }

  .site-nav.is-open {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition:
      opacity var(--duration-base) var(--ease-out),
      transform var(--duration-base) var(--ease-out);
  }

  .site-nav__list {
    flex-direction: column;
    gap: var(--space-3);
  }

  .site-nav__link {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: var(--weight-semibold);
  }

  .site-nav__contact {
    display: grid;
    gap: var(--space-4);
    color: var(--color-text-inverse-muted);
  }

  .site-nav__contact a:not(.btn) {
    color: var(--color-text-inverse);
  }

  /* Without JS the menu cannot open; the footer carries the same links */
  .no-js .nav-toggle {
    display: none;
  }

  .site-header.menu-open {
    color: var(--color-text-inverse);
    background: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .site-header.menu-open::before {
    opacity: 0;
  }

  .site-header__cta {
    display: none;
  }
}

@media (min-width: 64em) {
  .nav-toggle {
    display: none;
  }

  .site-nav {
    display: flex;
    align-items: center;
    gap: var(--space-7);
    margin-inline-start: auto;
  }
}

.site-header__cta {
  min-height: 2.875rem;
  padding-inline: var(--space-5);
  font-size: var(--text-sm);
  white-space: nowrap;
}

/* Instagram: an icon beside the WhatsApp button on desktop, a text link in the mobile menu */
.site-header__social {
  display: none;
}

@media (min-width: 64em) {
  .site-header__social {
    display: inline-grid;
    place-items: center;
    width: 2.875rem;
    height: 2.875rem;
    margin-inline-end: calc(var(--space-3) - var(--space-7));
    border: var(--border-thin) solid color-mix(in srgb, currentColor 45%, transparent);
    border-radius: 50%;
    color: inherit;
    transition:
      background-color var(--duration-fast) var(--ease-out),
      border-color var(--duration-fast) var(--ease-out),
      color var(--duration-fast) var(--ease-out);
  }

  .site-header__social:hover {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-on-accent);
  }

  .site-header__social .icon {
    width: 1.25rem;
    height: 1.25rem;
  }
}

.site-nav__social {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.site-nav__social .icon {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--color-accent);
}

@media (max-width: 63.99em) {
  .site-header__inner {
    gap: var(--space-3);
  }
}

/* ---------- 6. Hero ---------- */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: max(42rem, 100svh);
  padding-top: calc(var(--header-height) + var(--space-9));
  padding-bottom: calc(var(--space-10) + var(--space-9));
  overflow: hidden;
  background: var(--color-bg-deepest);
}

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

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 55% 60%;
}

.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--overlay-hero);
}

.hero__inner {
  display: grid;
  gap: var(--space-8);
  align-items: end;
}

.hero__title {
  max-width: 14ch;
  font-size: var(--text-display);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.hero__title-accent {
  display: block;
  color: var(--color-accent);
}

.hero__lead {
  max-width: 37rem;
  margin-top: var(--space-5);
  font-size: var(--text-lg);
  color: var(--color-text-muted);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-7);
}

.hero__assurances {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin-top: var(--space-6);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.hero__assurances li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.hero__assurances .icon {
  color: var(--color-accent);
}

.price-card {
  padding: var(--space-5) var(--space-5) var(--space-4);
  border: var(--border-thin) solid var(--color-border-inverse);
  border-radius: var(--radius-lg);
  background: var(--overlay-glass-strong);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
}

.price-card__title {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-eyebrow);
}

.price-card__list {
  margin-top: var(--space-3);
}

.price-card__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-3);
  border-bottom: var(--border-thin) dashed var(--color-border-inverse);
}

.price-card__name {
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
}

.price-card__note {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  color: var(--color-text-muted);
}

.price-card__value {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  line-height: 1;
  white-space: nowrap;
}

.price-card__value small {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
}

.price-card__from {
  display: block;
  margin-bottom: var(--space-1);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-align: end;
  color: var(--color-text-muted);
}

.price-card .text-link {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
}

.route {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
}

.route__label {
  margin-inline-end: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-eyebrow);
}

.route__stop {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}

.route__stop + .route__stop::before {
  content: "";
  width: clamp(0.75rem, 2.5vw, 2.25rem);
  border-top: var(--border-thick) dashed var(--color-accent);
  opacity: 0.85;
}

.route__dot {
  width: 0.625rem;
  height: 0.625rem;
  margin-inline-end: calc(-1 * var(--space-1));
  border: var(--border-thick) solid var(--color-accent);
  border-radius: 50%;
}

.hero__route {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

@media (min-width: 64em) {
  .hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(17rem, 21rem);
    column-gap: var(--space-9);
  }

  .hero__route {
    grid-column: 1 / -1;
    padding-top: var(--space-6);
    border-top: var(--border-thin) solid var(--color-border-inverse);
  }
}

@media (max-width: 39.99em) {
  .hero__actions .btn {
    flex: 1 1 100%;
  }

  .route__stop + .route__stop::before {
    width: 0.75rem;
  }
}

/* Hero entrance: staggered rise, image settles */
@media (prefers-reduced-motion: no-preference) {
  .hero [data-rise] {
    animation: rise var(--duration-slow) var(--ease-out) both;
    animation-delay: calc(var(--rise, 0) * 110ms + 150ms);
  }

  .hero__media img {
    animation: settle 2.4s var(--ease-out) both;
  }
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(1.5rem);
  }
}

@keyframes settle {
  from {
    transform: scale(1.08);
  }
}

/* Hero background video (home page). It sits over the photo inside .hero__media, so the
   photo is the fallback and the ::after scrim stays on top of both. It is absolutely
   positioned in a box whose size never depends on it: no layout shift. */
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 55% 60%; /* Same crop as the photo, so the poster lines up with it exactly */
  pointer-events: none;
}

/* With JS, the video stays transparent over the photo until frames are actually playing,
   then fades in. Without JS it shows its poster (the same photo) until it plays. */
.js .hero__video {
  opacity: 0;
  transition: opacity 1.4s var(--ease-out);
}

.js .hero__video.is-ready {
  opacity: 1;
}

.hero__video-toggle {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  margin-inline-start: auto;
  padding: 0;
  border: var(--border-thin) solid var(--color-border-inverse);
  border-radius: 50%;
  background: var(--overlay-glass);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--color-white);
  cursor: pointer;
  /* Space is always reserved; main.js reveals it once the video is in use */
  visibility: hidden;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
}

.hero.has-video .hero__video-toggle {
  visibility: visible;
}

.hero__video-toggle:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.hero__video-play path {
  fill: currentColor;
  stroke: none;
}

.hero__video-toggle[aria-pressed="true"] .hero__video-pause,
.hero__video-toggle:not([aria-pressed="true"]) .hero__video-play {
  display: none;
}

@media (prefers-reduced-motion: no-preference) {
  .hero--video .hero__media::after {
    background: var(--overlay-hero-video);
  }
}

@media (max-width: 63.99em) and (prefers-reduced-motion: no-preference) {
  .hero--video .hero__media::after {
    background: var(--overlay-hero-video-narrow);
  }
}

/* Phones and tablets: the hero grows much taller than the screen to fit its text (about 1,550px
   on a 390px phone). A video covering all of that would be blown up more than twofold and lose
   two thirds of its width. So here it fills at most one screen height at the top, at a light
   zoom, and fades into the hero's deep background, where the text sits. The photo steps aside
   once the video plays, so the fade lands on that plain background. The phone and tablet files
   are already cut to follow each scene's subject, so they are centred. lvh is the screen height
   with the browser bars hidden: the box doesn't jump as they slide in and out. */
@media (max-width: 63.99em) {
  .hero__video {
    inset: 0 0 auto;
    height: min(100%, 100vh);
    height: min(100%, 100lvh);
    object-position: 50% 50%;
    -webkit-mask-image: linear-gradient(180deg, #000 68%, transparent);
    mask-image: linear-gradient(180deg, #000 68%, transparent);
  }

  .js .hero__media img {
    transition: opacity 1.4s var(--ease-out);
  }

  .js .hero__media:has(.hero__video.is-ready) img {
    opacity: 0;
  }
}

/* Reduced motion and reduced data keep the photo only. The <source media> queries stop the
   download too; this just makes sure nothing of the video shows. */
@media (prefers-reduced-motion: reduce) {
  .hero__video,
  .hero__video-toggle {
    display: none;
  }
}

@media (prefers-reduced-data: reduce) {
  .hero__video,
  .hero__video-toggle {
    display: none;
  }
}

/* ---------- 7. Stats strip (overlaps hero) ---------- */
.stats {
  position: relative;
  z-index: var(--z-raised);
  margin-top: calc(-1 * var(--space-10));
}

.stats__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
}

.stats__item {
  position: relative;
  padding: var(--space-6) var(--space-5) var(--space-5);
}

.stats__item::before {
  content: "";
  position: absolute;
  top: 0;
  inset-inline-start: var(--space-5);
  width: 2rem;
  height: 0.25rem;
  border-radius: 0 0 var(--radius-xs) var(--radius-xs);
  background: var(--color-accent);
}

.stats__item:nth-child(odd) {
  border-inline-end: var(--border-thin) solid var(--color-border);
}

.stats__item:nth-child(-n + 2) {
  border-bottom: var(--border-thin) solid var(--color-border);
}

.stats__value {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: var(--color-primary);
}

.stats__label {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: var(--color-text-muted);
}

@media (min-width: 48em) {
  .stats__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .stats__item {
    padding: var(--space-7) var(--space-6) var(--space-6);
  }

  .stats__item::before {
    inset-inline-start: var(--space-6);
  }

  .stats__item:nth-child(-n + 2) {
    border-bottom: 0;
  }

  .stats__item:not(:last-child) {
    border-inline-end: var(--border-thin) solid var(--color-border);
  }
}

/* ---------- 8. Intro: local partner (asymmetric) ---------- */
.intro__grid {
  display: grid;
  gap: var(--space-10);
  align-items: center;
}

.intro__content .lead {
  margin-top: var(--space-5);
}

.intro__body {
  margin-top: var(--space-4);
  color: var(--color-text-muted);
}

.feature-list {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-7);
}

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

.feature__icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-md);
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.feature__title {
  margin-bottom: var(--space-1);
  font-size: var(--text-md);
}

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

.intro__content .text-link {
  margin-top: var(--space-7);
}

.intro__media .collage {
  position: relative;
  padding-bottom: var(--space-11);
}

.intro__media .collage__main {
  width: 88%;
  margin-inline-start: auto;
  aspect-ratio: 4 / 4.4;
  object-fit: cover;
  object-position: 62% 50%;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}

.intro__media .collage__second {
  position: absolute;
  inset-inline-start: 0;
  bottom: 0;
  width: 52%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 30% 70%;
  border: 0.5rem solid var(--color-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.quote-chip {
  position: absolute;
  inset-inline-end: 0;
  bottom: var(--space-6);
  width: min(17rem, 44%);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--color-bg-deep);
  box-shadow: var(--shadow-lg);
}

.quote-chip .icon {
  width: 1.75rem;
  height: 1.75rem;
  color: var(--color-accent);
}

.quote-chip blockquote p {
  margin-top: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
}

.quote-chip figcaption {
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* Single-column tablet layout: a landscape crop keeps the collage from towering */
@media (min-width: 40em) and (max-width: 63.99em) {
  .intro__media .collage__main {
    aspect-ratio: 16 / 11;
  }
}

@media (max-width: 39.99em) {
  .intro__media .collage {
    padding-bottom: 0;
  }

  .intro__media .collage__main {
    width: 100%;
  }

  .intro__media .collage__second {
    position: relative;
    width: 62%;
    margin-top: -22%;
    margin-inline-start: calc(-1 * var(--space-1));
  }

  .quote-chip {
    position: relative;
    inset-inline-end: auto;
    bottom: auto;
    width: auto;
    margin-top: var(--space-5);
  }
}

@media (min-width: 64em) {
  .intro__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--space-6);
  }

  .intro__content {
    grid-column: 1 / span 5;
  }

  .intro__media {
    grid-column: 7 / -1;
  }
}

/* ---------- 9. Services (bento grid) ---------- */
.services {
  background: var(--color-bg-alt);
}

.services__head {
  display: grid;
  gap: var(--space-5);
  margin-bottom: var(--space-9);
}

.services__head .lead {
  max-width: 34rem;
}

@media (min-width: 64em) {
  .services__head {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: end;
    gap: var(--space-9);
  }
}

.bento {
  display: grid;
  gap: var(--space-5);
}

.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out);
}

.service-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.service-card__media {
  overflow: hidden;
}

.service-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}

.service-card:hover .service-card__media img {
  transform: scale(1.05);
}

.service-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
}

.service-card__icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-sm);
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.service-card__title {
  font-size: var(--text-xl);
}

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

.service-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-3);
}

.price-tag {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-accent-soft);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-ocean-900);
}

.price-tag strong {
  font-family: var(--font-display);
  font-size: var(--text-md);
}

.service-card .text-link {
  font-size: var(--text-sm);
}

/* Stretch the card link over the whole card */
.service-card .text-link::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* Featured: multi-day tours */
.service-card--featured {
  min-height: 32rem;
  justify-content: flex-end;
  background: var(--color-bg-deep);
}

.service-card--featured .service-card__media {
  position: absolute;
  inset: 0;
}

.service-card--featured .service-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--overlay-card);
}

.service-card--featured .service-card__body {
  position: relative;
  flex: 0;
  gap: var(--space-4);
  padding: var(--space-7) var(--space-6);
}

.service-card--featured .service-card__title {
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  max-width: 16ch;
}

.service-card--featured .service-card__text {
  max-width: 34rem;
  font-size: var(--text-md);
}

.service-card--featured .price-tag {
  background: var(--color-accent);
}

/* On phones the long featured price drops its note to a second line */
@media (max-width: 29.99em) {
  .service-card--featured .price-tag {
    flex-wrap: wrap;
    column-gap: var(--space-1);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
  }
}

.day-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.day-chips li {
  padding: var(--space-1) var(--space-4);
  border: var(--border-thin) solid var(--color-border-inverse);
  border-radius: var(--radius-pill);
  background: var(--overlay-glass);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* Help tile */
.service-card--help {
  justify-content: space-between;
  background: var(--color-accent);
  color: var(--color-on-accent);
  --color-heading: var(--color-ocean-900);
  --color-text-muted: var(--color-ocean-900);
  --color-focus: var(--color-ocean-900);
}

.service-card--help .service-card__body {
  justify-content: space-between;
  gap: var(--space-5);
}

.service-card--help .help-icon {
  width: 3.5rem;
  height: 3.5rem;
}

.service-card--help .btn {
  align-self: flex-start;
  position: static;
}

.service-card--help .btn::after {
  content: "";
  position: absolute;
  inset: 0;
}

.service-card .service-card__media {
  aspect-ratio: 16 / 10;
}

.service-card--featured .service-card__media {
  aspect-ratio: auto;
}

@media (min-width: 48em) {
  .bento {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .service-card--featured {
    grid-column: 1 / -1;
  }

  .service-card--wide,
  .service-card--small {
    grid-column: span 3;
  }

  .service-card--help {
    grid-column: 1 / -1;
  }
}

@media (min-width: 64em) {
  .bento {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .service-card--featured {
    grid-column: 1 / span 7;
    grid-row: 1 / span 2;
    min-height: 40rem;
  }

  .service-card--wide {
    grid-column: 8 / -1;
    flex-direction: row;
  }

  .service-card--wide .service-card__media {
    flex: 0 0 42%;
    aspect-ratio: auto;
  }

  .service-card--wide .service-card__body {
    padding: var(--space-6) var(--space-5);
  }

  .service-card--small,
  .service-card--help {
    grid-column: span 4;
  }
}

/* ---------- 10. Destinations carousel (breakout) ---------- */
.destinations {
  overflow: hidden;
}

.destinations__head {
  display: grid;
  gap: var(--space-6);
  margin-bottom: var(--space-8);
}

@media (min-width: 64em) {
  .destinations__head {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }
}

.carousel-controls {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.carousel-btn {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border: var(--border-thin) solid var(--color-border-strong);
  border-radius: 50%;
  color: var(--color-primary);
  transition:
    background-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out),
    opacity var(--duration-fast) var(--ease-out);
}

.carousel-btn:hover:not(:disabled) {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-inverse);
}

.carousel-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.carousel {
  --carousel-inset: max(var(--gutter), calc((100% - var(--container)) / 2));
}

.carousel__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(78vw, 19rem);
  grid-template-rows: 28rem;
  gap: var(--space-4);
  padding-inline: var(--carousel-inset);
  padding-bottom: var(--space-2);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--carousel-inset);
  scrollbar-width: thin;
  scrollbar-color: var(--color-accent) var(--color-border);
}

.js .carousel__track {
  scrollbar-width: none;
}

.js .carousel__track::-webkit-scrollbar {
  display: none;
}

@media (min-width: 48em) {
  .carousel__track {
    grid-auto-columns: 20rem;
    grid-template-rows: 32rem;
    gap: var(--space-5);
  }
}

.dest-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-bg-deep);
  scroll-snap-align: start;
}

@media (min-width: 48em) {
  .dest-card--wide {
    grid-column: span 2;
  }
}

.dest-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}

.dest-card:hover img {
  transform: scale(1.05);
}

.dest-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--overlay-card);
  pointer-events: none;
}

.dest-card__body {
  position: absolute;
  inset: auto 0 0;
  z-index: var(--z-base);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-6) var(--space-5) var(--space-5);
}

.dest-card__region {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-eyebrow);
}

.dest-card__title {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
}

.dest-card__text {
  max-width: 30ch;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.trip-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.75rem;
  margin-top: var(--space-2);
  padding-block: var(--space-2);
  padding-inline: var(--space-3) var(--space-4);
  border: var(--border-thin) solid var(--color-border-inverse);
  border-radius: var(--radius-pill);
  background: var(--overlay-glass);
  color: var(--color-text-inverse);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition:
    background-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out);
}

.trip-toggle:hover {
  border-color: var(--color-accent);
}

.trip-toggle .icon {
  width: 1.125rem;
  height: 1.125rem;
}

.trip-toggle__text {
  white-space: nowrap;
}

.trip-toggle .icon-check,
.trip-toggle[aria-pressed="true"] .icon-plus {
  display: none;
}

.trip-toggle[aria-pressed="true"] .icon-check {
  display: block;
}

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

.carousel__footer {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-6);
}

@media (min-width: 48em) {
  .carousel__footer {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-8);
  }
}

.carousel__progress {
  position: relative;
  height: 0.25rem;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--color-border);
}

.carousel__bar {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--color-primary);
  transform: scaleX(var(--progress, 0.25));
  transform-origin: left;
  transition: transform var(--duration-fast) linear;
}

.trip-tray {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.trip-tray__places {
  font-weight: var(--weight-semibold);
  color: var(--color-heading);
}

.trip-tray__status {
  max-width: 46ch;
}

/* ---------- 11. Promise (full-bleed deep breakout) ---------- */
.promise {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--color-bg-deep);
}

.promise::before {
  content: "";
  position: absolute;
  inset: -20% -10% auto auto;
  z-index: -1;
  width: 60rem;
  height: 60rem;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--color-ocean-700), transparent);
  opacity: 0.55;
}

.promise__route {
  position: absolute;
  inset: auto auto 0 0;
  z-index: -1;
  width: min(70rem, 120%);
  color: var(--color-accent);
  opacity: 0.18;
  pointer-events: none;
}

.promise__grid {
  display: grid;
  gap: var(--space-10);
  align-items: center;
}

.promise__media {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  align-items: start;
}

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

.promise__photo--tall {
  grid-row: 1 / span 2;
  aspect-ratio: 3 / 4.6;
  object-position: 60% 50%;
}

.promise__photo--short {
  aspect-ratio: 1 / 1;
  margin-top: var(--space-9);
  object-position: 60% 50%;
}

.receipt-wrap {
  position: relative;
  z-index: var(--z-raised);
  margin-inline-start: -45%;
  filter: drop-shadow(0 24px 40px rgb(5 30 40 / 0.45));
}

.receipt {
  --notch: 0.45rem;
  padding: var(--space-5) var(--space-5) calc(var(--space-5) + var(--notch));
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: var(--color-surface);
  -webkit-mask: radial-gradient(circle var(--notch) at 50% 100%, transparent 98%, #000) 50% 0 / calc(var(--notch) * 3) 100% repeat-x;
  mask: radial-gradient(circle var(--notch) at 50% 100%, transparent 98%, #000) 50% 0 / calc(var(--notch) * 3) 100% repeat-x;
}

.receipt__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-md);
}

.receipt__title .icon {
  color: var(--color-accent-text);
}

.receipt__list {
  margin-top: var(--space-4);
}

.receipt__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-block: var(--space-2);
  font-size: var(--text-sm);
}

.receipt__item::after {
  content: "";
  order: 1;
  flex: 1;
  min-width: var(--space-4);
  border-bottom: var(--border-thick) dotted var(--color-border);
}

.receipt__item .icon {
  order: 2;
  width: 1.125rem;
  height: 1.125rem;
  color: var(--color-success);
  stroke-width: 2.5;
}

.receipt__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: var(--border-thick) dashed var(--color-border-strong);
  font-weight: var(--weight-semibold);
}

.receipt__total strong {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-primary);
}

.receipt__note {
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.promise__content .lead {
  margin-top: var(--space-5);
}

.worries {
  margin-top: var(--space-8);
  border-top: var(--border-thin) solid var(--color-border);
}

.worries__title {
  margin-top: var(--space-8);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-eyebrow);
}

.worries__title + .worries {
  margin-top: var(--space-4);
}

.worry {
  border-bottom: var(--border-thin) solid var(--color-border);
}

.worry summary {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding-block: var(--space-5);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  list-style: none;
  cursor: pointer;
}

.worry summary::-webkit-details-marker {
  display: none;
}

.worry__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--color-primary-soft);
  color: var(--color-accent);
}

.worry__toggle {
  margin-inline-start: auto;
  color: var(--color-accent);
  transition: transform var(--duration-base) var(--ease-out);
}

.worry[open] .worry__toggle {
  transform: rotate(45deg);
}

.worry__body {
  padding-block: 0 var(--space-6);
  padding-inline: calc(2.75rem + var(--space-4)) 0;
  color: var(--color-text-muted);
}

@supports (interpolate-size: allow-keywords) {
  .worries {
    interpolate-size: allow-keywords;
  }

  .worry::details-content {
    height: 0;
    overflow: clip;
    transition:
      height var(--duration-base) var(--ease-out),
      content-visibility var(--duration-base) allow-discrete;
  }

  .worry[open]::details-content {
    height: auto;
  }
}

@media (max-width: 39.99em) {
  .receipt-wrap {
    grid-column: 1 / -1;
    margin: calc(-1 * var(--space-10)) var(--space-4) 0;
  }

  .promise__photo--tall {
    grid-row: auto;
  }

  .promise__photo--short {
    margin-top: var(--space-9);
  }
}

@media (min-width: 64em) {
  .promise__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--space-6);
  }

  .promise__media {
    grid-column: 1 / span 6;
  }

  .promise__content {
    grid-column: 8 / -1;
  }
}

/* ---------- 12. Case study (story) ---------- */
.story__grid {
  display: grid;
  gap: var(--space-10);
  align-items: center;
}

.story__media {
  position: relative;
  padding-inline-end: 18%;
  padding-bottom: var(--space-10);
}

.story__main {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 45%;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}

.story__second {
  position: absolute;
  inset-inline-end: 0;
  bottom: 0;
  width: 55%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 0.5rem solid var(--color-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.story__facts {
  position: absolute;
  top: var(--space-6);
  inset-inline-start: var(--space-6);
  display: grid;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
}

.story__facts div {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.story__facts dt {
  order: 2;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.story__facts dd {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  line-height: 1.2;
  color: var(--color-primary);
}

.story__content .lead {
  margin-top: var(--space-5);
}

.timeline {
  position: relative;
  display: grid;
  gap: var(--space-6);
  margin-top: var(--space-8);
}

.timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: var(--space-4);
}

.timeline__item:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 2.75rem;
  bottom: calc(-1 * var(--space-6));
  inset-inline-start: calc(1.375rem - 1px);
  border-inline-start: var(--border-thick) dashed var(--color-accent);
}

.timeline__marker {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.timeline__marker .icon {
  width: 1.25rem;
  height: 1.25rem;
}

.timeline__title {
  padding-top: var(--space-2);
  font-size: var(--text-md);
}

.timeline__text {
  margin-top: var(--space-1);
  color: var(--color-text-muted);
}

.timeline__item--result .timeline__marker {
  background: var(--color-accent);
  color: var(--color-on-accent);
}

.stars {
  display: flex;
  gap: var(--space-1);
  margin-top: var(--space-2);
  color: var(--color-accent);
}

.stars .icon {
  width: 1.25rem;
  height: 1.25rem;
}

@media (max-width: 39.99em) {
  .story__media {
    padding-inline-end: 10%;
  }

  .story__facts {
    top: var(--space-4);
    inset-inline-start: var(--space-4);
  }
}

@media (min-width: 64em) {
  .story__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--space-6);
  }

  .story__media {
    grid-column: 1 / span 6;
  }

  .story__content {
    grid-column: 8 / -1;
  }
}

/* ---------- 13. Reviews (full-bleed photo) ---------- */
.reviews {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--color-bg-deepest);
}

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

.reviews__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
}

.reviews__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--overlay-deep);
}

.reviews__grid {
  display: grid;
  gap: var(--space-8);
}

.reviews__intro .lead {
  margin-top: var(--space-5);
}

.reviews__count {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-top: var(--space-7);
}

.reviews__count strong {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--weight-bold);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: var(--color-accent);
}

.reviews__count span {
  max-width: 12ch;
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: var(--color-text-muted);
}

.reviews__intro .text-link {
  margin-top: var(--space-7);
}

.review-list {
  display: grid;
  gap: var(--space-5);
}

.review {
  position: relative;
  padding: var(--space-7) var(--space-6) var(--space-6);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.review--light {
  background: var(--color-surface);
}

.review--glass {
  border: var(--border-thin) solid var(--color-border-inverse);
  background: var(--overlay-glass-strong);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
}

.review__mark {
  width: 2.5rem;
  height: 2.5rem;
  color: var(--color-accent);
}

.review blockquote p {
  margin-top: var(--space-4);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-medium);
  line-height: 1.4;
  color: var(--color-heading);
}

.review figcaption {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: var(--border-thin) solid var(--color-border);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-muted);
}

.review__avatar {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.review--glass .review__avatar {
  color: var(--color-accent);
}

@media (min-width: 48em) {
  .review-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .review:nth-child(2) {
    margin-top: var(--space-10);
  }
}

@media (min-width: 64em) {
  .reviews__grid {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: var(--space-9);
    align-items: center;
  }
}

/* ---------- 14. Planner (quote form) ---------- */
.planner {
  overflow-x: clip; /* the offset backdrop photo must not widen the page */
  background: var(--color-bg-alt);
}

.planner__grid {
  display: grid;
  gap: var(--space-9);
}

.planner__intro .lead {
  margin-top: var(--space-5);
}

.steps {
  display: grid;
  gap: var(--space-6);
  margin-top: var(--space-8);
}

.step {
  position: relative;
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: var(--space-4);
}

.step:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 2.75rem;
  bottom: calc(-1 * var(--space-6));
  inset-inline-start: calc(1.375rem - 1px);
  border-inline-start: var(--border-thick) dashed var(--color-accent);
}

.step__num {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-text-inverse);
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
}

.step__title {
  padding-top: var(--space-2);
  font-size: var(--text-md);
}

.step__text {
  margin-top: var(--space-1);
  color: var(--color-text-muted);
}

.direct-line {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-8);
  padding: var(--space-4) var(--space-5);
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.direct-line__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-on-accent);
}

.direct-line p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.direct-line a {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--color-heading);
  text-decoration: none;
}

.direct-line a:hover {
  text-decoration: underline;
}

.planner__form-wrap {
  position: relative;
  padding-top: var(--space-10);
}

.planner__backdrop {
  position: absolute;
  top: 0;
  inset-inline-end: calc(-1 * var(--space-4));
  width: 82%;
  height: 16rem;
  object-fit: cover;
  border-radius: var(--radius-xl);
}

.form-card {
  position: relative;
  padding: clamp(var(--space-5), 4vw, var(--space-8));
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
}

.form-card__title {
  font-size: var(--text-2xl);
}

.form-card__intro {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.form {
  display: grid;
  gap: var(--space-6);
  margin-top: var(--space-7);
}

.form__row {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 40em) {
  .form__row--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.field {
  display: grid;
  gap: var(--space-2);
  align-content: start;
}

.field__label,
.field legend {
  padding: 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-heading);
}

.field legend {
  margin-bottom: var(--space-3);
}

.field__optional {
  font-weight: var(--weight-regular);
  color: var(--color-text-muted);
}

.field__input {
  width: 100%;
  min-height: 3.25rem;
  padding: var(--space-3) var(--space-4);
  border: var(--border-thin) solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  line-height: var(--leading-snug);
  transition:
    border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
}

.field__input::placeholder {
  color: var(--color-text-muted);
  opacity: 0.8;
}

.field__input:hover {
  border-color: var(--color-primary);
}

.field__input:focus-visible {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--shadow-focus);
}

textarea.field__input {
  min-height: 7.5rem;
  resize: vertical;
}

.field__input[aria-invalid="true"] {
  border-color: var(--color-error);
}

.field__error {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-error);
}

.field__error:empty {
  display: none;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.chip {
  position: relative;
  display: inline-flex;
}

.chip input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.chip span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-4);
  border: var(--border-thin) solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  transition:
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
}

.chip .icon {
  display: none;
  width: 1rem;
  height: 1rem;
  stroke-width: 2.5;
}

.chip input:hover + span {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}

.chip input:checked + span {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-text-inverse);
}

.chip input:checked + span .icon {
  display: block;
}

.chip input:focus-visible + span {
  outline: var(--border-focus) solid var(--color-focus);
  outline-offset: 2px;
}

/* Side by side when both labels fit on one line, stacked otherwise */
.form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.form__actions .btn {
  flex: 1 1 auto;
  padding-inline: var(--space-5);
  white-space: nowrap;
}

.form__note {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.form-status {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--color-primary-soft);
  font-size: var(--text-sm);
  color: var(--color-heading);
}

.form-status:empty {
  display: none;
}

.form-status--error {
  background: var(--color-surface);
  border: var(--border-thin) solid var(--color-error);
  color: var(--color-error);
}

@media (min-width: 64em) {
  .planner__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--space-6);
    align-items: start;
  }

  .planner__intro {
    grid-column: 1 / span 5;
    position: sticky;
    top: calc(var(--header-height) + var(--space-8));
  }

  .planner__form-wrap {
    grid-column: 7 / -1;
    padding-top: var(--space-11);
  }

  .planner__backdrop {
    inset-inline-end: calc(-1 * var(--space-8));
    width: 75%;
    height: 22rem;
  }

  .form-card {
    margin-inline-start: calc(-1 * var(--space-8));
  }
}

/* ---------- 15. Backup band: sample itineraries ---------- */
.backup {
  padding-block: var(--space-section);
}

.backup__card {
  display: grid;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--color-primary);
}

.backup__body {
  align-self: center;
  padding: clamp(var(--space-5), 5vw, var(--space-10));
}

.backup__body .lead {
  margin-top: var(--space-4);
  max-width: 32rem;
}

.backup__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-6);
  margin-top: var(--space-7);
}

.backup__media {
  min-height: 16rem;
}

.backup__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 65% 40%;
}

@media (min-width: 48em) {
  .backup__card {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  }

  .backup__media {
    order: 2;
  }

  .backup__media img {
    clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%);
  }
}

/* ---------- 16. Footer ---------- */
.site-footer {
  padding-top: var(--space-11);
  background: var(--color-bg-deepest);
}

.footer__cta {
  display: grid;
  gap: var(--space-6);
  padding-bottom: var(--space-9);
  border-bottom: var(--border-thin) solid var(--color-border);
}

.footer__cta-title {
  max-width: 18ch;
  font-size: var(--text-4xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.footer__cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

@media (min-width: 64em) {
  .footer__cta {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }
}

.footer__grid {
  display: grid;
  gap: var(--space-8);
  padding-block: var(--space-9);
}

@media (min-width: 48em) {
  .footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64em) {
  .footer__grid {
    grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  }
}

.footer__about {
  max-width: 22rem;
  margin-top: var(--space-5);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.footer__title {
  margin-bottom: var(--space-5);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-eyebrow);
}

.footer__list {
  display: grid;
  gap: var(--space-3);
  font-size: var(--text-sm);
}

.footer__list a {
  color: var(--color-text);
  text-decoration: none;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.3em;
}

.footer__list a:hover {
  text-decoration-line: underline;
}

.footer__contact li {
  display: flex;
  gap: var(--space-3);
  color: var(--color-text-muted);
}

.footer__contact .icon {
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.15em;
  color: var(--color-accent);
}

.footer__contact a {
  display: block;
}

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

.social a {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: var(--border-thin) solid var(--color-border);
  border-radius: 50%;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
}

.social a:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-on-accent);
}

.social .icon {
  width: 1.25rem;
  height: 1.25rem;
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-6);
  border-top: var(--border-thin) solid var(--color-border);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* ---------- 17. Floating contact stack ---------- */
/* Three round buttons in the bottom-right corner on every screen size. WhatsApp comes first
   in the markup and sits lowest, nearest the thumb; Call and Instagram stack above it. */
:root {
  --stack-edge: 1.25rem;
  /* The strip the stack claims along the right edge: its offset, the WhatsApp button, breathing room */
  --stack-lane: calc(var(--stack-edge) + 3.5rem + var(--space-4));
}

.contact-stack {
  position: fixed;
  right: calc(var(--stack-edge) + env(safe-area-inset-right, 0px));
  bottom: calc(var(--stack-edge) + env(safe-area-inset-bottom, 0px));
  z-index: var(--z-float);
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: var(--space-3);
  /* The gaps between buttons never swallow a tap meant for the page underneath */
  pointer-events: none;
  transition:
    transform var(--duration-base) var(--ease-out),
    opacity var(--duration-base) var(--ease-out);
}

/* Slides out past the right edge over the footer, behind the open menu or viewer,
   and while the trip dock is up with its own WhatsApp button */
.contact-stack.is-hidden,
.menu-open .contact-stack,
.lightbox-open .contact-stack {
  visibility: hidden;
  opacity: 0;
  transform: translateX(calc(100% + var(--stack-edge) + env(safe-area-inset-right, 0px)));
  transition:
    transform var(--duration-base) var(--ease-out),
    opacity var(--duration-base) var(--ease-out),
    visibility 0s linear var(--duration-base);
}

.contact-stack__btn {
  --btn-size: 3rem;
  --btn-glow: rgb(5 30 40 / 0.5);
  /* No isolation: each halo paints behind every button face in the stack, not just its own */
  position: relative;
  display: grid;
  place-items: center;
  width: var(--btn-size);
  height: var(--btn-size);
  border-radius: 50%;
  color: var(--color-white);
  /* A white keyline keeps each button readable over photos, dark bands and light sand alike */
  box-shadow:
    0 0 0 2px rgb(255 255 255 / 0.9),
    0 10px 22px -8px var(--btn-glow),
    0 2px 6px -2px rgb(5 30 40 / 0.3);
  text-decoration: none;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out),
    filter var(--duration-fast) var(--ease-out);
}

.contact-stack__btn .icon {
  width: 1.5rem;
  height: 1.5rem;
}

.contact-stack__btn--wa {
  --btn-size: 3.5rem;
  --btn-glow: rgb(18 140 70 / 0.7);
  background: var(--color-whatsapp);
  color: var(--color-ocean-950);
}

.contact-stack__btn--wa .icon {
  width: 1.75rem;
  height: 1.75rem;
}

.contact-stack__btn--call {
  --btn-glow: rgb(13 92 117 / 0.7);
  background: var(--color-primary);
}

.contact-stack__btn--ig {
  --btn-glow: rgb(214 36 159 / 0.6);
  background: var(--gradient-instagram);
}

/* Pressed: the button sinks, darkens and its lift shadow drops away */
.contact-stack__btn:active {
  transform: scale(0.92);
  box-shadow:
    0 0 0 2px rgb(255 255 255 / 0.9),
    0 3px 8px -4px var(--btn-glow);
  transition-duration: 60ms;
}

.contact-stack__btn--wa:active {
  background: var(--color-whatsapp-pressed);
}

.contact-stack__btn--call:active {
  background: var(--color-primary-hover);
}

.contact-stack__btn--ig:active {
  filter: brightness(0.88);
}

/* Two-tone ring, dark inside white, so focus shows over any background */
.contact-stack__btn:focus-visible {
  outline: var(--border-focus) solid var(--color-ocean-950);
  outline-offset: 3px;
  box-shadow:
    0 0 0 3px var(--color-white),
    0 0 0 9px var(--color-white);
}

/* The label is each button's accessible name. It stays transparent rather than hidden,
   so screen readers keep it, and shows as a tooltip on hover and keyboard focus. */
.contact-stack__label {
  position: absolute;
  top: 50%;
  right: calc(100% + var(--space-3));
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-ocean-950);
  color: var(--color-white);
  box-shadow: var(--shadow-lg);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  white-space: nowrap;
  opacity: 0;
  transform: translate(var(--space-2), -50%);
  pointer-events: none;
  transition:
    opacity var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}

.contact-stack__btn:focus-visible .contact-stack__label {
  opacity: 1;
  transform: translate(0, -50%);
}

@media (hover: hover) and (pointer: fine) {
  .contact-stack__btn:hover {
    transform: translateY(-2px);
  }

  .contact-stack__btn--call:hover {
    background: var(--color-primary-hover);
  }

  .contact-stack__btn:hover .contact-stack__label {
    opacity: 1;
    transform: translate(0, -50%);
  }

  .contact-stack__btn:active {
    transform: translateY(-2px) scale(0.92);
  }
}

/* Each button breathes: a soft ring leaves it every five seconds, cascading down to
   WhatsApp, then everything rests. Transform and opacity only, on the compositor. */
@media (prefers-reduced-motion: no-preference) {
  .contact-stack__btn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: inherit;
    opacity: 0;
    pointer-events: none;
    animation:
      contact-halo-grow 5s var(--ease-out) calc(2s + var(--halo-stagger, 0s)) infinite,
      contact-halo-fade 5s linear calc(2s + var(--halo-stagger, 0s)) infinite;
  }

  .contact-stack__btn--call {
    --halo-stagger: 0.16s;
  }

  .contact-stack__btn--wa {
    --halo-stagger: 0.32s;
  }

  /* Rests while the stack is away, and stops the moment a button is pressed */
  .contact-stack.is-hidden .contact-stack__btn::before,
  .menu-open .contact-stack__btn::before,
  .lightbox-open .contact-stack__btn::before,
  .contact-stack:active .contact-stack__btn::before {
    animation: none;
  }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .contact-stack:hover .contact-stack__btn::before {
    animation: none;
  }
}

/* The ring spreads about 9px round a 48px button and 10px round WhatsApp */
@keyframes contact-halo-grow {
  0% {
    transform: scale(1);
  }

  40%,
  100% {
    transform: scale(1.36);
  }
}

@keyframes contact-halo-fade {
  0% {
    opacity: 0.45;
  }

  40%,
  100% {
    opacity: 0;
  }
}

/* Every hero opens with its buttons and prices low on the screen, right where the stack
   floats, so the hero leaves the stack its lane: no covered prices, no mis-tapped buttons */
@media (max-width: 63.99em) {
  .hero__actions,
  .hero .price-card {
    margin-inline-end: max(0px, calc(var(--stack-lane) - var(--gutter)));
  }
}

@media (min-width: 64em) {
  /* 100% is the hero's width; the container's own margin already covers part of the lane */
  .hero__inner {
    padding-inline-end: max(0px, calc(var(--stack-lane) - max(var(--gutter), (100% - var(--container)) / 2)));
  }
}

/* Without JS the stack cannot step aside, so the footer ends above it */
.no-js .site-footer {
  padding-bottom: calc(13rem + env(safe-area-inset-bottom, 0px));
}

@media print {
  .contact-stack {
    display: none;
  }
}

/* ---------- 18. Inner pages: shared parts ---------- */

/* Seven nav links: tighter spacing and type on small desktops, so the logo never
   has to shrink, and smaller type in the mobile menu */
.logo--header {
  flex-shrink: 0;
}

@media (min-width: 64em) and (max-width: 84.99em) {
  .site-nav {
    gap: var(--space-5);
  }

  .site-nav__list {
    gap: var(--space-5);
  }

  .site-header__social {
    margin-inline-end: calc(var(--space-3) - var(--space-5));
  }

  .site-header__cta {
    padding-inline: var(--space-4);
  }
}

@media (min-width: 64em) and (max-width: 74.99em) {
  .logo--header {
    --logo-h: 3.125rem;
  }

  .site-nav {
    gap: var(--space-4);
  }

  .site-nav__list {
    gap: var(--space-4);
  }

  .site-nav__link {
    font-size: var(--text-sm);
  }

  .site-header__social {
    margin-inline-end: calc(var(--space-3) - var(--space-4));
  }
}

@media (max-width: 63.99em) {
  .site-nav__link {
    font-size: var(--text-2xl);
  }
}

.hero--page {
  min-height: clamp(36rem, 86svh, 52rem);
  padding-bottom: var(--space-9);
}

.hero--page .hero__media img {
  object-position: var(--focus, 50% 50%);
}

.hero--page .hero__title {
  max-width: 15ch;
}

/* Leaves room for a card that overlaps the bottom of the hero */
.hero--overlap {
  padding-bottom: calc(var(--space-10) + var(--space-9));
}

.hero--short {
  min-height: clamp(32rem, 70svh, 44rem);
}

.jump {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-7);
}

.jump__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-4);
  border: var(--border-thin) solid var(--color-border-inverse);
  border-radius: var(--radius-pill);
  background: var(--overlay-glass);
  color: var(--color-text-inverse);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition:
    border-color var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out);
}

.jump__link:hover {
  border-color: var(--color-accent);
  background: rgb(255 255 255 / 0.18);
}

.jump__link .icon {
  width: 1rem;
  height: 1rem;
  color: var(--color-accent);
}

.how-list {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-4);
  counter-reset: how;
}

.how-list li {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  gap: var(--space-1) var(--space-3);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  counter-increment: how;
}

.how-list li::before {
  content: counter(how);
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

.how-list strong {
  align-self: center;
  font-weight: var(--weight-semibold);
}

.how-list span {
  grid-column: 2;
  color: var(--color-text-muted);
}

.section--alt {
  background: var(--color-bg-alt);
}

.split-head {
  display: grid;
  gap: var(--space-5) var(--space-8);
  margin-bottom: var(--space-8);
}

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

@media (min-width: 64em) {
  .split-head {
    grid-template-columns: minmax(0, 1fr) minmax(0, 28rem);
    align-items: end;
  }
}

/* Outlined numerals for section and row markers */
.numeral {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 2.2rem + 5vw, 6.5rem);
  font-weight: var(--weight-bold);
  line-height: 0.85;
  letter-spacing: var(--tracking-tight);
  color: transparent;
  -webkit-text-stroke: var(--border-thick) var(--color-accent);
}

@supports not (-webkit-text-stroke: 1px) {
  .numeral {
    color: var(--color-accent);
  }
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-accent-soft);
  box-shadow: inset 0 0 0 1px rgb(138 99 0 / 0.14);
  color: var(--color-ocean-900);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: 1.5;
  letter-spacing: 0.04em;
}

.tag .icon {
  width: 1rem;
  height: 1rem;
  color: var(--color-gold-700);
}

.tag--glass {
  background: rgb(5 30 40 / 0.62);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.14);
  color: var(--color-white);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.tag--glass .icon {
  color: var(--color-accent);
}

/* Trip toggle on light cards */
.trip-toggle--solid {
  margin-top: 0;
  border-color: var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-primary);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.trip-toggle--solid:not([aria-pressed="true"]):hover {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}

/* Filter tabs: scroll sideways on small screens, wrap on large ones */
.filter-bar {
  padding-block: var(--space-4);
}

.filter-bar--sticky {
  position: sticky;
  top: var(--header-height);
  z-index: calc(var(--z-float) - 10);
  padding-block: var(--space-3);
  border-bottom: var(--border-thin) solid var(--color-border);
  background: var(--color-header-solid);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
}

.filter {
  display: flex;
  gap: var(--space-2);
  margin-inline: calc(-1 * var(--gutter));
  padding: var(--space-1) var(--gutter);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent 100%);
}

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

@media (min-width: 64em) {
  .filter {
    flex-wrap: wrap;
    margin-inline: 0;
    padding-inline: 0;
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

.filter__btn {
  position: relative; /* keeps the hidden count text inside the scrolling strip */
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.75rem;
  padding-block: var(--space-2);
  padding-inline: var(--space-4) var(--space-3);
  border: var(--border-thin) solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-heading);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
}

.filter__btn:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}

.filter__btn[aria-pressed="true"] {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-text-inverse);
}

.filter__count {
  display: inline-grid;
  place-items: center;
  min-width: 1.625rem;
  height: 1.625rem;
  padding-inline: var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-size: var(--text-xs);
}

.filter__btn[aria-pressed="true"] .filter__count {
  background: rgb(255 255 255 / 0.18);
  color: inherit;
}

.filter-status {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* Filters need JS; without it every item simply stays visible */
.no-js .filter-bar {
  display: none;
}

/* Live list of what's in the trip */
.picks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.picks__empty {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.pick {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 2.5rem;
  padding-block: var(--space-1);
  padding-inline: var(--space-4) var(--space-1);
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.pick--journey {
  background: var(--color-white);
  color: var(--color-ocean-900);
}

.pick__remove {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  color: inherit;
  transition: background-color var(--duration-fast) var(--ease-out);
}

.pick__remove:hover {
  background: rgb(5 30 40 / 0.12);
}

.pick__remove .icon {
  width: 1rem;
  height: 1rem;
  stroke-width: 2.5;
}

/* Two-by-two facts panel (experiences and journeys) */
.facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--border-thin);
  margin-top: var(--space-6);
  overflow: hidden;
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-border);
}

.fact {
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
}

.fact dt {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  line-height: var(--leading-snug);
  text-transform: uppercase;
  color: var(--color-eyebrow);
}

.fact dt .icon {
  width: 1rem;
  height: 1rem;
}

.fact dd {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  margin-top: var(--space-2);
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--color-heading);
}

.fact small {
  display: block;
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  color: var(--color-text-muted);
}

.theme-dark .facts {
  background: var(--color-border-inverse);
}

.theme-dark .fact {
  background: var(--color-bg-deep);
}

@media (max-width: 29.99em) {
  .fact {
    padding: var(--space-3) var(--space-4);
  }
}

/* Activity level: three rising bars, the label carries the meaning */
.meter {
  display: inline-flex;
  align-items: flex-end;
  gap: 3px;
  height: 1rem;
}

.meter span {
  width: 0.375rem;
  border-radius: 2px;
  background: var(--color-border-strong);
  opacity: 0.45;
}

.meter span:nth-child(1) {
  height: 45%;
}

.meter span:nth-child(2) {
  height: 72%;
}

.meter span:nth-child(3) {
  height: 100%;
}

.meter[data-level="1"] span:nth-child(-n + 1),
.meter[data-level="2"] span:nth-child(-n + 2),
.meter[data-level="3"] span {
  background: var(--color-accent);
  opacity: 1;
}

/* ---------- 19. Destinations page ---------- */
.region {
  padding-block: var(--space-section);
  scroll-margin-top: 4.5rem;
}

.region--alt {
  background: var(--color-bg-alt);
}

.region--dark {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--color-bg-deep);
}

.region--dark::before {
  content: "";
  position: absolute;
  inset: -30% auto auto -15%;
  z-index: -1;
  width: 56rem;
  height: 56rem;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--color-ocean-700), transparent);
  opacity: 0.6;
}

.region__head {
  display: grid;
  gap: var(--space-4) var(--space-8);
  margin-bottom: var(--space-8);
}

.region__intro .lead {
  max-width: 40rem;
  margin-top: var(--space-4);
}

.region__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

@media (min-width: 64em) {
  .region__head {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: end;
  }
}

.place-grid {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 40em) {
  .place-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64em) {
  .place-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6);
  }

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

.place-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  transition:
    box-shadow var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out);
}

.place-card:hover {
  border-color: var(--color-border-hover);
  box-shadow: var(--shadow-md);
}

.region--dark .place-card {
  border-color: transparent;
}

.place-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-bg-deep);
}

.place-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}

.place-card:hover .place-card__media img {
  transform: scale(1.05);
}

.place-card__media .tag {
  position: absolute;
  top: var(--space-4);
  inset-inline-start: var(--space-4);
}

.place-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
}

.place-card__title {
  font-size: var(--text-xl);
}

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

.highlights {
  display: grid;
  gap: var(--space-2);
  font-size: var(--text-sm);
}

.highlights li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.highlights .icon {
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.15em;
  color: var(--color-primary);
  stroke-width: 2.5;
}

.place-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-4);
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: var(--border-thin) dashed var(--color-border);
}

.stay {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.stay strong {
  font-weight: var(--weight-semibold);
  color: var(--color-heading);
}

.stay .icon {
  width: 1.125rem;
  height: 1.125rem;
  color: var(--color-accent-text);
}

/* Featured card spans the row; a lone third card does the same on two columns */
@media (min-width: 40em) {
  .place-card--feature {
    grid-column: 1 / -1;
  }
}

@media (min-width: 40em) and (max-width: 63.99em) {
  .place-grid--trio > .place-card:nth-child(3):last-child {
    grid-column: 1 / -1;
  }
}

@media (min-width: 64em) {
  .place-grid:not(.place-grid--duo) > .place-card--feature {
    grid-column: span 2;
  }
}

@media (min-width: 48em) {
  .place-card--feature {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  }

  .place-card--feature .place-card__media {
    aspect-ratio: auto;
    min-height: 24rem;
  }

  /* Let the text set the card height, not the photo's natural size */
  .place-card--feature .place-card__media img {
    position: absolute;
    inset: 0;
  }

  .place-card--feature .place-card__body {
    padding: var(--space-7) var(--space-6);
  }

  .place-card--feature .place-card__title {
    font-size: var(--text-2xl);
  }
}

@media (min-width: 48em) and (max-width: 63.99em) {
  .place-grid--trio > .place-card:nth-child(3):last-child {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  }

  .place-grid--trio > .place-card:nth-child(3):last-child .place-card__media {
    aspect-ratio: auto;
    min-height: 20rem;
  }

  .place-grid--trio > .place-card:nth-child(3):last-child .place-card__media img {
    position: absolute;
    inset: 0;
  }
}

/* ---------- 20. Experiences page ---------- */
.glance {
  position: relative;
  z-index: var(--z-raised);
  margin-top: calc(-1 * var(--space-10));
}

.glance__panel {
  padding: var(--space-3);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
}

.glance__title {
  padding: var(--space-3) var(--space-4) var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-eyebrow);
}

.glance__list {
  display: grid;
}

.glance__item + .glance__item {
  border-top: var(--border-thin) solid var(--color-border);
}

.glance__link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-1) var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-out);
}

.glance__link:hover {
  background: var(--color-primary-soft);
}

.glance__num {
  grid-row: span 2;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--color-accent-text);
}

.glance__name {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--color-heading);
}

.glance__meta {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.glance__link > .icon {
  grid-column: 3;
  grid-row: 1 / span 2;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--color-primary);
  transition: transform var(--duration-fast) var(--ease-out);
}

.glance__link:hover > .icon {
  transform: translateY(3px);
}

@media (min-width: 64em) {
  .glance__list {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .glance__item + .glance__item {
    border-top: 0;
    border-inline-start: var(--border-thin) solid var(--color-border);
  }

  .glance__link {
    height: 100%;
    grid-template-columns: minmax(0, 1fr) auto;
    align-content: start;
  }

  .glance__num {
    grid-row: auto;
    grid-column: 1 / -1;
  }

  .glance__meta {
    grid-column: 1 / -1;
  }

  .glance__link > .icon {
    grid-column: 2;
    grid-row: 2;
  }
}

.exp-list {
  display: grid;
  gap: var(--space-11);
}

.exp {
  display: grid;
  gap: var(--space-9);
  align-items: center;
  scroll-margin-top: var(--space-6);
}

.exp__media {
  position: relative;
  padding-bottom: var(--space-7);
}

.exp__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}

.exp__media--tall .exp__img {
  aspect-ratio: 4 / 5;
}

.exp__inset {
  position: absolute;
  inset-inline-end: var(--space-4);
  bottom: 0;
  width: 42%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 0.5rem solid var(--color-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.exp__media .numeral {
  position: absolute;
  top: calc(-1 * var(--space-7));
  inset-inline-start: var(--space-5);
}

.exp__title {
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.exp__body > .lead {
  margin-top: var(--space-4);
}

.exp__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-6);
  margin-top: var(--space-6);
}

.exp__note {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

@media (min-width: 64em) {
  .exp {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--space-6);
  }

  .exp__media {
    grid-column: 1 / span 6;
  }

  .exp__body {
    grid-column: 8 / -1;
  }

  .exp--flip .exp__media {
    grid-column: 7 / -1;
    order: 2;
  }

  .exp--flip .exp__body {
    grid-column: 1 / span 5;
  }

  .exp__inset {
    inset-inline-end: calc(-1 * var(--space-7));
  }

  .exp--flip .exp__inset {
    inset-inline-end: auto;
    inset-inline-start: calc(-1 * var(--space-7));
  }

  .exp--flip .exp__media .numeral {
    inset-inline-start: auto;
    inset-inline-end: var(--space-5);
  }
}

.mix {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: var(--space-section);
  background: var(--color-bg-deepest);
}

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

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

.mix__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--overlay-hero);
}

.mix__inner {
  display: grid;
  gap: var(--space-8);
}

.mix__content .lead {
  max-width: 34rem;
  margin-top: var(--space-5);
}

.mix__panel {
  padding: var(--space-6);
  border: var(--border-thin) solid var(--color-border-inverse);
  border-radius: var(--radius-xl);
  background: var(--overlay-glass-strong);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
}

.mix__panel-title {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-eyebrow);
}

.mix__actions {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.mix__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin-top: var(--space-5);
  font-size: var(--text-sm);
}

@media (min-width: 64em) {
  .mix__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 27rem);
    align-items: center;
    gap: var(--space-10);
  }
}

/* ---------- 21. Journeys page ---------- */
.journey {
  padding-block: var(--space-section);
  scroll-margin-top: 0;
}

.journey--dark {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--color-bg-deep);
}

.journey--dark::before {
  content: "";
  position: absolute;
  inset: auto -15% -30% auto;
  z-index: -1;
  width: 60rem;
  height: 60rem;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--color-ocean-700), transparent);
  opacity: 0.55;
}

.journey__grid {
  display: grid;
  gap: var(--space-8);
}

.journey__media {
  position: relative;
}

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

.journey__media .collage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

.journey__media .collage__main {
  grid-column: 1 / -1;
  aspect-ratio: 4 / 3;
}

.journey__media .collage__small {
  aspect-ratio: 1;
}

.journey__length {
  position: absolute;
  top: calc(-1 * var(--space-5));
  inset-inline-start: calc(-1 * var(--space-3));
  display: grid;
  place-content: center;
  width: 6.5rem;
  height: 6.5rem;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-on-accent);
  box-shadow: var(--shadow-accent);
  font-family: var(--font-display);
  line-height: 1;
  text-align: center;
  transform: rotate(-8deg);
}

.journey__length strong {
  display: block;
  font-size: 2.5rem;
  font-weight: var(--weight-bold);
}

.journey__length span {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.journey__title {
  font-size: var(--text-4xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.journey__body > .lead {
  margin-top: var(--space-4);
}

.journey__route {
  margin-top: var(--space-6);
}

.journey__route .route {
  margin-top: var(--space-3);
}

.badges {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: var(--space-3) var(--space-4);
}

.badge {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--color-heading);
}

.badge__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.badge__icon .icon {
  width: 1.25rem;
  height: 1.25rem;
}

.theme-dark .badge__icon {
  color: var(--color-accent);
}

.journey__badges {
  margin-top: var(--space-6);
}

.days {
  margin-top: var(--space-6);
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.theme-dark .days {
  background: var(--overlay-glass);
}

.days summary {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: 3.75rem;
  padding: var(--space-3) var(--space-5);
  border-radius: inherit;
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--color-heading);
  list-style: none;
  cursor: pointer;
}

.days summary::-webkit-details-marker {
  display: none;
}

.days__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-on-accent);
}

.days__icon .icon {
  width: 1.25rem;
  height: 1.25rem;
}

.days__hint {
  margin-inline-start: auto;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.days__toggle {
  color: var(--color-primary);
  transition: transform var(--duration-base) var(--ease-out);
}

.theme-dark .days__toggle {
  color: var(--color-accent);
}

.days[open] .days__toggle {
  transform: rotate(180deg);
}

.days__hint-open,
.days[open] .days__hint-closed {
  display: none;
}

.days[open] .days__hint-open {
  display: inline;
}

.days__list {
  padding: 0 var(--space-5) var(--space-6);
}

.day {
  position: relative;
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  gap: var(--space-4);
  padding-top: var(--space-5);
}

.day:not(:last-child)::before {
  content: "";
  position: absolute;
  top: calc(var(--space-5) + 3.25rem);
  bottom: calc(-1 * var(--space-5));
  inset-inline-start: calc(1.625rem - 1px);
  border-inline-start: var(--border-thick) dashed var(--color-accent);
}

.day__marker {
  display: grid;
  place-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-family: var(--font-display);
  line-height: 1;
  text-align: center;
}

.theme-dark .day__marker {
  color: var(--color-accent);
}

.day__marker small {
  font-size: 0.625rem;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.day__marker strong {
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
}

.day:last-child .day__marker {
  background: var(--color-accent);
  color: var(--color-on-accent);
}

.day__title {
  padding-top: var(--space-2);
  font-size: var(--text-md);
}

.day__text {
  margin-top: var(--space-1);
  color: var(--color-text-muted);
}

.day__stay {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  color: var(--color-eyebrow);
}

.day__stay .icon {
  width: 1rem;
  height: 1rem;
}

@supports (interpolate-size: allow-keywords) {
  .days {
    interpolate-size: allow-keywords;
  }

  .days::details-content {
    height: 0;
    overflow: clip;
    transition:
      height var(--duration-base) var(--ease-out),
      content-visibility var(--duration-base) allow-discrete;
  }

  .days[open]::details-content {
    height: auto;
  }
}

.journey__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-7);
}

.journey__fine {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

@media (max-width: 39.99em) {
  .journey__actions .btn {
    flex: 1 1 100%;
  }

  .journey__length {
    top: calc(-1 * var(--space-4));
    inset-inline-start: calc(-1 * var(--space-1));
    width: 5.5rem;
    height: 5.5rem;
  }

  .journey__length strong {
    font-size: 2rem;
  }

  .days summary {
    padding-inline: var(--space-4);
  }

  .days__list {
    padding-inline: var(--space-4);
  }

  .day {
    grid-template-columns: 2.75rem minmax(0, 1fr);
    gap: var(--space-3);
  }

  .day__marker {
    width: 2.75rem;
    height: 2.75rem;
  }

  .day:not(:last-child)::before {
    top: calc(var(--space-5) + 2.75rem);
    inset-inline-start: calc(1.375rem - 1px);
  }
}

@media (min-width: 64em) {
  .journey__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--space-6);
    align-items: start;
  }

  .journey__media {
    grid-column: 1 / span 5;
    position: sticky;
    top: calc(var(--header-height) + var(--space-8));
  }

  .journey__body {
    grid-column: 7 / -1;
  }

  .journey--flip .journey__media {
    grid-column: 8 / -1;
    order: 2;
  }

  .journey--flip .journey__body {
    grid-column: 1 / span 6;
  }
}

.flow {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 48em) {
  .flow {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.flow__step {
  padding: var(--space-6);
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.flow__title {
  margin-top: var(--space-5);
  font-size: var(--text-lg);
}

.flow__text {
  margin-top: var(--space-2);
  color: var(--color-text-muted);
}

/* ---------- 22. Journal page ---------- */
.feature-post-wrap {
  position: relative;
  z-index: var(--z-raised);
  margin-top: calc(-1 * var(--space-10));
}

.feature-post {
  display: grid;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
}

.feature-post__media {
  position: relative;
  aspect-ratio: 4 / 3;
}

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

.feature-post__media .tag {
  position: absolute;
  top: var(--space-5);
  inset-inline-start: var(--space-5);
}

.feature-post__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-4);
  padding: clamp(var(--space-5), 4vw, var(--space-9));
}

.feature-post__body .eyebrow {
  margin-bottom: 0;
}

.feature-post__title {
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

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

.feature-post__body .btn {
  margin-top: var(--space-2);
}

@media (min-width: 48em) {
  .feature-post {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  }

  .feature-post__media {
    aspect-ratio: auto;
    min-height: 26rem;
  }

  .feature-post__media img {
    position: absolute;
    inset: 0;
  }
}

.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.post-meta span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.post-meta .icon {
  width: 1rem;
  height: 1rem;
  color: var(--color-accent-text);
}

.post-grid {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-6);
}

@media (min-width: 40em) {
  .post-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64em) {
  .post-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6);
  }
}

.post-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.post-card:hover {
  border-color: var(--color-border-hover);
  box-shadow: var(--shadow-md);
}

.post-card__media {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--color-bg-deep);
}

.post-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}

.post-card:hover .post-card__media img {
  transform: scale(1.05);
}

.post-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-5);
}

.post-card__title {
  font-size: var(--text-xl);
}

.post-card__title a {
  text-decoration: none;
}

/* The whole card is the link target; the outline is drawn on the card */
.post-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--z-base);
  border-radius: inherit;
}

.post-card__title a:focus-visible {
  outline: none;
}

.post-card__title a:focus-visible::after {
  outline: var(--border-focus) solid var(--color-focus);
  outline-offset: calc(-1 * var(--border-focus));
}

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

.post-card__more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-primary);
}

.post-card__more .icon {
  width: 1.125rem;
  height: 1.125rem;
  transition: transform var(--duration-base) var(--ease-out);
}

.post-card:hover .post-card__more .icon {
  transform: translateX(4px);
}

/* Balanced grid: JS marks the first and last visible cards (see main.js) */
@media (min-width: 40em) and (max-width: 63.99em) {
  .post-grid[data-odd] > .is-lead {
    grid-column: 1 / -1;
  }
}

@media (min-width: 48em) and (max-width: 63.99em) {
  .post-grid[data-odd] > .is-lead {
    flex-direction: row;
  }

  .post-grid[data-odd] > .is-lead .post-card__media {
    position: relative;
    flex: 0 0 52%;
    aspect-ratio: auto;
    min-height: 18rem;
  }

  /* Let the text set the card height, not the photo's natural size */
  .post-grid[data-odd] > .is-lead .post-card__media img {
    position: absolute;
    inset: 0;
  }

  .post-grid[data-odd] > .is-lead .post-card__body {
    justify-content: center;
    padding: var(--space-6);
  }

  .post-grid[data-odd] > .is-lead .post-card__more {
    margin-top: var(--space-2);
  }
}

@media (min-width: 64em) {
  .post-grid[data-rest="1"] > .is-lead,
  .post-grid[data-rest="1"] > .is-tail,
  .post-grid[data-rest="2"] > .is-lead {
    grid-column: span 2;
    flex-direction: row;
  }

  .post-grid[data-rest="1"] > .is-lead .post-card__media,
  .post-grid[data-rest="1"] > .is-tail .post-card__media,
  .post-grid[data-rest="2"] > .is-lead .post-card__media {
    position: relative;
    flex: 0 0 52%;
    aspect-ratio: auto;
    min-height: 20rem;
  }

  .post-grid[data-rest="1"] > .is-lead .post-card__media img,
  .post-grid[data-rest="1"] > .is-tail .post-card__media img,
  .post-grid[data-rest="2"] > .is-lead .post-card__media img {
    position: absolute;
    inset: 0;
  }

  .post-grid[data-rest="1"] > .is-lead .post-card__body,
  .post-grid[data-rest="1"] > .is-tail .post-card__body,
  .post-grid[data-rest="2"] > .is-lead .post-card__body {
    justify-content: center;
    padding: var(--space-7) var(--space-6);
  }

  /* Wide cards are stretched by their row, so keep the text grouped */
  .post-grid[data-rest="1"] > .is-lead .post-card__more,
  .post-grid[data-rest="1"] > .is-tail .post-card__more,
  .post-grid[data-rest="2"] > .is-lead .post-card__more {
    margin-top: var(--space-2);
  }
}

.guides {
  padding-bottom: var(--space-section);
}

.guide {
  padding-block: var(--space-9);
  scroll-margin-top: var(--space-2);
}

.guide + .guide {
  border-top: var(--border-thin) solid var(--color-border);
}

.guide__grid {
  display: grid;
  gap: var(--space-6);
}

.guide__aside {
  display: grid;
  gap: var(--space-4);
  justify-items: start;
}

.guide__img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

.guide__title {
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.guide__dek {
  max-width: 40rem;
  margin-top: var(--space-4);
  font-size: var(--text-lg);
  color: var(--color-text-muted);
}

.guide__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-6);
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: var(--border-thin) dashed var(--color-border);
}

@media (min-width: 64em) {
  .guide__grid {
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
    gap: var(--space-10);
    align-items: start;
  }

  .guide__aside {
    position: sticky;
    top: calc(var(--header-height) + var(--space-6));
  }

  .guide__img {
    aspect-ratio: 4 / 5;
  }
}

.prose {
  max-width: 42rem;
  margin-top: var(--space-6);
}

.prose > * + * {
  margin-top: var(--space-4);
}

.prose h3 {
  margin-top: var(--space-7);
  font-size: var(--text-xl);
}

.prose ul,
.prose ol {
  display: grid;
  gap: var(--space-2);
  padding-inline-start: 1.25rem;
}

.prose li::marker {
  color: var(--color-accent-text);
}

.prose strong {
  font-weight: var(--weight-semibold);
  color: var(--color-heading);
}

.callout {
  padding: var(--space-5);
  border-inline-start: 0.25rem solid var(--color-accent);
  border-start-end-radius: var(--radius-md);
  border-end-end-radius: var(--radius-md);
  background: var(--color-accent-soft);
  color: var(--color-ink-900);
}

/* If a translation is ever too long for a small phone, the table scrolls inside its own box
   rather than widening the page */
.vs-wrap {
  overflow-x: auto;
}

.vs {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.vs caption {
  margin-bottom: var(--space-3);
  font-weight: var(--weight-semibold);
  text-align: start;
  color: var(--color-heading);
}

.vs th,
.vs td {
  padding: var(--space-3);
  border-bottom: var(--border-thin) solid var(--color-border);
  text-align: start;
  vertical-align: top;
}

.vs thead th {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-eyebrow);
}

.vs tbody th {
  font-weight: var(--weight-semibold);
  color: var(--color-heading);
}

@media (max-width: 29.99em) {
  .vs th,
  .vs td {
    padding-inline: var(--space-2);
  }
}

/* ---------- 23. Trip dock (built by main.js) ---------- */
.trip-dock {
  position: fixed;
  right: var(--gutter);
  bottom: var(--gutter);
  left: var(--gutter);
  z-index: var(--z-float);
  display: grid;
  gap: var(--space-3);
  max-width: 46rem;
  margin-inline: auto;
  padding: var(--space-3);
  border: var(--border-thin) solid var(--color-border-inverse);
  border-radius: var(--radius-lg);
  background: var(--color-bg-deep);
  box-shadow: var(--shadow-lg);
  visibility: hidden;
  opacity: 0;
  transform: translateY(1.5rem);
  transition:
    opacity var(--duration-base) var(--ease-out),
    transform var(--duration-base) var(--ease-out),
    visibility 0s linear var(--duration-base);
}

.trip-dock.is-visible {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition:
    opacity var(--duration-base) var(--ease-out),
    transform var(--duration-base) var(--ease-out);
}

.trip-dock__summary {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.trip-dock__count {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
}

.trip-dock__text {
  min-width: 0;
}

.trip-dock__label {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
}

.trip-dock__list {
  overflow: hidden;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trip-dock__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.trip-dock__actions .btn {
  flex: 1 1 auto;
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  box-shadow: none;
}

.trip-dock__clear {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  border: var(--border-thin) solid var(--color-border-inverse);
  border-radius: 50%;
  color: var(--color-text-inverse);
  transition: border-color var(--duration-fast) var(--ease-out);
}

.trip-dock__clear:hover {
  border-color: var(--color-accent);
}

.trip-dock__clear .icon {
  width: 1.125rem;
  height: 1.125rem;
}

@media (min-width: 48em) {
  .trip-dock {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-5);
    padding-block: var(--space-2);
    padding-inline: var(--space-3) var(--space-2);
    border-radius: var(--radius-pill);
  }

  .trip-dock__actions .btn {
    flex: 0 0 auto;
  }
}

/* ---------- 24. Scroll reveal ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0;
    transform: translateY(2rem);
    transition:
      opacity var(--duration-slow) var(--ease-out),
      transform var(--duration-slow) var(--ease-out);
    transition-delay: calc(var(--reveal, 0) * 120ms);
  }

  .js .reveal.is-visible {
    opacity: 1;
    transform: none;
  }
}

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

/* Google review call to action (footer and home reviews) */
.footer__review,
.reviews__google {
  margin-top: var(--space-5);
}

.footer__review {
  font-size: var(--text-sm);
}

.footer__review .icon,
.reviews__google .icon {
  width: 1.125rem;
  height: 1.125rem;
  color: var(--color-accent);
}

/* ---------- 25. Gallery page ---------- */
.jump__count {
  display: inline-grid;
  place-items: center;
  min-width: 1.5rem;
  height: 1.5rem;
  margin-inline-start: var(--space-1);
  padding-inline: var(--space-1);
  border-radius: var(--radius-pill);
  background: rgb(255 255 255 / 0.16);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}

/* Justified rows: each tile grows in step with its aspect ratio (--r), so every
   photo in a row ends up the same height and nothing gets cropped. */
.gallery-grid {
  --row: 9.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-6);
}

/* Soaks up the spare space in the last row so its photos keep their size */
.gallery-grid::after {
  content: "";
  flex-grow: 1000;
}

@media (min-width: 40em) {
  .gallery-grid {
    --row: 13rem;
    gap: var(--space-3);
  }
}

@media (min-width: 64em) {
  .gallery-grid {
    --row: 16rem;
  }
}

@media (min-width: 90em) {
  .gallery-grid {
    --row: 18rem;
  }
}

.gallery-item {
  flex: var(--r) 1 calc(var(--r) * var(--row));
  min-width: 0;
  animation: gallery-in var(--duration-base) var(--ease-out) both;
}

@keyframes gallery-in {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
}

.gallery-tile {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: var(--r);
  border-radius: var(--radius-sm);
  background: var(--color-ocean-100);
  color: var(--color-white);
  isolation: isolate;
}

.gallery-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}

.gallery-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(5 30 40 / 0) 40%, rgb(5 30 40 / 0.85) 100%);
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-out);
}

.gallery-tile__info {
  position: absolute;
  inset: auto 0 0;
  z-index: 1;
  display: grid;
  gap: 0.125rem;
  padding: var(--space-3) var(--space-4) var(--space-4);
  opacity: 0;
  transform: translateY(0.5rem);
  transition:
    opacity var(--duration-base) var(--ease-out),
    transform var(--duration-base) var(--ease-out);
}

.gallery-tile__cat {
  color: var(--color-gold-300);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.gallery-tile__title {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
}

.gallery-tile__zoom {
  position: absolute;
  top: var(--space-3);
  inset-inline-end: var(--space-3);
  z-index: 1;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: rgb(5 30 40 / 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transform: scale(0.8);
  transition:
    opacity var(--duration-base) var(--ease-out),
    transform var(--duration-base) var(--ease-out);
}

.gallery-tile__zoom .icon {
  width: 1rem;
  height: 1rem;
}

@media (hover: hover) {
  .gallery-tile:hover img {
    transform: scale(1.05);
  }

  .gallery-tile:hover::after,
  .gallery-tile:hover .gallery-tile__info,
  .gallery-tile:hover .gallery-tile__zoom {
    opacity: 1;
    transform: none;
  }

  .gallery-tile:hover .gallery-tile__play {
    transform: scale(1.08);
  }
}

.gallery-tile:focus-visible::after,
.gallery-tile:focus-visible .gallery-tile__info,
.gallery-tile:focus-visible .gallery-tile__zoom {
  opacity: 1;
  transform: none;
}

/* Video tiles: play button and running time always on show */
.gallery-tile__play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  margin: -1.75rem 0 0 -1.75rem;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-on-accent);
  animation: gallery-pulse 2.4s var(--ease-out) infinite;
  transition: transform var(--duration-base) var(--ease-out);
}

.gallery-tile__play .icon {
  width: 1.5rem;
  height: 1.5rem;
  margin-left: 0.1875rem;
}

@keyframes gallery-pulse {
  0% {
    box-shadow: 0 0 0 0 rgb(242 169 0 / 0.55);
  }

  70%,
  100% {
    box-shadow: 0 0 0 1rem rgb(242 169 0 / 0);
  }
}

.gallery-tile__time {
  position: absolute;
  top: var(--space-3);
  inset-inline-start: var(--space-3);
  z-index: 1;
  padding: 0.125rem var(--space-2);
  border-radius: var(--radius-pill);
  background: rgb(5 30 40 / 0.62);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}

/* ---- Lightbox (a native <dialog>, opened by main.js) ---- */
html.lightbox-open {
  overflow: hidden;
}

.lightbox {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: transparent;
  color: var(--color-white);
}

.lightbox[open] {
  display: grid;
  grid-template:
    "bar bar bar" auto
    "stage stage stage" minmax(0, 1fr)
    "prev cap next" auto
    / auto minmax(0, 1fr) auto;
  gap: var(--space-3);
  padding:
    max(var(--space-3), env(safe-area-inset-top))
    max(var(--space-3), env(safe-area-inset-right))
    max(var(--space-4), env(safe-area-inset-bottom))
    max(var(--space-3), env(safe-area-inset-left));
  animation: lightbox-in var(--duration-base) var(--ease-out);
}

.lightbox::backdrop {
  background: rgb(3 21 28 / 0.94);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.lightbox[open]::backdrop {
  animation: lightbox-in var(--duration-base) var(--ease-out);
}

.lightbox.is-closing,
.lightbox.is-closing::backdrop {
  animation: lightbox-out var(--duration-fast) var(--ease-out) forwards;
}

@keyframes lightbox-in {
  from {
    opacity: 0;
  }
}

@keyframes lightbox-out {
  to {
    opacity: 0;
  }
}

@media (min-width: 48em) {
  .lightbox[open] {
    grid-template:
      "bar bar bar" auto
      "prev stage next" minmax(0, 1fr)
      ". cap ." auto
      / auto minmax(0, 1fr) auto;
    gap: var(--space-4) var(--space-5);
    padding: var(--space-4) var(--space-5) var(--space-5);
  }
}

.lightbox__bar {
  grid-area: bar;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.lightbox__count {
  padding-inline-start: var(--space-2);
  color: rgb(255 255 255 / 0.78);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
}

.lightbox__stage {
  grid-area: stage;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  touch-action: pan-y pinch-zoom;
}

.lightbox__media {
  grid-area: 1 / 1;
  display: block;
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--radius-sm);
  background: rgb(255 255 255 / 0.04);
  box-shadow: 0 30px 80px -24px rgb(0 0 0 / 0.65);
  object-fit: contain;
  opacity: 0;
  transform: translateX(calc(var(--dir, 0) * 2.5rem)) scale(0.985);
  transition:
    opacity var(--duration-base) var(--ease-out),
    transform var(--duration-base) var(--ease-out);
  user-select: none;
  -webkit-user-drag: none;
}

video.lightbox__media {
  background: #000;
}

.lightbox__media.is-shown {
  opacity: 1;
  transform: none;
}

.lightbox__media.is-leaving {
  opacity: 0;
  transform: translateX(calc(var(--dir, 0) * -2.5rem));
  pointer-events: none;
}

.lightbox__btn {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: var(--border-thin) solid rgb(255 255 255 / 0.22);
  border-radius: 50%;
  background: rgb(255 255 255 / 0.08);
  color: var(--color-white);
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}

.lightbox__btn:hover {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-on-accent);
}

.lightbox__btn:active {
  transform: scale(0.94);
}

.lightbox__nav {
  align-self: center;
}

.lightbox__nav--prev {
  grid-area: prev;
}

.lightbox__nav--next {
  grid-area: next;
}

.lightbox[data-single] .lightbox__nav {
  visibility: hidden;
}

@media (min-width: 48em) {
  .lightbox__nav {
    width: 3.5rem;
    height: 3.5rem;
  }
}

.lightbox__caption {
  grid-area: cap;
  align-self: center;
  justify-self: center;
  max-width: 40rem;
  min-height: 2.75rem;
  text-align: center;
}

.lightbox__cat {
  color: var(--color-gold-300);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.lightbox__title {
  margin-top: 0.125rem;
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
}

/* ---------- 26. Phones and touch screens ---------- */
/* A thumb-first layer over everything above: 48px tap targets,
   pressed states you can feel, sideways rows that snap and hint at what is off screen,
   and the menu's quick-contact panel. */

@property --fade-start {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

@property --fade-end {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

/* The trip dock clears the home indicator now that the page runs edge to edge */
.trip-dock {
  bottom: calc(var(--gutter) + env(safe-area-inset-bottom, 0px));
}

/* The contact stack steps aside while the keyboard is up for a form field */
@media (max-width: 47.99em), (pointer: coarse) {
  body:has(:is(input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"]), textarea, select):focus) .contact-stack {
    visibility: hidden;
    opacity: 0;
    transform: translateX(calc(100% + var(--stack-edge) + env(safe-area-inset-right, 0px)));
    transition:
      transform var(--duration-base) var(--ease-out),
      opacity var(--duration-base) var(--ease-out),
      visibility 0s linear var(--duration-base);
  }

  body:has(:is(input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"]), textarea, select):focus) .contact-stack__btn::before {
    animation: none;
  }
}

/* 48px tap targets wherever the pointer is a finger */
@media (max-width: 47.99em), (pointer: coarse) {
  .site-header .logo {
    align-items: center;
    min-height: 3rem;
  }

  .trip-toggle,
  .filter__btn,
  .jump__link,
  .chip span,
  .text-link,
  .site-nav__social,
  .trip-dock__actions .btn {
    min-height: 3rem;
  }

  .trip-dock__clear,
  .social a {
    width: 3rem;
    height: 3rem;
  }

  .pick {
    min-height: 3rem;
    padding: 0;
    padding-inline-start: var(--space-4);
  }

  .pick__remove {
    width: 3rem;
    height: 3rem;
  }

  .direct-line a {
    display: inline-flex;
    align-items: center;
    min-height: 3rem;
  }

  .footer__list {
    gap: 0;
  }

  .footer__list a {
    display: inline-flex;
    align-items: center;
    min-width: 3rem;
    min-height: 3rem;
  }

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

  .footer__contact a {
    display: flex;
    overflow-wrap: anywhere;
  }

  /* Centre each icon on its 48px link row */
  .footer__contact li:has(a) .icon {
    margin-top: calc((3rem - 1.125rem) / 2);
  }
}

@media (max-width: 47.99em) {
  /* Seven short links read better as two columns than one long ladder */
  .footer__list:not(.footer__contact) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-4);
  }

  .footer__list:not(.footer__contact) a {
    display: flex;
  }

  .filter-bar--sticky {
    padding-block: var(--space-1);
  }
}

/* Pressed states: instant feedback under the thumb, eased back on release */
a,
button,
summary,
label {
  -webkit-tap-highlight-color: transparent;
}

.filter__btn,
.jump__link,
.trip-toggle,
.chip span,
.carousel-btn,
.social a,
.trip-dock__clear,
.pick__remove,
.nav-toggle,
.quick-contact {
  transition:
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}

.gallery-tile {
  transition: transform var(--duration-base) var(--ease-out);
}

.post-card {
  transition:
    transform var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out);
}

/* A tapped button keeps its hover lift on touch screens; drop it there */
@media (hover: none) {
  .btn:hover {
    transform: none;
  }
}

.btn:active {
  transform: scale(0.97);
  transition-duration: 60ms;
}

.filter__btn:active,
.jump__link:active,
.trip-toggle:active,
.chip:active span,
.carousel-btn:active:not(:disabled),
.social a:active,
.trip-dock__clear:active,
.pick__remove:active,
.nav-toggle:active,
.quick-contact:active {
  transform: scale(0.95);
  transition-duration: 60ms;
}

.filter__btn:active:not([aria-pressed="true"]),
.chip:active span {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}

.jump__link:active,
.trip-toggle:active:not([aria-pressed="true"]) {
  border-color: var(--color-accent);
  background: rgb(255 255 255 / 0.22);
}

.trip-toggle--solid:active:not([aria-pressed="true"]) {
  background: var(--color-primary-soft);
}

.text-link:active,
.footer__list a:active,
.direct-line a:active,
.site-nav__social:active {
  opacity: 0.7;
}

.glance__link:active {
  background: var(--color-primary-soft);
}

.worry summary:active {
  opacity: 0.75;
}

.gallery-tile:active,
.post-card:active {
  transform: scale(0.985);
  transition-duration: 80ms;
}

/* Sideways rows: snap chip by chip and fade only the edge that hides more */
@media (max-width: 63.99em) {
  .filter {
    --fade-start: var(--gutter);
    --fade-end: var(--gutter);
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-start), #000 calc(100% - var(--fade-end)), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-start), #000 calc(100% - var(--fade-end)), transparent 100%);
    transition:
      --fade-start var(--duration-base) var(--ease-out),
      --fade-end var(--duration-base) var(--ease-out);
  }

  .filter__btn {
    scroll-snap-align: start;
  }

  .filter[data-edge="start"] {
    --fade-start: 0px;
    --fade-end: 3.5rem;
  }

  .filter[data-edge="middle"] {
    --fade-start: 3.5rem;
    --fade-end: 3.5rem;
  }

  .filter[data-edge="end"] {
    --fade-start: 3.5rem;
    --fade-end: 0px;
  }

  .filter[data-edge="none"] {
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* Hero jump chips keep to one row on phones; the chip cut off at the edge shows there is more
   (no fade mask here, as it would switch off the chips' glass blur) */
@media (max-width: 47.99em) {
  /* Keeps the one-line chip row from widening the hero column past the screen */
  .hero__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .jump {
    flex-wrap: nowrap;
    margin-inline: calc(-1 * var(--gutter));
    padding: var(--space-1) var(--gutter);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

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

  .jump__link {
    flex: 0 0 auto;
    white-space: nowrap;
    scroll-snap-align: start;
  }
}

/* Mobile menu: a full-screen sheet of 56px rows, then quick ways to reach us */
@media (max-width: 63.99em) {
  html:has(body.menu-open) {
    overflow: hidden;
  }

  .site-nav {
    justify-content: flex-start;
    gap: var(--space-6);
    padding: calc(var(--header-height) + var(--space-3)) var(--gutter) calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
    overflow-x: hidden;
    overscroll-behavior: contain;
  }

  .site-nav__list {
    gap: 0;
  }

  .site-nav__list > li + li {
    border-top: var(--border-thin) solid var(--color-border-inverse);
  }

  .site-nav__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    min-height: 3.5rem;
    margin-inline: calc(-1 * var(--space-3));
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    font-size: var(--text-xl);
    transition:
      background-color var(--duration-fast) var(--ease-out),
      color var(--duration-fast) var(--ease-out);
  }

  /* The desktop underline becomes a chevron */
  .site-nav__link::after,
  .site-nav__link:hover::after,
  .site-nav__link[aria-current="page"]::after {
    position: static;
    flex-shrink: 0;
    width: 0.5rem;
    height: 0.5rem;
    margin-inline-end: var(--space-1);
    border-top: var(--border-thick) solid currentColor;
    border-right: var(--border-thick) solid currentColor;
    border-radius: 1px;
    background: none;
    opacity: 0.45;
    transform: rotate(45deg);
    transform-origin: center;
  }

  .site-nav__link[aria-current="page"] {
    color: var(--color-accent);
  }

  .site-nav__link[aria-current="page"]::after {
    opacity: 1;
  }

  .site-nav__link:active {
    background: rgb(255 255 255 / 0.08);
  }

  .site-nav__contact {
    gap: var(--space-3);
    margin-top: auto;
  }

  .site-nav__note {
    font-size: var(--text-sm);
  }

  .quick-contact {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-width: 0;
    min-height: 3.25rem;
    padding: var(--space-2) var(--space-4);
    border: var(--border-thin) solid var(--color-border-inverse);
    border-radius: var(--radius-pill);
    font-family: var(--font-display);
    font-weight: var(--weight-semibold);
    text-decoration: none;
  }

  .quick-contact .icon {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    color: var(--color-accent);
  }

  .site-nav__contact a.quick-contact--wa {
    min-height: 3.5rem;
    border-color: transparent;
    background: var(--color-whatsapp);
    color: var(--color-ocean-950);
  }

  .quick-contact--wa .icon {
    width: 1.5rem;
    height: 1.5rem;
    color: inherit;
  }

  .quick-contact__detail {
    font-weight: var(--weight-medium);
    white-space: nowrap;
  }

  .site-nav__contact a.quick-contact--wa:active {
    background: var(--color-whatsapp-pressed);
  }

  .quick-contact:not(.quick-contact--wa):active {
    border-color: var(--color-accent);
    background: rgb(255 255 255 / 0.08);
  }

  .quick-contact__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
  }

  .site-nav__social {
    justify-content: center;
  }
}

/* The sheet's rows rise in one after another as it opens */
@media (max-width: 63.99em) and (prefers-reduced-motion: no-preference) {
  .site-nav__list > li,
  .site-nav__contact {
    opacity: 0;
    transform: translateY(0.75rem);
    transition:
      opacity var(--duration-base) var(--ease-out),
      transform var(--duration-base) var(--ease-out);
  }

  .site-nav.is-open .site-nav__list > li,
  .site-nav.is-open .site-nav__contact {
    opacity: 1;
    transform: none;
  }

  .site-nav.is-open .site-nav__list > li:nth-child(1) { transition-delay: 30ms; }
  .site-nav.is-open .site-nav__list > li:nth-child(2) { transition-delay: 60ms; }
  .site-nav.is-open .site-nav__list > li:nth-child(3) { transition-delay: 90ms; }
  .site-nav.is-open .site-nav__list > li:nth-child(4) { transition-delay: 120ms; }
  .site-nav.is-open .site-nav__list > li:nth-child(5) { transition-delay: 150ms; }
  .site-nav.is-open .site-nav__list > li:nth-child(6) { transition-delay: 180ms; }
  .site-nav.is-open .site-nav__list > li:nth-child(7) { transition-delay: 210ms; }
  .site-nav.is-open .site-nav__contact { transition-delay: 250ms; }
}

/* Trip dock on phones: the clear button joins the summary row so both actions get the full width */
@media (max-width: 47.99em) {
  .trip-dock__summary {
    min-height: 3rem;
    padding-inline-end: 3.5rem;
  }

  .trip-dock__clear {
    position: absolute;
    top: var(--space-3);
    inset-inline-end: var(--space-3);
  }

  .trip-dock__actions .btn {
    padding-inline: var(--space-3);
  }
}

/* Below about 420px both labels cannot share one line, so the icon and "WhatsApp" carry the action;
   screen readers still hear the full label */
@media (max-width: 26.24em) {
  .trip-dock__verb {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* ---------- 27. Languages ---------- */
/* The switcher needs the script, and so does every language but English */
.no-js .lang,
.no-js .lang-row {
  display: none;
}

/* A saved language other than English is applied before the page shows, so English never flashes
   first (the boot script lifts this after 1.5s at most) */
html.i18n-pending body {
  visibility: hidden;
}

html.i18n-loading body {
  cursor: progress;
}

html.i18n-loading [data-lang-code] {
  opacity: 0.5;
}

/* Header dropdown: a pill that matches the Instagram button, opening a short list */
.lang {
  position: relative;
  flex-shrink: 0;
}

.lang__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: 2.875rem;
  padding-inline: var(--space-3);
  border: var(--border-thin) solid color-mix(in srgb, currentColor 45%, transparent);
  border-radius: var(--radius-pill);
  color: inherit;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: 1;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}

.lang__toggle:hover,
.lang__toggle[aria-expanded="true"] {
  border-color: currentColor;
  background: color-mix(in srgb, currentColor 10%, transparent);
}

.lang__toggle:active {
  transform: scale(0.95);
  transition-duration: 60ms;
}

/* Flags: local SVGs, 4:3, with a hairline so the white in the French, Russian and Israeli
   flags keeps its edge on the white list and the white header */
.flag {
  flex-shrink: 0;
  width: 1.25rem;
  height: 0.9375rem;
  border-radius: 2px;
  box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 22%, transparent);
  object-fit: cover;
}

.lang__toggle > .flag {
  margin-inline-end: 0.25rem;
}

.lang__code {
  min-width: 1.4em;
  letter-spacing: 0.02em;
}

.lang__chevron {
  width: 0.875rem;
  height: 0.875rem;
  opacity: 0.7;
  transition: transform var(--duration-fast) var(--ease-out);
}

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

.lang__list[hidden] {
  display: none;
}

.lang__list {
  --color-focus: var(--color-ocean-700);
  position: absolute;
  top: calc(100% + var(--space-2));
  inset-inline-end: 0;
  z-index: 1;
  display: grid;
  gap: 0.125rem;
  min-width: 13rem;
  margin: 0;
  padding: var(--space-2);
  border: var(--border-thin) solid rgb(13 92 117 / 0.1);
  border-radius: var(--radius-md);
  background: var(--color-white);
  box-shadow: var(--shadow-lg);
  color: var(--color-ink-900);
  list-style: none;
}

/* Flag, then the language's own name, then its code at the far end */
.lang__option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 2.75rem;
  padding-inline: var(--space-3);
  border-radius: var(--radius-sm);
  color: inherit;
  font-weight: var(--weight-medium);
  text-align: start;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
}

.lang__option:hover {
  background: var(--color-ocean-50);
  color: var(--color-ocean-800);
}

.lang__option:active {
  background: var(--color-ocean-100);
}

/* Full 48px rows for fingers, matching the site's other touch targets */
@media (pointer: coarse) {
  .lang__option {
    min-height: 3rem;
  }
}

.lang__abbr {
  margin-inline-start: auto;
  display: inline-grid;
  place-items: center;
  min-width: 2.25rem;
  padding: 0.25rem var(--space-2);
  border-radius: var(--radius-pill);
  color: var(--color-ink-600);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
}

.lang__option[aria-current="true"] {
  color: var(--color-ocean-800);
  font-weight: var(--weight-semibold);
}

.lang__option[aria-current="true"] .lang__abbr {
  background: var(--color-accent);
  color: var(--color-on-accent);
}

@media (prefers-reduced-motion: no-preference) {
  .lang__list {
    transition:
      opacity var(--duration-fast) var(--ease-out),
      transform var(--duration-fast) var(--ease-out);
  }

  @starting-style {
    .lang__list {
      opacity: 0;
      transform: translateY(-0.375rem);
    }
  }
}

/* Phones and tablets: the dropdown sits in the bar beside the menu button (the open menu
   has its own row of languages); from 1024px it joins the navigation */
.lang--bar {
  margin-inline-start: auto;
}

.lang--bar .lang__toggle {
  height: 3rem;
}

.site-header.menu-open .lang--bar {
  visibility: hidden;
}

@media (max-width: 63.99em) {
  .lang--nav {
    display: none;
  }
}

@media (min-width: 64em) {
  .lang--bar {
    display: none;
  }

  /* Pulled close to the Instagram and WhatsApp buttons, like the pair it joins */
  .lang--nav {
    margin-inline-end: calc(var(--space-3) - var(--space-7));
  }
}

@media (min-width: 64em) and (max-width: 84.99em) {
  .lang--nav {
    margin-inline-end: calc(var(--space-3) - var(--space-5));
  }
}

@media (min-width: 64em) and (max-width: 74.99em) {
  .lang--nav {
    margin-inline-end: calc(var(--space-3) - var(--space-4));
  }

  .lang--nav .lang__toggle {
    padding-inline: var(--space-2);
  }

  .lang--nav .lang__chevron {
    display: none;
  }

  /* With the language menu in the bar, seven links, Instagram and WhatsApp no longer fit at
     1024px (Russian and German are the longest). Home steps out, since the logo links home,
     and so does the Instagram icon, which stays in the footer. */
  .site-nav__list > li:first-child,
  .site-header__social {
    display: none;
  }
}

/* Open menu: five buttons, the code large and the language's own name beneath */
.lang-row {
  margin-top: var(--space-2);
  padding-top: var(--space-4);
  border-top: var(--border-thin) solid var(--color-border-inverse);
}

.lang-row__label {
  margin-bottom: var(--space-3);
  color: var(--color-text-inverse-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.lang-row__options {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-2);
}

.lang-row__btn {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0.125rem;
  min-width: 0;
  min-height: 3.5rem;
  padding: var(--space-2) var(--space-1);
  border: var(--border-thin) solid var(--color-border-inverse);
  border-radius: var(--radius-sm);
  color: var(--color-text-inverse);
  transition:
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}

.lang-row__code {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  letter-spacing: 0.04em;
}

.lang-row__name {
  max-width: 100%;
  overflow: hidden;
  color: var(--color-text-inverse-muted);
  font-size: 0.6875rem;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lang-row__btn[aria-current="true"] {
  border-color: var(--color-accent);
  background: rgb(242 169 0 / 0.12);
}

.lang-row__btn[aria-current="true"] .lang-row__code {
  color: var(--color-accent);
}

.lang-row__btn:active {
  border-color: var(--color-accent);
  background: rgb(255 255 255 / 0.08);
  transform: scale(0.95);
  transition-duration: 60ms;
}

@media (hover: hover) {
  .lang-row__btn:hover {
    border-color: rgb(255 255 255 / 0.45);
  }
}

@media (forced-colors: active) {
  .lang__option[aria-current="true"],
  .lang-row__btn[aria-current="true"] {
    outline: var(--border-thin) solid CanvasText;
  }
}

/* Long German, French and Russian words: headings may break with a hyphen rather than overflow */
:lang(de) :is(h1, h2, h3, h4),
:lang(fr) :is(h1, h2, h3, h4),
:lang(ru) :is(h1, h2, h3, h4) {
  -webkit-hyphens: auto;
  hyphens: auto;
  hyphenate-limit-chars: 10 4 4;
}

/* Gallery captions sit in narrow tiles: long words break rather than run off the edge */
.gallery-tile__info {
  -webkit-hyphens: auto;
  hyphens: auto;
  overflow-wrap: anywhere;
}

/* Phones: longer translations wrap instead of pushing the page sideways. The "Show 7 days"
   hint may take two lines, and the comparison table's headings track tighter, since words
   in capitals are never hyphenated. */
@media (max-width: 29.99em) {
  .days summary {
    gap: var(--space-3);
  }

  .days__hint {
    white-space: normal;
    text-align: end;
    text-wrap: balance;
  }

  .vs thead th {
    letter-spacing: 0.04em;
  }
}

/* Hebrew has no capitals, and wide or tight tracking breaks up its letterforms */
html:lang(he) {
  --tracking-wide: 0.02em;
  --tracking-tight: 0em;
  --tracking-snug: 0em;
}

/* Numbers stay left to right inside Hebrew sentences: prices ($80–$120) and phone numbers
   would otherwise come out reversed */
[data-price],
.quick-contact__detail,
a[href^="tel:"],
.direct-line a {
  unicode-bidi: isolate;
}

[dir="rtl"] [data-price],
[dir="rtl"] .quick-contact__detail,
[dir="rtl"] a[href^="tel:"],
[dir="rtl"] .direct-line a {
  direction: ltr;
}

/* ---------- Right to left (Hebrew) ----------
   Spacing and placement already follow the text direction (logical properties); these are the
   few things that need turning round by hand. */

/* The name is an English wordmark drawn in SVG: it keeps its own direction. The lockup
   (emblem first, then the name) shrinks towards its start */
.logo__svg {
  direction: ltr;
}

[dir="rtl"] .logo__lockup {
  transform-origin: right center;
}

[dir="rtl"] .site-nav__link::after {
  transform-origin: right;
}

[dir="rtl"] .carousel__bar {
  transform-origin: right;
}

/* Arrows point the way the page reads */
[dir="rtl"] .icon:has(> use[href="#i-arrow-right"], > use[href="#i-arrow-left"], > use[href="#i-arrow-up-right"]) {
  --flip: -1;
  transform: scaleX(-1);
}

[dir="rtl"] .text-link:hover .icon,
[dir="rtl"] .post-card:hover .post-card__more .icon {
  transform: translateX(-4px) scaleX(var(--flip, 1));
}

@media (max-width: 63.99em) {
  [dir="rtl"] .site-nav__link::after,
  [dir="rtl"] .site-nav__link:hover::after,
  [dir="rtl"] .site-nav__link[aria-current="page"]::after {
    transform: rotate(-135deg);
  }

  [dir="rtl"] .filter {
    -webkit-mask-image: linear-gradient(270deg, transparent 0, #000 var(--fade-start), #000 calc(100% - var(--fade-end)), transparent 100%);
    mask-image: linear-gradient(270deg, transparent 0, #000 var(--fade-start), #000 calc(100% - var(--fade-end)), transparent 100%);
  }

  [dir="rtl"] .filter[data-edge="none"] {
    -webkit-mask-image: none;
    mask-image: none;
  }
}