:root {
  --asphalt: #080b0d;
  --asphalt-2: #101518;
  --navy: #071a2e;
  --blue: #0a3f7b;
  --blue-bright: #0b5aa8;
  --cream: #f5f3ee;
  --white: #fff;
  --steel: #a9b1b7;
  --sky: #a9d8ff;
  --line: rgba(255, 255, 255, 0.16);
  --line-dark: rgba(8, 11, 13, 0.16);
  --signal: #d8ff3e;
  --signal-dark: #a6c900;
  --whatsapp: #25d366;
  --whatsapp-dark: #1da851;
  --display: "Secular One", sans-serif;
  --body: "Assistant", sans-serif;
  --tech: "Barlow Condensed", sans-serif;
  --container: min(1280px, calc(100vw - 64px));
  --header-height: 82px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

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

/* Nothing should ever scroll the page sideways. clip, not hidden, so the
   sticky header and fixed dock still behave. */
html { overflow-x: clip; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
}

body {
  margin: 0;
  color: var(--asphalt);
  background: var(--asphalt);
  font-family: var(--body);
  font-size: 18px;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.menu-open { overflow: hidden; }

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }

::selection { color: var(--asphalt); background: var(--signal); }

:focus-visible {
  outline: 3px solid var(--signal);
  outline-offset: 4px;
}

.container { width: var(--container); margin-inline: auto; }
.section { position: relative; padding: clamp(92px, 11vw, 170px) 0; }
.section--dark { color: var(--white); background: var(--asphalt); }
.section--blue { color: var(--white); background: var(--blue); }
.section--cream { background: var(--cream); }
.section--signal { background: var(--sky); }

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

.skip-link {
  position: fixed;
  z-index: 999;
  inset: 12px auto auto 12px;
  padding: 10px 18px;
  color: var(--asphalt);
  background: var(--signal);
  transform: translateY(-160%);
  transition: transform .2s ease;
}

.skip-link:focus { transform: translateY(0); }

.scroll-progress {
  position: fixed;
  z-index: 150;
  inset: 0 0 auto;
  height: 3px;
  pointer-events: none;
}

.scroll-progress span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--signal);
  transform: scaleX(0);
  transform-origin: right center;
}

.site-header {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  color: var(--white);
  border-bottom: 1px solid transparent;
  transition: background .35s ease, border-color .35s ease, transform .35s ease;
}

.site-header.is-scrolled {
  background: rgba(8, 11, 13, .88);
  border-color: var(--line);
  backdrop-filter: blur(18px);
}

.header-inner {
  height: var(--header-height);
  display: grid;
  grid-template-columns: 178px 1fr 178px;
  align-items: center;
  gap: 28px;
}

.brand { display: block; width: 268px; }
.brand img { width: 100%; height: auto; }

.desktop-nav {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.5vw, 42px);
}

.desktop-nav a {
  position: relative;
  font-size: 15px;
  font-weight: 700;
}

.desktop-nav a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -8px;
  width: 100%;
  height: 2px;
  background: var(--signal);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .35s var(--ease);
}

.desktop-nav a:hover::after { transform: scaleX(1); }

.button {
  min-height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 26px;
  border: 1px solid transparent;
  border-radius: 2px;
  font-family: var(--body);
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  transition: transform .25s var(--ease), background .25s ease, color .25s ease, border-color .25s ease;
}

.button:hover { transform: translateY(-3px); }
.button--small { min-height: 44px; padding: 0 18px; font-size: 14px; }
.button--signal { color: var(--asphalt); background: var(--signal); }
.button--signal:hover { background: var(--white); }
.button--light { color: var(--asphalt); background: var(--cream); }
.button--light:hover { background: var(--signal); }
.button--dark { color: var(--white); background: var(--asphalt); }
.button--dark:hover { color: var(--asphalt); background: var(--white); }

/* WhatsApp is where a booking actually closes, so it wears WhatsApp's colour
   rather than the site accent — people recognise it before they read it. */
.button--whatsapp { color: #fff; background: var(--whatsapp); }
.button--whatsapp:hover { color: #fff; background: var(--whatsapp-dark); }
.button--whatsapp svg { fill: currentColor; }

.wa-icon { width: 1.05em; height: 1.05em; fill: currentColor; flex: none; }

/* Floating shortcut to the live calendar. Hidden on small screens, where the
   dock already carries a booking action. */
.calendar-fab {
  position: fixed;
  z-index: 80;
  bottom: 26px;
  inset-inline-end: 26px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  color: var(--asphalt);
  background: var(--signal);
  box-shadow: 0 18px 44px rgba(8, 11, 13, .34);
  font-family: var(--tech);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .04em;
  transition: transform .25s var(--ease), background .25s ease;
}
.calendar-fab:hover { transform: translateY(-3px); background: #fff; }
.calendar-fab svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.calendar-fab.is-hidden { opacity: 0; visibility: hidden; transform: translateY(14px); }

@media (max-width: 860px) {
  .calendar-fab { display: none; }
}
.button--full { width: 100%; }

.header-cta svg { width: 18px; fill: currentColor; }

.menu-toggle {
  display: none;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--line);
  background: transparent;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 7px;
  cursor: pointer;
}

.menu-toggle > span:not(.sr-only) {
  width: 21px;
  height: 2px;
  background: currentColor;
  transition: transform .3s var(--ease);
}

.menu-toggle[aria-expanded="true"] > span:nth-last-child(2) { transform: translateY(4.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] > span:last-child { transform: translateY(-4.5px) rotate(-45deg); }

.mobile-menu {
  position: fixed;
  z-index: 95; /* under .site-header (100) so the close button stays on top */
  inset: 0;
  /* It is a sibling of <header> now, so it no longer inherits the header's
     white text — without this the links are dark on a dark panel. */
  color: var(--white);
  display: grid;
  place-items: center;
  padding: 120px 30px 50px;
  background: var(--asphalt);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-20px);
  transition: opacity .35s ease, transform .35s var(--ease), visibility .35s;
}

.mobile-menu.is-open {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

.mobile-menu nav { width: min(480px, 100%); }
.mobile-menu a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--display);
  font-size: clamp(32px, 9vw, 54px);
  line-height: 1.1;
}
.mobile-menu a span { color: var(--signal); font-family: var(--tech); font-size: 14px; }

.hero {
  position: relative;
  min-height: 100svh;
  color: var(--white);
  background: var(--asphalt);
  overflow: hidden;
  isolation: isolate;
}

.hero-media, .hero-shade { position: absolute; inset: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 58% center; }

.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(8, 11, 13, .72));
}

.hero-shade {
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(8, 11, 13, .1) 0%, rgba(8, 11, 13, .52) 45%, rgba(8, 11, 13, .96) 100%),
    linear-gradient(180deg, rgba(8, 11, 13, .38), transparent 30%);
}

.hero-shade::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .17;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
  pointer-events: none;
}

.hero-trackline {
  position: absolute;
  z-index: 2;
  left: -2vw;
  top: 9vh;
  width: 44vw;
  height: 80vh;
  border: 1px solid rgba(216, 255, 62, .5);
  border-right: 0;
  border-bottom: 0;
  border-radius: 70% 0 0 0;
  transform: rotate(-8deg);
  opacity: .55;
}

.hero-trackline span {
  position: absolute;
  top: -4px;
  right: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 24px var(--signal);
}

.hero-inner {
  position: relative;
  z-index: 3;
  min-height: 100svh;
  padding-top: calc(var(--header-height) + 78px);
  padding-bottom: 78px;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, .55fr);
  align-items: end;
  gap: clamp(50px, 9vw, 150px);
}

.eyebrow, .data-heading, .form-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--tech);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
}

.eyebrow { max-width: 610px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.eyebrow b { color: var(--signal); }

.hero h1,
.section h2,
.route-card h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -.045em;
  line-height: .92;
}

.hero h1 {
  margin-top: 26px;
  max-width: 900px;
  font-size: clamp(58px, 7.2vw, 122px);
  text-wrap: balance;
}

h1 em, h2 em {
  color: var(--signal);
  font-family: var(--tech);
  font-weight: 800;
  font-style: italic;
}

.intro-copy h2 em,
.packages-heading h2 em,
.gallery-head h2 em,
.route-card--gift h2 em,
.faq-title h2 em {
  color: var(--blue);
}

.control-glitch {
  position: relative;
  isolation: isolate;
  display: inline-block;
  color: var(--asphalt) !important;
  text-shadow: none;
  animation: glitch-main 1.65s infinite steps(1, end);
}
.control-glitch::before,
.control-glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
}
.control-glitch::before {
  color: #101518;
  clip-path: inset(5% 0 56% 0);
  animation: glitch-slice-top 1.65s infinite steps(1, end);
}
.control-glitch::after {
  color: #656c70;
  clip-path: inset(52% 0 8% 0);
  animation: glitch-slice-bottom 1.65s infinite steps(1, end);
}

@keyframes glitch-main {
  0%, 62%, 79%, 100% { transform: translate(0) skewX(0); filter: none; text-shadow: none; }
  64% { transform: translate(7px, -1px) skewX(-2deg); text-shadow: -7px 0 #656c70; }
  67% { transform: translate(-7px, 2px) skewX(2deg); filter: contrast(1.55); text-shadow: 7px 0 #f5f3ee; }
  70% { transform: translate(5px, 0) skewX(-1deg); text-shadow: -5px 0 #656c70; }
  73% { transform: translate(-4px, -1px) skewX(1deg); }
  76% { transform: translate(2px, 0); text-shadow: 3px 0 #656c70; }
}
@keyframes glitch-slice-top {
  0%, 62%, 79%, 100% { opacity: 0; transform: translate(0); }
  64% { opacity: .95; transform: translate(13px, -3px); }
  67% { opacity: .72; transform: translate(-10px, 2px); }
  70% { opacity: 1; transform: translate(8px, -1px); }
  74% { opacity: .66; transform: translate(-5px, 1px); }
  77% { opacity: 0; }
}
@keyframes glitch-slice-bottom {
  0%, 63%, 80%, 100% { opacity: 0; transform: translate(0); }
  65% { opacity: .82; transform: translate(-14px, 4px); }
  68% { opacity: 1; transform: translate(11px, -2px); }
  72% { opacity: .7; transform: translate(-8px, 2px); }
  76% { opacity: .9; transform: translate(5px, 0); }
  78% { opacity: 0; }
}

.hero-copy > p {
  width: min(580px, 100%);
  margin: 30px 0 0;
  color: rgba(255, 255, 255, .79);
  font-size: clamp(18px, 1.4vw, 22px);
  line-height: 1.55;
}

.hero-actions { display: flex; align-items: center; gap: 32px; margin-top: 36px; }
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 800;
  border-bottom: 1px solid currentColor;
  padding-bottom: 4px;
}
.text-link span { font-family: var(--tech); }
.text-link--light { color: var(--white); }

.hero-data {
  align-self: end;
  padding: 24px;
  border: 1px solid var(--line);
  background: rgba(8, 11, 13, .72);
  backdrop-filter: blur(12px);
}

.data-heading { padding-bottom: 13px; border-bottom: 1px solid var(--line); }
.data-heading i { color: var(--signal); font-style: normal; }
.hero-data dl { margin: 18px 0; }
.hero-data dl div { display: flex; justify-content: space-between; gap: 15px; margin-top: 9px; }
.hero-data dt { color: var(--steel); font-size: 14px; }
.hero-data dd { margin: 0; font-family: var(--tech); font-weight: 700; font-size: 17px; letter-spacing: .04em; }
.data-gauge { height: 3px; margin: 22px 0; background: var(--line); }
.data-gauge span { display: block; width: var(--value); height: 100%; background: var(--signal); }
.hero-data small { color: rgba(255, 255, 255, .7); }

.hero-index {
  position: absolute;
  z-index: 4;
  left: 30px;
  bottom: 24px;
  font-family: var(--tech);
  font-size: 14px;
  letter-spacing: .1em;
}
.hero-index span { color: var(--signal); margin: 0 6px; }

.proof-strip { color: var(--asphalt); background: var(--signal); overflow: hidden; }
.proof-marquee { white-space: nowrap; }
.proof-track {
  width: max-content;
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 14px 0;
  animation: marquee 28s linear infinite;
  font-family: var(--body);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: .01em;
}
.proof-track b { font-size: 8px; }
.proof-set { display: flex; align-items: center; gap: 26px; padding-inline-start: 26px; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(50%); } }

.section-kicker {
  display: flex;
  align-items: center;
  gap: 13px;
  color: var(--blue);
  font-family: var(--body);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0;
}
.section-kicker span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-family: var(--tech);
  font-size: 15px;
  letter-spacing: .04em;
}
.section-kicker--light { color: var(--white); }
.section-kicker--signal { color: var(--signal); }
.section-kicker--dark { color: var(--asphalt); }

.intro { color: var(--asphalt); background: var(--cream); }
/* Decorative gutter rule — only where there is an actual gutter. Below this
   width 8vw lands inside the text column and draws a line through the copy. */
@media (min-width: 1100px) {
  .intro::after {
    content: "";
    position: absolute;
    left: 8vw;
    top: 0;
    width: 1px;
    height: 100%;
    background: var(--line-dark);
  }
}
/* The narrow first column used to hold the section kicker. With the kicker
   gone the copy fell into it and wrapped one word per line. */
.intro-grid { display: grid; grid-template-columns: 1fr; gap: 0 clamp(40px, 8vw, 140px); }
.intro-copy h2, .section-head h2, .packages-heading h2, .about-copy h2, .gallery-head h2, .faq-title h2, .contact-copy h2 {
  font-size: clamp(52px, 6.3vw, 102px);
}
.intro-copy .lead, .about-copy .lead {
  max-width: 850px;
  margin: 38px 0 0;
  font-size: clamp(21px, 2.1vw, 32px);
  line-height: 1.45;
}
.fear-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: clamp(70px, 10vw, 140px);
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
}
.fear-card { position: relative; padding: 42px 35px 46px; }

/* Side dividers only while the cards sit side by side; once they stack, a
   vertical border runs down the column and cuts across the text. */
@media (min-width: 861px) {
  .fear-card + .fear-card { border-inline-start: 1px solid var(--line-dark); }
}
@media (max-width: 860px) {
  .fear-card + .fear-card { border-top: 1px solid var(--line-dark); }
}

/* The fill is a hover affordance. On touch there is no un-hover, so it sticks
   and reads as a selected card — but these are not choices. */
@media (hover: hover) and (pointer: fine) {
  .fear-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--signal);
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform .45s var(--ease);
    z-index: -1;
  }
  .fear-card:hover::before { transform: scaleY(1); }
}

.fear-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  color: var(--blue);
  border: 1px solid currentColor;
  border-radius: 50%;
}
.fear-icon svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fear-card h3 { margin: 26px 0 18px; font-family: var(--display); font-size: clamp(26px, 2.4vw, 38px); font-weight: 400; }
.fear-card p { margin: 0; color: #3d464b; }

.journey { overflow: hidden; }
.journey::before {
  content: "";
  position: absolute;
  right: -10vw;
  bottom: -26vw;
  width: 68vw;
  aspect-ratio: 1;
  border: 1px solid rgba(216, 255, 62, .2);
  border-radius: 50%;
}
.section-head { display: grid; grid-template-columns: 1fr; align-items: start; gap: 40px; }
.section-head h2 { max-width: 960px; }
.journey-layout {
  margin-top: clamp(70px, 9vw, 130px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, .92fr);
  gap: clamp(32px, 4vw, 68px);
  align-items: start;
}
.journey-visual { position: sticky; top: 120px; margin: 0; }
.journey-visual-media {
  position: relative;
  width: calc(100% + 48px);
  margin-inline: -24px;
  background: transparent;
}
.journey-visual img {
  width: 118%;
  max-width: none;
  height: auto;
  margin-inline-start: -9%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: transparent;
  -webkit-mask-image: linear-gradient(to left, #000 62%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to left, #000 62%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-composite: intersect;
}
.journey-visual figcaption, .gallery-item figcaption {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  color: var(--steel);
  font-family: var(--tech);
  font-size: 13px;
  letter-spacing: .1em;
}
.journey-visual figcaption span { color: var(--signal); }
.journey-steps { list-style: none; margin: 0; padding: 0; }
.journey-steps li {
  min-height: 180px;
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 26px;
  padding: 29px 0;
  border-top: 1px solid var(--line);
}
.journey-steps li:last-child { border-bottom: 1px solid var(--line); }
.journey-steps li > span { color: var(--signal); font-family: var(--tech); font-weight: 800; }
.journey-steps h3 { margin: 0 0 10px; font-family: var(--display); font-size: 32px; font-weight: 400; }
.journey-steps p { margin: 0; color: var(--steel); }

/* ---- Customer reviews ---- */
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: clamp(40px, 5vw, 68px);
}
.review-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 26px;
  padding: clamp(26px, 2.6vw, 40px);
  background: var(--white);
  border: 1px solid var(--line-dark);
}
.review-card blockquote {
  margin: 0;
  color: var(--asphalt);
  font-family: var(--display);
  font-size: clamp(19px, 1.6vw, 24px);
  font-weight: 400;
  line-height: 1.45;
}
.review-card blockquote::before { content: "“"; color: var(--blue); }
.review-card blockquote::after { content: "”"; color: var(--blue); }
.review-card figcaption { display: flex; flex-direction: column; gap: 4px; }
.review-card figcaption b { font-size: 17px; font-weight: 800; }
.review-card figcaption span { color: #6b757a; font-family: var(--tech); font-size: 15px; letter-spacing: .06em; }

/* ---- Customer videos ---- */
/* Carousel: three across on desktop with arrows, one at a time on mobile with
   the neighbours peeking so the swipe affordance is obvious. */
.cvideos-carousel { position: relative; margin-top: clamp(40px, 5vw, 68px); }
.cvideos-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 4px;
}
.cvideos-track::-webkit-scrollbar { display: none; }
.cvideo {
  flex: 0 0 calc((100% - 32px) / 3);
  scroll-snap-align: center;
  margin: 0;
  opacity: .45;
  filter: grayscale(1);
  transition: opacity .3s ease, filter .3s ease;
}
/* Only the clip that is actually playing comes up to full colour. */
.cvideo.is-playing { opacity: 1; filter: none; }
@media (hover: hover) and (pointer: fine) {
  .cvideo:not(.is-playing):hover { opacity: .72; }
}

/* The whole frame is the play/pause target. */
.cvideo-toggle {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.cvideo-play {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  color: var(--asphalt);
  background: var(--signal);
  border-radius: 50%;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
  transition: transform .25s var(--ease), opacity .25s ease;
}
.cvideo-play svg { width: 26px; height: 26px; fill: currentColor; margin-inline-start: 3px; }
/* Transform-on-hover targeting a descendant is the same first-tap trap. */
@media (hover: hover) and (pointer: fine) {
  .cvideo-toggle:hover .cvideo-play { transform: scale(1.08); }
}
.cvideo.is-playing .cvideo-play { opacity: 0; transform: scale(.7); }

.cvideo-mute {
  position: absolute;
  z-index: 3;
  bottom: 12px;
  inset-inline-end: 12px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  color: var(--white);
  background: rgba(8, 11, 13, .62);
  border: 1px solid var(--line);
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: .2s ease;
}
.cvideo-mute:hover { color: var(--asphalt); background: var(--signal); border-color: var(--signal); }
.cvideo-mute svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cvideo-mute .icon-sound-off { display: none; }
.cvideo-mute[aria-pressed="true"] .icon-sound-on { display: none; }
.cvideo-mute[aria-pressed="true"] .icon-sound-off { display: block; }

.cvideos-nav {
  position: absolute;
  z-index: 3;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  color: var(--asphalt);
  background: var(--signal);
  border: 0;
  cursor: pointer;
  transition: opacity .2s ease, background .2s ease;
}
.cvideos-nav:hover:not([disabled]) { background: #fff; }
.cvideos-nav[disabled] { opacity: .25; cursor: default; }
.cvideos-nav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cvideos-prev { inset-inline-start: -14px; }
.cvideos-next { inset-inline-end: -14px; }
/* The chevron asset points left; each button turns it to face its own way. */
.cvideos-next svg { transform: rotate(180deg); }
[dir="rtl"] .cvideos-prev svg { transform: rotate(180deg); }
[dir="rtl"] .cvideos-next svg { transform: rotate(0deg); }
.cvideos-carousel.is-static .cvideos-nav { display: none; }
.cvideo-frame {
  position: relative;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  background: var(--asphalt-2);
  border: 1px solid var(--line);
}
.cvideo-frame iframe,
.cvideo-frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}
.cvideo figcaption { margin-top: 12px; color: var(--steel); font-family: var(--tech); font-size: 16px; letter-spacing: .06em; }

@media (max-width: 980px) {
  .reviews-grid { grid-template-columns: repeat(2, 1fr); }
  .cvideo { flex-basis: calc((100% - 16px) / 2); }
}
@media (max-width: 620px) {
  .reviews-grid { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .cvideos-nav { display: none; }
  .cvideos-track { gap: 12px; padding-inline: 13%; }
  .cvideo { flex-basis: 74%; }
}

.packages { background: var(--white); }
.packages-heading { display: grid; grid-template-columns: 1.15fr .55fr; gap: 60px; align-items: end; }
.packages-heading > p { max-width: 440px; margin: 0 0 8px; font-size: 21px; }
.packages-heading h2 { margin-top: 28px; }
.package-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 64px 0 30px; }
.package-filters button {
  padding: 11px 20px;
  border: 1px solid var(--line-dark);
  background: transparent;
  font-weight: 800;
  cursor: pointer;
  transition: .25s ease;
}
.package-filters button:hover, .package-filters button.is-active { color: var(--white); background: var(--blue); border-color: var(--blue); }
/* The Hebrew page has filters between the heading and the deck; the translated
   pages do not, so the deck carries its own top margin and gives it back when
   the filters are present. */
.package-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: clamp(38px, 4.5vw, 64px); }
.package-filters + .package-grid { margin-top: 0; }
.package-card {
  --card-bg: var(--cream);
  --card-fg: var(--asphalt);
  position: relative;
  min-height: 560px;
  display: flex;
  flex-direction: column;
  padding: clamp(25px, 3vw, 40px);
  color: var(--card-fg);
  background: var(--card-bg);
  border: 1px solid transparent;
  overflow: hidden;
  transition: transform .35s var(--ease), box-shadow .35s ease;
}
.package-card::before {
  content: "";
  position: absolute;
  left: -50%;
  bottom: -78%;
  width: 120%;
  aspect-ratio: 1;
  border: 1px solid currentColor;
  border-radius: 50%;
  opacity: .09;
  transition: transform .7s var(--ease);
}
.package-card:hover { transform: translateY(-8px); box-shadow: 0 24px 50px rgba(8, 11, 13, .14); }
.package-card:hover::before { transform: scale(1.2) rotate(12deg); }
.package-card.is-hidden { display: none; }
.package-card--taxi { --card-bg: #e7ebee; }
.package-card--featured { --card-bg: var(--signal); }
.package-card--dark { --card-bg: var(--asphalt); --card-fg: var(--white); }
.package-card--group { --card-bg: var(--blue); --card-fg: var(--white); }
.popular-label {
  position: absolute;
  left: 0;
  top: 0;
  padding: 7px 14px;
  color: var(--white);
  background: var(--asphalt);
  font-size: 12px;
  font-weight: 800;
}
.package-top { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; }
.package-top > span { font-family: var(--tech); font-size: 58px; font-weight: 800; font-style: italic; line-height: 1; }
.package-top small { font-family: var(--tech); font-weight: 700; letter-spacing: .12em; opacity: .65; }
.package-purpose { margin-top: 60px; font-family: var(--display); font-size: clamp(27px, 2.2vw, 36px); line-height: 1.1; }
.package-price { display: flex; align-items: flex-start; gap: 7px; margin-top: 16px; }
.package-price b { font-family: var(--tech); font-size: clamp(52px, 5vw, 76px); line-height: 1; }
.package-price span { margin-top: 6px; font-weight: 800; }
.package-price--quote { align-items: end; gap: 10px; }
.package-price--quote b { font-family: var(--display); font-size: 46px; }
.package-price--quote span { margin-bottom: 7px; }
.package-card ul { list-style: none; margin: 26px 0 38px; padding: 0; }
.package-card li { position: relative; padding: 8px 22px 8px 0; border-bottom: 1px solid currentColor; border-color: color-mix(in srgb, currentColor 18%, transparent); }
.package-card li::before { content: "+"; position: absolute; right: 0; color: var(--blue); font-family: var(--tech); font-weight: 800; }
.package-card--dark li::before, .package-card--group li::before { color: var(--signal); }
.package-cta {
  position: relative;
  z-index: 1;
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 54px;
  padding: 0 18px;
  border: 1px solid currentColor;
  font-weight: 800;
  transition: color .25s, background .25s;
}
.package-cta span { font-family: var(--tech); font-size: 22px; }
.package-cta:hover { color: var(--white); background: var(--blue); border-color: var(--blue); }
.package-card--dark .package-cta:hover, .package-card--group .package-cta:hover { color: var(--asphalt); background: var(--signal); border-color: var(--signal); }
.package-note { margin: 22px 0 0; color: #667077; font-size: 14px; }

.about { overflow: hidden; }
.about::before {
  content: "555";
  position: absolute;
  left: -2vw;
  bottom: -9vw;
  color: rgba(255, 255, 255, .05);
  font-family: var(--tech);
  font-size: 38vw;
  font-weight: 800;
  line-height: .7;
}
.about-grid { display: grid; grid-template-columns: .7fr 1fr; gap: clamp(55px, 9vw, 150px); align-items: center; }
.about-image { position: relative; }
.about-image img { width: 100%; max-height: 820px; object-fit: cover; object-position: center 64%; filter: saturate(.78) contrast(1.05); }
.image-stamp {
  position: absolute;
  left: -28px;
  bottom: 48px;
  width: 130px;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--asphalt);
  background: var(--signal);
  transform: rotate(-7deg);
}
.image-stamp b { font-family: var(--tech); font-size: 50px; line-height: .8; }
.image-stamp span { margin-top: 9px; font-family: var(--tech); font-size: 11px; font-weight: 800; line-height: 1; text-align: center; }
.about-copy h2 { margin-top: 34px; }
.about-copy .lead { font-size: clamp(20px, 1.8vw, 28px); }
.about-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin: 52px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.about-stats > div { padding: 24px 15px; }
.about-stats > div + div { border-right: 1px solid var(--line); }
.about-stats strong { display: block; color: var(--signal); font-family: var(--tech); font-size: clamp(32px, 3.3vw, 52px); line-height: 1; white-space: nowrap; }
.about-stats span { display: block; margin-top: 9px; color: rgba(255, 255, 255, .72); font-size: 14px; line-height: 1.3; }
.about blockquote { margin: 0 0 32px; padding: 0 25px 0 0; border-right: 3px solid var(--signal); font-size: 20px; }

.gallery { padding-bottom: 0; }
.gallery-head { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 45px; }
.gallery-head .text-link { margin-bottom: 12px; }
.gallery-grid { margin-top: 78px; display: grid; grid-template-columns: 1.25fr .75fr .75fr; grid-template-rows: 330px 330px; gap: 12px; }
.gallery-item { position: relative; margin: 0; overflow: hidden; }
.gallery-item--wide { grid-row: 1 / 3; }
.gallery-item--tall { grid-row: 1 / 3; grid-column: 3; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease), filter .5s; filter: saturate(.82); }
.gallery-item:hover img { transform: scale(1.04); filter: saturate(1); }
.gallery-item figcaption {
  position: absolute;
  inset: auto 0 0;
  margin: 0;
  padding: 30px 17px 14px;
  color: var(--white);
  background: linear-gradient(transparent, rgba(8, 11, 13, .78));
}

.gallery-transition {
  min-height: clamp(70px, 6vw, 96px);
  background: var(--asphalt);
}

.routes {
  padding-top: clamp(50px, 6vw, 86px);
}
.routes-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.route-card { min-height: 700px; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(30px, 5vw, 72px); overflow: hidden; transition: transform .45s var(--ease), box-shadow .45s ease; }
.route-card--gift { color: var(--asphalt); background: var(--cream); }
.route-card--team { color: var(--white); background: var(--blue); }
.route-index { font-family: var(--tech); font-size: 17px; font-weight: 800; letter-spacing: .1em; }
.route-card h2 { font-size: clamp(48px, 5.5vw, 84px); }
.route-card p { max-width: 560px; margin: 30px 0; font-size: 20px; }

@media (hover: hover) {
  .route-card:hover { z-index: 1; transform: translateY(-8px); box-shadow: 0 28px 70px rgba(0, 0, 0, .28); }
}

.faq { background: var(--white); }
.faq-grid { display: grid; grid-template-columns: .65fr 1fr; gap: clamp(70px, 10vw, 160px); align-items: start; }
.faq-title { position: sticky; top: 125px; }
.faq-title h2 { margin-top: 28px; }
.faq-title p { max-width: 400px; margin-top: 35px; }
.faq-list { border-top: 1px solid var(--line-dark); }
.faq-list details { border-bottom: 1px solid var(--line-dark); }
.faq-list summary {
  position: relative;
  list-style: none;
  padding: 27px 0 27px 55px;
  font-family: var(--display);
  font-size: clamp(22px, 2vw, 30px);
  cursor: pointer;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary span, .faq-list summary span::after {
  position: absolute;
  left: 6px;
  top: 50%;
  width: 22px;
  height: 2px;
  background: var(--blue);
  transform: translateY(-50%);
  transition: transform .3s var(--ease);
}
.faq-list summary span::after { content: ""; left: 0; top: 0; transform: rotate(90deg); }
.faq-list details[open] summary span::after { transform: rotate(0); }
.faq-list details p { max-width: 700px; margin: -5px 0 30px; color: #4d575e; }

.contact { color: var(--asphalt); overflow: hidden; }
.contact::before {
  content: "";
  position: absolute;
  left: -12vw;
  top: -22vw;
  width: 60vw;
  aspect-ratio: 1;
  border: 1px solid rgba(8, 11, 13, .22);
  border-radius: 50%;
}
.contact-grid { display: grid; grid-template-columns: 1fr .7fr; gap: clamp(60px, 9vw, 140px); align-items: start; }
.contact-copy h2 { margin-top: 28px; }
.contact-copy h2 em { color: var(--blue); }
.contact-direct { display: flex; gap: 45px; margin-top: 62px; }
.contact-direct a { display: flex; flex-direction: column; border-bottom: 1px solid var(--asphalt); padding-bottom: 8px; }
.contact-direct span { font-size: 13px; font-weight: 800; }
.contact-direct b { font-family: var(--tech); font-size: 23px; }
.lead-form { position: relative; z-index: 1; padding: clamp(28px, 4vw, 52px); background: var(--white); box-shadow: 0 32px 80px rgba(8, 11, 13, .16); }
.form-heading { margin-bottom: 40px; padding-bottom: 14px; border-bottom: 1px solid var(--line-dark); }
.form-heading b { color: var(--blue); }
.lead-form label:not(.consent) { display: block; margin-top: 22px; }
.lead-form label > span { display: block; margin-bottom: 7px; font-size: 14px; font-weight: 800; }
.lead-form input:not([type="checkbox"]), .lead-form select, .lead-form textarea {
  width: 100%;
  min-height: 52px;
  padding: 10px 13px;
  color: var(--asphalt);
  background: #f2f3f1;
  border: 1px solid transparent;
  border-radius: 0;
  transition: border-color .2s, background .2s;
}
.lead-form textarea { resize: vertical; }
.lead-form input:focus, .lead-form select:focus, .lead-form textarea:focus { border-color: var(--blue); background: var(--white); outline: 0; }
.form-row { display: grid; grid-template-columns: 1fr .5fr; gap: 12px; }
.consent { display: flex; align-items: start; gap: 10px; margin: 20px 0; cursor: pointer; }
.consent input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--blue); }
.consent span { font-size: 13px; }
.form-status { min-height: 22px; margin: 10px 0 0; color: var(--blue); font-size: 14px; font-weight: 800; }

.site-footer { padding: 80px 0 28px; color: var(--white); background: var(--asphalt); }
.footer-top { display: grid; grid-template-columns: .7fr 1fr .7fr .7fr; gap: 60px; align-items: start; }
.brand--footer { width: 210px; }
.footer-top > p { margin: 0; font-family: var(--display); font-size: clamp(28px, 3vw, 42px); line-height: 1.1; }
.footer-links, .footer-social { display: flex; flex-direction: column; gap: 8px; }
.footer-links a, .footer-social a { color: var(--steel); }
.footer-links a:hover, .footer-social a:hover { color: var(--signal); }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; margin-top: 80px; padding-top: 22px; border-top: 1px solid var(--line); color: #7f8a91; font-family: var(--tech); font-size: 13px; letter-spacing: .04em; }

.mobile-dock { display: none; }

.error-page {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 40px 24px;
  color: var(--white);
  background:
    radial-gradient(circle at 15% 20%, rgba(10, 63, 123, .7), transparent 38%),
    var(--asphalt);
  text-align: center;
}
.error-page img { width: min(240px, 70vw); }
.error-page > p { color: var(--signal); font-family: var(--tech); font-weight: 800; letter-spacing: .12em; }
.error-page h1 { margin: 10px 0 24px; font-family: var(--display); font-size: clamp(52px, 10vw, 110px); font-weight: 400; line-height: .95; }
.error-page h1 em { color: var(--signal); font-family: var(--tech); font-style: italic; }

.js .reveal {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.js .reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 1100px) {
  :root { --container: min(100% - 40px, 960px); }
  .header-inner { grid-template-columns: 190px 1fr auto; }
  .desktop-nav { gap: 18px; }
  .hero-inner { grid-template-columns: 1fr 300px; gap: 45px; }
  .package-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-head { grid-template-columns: .35fr 1fr; }
  .gallery-head .text-link { grid-column: 2; justify-self: start; }
  .about-grid { grid-template-columns: .75fr 1fr; gap: 60px; }
  .contact-grid { grid-template-columns: 1fr .8fr; gap: 60px; }
}

@media (max-width: 850px) {
  :root { --header-height: 70px; --container: min(100% - 32px, 720px); }
  body { font-size: 17px; padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
  .desktop-nav, .header-cta { display: none; }
  .header-inner { grid-template-columns: 1fr auto; }
  .brand { width: 200px; }
  .menu-toggle { display: flex; }
  .hero-inner { display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; gap: 35px; padding-top: 120px; padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
  .hero-media img { object-position: 53% center; }
  .hero-shade { background: linear-gradient(180deg, rgba(8,11,13,.34) 0%, rgba(8,11,13,.22) 26%, rgba(8,11,13,.94) 68%, var(--asphalt) 100%); }
  .hero-trackline { left: -18vw; top: 8vh; width: 70vw; height: 54vh; }
  .hero h1 { font-size: clamp(54px, 13.4vw, 88px); }
  .hero-copy > p { margin-top: 22px; }
  .hero-data { display: none; }
  .hero-index { display: none; }
  .intro-grid, .section-head, .packages-heading, .about-grid, .faq-grid, .contact-grid { grid-template-columns: 1fr; }
  .intro-grid { gap: 32px; }
  .fear-grid { grid-template-columns: 1fr; margin-top: 65px; }
  .fear-card + .fear-card { border-right: 0; border-top: 1px solid var(--line-dark); }
  .fear-card { padding-inline: 0; }
  .journey-layout { grid-template-columns: 1fr; }
  .journey-visual { position: relative; top: auto; }
  .journey-visual-media { width: 100%; margin-inline: 0; }
  .journey-visual img { height: auto; min-height: 0; }
  .packages-heading { gap: 25px; }
  .package-grid { grid-template-columns: 1fr 1fr; }
  .about-grid { gap: 70px; }
  .about-image { width: min(520px, 88%); margin-inline: auto; }
  .about-stats { margin-block: 38px; }
  .gallery-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 360px 260px 260px; }
  .gallery-item--wide { grid-column: 1 / 3; grid-row: 1; }
  .gallery-item--tall { grid-column: 1; grid-row: 2 / 4; }
  .routes-grid { grid-template-columns: 1fr; }
  .route-card { min-height: 610px; }
  .faq-title { position: static; }
  .contact-grid { gap: 65px; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .mobile-dock {
    position: fixed;
    z-index: 90;
    left: 0;
    right: 0;
    bottom: 0;
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    padding: 7px max(7px, env(safe-area-inset-left)) max(7px, env(safe-area-inset-bottom));
    color: var(--white);
    background: rgba(8,11,13,.94);
    border-top: 1px solid var(--line);
    backdrop-filter: blur(14px);
  }
  .mobile-dock a { min-height: 50px; display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 800; }
  .mobile-dock-wa { color: #fff; background: var(--whatsapp); }
}

@media (max-width: 620px) {
  :root { --container: calc(100% - 24px); }
  .section { padding: 72px 0; }
  .hero { min-height: max(760px, 100svh); }
  .hero-inner { min-height: max(760px, 100svh); padding-top: 100px; padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
  .hero h1 { font-size: clamp(48px, 13.6vw, 62px); }
  .hero-copy > p { font-size: 16px; line-height: 1.55; }
  .hero-actions { margin-top: 26px; }
  .hero-actions .button { display: none; }
  .text-link { align-self: flex-start; }
  .section-kicker { font-size: 16px; }
  .intro-copy h2, .section-head h2, .packages-heading h2, .about-copy h2, .gallery-head h2, .faq-title h2, .contact-copy h2 { font-size: clamp(42px, 11.7vw, 58px); }
  .intro-copy .lead, .about-copy .lead { font-size: 19px; }
  .fear-grid { margin-top: 48px; }
  .fear-card { padding-block: 32px; }
  .fear-card h3 { margin-top: 28px; }
  .journey-layout { margin-top: 44px; gap: 36px; }
  .journey-visual-media::after {
    background:
      linear-gradient(90deg, var(--asphalt) 0, transparent 4%, transparent 96%, var(--asphalt) 100%),
      linear-gradient(180deg, var(--asphalt) 0, transparent 4%, transparent 90%, var(--asphalt) 100%);
    box-shadow: inset 0 0 24px 5px rgba(8, 11, 13, .58);
  }
  .journey-steps li { grid-template-columns: 42px 1fr; gap: 16px; }
  .journey-steps h3 { font-size: 25px; }
  .package-filters { display: grid; grid-template-columns: 1fr 1fr; margin: 42px 0 24px; }
  .package-filters button { min-height: 46px; padding: 8px; }
  .package-grid { grid-template-columns: 1fr; }
  .package-card { min-height: 455px; padding: 26px 22px; }
  .package-purpose { margin-top: 42px; }
  .package-card ul { margin: 20px 0 28px; }
  .package-top > span { font-size: 52px; }
  .about-grid { gap: 48px; }
  .about-image { width: 100%; }
  .about-image img { max-height: 580px; }
  .image-stamp { left: -8px; bottom: 28px; width: 105px; }
  .about-stats { grid-template-columns: 1fr; }
  .about-stats > div { display: grid; grid-template-columns: 120px 1fr; align-items: center; gap: 22px; }
  .about-stats > div + div { border-right: 0; border-top: 1px solid var(--line); }
  .about-stats span { margin: 0; }
  .gallery-head { grid-template-columns: 1fr; }
  .gallery-head .text-link { grid-column: auto; }
  .gallery-grid { margin-top: 42px; grid-template-columns: 1fr; grid-template-rows: 260px 390px 230px 230px; gap: 9px; }
  .gallery-item--wide, .gallery-item--tall { grid-column: auto; grid-row: auto; }
  .gallery-transition { min-height: 64px; }
  .routes { padding-top: 42px; }
  .route-card { min-height: 490px; padding: 28px 22px; }
  .route-card h2 { font-size: 48px; }
  .route-card p { font-size: 18px; }
  .faq-grid { gap: 50px; }
  .faq-list summary { min-height: 68px; padding: 21px 0 21px 40px; font-size: 21px; }
  .contact-grid { gap: 46px; }
  .contact-direct { flex-direction: column; gap: 22px; margin-top: 38px; }
  .contact-direct b { overflow-wrap: anywhere; }
  .lead-form { margin-inline: 0; padding: 26px 18px; }
  .lead-form input:not([type="checkbox"]), .lead-form select, .lead-form textarea { min-height: 54px; font-size: 16px; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .site-footer { padding-top: 64px; }
  .footer-top { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; gap: 10px; margin-top: 45px; }
  .mobile-menu { padding: calc(var(--header-height) + 24px) 20px 24px; }
  .mobile-menu a { min-height: 58px; padding: 10px 0; }
}

@media (max-width: 380px) {
  :root { --container: calc(100% - 20px); }
  .section { padding: 64px 0; }
  .hero h1 { font-size: 46px; }
  .intro-copy h2, .section-head h2, .packages-heading h2, .about-copy h2, .gallery-head h2, .faq-title h2, .contact-copy h2 { font-size: 40px; }
  .package-card { min-height: 435px; }
  .package-price b { font-size: 58px; }
  .route-card { min-height: 455px; }
  .route-card h2 { font-size: 44px; }
  .contact-direct b { font-size: 20px; }
}

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


/* ---------- Booking ---------- */
.booking-lead { max-width: 620px; margin: 26px 0 0; color: var(--steel); font-size: 20px; }
.booking-layout {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 14px;
  margin-top: clamp(46px, 6vw, 78px);
  align-items: start;
}
.booking-rail { display: grid; gap: 14px; }
.booking-panel {
  padding: clamp(22px, 2.4vw, 34px);
  background: var(--asphalt-2);
  border: 1px solid var(--line);
}
.booking-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 26px;
}
.booking-panel-head small { color: var(--steel); font-family: var(--tech); font-size: 15px; letter-spacing: .06em; }
.booking-step { display: flex; align-items: baseline; gap: 12px; }
.booking-step > span {
  color: var(--signal);
  font-family: var(--tech);
  font-size: 22px;
  font-weight: 800;
  font-style: italic;
}
.booking-step h3 { margin: 0; color: var(--white); font-family: var(--display); font-size: 26px; font-weight: 400; }

.cal-nav { display: flex; align-items: center; gap: 10px; }
.cal-nav strong {
  min-width: 148px;
  color: var(--white);
  font-family: var(--tech);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: .04em;
  text-align: center;
}
.cal-nav button {
  width: 44px;
  height: 44px;
  color: var(--white);
  background: transparent;
  border: 1px solid var(--line);
  cursor: pointer;
  transition: .25s ease;
}
.cal-nav button:hover:not(:disabled) { color: var(--asphalt); background: var(--signal); border-color: var(--signal); }
.cal-nav button:disabled { opacity: .3; cursor: not-allowed; }

.cal-weekdays, .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-weekdays {
  margin-bottom: 8px;
  color: var(--steel);
  font-family: var(--tech);
  font-size: 14px;
  letter-spacing: .1em;
  text-align: center;
}
.cal-day {
  position: relative;
  min-height: 64px;
  padding: 8px 0 0;
  color: var(--white);
  background: transparent;
  border: 1px solid var(--line);
  font-family: var(--tech);
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: .2s ease;
}
.cal-day.is-blank { border-color: transparent; cursor: default; }
.cal-day em {
  display: block;
  margin-top: 7px;
  font-family: var(--body);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: .02em;
  opacity: .75;
}
.cal-day--open { border-color: color-mix(in srgb, var(--signal) 42%, transparent); }
.cal-day--open:hover, .cal-day--few:hover { color: var(--asphalt); background: var(--signal); border-color: var(--signal); }
.cal-day--few em { color: var(--signal); opacity: 1; }
.cal-day:disabled { color: rgba(255, 255, 255, .22); border-color: rgba(255, 255, 255, .07); cursor: not-allowed; }
.cal-day:disabled em { opacity: .55; }
.cal-day.is-selected { color: var(--asphalt); background: var(--signal); border-color: var(--signal); }
.cal-day.is-selected em { opacity: .8; }

.cal-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 22px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  color: var(--steel);
  font-size: 14px;
}
.cal-legend span { display: inline-flex; align-items: center; gap: 9px; }
.cal-legend-note { margin-inline-start: auto; font-family: var(--tech); letter-spacing: .08em; }
.legend { width: 11px; height: 11px; }
.legend--open { background: var(--signal); }
.legend--few { background: color-mix(in srgb, var(--signal) 40%, transparent); }
.legend--none { background: rgba(255, 255, 255, .12); }

.slot-grid { display: block; }
.slot-empty { margin: 0; color: var(--steel); font-size: 16px; }

/* A full day of 30-minute starts is a long list, so it is grouped by part of
   the day and scrolls inside the panel instead of stretching it. */
.slot-groups {
  display: grid;
  gap: 20px;
  max-height: 430px;
  overflow-y: auto;
  padding-inline-end: 6px;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.slot-groups::-webkit-scrollbar { width: 6px; }
.slot-groups::-webkit-scrollbar-thumb { background: var(--line); }
.slot-group-title {
  margin: 0 0 9px;
  color: var(--steel);
  font-family: var(--tech);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .12em;
}
.slot-group-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.slot-group-grid .slot {
  align-items: center;
  justify-content: center;
  gap: 0;
  min-height: 46px;
  padding: 10px 4px;
  text-align: center;
}
.slot-group-grid .slot b { font-size: 19px; }
.slot {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 66px;
  padding: 11px 15px;
  color: var(--white);
  background: transparent;
  border: 1px solid var(--line);
  text-align: start;
  cursor: pointer;
  transition: .2s ease;
}
.slot b { font-family: var(--tech); font-size: 23px; font-weight: 700; line-height: 1; }
.slot span { color: var(--steel); font-size: 12px; }
.slot:hover:not(:disabled) { border-color: var(--signal); }
.slot.is-selected { color: var(--asphalt); background: var(--signal); border-color: var(--signal); }
.slot.is-selected span { color: rgba(8, 11, 13, .7); }
.slot:disabled { color: rgba(255, 255, 255, .24); border-color: rgba(255, 255, 255, .07); cursor: not-allowed; }
.slot:disabled span { color: rgba(255, 255, 255, .24); }

.booking-packages { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 22px; }
.booking-packages button {
  padding: 9px 15px;
  color: var(--white);
  background: transparent;
  border: 1px solid var(--line);
  font-family: var(--tech);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .04em;
  cursor: pointer;
  transition: .2s ease;
}
.booking-packages button:hover { border-color: var(--signal); }
.booking-packages button.is-active { color: var(--asphalt); background: var(--signal); border-color: var(--signal); }

.booking-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.booking-field { display: flex; flex-direction: column; gap: 7px; }
.booking-field--wide { grid-column: 1 / -1; }
.booking-field span { color: var(--steel); font-family: var(--tech); font-size: 15px; letter-spacing: .08em; }
.booking-field input {
  min-height: 50px;
  padding: 0 14px;
  color: var(--white);
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--line);
  transition: border-color .2s ease;
}
.booking-field input:focus { border-color: var(--signal); outline: none; }

.booking-summary { margin: 24px 0 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.booking-summary > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 7px 0; }
.booking-summary dt { color: var(--steel); font-size: 15px; }
.booking-summary dd { margin: 0; color: var(--white); font-weight: 700; text-align: end; }
.booking-summary-total { margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.booking-summary-total dd { font-family: var(--tech); font-size: 34px; line-height: 1; }
.booking-status { min-height: 20px; margin: 12px 0 0; color: var(--signal); font-size: 14px; font-weight: 700; }

.booking-confirm { padding: clamp(26px, 3vw, 40px); color: var(--asphalt); background: var(--signal); }
.booking-confirm-tag { font-family: var(--tech); font-size: 14px; font-weight: 800; letter-spacing: .18em; }
.booking-confirm h3 { margin: 12px 0 10px; font-family: var(--display); font-size: 34px; font-weight: 400; }
.booking-confirm p { margin: 0; font-weight: 600; }
.booking-confirm-note { margin-top: 10px !important; font-size: 15px; font-weight: 500 !important; opacity: .78; }
.booking-confirm-ref {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin: 22px 0;
  padding-top: 16px;
  border-top: 1px solid rgba(8, 11, 13, .25);
}
.booking-confirm-ref span { font-size: 14px; font-weight: 700; }
.booking-confirm-ref b { font-family: var(--tech); font-size: 26px; letter-spacing: .06em; }
.booking-confirm-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.booking-confirm-actions .button--signal { color: var(--signal); background: var(--asphalt); }
.booking-confirm-actions .button--signal:hover { color: var(--asphalt); background: var(--white); }
.booking-confirm-actions .text-link--light { color: var(--asphalt); background: transparent; border: 0; cursor: pointer; }

@media (max-width: 1100px) {
  .booking-layout { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .booking-lead { font-size: 18px; }
  .booking-panel-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .cal-nav { width: 100%; justify-content: space-between; }
  .cal-day { min-height: 56px; font-size: 20px; }
  .cal-day em { display: none; }
  .booking-fields { grid-template-columns: 1fr; }
  .slot-group-grid { grid-template-columns: repeat(3, 1fr); }
  .slot-groups { max-height: none; overflow-y: visible; padding-inline-end: 0; }
  .cal-legend-note { margin-inline-start: 0; }
}

.booking-includes { margin-top: clamp(38px, 4vw, 56px); padding-top: 30px; border-top: 1px solid var(--line); }
.booking-includes h3 {
  margin: 0 0 22px;
  color: var(--signal);
  font-family: var(--tech);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .14em;
}
.booking-includes ul {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px 30px;
  margin: 0;
  padding: 0;
}
.booking-includes li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; }
.booking-includes li b {
  color: var(--signal);
  font-family: var(--tech);
  font-size: 20px;
  font-style: italic;
  font-weight: 800;
  line-height: 1.3;
}
.booking-includes li span { color: var(--steel); font-size: 16px; line-height: 1.5; }
.booking-includes-note { margin: 26px 0 0; color: rgba(169, 177, 183, .75); font-size: 14px; }
.package-cta.is-picked { color: var(--white); background: var(--blue); border-color: var(--blue); }

@media (max-width: 1100px) { .booking-includes ul { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .booking-includes ul { grid-template-columns: 1fr; gap: 16px; } }

.package-card--top { --card-bg: var(--navy); --card-fg: var(--white); }
.package-card--top li::before { color: var(--signal); }
.package-card--top .package-cta:hover { color: var(--asphalt); background: var(--signal); border-color: var(--signal); }

.package-addon {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  margin-top: 14px;
  padding: clamp(30px, 3.4vw, 48px);
  color: var(--white);
  background: var(--asphalt);
  border-inline-start: 6px solid var(--signal);
}
.package-addon-tag {
  display: inline-block;
  margin-bottom: 16px;
  padding: 6px 13px;
  color: var(--asphalt);
  background: var(--signal);
  font-family: var(--tech);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .18em;
}
.package-addon-body h3 { margin: 0 0 12px; font-family: var(--display); font-size: clamp(28px, 2.6vw, 38px); font-weight: 400; line-height: 1.15; }
.package-addon-body p { margin: 0; max-width: 62ch; color: var(--steel); font-size: 17px; }
.package-addon-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding-bottom: 4px;
  color: var(--signal);
  font-weight: 800;
  border-bottom: 1px solid currentColor;
}
.package-addon-link span { font-family: var(--tech); font-size: 20px; }
.package-addon-price {
  padding-inline-start: clamp(24px, 3vw, 46px);
  border-inline-start: 1px solid var(--line);
  text-align: start;
}
.package-addon-price .package-price { margin-top: 0; color: var(--signal); }
.package-addon-price small { display: block; margin-top: 10px; color: var(--steel); font-size: 14px; }

.booking-addon {
  display: grid;
  grid-template-columns: 20px 1fr auto;
  gap: 14px;
  align-items: center;
  margin-top: 18px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  cursor: pointer;
  transition: border-color .2s ease;
}
.booking-addon:hover { border-color: var(--signal); }
.booking-addon input { width: 18px; height: 18px; accent-color: var(--signal); }
.booking-addon-copy { display: flex; flex-direction: column; gap: 3px; }
.booking-addon-copy b { color: var(--white); font-size: 16px; }
.booking-addon-copy small { color: var(--steel); font-size: 13px; }
.booking-addon-price { color: var(--signal); font-family: var(--tech); font-size: 21px; font-weight: 700; }

@media (max-width: 720px) {
  .package-addon { grid-template-columns: 1fr; gap: 14px; }
  .booking-addon { grid-template-columns: 20px 1fr; }
  .booking-addon-price { grid-column: 2; }
}

@media (max-width: 860px) {
  .package-addon { grid-template-columns: 1fr; }
  .package-addon-price { padding-inline-start: 0; padding-top: 22px; border-inline-start: 0; border-top: 1px solid var(--line); }
}

/* header: logo left, navigation right */
.header-inner {
  direction: ltr;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 30px;
}
.header-inner > .brand { margin-inline-end: auto; }
.desktop-nav { justify-self: auto; }
[dir="rtl"] .desktop-nav { direction: rtl; }
[dir="rtl"] .header-cta { direction: rtl; }
[dir="rtl"] .mobile-menu, [dir="rtl"] .mobile-menu nav { direction: rtl; }

/* packages: swipe deck on phones */
.package-swipe-hint { display: none; }
@media (max-width: 720px) {
  .package-grid {
    display: flex;
    grid-template-columns: none;
    gap: 12px;
    /* Full-bleed to the screen edges. The gutter changes with the breakpoint,
       so derive it (100vw - container width) instead of hardcoding 20px —
       that overshot on narrow phones and scrolled the whole page sideways. */
    margin-inline: calc((100% - 100vw) / 2);
    padding: 4px calc((100vw - 100%) / 2) 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .package-grid::-webkit-scrollbar { display: none; }
  .package-card {
    flex: 0 0 82%;
    min-height: 430px;
    scroll-snap-align: center;
  }
  .package-swipe-hint {
    display: block;
    margin: 0;
    color: #667077;
    font-family: var(--tech);
    font-size: 15px;
    letter-spacing: .1em;
  }
}

/* booking: step wizard on phones */
.booking-progress, .booking-stepnav { display: none; }
@media (max-width: 860px) {
  .booking-progress {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin: 34px 0 18px;
    padding: 0;
  }
  .booking-progress li {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 11px 12px;
    color: var(--steel);
    border-top: 2px solid var(--line);
  }
  .booking-progress li b { font-family: var(--tech); font-size: 19px; font-weight: 800; font-style: italic; }
  .booking-progress li span { font-size: 13px; }
  .booking-progress li.is-active { color: var(--signal); border-top-color: var(--signal); }
  .booking-progress li.is-done { color: var(--white); border-top-color: rgba(216, 255, 62, .45); }

  .booking-layout { margin-top: 0; }
  .booking-layout[data-step="1"] [data-step]:not([data-step="1"]),
  .booking-layout[data-step="2"] [data-step]:not([data-step="2"]),
  .booking-layout[data-step="3"] [data-step]:not([data-step="3"]) { display: none; }

  .booking-stepnav {
    position: sticky;
    bottom: calc(72px + env(safe-area-inset-bottom));
    z-index: 40;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    margin-top: 14px;
    padding: 10px;
    background: rgba(8, 11, 13, .94);
    backdrop-filter: blur(10px);
    border: 1px solid var(--line);
  }
  .booking-stepnav-back, .booking-stepnav-next { min-height: 50px; }
  .booking-stepnav-back {
    min-height: 54px;
    padding: 0 22px;
    color: var(--white);
    background: transparent;
    border: 1px solid var(--line);
    font-weight: 800;
    cursor: pointer;
  }
  .booking-stepnav-back:disabled { opacity: .35; cursor: not-allowed; }
  .booking-stepnav-next:disabled { opacity: .4; pointer-events: none; }
  .booking-stepnav-next { justify-content: center; }
  .booking-stepnav[hidden] { display: none; }
}

/* journey: car lifts off the page and overlaps the steps */
.journey-visual { z-index: 3; margin-inline-end: -6%; margin-top: clamp(-90px, -5vw, -40px); pointer-events: none; }
.journey-visual figcaption { pointer-events: auto; }
.journey-steps { position: relative; z-index: 1; }
.journey-steps li > div { position: relative; z-index: 2; }

@media (max-width: 900px) {
  .journey-visual { margin-inline-end: 0; margin-top: -104px; }
  .journey-visual img { width: 112%; margin-inline-start: -6%; filter: drop-shadow(0 26px 30px rgba(0, 0, 0, .7)); }
}

.package-addon-was {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  color: var(--steel);
  text-decoration: line-through;
  text-decoration-color: rgba(216, 255, 62, .8);
  text-decoration-thickness: 2px;
}
.package-addon-was b { font-family: var(--tech); font-size: 34px; font-weight: 700; line-height: 1; }
.package-addon-was span { margin-top: 2px; font-size: 15px; font-weight: 700; }
.package-addon-price .package-price { margin-top: 6px; }

.booking-flow { position: relative; }

/* ---------- Motion layer ---------- */
.js .word-anim {
  display: inline-block;
  /* The headings run at line-height .92, so an inline-block box sized to the
     line box clips Hebrew ascenders and finals inside the overflow:hidden
     sections. Pad the box out and pull the layout back with a matching
     negative margin. */
  padding-block: .18em;
  margin-block: -.18em;
  opacity: 0;
  transform: translateY(.42em);
  transition: opacity .62s var(--ease), transform .62s var(--ease);
  transition-delay: calc(var(--i, 0) * 42ms);
  will-change: opacity, transform;
}
.js .is-lit .word-anim { opacity: 1; transform: none; }

.js .stagger { transition-delay: calc(var(--i, 0) * 85ms) !important; }

.data-gauge span { width: 0; transition: width 1.5s var(--ease) .2s; }
.data-gauge.is-lit span { width: var(--value); }

.count-up { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .js .word-anim { opacity: 1; transform: none; transition: none; }
  .data-gauge span { width: var(--value); transition: none; }
}

/* journey steps: ghost numeral + lime icon + copy */
.journey-steps li {
  grid-template-columns: 68px 52px 1fr;
  gap: 16px;
  align-items: center;
  min-height: 0;
  padding: 26px 0;
}
.journey-steps li > span:first-child {
  color: transparent;
  font-size: clamp(46px, 4.4vw, 62px);
  font-weight: 800;
  font-style: italic;
  line-height: .9;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, .3);
  transition: -webkit-text-stroke-color .3s ease;
}
.journey-steps li:hover > span:first-child { -webkit-text-stroke-color: var(--signal); }
.step-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
}
.step-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform .35s var(--ease);
}
.journey-steps li:hover .step-icon img { transform: scale(1.08); }
.journey-steps h3 { margin: 0 0 6px; font-size: clamp(24px, 2.1vw, 30px); }
.journey-steps p { font-size: 16px; }

/* On narrow screens the ghost numeral sat hard against the container edge and
   the columns left more air than the copy needed. */
@media (max-width: 620px) {
  .journey-steps li {
    grid-template-columns: 44px 38px 1fr;
    gap: 12px;
    padding: 22px 0;
    padding-inline-start: 6px;
  }
  .journey-steps li > span:first-child { font-size: 36px; }
  .step-icon { width: 38px; height: 38px; }
  .journey-steps h3 { font-size: 22px; }
  .journey-steps p { font-size: 15px; }
}

@media (max-width: 900px) {
  .journey-visual { margin-inline-end: 0; margin-top: -104px; }
  .journey-visual img { width: 112%; margin-inline-start: -6%; }
  .journey-steps li { grid-template-columns: 62px 48px 1fr; gap: 16px; padding: 20px 0; }
  .journey-steps li > span:first-child { font-size: 40px; }
  .step-icon { width: 48px; height: 48px; }
}

/* journey: drift-line shot fills the right half of the section */
.journey { position: relative; overflow: hidden; }
.journey > .container { position: relative; z-index: 2; }
.journey-bg {
  position: absolute;
  inset: 0 0 0 auto;
  width: 66%;
  pointer-events: none;
}
.journey-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 62% center; }
.journey-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to left, rgba(8, 11, 13, 0) 18%, rgba(8, 11, 13, .45) 48%, rgba(8, 11, 13, .84) 74%, var(--asphalt) 97%),
    linear-gradient(to bottom, var(--asphalt) 0, rgba(8, 11, 13, 0) 16%, rgba(8, 11, 13, 0) 84%, var(--asphalt) 100%);
}
.journey .journey-layout { grid-template-columns: 1fr; margin-top: clamp(46px, 6vw, 80px); }
@media (min-width: 1101px) {
  /* The background image is anchored to the physical right, so the copy is
     pinned to the physical left whichever way the page reads. */
  .journey .journey-steps,
  .journey .section-head { max-width: min(640px, 50%); margin-left: 0; margin-right: auto; }
  .journey .section-head { display: flex; flex-direction: column; gap: 20px; }
}

@media (max-width: 1100px) {
  .journey-bg { display: none; }
  .journey .journey-steps { max-width: none; }
  .journey .journey-layout { margin-top: 0; }
  .journey .journey-mobile-car { display: none; }
  .journey .journey-steps { max-width: none; }
}

.journey-mobile-car { display: none; }


/* ================= 2026-08-24 updates ================= */

/* price per run under each package price */
.package-per {
  margin-top: 7px;
  color: color-mix(in srgb, currentColor 58%, transparent);
  font-family: var(--tech);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .05em;
}

/* convert-a-run line, subtly highlighted */
.package-swap {
  margin-top: 2px;
  padding-inline-end: 22px;
  background: color-mix(in srgb, currentColor 9%, transparent);
  font-weight: 700;
}

/* badges: L3 best value, L4 most popular */
.popular-label--value { background: var(--blue); color: var(--white); }
.popular-label--hot { background: var(--signal); color: var(--asphalt); }

/* X / OPEN RUN card */
.package-card--open {
  --card-bg: var(--cream);
  --card-fg: var(--asphalt);
  border-color: var(--asphalt);
  border-style: dashed;
}
.package-card--open .package-price span { margin-top: 12px; font-size: 15px; }

/* GoPro full price presentation */
.package-addon-was { text-decoration: none; align-items: baseline; gap: 7px; }
.package-addon-was b,
.package-addon-was span {
  text-decoration: line-through;
  text-decoration-color: rgba(216, 255, 62, .8);
}
.package-addon-was em {
  font-style: normal;
  text-decoration: none;
  color: var(--steel);
  font-family: var(--tech);
  font-size: 14px;
  letter-spacing: .08em;
}

/* highlighted phrases in "what every booking includes" */
.booking-includes li strong { color: var(--white); font-weight: 700; }

/* the runs field only appears for the X tier */
.booking-field[hidden] { display: none; }

/* gift voucher + business groups */
.booking-alt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.booking-alt > span {
  color: var(--steel);
  font-family: var(--tech);
  font-size: 15px;
  letter-spacing: .06em;
}
.booking-alt a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 15px;
  color: var(--white);
  border: 1px solid var(--line);
  font-family: var(--tech);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .04em;
  transition: .2s ease;
}
.booking-alt a:hover { color: var(--asphalt); background: var(--signal); border-color: var(--signal); }

/* package CTAs jump straight to the calendar */
.booking-flow { scroll-margin-top: 96px; }


/* ================= legal pages ================= */
.legal-body {
  color: var(--white);
  background: var(--asphalt);
  font-family: var(--body);
}
.legal-header { border-bottom: 1px solid var(--line); }
.legal-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: var(--header-height);
}
.legal-header .brand { width: 190px; }

.legal { padding: clamp(52px, 8vw, 104px) 0 clamp(70px, 9vw, 128px); }
.legal-inner { max-width: 860px; }

.legal-kicker {
  display: flex;
  align-items: center;
  gap: 13px;
  color: var(--signal);
  font-family: var(--tech);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .14em;
}
.legal-kicker span {
  padding: 2px 9px;
  color: var(--asphalt);
  background: var(--signal);
  font-weight: 800;
}

.legal h1 {
  margin: 20px 0 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(46px, 7vw, 92px);
  line-height: .92;
  letter-spacing: -.045em;
}
.legal h1 em {
  color: var(--signal);
  font-family: var(--tech);
  font-weight: 800;
  font-style: italic;
}
.legal-lead {
  margin: 26px 0 0;
  color: var(--steel);
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.62;
}

.legal-block {
  margin-top: clamp(34px, 4vw, 54px);
  padding-top: clamp(26px, 3vw, 38px);
  border-top: 1px solid var(--line);
}
.legal-block h2 {
  margin: 0 0 16px;
  color: var(--white);
  font-family: var(--tech);
  font-size: clamp(24px, 2.6vw, 31px);
  font-weight: 700;
  letter-spacing: .06em;
}
.legal-block p {
  margin: 0 0 14px;
  color: var(--steel);
  font-size: 17px;
  line-height: 1.75;
}
.legal-block p:last-child { margin-bottom: 0; }
.legal-block ul { list-style: none; margin: 0 0 14px; padding: 0; }
.legal-block li {
  position: relative;
  padding: 8px 22px 8px 0;
  color: var(--steel);
  line-height: 1.7;
  border-bottom: 1px solid var(--line);
}
.legal-block li::before {
  content: "+";
  position: absolute;
  right: 0;
  color: var(--signal);
  font-family: var(--tech);
  font-weight: 800;
}
.legal-block strong { color: var(--white); font-weight: 700; }

.legal-updated {
  margin-top: clamp(38px, 5vw, 60px);
  color: #6f7d86;
  font-family: var(--tech);
  font-size: 16px;
  letter-spacing: .1em;
}

/* The one-pager's nav is anchor-based, so an inner page needs its own way out. */
.legal-back {
  margin-top: clamp(26px, 3vw, 38px);
  padding-top: clamp(26px, 3vw, 38px);
  border-top: 1px solid var(--line);
}

.legal-footer {
  padding: 32px 0 calc(32px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
}
.legal-footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 26px;
  color: #7f8a91;
  font-family: var(--tech);
  font-size: 15px;
  letter-spacing: .04em;
}
.legal-footer nav, .legal-contact { display: flex; flex-wrap: wrap; gap: 18px; }
.legal-footer a { color: var(--steel); }
.legal-footer a:hover { color: var(--signal); }
.legal-footer a[aria-current="page"] { color: var(--signal); }

/* legal links in the main site footer */
.footer-legal { display: flex; flex-wrap: wrap; gap: 16px; }
.footer-legal a { color: #7f8a91; }
.footer-legal a:hover { color: var(--signal); }

@media (max-width: 720px) {
  .legal-header .brand { width: 150px; }
  .legal-footer-inner { flex-direction: column; align-items: flex-start; }
}

/* =========================================================================
   Gift voucher page (/gift/)
   ========================================================================= */

.nav-gift { color: var(--signal) !important; }

/* Language switcher — flags, so it reads without knowing the language. */
.lang-flags {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-inline-start: 6px;
  padding-inline-start: 12px;
  border-inline-start: 1px solid var(--line);
}
.lang-flag {
  position: relative;
  display: inline-flex;
  width: 26px;
  height: 18px;
  padding: 0;
  border: 0;
  opacity: .45;
  transition: opacity .2s ease, transform .2s ease;
}
.lang-flag svg { width: 100%; height: 100%; display: block; }
/* Only where there is a real pointer. On touch, a :hover rule that changes
   appearance makes the first tap apply hover instead of following the link,
   so switching language needed two taps. */
@media (hover: hover) and (pointer: fine) {
  .lang-flag:hover { opacity: 1; transform: translateY(-2px); }
}
.lang-flag.is-current { opacity: 1; }
/* Touch has no hover state, so the inactive flags stay legible on their own. */
@media (hover: none) {
  .lang-flag { opacity: .7; }
}
/* The active language is marked with a signal underline rather than a box. */
.lang-flag.is-current::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -6px;
  height: 2px;
  background: var(--signal);
}

.lang-flags--menu {
  gap: 12px;
  margin: 22px 0 0;
  padding: 18px 0 0;
  border-inline-start: 0;
  border-top: 1px solid var(--line);
  width: 100%;
}
.lang-flags--menu .lang-flag { width: 40px; height: 28px; }

/* On the cream/white sections the pale outline needs more contrast. */
.site-header:not(.is-scrolled) .lang-flag { border-color: rgba(255, 255, 255, .5); }

.gift { color: var(--white); background: var(--asphalt); }
.gift-hero {
  padding: calc(var(--header-height) + clamp(60px, 8vw, 120px)) 0 clamp(50px, 6vw, 90px);
  background:
    radial-gradient(circle at 20% 10%, rgba(10, 63, 123, .55), transparent 45%),
    var(--asphalt);
}
.gift-hero-inner { max-width: 900px; }
.gift-kicker { margin: 0 0 18px; color: var(--signal); font-family: var(--tech); font-size: 16px; font-weight: 800; letter-spacing: .22em; }
.gift-hero h1 { margin: 0; font-family: var(--display); font-size: clamp(46px, 6.6vw, 104px); font-weight: 400; line-height: .95; }
.gift-hero h1 em { color: var(--signal); font-family: var(--tech); font-style: italic; }
.gift-lead { max-width: 720px; margin: 28px 0 34px; color: var(--steel); font-size: clamp(18px, 1.8vw, 23px); line-height: 1.5; }
.gift-cta, .gift-cta-2 { display: inline-flex; align-items: center; gap: 10px; }

.gift-body { background: var(--asphalt-2); }
.gift-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(40px, 5vw, 90px); align-items: start; }
.gift-info h2 { margin: 0 0 30px; font-family: var(--display); font-size: clamp(32px, 3.4vw, 52px); font-weight: 400; }

.gift-steps { list-style: none; margin: 0 0 46px; padding: 0; }
.gift-steps li { display: grid; grid-template-columns: 52px 1fr; gap: 18px; padding: 24px 0; border-top: 1px solid var(--line); }
.gift-steps li:last-child { border-bottom: 1px solid var(--line); }
.gift-steps b { color: var(--signal); font-family: var(--tech); font-size: 30px; font-weight: 800; font-style: italic; }
.gift-steps h3 { margin: 0 0 7px; font-family: var(--display); font-size: 24px; font-weight: 400; }
.gift-steps p { margin: 0; color: var(--steel); font-size: 16px; }

.gift-terms h3 { margin: 0 0 16px; font-family: var(--display); font-size: 26px; font-weight: 400; }
.gift-terms ul { margin: 0; padding-inline-start: 20px; color: var(--steel); }
.gift-terms li { margin-bottom: 10px; line-height: 1.5; }
.gift-terms strong { color: var(--signal); }

.gift-sample-label { margin: 0 0 16px; color: var(--steel); font-family: var(--tech); font-size: 16px; letter-spacing: .12em; }

/* The voucher is real artwork now, not a CSS mock-up, so it only needs a
   frame and the "example" marker. */
.voucher {
  position: relative;
  margin: 0;
  line-height: 0;
  border: 1px solid var(--line);
  box-shadow: 0 34px 80px rgba(0, 0, 0, .45);
}
.voucher img { width: 100%; height: auto; display: block; }
.voucher-demo {
  position: absolute;
  top: 14px;
  inset-inline-start: 14px;
  margin: 0;
  padding: 4px 10px;
  color: var(--asphalt);
  background: var(--signal);
  font-family: var(--tech);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: .1em;
}
.gift-cta-2 { margin-top: 26px; }
.gift-back { margin-top: 22px; }

@media (max-width: 980px) {
  .gift-grid { grid-template-columns: 1fr; }
}
@media (max-width: 1180px) {
  .desktop-nav { gap: 18px; font-size: 16px; }
}

/* =========================================================================
   Cookie notice
   ========================================================================= */

.cookie-bar {
  position: fixed;
  z-index: 200;
  inset-inline: 16px;
  bottom: 16px;
  display: none;
  gap: clamp(14px, 2vw, 30px);
  align-items: center;
  flex-wrap: wrap;
  max-width: 940px;
  margin-inline: auto;
  padding: 18px 22px;
  color: var(--white);
  background: rgba(8, 11, 13, .97);
  border: 1px solid var(--line);
  box-shadow: 0 26px 70px rgba(0, 0, 0, .5);
}
.cookie-bar.is-open { display: flex; }
.cookie-bar p { flex: 1 1 320px; margin: 0; color: var(--steel); font-size: 15px; line-height: 1.5; }
.cookie-bar p a { color: var(--signal); text-decoration: underline; }
.cookie-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cookie-actions button {
  padding: 11px 20px;
  font-family: var(--body);
  font-size: 15px;
  font-weight: 800;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--white);
  cursor: pointer;
  transition: .2s ease;
}
.cookie-actions button:hover { border-color: var(--signal); }
.cookie-actions .cookie-accept { color: var(--asphalt); background: var(--signal); border-color: var(--signal); }
.cookie-actions .cookie-accept:hover { background: #fff; border-color: #fff; }

@media (max-width: 860px) {
  .cookie-bar { bottom: calc(72px + env(safe-area-inset-bottom)); padding: 16px; }
  .cookie-bar p { font-size: 14px; }
  .cookie-actions { width: 100%; }
  .cookie-actions button { flex: 1; }
}

/* =========================================================================
   Package cards: fit a whole card on a phone screen
   The deck is equal-height, so the tallest card (L4, six features) sets the
   height for all of them. At 726px it was taller than the space left once the
   sticky header and the dock are accounted for, so the bottom was always cut.
   ========================================================================= */

/* The "+" marker was pinned to the physical right, which put it on the wrong
   side of every list item in English and Russian. */
.package-card li {
  padding: 8px 22px 8px 0;
  padding-inline: 22px 0;
}
.package-card li::before { right: auto; inset-inline-start: 0; }

@media (max-width: 720px) {
  .package-card {
    min-height: 0;
    padding: 20px 18px;
  }
  .package-top > span { font-size: 42px; }
  .package-purpose { margin-top: 20px; font-size: 22px; }
  .package-price { margin-top: 10px; }
  .package-price b { font-size: 42px; }
  .package-price--quote b { font-size: 30px; }
  .package-per { margin-top: 4px; font-size: 13px; }

  .package-card ul { margin: 12px 0 16px; }
  .package-card li {
    padding-block: 6px;
    padding-inline: 18px 0;
    font-size: 15px;
    line-height: 1.35;
  }

  .package-cta { padding-top: 14px; font-size: 16px; }
  .popular-label { font-size: 11px; }
}

/* Shorter handsets (iPhone SE/8 and similar) need a little more off again. */
@media (max-width: 720px) and (max-height: 740px) {
  .package-card { padding: 16px 16px; }
  .package-purpose { margin-top: 14px; font-size: 20px; }
  .package-price b { font-size: 38px; }
  .package-card ul { margin: 8px 0 12px; }
  .package-card li { padding-block: 4px; font-size: 14px; }
  .package-cta { padding-top: 10px; }
}

/* =========================================================================
   About stats: four achievements, so 2x2 rather than a cramped single row
   ========================================================================= */
@media (min-width: 621px) {
  .about-stats { grid-template-columns: repeat(2, 1fr); }
  /* The old rule put a physical right border on every item but the first,
     which lands on the wrong side in English and Russian. */
  .about-stats > div + div { border-right: 0; }
  .about-stats > div:nth-child(even) { border-inline-start: 1px solid var(--line); }
  .about-stats > div:nth-child(n+3) { border-top: 1px solid var(--line); }
}

/* =========================================================================
   Gallery: the grid was hand-composed for exactly four items, so anything
   extra fell into auto-sized rows and collapsed. Give the implicit rows a
   height at every breakpoint so added photos land in a proper row.
   ========================================================================= */
.gallery-grid { grid-auto-rows: 330px; grid-auto-flow: row dense; }

/* Portrait shots get a double-height cell. In a 330px landscape cell,
   object-fit: cover would crop a 9:16 photo down to a thin horizontal band
   and lose most of the car. Two rows also makes the cell count work out
   evenly, so the last row never ends up with a single orphan. */
.gallery-item--portrait { grid-row: span 2; }

@media (max-width: 980px) {
  .gallery-grid { grid-auto-rows: 260px; }
}

@media (max-width: 620px) {
  .gallery-grid { grid-auto-rows: 240px; }
  /* One column on a phone, so a tall cell is just a tall photo. */
  .gallery-item--portrait { grid-row: span 1; height: 380px; }
}

/* =========================================================================
   Gallery on phones: a swipe deck, not an endless column
   Eleven photos stacked one per row ran to roughly 3000px of scrolling. The
   deck matches how the packages and videos already behave, and a uniform cell
   also stops the portrait shots being cropped to a band of sky.
   ========================================================================= */

/* The car sits low in both portrait shots, so bias the crop downwards
   instead of centring on the horizon. */
.gallery-item--portrait img { object-position: 50% 58%; }

@media (max-width: 720px) {
  .gallery-grid {
    display: flex;
    grid-template-columns: none;
    grid-template-rows: none;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* Bleed to the screen edges, derived from the gutter rather than assumed. */
    margin-inline: calc((100% - 100vw) / 2);
    padding-inline: calc((100vw - 100%) / 2);
  }
  .gallery-grid::-webkit-scrollbar { display: none; }

  .gallery-item,
  .gallery-item--wide,
  .gallery-item--tall,
  .gallery-item--portrait {
    grid-column: auto;
    grid-row: auto;
    flex: 0 0 80%;
    height: 340px;
    scroll-snap-align: center;
  }
}

/* =========================================================================
   Gift card: read as a gift at a glance
   ========================================================================= */
.route-index--gift {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 26px;
  color: var(--asphalt);
  background: var(--signal);
  /* Notched ends so it reads as a ribbon/tag rather than a plain pill. */
  clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 50%, 100% 100%, 0 100%, 12px 50%);
  font-size: 15px;
  letter-spacing: .16em;
  box-shadow: 0 10px 26px rgba(8, 11, 13, .18);
}
.route-index--gift svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 620px) {
  .route-index--gift { padding: 8px 20px; font-size: 13px; letter-spacing: .12em; }
}

/* =========================================================================
   About stats on phones: newest achievement first
   Only the top item is above the fold on a phone, so the 2026 title leads.
   Desktop keeps the 2x2 reading order.
   ========================================================================= */
@media (max-width: 620px) {
  .about-stats > div { border-top: 1px solid var(--line); }
  /* order only moves it visually — the DOM order stays chronological, so the
     border logic is restated here rather than relying on `div + div`. */
  .about-stats > div:nth-child(2) { order: -1; border-top: 0; }
}