/* =========================================================
   Devon Paddle Co.
   Desktop sizes come from the 1440px mockup, converted to vw
   (mockup px ÷ 14.4). max() keeps small text readable on
   small laptops.

   Breakpoints (same logic as the portfolio):
   - Phone ........... default, < 744px (+ phones in landscape)
   - iPad mini ....... 744–799px
   - Larger tablets .. 800px+
   - Desktop ......... 1024px+ in landscape
   ========================================================= */

/* ---------- Tokens ---------- */
:root {
  --teal: #157A70;          /* darkened from #1F9E90: sand text now 4.7:1 */
  --teal-light: #589E95;
  --teal-dark: #187067;
  --coral: #FF6B4A;         /* brand coral: logo, "South Devon", underline */
  --star: #FBBC04;          /* Google's star colour: ratings in the hero and the reviews */
  --mist: #E3EEEB;          /* pale "shallow water" tint: the reviews, and the wave into contact */
  --teal-glow: #7FC4BA;     /* light teal for small text on the dark blue: 5.5:1 */
  --coral-glow: #FF8A70;    /* light coral for links on the dark blue: 4.8:1 */
  --night: #082623;         /* footer, same as the header once it turns solid */
  /* Layers of the paper-cut section edges, from the beach out to deep water */
  --shallow: #2F9A8C;       /* shallow water over the sand */
  --shallow-deep: #1A6E73;  /* a step deeper, before the dark sections */
  --foam: #A9D6CD;          /* first layer under the pale reviews */
  --sea: #4EA59C;           /* then the sea, before the dark blue of contact */
  --btn: #D13F24;           /* deeper coral for buttons on light sections: white text 4.7:1 */
  --btn-hover: #B9361D;
  --ink: #0B2A30;           /* dark text on light buttons */
  --coral-text: #C0461F;    /* darker coral for small text on sand: 4.6:1 */
  --sand: #F4F3EA;
  --deep: #0A405A;
  --white: #FFFFFF;

  --font-display: "Barlow Semi Condensed", "Arial Narrow", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Desktop sizes are written in vw from the 1440px mockup. --u is 1vw,
     but stops growing at 1920px wide, so on bigger screens (2560 and up)
     the page stays the size it is at 1920 instead of being magnified */
  --u: min(1vw, 19.2px);

  --gutter: 20px;
  --container: calc(100% - 2 * var(--gutter));
  --wave-top-h: max(calc(4.861 * var(--u)), 24px);   /* 70px at 1440 */
}

@media (min-width: 744px) {
  :root { --gutter: 32px; }
}

@media (min-width: 1024px) and (orientation: landscape) {
  :root {
    --container: calc(69.03 * var(--u));             /* 994px at 1440 */
    --wave-top-h: calc(4.861 * var(--u));
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 80px;           /* anchor links don't end up under the fixed header */
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--deep);
  background: var(--sand);   /* the next section (Tours) is sand */
  -webkit-font-smoothing: antialiased;
}

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

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

a { color: inherit; }

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

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

.skip-link {
  position: absolute;
  top: 8px; left: 8px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--deep);
  color: var(--sand);
  font-weight: 500;
  border-radius: 4px;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* ---------- Paper-cut section edges ----------
   Where the page goes from the beach into the water, the edge is a few
   layers of colour, each with a soft shadow, like cut paper: sand, shallow
   water, then the deep blue. The shadow of a layer is four faint copies of
   it (<use class="paper-shade">), shifted 1.5 to 6 units towards the
   layer behind. That costs almost nothing to redraw, unlike a blur filter,
   which matters because the sand edges ripple while you scroll.
   The layer's colour sits on its <g>, so the copies can take the shadow colour */
.paper-shade { fill: rgba(4, 34, 42, .065); }
.edge-shallow      { fill: var(--shallow); }
.edge-shallow-deep { fill: var(--shallow-deep); }
.edge-foam         { fill: var(--foam); }
.edge-sea          { fill: var(--sea); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Same look whether it's a link or a <button>: buttons otherwise get the
     browser's own smaller font and a grey border */
  border: 0;
  font: inherit;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 500;
  line-height: 1.2;
  color: var(--white);
  background: var(--btn);
  border-radius: 2px;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}

@media (hover: hover) {
  .btn:hover { background: var(--btn-hover); }
}

.btn--small {
  font-size: .875rem;
  padding: 8px 14px;
}

/* Light pill: sand button with dark text, used over the video */
.btn--light {
  background: var(--sand);
  color: var(--ink);
  font-weight: 600;
  border-radius: 999px;
}
.btn--light:focus-visible { outline-color: var(--sand); }

@media (hover: hover) {
  /* Only the text turns coral; the capsule keeps its colour */
  .btn--light:hover {
    background: var(--sand);
    color: var(--coral-text);
  }
}

/* =========================================================
   HEADER
   ========================================================= */
/* Fixed at the top. Transparent over the video; script.js adds .is-solid
   as soon as the header would start to cover the hero headline */
.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  color: var(--sand);
  transition: box-shadow .3s ease;
}
/* The solid, blurred background sits on a layer behind the header rather
   than on the header itself: an element with a blur on it stops anything
   inside it (the phone menu) from blurring the page, so the menu would be
   see-through but sharp */
.header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(8, 38, 35, .9);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s;
  pointer-events: none;
}
.header.is-solid { box-shadow: 0 6px 24px rgba(0, 0, 0, .18); }
.header.is-solid::before {
  opacity: 1;
  visibility: visible;
}

.header__inner {
  position: relative;
  width: var(--container);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  padding-top: 6px;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.logo__mark {
  width: 50px;
  height: auto;
}

.logo__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1;
  white-space: nowrap;
}

/* ----- Menu button (phones only) ----- */
.menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}

.js .menu-toggle {
  display: grid;
  place-items: center;
}

.menu-toggle__bars,
.menu-toggle__bars::before,
.menu-toggle__bars::after {
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  transition: transform .25s ease, opacity .2s ease;
}

.menu-toggle__bars { position: relative; }

.menu-toggle__bars::before,
.menu-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
}
.menu-toggle__bars::before { top: -7px; }
.menu-toggle__bars::after  { top:  7px; }

.menu-toggle[aria-expanded="true"] .menu-toggle__bars { background: transparent; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::before { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::after  { transform: translateY(-7px) rotate(-45deg); }

/* ----- Navigation: phone = dropdown panel ----- */
.nav {
  width: 100%;
}

/* 8px from both screen edges (no width, or "right" would be ignored).
   Same colour, see-through and blur as the solid header: one piece with it */
.js .nav {
  position: absolute;
  top: calc(100% + 4px);
  left: calc(var(--gutter) * -1 + 8px);
  right: calc(var(--gutter) * -1 + 8px);
  width: auto;
  padding: 8px 20px 20px;
  background: rgba(8, 38, 35, .9);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .25);
}

/* Opening: the panel unfolds downwards out of the header (it is cut from
   the bottom up, then the cut opens), and the links and the button slide in
   one after another. Closing folds it back up, quicker than it opened.
   The negative insets when open leave room for the panel's shadow.
   While closed it is hidden, so its links can't be reached with Tab */
@media (max-width: 743px) {
  .js .nav {
    clip-path: inset(0 -32px 100% -32px round 12px);
    visibility: hidden;
    transition: clip-path .2s cubic-bezier(.4, 0, 1, 1), visibility 0s linear .2s;
  }
  .js .header.is-open .nav {
    clip-path: inset(0 -32px -56px -32px round 12px);
    visibility: visible;
    transition: clip-path .36s cubic-bezier(.22, 1, .36, 1), visibility 0s;
  }

  .js .nav__list > li,
  .js .nav .nav__book {
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity .1s, transform .1s;
  }
  .js .header.is-open .nav__list > li,
  .js .header.is-open .nav .nav__book {
    opacity: 1;
    transform: none;
    transition: opacity .28s ease-out var(--delay), transform .32s cubic-bezier(.22, 1, .36, 1) var(--delay),
                background-color .2s ease, color .2s ease;
  }
  .nav__list > li:nth-child(1) { --delay: 70ms; }
  .nav__list > li:nth-child(2) { --delay: 115ms; }
  .nav__list > li:nth-child(3) { --delay: 160ms; }
  .nav__list > li:nth-child(4) { --delay: 205ms; }
  .nav .nav__book { --delay: 250ms; }
}

/* Reduced motion: the menu simply appears and disappears */
@media (max-width: 743px) and (prefers-reduced-motion: reduce) {
  .js .nav,
  .js .header.is-open .nav,
  .js .nav__list > li,
  .js .header.is-open .nav__list > li,
  .js .nav .nav__book,
  .js .header.is-open .nav .nav__book {
    transition: none;
    transform: none;
  }
}

.nav__link {
  display: block;
  padding: 12px 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.625rem;
  line-height: 1.1;
  text-decoration: none;
  border-bottom: 1px solid rgba(244, 243, 234, .15);
}

.nav__book {
  width: 100%;
  margin-top: 20px;
  padding-block: 14px;
  font-size: 1rem;
}

/* Without JavaScript the links simply sit in a row under the logo */
html:not(.js) .header__inner { flex-wrap: wrap; }
html:not(.js) .nav__list { display: flex; flex-wrap: wrap; gap: 4px 20px; }
html:not(.js) .nav__link { font-size: 1.125rem; border: 0; }

/* ----- Navigation: tablets and up = inline row ----- */
@media (min-width: 744px) {
  .js .menu-toggle { display: none; }

  .nav,
  .js .nav,
  .js .header.is-open .nav {
    position: static;
    display: flex;
    align-items: center;
    width: auto;
    margin-left: auto;
    padding: 0;
    background: none;
    -webkit-backdrop-filter: none;     /* otherwise the video behind the links would blur */
    backdrop-filter: none;
    border-radius: 0;
    box-shadow: none;
    animation: none;
  }

  .nav__list {
    display: flex;
    gap: 28px;
  }

  .nav__link {
    padding: .4em 0;                  /* in em, so the hover line keeps its distance to the text */
    font-family: var(--font-body);
    font-weight: 400;
    font-size: .9375rem;
    line-height: 1.2;
    border: 0;
  }

  .nav__book {
    width: auto;
    margin: 0 0 0 28px;
    padding: 9px 18px;
    font-size: .875rem;
  }

  .logo__mark { width: 56px; }
}

/* Hover: a thin coral line draws in from the left under the link.
   Waves are kept for brand moments (logo, headline, section edges);
   interactions use colour and a small movement only.
   Also shown for keyboard focus. Inline menu only (tablets and up). */
.nav__link,
.hero__link { position: relative; }

@media (min-width: 744px) {
  .nav__link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: .13em;                    /* in em, so the gap to the text scales with it */
    height: max(1.5px, .1em);
    background: var(--coral);
    clip-path: inset(0 100% 0 0);
    transition: clip-path .35s cubic-bezier(.65, 0, .35, 1);
  }
  .nav__link:focus-visible::after { clip-path: inset(0 0 0 0); }
}

@media (min-width: 744px) and (hover: hover) {
  .nav__link:hover::after { clip-path: inset(0 0 0 0); }
}

/* ----- Header: desktop (mockup values) ----- */
@media (min-width: 1024px) and (orientation: landscape) {
  .header__inner {
    min-height: calc(4.375 * var(--u));              /* 63px */
    padding-top: 0;
  }

  .logo { gap: calc(.833 * var(--u)); }                              /* 12px */
  .logo__mark { width: calc(4.444 * var(--u)); }                     /* 64px */
  .logo__name { font-size: max(calc(1.25 * var(--u)), 15px); }       /* 18px */

  .nav__list { gap: calc(3.333 * var(--u)); }                        /* 48px */
  .nav__link {
    font-size: max(calc(1.042 * var(--u)), 15px);                    /* 15px (mockup: 12px) */
  }

  .nav__book {
    margin-left: calc(9.722 * var(--u));                             /* 140px */
    padding: calc(.625 * var(--u)) calc(1.389 * var(--u));                          /* 9px 20px */
    font-size: max(calc(1.042 * var(--u)), 15px);                    /* 15px (mockup: 12px) */
  }
}

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  align-content: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: 96px 0 calc(var(--wave-top-h) + 40px);
  color: var(--sand);
  background: #1C4A45;                /* shows while the poster loads */
}

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

.hero__poster,
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
}

/* The video stays invisible until it is actually playing,
   so the poster never flashes black */
.hero__video {
  opacity: 0;
  transition: opacity .8s ease;
}
.hero__video.is-playing { opacity: 1; }

/* Pause / play for the background video (WCAG 2.2.2) */
.hero__pause {
  position: absolute;
  right: calc((100% - var(--container)) / 2);
  bottom: calc(var(--wave-top-h) + 16px);
  z-index: 1;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(244, 243, 234, .35);
  border-radius: 50%;
  background: rgba(6, 38, 36, .55);
  color: var(--sand);
  cursor: pointer;
  transition: background-color .2s ease;
}
.hero__pause[hidden] { display: none; }

@media (hover: hover) {
  .hero__pause:hover { background: rgba(6, 38, 36, .8); }
}

/* Pause icon: two bars */
.hero__pause-icon {
  width: 12px;
  height: 14px;
  border-inline: 4px solid currentColor;
}

/* Play icon: triangle */
.hero__pause[data-state="paused"] .hero__pause-icon {
  width: 0;
  height: 0;
  margin-left: 4px;
  border-block: 8px solid transparent;
  border-inline: 13px solid currentColor;
  border-inline-end: 0;
}

/* Text sits on the same left edge as the logo */
.hero__content {
  width: var(--container);
  margin-inline: auto;
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.25rem, 11.5vw, 3.25rem);
  line-height: 1.02;
  color: var(--sand);
  text-wrap: balance;
}

/* "South Devon": fades from sand to coral, then a wave underline draws in */
.hero__accent {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  color: var(--coral);
  animation:
    hero-rise .7s cubic-bezier(.22, 1, .36, 1) .15s both,
    accent-colour .6s ease .8s both;
}

.hero__accent::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -.14em;
  height: .2em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M2 7 C 17 1, 27 1, 42 6 S 67 11, 82 6 S 107 1, 118 5' fill='none' stroke='%23FF6B4A' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  animation: wave-draw .9s cubic-bezier(.65, 0, .35, 1) 1.1s both;
}

/* Hero entrance, top to bottom: headline lines, subtitle, buttons,
   then the ratings last (see the ratings block). Once, on page load */
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

.hero__line {
  display: inline-block;
  animation: hero-rise .7s cubic-bezier(.22, 1, .36, 1) .3s both;
}
.hero__subtitle {
  animation: hero-rise .7s cubic-bezier(.22, 1, .36, 1) .5s both;
}
.hero__actions > * {
  animation: hero-rise .7s cubic-bezier(.22, 1, .36, 1) .7s both;
}
.hero__actions > :nth-child(2) { animation-delay: .8s; }

@keyframes accent-colour {
  from { color: var(--sand); }
  to   { color: var(--coral); }
}

@keyframes wave-draw {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

.hero__subtitle {
  max-width: 32ch;
  margin-top: 14px;
  font-size: 1.0625rem;
  line-height: 1.45;
  color: rgba(244, 243, 234, .9);
  text-wrap: balance;
}

/* Soft shadow so the text sits in the video instead of floating on it */
.hero__title,
.hero__subtitle,
.hero__link {
  text-shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 8px 32px rgba(0, 0, 0, .35);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 26px;
  margin-top: 28px;
}

.hero__cta {
  min-height: 48px;
  padding: 14px 24px;
  font-size: 1rem;
}

/* Ratings under the buttons: Google and Tripadvisor side by side.
   On page load each logo and number slide in from the side, then the
   stars and bubbles light up one by one from left to right (once).
   With reduced motion everything is simply shown. */
.hero__ratings {
  margin-top: 22px;
  font-size: .9375rem;
  color: rgba(244, 243, 234, .88);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}

.ratings__items {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}

.rating {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  color: inherit;
  text-decoration: none;
  border-radius: 6px;
}
.rating:focus-visible {
  outline: 2px solid var(--sand);
  outline-offset: 5px;
}
.rating strong {
  display: inline-block;              /* so it can be scaled on hover */
  color: var(--sand);
  font-weight: 600;
  font-size: 1.0625em;
}

/* Thin vertical line between the two ratings */
.rating + .rating::before {
  content: "";
  width: 1px;
  height: 18px;
  margin-right: 6px;
  background: rgba(244, 243, 234, .35);
}

/* Very narrow phones: the second rating wraps under the first,
   so the line is not needed */
@media (max-width: 374px) {
  .rating + .rating::before { display: none; }
}

/* ----- Entrance ----- */
@keyframes rating-slide-in {
  from { opacity: 0; transform: translateX(28px); }
  to   { opacity: 1; transform: none; }
}
@keyframes rating-pop {
  from { opacity: 0; transform: scale(.3); }
  to   { opacity: 1; transform: none; }
}
@keyframes rating-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.rating__badge,
.rating strong {
  animation: rating-slide-in .5s cubic-bezier(.65, 0, .35, 1) both;
}
.rating__stars svg,
.rating__bubbles i {
  animation: rating-pop .35s cubic-bezier(.34, 1.56, .64, 1) both;
}
.rating + .rating::before {
  animation: rating-fade .4s ease 1.45s both;
}

/* Google: logo and number, then stars one by one */
.rating:first-child .rating__badge { animation-delay: 1.25s; }
.rating:first-child strong         { animation-delay: 1.33s; }
.rating__stars svg:nth-child(1) { animation-delay: 1.6s; }
.rating__stars svg:nth-child(2) { animation-delay: 1.68s; }
.rating__stars svg:nth-child(3) { animation-delay: 1.76s; }
.rating__stars svg:nth-child(4) { animation-delay: 1.84s; }
.rating__stars svg:nth-child(5) { animation-delay: 1.92s; }

/* Tripadvisor: a moment later, then bubbles one by one */
.rating:last-child .rating__badge { animation-delay: 1.55s; }
.rating:last-child strong         { animation-delay: 1.63s; }
.rating__bubbles i:nth-child(1) { animation-delay: 1.95s; }
.rating__bubbles i:nth-child(2) { animation-delay: 2.03s; }
.rating__bubbles i:nth-child(3) { animation-delay: 2.11s; }
.rating__bubbles i:nth-child(4) { animation-delay: 2.19s; }
.rating__bubbles i:nth-child(5) { animation-delay: 2.27s; }

/* When the entrance has finished, script.js adds .is-ready and the
   entrance animations are switched off, so hover can use its own */
.is-ready .rating__badge,
.is-ready .rating strong,
.is-ready .rating__stars svg,
.is-ready .rating__bubbles i,
.is-ready .rating + .rating::before { animation: none; }

/* Hover (mouse only): logo and number grow a little, together;
   stars / bubbles light up again one by one, same timing as on page load */
@keyframes rating-pop-again {
  from { opacity: 0; transform: scale(.3); }
  to   { opacity: 1; transform: none; }
}

@media (hover: hover) {
  .is-ready .rating__badge,
  .is-ready .rating strong {
    transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
  }
  .is-ready .rating:hover .rating__badge,
  .is-ready .rating:hover strong,
  .is-ready .rating:focus-visible .rating__badge,
  .is-ready .rating:focus-visible strong { transform: scale(1.1); }

  .is-ready .rating:hover .rating__stars svg,
  .is-ready .rating:hover .rating__bubbles i {
    animation: rating-pop-again .35s cubic-bezier(.34, 1.56, .64, 1) both;
  }
  .is-ready .rating:hover :is(.rating__stars svg, .rating__bubbles i):nth-child(1) { animation-delay: 0s; }
  .is-ready .rating:hover :is(.rating__stars svg, .rating__bubbles i):nth-child(2) { animation-delay: .08s; }
  .is-ready .rating:hover :is(.rating__stars svg, .rating__bubbles i):nth-child(3) { animation-delay: .16s; }
  .is-ready .rating:hover :is(.rating__stars svg, .rating__bubbles i):nth-child(4) { animation-delay: .24s; }
  .is-ready .rating:hover :is(.rating__stars svg, .rating__bubbles i):nth-child(5) { animation-delay: .32s; }
}

/* Round white badge for the platform logo */
.rating__badge {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}
.rating__badge img {
  display: block;
  width: 15px;
  height: 15px;
}

/* The Tripadvisor owl is wider than it is tall */
.rating__badge--owl img {
  width: 18px;
  height: auto;
}

.rating__stars,
.rating__bubbles {
  display: inline-flex;
  gap: 2px;
}
.rating__stars svg {
  display: block;
  width: 16px;
  height: 16px;
}
/* Google's own star colour, so the rating reads as Google's */
.rating__stars path { fill: var(--star); }
/* Tripadvisor bubbles: official "Moss" colour for dark backgrounds
   (#84E9BD; on white it would be #00AA6C) */
.rating__bubbles i {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #84E9BD;
}
/* Drawn to the nearest half (4.7 shows as 4½). The empty half is
   transparent with a green outline, never white */
.rating__bubbles i.is-half {
  background: linear-gradient(90deg, #84E9BD 50%, transparent 50%);
  box-shadow: inset 0 0 0 1.5px #84E9BD;
}

/* Second, quieter action: a text link */
.hero__link {
  display: inline-block;
  padding-bottom: .24em;              /* same gap under the text as the menu lines */
  border-bottom: 1px solid rgba(244, 243, 234, .5);
  color: var(--sand);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1;
  text-decoration: none;
  transition: border-color .2s ease;
}

/* "See tours": the white underline is coloured coral from the left,
   and the arrow moves forward a little */
.hero__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: max(1.5px, .09em);
  background: var(--coral);
  clip-path: inset(0 100% 0 0);
  transition: clip-path .35s cubic-bezier(.65, 0, .35, 1);
}
/* Arrow drawn as SVG, not the "→" character: Google Fonts' Inter doesn't
   include that character, so browsers used a thin arrow from another font */
.hero__link-arrow {
  display: inline-block;              /* the page resets svg to block */
  width: .95em;
  height: .95em;
  margin-left: .3em;
  vertical-align: -.14em;
  transition: transform .35s cubic-bezier(.65, 0, .35, 1);
}
.hero__link:focus-visible::after { clip-path: inset(0 0 0 0); }
.hero__link:focus-visible .hero__link-arrow { transform: translateX(4px); }

@media (hover: hover) {
  .hero__link:hover::after { clip-path: inset(0 0 0 0); }
  /* Moves forward, then keeps gently swinging while the mouse stays on it */
  .hero__link:hover .hero__link-arrow {
    transform: translateX(4px);
    animation: arrow-swing 1.1s ease-in-out .35s infinite;
  }
}

@keyframes arrow-swing {
  0%, 100% { transform: translateX(4px); }
  50%      { transform: translateX(9px); }
}

@media (min-width: 744px) {
  .hero {
    min-height: 88vh;
    min-height: 88svh;
    padding-top: 120px;
  }
  .hero__title { font-size: 3.75rem; }
  .hero__subtitle { font-size: 1.25rem; }
  .hero__actions { margin-top: 36px; }
}

/* Portrait phones and tablets: the kayak sits in the middle of the frame,
   so the text moves down below it, with a soft shade behind it */
@media (orientation: portrait) {
  .hero {
    align-content: end;
    padding-bottom: calc(var(--wave-top-h) + 40px);
  }

  /* Pause button sits on the same line as the rating */
  .hero__pause { bottom: calc(var(--wave-top-h) + 28px); }

  .hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
      rgba(6, 38, 36, .8) 0%,
      rgba(6, 38, 36, .5) 28%,
      rgba(6, 38, 36, 0) 55%);
  }
}

@media (orientation: portrait) and (min-width: 744px) {
  .hero { padding-bottom: calc(var(--wave-top-h) + 56px); }
  .hero__pause { bottom: calc(var(--wave-top-h) + 44px); }
}

/* Very narrow phones: the text link would wrap under the button,
   and it leads to the same place, so it is hidden here */
@media (max-width: 359px) {
  .hero__link { display: none; }
  .hero__subtitle { font-size: .9375rem; }
}

/* Short phones (iPhone SE): tighter spacing so the text stays below the kayak */
@media (orientation: portrait) and (max-height: 700px) {
  .hero__subtitle { margin-top: 10px; }
  .hero__actions { margin-top: 22px; }
}

/* Landscape: shade from the left under the text (it also hides the
   brightest sun glitter, which is on the left of the video) and a light
   shade at the top under the menu */
@media (orientation: landscape) {
  .hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(to bottom,
        rgba(6, 32, 30, .5) 0%,
        rgba(6, 32, 30, 0) 22%),
      linear-gradient(to right,
        rgba(6, 32, 30, .8) 0%,
        rgba(6, 32, 30, .58) 30%,
        rgba(6, 32, 30, .18) 55%,
        rgba(6, 32, 30, 0) 70%);
  }
}

/* Anchor links: room for the taller desktop header */
@media (min-width: 1024px) and (orientation: landscape) {
  html { scroll-padding-top: calc(calc(4.375 * var(--u)) + 16px); }
}

/* Hero: desktop (sizes in vw from a 1440px layout) */
@media (min-width: 1024px) and (orientation: landscape) {
  /* Hero is a little shorter than the screen, so the whole stats card
     (it overlaps the hero bottom) is visible on the first screen */
  .hero {
    min-height: min(55.556vw, calc(100vh - calc(2.4 * var(--u))));   /* 800px at 1440 */
    min-height: min(55.556vw, calc(100svh - calc(2.4 * var(--u))));
    padding: calc(4.375 * var(--u)) 0 var(--wave-top-h);             /* top = header */
  }

  .hero__title { font-size: max(calc(5 * var(--u)), 2.75rem); }      /* 72px */
  .hero__subtitle {
    margin-top: calc(1.389 * var(--u));                              /* 20px */
    font-size: max(calc(1.458 * var(--u)), 1.0625rem);               /* 21px */
  }

  .hero__actions {
    gap: calc(1.806 * var(--u));                                     /* 26px */
    margin-top: calc(2.5 * var(--u));                                /* 36px */
  }

  .hero__cta {
    min-height: 0;
    padding: max(calc(1.111 * var(--u)), 13px) max(calc(2.083 * var(--u)), 24px);   /* 16px 30px */
    font-size: max(calc(1.181 * var(--u)), 15px);                    /* 17px */
  }

  .hero__link { font-size: max(calc(1.181 * var(--u)), 15px); }      /* 17px */

  .hero__ratings {
    margin-top: calc(1.667 * var(--u));                              /* 24px */
    font-size: max(calc(1.042 * var(--u)), 14px);                    /* 15px */
  }
  .rating__stars svg {
    width: max(calc(1.111 * var(--u)), 14px);
    height: max(calc(1.111 * var(--u)), 14px);
  }
  .rating__bubbles i {
    width: max(calc(.903 * var(--u)), 12px);
    height: max(calc(.903 * var(--u)), 12px);
  }
  .rating__badge {
    width: max(calc(1.944 * var(--u)), 24px);                        /* 28px */
    height: max(calc(1.944 * var(--u)), 24px);
  }
  .rating__badge img {
    width: max(calc(1.111 * var(--u)), 14px);
    height: max(calc(1.111 * var(--u)), 14px);
  }
  .rating__badge--owl img {
    width: max(calc(1.319 * var(--u)), 17px);                        /* 19px */
    height: auto;
  }


  /* The stats card overlaps the bottom of the hero */
  .hero { padding-bottom: calc(calc(7 * var(--u)) + 24px); }
  .hero__pause { bottom: calc(calc(7 * var(--u)) + 16px); }
}

/* Scroll effect on desktop (script.js adds .has-parallax; not with reduced
   motion or without JS). The hero fills the whole screen, the stats card
   starts hidden below it and rises as you scroll, while the hero text
   drifts down slightly. After 1–2 scroll steps the card is fully visible. */
@media (min-width: 1024px) and (orientation: landscape) {
  .has-parallax .hero {
    min-height: min(55.556vw, 100vh);
    min-height: min(55.556vw, 100svh);
    padding-bottom: calc(calc(11 * var(--u)) + 24px);                /* text ends calc(4 * var(--u)) higher; it drifts down into place */
  }
  .has-parallax .hero__content,
  .has-parallax .stats__list { will-change: transform; }
  /* Starting position of the card, set in CSS so it is already hidden on
     the very first frame (script.js then moves it as you scroll) */
  .has-parallax .stats__list { transform: translate3d(0, calc(calc(7 * var(--u)) + 48px), 0); }
}

/* =========================================================
   STATS
   ========================================================= */
.stats {
  position: relative;
  z-index: 1;
  display: flow-root;                 /* keeps the card's negative margin inside */
  background: var(--teal);
  color: var(--sand);
}

/* Curve cutting into the video — part of this strip, not a section */
.stats__wave-top {
  position: absolute;
  left: 0;
  bottom: calc(100% - 1px);
  width: 100%;
  height: var(--wave-top-h);
  color: var(--teal);
}

/* Key tour facts on a white card that sits across the edge of the video */
.stats__list {
  position: relative;
  z-index: 2;
  width: calc(100% - 32px);
  margin: -20px auto 0;
  padding: 22px 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px 12px;
  background: var(--white);
  color: var(--ink);
  border-radius: 20px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .22);
}

/* Icon on the left, value and label stacked on the right */
.stat {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 10px;
  align-items: center;
}

.stat__icon {
  grid-row: 1 / span 2;
  width: 22px;
  height: 22px;
  padding: 9px;
  box-sizing: content-box;
  /* The circle is drawn as a background, not with border-radius:
     border-radius on an <svg> also crops the icon itself to a circle,
     which cut off the corners of the kayak icon */
  background: radial-gradient(circle closest-side,
    rgba(255, 107, 74, .12) calc(100% - 1px),
    rgba(255, 107, 74, 0) 100%);
  color: #E0553A;
}

.stat__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1;
  white-space: nowrap;
}

.stat__label {
  margin-top: 4px;
  font-size: .875rem;
  line-height: 1.2;
  color: rgba(11, 42, 48, .68);
}

/* The sea washing up on the sand: deep water (the teal section),
   a band of shallow water, then the sand. The drawing has 30 units of
   extra room above the wave (viewBox starts at -30) so the shallow band
   never gets cut flat on the crest; margin-top subtracts that room. */
.stats__wave-bottom {
  display: block;
  width: 100%;
  height: max(calc(14.583 * var(--u)), 74.7px);      /* 210 units: 180 wave + 30 room */
  margin-top: calc(28px - (max(calc(14.583 * var(--u)), 74.7px) - max(calc(12.5 * var(--u)), 64px)));
  margin-bottom: -1px;
}

/* Phones get their own, simpler wave: the wide one squeezed into a
   narrow screen looks steep and busy. Same proportions at any phone width */
.stats__wave-bottom--wide { display: none; }
.stats__wave-bottom--phone {
  height: 19vw;                       /* 76 / 400 of the width */
  margin-top: calc(24px - calc(4 * var(--u)));       /* 16 units of room above the wave */
}

@media (min-width: 744px) {
  .stats__wave-bottom--wide  { display: block; }
  .stats__wave-bottom--phone { display: none; }
}

.wave-sand    { fill: var(--sand); }
.wave-shallow { fill: var(--shallow); }

/* Entrance: script.js animates the shape of the shore itself (a wave that
   washes along the beach), so there are no CSS transitions here */

@media (min-width: 744px) {
  .stats__list {
    width: var(--container);
    display: flex;
    justify-content: space-between;
    padding: 24px 28px;
  }
  .stat {
    flex: 1;
    justify-content: center;
  }
  .stat + .stat { padding-left: 16px; }
  .stat + .stat::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8%;
    bottom: 8%;
    width: 1px;
    background: rgba(11, 42, 48, .12);
  }
}

/* Phones: the first screen is only the video; the card starts just below */
@media (max-width: 743px) {
  .stats__list { margin-top: 8px; }
}

/* Very narrow phones: slightly smaller card contents */
@media (max-width: 359px) {
  .stats__list {
    width: calc(100% - 24px);
    padding: 18px 12px;
    gap: 18px 8px;
  }
  .stat { column-gap: 8px; }
  .stat__icon {
    width: 18px;
    height: 18px;
    padding: 7px;
  }
  .stat__num { font-size: 1.25rem; }
  .stat__label { font-size: .8125rem; }
}

/* Stats: desktop */
@media (min-width: 1024px) and (orientation: landscape) {
  .stats__list {
    margin-top: calc(-7 * var(--u));                  /* card sits across the video edge */
    padding: max(calc(2.2 * var(--u)), 22px) max(calc(2.8 * var(--u)), 22px);
  }
  .stat__icon {
    width: max(calc(1.806 * var(--u)), 22px);                        /* 26px */
    height: max(calc(1.806 * var(--u)), 22px);
    padding: max(calc(.764 * var(--u)), 9px);                        /* 11px */
  }
  .stat__num { font-size: max(calc(2.2 * var(--u)), 1.5rem); }       /* 32px */
  .stat__label { font-size: max(calc(1.042 * var(--u)), 14px); }     /* 15px */
  .stats__wave-bottom {
    height: calc(14.583 * var(--u));
    margin-top: calc(max(calc(2.5 * var(--u)), 24px) - calc(2.083 * var(--u)));     /* 36px gap to the wave, minus the extra room */
  }
}

/* =========================================================
   PHONES IN LANDSCAPE — short screens, keep everything compact
   ========================================================= */
@media (orientation: landscape) and (max-height: 500px) {
  .hero {
    min-height: 100vh;
    min-height: 100svh;
    padding-top: 72px;
  }
  .hero__title { font-size: 2.25rem; }
  .hero__subtitle { margin-top: 8px; font-size: 1rem; }
  .hero__actions { margin-top: 20px; }

}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;   /* no endless loops */
    transition-duration: .01ms !important;
  }
}

/* =========================================================
   TOURS
   Six tours. Phones: a swipeable row (the next card peeks in).
   Tablets: two columns. Desktop: three columns.
   A card opens a dialog with the full details.
   ========================================================= */
.tours {
  background: var(--sand);
  color: var(--ink);
  padding: 16px 0 72px;
}

.tours__head {
  width: var(--container);
  margin: 0 auto 28px;
  text-align: center;
}

.section-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.5rem;
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--ink);
  text-wrap: balance;
}
.section-title__dot { color: var(--coral); }

/* Small label above a section heading; it uses the same word as the menu.
   On sand it is the darker teal, so it stays readable */
.tours .eyebrow { color: var(--teal); }

.section-sub {
  max-width: 44ch;
  text-wrap: balance;
  margin: 12px auto 0;
  font-size: 1.0625rem;
  line-height: 1.5;
  color: rgba(11, 42, 48, .75);
}

/* ----- The list: swipe row on phones ----- */
.tours__list {
  display: flex;
  gap: 14px;
  margin: 0;
  padding: 6px var(--gutter) 18px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.tours__list::-webkit-scrollbar { display: none; }

/* ----- Card ----- */
.tour-card {
  position: relative;
  flex: 0 0 min(82vw, 360px);
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
  background: var(--white);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(11, 42, 48, .06), 0 12px 32px rgba(11, 42, 48, .08);
  /* --rise is set by the scroll effect (script.js),
     --pop makes the most popular tour a little larger */
  transform: translate3d(0, var(--rise, 0px), 0) scale(var(--pop, 1));
  transition: box-shadow .3s ease;
}

/* Most popular: coral outline, a badge, and slightly larger on
   tablets and desktop (in the phone row it is simply first) */
.tour-card--popular {
  z-index: 1;
  box-shadow: 0 0 0 2px var(--coral), 0 16px 40px rgba(11, 42, 48, .14);
}
@media (min-width: 744px) {
  .tour-card--popular { --pop: 1.04; }
}

.tour-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #d9e3e0;
}
.tour-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}

.tour-card__badge {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--coral);
  color: var(--ink);
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.2;
}

.tour-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 20px 20px 22px;
}

.tour-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.1;
}

/* The title is the button; its ::after stretches over the whole card,
   so the card opens from anywhere */
.tour-card__open {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.tour-card__open::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.tour-card__open:focus-visible { outline: none; }
.tour-card:has(.tour-card__open:focus-visible) {
  outline: 3px solid var(--teal);
  outline-offset: 3px;
}

.tour-card__desc {
  margin: 12px 0 0;
  font-size: .9375rem;
  line-height: 1.5;
  color: rgba(11, 42, 48, .72);
}

.tour-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  font-size: .875rem;
  font-weight: 500;
  color: var(--teal-dark);
}
.tour-card__meta li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.tour-card__meta svg {
  width: 16px;
  height: 16px;
  flex: none;
}

.tour-card__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 16px;
}

.tour-card__price {
  margin: 0;
  font-size: .875rem;
  color: rgba(11, 42, 48, .7);
}
.tour-card__price strong {
  margin: 0 2px;
  font-family: var(--font-display);
  font-size: 1.625rem;
  font-weight: 700;
  color: var(--ink);
}

/* "View tour" behaves like the other links on the site: pointing at the
   card moves the arrow forward and draws a coral line under the text.
   The arrow points right, where the details panel slides in from */
.tour-card__more {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  padding-bottom: 3px;
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--coral-text);
  transition: color .2s ease;
}
.tour-card__more::after {
  content: "";
  position: absolute;
  left: 0;
  right: calc(1em + 6px);             /* under the text, not the arrow */
  bottom: 0;
  height: 1.5px;
  background: var(--coral);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .35s cubic-bezier(.65, 0, .35, 1);
}
.tour-card__arrow {
  width: 1em;
  height: 1em;
  transition: transform .35s cubic-bezier(.22, 1, .36, 1);
}
.tour-card:has(.tour-card__open:focus-visible) .tour-card__more { color: var(--btn-hover); }
.tour-card:has(.tour-card__open:focus-visible) .tour-card__more::after { transform: scaleX(1); }
.tour-card:has(.tour-card__open:focus-visible) .tour-card__arrow { transform: translateX(4px); }

@media (hover: hover) {
  .tour-card:hover {
    box-shadow: 0 1px 2px rgba(11, 42, 48, .06), 0 18px 40px rgba(11, 42, 48, .14);
  }
  .tour-card--popular:hover {
    box-shadow: 0 0 0 2px var(--coral), 0 18px 40px rgba(11, 42, 48, .16);
  }
  .tour-card:hover .tour-card__media img { transform: scale(1.04); }
  .tour-card:hover .tour-card__more { color: var(--btn-hover); }
  .tour-card:hover .tour-card__more::after { transform: scaleX(1); }
  .tour-card:hover .tour-card__arrow { transform: translateX(4px); }
}

/* ----- Entrance (script.js marks each card .is-waiting until it is properly
   on screen): it fades in, grows a touch and slides up into place, a row one
   card after another. Phones: from the right too, where the row scrolls from.
   The rise while scrolling is --rise above. ----- */
@media (prefers-reduced-motion: no-preference) {
  .js .tour-card {
    transition: box-shadow .3s ease,
                opacity .8s ease var(--delay, 0s),
                translate 1.1s cubic-bezier(.16, 1, .3, 1) var(--delay, 0s),
                scale 1.1s cubic-bezier(.16, 1, .3, 1) var(--delay, 0s);
  }
  .js .tour-card.is-waiting {
    opacity: 0;
    translate: 0 64px;
    scale: .94;
  }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 743px) {
  .js .tour-card.is-waiting { translate: 96px 32px; }
}

/* ----- Tablets: two columns ----- */
@media (min-width: 744px) {
  .tours { padding: 24px 0 88px; }
  .tours__head { margin-bottom: 36px; }
  .section-title { font-size: 3rem; }

  .tours__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    width: var(--container);
    margin: 0 auto;
    padding: 0;
    overflow: visible;
  }
}

/* ----- Desktop: three columns, sizes from the 1440 layout ----- */
@media (min-width: 1024px) and (orientation: landscape) {
  .tours { padding: calc(1.667 * var(--u)) 0 calc(6.667 * var(--u)); }
  .tours__head { margin-bottom: calc(3.056 * var(--u)); }
  .section-title { font-size: max(calc(3.333 * var(--u)), 2.5rem); }           /* 48px */
  .section-sub {
    margin-top: calc(.972 * var(--u));
    font-size: max(calc(1.25 * var(--u)), 1rem);                                 /* 18px */
  }

  .tours__list {
    grid-template-columns: repeat(3, 1fr);
    gap: calc(2.222 * var(--u));                                                 /* 32px */
  }

  .tour-card { border-radius: max(calc(1.389 * var(--u)), 16px); }               /* 20px */
  .tour-card__badge {
    top: max(calc(.972 * var(--u)), 12px);
    left: max(calc(.972 * var(--u)), 12px);
    font-size: max(calc(.903 * var(--u)), .8125rem);
  }
  .tour-card__body { padding: max(calc(1.389 * var(--u)), 18px) max(calc(1.389 * var(--u)), 18px) max(calc(1.528 * var(--u)), 20px); }
  .tour-card__title { font-size: max(calc(1.667 * var(--u)), 1.375rem); }        /* 24px */
  .tour-card__desc { font-size: max(calc(1.042 * var(--u)), .875rem); }          /* 15px */
  .tour-card__meta { font-size: max(calc(.972 * var(--u)), .8125rem); }          /* 14px */
  .tour-card__meta svg {
    width: max(calc(1.111 * var(--u)), 15px);
    height: max(calc(1.111 * var(--u)), 15px);
  }
  .tour-card__price { font-size: max(calc(.972 * var(--u)), .8125rem); }
  .tour-card__price strong { font-size: max(calc(1.806 * var(--u)), 1.5rem); }   /* 26px */
  .tour-card__more { font-size: max(calc(1.042 * var(--u)), .875rem); }          /* 15px */
}

/* =========================================================
   TOUR DETAILS DIALOG
   Centred window on larger screens, a sheet from the bottom on phones.
   ========================================================= */
html:has(.tour-dialog[open]) { overflow: hidden; }

.tour-dialog {
  width: 100%;
  max-width: 100%;
  max-height: 92svh;
  margin: auto 0 0;
  padding: 0;
  border: 0;
  border-radius: 20px 20px 0 0;
  background: var(--white);
  color: var(--ink);
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
}
.tour-dialog::backdrop {
  background: rgba(6, 32, 30, .55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.tour-dialog[open] { animation: dialog-in .45s cubic-bezier(.22, 1, .36, 1); }
.tour-dialog[open]::backdrop { animation: backdrop-in .3s ease; }
.tour-dialog.is-closing::backdrop {
  opacity: 0;
  transition: opacity .2s ease;
}

/* Phones: the sheet slides up from the bottom */
@keyframes dialog-in {
  from { transform: translateY(100%); }
}
@keyframes backdrop-in {
  from { opacity: 0; }
}

.tour-dialog__scroll {
  position: relative;
  display: flex;
  flex-direction: column;
  max-height: 92svh;
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* Content fills the panel, so the Book bar sits at the very bottom
   even when the text is short */
.tour-dialog__content {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
}
.tour-dialog__body { flex: 1 0 auto; }

.tour-dialog__close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
  cursor: pointer;
}
.tour-dialog__close svg {
  width: 20px;
  height: 20px;
}
.tour-dialog__close:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 2px;
}

.tour-dialog__img {
  width: 100%;
  height: auto;                       /* the height attribute would win otherwise */
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.tour-dialog__body { padding: 22px 20px 28px; }

.tour-dialog__badge {
  display: inline-block;
  margin: 0 0 10px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--coral);
  font-size: .8125rem;
  font-weight: 600;
}

.tour-dialog__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2rem;
  line-height: 1.05;
}

/* Duration, level and group size in one line (wraps on narrow screens) */
.tour-dialog__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  font-size: .9375rem;
  font-weight: 500;
  color: var(--teal-dark);
}
.tour-dialog__facts li {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tour-dialog__facts svg,
.tour-dialog__meet svg {
  width: 18px;
  height: 18px;
  flex: none;
}

.tour-dialog__lead {
  max-width: 62ch;
  margin: 18px 0 0;
  font-size: 1rem;
  line-height: 1.6;
}

.tour-dialog__cols {
  display: grid;
  gap: 22px;
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid rgba(11, 42, 48, .1);
}

.tour-dialog__h {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
}

.tour-dialog__checks,
.tour-dialog__notes {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: .9375rem;
  line-height: 1.45;
}
.tour-dialog__checks li {
  display: flex;
  gap: 8px;
}
.tour-dialog__checks svg {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 1px;
  color: var(--teal);
}
.tour-dialog__notes li {
  position: relative;
  padding-left: 16px;
}
.tour-dialog__notes li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .6em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal);
}

.tour-dialog__meet {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 0;
  font-size: .9375rem;
  font-weight: 500;
}

/* Price and "Book this tour" stay stuck to the bottom while you scroll */
.tour-dialog__bar {
  position: sticky;
  bottom: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px));
  background: var(--white);
  border-top: 1px solid rgba(11, 42, 48, .1);
}
.tour-dialog__bar-price {
  margin: 0;
  font-size: .875rem;
  color: rgba(11, 42, 48, .7);
}
.tour-dialog__bar-price strong {
  margin: 0 2px;
  font-family: var(--font-display);
  font-size: 1.625rem;
  font-weight: 700;
  color: var(--ink);
}

.btn--pill {
  padding: 14px 26px;
  border-radius: 999px;
  font-weight: 600;
}
.btn:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 3px;
}

.tour-dialog__weather {
  margin: 22px 0 0;
  font-size: .875rem;
  line-height: 1.45;
  color: rgba(11, 42, 48, .7);
}

/* Tablets and desktop: a panel that slides in from the right,
   full height, with the page dimmed behind it */
@media (min-width: 744px) {
  .tour-dialog {
    width: min(620px, 88vw);
    height: 100dvh;
    max-height: 100dvh;
    margin: 0 0 0 auto;
    border-radius: 20px 0 0 20px;
  }
  .tour-dialog__scroll {
    height: 100%;
    max-height: 100dvh;
  }
  .tour-dialog__body { padding: 28px 36px 30px; }
  .tour-dialog__bar { padding: 16px 36px; }
  .tour-dialog__title { font-size: 2.5rem; }
  .tour-dialog__cols { grid-template-columns: 1fr 1fr; gap: 28px; }

  @keyframes dialog-in {
    from { transform: translateX(100%); }
  }
}

/* Desktop: a wider panel on large screens (620px at 1440, up to 820px) */
@media (min-width: 1024px) and (orientation: landscape) {
  .tour-dialog { width: min(max(620px, 36vw), 820px); }
}

/* =========================================================
   SMOOTH SCROLLING (Lenis, only on computers with a mouse or trackpad)
   Rules from lenis.css
   ========================================================= */
html.lenis,
html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* =========================================================
   BOOKING (inside the tour panel)
   ========================================================= */
.bk {
  flex: 1 0 auto;
  padding: 22px 20px 28px;
}

.bk-head { margin-bottom: 18px; }

.bk-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 14px -6px;
  padding: 6px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--teal-dark);
  font: inherit;
  font-size: .9375rem;
  font-weight: 600;
  cursor: pointer;
}
.bk-back svg { width: 18px; height: 18px; }

.bk-step {
  margin: 0 0 4px;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--teal-dark);
}

.bk-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2rem;
  line-height: 1.05;
}
.bk-title:focus { outline: none; }

.bk-label {
  margin: 22px 0 10px;
  padding: 0;
  font-size: .9375rem;
  font-weight: 600;
}

.bk-hint {
  margin: 14px 0 0;
  font-size: .875rem;
  line-height: 1.5;
  color: rgba(11, 42, 48, .7);
}

.bk-error {
  margin: 18px 0 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: #FDECE7;
  color: #8E2A12;
  font-size: .9375rem;
  font-weight: 500;
}

.bk-link {
  padding: 4px 2px;
  border: 0;
  background: none;
  color: var(--coral-text);
  font: inherit;
  font-size: .875rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* All buttons and fields in the booking share one focus ring */
.bk :is(button, input, textarea):focus-visible,
.bk-option:has(input:focus-visible),
.bk-time:has(input:focus-visible) {
  outline: 3px solid var(--teal);
  outline-offset: 2px;
}

/* ----- The chosen tour, shown on every step ----- */
.bk-chosen {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: 14px;
  background: var(--sand);
}
.bk-chosen img {
  width: 64px;
  height: 48px;
  flex: none;
  border-radius: 8px;
  object-fit: cover;
}
.bk-chosen > div { flex: 1; min-width: 0; }
.bk-chosen__name {
  margin: 0;
  font-weight: 600;
  line-height: 1.25;
}
.bk-chosen__meta {
  margin: 2px 0 0;
  font-size: .875rem;
  color: rgba(11, 42, 48, .7);
}

/* ----- Step: choose a tour ----- */
.bk-options {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
}
.bk-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px 10px 10px;
  border: 1.5px solid rgba(11, 42, 48, .14);
  border-radius: 14px;
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease;
}
.bk-option input,
.bk-time input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.bk-option img {
  width: 76px;
  height: 57px;
  flex: none;
  border-radius: 8px;
  object-fit: cover;
}
.bk-option__text { display: grid; gap: 2px; }
.bk-option__name { font-weight: 600; }
.bk-option__meta { font-size: .875rem; color: rgba(11, 42, 48, .7); }
.bk-option:has(input:checked) {
  border-color: var(--teal);
  background: rgba(21, 122, 112, .06);
  box-shadow: inset 0 0 0 1px var(--teal);
}
@media (hover: hover) {
  .bk-option:hover { border-color: rgba(11, 42, 48, .3); }
}

/* ----- Step: date and time ----- */
.bk-cal {
  padding: 14px;
  border: 1.5px solid rgba(11, 42, 48, .12);
  border-radius: 16px;
}
.bk-cal__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.bk-cal__month {
  margin: 0;
  font-weight: 600;
}
.bk-cal__nav {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: var(--sand);
  color: var(--ink);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}
.bk-cal__nav:disabled { opacity: .35; cursor: default; }
.bk-cal__week,
.bk-cal__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  text-align: center;
}
.bk-cal__week {
  margin-bottom: 4px;
  font-size: .75rem;
  font-weight: 600;
  color: rgba(11, 42, 48, .55);
}
.bk-day {
  height: 40px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: .9375rem;
  cursor: pointer;
}
.bk-day:disabled {
  color: rgba(11, 42, 48, .25);
  cursor: default;
}
@media (hover: hover) {
  .bk-day:not(:disabled):hover { background: var(--sand); }
}
.bk-day[aria-pressed="true"] {
  background: var(--teal);
  color: var(--white);
  font-weight: 600;
}

.bk-times {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}
.bk-times--wide { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); margin-bottom: 6px; }
.bk-time {
  position: relative;
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border: 1.5px solid rgba(11, 42, 48, .14);
  border-radius: 12px;
  cursor: pointer;
}
.bk-time__t { font-weight: 600; }
.bk-time__hint { font-size: .8125rem; color: rgba(11, 42, 48, .65); }
.bk-time:has(input:checked) {
  border-color: var(--teal);
  background: rgba(21, 122, 112, .06);
  box-shadow: inset 0 0 0 1px var(--teal);
}
.bk-time.is-full {
  cursor: default;
  opacity: .45;
}

/* ----- Step: who is coming ----- */
.bk-count {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(11, 42, 48, .1);
}
.bk-count__label { margin: 0; font-weight: 600; }
.bk-count__sub { margin: 2px 0 0; font-size: .875rem; color: rgba(11, 42, 48, .7); }
.bk-count__ctrl {
  display: flex;
  align-items: center;
  gap: 12px;
}
.bk-count__ctrl button {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1.5px solid rgba(11, 42, 48, .2);
  border-radius: 50%;
  background: var(--white);
  color: var(--ink);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}
.bk-count__ctrl button:disabled { opacity: .3; cursor: default; }
.bk-count__ctrl output {
  min-width: 1.5em;
  font-size: 1.125rem;
  font-weight: 600;
  text-align: center;
}

/* ----- Step: your details ----- */
.bk-summary {
  padding: 12px;
  border-radius: 16px;
  background: var(--sand);
}
.bk-summary .bk-chosen { padding: 0; background: none; }
.bk-summary dl {
  display: grid;
  gap: 6px;
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px solid rgba(11, 42, 48, .1);
  font-size: .875rem;
}
.bk-summary dl div { display: flex; gap: 10px; }
.bk-summary dt { flex: none; width: 3.5em; color: rgba(11, 42, 48, .6); }
.bk-summary dd { margin: 0; }

.bk-fields { display: grid; gap: 14px; margin-top: 20px; }
/* (the contact form uses the same fields) */
.bk-field,
.contact__field { display: grid; gap: 6px; margin: 0; }
.bk-field label,
.contact__field label { font-size: .9375rem; font-weight: 600; }
.bk-field label span { font-weight: 400; color: rgba(11, 42, 48, .6); }
.bk-field input,
.bk-field textarea,
.contact__field input,
.contact__field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid rgba(11, 42, 48, .2);
  border-radius: 12px;
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;                    /* 16px stops iPhones zooming in */
}
.bk-field textarea,
.contact__field textarea { resize: vertical; }
/* Saved details filled in by the browser: keep the white field, not the browser's blue */
.bk-field input:-webkit-autofill,
.contact__field input:-webkit-autofill {
  -webkit-text-fill-color: var(--ink);
  -webkit-box-shadow: 0 0 0 1000px var(--white) inset;
  transition: background-color 9999s ease 0s;
}
/* Typing in a field: a teal outline with a soft glow */
.bk-field input:focus-visible,
.bk-field textarea:focus-visible,
.contact__field input:focus-visible,
.contact__field textarea:focus-visible {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(21, 122, 112, .2);
}
/* A field that needs fixing: a coral outline with a soft glow, easy to spot
   (it stays coral while you are in it, until you change it) */
.bk-field [aria-invalid="true"],
.contact__field [aria-invalid="true"],
.bk-field [aria-invalid="true"]:focus-visible,
.contact__field [aria-invalid="true"]:focus-visible {
  border-color: #C0461F;
  box-shadow: 0 0 0 3px rgba(192, 70, 31, .16);
}

/* ----- Done: centred in the panel, the tick draws itself ----- */
.bk:has(.bk-done) {
  display: flex;
  align-items: center;
  justify-content: center;
}
.bk-done {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 420px;
  padding: 24px 0;
  text-align: center;
}
.bk-done__icon {
  width: 76px;
  height: 76px;
  margin-bottom: 6px;
}
.bk-done__icon circle,
.contact__done-icon circle { fill: var(--teal); }
.bk-done__text {
  margin: 0;
  line-height: 1.55;
}
.bk-done__summary {
  display: grid;
  gap: 8px;
  width: 100%;
  margin: 6px 0 0;
  padding: 16px 18px;
  border-radius: 16px;
  background: var(--sand);
  font-size: .9375rem;
  text-align: left;
}
.bk-done__summary div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.bk-done__summary dt { color: rgba(11, 42, 48, .6); }
.bk-done__summary dd {
  margin: 0;
  font-weight: 600;
  text-align: right;
}
.bk-demo {
  margin: 0;
  font-size: .8125rem;
  color: rgba(11, 42, 48, .6);
}
.bk-done__btn {
  min-width: 160px;
  margin-top: 6px;
}

@media (prefers-reduced-motion: no-preference) {
  .bk-done__icon circle,
  .contact__done-icon circle {
    transform-origin: center;
    animation: done-pop .45s cubic-bezier(.34, 1.56, .64, 1) both;
  }
  .bk-done__icon path,
  .contact__done-icon path {
    stroke-dasharray: 1;
    animation: done-tick .45s ease-out .3s both;
  }
}
@keyframes done-pop {
  from { transform: scale(.4); opacity: 0; }
}
@keyframes done-tick {
  from { stroke-dashoffset: 1; }
  to   { stroke-dashoffset: 0; }
}

@media (min-width: 744px) {
  .bk { padding: 28px 36px 32px; }
  .bk-title { font-size: 2.25rem; }
}

/* =========================================================
   ABOUT
   A photo of the coast behind the whole section under a dark blue
   wash; text on the left, the four reasons as cards (a row of four on
   desktop). The photo moves a little slower than the page (script.js).
   ========================================================= */
.about {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--deep);
  color: var(--sand);
  padding: 106px 0 128px;      /* the water layers of the edges reach 10 / 24px further in */
}

/* Background photo, taller than the section so it can drift while scrolling */
.about__bg {
  position: absolute;
  inset: -48px 0;
  z-index: -1;
}
.about__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 55% 50%;
}
/* Phones and tablets: the text runs the full width, so the wash is even */
.about__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(8, 40, 56, .62) 0%,
    rgba(8, 40, 56, .9) 30%,
    rgba(8, 40, 56, .94) 100%);
}

/* The curved sand edges at the top and bottom, with water between the
   sand and the photo: one layer at the top (the photo already shows the
   sea there), two at the bottom, over the dark end of the section.
   202 drawing units tall: the old 140 for the sand edge plus 62 for the
   layers, so the sand keeps its old size */
.about__edge {
  position: absolute;
  left: 0;
  width: 100%;
  height: 81px;
  fill: var(--sand);
}
.about__edge--top { top: -1px; }
.about__edge--bottom { bottom: -1px; }

.about__inner {
  width: var(--container);
  margin: 0 auto;
}

.eyebrow {
  margin: 0 0 10px;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--teal-glow);              /* on the dark About; light sections set their own */
}

.about__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.5rem;
  line-height: 1.02;
  letter-spacing: -.01em;
  color: var(--sand);
  text-wrap: balance;
}

.about__lead {
  max-width: 46ch;
  margin: 16px 0 0;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: rgba(244, 243, 234, .88);
}

/* The four reasons, as cards over the photo */
.reasons {
  display: grid;
  gap: 12px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}
.reason {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 14px;
  row-gap: 4px;
  align-items: start;
  padding: 16px;
  border: 1px solid rgba(244, 243, 234, .12);
  border-radius: 16px;
  background: rgba(10, 64, 90, .72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.reason__icon {
  grid-row: 1 / span 2;
  width: 22px;
  height: 22px;
  padding: 10px;
  box-sizing: content-box;
  border-radius: 50%;
  background: rgba(255, 107, 74, .16);
  color: var(--coral);
}
.reason__title {
  margin: 4px 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.15;
  color: var(--sand);
}
.reason__text {
  margin: 0;
  font-size: .9375rem;
  line-height: 1.5;
  color: rgba(244, 243, 234, .82);
}

.about__cta {
  margin-top: 32px;
  min-height: 48px;
  padding: 14px 24px;             /* same size as the hero button */
}
.about__cta:focus-visible { outline-color: var(--sand); }

@media (min-width: 744px) {
  .about { padding: 144px 0 172px; }
  .about__edge { height: 121px; }
  .about__title { font-size: 3rem; }
  .reasons {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
}

/* Desktop: text on the darker left side of the photo, the reasons in one row */
@media (min-width: 1024px) and (orientation: landscape) {
  .about {
    padding: calc(12.361 * var(--u)) 0 calc(13.611 * var(--u));   /* 178 / 196px */
  }
  .about__bg::after {
    background: linear-gradient(90deg,
      rgba(8, 40, 56, .93) 0%,
      rgba(8, 40, 56, .8) 45%,
      rgba(8, 40, 56, .25) 100%);
  }
  .about__edge { height: calc(10.521 * var(--u)); }               /* 151px */
  .eyebrow { font-size: max(calc(.903 * var(--u)), .8125rem); }
  .about__title {
    max-width: 12ch;
    font-size: max(calc(3.333 * var(--u)), 2.75rem);              /* 48px */
  }
  .about__lead {
    margin-top: calc(1.25 * var(--u));
    font-size: max(calc(1.25 * var(--u)), 1.0625rem);              /* 18px */
  }
  .reasons {
    grid-template-columns: repeat(4, 1fr);
    gap: calc(1.111 * var(--u));                                  /* 16px */
    margin-top: calc(3.889 * var(--u));                           /* 56px */
  }
  .reason {
    display: block;
    padding: max(calc(1.528 * var(--u)), 18px);                   /* 22px */
  }
  .reason__icon {
    width: max(calc(1.667 * var(--u)), 22px);
    height: max(calc(1.667 * var(--u)), 22px);
    padding: max(calc(.694 * var(--u)), 10px);
    margin-bottom: calc(.972 * var(--u));                         /* 14px */
  }
  .reason__title { font-size: max(calc(1.528 * var(--u)), 1.25rem); }  /* 22px */
  .reason__text {
    margin-top: 4px;
    font-size: max(calc(1.042 * var(--u)), .9375rem);              /* 15px */
  }
  .about__cta {
    margin-top: calc(2.5 * var(--u));
    min-height: 0;
    padding: max(calc(1.111 * var(--u)), 13px) max(calc(2.083 * var(--u)), 24px);   /* 16px 30px, as the hero */
    font-size: max(calc(1.181 * var(--u)), 15px);                                    /* 17px */
  }
}

/* The cards, and the button under them, rise into place while you scroll
   (--rise, set by script.js) */
.reason,
.about__cta { transform: translate3d(0, var(--rise, 0px), 0); }

/* Appearing: script.js marks each item .is-waiting until it is properly on
   screen, then it fades in and slides up; the cards also grow a touch */
@media (prefers-reduced-motion: no-preference) {
  .js .about [data-reveal],
  .js .about .reason {
    transition: opacity .8s ease var(--delay, 0s),
                translate 1s cubic-bezier(.16, 1, .3, 1) var(--delay, 0s),
                scale 1s cubic-bezier(.16, 1, .3, 1) var(--delay, 0s);
  }
  /* The button keeps its hover colour change */
  .js .about .about__cta {
    transition: opacity .8s ease var(--delay, 0s),
                translate 1s cubic-bezier(.16, 1, .3, 1) var(--delay, 0s),
                background-color .2s ease, color .2s ease;
  }
  .js .about .is-waiting {
    opacity: 0;
    translate: 0 40px;
  }
  .js .about .reason.is-waiting {
    translate: 0 64px;
    scale: .94;
  }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 743px) {
  .js .about .reason.is-waiting { translate: 0 48px; }
}

/* =========================================================
   GALLERY
   ========================================================= */
.gallery {
  background: var(--sand);
  color: var(--ink);
  padding: 40px 0 72px;
}
.gallery .eyebrow { color: var(--teal); }

.gallery__head {
  width: var(--container);
  margin: 0 auto 28px;
  text-align: center;
}

/* Phones and tablets: the wide photo on top, then the tall one on the left
   with two smaller ones next to it */
.gallery__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "wide wide"
    "tall a"
    "tall b";
  gap: 12px;
  width: var(--container);
  margin: 0 auto;
}
.gallery__tile--wide { grid-area: wide; aspect-ratio: 2 / 1; }
.gallery__tile--tall { grid-area: tall; }
.gallery__tile--a    { grid-area: a; aspect-ratio: 4 / 3; }
.gallery__tile--b    { grid-area: b; aspect-ratio: 4 / 3; }

.gallery__tile {
  min-width: 0;
  /* --rise is set by the scroll effect (script.js) */
  transform: translate3d(0, var(--rise, 0px), 0);
}

/* The whole photo is a button that opens the viewer */
.gallery__item {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 16px;
  overflow: hidden;
  background: #d9e3e0;
  cursor: zoom-in;
}
.gallery__item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}
/* Where each photo is cropped in its frame */
.gallery__tile--wide img { object-position: 50% 30%; }
.gallery__tile--tall img { object-position: 30% 50%; }
.gallery__tile--a img    { object-position: 50% 70%; }

/* A small "open" sign that appears on hover */
.gallery__zoom {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(244, 243, 234, .92);
  color: var(--ink);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .25s ease, transform .35s cubic-bezier(.22, 1, .36, 1);
}
.gallery__zoom svg { width: 18px; height: 18px; }

.gallery__item:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 3px;
}
.gallery__item:focus-visible .gallery__zoom { opacity: 1; transform: none; }
@media (hover: hover) {
  .gallery__item:hover img { transform: scale(1.05); }
  .gallery__item:hover .gallery__zoom { opacity: 1; transform: none; }
}

/* "See all photos": the same text link as "View tour" on the cards */
.gallery__foot {
  margin: 28px 0 0;
  text-align: center;
  transform: translate3d(0, var(--rise, 0px), 0);
}
.gallery__more {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 0 3px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--coral-text);
  cursor: pointer;
  transition: color .2s ease;
}
.gallery__more::after {
  content: "";
  position: absolute;
  left: 0;
  right: calc(1em + 6px);             /* under the text, not the arrow */
  bottom: 0;
  height: 1.5px;
  background: var(--coral);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .35s cubic-bezier(.65, 0, .35, 1);
}
.gallery__more-arrow {
  width: 1em;
  height: 1em;
  transition: transform .35s cubic-bezier(.22, 1, .36, 1);
}
.gallery__more:focus-visible { outline: 3px solid var(--teal); outline-offset: 4px; }
.gallery__more:focus-visible::after { transform: scaleX(1); }
@media (hover: hover) {
  .gallery__more:hover { color: var(--btn-hover); }
  .gallery__more:hover::after { transform: scaleX(1); }
  .gallery__more:hover .gallery__more-arrow { transform: translateX(4px); }
}

@media (min-width: 744px) {
  .gallery { padding: 56px 0 88px; }
  .gallery__head { margin-bottom: 36px; }
  .gallery__grid { gap: 24px; }
  .gallery__item { border-radius: 20px; }
  .gallery__zoom { right: 16px; bottom: 16px; }
  .gallery__foot { margin-top: 32px; }
}

/* Desktop: like the mockup, the wide photo and two smaller ones on the left,
   the tall one on the right. The columns line up with the tour cards above. */
@media (min-width: 1024px) and (orientation: landscape) {
  .gallery { padding: calc(3.889 * var(--u)) 0 calc(6.667 * var(--u)); }      /* 56 / 96px */
  .gallery__head { margin-bottom: calc(3.056 * var(--u)); }
  .gallery__grid {
    grid-template-columns: repeat(3, 1fr);
    /* each row is as tall as a 4:3 photo in one column */
    grid-template-rows: repeat(2, calc((var(--container) - 2 * 2.222 * var(--u)) / 3 * .75));
    grid-template-areas:
      "wide wide tall"
      "a    b    tall";
    gap: calc(2.222 * var(--u));                                               /* 32px */
  }
  .gallery__tile--wide,
  .gallery__tile--a,
  .gallery__tile--b { aspect-ratio: auto; }
  .gallery__item { border-radius: max(calc(1.389 * var(--u)), 16px); }        /* 20px */
  .gallery__zoom {
    right: max(calc(1.111 * var(--u)), 14px);
    bottom: max(calc(1.111 * var(--u)), 14px);
    width: max(calc(2.778 * var(--u)), 40px);
    height: max(calc(2.778 * var(--u)), 40px);
  }
  .gallery__zoom svg { width: 45%; height: 45%; }
  .gallery__foot { margin-top: calc(2.5 * var(--u)); }
  .gallery__more { font-size: max(calc(1.111 * var(--u)), 1rem); }             /* 16px */
}

/* Appearing: script.js marks each photo .is-waiting until it is properly on
   screen, then it fades in, grows a touch and slides up, one after another */
@media (prefers-reduced-motion: no-preference) {
  .js .gallery__tile,
  .js .gallery__foot {
    transition: opacity .8s ease var(--delay, 0s),
                translate 1.1s cubic-bezier(.16, 1, .3, 1) var(--delay, 0s),
                scale 1.1s cubic-bezier(.16, 1, .3, 1) var(--delay, 0s);
  }
  .js .gallery .is-waiting {
    opacity: 0;
    translate: 0 64px;
    scale: .94;
  }
  .js .gallery__foot.is-waiting { translate: 0 32px; scale: 1; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 743px) {
  .js .gallery__tile.is-waiting { translate: 0 48px; }
}

/* =========================================================
   PHOTO VIEWER
   ========================================================= */
html:has(.viewer[open]) { overflow: hidden; }

.viewer {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--sand);
  overflow: hidden;
}
.viewer[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
}
.viewer::backdrop { background: rgba(5, 24, 29, .96); }

.viewer[open] { animation: viewer-in .3s ease; }
.viewer[open]::backdrop { animation: backdrop-in .3s ease; }
.viewer.is-closing,
.viewer.is-closing::backdrop {
  opacity: 0;
  transition: opacity .22s ease;
}
@keyframes viewer-in {
  from { opacity: 0; }
}

.viewer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 12px 8px 20px;
}
.viewer__count {
  margin: 0;
  font-size: .9375rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: rgba(244, 243, 234, .8);
}

/* Round buttons: close and the arrows */
.viewer__close,
.viewer__nav {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(244, 243, 234, .12);
  color: var(--sand);
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.viewer__close svg,
.viewer__nav svg { width: 22px; height: 22px; }
.viewer__close:focus-visible,
.viewer__nav:focus-visible {
  outline: 3px solid var(--sand);
  outline-offset: 2px;
}
@media (hover: hover) {
  .viewer__close:hover,
  .viewer__nav:hover {
    background: var(--sand);
    color: var(--ink);
  }
}

.viewer__stage {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  margin: 0;
  padding: 0 12px;
  /* sideways swipes go to the viewer; up/down and pinch-zoom stay with the browser */
  touch-action: pan-y pinch-zoom;
}
.viewer__img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  border-radius: 12px;
  user-select: none;
  -webkit-user-drag: none;
}

.viewer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 12px 4px;
}
.viewer__caption {
  flex: 1;
  margin: 0;
  font-size: .9375rem;
  line-height: 1.45;
  text-align: center;
  color: rgba(244, 243, 234, .85);
  text-wrap: balance;
}

/* The row of small photos. It scrolls sideways when they don't all fit;
   the current one is bright with a light ring, the others are dimmed */
.viewer__strip {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  padding: 8px 12px max(14px, env(safe-area-inset-bottom));
}
.viewer__strip::-webkit-scrollbar { display: none; }
.viewer__thumbs {
  display: flex;
  gap: 8px;
  width: max-content;
  margin: 0 auto;                     /* centred when they all fit */
  padding: 4px;                       /* room for the ring */
}
.viewer__thumb {
  display: block;
  width: 56px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  overflow: hidden;
  background: rgba(244, 243, 234, .1);
  cursor: pointer;
  opacity: .5;
  transition: opacity .2s ease, box-shadow .2s ease;
}
.viewer__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.viewer__thumb[aria-current="true"] {
  opacity: 1;
  box-shadow: 0 0 0 2px var(--sand);
}
.viewer__thumb:focus-visible {
  outline: 3px solid var(--sand);
  outline-offset: 3px;
  opacity: 1;
}
@media (hover: hover) {
  .viewer__thumb:hover { opacity: .85; }
  .viewer__thumb[aria-current="true"]:hover { opacity: 1; }
}

/* Larger screens: the arrows sit on either side of the photo */
@media (min-width: 744px) {
  .viewer__top { padding: 20px 24px 12px 32px; }
  .viewer__stage { padding: 0 96px; }
  .viewer__bottom { padding: 12px 96px 4px; }
  .viewer__strip { padding: 10px 24px 24px; }
  .viewer__thumbs { gap: 10px; }
  .viewer__thumb {
    width: 84px;
    height: 56px;
    border-radius: 8px;
  }
  .viewer__nav {
    position: absolute;
    top: 50%;
    width: 56px;
    height: 56px;
    margin-top: -28px;
  }
  .viewer__nav svg { width: 26px; height: 26px; }
  .viewer__nav--prev { left: 24px; }
  .viewer__nav--next { right: 24px; }
  .viewer__caption { font-size: 1rem; }
}

/* =========================================================
   REVIEWS
   ========================================================= */
.reviews {
  --reviews-bg: var(--mist);              /* doesn't merge with the sand of the gallery */
  --gap: 12px;
  --card-w: min(84vw, 340px);
  position: relative;
  background: var(--reviews-bg);
  color: var(--ink);
  padding: 84px 0 72px;
}
/* Low sand wave at the top, so this edge matches the others on the page.
   Between two pale colours it has no layers, only a lighter paper shadow
   (at full strength it looks like a grey line); the drawing is 86 units
   tall (64 for the wave, 22 of room for the shadow) */
.reviews__edge {
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 38px;
  fill: var(--sand);
}
.reviews__edge .paper-shade { fill: rgba(4, 34, 42, .035); }
.reviews .eyebrow { color: var(--teal-dark); }   /* readable on the tint */

.reviews__head {
  width: var(--container);
  margin: 0 auto 12px;
  text-align: center;
}

/* ----- Filters: where from, rating, tour (only with JavaScript) ----- */
.reviews__filters { display: none; }
.js .reviews__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 12px;
  width: var(--container);
  margin: 20px auto 0;
}
/* Where the review was left: one row of three buttons, like tabs */
.reviews__sources {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: var(--white);
  box-shadow: 0 1px 2px rgba(11, 42, 48, .06), 0 4px 12px rgba(11, 42, 48, .05);
}
.reviews__source {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: .9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.reviews__source-logo {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--white);
}
.reviews__source-logo img { width: 14px; height: 14px; }
.reviews__source-logo--owl img { width: 17px; height: auto; }
.reviews__source[aria-pressed="true"] {
  background: var(--teal);
  color: var(--white);
}
.reviews__source:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
@media (hover: hover) {
  .reviews__source[aria-pressed="false"]:hover { background: var(--sand); }
}

/* Rating and tour: native pickers, so they work well on phones */
/* Phones: the two pickers share one row, the tour one takes the extra room */
.reviews__selects {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  width: 100%;
}
.reviews__select select { width: 100%; }
.reviews__select { position: relative; }
.reviews__select select {
  appearance: none;
  -webkit-appearance: none;
  height: 44px;
  padding: 0 38px 0 16px;
  border: 0;
  border-radius: 999px;
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-size: .9375rem;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(11, 42, 48, .06), 0 4px 12px rgba(11, 42, 48, .05);
}
/* the little arrow */
.reviews__select::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 18px;
  width: 7px;
  height: 7px;
  margin-top: -6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  pointer-events: none;
}
.reviews__select select:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }

/* The dropdowns script.js builds from the <select>s: the same white pill as
   a button, and a list that drops down in the site's style */
.js .reviews__filters { position: relative; z-index: 5; }   /* lists open over the reviews */
.reviews__select.is-enhanced select {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.pick__button {
  width: 100%;
  height: 44px;
  padding: 0 38px 0 16px;
  border: 0;
  border-radius: 999px;
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-size: .9375rem;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(11, 42, 48, .06), 0 4px 12px rgba(11, 42, 48, .05);
  transition: box-shadow .2s ease;
}
.pick__button:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
@media (hover: hover) {
  .pick__button:hover { box-shadow: 0 1px 2px rgba(11, 42, 48, .08), 0 6px 16px rgba(11, 42, 48, .1); }
}
.reviews__select::after { transition: transform .25s cubic-bezier(.22, 1, .36, 1), margin .25s ease; }
.reviews__select.is-open::after {
  margin-top: -2px;
  transform: rotate(225deg);          /* the arrow turns to point up */
}
/* Computers and tablets: the list drops down under the button */
.pick__panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 20;
  min-width: 100%;
  width: max-content;
  padding: 6px;
  border-radius: 16px;
  background: var(--white);
  box-shadow: 0 2px 6px rgba(11, 42, 48, .08), 0 16px 40px rgba(11, 42, 48, .16);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(.98);
  transform-origin: top left;
  transition: opacity .16s ease, transform .22s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .22s;
}
.reviews__select.is-open .pick__panel {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}
.pick__handle,
.pick__title,
.pick__backdrop { display: none; }     /* only used by the phone sheet below */
.pick__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.pick__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: .9375rem;
  color: var(--ink);
  white-space: nowrap;
  cursor: pointer;
  outline: none;
  transition: background-color .15s ease;
}
.pick__option:focus { background: var(--sand); }
.pick__option[aria-selected="true"] { color: var(--teal); font-weight: 600; }
.pick__text {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.pick__check {
  flex: none;
  width: 16px;
  height: 16px;
  opacity: 0;
}
.pick__option[aria-selected="true"] .pick__check { opacity: 1; }
.pick__stars {
  display: inline-flex;
  gap: 2px;
}
.pick__stars svg {
  width: 15px;
  height: 15px;
  fill: var(--star);
}
/* Touch screens: a little more room for fingers */
@media (pointer: coarse) {
  .pick__option { min-height: 44px; }
}

/* Phones: the list slides up from the bottom of the screen, with large rows,
   like the tour details do. A tap on the dimmed page or a choice closes it */
@media (max-width: 743px) {
  html.pick-sheet-open { overflow: hidden; }
  .js .reviews__filters.has-sheet { z-index: 60; }          /* over the fixed header */
  .pick__backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1;
    background: rgba(6, 32, 30, .45);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility 0s linear .25s;
  }
  .reviews__select.is-open .pick__backdrop {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
  }
  .pick__panel {
    position: fixed;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    width: auto;
    min-width: 0;
    max-height: 75svh;
    overflow-y: auto;
    padding: 10px 12px max(16px, env(safe-area-inset-bottom));
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -12px 40px rgba(0, 0, 0, .2);
    opacity: 1;
    transform: translateY(100%);
    transition: transform .32s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .32s;
  }
  .reviews__select.is-open .pick__panel { transform: none; }
  .pick__handle {
    display: block;
    width: 40px;
    height: 4px;
    margin: 0 auto 10px;
    border-radius: 999px;
    background: rgba(11, 42, 48, .18);
  }
  .pick__title {
    display: block;
    margin: 0 4px 8px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.375rem;
    color: var(--ink);
  }
  .pick__option {
    min-height: 52px;
    padding: 12px 14px;
    border-radius: 12px;
    font-size: 1.0625rem;
  }
  .pick__check { width: 20px; height: 20px; }
  .pick__stars svg { width: 17px; height: 17px; }
}
.reviews__showing {
  flex-basis: 100%;
  margin: 2px 0 0;
  font-size: .8125rem;
  text-align: center;
  color: rgba(11, 42, 48, .6);
}

/* ----- Carousel ----- */
/* The viewport is as wide as the screen, so the side reviews peek in from
   the edges; its padding leaves room for the shadows and the lifted card */
.reviews__viewport {
  overflow: hidden;
  padding: 24px 0 64px;
  margin-bottom: -32px;
}
/* Without JavaScript the reviews are a simple row to swipe through */
.reviews__track {
  display: flex;
  gap: var(--gap);
  overflow-x: auto;
  padding: 0 var(--gutter);
  scroll-snap-type: x mandatory;
}
.reviews__track > .review { flex: none; scroll-snap-align: center; }
/* With JavaScript all reviews sit in the same spot and script.js moves each
   one to its place (--slot: 0 is the middle, -1 left, 1 right) */
.js .reviews__track {
  display: grid;
  justify-items: center;
  overflow: visible;
  padding: 0;
}
.js .reviews__track > .review {
  grid-area: 1 / 1;
  transform: translateX(calc(var(--slot, 0) * (100% + var(--gap)))) translateY(var(--lift, 0px));
}

.review {
  position: relative;
  display: flex;
  flex-direction: column;
  width: var(--card-w);
  margin: 0;
  padding: 24px 22px 20px;
  border-radius: 20px;
  background-color: var(--white);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(11, 42, 48, .06), 0 12px 32px rgba(11, 42, 48, .08);
  /* The teal highlight moves with the reviews: it fades out of the one
     sliding away exactly as fast as it fades into the one sliding in (same
     timing as the slide itself), so it never blinks off and on, and the
     moment where both are half teal passes in a blink while they move */
  --hl: .7s cubic-bezier(.33, 1, .68, 1);
  transition: transform .7s cubic-bezier(.33, 1, .68, 1),
              opacity .5s ease,
              background-color var(--hl),
              color var(--hl),
              box-shadow var(--hl);
}
/* The highlighted review: teal with a soft light from the top left */
.review::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(150deg, rgba(255, 255, 255, .14), transparent 55%),
    linear-gradient(330deg, rgba(10, 64, 90, .4), transparent 60%);
  opacity: 0;
  transition: opacity var(--hl);
  pointer-events: none;
}
.review.is-active {
  --lift: -8px;
  background-color: var(--teal);
  color: var(--sand);
  box-shadow: 0 18px 36px rgba(21, 122, 112, .3);
}
.review.is-active::before { opacity: 1; }
.review.is-side { cursor: pointer; }
.review.is-far,
.review.is-out { opacity: 0; pointer-events: none; }
.review.no-anim { transition: none; }

.review > * { position: relative; }      /* above the light layer */

.review__quote {
  position: absolute;
  top: 22px;
  right: 22px;
  width: 40px;
  height: auto;
  fill: var(--teal);
  opacity: .12;
  transition: fill var(--hl), opacity var(--hl);
}
.review.is-active .review__quote { fill: var(--sand); opacity: .25; }

.review__top {
  display: flex;
  align-items: center;
  gap: 10px;
}
.review__stars {
  display: inline-flex;
  gap: 2px;
}
.review__stars svg {
  width: 18px;
  height: 18px;
  fill: var(--star);
}
.review__stars svg.is-off {
  fill: rgba(11, 42, 48, .15);
  transition: fill var(--hl);
}
.review.is-active .review__stars svg.is-off { fill: rgba(244, 243, 234, .3); }

/* Reviews from Tripadvisor show its green bubbles, as in the hero:
   the official colour for light backgrounds, and the lighter one on teal */
.review__bubbles {
  display: inline-flex;
  gap: 3px;
}
.review__bubbles i {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: #00AA6C;
  transition: background-color var(--hl), box-shadow var(--hl);
}
.review__bubbles i.is-off {
  background-color: transparent;
  box-shadow: inset 0 0 0 1.5px #00AA6C;
}
.review.is-active .review__bubbles i { background-color: #84E9BD; }
.review.is-active .review__bubbles i.is-off {
  background-color: transparent;
  box-shadow: inset 0 0 0 1.5px #84E9BD;
}

/* Where the review was left: a small white badge, as in the hero */
.review__source {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}
.review__source img { width: 15px; height: 15px; }
.review__source--owl img { width: 18px; height: auto; }

.review__text {
  flex: 1;
  margin: 16px 0 0;
}
.review__text p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(11, 42, 48, .85);
  transition: color var(--hl);
}
.review.is-active .review__text p { color: rgba(244, 243, 234, .96); }

.review__who {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(11, 42, 48, .08);
  transition: border-color var(--hl);
}
.review.is-active .review__who { border-top-color: rgba(244, 243, 234, .2); }
.review__avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(21, 122, 112, .12);
  color: var(--teal);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  transition: background-color var(--hl), color var(--hl);
}
.review.is-active .review__avatar { background: var(--sand); color: var(--teal); }
.review__name {
  margin: 0;
  font-weight: 600;
  font-size: .9375rem;
  line-height: 1.3;
}
.review__meta {
  display: block;
  margin-top: 2px;
  font-weight: 400;
  font-size: .8125rem;
  color: var(--teal);
  transition: color var(--hl);
}
.review.is-active .review__meta { color: rgba(244, 243, 234, .8); }

/* Arrows and dots under the reviews */
.reviews__controls {
  display: none;
}
.js .reviews__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.reviews__arrow {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(11, 42, 48, .08), 0 6px 16px rgba(11, 42, 48, .08);
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.reviews__arrow svg { width: 22px; height: 22px; transition: transform .3s cubic-bezier(.22, 1, .36, 1); }
.reviews__arrow:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }
@media (hover: hover) {
  .reviews__arrow:hover { background: var(--teal); color: var(--white); }
  .reviews__arrow[data-step="-1"]:hover svg { transform: translateX(-2px); }
  .reviews__arrow[data-step="1"]:hover svg { transform: translateX(2px); }
}
.reviews__dots {
  display: flex;
  align-items: center;
}
.reviews__dot {
  display: grid;
  place-items: center;
  width: 22px;
  height: 32px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.reviews__dot::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(11, 42, 48, .22);
  transition: width .35s cubic-bezier(.22, 1, .36, 1), background-color .35s ease;
}
.reviews__dot[aria-current="true"] { width: 34px; }
.reviews__dot[aria-current="true"]::before { width: 24px; background: var(--teal); }
.reviews__dot:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; border-radius: 8px; }
@media (hover: hover) {
  .reviews__dot:hover::before { background: rgba(11, 42, 48, .45); }
  .reviews__dot[aria-current="true"]:hover::before { background: var(--teal); }
}

/* Phones: "4 / 12" between the arrows instead of dots, which wouldn't fit */
.reviews__dots { display: none; }
.reviews__count {
  min-width: 5ch;
  margin: 0;
  font-weight: 600;
  font-size: .9375rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: rgba(11, 42, 48, .7);
}
.reviews__controls.is-single { visibility: hidden; }

/* Nothing matches: a message in place of the reviews */
.reviews__empty {
  position: absolute;
  inset: 0 0 auto;
  top: 40%;
  transform: translateY(-50%);
  text-align: center;
}
.reviews__empty[hidden] { display: none; }
.reviews__empty p {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 500;
}
.reviews__reset {
  margin-top: 12px;
  padding: 10px 20px;
  border: 0;
  border-radius: 999px;
  background: var(--teal);
  color: var(--white);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .2s ease;
}
.reviews__reset:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }
@media (hover: hover) {
  .reviews__reset:hover { background: var(--teal-dark); }
}
.reviews__carousel { position: relative; }

/* ----- Ratings at a glance ----- */
.reviews__summary {
  display: grid;
  gap: 24px;
  width: var(--container);
  margin: 40px auto 0;
  padding: 24px 20px;
  border-radius: 20px;
  background: var(--white);
  box-shadow: 0 1px 2px rgba(11, 42, 48, .06), 0 12px 32px rgba(11, 42, 48, .06);
}

.score { text-align: center; }
.score__value {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 3.5rem;
  line-height: 1;
}
.score__stars {
  display: inline-flex;
  gap: 3px;
  margin-top: 8px;
}
.score__stars svg { width: 20px; height: 20px; fill: var(--star); }
.score__total {
  margin: 6px 0 0;
  font-size: .875rem;
  color: rgba(11, 42, 48, .65);
}

.score__bars {
  display: grid;
  gap: 8px;
  align-content: center;
  margin: 0;
}
.score__bar {
  display: grid;
  grid-template-columns: 2.25em 1fr 3ch;
  align-items: center;
  gap: 10px;
  font-size: .875rem;
  font-variant-numeric: tabular-nums;
}
.score__bar-label {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-weight: 600;
}
.score__bar-label svg { width: 13px; height: 13px; fill: var(--star); }
.score__track {
  height: 8px;
  border-radius: 999px;
  background: rgba(11, 42, 48, .08);
  overflow: hidden;
}
.score__fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--teal);
  transform: scaleX(var(--share));
  transform-origin: left center;
  transition: transform 1s cubic-bezier(.22, 1, .36, 1);
}
.score__bar:nth-child(2) .score__fill { transition-delay: .08s; }
.score__bar:nth-child(3) .score__fill { transition-delay: .16s; }
.score__bar:nth-child(4) .score__fill { transition-delay: .24s; }
.score__bar:nth-child(5) .score__fill { transition-delay: .32s; }
.score__bar-count {
  text-align: right;
  color: rgba(11, 42, 48, .65);
}

/* Google and Tripadvisor: each row opens the full list of reviews there */
.platforms {
  display: grid;
  gap: 10px;
  align-content: center;
  margin: 0;
}
.platform {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "logo name  link"
    "logo score score";
  align-items: center;
  column-gap: 14px;
  row-gap: 2px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--sand);
  color: var(--ink);
  text-decoration: none;
  transition: background-color .2s ease;
}
.platform__logo {
  grid-area: logo;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}
.platform__logo img { width: 20px; height: 20px; }
.platform__logo--owl img { width: 25px; height: auto; }
.platform__name {
  grid-area: name;
  font-weight: 600;
  font-size: .9375rem;
  line-height: 1.3;
}
.platform__score {
  grid-area: score;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.2;
}
.platform__count {
  white-space: nowrap;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: .8125rem;
  color: rgba(11, 42, 48, .65);
}
.platform__link {
  grid-area: link;
  justify-self: end;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 3px;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--coral-text);
  white-space: nowrap;
  transition: color .2s ease;
}
.platform__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: calc(1em + 6px);
  bottom: 0;
  height: 1.5px;
  background: var(--coral);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .35s cubic-bezier(.65, 0, .35, 1);
}
.reviews__link-arrow {
  width: 1em;
  height: 1em;
  transition: transform .35s cubic-bezier(.22, 1, .36, 1);
}
.platform:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }
.platform:focus-visible .platform__link::after { transform: scaleX(1); }
@media (hover: hover) {
  .platform:hover { background: #ECEADD; }
  .platform:hover .platform__link { color: var(--btn-hover); }
  .platform:hover .platform__link::after { transform: scaleX(1); }
  .platform:hover .reviews__link-arrow { transform: translateX(4px); }
}

/* ----- Tablets ----- */
@media (min-width: 744px) {
  .reviews {
    --gap: 24px;
    --card-w: min(52vw, 420px);
    padding: 120px 0 88px;
  }
  .reviews__edge { height: 59px; }
  .reviews__head { margin-bottom: 20px; }
  .review { padding: 28px 28px 24px; }
  .reviews__dots { display: flex; }
  .reviews__count { display: none; }
  .reviews__selects {
    display: flex;
    width: auto;
  }
  .reviews__select select,
  .pick__button { width: auto; }
  .reviews__summary {
    grid-template-columns: auto 1fr;
    column-gap: 36px;
    row-gap: 24px;
    padding: 28px 32px;
  }
  .score { padding-right: 36px; border-right: 1px solid rgba(11, 42, 48, .08); }
  .platforms {
    grid-column: 1 / -1;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
}

/* ----- Desktop: three reviews in view, lined up with the tour cards ----- */
@media (min-width: 1024px) and (orientation: landscape) {
  .reviews {
    --gap: calc(2.222 * var(--u));                                         /* 32px */
    --card-w: calc((var(--container) - 2 * var(--gap)) / 3);
    padding: calc(9.444 * var(--u)) 0 calc(6.667 * var(--u));              /* 136 / 96px */
  }
  .reviews__edge { height: calc(5.972 * var(--u)); }                       /* 86px */
  .reviews__head { margin-bottom: calc(1.667 * var(--u)); }
  .review {
    padding: max(calc(2 * var(--u)), 24px) max(calc(1.944 * var(--u)), 22px) max(calc(1.667 * var(--u)), 20px);
    border-radius: max(calc(1.389 * var(--u)), 16px);
  }
  .review__text p { font-size: max(calc(1.111 * var(--u)), .9375rem); }   /* 16px */
  .review__stars svg { width: max(calc(1.25 * var(--u)), 16px); height: max(calc(1.25 * var(--u)), 16px); }
  .review__bubbles i { width: max(calc(1.111 * var(--u)), 14px); height: max(calc(1.111 * var(--u)), 14px); }
  .review__quote { width: max(calc(2.778 * var(--u)), 36px); }
  .review__name { font-size: max(calc(1.042 * var(--u)), .875rem); }
  .review__meta { font-size: max(calc(.903 * var(--u)), .8125rem); }
  .review__avatar {
    width: max(calc(2.917 * var(--u)), 40px);
    height: max(calc(2.917 * var(--u)), 40px);
    font-size: max(calc(1.389 * var(--u)), 1.125rem);
  }

  .reviews__summary {
    grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.15fr);
    column-gap: calc(2.778 * var(--u));
    margin-top: calc(3.333 * var(--u));
    padding: calc(2.222 * var(--u)) calc(2.5 * var(--u));
    border-radius: max(calc(1.389 * var(--u)), 16px);
  }
  .score { padding-right: calc(2.778 * var(--u)); }
  .score__value { font-size: max(calc(4.444 * var(--u)), 3.5rem); }        /* 64px */
  .score__bar { font-size: max(calc(.972 * var(--u)), .8125rem); }
  .platforms {
    grid-column: auto;
    grid-template-columns: 1fr;
    padding-left: calc(2.778 * var(--u));
    border-left: 1px solid rgba(11, 42, 48, .08);
  }
}

/* Appearing: the carousel and the ratings panel fade in and slide up once
   they are properly on screen (script.js removes .is-waiting); the bars
   then fill from the left */
@media (prefers-reduced-motion: no-preference) {
  .js .reviews__carousel,
  .js .reviews__summary {
    transform: translate3d(0, var(--rise, 0px), 0);
    transition: opacity .8s ease var(--delay, 0s),
                translate 1.1s cubic-bezier(.16, 1, .3, 1) var(--delay, 0s);
  }
  .js .reviews .is-waiting {
    opacity: 0;
    translate: 0 64px;
  }
  .js .reviews__summary.is-waiting .score__fill { transform: scaleX(0); }
  .js .reviews__summary .score__fill { transition-duration: 1.2s; }
}


/* =========================================================
   CONTACT
   ========================================================= */
/* Dark blue to close the page: the questions on the left, a white card
   to get in touch on the right */
.contact {
  position: relative;
  padding: 120px 0 64px;        /* the layers of the edge reach 24px further in */
  background: var(--deep);
  color: var(--sand);
}
.contact__edge {
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 78px;                 /* 146 units: the mist edge (90) plus two layers of sea */
  fill: var(--mist);
}
.contact__inner {
  display: grid;
  gap: 36px;
  width: var(--container);
  margin: 0 auto;
}
.contact .eyebrow { color: var(--teal-glow); }
.contact .section-title { color: var(--sand); }
.contact__lead {                 /* same as the lead in About, the other dark section */
  max-width: 46ch;
  margin: 16px 0 0;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: rgba(244, 243, 234, .88);
}

/* ----- Questions: open one at a time ----- */
.faq {
  margin-top: 24px;
  border-top: 1px solid rgba(244, 243, 234, .14);
}
.faq__item { border-bottom: 1px solid rgba(244, 243, 234, .14); }
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.35;
  list-style: none;
  cursor: pointer;
  transition: color .2s ease;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:focus-visible { outline: 3px solid var(--sand); outline-offset: 4px; border-radius: 4px; }
.faq__icon {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--coral);
}
.faq__icon-v {
  transform-origin: center;
  transition: transform .3s cubic-bezier(.22, 1, .36, 1);
}
.faq__item[open] .faq__icon-v { transform: scaleY(0); }   /* plus turns into minus */
.faq__a { overflow: hidden; }
.faq__a p {
  max-width: 60ch;
  margin: 0;
  padding: 0 0 18px;
  line-height: 1.6;
  color: rgba(244, 243, 234, .8);
}
@media (hover: hover) {
  .faq__q:hover { color: var(--coral-glow); }
}

/* ----- Where we meet: a small drawn map; the whole block opens directions ----- */
.meet {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
  padding: 10px;
  border: 1px solid rgba(244, 243, 234, .14);
  border-radius: 16px;
  background: rgba(244, 243, 234, .06);
  color: var(--sand);
  text-decoration: none;
  transition: background-color .2s ease;
}
.meet__map {
  flex: none;
  width: 104px;
  height: 72px;
  border-radius: 10px;
}
.meet__text {
  display: grid;
  gap: 2px;
}
.meet__label {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(244, 243, 234, .6);
}
.meet__place { font-weight: 600; }
.contact__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-self: start;
  margin-top: 2px;
  padding-bottom: 3px;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--coral-glow);
}
.contact__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: calc(1em + 6px);
  bottom: 0;
  height: 1.5px;
  background: var(--coral-glow);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .35s cubic-bezier(.65, 0, .35, 1);
}
.contact__link-arrow {
  width: 1em;
  height: 1em;
  transition: transform .35s cubic-bezier(.22, 1, .36, 1);
}
.meet:focus-visible { outline: 3px solid var(--sand); outline-offset: 3px; }
.meet:focus-visible .contact__link::after { transform: scaleX(1); }
@media (hover: hover) {
  .meet:hover { background: rgba(244, 243, 234, .1); }
  .meet:hover .contact__link::after { transform: scaleX(1); }
  .meet:hover .contact__link-arrow { transform: translateX(4px); }
}

/* ----- Still have a question? Quick ways to get in touch, and a form ----- */
.ask {
  align-self: start;
  padding: 24px 20px;
  border-radius: 20px;
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .25);
}
.ask__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.625rem;
  line-height: 1.1;
}
.ask__sub {
  margin: 6px 0 0;
  font-size: .9375rem;
  line-height: 1.5;
  color: rgba(11, 42, 48, .7);
}
.ask__quick {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 18px;
}
.ask__btn {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 12px 4px;
  border-radius: 14px;
  background: var(--sand);
  color: var(--ink);
  font-size: .875rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease, transform .25s cubic-bezier(.22, 1, .36, 1);
}
.ask__btn svg {
  width: 22px;
  height: 22px;
  color: var(--teal);
  transition: color .2s ease;
}
.ask__btn:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
@media (hover: hover) {
  .ask__btn:hover {
    background: var(--teal);
    color: var(--white);
    transform: translateY(-2px);
  }
  .ask__btn:hover svg { color: var(--white); }
}
.ask__or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 14px;
  font-size: .8125rem;
  color: rgba(11, 42, 48, .55);
}
.ask__or::before,
.ask__or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(11, 42, 48, .12);
}
.ask__form {
  display: grid;
  gap: 12px;
}
.ask__form[hidden],
.ask.is-sent .ask__or { display: none; }
.ask__row {
  display: grid;
  gap: 12px;
}
.ask__form textarea { min-height: 112px; }
.ask__error {
  margin: 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: #FDECE7;
  color: #8E2A12;
  font-size: .9375rem;
  font-weight: 500;
}
.ask__error[hidden] { display: none; }
.ask__note {
  margin: 0;
  font-size: .8125rem;
  line-height: 1.45;
  color: rgba(11, 42, 48, .62);
}
.ask__note a { color: var(--teal); }
.ask__send { width: 100%; }

/* Sent: a tick that draws itself, as at the end of booking */
.ask__done {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 28px 8px 12px;
  text-align: center;
  outline: none;
}
.ask__done[hidden] { display: none; }
.contact__done-icon { width: 68px; height: 68px; margin-bottom: 6px; }
.ask__done-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.75rem;
}
.ask__done-text {
  max-width: 32ch;
  margin: 0;
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.ask__demo {
  margin: 0;
  font-size: .8125rem;
  color: rgba(11, 42, 48, .6);
}
.ask__again {
  margin-top: 8px;
  padding: 6px 2px;
  border: 0;
  background: none;
  color: var(--coral-text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ask__again:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }

/* ----- Tablets ----- */
@media (min-width: 744px) {
  .contact { padding: 176px 0 88px; }
  .contact__edge { height: 117px; }
  .contact__inner { gap: 44px; }
  .meet__map { width: 132px; height: 90px; }
  .ask { padding: 28px; }
  .ask__row { grid-template-columns: 1fr 1fr; }
  .ask__send { width: auto; justify-self: start; }
}

/* ----- Desktop: questions on the left, the contact card on the right ----- */
@media (min-width: 1024px) and (orientation: landscape) {
  .contact { padding: calc(14.444 * var(--u)) 0 calc(7.778 * var(--u)); }       /* 208 / 112px */
  .contact__edge { height: calc(10.139 * var(--u)); }                            /* 146px */
  .contact__inner {
    grid-template-columns: minmax(0, 1fr) calc(30 * var(--u));                   /* 432px */
    gap: calc(4.444 * var(--u));                                                 /* 64px */
  }
  .contact__lead {
    margin-top: calc(1.25 * var(--u));
    font-size: max(calc(1.25 * var(--u)), 1.0625rem);              /* 18px */
  }
  .faq { margin-top: calc(1.944 * var(--u)); }
  .faq__q {
    padding: calc(1.25 * var(--u)) 0;
    font-size: max(calc(1.181 * var(--u)), 1.0625rem);                           /* 17px */
  }
  .faq__a p { font-size: max(calc(1.111 * var(--u)), 1rem); }
  .ask {
    padding: calc(2.222 * var(--u));
    border-radius: max(calc(1.389 * var(--u)), 16px);
  }
  .ask__title { font-size: max(calc(1.944 * var(--u)), 1.625rem); }             /* 28px */
}

/* The card appears and rises into place, like the cards in the other sections */
@media (prefers-reduced-motion: no-preference) {
  .js .ask {
    transform: translate3d(0, var(--rise, 0px), 0);
    transition: opacity .8s ease, translate 1.1s cubic-bezier(.16, 1, .3, 1);
  }
  .js .ask.is-waiting {
    opacity: 0;
    translate: 0 64px;
  }
}


/* =========================================================
   FOOTER
   ========================================================= */
.footer {
  background: var(--night);
  color: rgba(244, 243, 234, .78);
  font-size: .9375rem;
}
.footer a { color: inherit; }
.footer__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px 24px;
  width: var(--container);
  margin: 0 auto;
  padding: 56px 0 40px;
}
.footer__brand,
.footer__news { grid-column: 1 / -1; }

.footer__logo { color: var(--sand); }
.footer__logo .logo__mark { width: 56px; }
.footer__logo .logo__name { font-size: 1.25rem; }
.footer__logo:focus-visible { outline: 3px solid var(--sand); outline-offset: 4px; border-radius: 6px; }
.footer__tagline {
  max-width: 34ch;
  margin: 14px 0 0;
  line-height: 1.55;
}

.footer__social {
  display: flex;
  gap: 8px;
  margin: 18px 0 0;
}
.footer__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(244, 243, 234, .08);
  color: var(--sand);
  transition: background-color .2s ease, color .2s ease, transform .25s cubic-bezier(.22, 1, .36, 1);
}
.footer__icon svg { width: 19px; height: 19px; }
.footer__icon:focus-visible { outline: 3px solid var(--sand); outline-offset: 2px; }
@media (hover: hover) {
  .footer__icon:hover {
    background: var(--coral);
    color: var(--white);
    transform: translateY(-2px);
  }
}

.footer__title {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.2;
  color: var(--sand);
}
.footer__list {
  display: grid;
  gap: 10px;
  margin: 0;
}
/* Links: lighter on hover, with a line drawn in from the left */
.footer__link {
  position: relative;
  display: inline-block;
  padding-bottom: 2px;
  text-decoration: none;
  transition: color .2s ease;
}
.footer__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.5px;
  background: var(--coral);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .35s cubic-bezier(.65, 0, .35, 1);
}
.footer__link:focus-visible { outline: 2px solid var(--sand); outline-offset: 3px; }
.footer__link:focus-visible::after { transform: scaleX(1); }
@media (hover: hover) {
  .footer__link:hover { color: var(--sand); }
  .footer__link:hover::after { transform: scaleX(1); }
}

/* ----- Newsletter ----- */
.footer__text { margin: -6px 0 14px; line-height: 1.5; }
.news__row {
  display: flex;
  gap: 6px;
  padding: 5px;
  border: 1px solid rgba(244, 243, 234, .18);
  border-radius: 999px;
  background: rgba(244, 243, 234, .06);
  transition: border-color .2s ease;
}
.news__row:focus-within { border-color: rgba(244, 243, 234, .55); }
.news__input {
  flex: 1;
  min-width: 0;
  padding: 0 14px;
  border: 0;
  background: none;
  color: var(--sand);
  font: inherit;
  font-size: 1rem;                      /* 16px: no zoom on iPhones */
  outline: none;
}
.news__input::placeholder { color: rgba(244, 243, 234, .5); }
.news__input[aria-invalid="true"] { color: #FFB4A3; }
/* When the browser fills in a saved email, it paints the field light blue
   with square corners; this keeps our colours instead */
.news__input:-webkit-autofill,
.news__input:-webkit-autofill:hover,
.news__input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--sand);
  caret-color: var(--sand);
  -webkit-box-shadow: 0 0 0 1000px #16322F inset;
  border-radius: 999px;
  transition: background-color 9999s ease 0s;
}
.news__btn {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: var(--sand);
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: color .2s ease, background-color .35s ease;
}
.news__btn-text,
.news__tick { grid-area: 1 / 1; }
.news__btn-text { transition: opacity .2s ease, transform .3s cubic-bezier(.22, 1, .36, 1); }
.news__tick {
  width: 22px;
  height: 22px;
  opacity: 0;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.news__btn:focus-visible { outline: 3px solid var(--sand); outline-offset: 2px; }
@media (hover: hover) {
  .news__btn:hover { color: var(--coral-text); }      /* like the other light buttons */
}

/* Signed up: the field says thanks and the button turns teal with a tick
   that draws itself, like at the end of booking */
.news__row { position: relative; }
.news__thanks {
  position: absolute;
  left: 19px;
  top: 50%;
  translate: 0 -50%;
  font-weight: 600;
  color: var(--teal-glow);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease .15s;
}
.news.is-done .news__input { opacity: 0; }
.news.is-done .news__thanks { opacity: 1; }
.news.is-done .news__btn {
  background: var(--teal);
  color: var(--white);
  cursor: default;
}
.news.is-done .news__btn-text { opacity: 0; transform: translateY(-8px); }
.news.is-done .news__tick {
  opacity: 1;
  stroke-dashoffset: 0;
  transition: opacity .1s ease .2s, stroke-dashoffset .45s ease-out .25s;
}
/* A wrong email: a coral outline and a "!" in the field (until they type
   again), and a small shake */
.news__warn {
  display: none;
  flex: none;
  align-self: center;
  width: 22px;
  height: 22px;
  margin-right: 4px;
  color: #FF8F7A;
}
.news.is-error .news__row {
  border-color: #FF8F7A;
  box-shadow: 0 0 0 3px rgba(255, 107, 74, .18);
}
.news.is-error .news__warn { display: block; }
.news.is-wrong .news__row { animation: news-shake .4s ease; }
@keyframes news-shake {
  20%, 60% { transform: translateX(-5px); }
  40%, 80% { transform: translateX(5px); }
}
@media (prefers-reduced-motion: reduce) {
  .news.is-wrong .news__row { animation: none; }
}
.news__msg {
  min-height: 1.4em;
  margin: 8px 0 0;
  font-size: .875rem;
}
.news__msg.is-error { color: #FFB4A3; }
.news__msg.is-ok { color: rgba(244, 243, 234, .55); }
.footer__small {
  margin: 4px 0 0;
  font-size: .8125rem;
  line-height: 1.5;
  color: rgba(244, 243, 234, .6);
}
.footer__small a,
.footer__copy a { text-underline-offset: 3px; }

/* ----- Bottom line ----- */
.footer__bottom {
  display: grid;
  gap: 10px;
  width: var(--container);
  margin: 0 auto;
  padding: 20px 0 28px;
  border-top: 1px solid rgba(244, 243, 234, .12);
  font-size: .8125rem;
  color: rgba(244, 243, 234, .6);
}
.footer__bottom p { margin: 0; line-height: 1.5; }
.footer__author {                 /* the designer's credit in the demo line */
  color: var(--sand);
  font-weight: 600;
  white-space: nowrap;
}
.footer__top {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-self: start;
  color: var(--sand);
  font-weight: 600;
  text-decoration: none;
}
.footer__top svg {
  width: 16px;
  height: 16px;
  transition: transform .3s cubic-bezier(.22, 1, .36, 1);
}
.footer__top:focus-visible { outline: 2px solid var(--sand); outline-offset: 3px; }
@media (hover: hover) {
  .footer__top:hover svg { transform: translateY(-3px); }
}

/* ----- Tablets ----- */
@media (min-width: 744px) {
  .footer__inner {
    grid-template-columns: 1.3fr 1fr 1fr;
    padding: 72px 0 48px;
  }
  .footer__news { grid-column: 1 / -1; max-width: 480px; }
  .footer__brand { grid-column: auto; }
  .footer__bottom {
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 24px;
  }
  .footer__demo { text-align: center; }
}

/* ----- Desktop: four columns, lined up with the rest of the page ----- */
@media (min-width: 1024px) and (orientation: landscape) {
  .footer { font-size: max(calc(1.042 * var(--u)), .9375rem); }
  .footer__inner {
    grid-template-columns: 1.2fr 1fr .75fr 1.4fr;
    gap: calc(3.333 * var(--u));
    padding: calc(5.556 * var(--u)) 0 calc(3.889 * var(--u));                   /* 80 / 56px */
  }
  .footer__news { grid-column: auto; max-width: none; }
  .footer__link { white-space: nowrap; }
  .footer__bottom { font-size: max(calc(.903 * var(--u)), .8125rem); }
}

/* =========================================================
   PRIVACY PAGE (privacy.html)
   ========================================================= */
.legal-page { background: var(--sand); color: var(--ink); }

/* The bar at the top: the logo and the way back */
.page-bar {
  background: var(--night);
  color: var(--sand);
}
.page-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: var(--container);
  min-height: 64px;
  margin: 0 auto;
}
.page-bar .logo { color: var(--sand); }
.page-bar .logo__mark { width: 44px; }
.page-bar .logo:focus-visible,
.page-bar__back:focus-visible { outline: 3px solid var(--sand); outline-offset: 3px; border-radius: 6px; }
.page-bar__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--sand);
  font-weight: 600;
  font-size: .9375rem;
  text-decoration: none;
}
.page-bar__back svg {
  width: 18px;
  height: 18px;
  transition: transform .3s cubic-bezier(.22, 1, .36, 1);
}
@media (hover: hover) {
  .page-bar__back:hover svg { transform: translateX(-3px); }
}

/* The text: one readable column */
.legal {
  width: min(720px, var(--container));
  margin: 0 auto;
  padding: 48px 0 64px;
  font-size: 1.0625rem;
  line-height: 1.65;
}
.legal .eyebrow { color: var(--teal); }
.legal__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.75rem;
  line-height: 1;
}
.legal__updated {
  margin: 10px 0 0;
  font-size: .9375rem;
  color: rgba(11, 42, 48, .6);
}
.legal__demo {
  margin: 24px 0 0;
  padding: 14px 18px;
  border-left: 4px solid var(--coral);
  border-radius: 0 12px 12px 0;
  background: var(--white);
  font-size: .9375rem;
  line-height: 1.55;
}
.legal__intro { margin: 24px 0 0; }
.legal a:not(.btn) { color: var(--teal); text-underline-offset: 3px; }
.legal a:not(.btn):focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; border-radius: 3px; }

.legal__toc {
  margin: 28px 0 0;
  padding: 18px 22px;
  border-radius: 16px;
  background: var(--white);
}
.legal .legal__toc-title {
  margin: 0 0 8px;
  font-family: var(--font-body);
  font-size: .8125rem;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(11, 42, 48, .6);
}
.legal__toc ol {
  margin: 0;
  padding-left: 1.2em;
  columns: 2;
  column-gap: 32px;
  font-size: .9375rem;
}
.legal__toc li { break-inside: avoid; padding: 2px 0; }

.legal section {
  margin-top: 40px;
  scroll-margin-top: 24px;
}
.legal h2 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.625rem;
  line-height: 1.15;
}
.legal p { margin: 12px 0 0; }
.legal ul { margin: 12px 0 0; padding-left: 1.2em; list-style: disc; }
.legal li + li { margin-top: 6px; }

/* The table scrolls sideways on small phones rather than squashing */
.legal__table {
  margin-top: 14px;
  overflow-x: auto;
  border-radius: 14px;
  background: var(--white);
}
.legal__table:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.legal table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: .9375rem;
  line-height: 1.5;
}
.legal th,
.legal td {
  padding: 12px 16px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid rgba(11, 42, 48, .08);
}
.legal th {
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(11, 42, 48, .6);
}
.legal tr:last-child td { border-bottom: 0; }

.legal__back { margin-top: 48px !important; }

.page-foot {
  padding: 20px 0 28px;
  border-top: 1px solid rgba(11, 42, 48, .1);
  font-size: .8125rem;
  text-align: center;
  color: rgba(11, 42, 48, .6);
}
.page-foot p { margin: 0; }

@media (max-width: 743px) {
  .page-bar__back { font-size: .875rem; }
  .legal { padding-top: 32px; font-size: 1rem; }
  .legal__title { font-size: 2.25rem; }
  .legal__toc ol { columns: 1; }
}