/* ==========================================================================
   Good Times in Cape Town — design system
   Ocean navy bands, leaf-green actions, white and sea-glass surfaces,
   near-black headings. Bricolage Grotesque for display type, DM Sans for
   everything else, Caveat for the odd handwritten note (design/font-design.md).
   Tokens live in tokens.css.

    1. Fonts            8. Bands             15. Reviews
    2. Base             9. Section heads     16. Stats, steps, lists
    3. Layout          10. Cards             17. FAQ, prose
    4. Type            11. Chips, tabs       18. Footer
    5. Buttons/links   12. Banners           19. Preview, pending, notices
    6. Header/drawer   13. Tour detail       20. Forms (shared)
    7. Home hero       14. (Gallery: media.css) 21. Motion, utilities, print
   ========================================================================== */

/* 1. Fonts (self-hosted variable latin subsets, OFL — see licenses/ and design/font-design.md) ----------
   Bricolage Grotesque (display, weight 200–800 and optical size 12–96), DM Sans (body and interface, weight
   100–1000, roman and italic) and Caveat (the occasional handwritten accent, weight 400–700). The families and the
   type scale are tokens in tokens.css; nothing below names a family again. A face downloads only when text on the
   page uses it, so the italic and Caveat cost nothing on pages that do not use them. */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/BricolageGrotesque.woff2') format('woff2-variations'), url('../fonts/BricolageGrotesque.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url('../fonts/DMSans.woff2') format('woff2-variations'), url('../fonts/DMSans.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: italic;
  font-weight: 100 1000;
  font-display: swap;
  src: url('../fonts/DMSans-Italic.woff2') format('woff2-variations'), url('../fonts/DMSans-Italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/Caveat.woff2') format('woff2-variations'), url('../fonts/Caveat.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Metric-matched fallbacks, so a line keeps its length and height while the web fonts load: no reflow on swap.
   Measured from the WOFF2 files against Arial's metrics with fontTools (design/font-design.md). Each family has a
   regular and a bold fallback face: headings never synthesise bold (font-synthesis: none), so a bold heading must
   fall back to a real bold face, sized to Bricolage's width at the heading sizes (98–100% of Arial Bold), or it wraps
   differently from the web font and the page jumps when it arrives (found on the preview at 412 px) */
@font-face {
  font-family: 'Bricolage Grotesque Fallback';
  font-weight: 100 549;
  src: local('Arial'), local('ArialMT'), local('Helvetica Neue'), local('Helvetica'), local('Liberation Sans'), local('LiberationSans');
  size-adjust: 108%;
  ascent-override: 86.1%;
  descent-override: 25%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Bricolage Grotesque Fallback';
  font-weight: 550 1000;
  src: local('Arial Bold'), local('Arial-BoldMT'), local('Helvetica Neue Bold'), local('HelveticaNeue-Bold'), local('Helvetica Bold'), local('Helvetica-Bold'), local('Liberation Sans Bold'), local('LiberationSans-Bold');
  size-adjust: 99.5%;
  ascent-override: 93.5%;
  descent-override: 27.1%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'DM Sans Fallback';
  font-weight: 100 549;
  src: local('Arial'), local('ArialMT'), local('Helvetica Neue'), local('Helvetica'), local('Liberation Sans'), local('LiberationSans');
  size-adjust: 106%;
  ascent-override: 93.5%;
  descent-override: 29.2%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'DM Sans Fallback';
  font-weight: 550 1000;
  src: local('Arial Bold'), local('Arial-BoldMT'), local('Helvetica Neue Bold'), local('HelveticaNeue-Bold'), local('Helvetica Bold'), local('Helvetica-Bold'), local('Liberation Sans Bold'), local('LiberationSans-Bold');
  size-adjust: 101%;
  ascent-override: 98.2%;
  descent-override: 30.7%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Caveat Fallback';
  src: local('Arial'), local('ArialMT'), local('Helvetica Neue'), local('Helvetica'), local('Liberation Sans'), local('LiberationSans');
  size-adjust: 77.4%;
  ascent-override: 124%;
  descent-override: 38.7%;
  line-gap-override: 0%;
}

/* 2. Base ------------------------------------------------------------------ */
*,
*::before,
*::after {
  box-sizing: border-box;
}
/* `hidden` always wins over component display rules */
[hidden] {
  display: none !important;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* The header's measured height (main.js sets --header-live): on phones and tablets the header is taller than the
     root's --header-h (its own height is set on body), so an anchor used to land under it */
  scroll-padding-top: calc(var(--header-live, var(--header-h)) + 1rem);
  overflow-x: clip;
}
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--text);
  background: var(--white);
  overflow-x: clip;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
/* The page stays put while the menu drawer is open. On the root, not on body: overflow on body made body a scroll
   container, and the sticky header, now stuck to it, scrolled away with the page (main.js toggles the class on both) */
html.drawer-open {
  overflow: hidden;
}
img,
picture,
video,
svg {
  display: block;
  max-width: 100%;
}
img,
video {
  height: auto;
}
picture img {
  width: 100%;
}
/* Pictures inside fixed-ratio frames fill them */
.card__media > picture,
.row-card__media > picture,
.media-frame > picture,
.banner__media > picture,
.hero__media > picture,
.photo-band > picture,
.tour-hero__media > picture,
.reviews-photo__media > picture {
  display: block;
  height: 100%;
}
a {
  color: var(--ink);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}
a:hover {
  color: var(--gold-hover);
}
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: var(--radius-s);
}
.on-dark :focus-visible,
.site-footer :focus-visible,
.hero :focus-visible,
.banner :focus-visible,
.band :focus-visible {
  outline-color: var(--gold-soft);
}
p,
ul,
ol,
dl,
figure,
blockquote {
  margin: 0;
}
:where(ul, ol)[role='list'] {
  list-style: none;
  padding: 0;
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
button {
  cursor: pointer;
}
hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: var(--space-6) 0;
}
.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: var(--z-skip);
  padding: 0.75rem 1.1rem;
  background: var(--forest);
  color: var(--white);
  border-radius: var(--radius-s);
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus {
  top: var(--space-4);
}
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
main:focus {
  outline: none;
}
.icon {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 3. Layout ---------------------------------------------------------------- */
.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}
.container--narrow {
  width: min(100% - 2 * var(--gutter), var(--container-narrow));
}
.section {
  padding-block: var(--section);
}
.section--tight {
  padding-block: calc(var(--section) * 0.6);
}
.section--paper {
  background: var(--paper);
}
.section--ivory {
  background: var(--ivory-soft);
}
.section--forest {
  background: var(--forest-deep);
  color: var(--on-dark);
}
.grid {
  display: grid;
  gap: clamp(1.25rem, 0.9rem + 1.4vw, 2rem);
}
.grid > * {
  min-width: 0;
}
@media (min-width: 40em) {
  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 64em) {
  .grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 75em) {
  .grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
/* Swipeable rail on phones (home featured tours); a normal grid from 40em */
@media (max-width: 39.99em) {
  .grid--rail {
    display: flex;
    gap: var(--space-4);
    margin-inline: calc(-1 * var(--gutter));
    padding: 4px var(--gutter) var(--space-4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .grid--rail::-webkit-scrollbar {
    display: none;
  }
  .grid--rail > * {
    flex: 0 0 82%;
    scroll-snap-align: start;
  }
}
.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}
.media-frame {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: var(--ratio, 4 / 3);
  background: var(--mist);
}
.media-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus, 50% 50%);
}

/* 4. Type ------------------------------------------------------------------ */
/* Headings in Bricolage Grotesque (design/font-design.md): bold, sentence case, tightly set at display sizes. The
   optical size follows the font size (opsz 12–96), so a big title takes the quirky display cut and a small one the
   sturdier text cut. Bricolage has no italic: an <em> in a heading is a colour turn, never a slant (no faux italic). */
h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-style: normal;
  font-optical-sizing: auto;
  font-synthesis: none;
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--ink);
  text-wrap: balance;
  overflow-wrap: break-word;
  min-width: 0;
}
:is(h1, h2, h3, h4) em {
  font-style: normal;
}
.on-dark h1,
.on-dark h2,
.on-dark h3,
.section--forest h2,
.section--forest h3 {
  color: var(--white);
}
h1 {
  font-size: var(--text-h1);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
}
h2 {
  font-size: var(--text-h2);
  line-height: 1.04;
  letter-spacing: -0.03em;
}
h3 {
  font-size: var(--text-h3);
  line-height: 1.15;
}
h4 {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
}
.lead {
  font-size: var(--text-lead);
  line-height: 1.5;
  color: var(--muted);
  max-width: 36em;
  text-wrap: pretty;
}
.on-dark .lead,
.section--forest .lead {
  color: var(--on-dark);
}
/* Eyebrows: short, small, in DM Sans; capitals with gentle tracking, never a long line of them */
.eyebrow {
  margin-bottom: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--text-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--gold);
}
.on-dark .eyebrow,
.section--forest .eyebrow,
.hero .eyebrow,
.banner .eyebrow,
.cta .eyebrow {
  color: var(--gold-soft);
}
.prose {
  max-width: 42em;
}
.prose > * + * {
  margin-top: 1em;
}
.prose h2 {
  font-size: var(--text-h3);
  font-size: clamp(1.5rem, 1.3rem + 0.8vw, 2rem);
  margin-top: 1.8em;
}
/* A heading that opens the text sits at the section's own top (the legal pages since their draft notices went, D76) */
.prose > h2:first-child {
  margin-top: 0;
}
.prose h3 {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 600;
  margin-top: 1.5em;
}
.prose ul {
  padding-left: 1.2em;
}
.prose li + li {
  margin-top: 0.35em;
}
.prose a {
  text-decoration: underline;
}
.muted {
  color: var(--muted);
}
.small {
  font-size: var(--text-small);
}
.measure {
  max-width: 36em;
}

/* 5. Buttons and links ----------------------------------------------------- */
/* Buttons: the Golden Engraved Button System (buttons.css). `.btn` stays on buttons only as a layout hook
   (the mobile bars, the booking card, the wizard); `.btn--block` fills its column */
.btn--block {
  width: 100%;
}
/* Tertiary links in a section head: the system's words over a gold hairline (buttons.css); on dark grounds, ivory */
.on-dark .link-arrow,
.section--forest .link-arrow {
  color: var(--white);
  text-decoration-color: rgba(111, 237, 143, 0.75);
}
.external::after {
  content: '\2197';
  display: inline-block;
  margin-left: 0.2em;
  font-size: 0.85em;
}

/* 6. Header, navigation, drawer ------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--white);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  transition:
    background-color var(--dur-glass) var(--ease-out),
    box-shadow var(--dur-glass) var(--ease-out),
    border-color var(--dur-glass) var(--ease-out),
    color var(--dur-glass) var(--ease-out),
    -webkit-backdrop-filter var(--dur-glass) var(--ease-out),
    backdrop-filter var(--dur-glass) var(--ease-out);
}
/* Scrolled (main.js: the same class, the same threshold as before): the same header turns to white glass, so the page
   moving beneath it shows through, softened. Paint only: no size, padding, position or type changes. The top of the
   page keeps the header exactly as it was (white, or the home page's transparent overlay). */
.site-header.is-condensed {
  background-color: var(--gt-glass-fallback);
  border-bottom-color: var(--gt-glass-line);
  box-shadow: var(--gt-glass-shadow);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .site-header.is-condensed {
    background-color: var(--gt-glass-surface);
    -webkit-backdrop-filter: var(--gt-glass-filter);
    backdrop-filter: var(--gt-glass-filter);
  }
}
/* On the glass, the company statement takes the deep leaf green: the small words stay above 4.5:1 over the darkest band
   that passes beneath (measured: qa/header-contrast.mjs); at the top of the page it keeps its own colour */
.site-header.is-condensed .brand-lockup__statement {
  color: var(--green-deep);
}
/* Solid again where glass would not help: low-memory or data-saving phones (main.js adds .is-lite), a reduced
   transparency preference, and while the menu drawer (opaque white) hangs from it */
.site-header.is-lite.is-condensed,
.drawer-open .site-header {
  background-color: var(--white);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
@media (prefers-reduced-transparency: reduce) {
  .site-header.is-condensed {
    background-color: var(--white);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .site-header {
    transition: none;
  }
}
@media (forced-colors: active) {
  .site-header.is-condensed {
    background-color: Canvas;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
.header-bar {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  min-height: var(--header-h);
}
/* The brand lockup (Addendum, 6 Nov 2026): the logo link and, beneath it, the company statement. The link keeps
   exactly the logo's box (the aircraft's dock is placed in fractions of it, motion.css), so the statement is its
   sibling, not part of it */
.brand-lockup {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0; /* the wordmark keeps its size and proportions; the navigation gives way first */
  margin-right: auto;
}
.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
/* The approved compact lockup (Approved Logo Pack v2: Table Mountain and the trail over the wordmark,
   2121:564), never clipped: width-led on phones, where the row is the limit (the header
   grows to hold it, see below), height-led from 40em (--logo-h) */
.brand__logo {
  width: var(--brand-w, 260px);
  height: auto;
}
.brand__logo--gold {
  display: none;
}
@media (min-width: 40em) {
  body {
    --logo-h: 60px;
  }
  body.has-overlay-header {
    --logo-h: 68px;
  }
  .brand__logo {
    width: auto;
    height: var(--logo-h);
  }
}
@media (min-width: 64em) {
  body {
    --logo-h: 68px;
  }
  body.has-overlay-header {
    --logo-h: clamp(64px, 5.6vw, 86px);
  }
}
/* The company statement, exactly as supplied, under the artwork: DM Sans on one line, sized from the logo's width
   (2121:564) so that it spans the artwork, from its left edge, and scales with it; never under 10 px or over 13 px.
   The logo itself is untouched. Green as in the logo: the leaf green on light grounds (5.2:1 on white), the reversed
   logo's own #45E375 on dark ones. Phones narrower than 360 px leave it out of the header, where the row has no room;
   the footer's lockup always has it. */
body {
  --lockup-w: calc(var(--logo-h, 69.1px) * 3.7606);
  --statement-size: clamp(10px, calc(var(--lockup-w) / 25), 13px);
  --statement-h: calc(var(--statement-size) * 1.2 + 2px);
}
.brand-lockup__statement {
  margin: 2px 0 0;
  padding-left: calc(var(--lockup-w) * 0.012);
  font-family: var(--font-body);
  font-size: var(--statement-size);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: var(--green-primary);
  transition: color var(--dur) var(--ease-out);
}
.on-dark .brand-lockup__statement {
  color: var(--logo-green-on-dark);
}
/* Small desktops (1024–1199 px): the lockup, the titles and Book Now share the bar at compact sizes */
@media (min-width: 64em) and (max-width: 74.99em) {
  body.has-overlay-header {
    --logo-h: 64px;
  }
  .has-overlay-header .primary-nav ul {
    gap: 1.25rem;
  }
  .has-overlay-header .primary-nav a {
    font-size: 1rem;
  }
}
.primary-nav {
  display: none;
}
.primary-nav ul {
  display: flex;
  gap: clamp(1.5rem, 0.75rem + 2.2vw, 3.5rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Navigation titles in DM Sans (the interface face): semibold, minimal tracking, a hairline underline on hover and for the current page */
.primary-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: inherit;
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  text-decoration: none;
  transition: color var(--dur) var(--ease-out);
}
.primary-nav a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 9px;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease-out);
}
.primary-nav a:hover,
.primary-nav a[aria-current='page'] {
  color: var(--gold-hover);
}
.primary-nav a:hover::after,
.primary-nav a[aria-current='page']::after {
  transform: scaleX(1);
}
/* Phones keep the booking action in the drawer; from 40em Book Your Adventure sits in the header beside the menu button */
.header-cta {
  display: none;
}
/* (The standard primary pill: buttons.css; it is hidden below 40em there too, as that sheet loads after this one) */
@media (min-width: 40em) {
  .header-cta {
    display: inline-flex;
  }
}
/* Verified WhatsApp and phone, between the navigation and "Book Now" (desktop only) */
.nav-toggle {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-right: -6px;
  border: 0;
  border-radius: var(--radius-s);
  background: transparent;
  color: inherit;
}
.nav-toggle .icon {
  width: 26px;
  height: 26px;
}
.nav-toggle .icon--close,
.nav-toggle[aria-expanded='true'] .icon--menu {
  display: none;
}
.nav-toggle[aria-expanded='true'] .icon--close {
  display: block;
}
@media (min-width: 64em) {
  .primary-nav,
  .header-cta {
    display: flex;
  }
  .primary-nav {
    margin-inline: auto;
  }
  .brand-lockup {
    margin-right: 0;
  }
  .nav-toggle {
    display: none;
  }
}
/* Phones: the lockup takes the row's free width (at most 300 px) and the header grows to hold it;
   tablets get a taller bar for the 60–68 px lockup */
@media (max-width: 39.99em) {
  body {
    --brand-w: min(300px, calc(100vw - 2 * var(--gutter) - 62px));
    --lockup-w: var(--brand-w);
    /* the compact lockup is 2121:564; the statement's line below it */
    --header-h: calc(var(--brand-w) * 0.2659 + var(--statement-h) + 14px);
  }
  body.has-overlay-header {
    --brand-w: min(300px, calc(100vw - 2 * var(--hero-edge) - 62px));
  }
}
@media (max-width: 22.49em) {
  body {
    --statement-h: 0px;
  }
  .site-header .brand-lockup__statement {
    display: none;
  }
}
/* Tablets: a taller bar for the 60–68 px logo and the statement under it (84 px before the statement) */
@media (min-width: 40em) and (max-width: 63.99em) {
  body {
    --header-h: 96px;
  }
}
/* Overlay header (home only, every width): transparent over the hero film until the
   page scrolls or the drawer opens, then the usual white sticky header. Its bar shares
   the hero's edge padding so the wordmark sits above the headline (D49). */
.site-header--overlay .header-bar {
  width: calc(100% - 2 * var(--hero-edge));
  max-width: none;
}
.site-header--overlay:not(.is-condensed) {
  background: transparent;
  border-color: transparent;
  color: var(--hero-ivory);
}
.site-header--overlay:not(.is-condensed) .brand__logo--ink {
  display: none;
}
.site-header--overlay:not(.is-condensed) .brand__logo--gold {
  display: block;
}
.site-header--overlay:not(.is-condensed) .brand-lockup__statement {
  color: var(--logo-green-on-dark);
  text-shadow: 0 1px 2px rgba(3, 16, 32, 0.6), 0 0 6px rgba(3, 16, 32, 0.28);
}
.site-header--overlay:not(.is-condensed) .primary-nav a:hover,
.site-header--overlay:not(.is-condensed) .primary-nav a[aria-current='page'] {
  color: var(--champagne);
}
.site-header--overlay:not(.is-condensed) .primary-nav a::after {
  background: var(--champagne);
}
@media (min-width: 64em) {
  .has-overlay-header {
    --header-h: 112px;
  }
}
.has-overlay-header .hero {
  /* The header box is its min-height plus the 1 px hairline, so the hero starts exactly under the preview bar */
  margin-top: calc(-1 * var(--header-h) - 1px);
  padding-top: calc(var(--header-h) + 1px);
}
.drawer {
  position: fixed;
  inset: var(--drawer-top, var(--header-h)) 0 0;
  z-index: var(--z-drawer);
  display: flex;
  flex-direction: column;
  padding: var(--space-5) var(--gutter) calc(var(--space-6) + env(safe-area-inset-bottom));
  background: var(--white);
  color: var(--ink);
  overflow-y: auto;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.drawer.is-open {
  opacity: 1;
  transform: none;
}
.drawer .eyebrow.drawer__eyebrow {
  margin: var(--space-2) 0 var(--space-3);
}
.drawer__nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.drawer__nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 60px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.625rem;
  font-weight: 500;
  text-decoration: none;
}
.drawer__nav a[aria-current='page'] {
  color: var(--forest);
}
.drawer__footer {
  margin-top: auto;
  padding-top: var(--space-6);
  display: grid;
  gap: var(--space-4);
}
.drawer__note {
  font-size: var(--text-xs);
  color: var(--muted);
}

/* 7. Home hero ----------------------------------------------------------------- */
/* "The world has stopped, the memories haven't" (index.mjs). Layers, bottom to top: the café scene
   (.hero__media, the only clipped layer: the held frame, then the film, which moves only the cloud
   and the sea), a light sky wash for the transparent header (.hero__scrim), the h1 for search and
   screen readers (.hero__content) and the phone bottom right (.hero__phone; the component itself is
   phone-gallery.css). The headline "Good Times Start Here!" and the services are hero-services.css
   (in place of the call to action, the owner's choice of 7 Nov 2026). The header (section 6) shares
   --hero-edge, so the wordmark and the headline align.
   No face is ever covered. The headline sits in the strip below the sleeping friend's chin
   (the lowest face, 89% down the frame), the phone right of the laughing blonde friend (her face
   ends 82% across). Landscape screens show the scene full bleed and steer the crop by aspect ratio
   so her face stays clear of the phone; screens narrower than 13:10 (phones, portrait tablets) frame
   the whole group under the header and carry the call to action and the phone on a band below it,
   the phone rising only into the picture's lower corner, below every face. Nothing darkens the faces. */
.hero {
  --hero-inset: clamp(0.75rem, 0.1rem + 1.9vh, 1.75rem); /* the gap under the call to action and the phone */
  --phone-right: max(clamp(0.875rem, 0.2rem + 1.5vw, 2rem), env(safe-area-inset-right));
  /* The phone's width (phone-gallery.css): 14% of the screen, 150–224 px, never taller than 56% of the hero */
  --pw: min(clamp(150px, 14vw, 224px), calc((100svh - var(--preview-h, 0px)) * 0.272));
  --hero-focus: 50% 75%;
  position: relative;
  z-index: 1;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100vh;
  min-height: calc(100svh - var(--preview-h, 0px));
  padding-left: max(var(--hero-edge), env(safe-area-inset-left));
  padding-right: max(var(--hero-edge), env(safe-area-inset-right));
  padding-bottom: max(var(--hero-inset), env(safe-area-inset-bottom));
  color: var(--ivory-soft);
  background: var(--forest-deep);
}
/* Until main.js has measured the preview bar, assume its one-line height */
.has-preview-bar .hero {
  min-height: calc(100svh - var(--preview-h, 2rem));
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: var(--forest-deep);
}
.hero__media > picture,
.hero__media img,
.hero__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* Poster and film share one crop, so the film lands exactly on its own first frame */
.hero__media img,
.hero__media video {
  object-fit: cover;
  object-position: var(--hero-focus);
}
/* The film fades in over the poster once a frame has been presented (main.js); without
   JavaScript, under reduced motion or after a failure the poster simply stays */
.hero__media video {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s var(--ease-out);
}
.hero__media.is-playing video {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .hero__media.is-playing video {
    opacity: 0;
  }
}
/* The crop by shape. Wider than 16:9 the frame fits the width and gives up a little sky, never the
   strip under the faces; narrower, it fits the height and slides left as the screen narrows, so the
   blonde friend's face keeps clear of the phone without the sleeping friend leaving the frame. */
@media (max-aspect-ratio: 16/9) {
  .hero {
    --hero-focus: 66% 75%;
  }
}
@media (max-aspect-ratio: 8/5) {
  .hero {
    --hero-focus: 84% 75%;
  }
}
/* Readability without panels: a sky wash behind the transparent header, and nothing else */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(3, 16, 32, 0.44) 0%, rgba(3, 16, 32, 0.18) 11%, rgba(3, 16, 32, 0) 24%);
}
.hero__content {
  position: relative;
  /* Never under the phone: the content box less the phone, a gap, and the difference in side insets */
  max-width: calc(100% - var(--pw) - 1rem + var(--hero-edge) - var(--phone-right));
}
.hero__phone {
  position: absolute;
  right: var(--phone-right);
  bottom: max(var(--hero-inset), env(safe-area-inset-bottom));
  z-index: 1;
  width: var(--pw);
}
/* Short landscape screens (phones turned sideways): the frame fits the width and the faces fill its
   height, so the call to action moves left of the sleeping friend's face (he begins 20% across) */
@media (min-aspect-ratio: 13/10) and (max-height: 34em) {
  .hero {
    padding-left: max(1rem, env(safe-area-inset-left));
    --hero-focus: 50% 55%;
  }
  .hero__content {
    max-width: calc(18.5vw - 1rem - 0.5rem);
  }
}
/* Phones, portrait tablets and near-square windows: the whole group, framed at 8:7 (wider where the
   screen is short, which shows more of the scene, never less) under the header; the call to action and
   the phone on the band below. The hero stays one screen tall, as the chapters below it expect. The
   phone fills the band, rising into the picture by at most 16% of its height (below every face: the
   lowest chin is 11% above the frame's foot, the blonde friend's 30%; and below the phone in the
   brunette's hand, 17%), and takes at most 46% of the width so the call to action keeps its room.
   Under the picture the scene's table is mirrored, dim and soft, as if on glass (build-video.sh). */
@media (max-aspect-ratio: 13/10) {
  .hero {
    --hero-top: calc(var(--header-h) + 1px);
    --hero-h: calc(100svh - var(--preview-h, 0px));
    /* Leaves the band room for at least a 100 px phone: 13.75rem = its height and gap less the 16% rise */
    --box-h: min(calc(100vw * 7 / 8), calc((var(--hero-h) - var(--hero-top) - 13.75rem) / 0.84));
    --pw: clamp(100px, calc((var(--hero-h) - var(--hero-top) - var(--box-h) * 0.84 - var(--hero-inset)) / 2.06), min(46vw, 240px));
    --hero-focus: 50.75% 50%;
    --band-top: calc(var(--hero-top) + var(--box-h));
    background:
      linear-gradient(180deg, rgba(11, 34, 51, 0.3) 0%, rgba(11, 34, 51, 0.78) 42%, var(--forest-deep) 88%) 0 var(--band-top) / 100% calc(100% - var(--band-top)) no-repeat,
      url('../img/hero-moment-reflection.webp') 0 var(--band-top) / 100% calc(100% - var(--band-top)) no-repeat,
      var(--forest-deep);
  }
  .hero__media {
    top: var(--hero-top);
    bottom: auto;
    height: var(--box-h);
  }
  /* The picture's foot (the drinks on the table) melts into the band, below every face */
  .hero__media::after {
    content: '';
    position: absolute;
    inset: auto 0 0;
    height: 9%;
    background: linear-gradient(0deg, var(--forest-deep) 0%, rgba(11, 34, 51, 0) 100%);
    pointer-events: none;
  }
  .hero__scrim {
    display: none;
  }
}
/* Entrance (home page with motion, assets/js/hero.js): the wordmark, the titles, Book Now and the
   call to action hold, invisible and unfocusable, until the GSAP master timeline takes over and
   reveals them in sequence. If the script never runs, a timed fallback shows everything after 2.8 s.
   Without motion (reduced motion, ?nomotion, no JavaScript) nothing is hidden and nothing moves.
   The phone is never held back: its first photograph is there at first paint. */
.cine:not(.intro-ready) .home [data-intro] {
  opacity: 0;
  visibility: hidden;
  animation: intro-fallback 1ms linear 2.8s forwards;
}
@keyframes intro-fallback {
  to {
    opacity: 1;
    visibility: visible;
  }
}

/* Booking-card field primitives (tour pages): the compact field and the travellers popover */
/* Compact field: small label over the value, chevron where relevant */
.sfield {
  position: relative;
  display: grid;
  align-content: center;
  gap: 0.15rem;
  min-height: 60px;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--white);
  transition: border-color var(--dur) var(--ease-out);
}
.sfield:hover {
  border-color: var(--muted);
}
.sfield:focus-within {
  border-color: var(--gold);
}
.sfield__label {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--muted);
  line-height: 1.2;
}
.sfield__control {
  width: 100%;
  min-height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.4;
}
.sfield__control:focus {
  outline: none;
}
.sfield__control::placeholder {
  color: var(--ink);
  opacity: 0.85;
}
.sfield__control[type='date'] {
  -webkit-appearance: none;
  appearance: none;
  min-width: 0;
}
.sfield__control::-webkit-date-and-time-value {
  text-align: left;
}
.sfield__control::-webkit-calendar-picker-indicator {
  opacity: 0;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.sfield__chevron {
  position: absolute;
  right: 0.9rem;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--ink);
  pointer-events: none;
}
.sfield--button {
  cursor: pointer;
  text-align: left;
  width: 100%;
}
/* Travellers popover (adults and children counters) */
.sfield--pop {
  position: static;
}
.sfield-pop {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 0.5rem);
  z-index: 3;
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow-l);
}
@media (min-width: 64em) {
  .sfield-pop {
    left: auto;
    right: 0;
    width: 22rem;
  }
}
.no-js .sfield-pop {
  position: static;
  box-shadow: none;
  padding: 0;
  border: 0;
  grid-column: 1 / -1;
}
.sfield-pop__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.sfield-pop__row > span {
  display: grid;
  gap: 0.1rem;
}
.sfield-pop__row strong {
  font-weight: 600;
  color: var(--ink);
}
.sfield-pop__row small {
  font-size: var(--text-xs);
  color: var(--muted);
}
.sfield-pop__done {
  justify-self: end;
}
.no-js .sfield-pop__done,
.no-js .sfield__chevron--pop {
  display: none;
}
.no-js .sfield--button {
  display: none;
}

/* 8. Bands ----------------------------------------------------------------- */
/* Trust band (home) and benefit band (shuttles): forest, four outline icons */
.band {
  background: var(--forest-deep);
  color: var(--on-dark);
}
.band__list {
  display: grid;
  gap: var(--space-5) var(--space-6);
  padding-block: clamp(2rem, 1.5rem + 2vw, 3.25rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none;
  margin: 0;
}
@media (min-width: 64em) {
  .band__list {
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    grid-template-columns: none;
  }
}
.band__item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-width: 0;
}
.band__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--gold-soft);
  color: var(--gold-soft);
}
.band__icon .icon {
  width: 22px;
  height: 22px;
}
.band__title {
  display: block;
  font-weight: 600;
  font-size: var(--text-small);
  color: var(--white);
  line-height: 1.3;
}
.band__text {
  display: block;
  font-size: var(--text-xs);
  line-height: 1.4;
  color: var(--on-dark-muted);
}
@media (max-width: 39.99em) {
  .band__list {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
}

/* Closing call-to-action band */
.cta {
  background: var(--forest-deep);
  color: var(--on-dark);
  text-align: center;
}
.cta h2 {
  color: var(--white);
  max-width: 18em;
  margin-inline: auto;
}
.cta .lead {
  margin: var(--space-4) auto 0;
  color: var(--on-dark);
}
.cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

/* 9. Section heads --------------------------------------------------------- */
.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4) var(--space-6);
  margin-bottom: clamp(1.75rem, 1.25rem + 2vw, 3rem);
}
.section-head > div {
  max-width: 44rem;
  min-width: 0;
}
.section-head .lead {
  margin-top: var(--space-3);
}
.section-head--center {
  justify-content: center;
  text-align: center;
}
.section-head--center .lead {
  margin-inline: auto;
}
/* A breadcrumb in a centred head is centred with it (the reviews page's title band) */
.section-head--center .breadcrumb ol {
  justify-content: center;
}
@media (max-width: 39.99em) {
  .section-head {
    flex-direction: column;
    align-items: flex-start;
  }
  /* …except a centred head, which stays centred on phones */
  .section-head--center {
    align-items: center;
  }
}

/* 10. Cards ---------------------------------------------------------------- */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-s);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}
.card:focus-within {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--mist);
}
.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus, 50% 50%);
  transition: transform 0.8s var(--ease-out);
}
.card:hover .card__media img {
  transform: scale(1.03);
}
.card__badge {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  padding: 0.3rem 0.6rem;
  border-radius: var(--radius-s);
  background: rgba(11, 34, 51, 0.86);
  color: var(--white);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--space-2);
  padding: 1.25rem 1.5rem 1.5rem;
}
.card__title {
  font-size: var(--text-h4);
  font-weight: 650;
  line-height: 1.2;
}
.card__title a {
  color: inherit;
  text-decoration: none;
}
.card__title a::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}
.card__title a:focus-visible {
  outline: none;
}
.card__text {
  color: var(--muted);
  font-size: var(--text-small);
  line-height: 1.55;
}
.card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.9rem;
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  color: var(--muted);
}
.card__meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.card__meta .icon {
  color: var(--gold);
}
.card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-4);
}
.price {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  min-width: 0;
}
.price__amount {
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--ink);
}
.price__amount s {
  font-size: 0.85em;
  font-weight: 500;
  color: var(--muted);
  margin-left: 0.25em;
}
.price__note {
  font-size: var(--text-xs);
  color: var(--muted);
}
.price--quote .price__amount {
  font-size: var(--text-small);
}
/* Custom-day card: forest; on the tours page with a collage above its words (below) */
.card--custom {
  justify-content: flex-end;
  min-height: 20rem;
  padding: var(--space-6) var(--space-5);
  background: var(--forest);
  border-color: var(--forest);
  color: var(--white);
}
.card--custom .card__title {
  color: var(--white);
}
.card--custom .card__text {
  color: var(--on-dark);
}
.card--custom .eyebrow {
  color: var(--gold-soft);
}
/* The custom-day card's collage (tours page): three Good Times photographs pinned like prints in a
   travel journal, Peninsula, City and Winelands, a dashed champagne route running behind them. It takes the room
   above the words, so the card matches its neighbours' photographs. The prints deal out from a stack as the card is
   revealed (an animation that leaves no fill behind, so the hover can move them after) and spread a little on hover. */
.card--collage {
  justify-content: flex-start;
  padding-top: var(--space-5);
}
.route-collage {
  display: grid;
  flex: 1;
  place-items: center;
  margin-bottom: var(--space-5);
  /* The prints stack among themselves only: the card's link (its title's ::after) stays over all of them */
  isolation: isolate;
}
.route-collage__stage {
  position: relative;
  width: min(100%, 26rem);
  aspect-ratio: 5 / 4;
  container-type: inline-size;
}
.route-collage__route {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: var(--gold-soft);
  stroke-width: 1.4;
  stroke-dasharray: 2 6;
  stroke-linecap: round;
  stroke-opacity: 0.7;
  vector-effect: non-scaling-stroke;
}
.route-collage__print {
  --rot: 0deg;
  position: absolute;
  width: 41%;
  margin: 0;
  padding: 5px 5px 0;
  border-radius: 3px;
  background: #fbf7ee;
  box-shadow: 0 14px 28px rgba(0, 10, 18, 0.34), 0 2px 5px rgba(0, 10, 18, 0.26);
  transform: translate(0, 0) rotate(var(--rot));
  transition: transform 0.5s var(--ease-out);
}
/* A brass pin at the top of each print */
.route-collage__print::before {
  content: '';
  position: absolute;
  top: -5px;
  left: calc(50% - 5px);
  z-index: 1;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #c9f5d6, #2fbe60 60%, #056a2b);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}
.route-collage__print picture {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 1px;
}
.route-collage__print img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* The prints' labels on the white border, in the display face already on the page: hand-writing them in Caveat cost
   the tours page a 75 KB font for four decorative, hidden labels (measured on the preview, qa/surgical-change-report.md) */
.route-collage__print figcaption {
  padding: 0.3rem 0 0.4rem;
  font-family: var(--font-display);
  font-size: clamp(0.75rem, 4.2cqi, 0.9375rem);
  font-weight: 600;
  line-height: 1.1;
  text-align: center;
  color: var(--ink);
}
.route-collage__print--1 {
  --rot: -7deg;
  --sx: 32%;
  --sy: 40%;
  --hx: -6px;
  --hy: -4px;
  top: 7%;
  left: 1%;
}
.route-collage__print--2 {
  --rot: 5deg;
  --sx: -38%;
  --sy: 44%;
  --hx: 6px;
  --hy: -5px;
  top: 1%;
  right: 1%;
}
.route-collage__print--3 {
  --rot: -2deg;
  --sx: 0%;
  --sy: -12%;
  --hx: 2px;
  --hy: 6px;
  z-index: 2;
  top: 52%;
  left: 31%;
}
.card--collage:hover .route-collage__print {
  transform: translate(var(--hx), var(--hy)) rotate(calc(var(--rot) * 1.3));
}
.cine .card--collage.is-visible .route-collage__print {
  /* After the card's own fade has begun (data-reveal, about 0.25 s in), so the stack is seen before it fans out */
  animation: collage-deal 0.9s var(--ease-out) backwards;
  animation-delay: calc(0.5s + var(--deal, 0) * 120ms);
}
.cine .card--collage.is-visible .route-collage__route {
  animation: collage-route 1.1s var(--ease-out) 0.8s backwards;
}
.route-collage__print--2 {
  --deal: 1;
}
.route-collage__print--3 {
  --deal: 2;
}
@keyframes collage-deal {
  from {
    transform: translate(var(--sx), var(--sy)) rotate(0deg) scale(0.94);
  }
}
@keyframes collage-route {
  from {
    opacity: 0;
  }
}
/* Row card (shuttles): thumbnail, title, description, arrow */
.rows {
  display: grid;
  gap: var(--space-4);
}
.row-card {
  position: relative;
  display: grid;
  grid-template-columns: 5.75rem minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-3);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-s);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
@media (min-width: 40em) {
  .row-card {
    grid-template-columns: 9.5rem minmax(0, 1fr) auto;
    gap: var(--space-5);
    padding: var(--space-4);
  }
}
.row-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.row-card:focus-within {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.row-card__media {
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-s);
  overflow: hidden;
  background: var(--mist);
}
.row-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus, 50% 50%);
}
.row-card__body {
  min-width: 0;
}
.row-card__title {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}
.row-card__title a {
  color: inherit;
  text-decoration: none;
}
.row-card__title a::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}
.row-card__title a:focus-visible {
  outline: none;
}
.row-card__text {
  margin-top: 0.2rem;
  font-size: var(--text-small);
  color: var(--muted);
  line-height: 1.45;
}
.row-card__meta {
  margin-top: 0.35rem;
  font-size: var(--text-xs);
  color: var(--muted);
}
@media (min-width: 48em) {
  .row-card {
    grid-template-columns: 13.5rem minmax(0, 1fr);
    gap: var(--space-6);
    padding: var(--space-4) var(--space-5) var(--space-4) var(--space-4);
  }
  .row-card__title {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 500;
    letter-spacing: -0.01em;
  }
  .row-card__text {
    margin-top: 0.35rem;
    font-size: var(--text-body);
  }
  .row-card__meta {
    margin-top: 0.5rem;
  }
}

/* 11. Chips, segmented control, tab bar ------------------------------------ */
.chips {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  padding: 2px 2px var(--space-2);
  margin-bottom: var(--space-6);
  scrollbar-width: thin;
}
.chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--white);
  color: var(--ink);
  font-size: var(--text-small);
  font-weight: 500;
  transition: background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.chip:hover {
  border-color: var(--ink);
}
.chip[aria-pressed='true'] {
  background: var(--forest);
  border-color: var(--forest);
  color: var(--white);
  font-weight: 600;
}
.segmented {
  display: flex;
  padding: 4px;
  border-radius: var(--radius-s);
  background: var(--mist);
  margin-bottom: var(--space-5);
}
.segmented__tab {
  flex: 1 1 0;
  min-width: 0;
  min-height: 46px;
  padding: 0 0.75rem;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--ink);
  font-size: var(--text-small);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.segmented__tab[aria-selected='true'] {
  background: var(--forest);
  color: var(--white);
  font-weight: 600;
}
.segmented__tab:hover:not([aria-selected='true']) {
  background: rgba(255, 255, 255, 0.7);
}
/* Underlined tab bar (tour detail) */
.tabbar {
  display: flex;
  gap: clamp(1.25rem, 0.75rem + 1.5vw, 2.25rem);
  margin-bottom: var(--space-6);
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
}
.tabbar::-webkit-scrollbar {
  display: none;
}
.tabbar__tab {
  position: relative;
  flex: none;
  min-height: 52px;
  padding: 0 0.15rem;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: var(--text-small);
  font-weight: 500;
  white-space: nowrap;
  transition: color var(--dur) var(--ease-out);
}
.tabbar__tab:hover {
  color: var(--ink);
}
.tabbar__tab[aria-selected='true'] {
  color: var(--ink);
  font-weight: 600;
}
.tabbar__tab::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transition: transform var(--dur) var(--ease-out);
}
.tabbar__tab[aria-selected='true']::after {
  transform: scaleX(1);
}
.tabbar__tab:focus-visible {
  outline-offset: -2px;
}
.tab-panel + .tab-panel {
  margin-top: var(--space-7);
}
.js .tabs.is-enhanced .tab-panel + .tab-panel {
  margin-top: 0;
}
.tab-panel__title {
  font-size: clamp(1.5rem, 1.3rem + 0.8vw, 2rem);
  margin-bottom: var(--space-4);
}
.js .tabs.is-enhanced .tab-panel__title {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* 12. Banners (tours, shuttles, about) ------------------------------------- */
.banner {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: end;
  min-height: var(--banner-h, clamp(22rem, 16rem + 18vw, 36rem));
  padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem);
  color: var(--white);
  background: var(--forest-deep);
  overflow: hidden;
}
.banner--center {
  align-items: center;
}
.banner__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.banner__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus, 50% 50%);
}
@media (max-width: 47.99em) {
  .banner__media img {
    object-position: var(--focus-mobile, var(--focus, 50% 50%));
  }
}
.banner::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(1, 18, 39, 0.62) 0%, rgba(1, 18, 39, 0.36) 42%, rgba(1, 18, 39, 0.06) 75%),
    linear-gradient(0deg, rgba(1, 18, 39, 0.5) 0%, rgba(1, 18, 39, 0) 45%);
}
@media (max-width: 47.99em) {
  .banner::before {
    background: linear-gradient(0deg, rgba(1, 18, 39, 0.82) 0%, rgba(1, 18, 39, 0.5) 50%, rgba(1, 18, 39, 0.2) 100%);
  }
}
.banner__content {
  max-width: 40rem;
}
.banner h1 {
  color: var(--white);
  text-shadow: 0 2px 20px rgba(1, 18, 39, 0.3);
}
.banner__sub {
  margin-top: var(--space-4);
  font-size: var(--text-lead);
  font-weight: 600;
  color: var(--white);
}
.banner__text {
  margin-top: var(--space-3);
  font-size: var(--text-body);
  color: rgba(255, 255, 255, 0.9);
  max-width: 34em;
  text-wrap: pretty;
}
.banner .breadcrumb {
  margin-bottom: var(--space-4);
}
.banner__back {
  position: absolute;
  top: clamp(1rem, 0.5rem + 2vw, 2rem);
  left: 0;
  right: 0;
  z-index: 2;
}
/* Plain page head (FAQ, privacy, terms, contact, 404) */
.page-head {
  padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem) clamp(1.5rem, 1rem + 2vw, 2.5rem);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.page-head h1 {
  max-width: 18em;
}
.page-head .lead {
  margin-top: var(--space-4);
}
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  font-size: var(--text-xs);
  color: var(--muted);
}
.banner .breadcrumb ol {
  color: rgba(255, 255, 255, 0.8);
}
.breadcrumb li + li::before {
  content: '/';
  margin-right: 0.4rem;
  opacity: 0.6;
}
.breadcrumb a {
  color: inherit;
  text-decoration: none;
}
.breadcrumb a:hover {
  text-decoration: underline;
}
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  min-height: 44px;
  color: var(--white);
  font-size: var(--text-small);
  font-weight: 500;
  text-decoration: none;
  text-shadow: 0 1px 8px rgba(1, 18, 39, 0.5);
}
.back-link:hover {
  color: var(--white);
  text-decoration: underline;
}

/* 13. Tour detail ---------------------------------------------------------- */
.tour-hero {
  position: relative;
  isolation: isolate;
  height: clamp(18rem, 14rem + 22vw, 34rem);
  background: var(--forest-deep);
  overflow: hidden;
}
/* A licensed photograph's credit (origin L, not a Good Times photograph), on the photograph itself: small, at its top
   right (clear of the subject at the foot, such as the Agulhas sign), readable on any picture */
.tour-hero__credit {
  position: absolute;
  top: 0.6rem;
  right: var(--gutter);
  z-index: 1;
  max-width: calc(100% - 2 * var(--gutter));
  margin: 0;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: rgba(7, 16, 18, 0.58);
  color: rgba(255, 255, 255, 0.94);
  font-size: 0.6875rem;
  line-height: 1.4;
}
.tour-hero__frame:has(.tour-hero__credit) {
  position: relative;
}
/* The same credit on a third party's photograph in a card or a service's frame (cards.mjs licensedCredit) */
.photo-credit {
  position: absolute;
  right: 0.5rem;
  bottom: 0.5rem;
  z-index: 1;
  display: block;
  max-width: calc(100% - 1rem);
  margin: 0;
  padding: 0.15rem 0.55rem;
  border-radius: 0.75rem;
  background: rgba(7, 16, 18, 0.62);
  color: rgba(255, 255, 255, 0.95);
  font-size: 0.625rem;
  font-weight: 500;
  line-height: 1.35;
  text-align: right;
  pointer-events: none;
}
.tour-hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.tour-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus, 50% 50%);
}
.tour-hero::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 7rem;
  z-index: 0;
  background: linear-gradient(180deg, rgba(1, 18, 39, 0.5), rgba(1, 18, 39, 0));
}
/* Small-source variant: the photo stays at or below its native width in a frame on the right */
.tour-hero--framed {
  display: grid;
  align-items: center;
  height: auto;
  min-height: clamp(18rem, 14rem + 20vw, 32rem);
  padding-block: clamp(4rem, 3rem + 3vw, 5.5rem) clamp(2rem, 1.5rem + 2vw, 3rem);
  color: var(--white);
}
.tour-hero--framed::before {
  display: none;
}
.tour-hero__grid {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}
@media (min-width: 56em) {
  .tour-hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}
.tour-hero__frame {
  width: 100%;
  max-width: var(--frame-max, 40rem);
  justify-self: end;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-l);
  aspect-ratio: var(--ratio, 3 / 2);
  background: var(--forest);
}
.tour-hero__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tour-hero__frame-note {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--on-dark-muted);
}
.tour-hero--framed h1 {
  color: var(--white);
}
.tour-hero--framed .lead {
  color: var(--on-dark);
}
/* Title block */
.tour-title {
  padding-block: clamp(1.75rem, 1.25rem + 2vw, 3rem) 0;
}
.tour-title h1 {
  max-width: 16em;
}
.tour-title__sub {
  margin-top: var(--space-3);
  font-size: var(--text-lead);
  color: var(--text);
  max-width: 36em;
  text-wrap: pretty;
}
.tour-title__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  margin-top: var(--space-5);
  padding-block: var(--space-4);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: var(--text-small);
  color: var(--text);
}
.tour-title__meta > * {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.tour-title__meta .icon {
  color: var(--gold);
}
/* Rating row: decorative stars, numeric rating, count */
.stars {
  display: inline-flex;
  gap: 2px;
  color: var(--star);
}
.stars svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  stroke: none;
}
.stars--large svg {
  width: 20px;
  height: 20px;
}
.rating {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-small);
  color: var(--text);
}
.rating__score {
  font-weight: 600;
  color: var(--ink);
}
.rating a {
  color: var(--muted);
}
/* Body: editorial column and booking card */
.detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 1.5rem + 3vw, 4rem);
  align-items: start;
  padding-block: clamp(2rem, 1.5rem + 2vw, 3rem) var(--section);
}
.detail > * {
  min-width: 0;
}
@media (min-width: 64em) {
  .detail {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: clamp(2.5rem, 2rem + 3vw, 4.5rem);
  }
}
.detail__aside {
  position: sticky;
  top: calc(var(--header-h) + var(--space-5));
}
@media (max-width: 63.99em) {
  .detail__aside {
    position: static;
  }
}
.detail__intro h2 {
  font-size: clamp(1.625rem, 1.3rem + 1.1vw, 2.25rem);
  max-width: 16em;
}
/* The overview's one-line lead (tours.mjs OVERVIEW_LEAD), between the heading and the tour's own facts */
.detail__intro .detail__lead {
  max-width: 40rem;
  margin-top: var(--space-3);
  color: var(--text);
}
.detail__intro .prose {
  margin-top: var(--space-4);
}
.feature-list {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-6);
  list-style: none;
  padding: 0;
}
.feature-list li {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  color: var(--text);
}
.feature-list .icon {
  width: 24px;
  height: 24px;
  color: var(--ink);
}
/* Booking card */
.enquiry-card {
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}
.enquiry-card > * + * {
  margin-top: var(--space-4);
}
.enquiry-card__from {
  font-size: var(--text-small);
  color: var(--muted);
}
.enquiry-card__amount {
  display: block;
  margin-top: 0.1rem;
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.8rem + 0.8vw, 2.5rem);
  font-weight: 500;
  line-height: 1;
  color: var(--ink);
}
.enquiry-card__amount small {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  color: var(--muted);
}
.enquiry-card .price__note {
  display: block;
  margin-top: 0.35rem;
}
.enquiry-card__rating {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-small);
  color: var(--text);
}
.enquiry-card__rating strong {
  color: var(--ink);
}
.enquiry-card__fields {
  display: grid;
  gap: var(--space-3);
}
.enquiry-card .btn {
  width: 100%;
}
.enquiry-card__notes {
  display: grid;
  gap: 0.45rem;
  margin-top: var(--space-4);
  list-style: none;
  padding: 0;
  font-size: var(--text-xs);
  color: var(--muted);
}
.enquiry-card__notes li {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
}
.enquiry-card__notes .icon {
  margin-top: 0.1em;
  color: var(--gold);
}
.enquiry-card a:not(.btn) {
  color: var(--ink);
}
/* Itinerary, inclusions */
.itinerary {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: stop;
}
.itinerary li {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) 0 var(--space-3) 3rem;
  border-bottom: 1px solid var(--line);
}
.itinerary li::before {
  counter-increment: stop;
  content: counter(stop);
  position: absolute;
  left: 0;
  top: 50%;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  transform: translateY(-50%);
  border-radius: 50%;
  border: 1px solid var(--gold-soft);
  color: var(--gold);
  font-size: var(--text-xs);
  font-weight: 600;
  background: var(--gold-tint);
}
.itinerary__stop {
  font-weight: 500;
  color: var(--ink);
}
.itinerary__time {
  flex: none;
  font-size: var(--text-xs);
  color: var(--muted);
}
.cols-2 {
  display: grid;
  gap: var(--space-6);
}
@media (min-width: 40em) {
  .cols-2 {
    grid-template-columns: 1fr 1fr;
  }
}
.cols-2 h3 {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: var(--space-3);
}
/* Wide photo band with a gallery action */
.photo-band {
  position: relative;
  isolation: isolate;
  height: clamp(16rem, 12rem + 18vw, 30rem);
  background: var(--forest-deep);
  overflow: hidden;
}
.photo-band img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus, 50% 50%);
}
.photo-band__action {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: linear-gradient(0deg, rgba(1, 18, 39, 0.35), rgba(1, 18, 39, 0.05));
}
/* The way into the gallery's lightbox (media.js): the system's dark-ground secondary over the photograph,
   its count a quieter second word */
.photo-band__count {
  margin-left: 0.6em;
  padding-left: 0.6em;
  border-left: 1px solid rgba(111, 237, 143, 0.45);
  font-weight: 500;
  opacity: 0.86;
}
/* Sticky booking bar (phones and tablets) */
.mobile-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-bar);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--gutter) calc(var(--space-3) + env(safe-area-inset-bottom));
  background: var(--white);
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 24px rgba(1, 18, 39, 0.08);
  transform: translateY(110%);
  visibility: hidden;
  transition: transform var(--dur-slow) var(--ease-out), visibility 0s linear var(--dur-slow);
}
.mobile-cta.is-visible {
  transform: none;
  visibility: visible;
  transition-delay: 0s;
}
.mobile-cta .btn {
  flex: 1;
  min-width: 0;
}
/* The narrowest phones (under 384 px): the two buttons share about 290 px, so their padding and words tighten a
   little and "Plan My Day" stays whole beside WhatsApp */
@media (max-width: 23.99em) {
  .mobile-cta .gt-button {
    gap: 0.4rem;
    padding-inline: 0.7rem;
    font-size: 0.875rem;
  }
}
.mobile-cta__price {
  flex: 1;
  font-size: var(--text-xs);
  line-height: 1.3;
  color: var(--muted);
}
.mobile-cta__price strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--ink);
}
.mobile-cta__price strong small {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--muted);
}
@media (min-width: 64em) {
  .mobile-cta {
    display: none;
  }
}
.has-mobile-cta .site-footer {
  padding-bottom: calc(5.75rem + env(safe-area-inset-bottom));
}
@media (min-width: 64em) {
  .has-mobile-cta .site-footer {
    padding-bottom: 0;
  }
}
@media (max-width: 63.99em) {
  html:has(.mobile-cta) {
    scroll-padding-bottom: calc(5.75rem + env(safe-area-inset-bottom));
  }
}

/* Visit statistics: the analytics choice (consent.js, D79). A card at the foot of the screen, above the booking bar
   where that shows, under the menu, the concierge and every dialog; never a wall over the page */
.consent {
  position: fixed;
  left: var(--gutter);
  right: var(--gutter);
  bottom: calc(var(--space-3) + env(safe-area-inset-bottom));
  z-index: calc(var(--z-bar) + 1);
  max-width: 30rem;
  padding: var(--space-4) var(--space-5) var(--space-5);
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 3px solid var(--gold-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-l);
  font-size: var(--text-small);
  line-height: 1.5;
}
.consent[hidden] {
  display: none;
}
.consent:focus {
  outline: none;
}
.consent:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
.consent__title {
  margin: 0 0 var(--space-1);
  font-weight: 600;
  color: var(--ink);
}
.consent__text,
.consent__status {
  margin: 0;
  color: var(--muted);
}
.consent__text a {
  color: var(--ink);
  text-decoration: underline;
}
.consent__status {
  margin-top: var(--space-2);
  font-weight: 600;
  color: var(--ink);
}
.consent__actions {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.consent__actions .btn {
  flex: 1;
  min-width: 0;
}
/* Reopened from the footer: the current answer is marked (and announced: aria-pressed) */
.consent__actions .btn[aria-pressed='true'] {
  box-shadow: inset 0 0 0 2px var(--gold);
}
/* Phones and tablets: above the sticky booking bar while it shows (5.75rem, the room the footer keeps for it) */
@media (max-width: 63.99em) {
  body:has(.mobile-cta.is-visible) .consent {
    bottom: calc(5.75rem + env(safe-area-inset-bottom) + var(--space-2));
  }
}
/* The footer's "Analytics settings": a button that reads as one of the footer's links */
.footer-links__button {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--on-dark);
  cursor: pointer;
}
.footer-links__button:hover {
  color: var(--white);
  text-decoration: underline;
}

/* 14. Gallery: the tour and package galleries use the media system's exhibition and lightbox (media.css, D71) */

/* 15. Reviews -------------------------------------------------------------- */
.reviews-photo {
  position: relative;
  isolation: isolate;
  padding-block: clamp(3rem, 2rem + 4vw, 5.5rem);
  background: var(--ivory-soft);
  overflow: hidden;
}
.reviews-photo__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.reviews-photo__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus, 50% 60%);
}
.reviews-photo::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(246, 243, 236, 0.92) 0%, rgba(246, 243, 236, 0.75) 40%, rgba(246, 243, 236, 0.15) 100%);
}
.reviews-photo .section-head {
  margin-bottom: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}
.score {
    position: sticky;
    top: calc(var(--header-h) + var(--space-5));
  }
}
.score {
  padding: var(--space-6);
  border-radius: var(--radius);
  background: var(--white);
  border: 1px solid var(--line);
}
.score__number {
  font-family: var(--font-display);
  font-size: 4rem;
  font-weight: 500;
  line-height: 1;
  color: var(--ink);
}
.score__number small {
  font-family: var(--font-body);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--muted);
}
.score__meta {
  margin-top: var(--space-2);
  color: var(--muted);
  font-size: var(--text-small);
}
.bars {
  display: grid;
  gap: 0.45rem;
  margin: var(--space-5) 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-xs);
}
.bars li {
  display: grid;
  grid-template-columns: 5rem 1fr 2.5rem;
  align-items: center;
  gap: var(--space-3);
}
.bars__track {
  height: 8px;
  border-radius: 99px;
  background: var(--mist);
  overflow: hidden;
}
.bars__fill {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: var(--forest);
}
@media (forced-colors: active) {
  .bars__track {
    border: 1px solid CanvasText;
  }
  .bars__fill {
    forced-color-adjust: none;
    background: CanvasText;
  }
}
.bars li span:last-child {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.themes {
  display: grid;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  list-style: none;
  padding: 0;
}
@media (min-width: 48em) {
  .themes {
    grid-template-columns: repeat(3, 1fr);
  }
}
.themes li {
  padding-left: var(--space-4);
  border-left: 2px solid var(--gold);
}
.themes strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--ink);
}
.themes span {
  font-size: var(--text-small);
  color: var(--muted);
}

/* 16. Stats, steps, ticks, callout ----------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6) var(--space-5);
  padding-block: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  border-top: 1px solid var(--line);
  list-style: none;
  margin: 0;
}
@media (min-width: 64em) {
  .stats {
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    grid-template-columns: none;
  }
}
.stats__value {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.5rem + 1.6vw, 2.75rem);
  font-weight: 500;
  line-height: 1.1;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.stats__value--accent {
  color: var(--forest);
}
.stats__label {
  margin-top: var(--space-2);
  font-size: var(--text-small);
  color: var(--muted);
}
.steps {
  display: grid;
  gap: var(--space-5);
  counter-reset: step;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 48em) {
  .steps {
    grid-template-columns: repeat(3, 1fr);
  }
}
.step {
  position: relative;
  padding: var(--space-5);
  border-radius: var(--radius);
  background: var(--white);
  border: 1px solid var(--line);
}
.step::before {
  counter-increment: step;
  content: counter(step);
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-bottom: var(--space-4);
  border-radius: 50%;
  background: var(--forest);
  color: var(--white);
  font-size: var(--text-small);
  font-weight: 600;
}
.step h3 {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 600;
  margin-bottom: var(--space-2);
}
.step p {
  color: var(--muted);
  font-size: var(--text-small);
}
.ticks {
  display: grid;
  gap: var(--space-3);
  list-style: none;
  padding: 0;
  margin: 0;
}
.ticks li {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}
.ticks .icon {
  margin-top: 0.25em;
  color: var(--gold);
}
.on-dark .ticks .icon,
.section--forest .ticks .icon {
  color: var(--gold-soft);
}
.ticks--cross .icon {
  color: var(--muted);
}
.callout {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  margin-top: var(--space-6);
  padding: var(--space-4) var(--space-5);
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
  background: var(--ivory-soft);
  color: var(--ink);
  font-size: var(--text-small);
}
.callout .icon {
  margin-top: 0.2em;
  color: var(--gold);
}
.callout a {
  text-decoration: underline;
}

/* 17. FAQ and prose -------------------------------------------------------- */
.faq {
  border-top: 1px solid var(--line);
}
.faq details {
  border-bottom: 1px solid var(--line);
}
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 64px;
  padding: var(--space-4) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--ink);
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: '';
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background:
    linear-gradient(var(--ink), var(--ink)) center / 12px 1.5px no-repeat,
    linear-gradient(var(--ink), var(--ink)) center / 1.5px 12px no-repeat;
  transition: transform var(--dur-slow) var(--ease-out);
}
.faq details[open] summary::after {
  transform: rotate(45deg);
}
.faq__answer {
  padding: 0 0 var(--space-5);
  max-width: 44em;
  color: var(--text);
}
.faq__answer > * + * {
  margin-top: 0.75em;
}

/* 18. Footer --------------------------------------------------------------- */
.site-footer {
  background: var(--forest-deep);
  color: var(--on-dark);
  font-size: var(--text-small);
}
.footer-main {
  display: grid;
  gap: var(--space-7) var(--space-6);
  padding-block: clamp(3rem, 2.5rem + 3vw, 5rem);
}
@media (min-width: 40em) {
  .footer-main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 64em) {
  .footer-main {
    grid-template-columns: 1.6fr repeat(4, minmax(0, 1fr));
  }
}
/* The footer's lockup: the reversed compact logo (the full artwork carries the logo pack's own, older tagline) with the
   company statement under it, sized from the logo's width as in the header */
.brand-lockup--footer {
  --lockup-w: clamp(240px, 26vw, 320px);
  --statement-size: clamp(10px, calc(var(--lockup-w) / 25), 13px);
}
.footer-brand img {
  width: var(--lockup-w, clamp(240px, 26vw, 320px));
  max-width: 100%;
  height: auto;
}
.footer-brand .brand-lockup__statement {
  max-width: none;
  margin-top: 0.3em;
}
.footer-brand p {
  margin-top: var(--space-4);
  max-width: 24em;
  color: var(--on-dark-muted);
}
.footer-heading {
  margin-bottom: var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-eyebrow);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-soft);
}
.footer-links {
  display: grid;
  gap: 0.15rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-links a,
.footer-contact a {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 36px;
  color: var(--on-dark);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.22em;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
/* The underline fades in with the colour (a gentle landing, design/motion-bible.md §15); never motion-only */
.footer-links a:hover,
.footer-contact a:hover {
  color: var(--white);
  text-decoration-color: currentColor;
}
.footer-contact {
  display: grid;
  gap: var(--space-2);
}
.footer-contact > span:not(.pending) {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 36px;
}
.footer-contact .icon {
  color: var(--gold-soft);
}
.social {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-5);
  list-style: none;
  padding: 0;
}
.social a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
}
/* The networks' own marks in their own colours (25 Oct 2026): a disc of the brand colour, the glyph in white
   (Tripadvisor's owl in black, as Tripadvisor draws it). Glyphs: Simple Icons, CC0 (ui.mjs, BRAND_MARKS). */
.brand-mark {
  --mark: 44px;
  display: inline-grid;
  flex: none;
  place-items: center;
  width: var(--mark);
  height: var(--mark);
  overflow: hidden;
  border-radius: 50%;
  color: #fff;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.brand-mark svg {
  width: var(--glyph, 58%);
  height: var(--glyph, 58%);
  fill: currentColor;
}
.brand-mark--whatsapp {
  background: #25d366;
}
.brand-mark--instagram {
  --glyph: 54%;
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}
/* Facebook's f runs off the foot of its disc, as in the network's own mark */
.brand-mark--facebook {
  --glyph: 100%;
  background: #0866ff;
}
.brand-mark--facebook svg {
  transform: translateY(4%);
}
.brand-mark--phone {
  --glyph: 52%;
  background: #34c759;
}
.brand-mark--tripadvisor {
  --glyph: 74%;
  background: #34e0a1;
  color: #000;
}
/* Google's G keeps its own four colours, on white with a hairline (BRAND_ART in ui.mjs) */
.brand-mark--google {
  --glyph: 56%;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line);
}
.brand-mark--google svg {
  fill: initial;
}
.social a:hover .brand-mark,
.social a:focus-visible .brand-mark {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
}
@media (prefers-reduced-motion: reduce) {
  .social a:hover .brand-mark,
  .social a:focus-visible .brand-mark {
    transform: none;
  }
}
.footer-base {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.footer-base__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3) var(--space-5);
  padding-block: var(--space-5);
  font-size: var(--text-xs);
  color: var(--on-dark-muted);
}
.footer-base ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-base a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--on-dark);
}
/* Verified direct contact (footer, enquiry page): the number as selectable text, actions beside it */
.contact-list {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.contact-list__item {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
}
.contact-list__icon {
  margin-top: 0.2em;
  color: var(--gold);
}
.contact-list__body {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}
.contact-list__label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.contact-list__value {
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
span.contact-list__value {
  -webkit-user-select: all;
  user-select: all;
}
.contact-list__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-4);
}
.contact-list__actions a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 500;
  text-decoration: underline;
}
/* WhatsApp and Call, each with its familiar coloured mark */
.contact-list__actions .contact-action {
  gap: 0.5rem;
  text-decoration: none;
}
.contact-action .brand-mark {
  --mark: 30px;
}
.contact-action > span:not(.brand-mark):not(.visually-hidden) {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}
.site-footer .contact-list__icon,
.site-footer .contact-list__actions a {
  color: var(--gold-soft);
}
.site-footer .contact-list__label {
  color: var(--on-dark-muted);
}
.site-footer .contact-list__value {
  color: var(--white);
}

/* 19. Preview bar, pending notes, notices ---------------------------------- */
.preview-bar {
  position: relative;
  z-index: calc(var(--z-sticky) + 1);
  background: var(--forest-deep);
  color: var(--on-dark);
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1.35;
}
.preview-bar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 32px;
  padding-block: 0.3rem;
  text-align: center;
}
.preview-bar .icon {
  width: 16px;
  height: 16px;
  color: var(--gold-soft);
}
.pending {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.7rem;
  border: 1px dashed currentColor;
  border-radius: var(--radius-s);
  font-size: var(--text-xs);
  font-weight: 500;
  opacity: 0.85;
}
.source-note {
  font-size: var(--text-xs);
  color: var(--muted);
  max-width: 60em;
}
.source-note a {
  color: inherit;
}
.on-dark .source-note,
.section--forest .source-note {
  color: var(--on-dark-muted);
}
.notice {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font-size: var(--text-small);
}
.notice .icon {
  margin-top: 0.2em;
  color: var(--gold);
}
.notice--warning {
  background: var(--gold-tint);
  border-color: #cfe6d8;
}
.notice--error {
  background: var(--danger-tint);
  border-color: #f0c4c0;
  color: var(--danger-ink);
}
.notice--error .icon {
  color: var(--danger);
}
.notice--success {
  background: var(--success-tint);
  border-color: #bfdfca;
  color: #102e42;
}
.notice strong {
  display: block;
}
.notice a {
  text-decoration: underline;
}

/* 20. Forms (shared primitives; the booking wizard builds on these) -------- */
.field {
  display: grid;
  gap: 0.4rem;
}
.field + .field {
  margin-top: var(--space-5);
}
.field__label,
.fieldset__legend {
  font-weight: 600;
  font-size: var(--text-small);
  color: var(--ink);
}
.field__optional {
  font-weight: 400;
  color: var(--muted);
}
.field__hint {
  font-size: var(--text-xs);
  color: var(--muted);
}
.field__hint a {
  text-decoration: underline;
}
.field__error {
  display: flex;
  gap: 0.4rem;
  align-items: flex-start;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--danger);
}
.field__error:empty,
.field__error[hidden] {
  display: none;
}
.input {
  width: 100%;
  min-height: 52px;
  padding: 0.7rem 0.95rem;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--white);
  color: var(--ink);
  font-size: 1rem;
  transition: border-color var(--dur) var(--ease-out);
}
.input::placeholder {
  color: #7b858e;
}
.input:hover {
  border-color: var(--muted);
}
.input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(5, 106, 43, 0.18);
}
.input[aria-invalid='true'] {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.12);
}
textarea.input {
  min-height: 120px;
  resize: vertical;
}
select.input {
  appearance: none;
  padding-right: 2.6rem;
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23011227' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 0.85rem center / 18px;
}
.fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.fieldset__legend {
  padding: 0;
  margin-bottom: var(--space-3);
}
.choices {
  display: grid;
  gap: var(--space-3);
}
.choice {
  position: relative;
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--white);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
}
.choice:hover {
  border-color: var(--ink);
}
.choice input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0.15rem 0 0;
  accent-color: var(--forest);
}
.choice:has(input:checked) {
  border-color: var(--forest);
  background: var(--forest-soft);
  box-shadow: 0 0 0 1px var(--forest);
}
.choice:has(input:focus-visible) {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.choice__title {
  display: block;
  font-weight: 600;
  color: var(--ink);
}
.choice__hint {
  display: block;
  font-size: var(--text-xs);
  color: var(--muted);
}
.check {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  font-size: var(--text-small);
}
.check input {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 0.2rem;
  accent-color: var(--forest);
}
.form-row {
  display: grid;
  gap: var(--space-5);
}
@media (min-width: 40em) {
  .form-row--2 {
    grid-template-columns: 1fr 1fr;
  }
  .form-row--3 {
    grid-template-columns: repeat(3, 1fr);
  }
}
.form-row .field + .field {
  margin-top: 0;
}
.honeypot {
  position: absolute !important;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
/* Counter (− 2 +): outline minus, gold plus */
.counter {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.counter__btn {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--white);
  color: var(--ink);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1;
  transition: background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.counter__btn:hover {
  border-color: var(--ink);
}
.counter__btn:active {
  transform: scale(0.96);
}
.counter__btn[data-counter='1'] {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--white);
}
.counter__btn[data-counter='1']:hover {
  background: var(--gold-hover);
  border-color: var(--gold-hover);
}
.counter__btn[aria-disabled='true'] {
  opacity: 0.4;
  cursor: not-allowed;
}
.counter__btn[aria-disabled='true']:hover {
  border-color: var(--line-strong);
  background: var(--white);
}
.counter__btn[data-counter='1'][aria-disabled='true']:hover {
  background: var(--gold);
  border-color: var(--gold);
}
.counter__input {
  width: 3.25rem;
  min-height: 44px;
  padding: 0;
  text-align: center;
  font-weight: 600;
  font-size: 1.0625rem;
  border-color: transparent;
  background: transparent;
}
.counter__input:hover {
  border-color: transparent;
}
.counter__input:focus {
  border-color: var(--gold);
}
.no-js .counter__input,
.wizard.is-fallback .counter__input {
  border-color: var(--line-strong);
  width: 4.5rem;
}

/* 21. Motion, utilities, print --------------------------------------------- */
.cine [data-reveal] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
  transition-delay: calc(var(--reveal-i, 0) * 80ms);
}
.cine [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .card:hover,
  .row-card:hover {
    transform: none;
  }
}
.mt-0 {
  margin-top: 0 !important;
}
.mt-3 {
  margin-top: var(--space-3);
}
.mt-4 {
  margin-top: var(--space-4);
}
.mt-5 {
  margin-top: var(--space-5);
}
.mt-6 {
  margin-top: var(--space-6);
}
.mt-7 {
  margin-top: var(--space-7);
}
.center {
  text-align: center;
}
.center-x {
  display: flex;
  justify-content: center;
}
@media print {
  .site-header,
  .drawer,
  .preview-bar,
  .mobile-cta,
  .consent,
  .site-footer .social,
  .photo-band__action {
    display: none !important;
  }
  .hero,
  .banner,
  .band,
  .cta,
  .section--forest,
  .site-footer {
    background: none !important;
    color: #000 !important;
  }
  .hero h1,
  .banner h1 {
    color: #000 !important;
  }
}

/* Travellers popover field: the button carries the field look once JavaScript runs */
.js .no-js-only {
  display: none;
}
.no-js [data-requires-js] {
  display: none !important;
}
.sfield--pop {
  display: block;
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
}
.sfield--button {
  position: relative;
  display: grid;
  align-content: center;
  gap: 0.15rem;
  width: 100%;
  min-height: 60px;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--white);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease-out);
}
.sfield--button:hover {
  border-color: var(--muted);
}
.sfield--button[aria-expanded='true'] {
  border-color: var(--gold);
}
.no-js .sfield--pop {
  grid-column: 1 / -1;
  display: grid;
  gap: var(--space-2);
}
.no-js .sfield--pop > .sfield__label {
  font-weight: 600;
  color: var(--ink);
}

/* 22. Page pieces: plan bar, filter status, service blocks, panels, photo grid - */
.plan-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-bottom: var(--space-5);
  padding: 0.75rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--white);
  font-size: var(--text-small);
  color: var(--ink);
}
.plan-bar .icon {
  color: var(--gold);
}
.plan-bar a {
  margin-left: auto;
  font-weight: 600;
  color: var(--forest);
}
.filter-status {
  min-height: 1.5em;
  margin: calc(-1 * var(--space-4)) 0 var(--space-5);
  font-size: var(--text-small);
  color: var(--muted);
}
.tabs .tabbar {
  margin-top: var(--space-5);
}
.tabs .detail {
  padding-top: 0;
}
.enquiry-card__fields {
  position: relative;
}
.enquiry-card__fields .sfield-pop {
  width: 100%;
}
.tour-hero--framed .tour-title__meta {
  color: var(--on-dark);
  border-color: rgba(255, 255, 255, 0.22);
}
.tour-hero--framed .tour-title__meta .icon,
.tour-hero--framed .rating,
.tour-hero--framed .rating__score,
.tour-hero--framed .rating a {
  color: inherit;
}
.tour-hero--framed .eyebrow {
  color: var(--gold-soft);
}
.service-block {
  display: grid;
  gap: var(--space-6);
  align-items: start;
}
.service-block + .service-block {
  margin-top: var(--section);
  padding-top: var(--section);
  border-top: 1px solid var(--line);
}
@media (min-width: 56em) {
  .service-block {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-7);
  }
  .service-block--media-first > .service-block__media {
    order: -1;
  }
}
.service-block__media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
.service-block__media > :first-child {
  grid-column: 1 / -1;
  --ratio: 3 / 2;
}
.service-block__body > * + * {
  margin-top: var(--space-4);
}
.service-block__body h2 {
  max-width: 16em;
}
.service-block__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  padding-block: var(--space-4);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: var(--text-small);
  color: var(--text);
}
.meta-row > * {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.meta-row .icon {
  color: var(--gold);
}
.panel {
  padding: clamp(1.25rem, 1rem + 1vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}
.panel > * + * {
  margin-top: var(--space-4);
}
.panel h2 {
  font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem);
}
.panel h3 {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
}
.intro {
  max-width: 34em;
}
.intro p {
  font-size: var(--text-lead);
  color: var(--text);
  text-wrap: pretty;
}
.intro p + p {
  margin-top: var(--space-4);
}
.intro h2 {
  margin-bottom: var(--space-4);
}
.photo-band--tall {
  height: clamp(18rem, 14rem + 20vw, 32rem);
}
.photo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}
@media (min-width: 40em) {
  .photo-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.photo-grid figure {
  margin: 0;
}
.photo-grid figcaption {
  margin-top: 0.5rem;
  font-size: var(--text-xs);
  color: var(--muted);
}
.contact-links {
  display: grid;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}
.contact-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  color: var(--ink);
  font-weight: 500;
}
.contact-links .icon {
  color: var(--forest);
}
.contact-links .brand-mark {
  --mark: 32px;
}
/* The reviews page's title band over its photograph: ink, as on every other page title (white words on the washed
   photograph measured about 1.3:1), and the small words in their stronger tones, the lead and the breadcrumb in the
   body ink and the eyebrow in deep green (the regular tones measured 2.8–4.1:1 over the cliff; qa/scenic-contrast.mjs
   --band=/reviews/@.reviews-photo, 8 Nov 2026) */
.reviews-photo--page h1 {
  color: var(--ink);
}
.reviews-photo--page :is(.breadcrumb ol, .lead) {
  color: var(--text);
}
.reviews-photo--page .eyebrow {
  color: var(--green-deep);
}
.meta-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.intro-grid {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}
@media (min-width: 64em) {
  .intro-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--space-7);
  }
}
/* The About introduction beside its photographs (24 Oct 2026): the words a little narrower than before, the
   coast and penguins (culinary.css, .about-pair) wider than the logo panel they replace */
@media (min-width: 64em) {
  .intro-grid--photo {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: clamp(3rem, 2rem + 3vw, 5.5rem);
  }
}

/* 23. About: the people behind Good Times -------------------------------- */
/* A small photograph beside the founders' paragraph; four small frames for "Real faces" */
.people {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}
@media (min-width: 64em) {
  .people {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--space-8);
  }
}
.people__photo {
  margin: 0;
}
.people__photo figcaption {
  margin-top: 0.6rem;
  font-size: var(--text-xs);
  color: var(--muted);
}
.people__body h2 {
  max-width: 14em;
}
.people__body p {
  margin-top: var(--space-4);
  max-width: 36em;
  font-size: var(--text-lead);
  color: var(--text);
  text-wrap: pretty;
}
.people__body .pending {
  margin-top: var(--space-4);
}
@media (min-width: 48em) {
  .photo-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* 24. Multi-day packages (D60) --------------------------------------------- */
/* The Garden Route's illustrated route: an original sketch, shown only where a multi-day tour has no photograph */
.route-art {
  display: block;
  width: 100%;
  height: 100%;
}
.route-art__sea {
  fill: var(--forest-deep);
}
.route-art__land {
  fill: var(--forest);
}
.route-art__ridge {
  fill: none;
  stroke: var(--ivory);
  stroke-opacity: 0.22;
  stroke-width: 1.5;
  stroke-linejoin: round;
}
.route-art__coast {
  fill: none;
  stroke: var(--gold-soft);
  stroke-opacity: 0.55;
  stroke-width: 1.5;
  stroke-linejoin: round;
}
.route-art__route {
  fill: none;
  stroke: var(--champagne);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 9 9;
}
.route-art__stop {
  fill: var(--champagne);
  stroke: var(--forest-deep);
  stroke-width: 3;
}
.route-art__label {
  fill: var(--hero-ivory);
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 600;
}
.route-art__sea-label {
  fill: var(--on-dark-muted);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
}
.card--package .card__media .route-art {
  transition: transform 0.8s var(--ease-out);
}
.card--package:hover .card__media .route-art {
  transform: scale(1.03);
}
/* The booking card's nights choice: the field's own chevron replaces the native arrow */
select.sfield__control {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 1.75rem;
  cursor: pointer;
}
/* The framed hero holding the sketch, with its caption beneath */
.tour-hero__figure {
  width: 100%;
  max-width: 40rem;
  margin: 0;
  justify-self: end;
}
.tour-hero__figure .tour-hero__frame {
  max-width: none;
}
.tour-hero__frame--art {
  aspect-ratio: 3 / 2;
}
/* Suggested outline: one row per day, with the tour or transfer it follows */
.outline {
  list-style: none;
  margin: 0;
  padding: 0;
}
.outline__day {
  position: relative;
  padding: var(--space-4) 0 var(--space-4) 2rem;
  border-bottom: 1px solid var(--line);
}
.outline__day::before {
  content: '';
  position: absolute;
  left: 0.3rem;
  top: calc(var(--space-4) + 0.25rem);
  width: 0.75rem;
  height: 0.75rem;
  border: 2px solid var(--gold-soft);
  border-radius: 50%;
  background: var(--gold-tint);
}
.outline__label {
  margin: 0;
  font-size: var(--text-eyebrow);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}
.outline__title {
  margin-top: 0.35rem;
  font-size: 1.25rem;
}
.outline__text {
  margin-top: 0.4rem;
  max-width: 40em;
  color: var(--text);
}
.outline__based {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  font-size: var(--text-small);
  color: var(--muted);
}
.outline__based .icon {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--gold);
}

/* Currency selector (D75): only beside prices, never on the home page, in the header or the footer.
   Quiet words with a fine champagne rule and a gold chevron; the native select lies invisibly over them,
   so phones open their own picker and the keyboard works as for any select. "Prices displayed in GBP (£)"
   on wide screens, "Prices in GBP (£) · Change" on narrow ones. Its space is kept until it is ready. */
.priced-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-6);
  margin-bottom: var(--space-6);
}
.priced-head .chips {
  flex: 1 1 auto;
  min-width: 0;
  margin-bottom: 0;
}
.priced-head .chips[hidden] + .currency-picker {
  margin-left: auto;
}
.currency-picker {
  visibility: hidden;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  column-gap: 0.4em;
  font-size: var(--text-small);
  line-height: 1.3;
  color: var(--muted);
}
.currency-picker.is-ready {
  visibility: visible;
}
.currency-picker[hidden] {
  display: none;
}
.currency-picker__narrow,
.currency-picker__change {
  display: none;
}
.currency-picker__control {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.currency-picker__face {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.1em 0;
  border-bottom: 1px solid var(--champagne-deep);
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  transition: border-color 0.2s var(--ease-out);
}
.currency-picker__chevron {
  width: 1em;
  height: 1em;
  color: var(--gold);
}
.currency-picker__select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  border: 0;
  opacity: 0;
  font-size: 16px; /* no zoom on iOS */
  cursor: pointer;
  appearance: none;
}
.currency-picker__control:hover .currency-picker__face {
  border-bottom-color: var(--gold);
}
.currency-picker__control:has(.currency-picker__select:focus-visible) {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: var(--radius-s);
}
.currency-picker.is-fixed .currency-picker__face {
  border-bottom-color: transparent;
}
.currency-picker.is-fixed .currency-picker__chevron,
.currency-picker.is-fixed .currency-picker__change {
  display: none;
}
.currency-picker.is-fixed .currency-picker__select {
  cursor: default;
}
.currency-area .currency-picker {
  justify-content: flex-start;
}
.currency-area[hidden] {
  display: none;
}
.currency-area--card {
  margin-top: 0.35rem;
}
.currency-area--inline {
  margin-top: var(--space-3);
}
@media (max-width: 39.99em) {
  .currency-picker {
    justify-content: flex-start;
  }
  .currency-picker__wide,
  .currency-picker__chevron {
    display: none;
  }
  .currency-picker__narrow {
    display: inline;
  }
  .currency-picker__face {
    border-bottom: 0;
    font-weight: 500;
  }
  .currency-picker__change {
    display: inline;
    font-weight: 600;
    color: var(--gold);
    text-decoration: underline;
    text-decoration-color: var(--champagne-deep);
    text-underline-offset: 0.2em;
  }
  .currency-picker__change::before {
    content: '·';
    display: inline-block;
    margin-right: 0.3em;
    color: var(--muted);
    text-decoration: none;
  }
}

/* 25. Good Times additions ------------------------------------------------- */
/* The credentials strip (partials/credentials.mjs; home, straight after the sand journey): the beach's warm sand runs
   on into it, three short points sit beside the association's mark, and the coast-road chapter follows. Tokens only. */
.gt-credentials {
  position: relative;
  padding-block: clamp(2.25rem, 1.5rem + 3vw, 4.25rem);
  background: linear-gradient(180deg, var(--surface-sand-deep) 0%, var(--surface-sand) 38%, var(--surface-sand) 100%);
  color: var(--text);
}
.gt-credentials__inner {
  display: grid;
  gap: clamp(1.4rem, 1rem + 1.6vw, 2.5rem);
  align-items: center;
}
.gt-credentials__eyebrow {
  margin: 0 0 0.35rem;
  font-family: var(--font-accent);
  font-size: var(--text-accent);
  font-weight: 600;
  line-height: 1;
  color: var(--green-primary);
  transform: rotate(-2deg);
  transform-origin: left center;
}
.gt-credentials__title {
  max-width: 13ch;
  font-size: var(--text-h3);
  font-weight: var(--weight-display);
  line-height: 1.05;
  letter-spacing: -0.025em;
}
.gt-credentials__title em {
  color: var(--green-primary);
}
.gt-credentials__points {
  display: grid;
  gap: 0.85rem 1.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.gt-credentials__point {
  position: relative;
  padding-left: 1.75rem;
  font-size: var(--text-small);
  line-height: 1.5;
  color: var(--text);
}
/* Each point opens with a small leaf: a decoration of the strip, not of a button (the buttons carry no leaf since the
   owner's request of 8 Nov 2026), so its glyph is drawn here and nowhere in the button system */
.gt-credentials__point::before {
  content: '';
  position: absolute;
  top: 0.2rem;
  left: 0;
  width: 1.1rem;
  height: 1.1rem;
  background-color: var(--green-primary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M4.2 19.8C3.6 11 9.6 4.4 19.9 4.1c.3 10.3-6.3 16.3-15.1 15.7Zm1.3-2.4c2.9-3.6 6.2-6.7 10-9.5-.5.9-1.1 1.6-1.8 2.4-2.4 2.6-5 5-8 7.4l-.2-.3Z'/%3E%3Cpath d='M1.8 22.2 4.6 19.4' stroke='%23000' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M4.2 19.8C3.6 11 9.6 4.4 19.9 4.1c.3 10.3-6.3 16.3-15.1 15.7Zm1.3-2.4c2.9-3.6 6.2-6.7 10-9.5-.5.9-1.1 1.6-1.8 2.4-2.4 2.6-5 5-8 7.4l-.2-.3Z'/%3E%3Cpath d='M1.8 22.2 4.6 19.4' stroke='%23000' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.gt-credentials__point strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.gt-credentials__badge {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0;
  padding: 0.7rem 1.25rem 0.7rem 0.8rem;
  border: 1px solid var(--surface-sand-deep);
  border-radius: 24px;
  background: var(--surface-white);
  box-shadow: 0 12px 28px -20px rgb(16 36 29 / 0.45);
}
.gt-credentials__logo {
  flex: none;
  display: block;
  width: clamp(116px, 96px + 3vw, 148px);
  border-radius: 8px;
}
.gt-credentials__logo img {
  width: 100%;
  height: auto;
}
.gt-credentials__line {
  max-width: 15rem;
  font-size: var(--text-small);
  font-weight: 500;
  line-height: 1.45;
  color: var(--ink);
}
.gt-credentials__pending {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  margin-top: 0.55rem;
  padding: 0.35rem 0.6rem;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-s);
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1.35;
  color: var(--muted);
}
.gt-credentials__pending .icon {
  flex: none;
  width: 14px;
  height: 14px;
  margin-top: 0.1rem;
}
@media (min-width: 40em) {
  .gt-credentials__points {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .gt-credentials__inner.has-badge {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .gt-credentials__inner.has-badge .gt-credentials__points {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}
@media (min-width: 80em) {
  .gt-credentials__inner,
  .gt-credentials__inner.has-badge {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.6fr);
  }
  .gt-credentials__inner.has-badge {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.25fr) auto;
  }
  .gt-credentials__inner.has-badge .gt-credentials__points {
    grid-column: auto;
    grid-row: auto;
    grid-template-columns: 1fr;
  }
}

:root {
  --gt-em: var(--green-primary); /* emphasised words in headings: the leaf green, 5.2:1 on white */
}
/* The approved logo artwork (Table Mountain and the trail) in place of a photograph, where Good Times has none yet */
.art-panel {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 12% 11%;
  background: radial-gradient(120% 95% at 50% 100%, #e3f3e8 0%, #f4f9f6 58%, #ffffff 100%);
}
.art-panel > img,
.card__media .art-panel > img,
.booking-summary__media .art-panel > img,
.gt-concierge__thumb .art-panel > img {
  width: 100%;
  max-width: 22rem;
  height: auto;
  object-fit: contain;
}
.card:hover .card__media .art-panel > img {
  transform: none;
}
.art-panel--thumb {
  padding: 5px;
}
.art-panel--hero {
  border-radius: inherit;
}
/* A published rate's group tiers in the booking card */
.price-tiers {
  display: grid;
  gap: 0;
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-small);
}
.price-tiers li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 0.4rem 0;
  border-top: 1px solid var(--line);
}
.price-tiers li > span:first-child {
  color: var(--muted);
}
/* The office address (contact page, footer) */
.contact-office {
  font-style: normal;
  line-height: 1.55;
}
.footer-contact__office {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.55rem;
  color: inherit;
  line-height: 1.45;
  text-decoration: none;
}
.footer-contact__office .icon {
  flex: none;
  margin-top: 0.15em;
}