/* Brightwild Adventures */

/* ------------------------------------------------------------------ FONTS */
@font-face { font-family: "Graphik"; src: url("/assets/fonts/Graphik-Regular-App.woff2?v=cd33875097") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Graphik"; src: url("/assets/fonts/Graphik-RegularItalic-App.woff2?v=f870187f53") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Graphik"; src: url("/assets/fonts/Graphik-Semibold-App.woff2?v=0b6efab54e") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Graphik"; src: url("/assets/fonts/Graphik-SemiboldItalic-App.woff2?v=92f3bf9511") format("woff2"); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Graphik Condensed"; src: url("/assets/fonts/GraphikCondensed-Bold-App.woff2?v=a7f140d33c") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "General Grotesque Mono"; src: url("/assets/fonts/GeneralGrotesqueMono-Regular.woff2?v=f83dde20f3") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
/* Metric-matched local fallbacks (2026-10-08). Until the webfonts arrive the
   text renders in Arial scaled to Graphik's average glyph width, so headings
   and paragraphs wrap the same way before and after the swap and nothing
   below them jumps. Values computed with fontTools from the shipped woff2
   files against Arial / Arial Bold. Mono is left alone: Menlo already matches
   General Grotesque Mono's width. */
@font-face { font-family: "Graphik Condensed Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 700; size-adjust: 72.63%; ascent-override: 111.38%; descent-override: 26.3%; line-gap-override: 27.54%; }
@font-face { font-family: "Graphik Fallback"; src: local("Arial"), local("ArialMT"); font-weight: 400; size-adjust: 105.47%; ascent-override: 76.71%; descent-override: 18.49%; line-gap-override: 18.96%; }
@font-face { font-family: "Graphik Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 600 700; size-adjust: 100.34%; ascent-override: 80.63%; descent-override: 19.43%; line-gap-override: 19.93%; }

/* ----------------------------------------------------------------- TOKENS */
:root {
  /* Hero colours */
  --black: #121212;
  --warm: #E8E3DF;
  --warm-deep: #DDD6D0;   /* warm white pressed 6% for alternate bands */
  /* Vibrant palette (floods and accents only; text stays black or warm white) */
  --yellow: #E7E99B;
  --marigold: #FFA343;
  --taupe: #AA928B;
  --blue: #A0DDE2;
  --redorange: #E96138;
  --coral: #FFB69B;
  --pink: #FF7DBF;
  --steel: #7495A3;
  --olive: #BFCDA7;
  --green: #51B17D;
  /* Secondary greys (UI only, never dominant) */
  --g85: #323131;
  --g65: #5D5B5A;
  --g45: #8A8583;
  --g25: #B5AFAC;
  --g15: #CAC4BF;

  --bg: var(--warm);
  --text: var(--black);
  --muted: var(--g65);
  --line: rgba(18,18,18,0.16);
  --line-strong: var(--black);

  --font-display: "Graphik Condensed", "Graphik Condensed Fallback", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Graphik", "Graphik Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: "General Grotesque Mono", "SFMono-Regular", Menlo, Consolas, monospace;

  --fs-hero: clamp(3.4rem, 10vw, 8.5rem);
  --fs-h1: clamp(3rem, 7.5vw, 6rem);
  --fs-h2: clamp(2.4rem, 5.2vw, 4.4rem);
  --fs-h3: clamp(1.6rem, 2.6vw, 2.25rem);
  --fs-h4: clamp(1.25rem, 1.8vw, 1.5rem);
  --fs-body: 1.0625rem;
  --fs-lg: 1.2rem;
  --fs-sm: 0.9375rem;
  --fs-xs: 0.8125rem;
  --fs-mono: 0.78rem;

  --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem;
  --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 6rem; --sp-10: 8rem;

  --container: 1240px;
  --container-narrow: 820px;
  --container-wide: 1520px;
  --gutter: clamp(1.1rem, 4vw, 2.5rem);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.4s;

  --promo-h: 38px;
  --nav-h: 76px;
  --bookbar-h: 68px;
}

/* ------------------------------------------------------------------ RESET */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
a:hover { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0; }
strong { font-weight: 600; }
hr { border: 0; border-top: 1px solid var(--line-strong); margin: 0; }

/* --------------------------------------------------------------- HEADINGS */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; line-height: 0.94; letter-spacing: 0.005em; margin: 0; color: var(--black); }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1; }
h4 { font-size: var(--fs-h4); line-height: 1.05; }
.deck { font-family: var(--font-body); font-size: clamp(1.1rem, 1.6vw, 1.35rem); line-height: 1.5; color: var(--black); max-width: 58ch; }
.deck--muted { color: var(--muted); }
.measure { max-width: 62ch; }
.mono { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: 0.04em; text-transform: uppercase; }
.lede { font-size: var(--fs-lg); line-height: 1.55; }

/* --------------------------------------------------------- ACCESSIBILITY */
.skip-link { position: absolute; left: 1rem; top: -100px; z-index: 2000; background: var(--black); color: var(--warm); padding: 0.75rem 1rem; font-family: var(--font-mono); font-size: var(--fs-mono); text-transform: uppercase; letter-spacing: 0.06em; }
.skip-link:focus { top: 1rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
:focus-visible { outline: 3px solid var(--black); outline-offset: 3px; }
.on-dark :focus-visible, .site-footer :focus-visible, .cta-band :focus-visible { outline-color: var(--warm); }

/* ------------------------------------------------------------ UTILITIES */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: var(--container-narrow); }
.container--wide { max-width: var(--container-wide); }
.section { padding-block: clamp(3.5rem, 8vw, 7rem); }
.section--tight { padding-block: clamp(2rem, 4vw, 3rem); }
.section--black { background: var(--black); color: var(--warm); }
.section--black h1, .section--black h2, .section--black h3, .section--black h4, .section--black .deck { color: var(--warm); }
.section--black .muted, .section--black .deck--muted { color: rgba(232,227,223,0.72); }
.section--blue { background: var(--blue); }
.section--yellow { background: var(--yellow); }
.section--pink { background: var(--pink); }
.section--marigold { background: var(--marigold); }
.section--coral { background: var(--coral); }
.section--olive { background: var(--olive); }
.section--deep { background: var(--warm-deep); }
.muted { color: var(--muted); }
.text-center { text-align: center; }
.mx-auto { margin-inline: auto; }
.mt-2 { margin-top: var(--sp-2); } .mt-3 { margin-top: var(--sp-3); } .mt-4 { margin-top: var(--sp-4); } .mt-5 { margin-top: var(--sp-5); } .mt-6 { margin-top: var(--sp-6); } .mt-7 { margin-top: var(--sp-7); } .mt-8 { margin-top: var(--sp-8); }
.mb-3 { margin-bottom: var(--sp-3); } .mb-5 { margin-bottom: var(--sp-5); } .mb-6 { margin-bottom: var(--sp-6); }
.nowrap { white-space: nowrap; }
.br-desktop { display: none; }
@media (min-width: 900px) { .br-desktop { display: inline; } }
.grid { display: grid; gap: var(--sp-5); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 960px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }
.grid > * { min-width: 0; }

/* Section head: display headline leads, mono meta line sits BESIDE it (not an eyebrow above) */
.section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--sp-4) var(--sp-6); margin-bottom: clamp(2rem, 4vw, 3.25rem); border-bottom: 1px solid var(--line-strong); padding-bottom: var(--sp-5); }
.section-head > h2 { flex: 1 1 420px; max-width: 18ch; }
.section-head > .deck, .section-head > p { flex: 1 1 320px; max-width: 46ch; }
.section-head--stack { display: block; }
.section-head--stack h2 { max-width: 22ch; }
.section-head--stack .deck { margin-top: var(--sp-4); }
.section--black .section-head { border-color: rgba(232,227,223,0.35); }
.section-head--plain { border-bottom: 0; padding-bottom: 0; }

/* Square bullet. Replaced the four-point spark brand device, which at any size
   now reads as the Gemini mark. Square also matches the site geometry. */
.bullet { display: inline-block; width: 9px; height: 9px; background: currentColor; flex: none; }
.bullet--lg { width: 14px; height: 14px; }

/* --------------------------------------------------------------- BUTTONS */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1; padding: 1rem 1.6rem; border: 2px solid var(--black); background: transparent; color: var(--black); cursor: pointer; text-align: center; white-space: nowrap; max-width: 100%; transition: background-color 0.18s var(--ease), color 0.18s var(--ease), border-color 0.18s var(--ease); }
.btn--sm { padding: 0.7rem 1.1rem; font-size: 0.92rem; }
.btn--lg, .btn-lg { padding: 1.2rem 2.1rem; font-size: 1.18rem; }
.btn--block, .btn-block { width: 100%; }
.btn-primary { background: var(--yellow); color: var(--black); }
.btn-primary:hover { background: var(--black); color: var(--yellow); }
.btn-black { background: var(--black); color: var(--warm); }
.btn-black:hover { background: var(--yellow); color: var(--black); }
.btn-pink { background: var(--pink); color: var(--black); }
.btn-pink:hover { background: var(--black); color: var(--pink); }
.btn-blue { background: var(--blue); color: var(--black); }
.btn-blue:hover { background: var(--black); color: var(--blue); }
.btn-ghost { background: transparent; color: var(--black); }
.btn-ghost:hover { background: var(--black); color: var(--warm); }
.btn-ghost--light { border-color: var(--warm); color: var(--warm); background: transparent; }
.btn-ghost--light:hover { background: var(--warm); color: var(--black); }
.btn-warm { background: var(--warm); color: var(--black); border-color: var(--warm); }
.btn-warm:hover { background: var(--black); color: var(--warm); border-color: var(--warm); }
@media (max-width: 480px) { .btn { white-space: normal; line-height: 1.15; } }
.cta-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.cta-row--center { justify-content: center; }
.text-link { font-family: var(--font-mono); font-size: var(--fs-mono); text-transform: uppercase; letter-spacing: 0.06em; border-bottom: 1.5px solid currentColor; padding-bottom: 2px; }
.text-link:hover { color: var(--redorange); }

/* ---------------------------------------------------------------- CHIPS */
.chip { display: inline-flex; align-items: center; gap: 0.45em; font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: 0.06em; text-transform: uppercase; padding: 0.42rem 0.7rem; line-height: 1; border: 1.5px solid var(--black); color: var(--black); background: transparent; }
.chip--fill { background: var(--black); color: var(--warm); }
.chip--family { background: var(--blue); }
.chip--adults { background: var(--pink); }
.chip--sunset { background: var(--marigold); }
.chip--private { background: var(--green); }
.chip--combo { background: var(--coral); }
.chip--rental { background: var(--olive); }
.chip--light { border-color: var(--warm); color: var(--warm); }
.chip svg { width: 14px; height: 14px; }
.detail-chip { display: inline-flex; align-items: center; gap: 0.45rem; font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: 0.05em; text-transform: uppercase; padding: 0.45rem 0.7rem; border: 1.5px solid currentColor; line-height: 1; }
.detail-chip svg { width: 15px; height: 15px; flex: none; }

/* ------------------------------------------------------------ PROMO BAR */
.promo-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 1001; height: var(--promo-h); background: var(--yellow); color: var(--black); border-bottom: 1.5px solid var(--black); font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.05em; text-transform: uppercase; overflow: hidden; }
.promo-bar__inner { display: flex; align-items: center; justify-content: center; gap: clamp(1rem, 3vw, 3rem); height: 100%; padding-inline: var(--gutter); max-width: var(--container-wide); margin-inline: auto; }
.promo-bar__item { display: inline-flex; align-items: center; gap: 0.6rem; white-space: nowrap; }
.promo-bar__item strong { font-weight: 400; background: var(--black); color: var(--yellow); padding: 0.15rem 0.4rem; }
@media (max-width: 900px) {
  /* One offer at a time, stacked: the label plus its badge does not fit on a
     single 38px line at phone width and was spilling out of the bar. */
  :root { --promo-h: 50px; }
  .promo-bar__inner { justify-content: flex-start; gap: 0; }
  .promo-bar__item { flex-direction: column; gap: 3px; }
  /* Items stack in the same spot, so the outgoing one must finish fading before
     the incoming one starts or the two texts overlap and read as garbled. */
  .promo-bar__item { position: absolute; left: 0; right: 0; justify-content: center; padding-inline: 0.75rem; opacity: 0; transition: opacity 0.3s var(--ease); white-space: normal; text-align: center; line-height: 1.2; font-size: 0.66rem; }
  .promo-bar__item.is-on { opacity: 1; transition-delay: 0.3s; }
}
@media (min-width: 901px) and (max-width: 1240px) {
  /* The three offers need about 1,210px on one line, so between 901 and 1240px
     (tablets in landscape, small laptops) they ran off both edges of the bar.
     Same rotator as phones, kept on one line in the 38px bar. */
  .promo-bar__inner { justify-content: flex-start; gap: 0; }
  .promo-bar__item { position: absolute; left: 0; right: 0; justify-content: center; padding-inline: var(--gutter); opacity: 0; transition: opacity 0.3s var(--ease); }
  .promo-bar__item.is-on { opacity: 1; transition-delay: 0.3s; }
}

/* ------------------------------------------------------------ TRUST BAR */
.trust-bar { background: var(--black); color: var(--warm); border-top: 1.5px solid var(--black); }
.trust-bar__inner { display: grid; grid-template-columns: repeat(4, 1fr); }
.trust-item { padding: 1.35rem 1.25rem; border-left: 1px solid rgba(232,227,223,0.22); display: flex; flex-direction: column; gap: 0.25rem; }
.trust-item:first-child { border-left: 0; }
.trust-item__figure { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.6rem, 2.4vw, 2.2rem); line-height: 1; text-transform: uppercase; color: var(--warm); }
.trust-item__label { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: 0.06em; text-transform: uppercase; color: rgba(232,227,223,0.72); }
@media (max-width: 860px) { .trust-bar__inner { grid-template-columns: repeat(2, 1fr); } .trust-item:nth-child(3) { border-left: 0; } .trust-item:nth-child(n+3) { border-top: 1px solid rgba(232,227,223,0.22); } }
.trust-bar--warm { background: var(--warm); color: var(--black); border-top: 1.5px solid var(--black); border-bottom: 1.5px solid var(--black); }
.trust-bar--warm .trust-item { border-color: var(--line); }
.trust-bar--warm .trust-item__figure { color: var(--black); }
.trust-bar--warm .trust-item__label { color: var(--muted); }

/* ------------------------------------------------------------ STICKY NAV */
.site-header { position: fixed; top: var(--promo-h); left: 0; right: 0; z-index: 1000; background: transparent; transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease); border-bottom: 1.5px solid transparent; }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); height: var(--nav-h); max-width: var(--container-wide); margin-inline: auto; padding-inline: var(--gutter); }
.brand { display: inline-flex; align-items: center; }
.brand__logo { height: 30px; width: auto; }
.brand__logo--light { display: none; }
.site-header:not(.scrolled) .brand__logo--dark { display: none; }
.site-header:not(.scrolled) .brand__logo--light { display: block; }
.site-header:not(.scrolled) .nav-link, .site-header:not(.scrolled) .nav-link:hover { color: var(--warm); }
.site-header:not(.scrolled) .hamburger span { background: var(--warm); }
.site-header:not(.scrolled) .header-book { border-color: var(--warm); }
.site-header.scrolled { background: var(--warm); border-bottom-color: var(--black); }
.site-header.scrolled .nav-link { color: var(--black); }
.site-header.scrolled .hamburger span { background: var(--black); }
.site-header[data-solid] { background: var(--warm); border-bottom-color: var(--black); }
.primary-nav { display: flex; align-items: center; gap: clamp(0.5rem, 1.6vw, 1.6rem); }
.nav-list { display: flex; align-items: center; gap: clamp(0.2rem, 1vw, 0.9rem); }
.nav-item { position: relative; }
.nav-link { display: inline-flex; align-items: center; gap: 0.35rem; font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--black); padding: 0.6rem 0.55rem; transition: color 0.2s var(--ease); border-bottom: 1.5px solid transparent; }
.nav-link:hover, .nav-link[aria-expanded="true"], .nav-link[aria-current="page"] { border-bottom-color: currentColor; }
.nav-link .caret { width: 11px; height: 11px; transition: transform 0.25s var(--ease); }
.nav-link[aria-expanded="true"] .caret { transform: rotate(180deg); }

/* Dropdown (experiences) */
.has-dropdown > .dropdown { position: absolute; top: calc(100% + 8px); left: 0; min-width: 340px; background: var(--warm); border: 1.5px solid var(--black); padding: var(--sp-3); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(6px); transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s; z-index: 20; }
.has-dropdown > .dropdown::before { content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px; }
.has-dropdown.open > .dropdown, .has-dropdown:hover > .dropdown { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
.dropdown__head { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding: 0.25rem var(--sp-3) var(--sp-3); border-bottom: 1px solid var(--line); margin-bottom: var(--sp-2); }
.dropdown__list { display: flex; flex-direction: column; }
.dropdown__link { display: grid; grid-template-columns: 10px 1fr; gap: 0.75rem; align-items: center; padding: 0.6rem var(--sp-3); color: var(--black); transition: background 0.15s var(--ease); }
.dropdown__link::before { content: ""; width: 10px; height: 10px; background: var(--dot, var(--black)); }
.dropdown__link:hover { background: var(--black); color: var(--warm); }
.dropdown__link strong { display: block; font-family: var(--font-display); text-transform: uppercase; font-size: 1.05rem; letter-spacing: 0.02em; line-height: 1; }
.dropdown__link span { display: block; font-size: var(--fs-xs); color: var(--muted); margin-top: 2px; }
.dropdown__link:hover span { color: rgba(232,227,223,0.75); }
.dropdown__foot { margin-top: var(--sp-2); padding-top: var(--sp-2); border-top: 1px solid var(--line); }
.nav-book { position: relative; }
.nav-book__btn { padding: 0.75rem 1.2rem; font-size: 0.95rem; }

/* Hamburger */
.hamburger { display: none; flex-direction: column; justify-content: center; gap: 6px; width: 44px; height: 44px; padding: 10px; z-index: 1100; }
.hamburger span { display: block; height: 2px; width: 100%; background: var(--black); transition: transform 0.3s var(--ease), opacity 0.2s var(--ease); }
.drawer-open .hamburger span { background: var(--black) !important; }
.drawer-open .hamburger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.drawer-open .hamburger span:nth-child(2) { opacity: 0; }
.drawer-open .hamburger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
.header-book { display: none; margin-left: auto; padding: 0.6rem 1rem; font-size: 0.92rem; white-space: nowrap; }
@media (max-width: 1024px) { .header-book { display: inline-flex; } }
body.drawer-open .header-book { visibility: hidden; }

/* --------------------------------------------------- MOBILE FULL-SCREEN DRAWER */
.mobile-drawer { position: fixed; inset: 0; z-index: 1050; background: var(--warm); padding: calc(var(--promo-h) + var(--nav-h) + 1rem) var(--gutter) 2rem; overflow-y: auto; transform: translateX(100%); visibility: hidden; transition: transform 0.4s var(--ease), visibility 0.4s; display: flex; flex-direction: column; gap: var(--sp-5); }
.drawer-open .mobile-drawer { transform: translateX(0); visibility: visible; }
.drawer-book-buttons { display: grid; gap: var(--sp-3); }
.drawer-book-buttons .btn { padding: 1.2rem 1.5rem; font-size: 1.1rem; }
.drawer-nav { display: flex; flex-direction: column; border-top: 1.5px solid var(--black); }
.drawer-nav > li { border-bottom: 1px solid var(--line-strong); }
.drawer-link { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 1rem 0; font-family: var(--font-display); font-size: 1.6rem; text-transform: uppercase; color: var(--black); text-align: left; }
.drawer-sub { display: none; padding: 0 0 var(--sp-4) var(--sp-3); flex-direction: column; gap: 0.1rem; }
.drawer-group.open .drawer-sub { display: flex; }
.drawer-group.open .drawer-link .caret { transform: rotate(180deg); }
.drawer-sub a { padding: 0.5rem 0; font-family: var(--font-mono); font-size: var(--fs-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--black); }
.drawer-link .caret { width: 18px; height: 18px; transition: transform 0.25s var(--ease); }
.drawer-meta { font-family: var(--font-mono); font-size: var(--fs-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); display: flex; flex-direction: column; gap: 0.4rem; }
body.drawer-open { overflow: hidden; }
/* Open menu on phones: the promo bar, logo and close button stay above it */
body.drawer-open .promo-bar { z-index: 1101; }
body.drawer-open .site-header { z-index: 1100; background: var(--warm); }
body.drawer-open .site-header .brand__logo--dark { display: block; }
body.drawer-open .site-header .brand__logo--light { display: none; }
@media (max-width: 1024px) { .primary-nav .nav-list, .primary-nav .nav-book { display: none; } .hamburger { display: flex; } }
@media (min-width: 1025px) { .mobile-drawer { display: none; } }
.site-header.scrolled .header-book, body.drawer-open .site-header .header-book { border-color: var(--black); }

/* ---------------------------------------------------------------- VIDEO HERO */
.hero { position: relative; min-height: min(calc(100vh - var(--promo-h)), 1040px); min-height: min(calc(100svh - var(--promo-h)), 1040px); margin-top: var(--promo-h); display: flex; align-items: flex-end; overflow: hidden; color: var(--warm); background: var(--black); }
.hero--short { min-height: min(68vh, 720px); }
.hero__media, .hero__media video, .hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.hero__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(18,18,18,0.82) 0%, rgba(18,18,18,0.35) 45%, rgba(18,18,18,0.12) 70%, rgba(18,18,18,0.3) 100%); }
.hero__inner { position: relative; z-index: 2; width: 100%; max-width: var(--container-wide); margin-inline: auto; padding: clamp(2rem, 6vw, 4rem) var(--gutter) clamp(2.5rem, 6vw, 4.5rem); }
.hero__content { max-width: 1000px; }
.hero h1 { color: var(--warm); font-size: var(--fs-hero); line-height: 0.9; letter-spacing: 0; text-wrap: balance; }
.hero h1 .accent { color: var(--yellow); }
.hero__sub { font-family: var(--font-body); font-size: clamp(1.1rem, 1.9vw, 1.5rem); font-weight: 400; color: var(--warm); margin-top: var(--sp-5); max-width: 58ch; line-height: 1.45; }
.hero__text { max-width: 60ch; margin-top: var(--sp-4); color: rgba(232,227,223,0.92); font-size: 1.05rem; }
.hero__cta { margin-top: var(--sp-6); }
.hero__cta .btn-ghost--light { border-color: var(--warm); }
.hero__meta { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); }
.hero__meta .detail-chip { border-color: rgba(232,227,223,0.75); color: var(--warm); }
.hero__price { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--warm); display: inline-flex; align-items: baseline; gap: 0.5rem; }
.hero__price .amt { font-family: var(--font-display); font-size: 2rem; line-height: 1; letter-spacing: 0; }
.hero__kicker { position: absolute; z-index: 2; top: calc(var(--promo-h) + var(--nav-h) + 1.5rem); right: var(--gutter); font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--warm); text-align: right; line-height: 1.5; text-shadow: 0 1px 8px rgba(0,0,0,0.6); }
@media (max-width: 900px) { .hero { align-items: flex-end; } .hero__inner { padding-top: calc(var(--nav-h) + 2rem); } .hero h1 { font-size: clamp(2.5rem, 12vw, 5.2rem); overflow-wrap: anywhere; } .hero__kicker { display: none; } }
/* The <picture> is the default: it shows until JS confirms a video can actually
   play, and it stays for no-JS and reduced-motion users. It is art-directed per
   viewport, so it is a correct still at every size, not a placeholder. */
.hero__media video { display: none; }
.hero__media .hero__poster { display: block; }
.hero.video-ready .hero__media video { display: block; }
.hero.video-ready .hero__media .hero__poster { display: none; }
/* Portrait-ish viewports (phone, tablet upright, narrow desktop window) get the
   4:5 assets. min(125vw, ...) lands the hero container on ~0.8 aspect, the same
   shape as the crop and the portrait video encode, so almost nothing is cut. */
@media (max-aspect-ratio: 13/10) {
  .hero:not(.hero--short) { min-height: min(125vw, 86svh); }
}
@media (max-width: 700px) { .hero--short { min-height: min(52svh, 460px); } }

/* Page hero (short, warm, for FAQ/contact/blog/legal) */
.page-hero { margin-top: var(--promo-h); padding: calc(var(--nav-h) + clamp(3rem, 8vw, 6rem)) 0 clamp(2.5rem, 6vw, 4rem); background: var(--warm); border-bottom: 1.5px solid var(--black); }
.page-hero h1 { max-width: 16ch; }
.page-hero .deck { margin-top: var(--sp-5); }
.page-hero--blue { background: var(--blue); }
.page-hero--yellow { background: var(--yellow); }
.page-hero--pink { background: var(--pink); }
.page-hero--olive { background: var(--olive); }
.page-hero--coral { background: var(--coral); }

/* --------------------------------------------------------------- SPLIT PANELS */
.split-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1.5px solid var(--black); }
.split-panels > .panel + .panel { border-left: 1.5px solid var(--black); }
@media (max-width: 860px) { .split-panels { grid-template-columns: 1fr; } .split-panels > .panel + .panel { border-left: 0; border-top: 1.5px solid var(--black); } }
.panel { position: relative; min-height: min(62vh, 600px); display: flex; flex-direction: column; justify-content: flex-end; color: var(--warm); isolation: isolate; overflow: hidden; }
.panel__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 0.9s var(--ease); }
.panel::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(18,18,18,0.86) 0%, rgba(18,18,18,0.5) 50%, rgba(18,18,18,0.15) 100%); }
.panel:hover .panel__img { transform: scale(1.04); }
.panel__body { padding: clamp(1.5rem, 3.5vw, 2.75rem); }
.panel__body h3 { color: var(--warm); font-size: clamp(2rem, 3.6vw, 3.2rem); }
.panel__tag { display: inline-block; font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--black); background: var(--tag, var(--yellow)); padding: 0.4rem 0.6rem; margin-bottom: var(--sp-4); }
.panel__body p { color: rgba(232,227,223,0.92); margin-top: var(--sp-3); max-width: 46ch; }
.panel__features { margin: var(--sp-4) 0; display: flex; flex-direction: column; gap: 0.35rem; }
.panel__features li { display: flex; align-items: center; gap: 0.6rem; font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--warm); }
.panel__features li .bullet { width: 8px; height: 8px; color: var(--tag, var(--yellow)); }
.panel--family { --tag: var(--blue); }
.panel--adults { --tag: var(--pink); }
.panel--sunset { --tag: var(--marigold); }
.cta-callout { text-align: center; max-width: 780px; margin: clamp(2.5rem, 5vw, 3.5rem) auto 0; }

/* "Can't choose? Do both." (home): a day photo and a sunset photo beside a
   coral flood, coral being the combo trip's colour everywhere else on the site */
.combo-callout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); margin-top: clamp(2.5rem, 5vw, 3.5rem); border: 1.5px solid var(--black); background: var(--coral); color: var(--black); }
.combo-callout__media { display: grid; grid-template-columns: 1fr 1fr; min-height: clamp(320px, 34vw, 460px); border-right: 1.5px solid var(--black); }
.combo-callout__shot { position: relative; margin: 0; overflow: hidden; background: var(--black); }
.combo-callout__shot + .combo-callout__shot { border-left: 1.5px solid var(--black); }
.combo-callout__shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.combo-callout:hover .combo-callout__shot img { transform: scale(1.04); }
.combo-callout__label { position: absolute; top: var(--sp-4); left: var(--sp-4); z-index: 1; font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: 0.08em; text-transform: uppercase; line-height: 1; background: var(--blue); color: var(--black); padding: 0.45rem 0.7rem; }
.combo-callout__shot--sunset .combo-callout__label { background: var(--marigold); }
.combo-callout__body { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: clamp(1.75rem, 4vw, 3.25rem); }
.combo-callout__save { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: 0.08em; text-transform: uppercase; line-height: 1; background: var(--black); color: var(--coral); padding: 0.45rem 0.7rem; margin-bottom: var(--sp-4); }
.combo-callout__body h3 { font-size: clamp(2.2rem, 4.2vw, 3.6rem); text-wrap: balance; }
.combo-callout__body p { margin-top: var(--sp-3); max-width: 40ch; color: var(--black); }
@media (max-width: 860px) {
  .combo-callout { grid-template-columns: 1fr; }
  .combo-callout__media { min-height: 0; aspect-ratio: 16 / 10; border-right: 0; border-bottom: 1.5px solid var(--black); }
}
@media (max-width: 520px) { .combo-callout__media { aspect-ratio: 4 / 3; } .combo-callout__label { top: var(--sp-3); left: var(--sp-3); font-size: 0.64rem; letter-spacing: 0.05em; padding: 0.4rem 0.55rem; } }

/* --------------------------------------------------------------- EXPERIENCE CARD */
.tour-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
@media (max-width: 1100px) { .tour-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); } }
@media (max-width: 600px) { .tour-grid { grid-template-columns: 1fr; } }
.tour-card { display: flex; flex-direction: column; background: var(--warm); border: 1.5px solid var(--black); height: 100%; min-width: 0; }
.tour-card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-bottom: 1.5px solid var(--black); background: var(--black); }
.tour-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.tour-card:hover .tour-card__media img { transform: scale(1.04); }
.tour-card__chip { position: absolute; top: var(--sp-3); left: var(--sp-3); z-index: 2; }
.tour-card__flag { position: absolute; top: var(--sp-3); right: var(--sp-3); z-index: 2; }
.tour-card__body { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-5); flex: 1; }
.tour-card__title { font-size: clamp(1.5rem, 1.9vw, 1.9rem); }
.tour-card__desc { font-size: var(--fs-sm); color: var(--muted); flex: 1; }
.tour-card__meta { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.tour-card__price { font-family: var(--font-mono); font-size: var(--fs-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.tour-card__price .amt { display: block; font-family: var(--font-display); font-size: 1.9rem; color: var(--black); letter-spacing: 0; line-height: 1; margin-top: 2px; }
.tour-card__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: auto; padding-top: var(--sp-3); border-top: 1px solid var(--line); }
.tour-card__actions .btn { flex: 1 1 auto; }
@media (max-width: 420px) { .tour-card__actions { flex-direction: column; } }
.tour-card--wide { grid-column: 1 / -1; }
@media (min-width: 701px) { .tour-card--wide { flex-direction: row; } .tour-card--wide .tour-card__media { flex: 0 0 46%; aspect-ratio: auto; border-bottom: 0; border-right: 1.5px solid var(--black); } .tour-card--wide .tour-card__body { justify-content: center; padding: clamp(1.75rem, 3.5vw, 3rem); } }
.tour-card--black { background: var(--black); color: var(--warm); }
.tour-card--black .tour-card__title, .tour-card--black .tour-card__price .amt { color: var(--warm); }
.tour-card--black .tour-card__desc, .tour-card--black .tour-card__price { color: rgba(232,227,223,0.78); }
.tour-card--black .tour-card__actions { border-color: rgba(232,227,223,0.25); }
.tour-card--black .btn-ghost { border-color: var(--warm); color: var(--warm); }
.tour-card--black .btn-ghost:hover { background: var(--warm); color: var(--black); }

/* ------------------------------------------------------- NUMBERED DIFFERENCE LIST */
.diff-list { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1.5px solid var(--black); }
@media (max-width: 760px) { .diff-list { grid-template-columns: 1fr; } }
.diff-item { display: grid; grid-template-columns: 4.2rem 1fr; gap: var(--sp-4); padding: clamp(1.4rem, 2.6vw, 2rem) var(--sp-4) clamp(1.4rem, 2.6vw, 2rem) 0; border-bottom: 1px solid var(--line-strong); min-width: 0; }
.diff-list .diff-item:nth-child(odd) { padding-right: clamp(1rem, 3vw, 2.5rem); }
@media (min-width: 761px) { .diff-list .diff-item:nth-child(even) { border-left: 1px solid var(--line-strong); padding-left: clamp(1rem, 3vw, 2.5rem); } }
.diff-item__num { font-family: var(--font-display); font-size: clamp(2.4rem, 4vw, 3.4rem); line-height: 0.9; color: var(--black); }
.diff-item h3 { font-size: clamp(1.35rem, 2vw, 1.7rem); margin-bottom: var(--sp-2); }
.diff-item p { font-size: var(--fs-sm); color: var(--muted); }
.section--black .diff-list { border-color: rgba(232,227,223,0.4); }
.section--black .diff-item { border-color: rgba(232,227,223,0.28); }
.section--black .diff-item__num { color: var(--yellow); }
.section--black .diff-item p { color: rgba(232,227,223,0.75); }

/* ---------------------------------------------- DAY / EVENING TIMELINE */
.timeline { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
@media (max-width: 800px) { .timeline { grid-template-columns: 1fr; } }
.timeline-day { position: relative; background: var(--warm); border: 1.5px solid var(--black); overflow: hidden; display: flex; flex-direction: column; }
.timeline-day__media { position: relative; aspect-ratio: 16 / 10; border-bottom: 1.5px solid var(--black); }
.timeline-day__media img { width: 100%; height: 100%; object-fit: cover; }
.timeline-day__tag { position: absolute; top: var(--sp-4); left: var(--sp-4); z-index: 2; font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: 0.08em; text-transform: uppercase; background: var(--blue); color: var(--black); padding: 0.45rem 0.7rem; }
.timeline-day--two .timeline-day__tag { background: var(--marigold); }
.timeline-day__body { padding: clamp(1.5rem, 3vw, 2.25rem); }
.timeline-day__body h3 { margin-bottom: var(--sp-3); }
.timeline-day__time { font-family: var(--font-mono); font-size: var(--fs-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: var(--sp-3); display: block; }
.timeline-day__body p { color: var(--muted); }

/* Itinerary rail (tour pages) */
.rail { border-left: 1.5px solid var(--black); margin-left: 0.5rem; }
.rail__step { position: relative; padding: 0 0 var(--sp-5) var(--sp-6); }
.rail__step::before { content: ""; position: absolute; left: -7px; top: 0.35rem; width: 12px; height: 12px; background: var(--black); }
.rail__step:last-child { padding-bottom: 0; }
.rail__time { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 0.2rem; }
.rail__step h4 { font-size: 1.35rem; margin-bottom: 0.25rem; }
.rail__step p { color: var(--muted); font-size: var(--fs-sm); max-width: 52ch; }

/* Do-both band */
.do-both { background: var(--coral); color: var(--black); border: 1.5px solid var(--black); padding: clamp(1.75rem, 4vw, 3rem); display: grid; grid-template-columns: auto 1fr auto; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
@media (max-width: 900px) { .do-both { grid-template-columns: 1fr; } }
.do-both__pct { font-family: var(--font-display); font-size: clamp(4rem, 9vw, 7rem); line-height: 0.85; }
.do-both__pct small { display: block; font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: 0.08em; margin-top: 0.4rem; }
.do-both h3 { font-size: clamp(1.8rem, 3vw, 2.6rem); }
.do-both p { margin-top: var(--sp-3); max-width: 56ch; }
.dip-ribbon { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-4); background: var(--coral); border: 1.5px solid var(--black); padding: var(--sp-5) var(--sp-6); }
.dip-ribbon strong { font-family: var(--font-display); text-transform: uppercase; font-size: 1.5rem; display: block; }
.dip-ribbon p { margin-top: 0.25rem; }

/* --------------------------------------------------------------- ACCORDION */
.accordion { max-width: 860px; margin-inline: auto; display: flex; flex-direction: column; border-top: 1.5px solid var(--black); }
.acc-item { border-bottom: 1px solid var(--line-strong); }
.acc-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: 1.2rem 0; font-family: var(--font-body); font-weight: 600; font-size: 1.1rem; color: var(--black); text-align: left; }
.acc-trigger:hover { color: var(--redorange); }
.acc-icon { position: relative; width: 20px; height: 20px; flex: none; }
.acc-icon::before, .acc-icon::after { content: ""; position: absolute; top: 50%; left: 50%; background: currentColor; transform: translate(-50%, -50%); transition: transform 0.3s var(--ease), opacity 0.3s var(--ease); }
.acc-icon::before { width: 16px; height: 2px; }
.acc-icon::after { width: 2px; height: 16px; }
.acc-trigger[aria-expanded="true"] .acc-icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.acc-panel { max-height: 0; overflow: hidden; transition: max-height 0.35s var(--ease); }
.acc-panel__inner { padding: 0 0 1.3rem; color: var(--muted); max-width: 66ch; }
.acc-panel__inner p + p { margin-top: var(--sp-3); }
.faq-group + .faq-group { margin-top: clamp(3rem, 6vw, 4.5rem); }
.faq-group > h2 { font-size: clamp(1.9rem, 3.4vw, 2.8rem); margin-bottom: var(--sp-5); }

/* ------------------------------------------------- GOOGLE REVIEW WALL (marquee)
   Two full-bleed rows of real 5-star Google reviews sliding in opposite
   directions. Cards are solid brand flood colours with black type, per the
   guideline that text is always black or warm white on a vibrant field.

   Loop maths: the track carries NO gap. Spacing lives on the card as
   margin-right, so one copy of the set (cards + their trailing margins) is
   exactly half the track width and translating -50% lands pixel-perfect on the
   clone. A gap on the track would add half a gap of drift on every cycle and
   the wall would visibly jump.

   Cards are a fixed height with the attribution pinned to the bottom, so the
   length variance between quotes falls in the middle of the card and every card
   in a row bottom-aligns exactly. Pauses on hover and keyboard focus, and
   becomes a swipeable row under prefers-reduced-motion. */
.rv-section { overflow: hidden; }
.rv-head { margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem); }
.rv-wall { position: relative; padding-block: 2px; }
.rv-wall::before, .rv-wall::after { content: ""; position: absolute; top: 0; bottom: 0; width: clamp(28px, 6vw, 120px); z-index: 3; pointer-events: none; }
.rv-wall::before { left: 0; background: linear-gradient(to right, var(--black) 12%, rgba(18,18,18,0)); }
.rv-wall::after { right: 0; background: linear-gradient(to left, var(--black) 12%, rgba(18,18,18,0)); }
.rv-row { overflow: hidden; }
.rv-row + .rv-row { margin-top: var(--sp-4); }
.rv-track { display: flex; gap: 0; width: max-content; will-change: transform; animation: rv-ltr var(--rv-dur, 70s) linear infinite; }
.rv-row--rtl .rv-track { animation-name: rv-rtl; }
@keyframes rv-ltr { from { transform: translate3d(-50%, 0, 0); } to { transform: translate3d(0, 0, 0); } }
@keyframes rv-rtl { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
.rv-wall:hover .rv-track, .rv-wall:focus-within .rv-track { animation-play-state: paused; }

.rv { flex: 0 0 auto; width: 400px; height: 268px; margin: 0 var(--sp-4) 0 0; padding: var(--sp-5); display: flex; flex-direction: column; background: var(--rv, var(--yellow)); color: var(--black); border: 1.5px solid var(--black); overflow: hidden; }
.rv__stars { display: flex; align-items: center; gap: 3px; }
.rv__star { width: 18px; height: 18px; fill: var(--black); flex: none; }
.rv__g { width: 19px; height: 19px; flex: none; fill: var(--black); margin-left: auto; opacity: 0.55; }
.rv__text { margin: var(--sp-4) 0 0; font-size: 1rem; line-height: 1.5; }
.rv__text::before { content: "\201C"; }
.rv__text::after { content: "\201D"; }
.rv__foot { display: flex; align-items: center; gap: var(--sp-3); margin-top: auto; padding-top: var(--sp-4); }
.rv__pic { width: 48px; height: 48px; flex: none; border: 1.5px solid var(--black); background: var(--warm); object-fit: cover; }
.rv__who { display: flex; flex-direction: column; min-width: 0; }
.rv__name { font-family: var(--font-display); text-transform: uppercase; font-size: 1.1rem; line-height: 1; letter-spacing: 0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv__when { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; margin-top: 5px; opacity: 0.72; }

/* Rating line beside the heading */
.review-line { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem 0.8rem; font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: 0.06em; text-transform: uppercase; }
.review-line__score { font-family: var(--font-display); font-size: 3rem; line-height: 0.8; letter-spacing: 0; }
.review-line__stars { display: inline-flex; gap: 2px; }
.review-line__stars .rv__star { width: 18px; height: 18px; fill: var(--marigold); }
.review-line__meta { line-height: 1.7; }

@media (max-width: 900px) { .rv { width: 340px; height: 276px; } }
@media (max-width: 560px) {
  .rv { width: min(80vw, 320px); height: 288px; padding: var(--sp-4); margin-right: var(--sp-3); }
  .rv__text { font-size: 0.95rem; }
  .review-line__score { font-size: 2.4rem; }
}
@media (prefers-reduced-motion: reduce) {
  .rv-track { animation: none; }
  .rv-row { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .rv-row::-webkit-scrollbar { display: none; }
  .rv { scroll-snap-align: center; }
  .rv[aria-hidden="true"] { display: none; }
  .rv-wall::before, .rv-wall::after { display: none; }
}

/* --------------------------------------------------------------- GALLERY */
.gallery-masonry { columns: 3 280px; column-gap: var(--sp-4); }
.gallery-masonry .g-item { break-inside: avoid; margin-bottom: var(--sp-4); overflow: hidden; display: block; border: 1.5px solid var(--black); background: var(--black); }
.gallery-masonry .g-item img { width: 100%; height: auto; display: block; transition: transform 0.7s var(--ease); }
.gallery-masonry .g-item:hover img { transform: scale(1.04); }
.gallery-filters { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-6); }
.gallery-filter { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: 0.06em; text-transform: uppercase; padding: 0.55rem 0.9rem; background: transparent; color: var(--black); border: 1.5px solid var(--black); transition: all 0.2s var(--ease); }
.gallery-filter:hover { background: var(--yellow); }
.gallery-filter[aria-pressed="true"] { background: var(--black); color: var(--warm); }
.photo-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: var(--sp-3); overflow-x: auto; padding-bottom: var(--sp-3); scroll-snap-type: x mandatory; }
.photo-strip .g-item { scroll-snap-align: start; overflow: hidden; border: 1.5px solid var(--black); background: var(--black); }
.photo-strip .g-item img { aspect-ratio: 4/3; object-fit: cover; width: 100%; transition: transform 0.7s var(--ease); }
.photo-strip .g-item:hover img { transform: scale(1.04); }
.photo-strip--tall .g-item img { aspect-ratio: 3/4; }

/* -------------------------------------------------------- BOOKING PANEL (tour) */
.tour-layout { display: grid; grid-template-columns: 1fr 400px; gap: clamp(2rem, 4vw, 4rem); align-items: start; }
.tour-layout > * { min-width: 0; }
@media (max-width: 960px) { .tour-layout { grid-template-columns: 1fr; } }
.booking-panel { position: sticky; top: calc(var(--promo-h) + var(--nav-h) + 1rem); background: var(--warm); border: 1.5px solid var(--black); }
@media (max-width: 960px) { .booking-panel { position: static; } }
.booking-panel__head { background: var(--black); color: var(--warm); padding: var(--sp-5); }
.booking-panel__head h2 { color: var(--warm); font-size: 1.8rem; }
.booking-panel__head p { color: rgba(232,227,223,0.8); font-size: var(--fs-sm); margin-top: 0.35rem; }
.pricing-tiers { display: flex; flex-direction: column; }
.pricing-tier { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); padding: 0.9rem var(--sp-5); border-bottom: 1px solid var(--line); }
.pricing-tier__label { font-weight: 600; }
.pricing-tier__label span { display: block; font-family: var(--font-mono); font-size: var(--fs-mono); font-weight: 400; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin-top: 2px; }
.pricing-tier__price { font-family: var(--font-display); font-size: 1.6rem; line-height: 1; }
.booking-panel__cta { padding: var(--sp-5); border-bottom: 1px solid var(--line); }
.booking-panel__note { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); margin-top: var(--sp-3); line-height: 1.5; }
.quick-details { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-4); }
.quick-detail { display: flex; gap: var(--sp-3); align-items: flex-start; }
.quick-detail__icon { width: 22px; height: 22px; flex: none; margin-top: 2px; }
.quick-detail__label { font-family: var(--font-mono); font-size: var(--fs-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.quick-detail__value { font-weight: 600; }
.quick-detail__value a { border-bottom: 1.5px solid currentColor; }

/* Prose */
.prose > * + * { margin-top: var(--sp-4); }
.prose h2 { margin-top: var(--sp-6); font-size: clamp(2rem, 4vw, 3.2rem); max-width: 18ch; }
.prose h3 { margin-top: var(--sp-6); }
.prose p { color: var(--g85); max-width: 66ch; }
/* Both shapes must be covered: a list nested inside .prose, and a list that
   carries .prose itself (the tour pages use <ul class="prose">). Targeting only
   the descendant form left those lists with no bullet and no indent. */
.prose ul, ul.prose { display: flex; flex-direction: column; gap: var(--sp-2); }
.prose ul li, ul.prose li { position: relative; padding-left: 1.5rem; color: var(--g85); }
.prose ul li::before, ul.prose li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 8px; height: 8px; background: currentColor; }
.prose ol, ol.prose { counter-reset: li; display: flex; flex-direction: column; gap: var(--sp-2); }
.prose ol li, ol.prose li { position: relative; padding-left: 2.2rem; color: var(--g85); }
.prose ol li::before, ol.prose li::before { counter-increment: li; content: counter(li, decimal-leading-zero); position: absolute; left: 0; top: 0.15em; font-family: var(--font-mono); font-size: var(--fs-mono); }
.prose a { border-bottom: 1.5px solid currentColor; }
.prose a:hover { color: var(--redorange); }
.prose blockquote { margin: var(--sp-5) 0; padding-left: var(--sp-5); border-left: 3px solid var(--black); font-style: italic; }
.prose img { border: 1.5px solid var(--black); }
.prose .standfirst { font-size: var(--fs-lg); color: var(--black); font-weight: 400; }
.info-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); }
@media (max-width: 640px) { .info-cols { grid-template-columns: 1fr; } }
.info-block { border-top: 1.5px solid var(--black); padding-top: var(--sp-4); }
.info-block h3 { font-size: 1.4rem; margin-bottom: var(--sp-3); }
.menu-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-4); }
.menu-list li { border-top: 1px solid var(--line-strong); padding-top: var(--sp-3); }
.menu-list strong { display: block; font-family: var(--font-display); text-transform: uppercase; font-size: 1.15rem; margin-bottom: 0.2rem; }
.menu-list span { font-size: var(--fs-sm); color: var(--muted); }

/* ------------------------------------------------------------ CROSS-PROMO BLOCK */
.cross-promo { position: relative; overflow: hidden; color: var(--warm); isolation: isolate; padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 5vw, 4rem); display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-4); border: 1.5px solid var(--black); min-height: min(46vh, 480px); justify-content: flex-end; }
.cross-promo__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.cross-promo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(18,18,18,0.86) 0%, rgba(18,18,18,0.45) 70%, rgba(18,18,18,0.2) 100%); }
.cross-promo h2 { color: var(--warm); max-width: 16ch; }
.cross-promo p { color: rgba(232,227,223,0.92); max-width: 56ch; }
.cross-promo .btn-primary { border-color: var(--yellow); }

/* Map / logistics card (clickable, NOT iframe) */
.map-card { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; background: var(--warm); border: 1.5px solid var(--black); padding: var(--sp-5); transition: background 0.2s var(--ease); }
.map-card:hover { background: var(--yellow); }
.map-card__pin { width: 46px; height: 46px; flex: none; display: grid; place-items: center; background: var(--black); color: var(--warm); }
.map-card__pin svg { width: 24px; height: 24px; }
.map-card__body strong { display: block; font-family: var(--font-display); text-transform: uppercase; font-size: 1.25rem; }
.map-card__body span { font-size: var(--fs-sm); color: var(--muted); }
.map-card__cta { margin-left: auto; font-family: var(--font-mono); font-size: var(--fs-mono); text-transform: uppercase; letter-spacing: 0.06em; border-bottom: 1.5px solid currentColor; }
.nap { display: flex; flex-direction: column; gap: var(--sp-3); }
.nap-row { display: flex; gap: var(--sp-3); align-items: flex-start; }
.nap-row svg { width: 20px; height: 20px; flex: none; margin-top: 3px; }

/* Feature trio / story rows */
.feature-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1.5px solid var(--black); }
@media (max-width: 800px) { .feature-trio { grid-template-columns: 1fr; } }
.feature { padding: clamp(1.5rem, 3vw, 2.25rem); border-right: 1.5px solid var(--black); min-width: 0; }
.feature:last-child { border-right: 0; }
@media (max-width: 800px) { .feature { border-right: 0; border-bottom: 1.5px solid var(--black); } .feature:last-child { border-bottom: 0; } }
.feature__num { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: var(--sp-4); }
.feature h3 { font-size: 1.6rem; margin-bottom: var(--sp-3); }
.feature p { color: var(--muted); font-size: var(--fs-sm); }
.story-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (max-width: 860px) { .story-row { grid-template-columns: 1fr; } }
.story-row--flip > .story-row__media { order: 2; }
@media (max-width: 860px) { .story-row--flip > .story-row__media { order: 0; } }
.story-row__media { border: 1.5px solid var(--black); overflow: hidden; background: var(--black); }
.story-row__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.story-row__media--tall img { aspect-ratio: 4 / 5; }
.story-row__num { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: var(--sp-4); }
.story-row h2 { max-width: 14ch; }
.story-row .deck, .story-row p { margin-top: var(--sp-4); }
.story-row + .story-row { margin-top: clamp(3.5rem, 8vw, 7rem); }

/* Team grid */
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
@media (max-width: 900px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .team-grid { grid-template-columns: 1fr; } }
.team-card { border: 1.5px solid var(--black); background: var(--warm); min-width: 0; }
.team-card__media { aspect-ratio: 4 / 5; overflow: hidden; border-bottom: 1.5px solid var(--black); background: var(--g15); }
.team-card__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.team-card__body { padding: var(--sp-4) var(--sp-4) var(--sp-5); display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.team-card__body h3 { font-size: 1.4rem; }
.team-card__role { font-family: var(--font-mono); font-size: var(--fs-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
/* Crew member whose photo has not arrived yet: flood colour and the Brightwild mark */
.team-card__media--tile { display: grid; place-items: center; background: var(--tile, var(--blue)); color: var(--black); }
.team-card__mark { width: 24%; height: auto; }

/* Clock times on trip pages carry this note: the client changes them periodically */
.times-note { margin-top: var(--sp-5); padding: 0.8rem 1rem; border: 1.5px solid var(--black); background: var(--yellow); color: var(--black); font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: 0.05em; text-transform: uppercase; line-height: 1.5; }
.quick-detail__note { display: block; margin-top: 3px; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }

/* Amenity grid (boat page) */
.amenity-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0; border: 1.5px solid var(--black); }
.amenity { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-right: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: 0.05em; text-transform: uppercase; min-width: 0; }
.amenity svg { width: 22px; height: 22px; flex: none; }
.spec-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0; border-top: 1.5px solid var(--black); }
.spec { padding: var(--sp-4) var(--sp-4) var(--sp-4) 0; border-bottom: 1px solid var(--line-strong); }
.spec__k { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); display: block; }
.spec__v { font-family: var(--font-display); font-size: 1.8rem; text-transform: uppercase; line-height: 1; margin-top: 0.3rem; display: block; }

/* Concierge band */
.concierge { display: grid; grid-template-columns: 1fr 1fr; border: 1.5px solid var(--black); }
@media (max-width: 860px) { .concierge { grid-template-columns: 1fr; } }
.concierge__media { position: relative; min-height: 380px; border-right: 1.5px solid var(--black); background: var(--black); overflow: hidden; }
@media (max-width: 860px) { .concierge__media { border-right: 0; border-bottom: 1.5px solid var(--black); min-height: 280px; } }
.concierge__media video, .concierge__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.concierge__body { padding: clamp(1.75rem, 4vw, 3rem); display: flex; flex-direction: column; justify-content: center; gap: var(--sp-4); background: var(--yellow); }
.concierge__body h2 { max-width: 12ch; }
.big-phone { font-family: var(--font-display); font-size: clamp(2rem, 4.5vw, 3.6rem); text-transform: uppercase; line-height: 1; border-bottom: 3px solid var(--black); display: inline-block; }

/* ------------------------------------------------------------------ FOOTER */
.site-footer { background: var(--black); color: rgba(232,227,223,0.78); padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; border-top: 1.5px solid var(--black); }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: clamp(1.75rem, 4vw, 3rem); }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-col h4 { color: var(--warm); font-family: var(--font-mono); font-size: var(--fs-mono); font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: var(--sp-4); padding-bottom: var(--sp-2); border-bottom: 1px solid rgba(232,227,223,0.25); }
.footer-col .nap-row { color: rgba(232,227,223,0.82); font-size: var(--fs-sm); }
.footer-col .nap-row a:hover { color: var(--yellow); }
.footer-col .nap-row svg { color: var(--yellow); }
.footer-quick { display: flex; flex-direction: column; gap: var(--sp-2); }
.footer-quick a { color: rgba(232,227,223,0.82); font-size: var(--fs-sm); }
.footer-quick a:hover { color: var(--yellow); }
.footer-socials { display: flex; gap: var(--sp-2); margin-top: var(--sp-4); }
.footer-socials a { width: 42px; height: 42px; display: grid; place-items: center; border: 1.5px solid rgba(232,227,223,0.5); color: var(--warm); transition: all 0.2s var(--ease); }
.footer-socials a:hover { background: var(--yellow); color: var(--black); border-color: var(--yellow); }
.footer-socials svg { width: 20px; height: 20px; }
.footer-brand-logo { height: 34px; width: auto; margin-bottom: var(--sp-4); }
.footer-tag { font-family: var(--font-display); text-transform: uppercase; color: var(--warm); font-size: 1.5rem; line-height: 1; margin-bottom: var(--sp-3); }
.footer-bottom { margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: var(--sp-5); border-top: 1px solid rgba(232,227,223,0.2); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-4); font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(232,227,223,0.6); }
.footer-bottom a { color: rgba(232,227,223,0.75); text-decoration: underline; text-underline-offset: 3px; }
.footer-bottom a:hover { color: var(--yellow); }

/* -------------------------------------------------------- STICKY MOBILE BOOK BAR */
.mobile-book-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 900; display: none; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: 0.7rem var(--gutter); padding-bottom: calc(0.7rem + env(safe-area-inset-bottom, 0)); background: var(--warm); border-top: 1.5px solid var(--black); transform: translateY(110%); transition: transform 0.4s var(--ease); }
.mobile-book-bar.visible { transform: translateY(0); }
.mobile-book-bar__price { line-height: 1.1; min-width: 0; }
.mobile-book-bar__price .from { font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.mobile-book-bar__price .amt { font-family: var(--font-display); font-size: 1.5rem; display: block; }
.mobile-book-bar__label { line-height: 1.15; min-width: 0; }
.mobile-book-bar__label .lede { font-family: var(--font-display); text-transform: uppercase; font-size: 1.05rem; display: block; line-height: 1; }
.mobile-book-bar__label .sub { font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); display: block; margin-top: 3px; }
.mobile-book-bar .btn { flex: 0 0 auto; padding-inline: 1.3rem; }
@media (max-width: 768px) { .mobile-book-bar { display: flex; } body.has-book-bar, body.has-universal-bar { padding-bottom: var(--bookbar-h); } }

/* Desktop scroll nudge (tour pages) */
.book-nudge { position: fixed; left: clamp(1rem, 2vw, 1.5rem); bottom: clamp(1rem, 2vw, 1.5rem); z-index: 850; width: min(320px, 90vw); background: var(--warm); border: 1.5px solid var(--black); padding: var(--sp-4); transform: translateY(150%); opacity: 0; transition: transform 0.45s var(--ease), opacity 0.45s var(--ease); }
.book-nudge.visible { transform: translateY(0); opacity: 1; }
.book-nudge__title { font-family: var(--font-display); text-transform: uppercase; font-size: 1.3rem; line-height: 1; padding-right: 1.2rem; }
.book-nudge__meta { font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin: 0.4rem 0 0.8rem; }
.book-nudge__close { position: absolute; top: 0.3rem; right: 0.55rem; font-size: 1.3rem; line-height: 1; }
.book-nudge .btn { width: 100%; }
@media (max-width: 1024px) { .book-nudge { display: none !important; } }

/* --------------------------------------------------------- FINAL CTA BAND */
.cta-band { position: relative; overflow: hidden; isolation: isolate; background: var(--yellow); color: var(--black); padding-block: clamp(3.5rem, 8vw, 6.5rem); border-top: 1.5px solid var(--black); }
.cta-band__inner { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: end; }
@media (max-width: 860px) { .cta-band__inner { grid-template-columns: 1fr; } }
.cta-band h2 { font-size: clamp(2.8rem, 7vw, 6rem); max-width: 12ch; }
.cta-band p { max-width: 46ch; margin-top: var(--sp-4); }
.cta-band .cta-row { margin-top: var(--sp-6); }
.cta-band--black { background: var(--black); color: var(--warm); }
.cta-band--black h2 { color: var(--warm); }
.cta-band--black 
/* Book prompt (repeat CTA band, quiet) */
.book-prompt { border-top: 1.5px solid var(--black); border-bottom: 1.5px solid var(--black); }
.book-prompt__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.book-prompt__inner h2 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); }

/* Blog */
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
@media (max-width: 960px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .post-grid { grid-template-columns: 1fr; } }
.post-card { display: flex; flex-direction: column; border: 1.5px solid var(--black); background: var(--warm); min-width: 0; height: 100%; }
.post-card__media { aspect-ratio: 16 / 10; overflow: hidden; border-bottom: 1.5px solid var(--black); background: var(--black); }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.post-card:hover .post-card__media img { transform: scale(1.04); }
.post-card__body { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; }
.post-card__body h3 { font-size: 1.5rem; }
.post-card__body p { font-size: var(--fs-sm); color: var(--muted); flex: 1; }
.post-card .text-link { align-self: flex-start; }
.post-hero { margin-top: var(--promo-h); padding-top: calc(var(--nav-h) + clamp(2.5rem, 6vw, 5rem)); }
.post-hero h1 { font-size: clamp(2.6rem, 6vw, 5rem); max-width: 22ch; }
.post-hero__meta { font-family: var(--font-mono); font-size: var(--fs-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-top: var(--sp-4); }
.post-hero__img { margin-top: clamp(2rem, 5vw, 3rem); border: 1.5px solid var(--black); aspect-ratio: 16 / 8; object-fit: cover; width: 100%; }
.post-body { max-width: 760px; }
.post-body h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); max-width: 24ch; }
.post-body h3 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); max-width: 30ch; }
.post-body h4 { font-size: 1.2rem; margin-top: var(--sp-5); }
.post-nav { display: flex; justify-content: space-between; gap: var(--sp-4); border-top: 1.5px solid var(--black); padding-top: var(--sp-5); margin-top: clamp(2.5rem, 5vw, 4rem); }
.post-nav a { font-family: var(--font-mono); font-size: var(--fs-mono); text-transform: uppercase; letter-spacing: 0.06em; max-width: 45%; }
.post-nav a:hover { color: var(--redorange); }

/* Contact form */
.form-status { padding: 0.9rem 1rem; border: 1.5px solid var(--black); margin-bottom: var(--sp-4); font-size: var(--fs-sm); background: var(--yellow); }
.form-status.is-error { background: var(--coral); }
.field { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: var(--sp-4); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }
.field label { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: 0.06em; text-transform: uppercase; }
.field .req { color: var(--redorange); }
.field input, .field textarea, .field select { font: inherit; padding: 0.85rem 1rem; border: 1.5px solid var(--black); background: transparent; color: var(--black); width: 100%; border-radius: 0; }
.field input:focus, .field textarea:focus, .field select:focus { outline: 3px solid var(--black); outline-offset: 2px; }
.field textarea { resize: vertical; min-height: 140px; }
.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(2rem, 5vw, 4rem); }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

/* Legal / long text */
.legal h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-top: var(--sp-6); }
.legal p, .legal li { color: var(--g85); }

/* --------------------------------------------------- REVEAL-ON-SCROLL */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); will-change: opacity, transform; }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal--delay-1 { transition-delay: 0.08s; }
.reveal--delay-2 { transition-delay: 0.16s; }
.reveal--delay-3 { transition-delay: 0.24s; }
.no-js .reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } .panel__img, .tour-card__media img, .gallery-masonry .g-item img, .photo-strip .g-item img, .post-card__media img { transition: none !important; } }

/* Anchor offset so in-page jumps clear the fixed nav + promo bar */
:target, [id] { scroll-margin-top: calc(var(--promo-h) + var(--nav-h) + 1rem); }

/* Narrow-screen hardening */
.split-panels > *, .testimonial-grid > *, .tour-grid > *, .diff-list > *, .info-cols > *, .footer-grid > *, .feature-trio > *, .team-grid > *, .post-grid > *, .timeline > * { min-width: 0; }
@media (max-width: 430px) { .map-card__cta { white-space: normal; margin-left: 0; } }

/* Birdeye chat bubble above the sticky bar on mobile */
@media (max-width: 768px) { body.has-book-bar iframe[src*="getBubbleContent"], body.has-universal-bar iframe[src*="getBubbleContent"] { bottom: 84px !important; } }
/* Birdeye chat steps aside while the phone menu is open, so its greeting card cannot cover menu links */
body.drawer-open iframe[src*="webchat.birdeye.com"] { visibility: hidden !important; }

/* Dark-section overrides for rail + map card */
.section--black .rail { border-color: rgba(232,227,223,0.5); }
.section--black .rail__step::before { background: var(--yellow); }
.section--black .rail__time { color: rgba(232,227,223,0.65); }
.section--black .rail__step p { color: rgba(232,227,223,0.78); }
.map-card { color: var(--black); }
.map-card__body strong, .map-card__cta { color: var(--black); }
/* Hero kicker chip: solid colour chip with black text, never a light outline on a colour */
.hero__kicker .chip { border-color: transparent; color: var(--black); }
.hero__kicker .chip--light.chip--family { background: var(--blue); }
.hero__kicker .chip--light.chip--adults { background: var(--pink); }
.hero__kicker .chip--light.chip--sunset { background: var(--marigold); }
.hero__kicker .chip--light.chip--combo { background: var(--coral); }
.hero__kicker .chip--light.chip--private { background: var(--green); }
.hero__kicker .chip--light.chip--rental { background: var(--olive); }