@charset "UTF-8";
/* ==========================================================================
   NOMADX — Tour & Travel Operator HTML Template
   --------------------------------------------------------------------------
   This file is a manifest. It contains no declarations of its own: every rule
   lives in a partial below, and the import order here IS the cascade order.

   Compile with any of:
     npm run build       Gulp — writes style.css and style.min.css
     npm run build:sass  Dart Sass CLI, no build framework
     npm run dev         Vite dev server with hot reload

   Where things live:
     abstracts/   design tokens and keyframes
     base/        reset, typography, motion, responsive, print
     layout/      the page frame — structure, header, sidebar, footer
     components/  reusable pieces used on more than one page
     pages/       rules belonging to exactly one page
     utilities/   single-purpose helpers

   Re-skinning the theme is abstracts/_tokens.scss and nothing else.

   ON THE ORDER BELOW: it deliberately follows the original stylesheet's
   sequence rather than grouping every layout partial together and every
   component partial together. Tidier grouping was tried and it moved rules
   across each other — .topbar ahead of .btn, .spinner ahead of the reset —
   and reordering rules of equal specificity changes which one wins. The
   grouping is expressed in the comments; the order stays as it was.
   ========================================================================== */
/* Tokens first — everything downstream reads them. */
/* ==========================================================================
   01. DESIGN TOKENS
   Change these values to re-skin the entire template.
   ========================================================================== */
:root {
  /* Tells the browser which way to draw the parts we do not: the calendar
     button inside a date input, the date and select popups, the default
     scrollbar, autofill. Stated explicitly so a visitor whose OS is set to
     dark does not get dark-drawn native controls on our light page. The dark
     theme flips it, which is the whole fix for the black calendar glyph that
     was sitting invisibly on the dark search bar. */
  color-scheme: light;
  /* --- Brand palette ---------------------------------------------------- */
  --c-deep: #0b3d54; /* darkest teal — footer, headings              */
  --c-primary: #0b4f6c; /* primary teal — links, primary buttons        */
  --c-primary-alt: #0d5f81; /* primary hover                                */
  /* The bright orange is a fill and border colour. As TEXT on a light ground
     it only reaches 2.5:1, and white text on it is no better, so text and
     solid buttons use the darker pair below. Same hue, same family, legible. */
  --c-accent: #e2901a; /* orange — borders, rules, icon fills          */
  --c-accent-alt: #c97a11; /* orange hover on fills                        */
  --c-accent-text: #ac5a00; /* orange for TEXT on light        4.6:1        */
  --c-accent-fill: #b26002; /* orange behind WHITE text        4.6:1        */
  --c-gold: #f0b64b; /* gold — highlights on dark backgrounds only   */
  /* The star ratings are 12px, so this needs the full 4.5:1 — and on the tinted
     grounds, not just on white. #b07a18 measured 3.72 and was labelled
     "large text only", which nothing using it actually was. */
  --c-gold-text: #916310; /* gold as TEXT on light  5.3:1 / 4.9 on tint  */
  /* --- Text ------------------------------------------------------------- */
  --c-ink: #123040; /* body text on light                           */
  --c-heading: #0b3d54; /* headings                                     */
  --c-body: #3d5563; /* paragraph copy                               */
  --c-muted: #5b7280; /* secondary copy                     4.7:1     */
  /* These two carry the labels and meta rows, which are small — so they need
     the full 4.5:1 for normal text, not the 3:1 large-text allowance. They
     were #7d919c (3.1:1) and #9aabb4 (2.2:1), both failing on the tinted
     panels where most of them sit. */
  --c-muted-2: #5f737f; /* labels, meta                       4.5:1     */
  --c-muted-3: #62737c; /* faintest meta                      4.6:1     */
  /* --- Surfaces & lines ------------------------------------------------- */
  --c-white: #ffffff;
  /* The page ground. Separate from --c-white, which is a literal the print
     stylesheet and a few fixed surfaces want; this one follows the theme.
     Without a light declaration the only --c-bg in the stylesheet was the dark
     theme's, so anything reading the cascade statically — the anti-pattern
     detector included — concluded the page was near-black. */
  --c-bg: #ffffff;
  /* Card and panel ground. A literal #fff cannot follow a theme, which is
     what left dark mode with light text on white surfaces. */
  /* Ground BEHIND white text. Separate from --c-primary because that is also
     used as text: on a dark theme a primary light enough to read becomes too
     light to sit white text on. Same split as --c-accent / --c-accent-fill. */
  --c-fill: #0b4f6c;
  --c-card: #ffffff;
  --c-surface: #f2f7f9; /* tinted panel background                      */
  --c-surface-2: #f8fbfc; /* faintest panel — expanded booking drawers    */
  --c-line-strong:#cfdae0; /* icon wells, emphasised hairlines             */
  --c-line: #dfe6ea; /* default border                               */
  --c-line-2: #e7edf0; /* softer divider                               */
  --c-line-3: #eef2f4; /* faintest divider                             */
  --c-hover: #f2f7f9; /* hover fill — re-pointed on tinted grounds    */
  /* Neutrals for TINTED grounds. §04 re-points --c-line* to these on every
     tinted surface. They live here rather than as literals in that selector
     list because the dark theme has to move them too, and duplicating a
     twelve-selector list to do that is how a theme drifts out of sync. */
  --ground-line: #cfdce2;
  --ground-line-2: #d9e4e9;
  --ground-line-3: #e1eaee;
  --ground-hover: #e8eff2;
  /* Tracking for uppercase micro-labels. Forty sites were setting this by hand
     with six different values for one visual job; these three are the scale.
     The recipe itself (12px + uppercase + muted) collapses into a mixin when
     the SCSS build lands — this is the half that needs no build step. */
  --track-tight: .15em;
  --track: .19em;
  --track-wide: .26em;
  --c-on-dark: #b9c7cf; /* body text on the deep teal ground            */
  /* --- Status ----------------------------------------------------------- */
  --c-success: #1f7a5a;
  --c-warning: #c97a11; /* fills, icons and rules — 3.2:1, not text        */
  --c-error: #b3402f;
  /* The same fill/text split the accent already carries: an outstanding
     balance is 13px, and --c-warning measured 3.22 on the tinted panel. */
  --c-warning-text: #92580a;
  /* Booking-status pills. Each is a tint plus the text colour that clears
     4.5:1 ON THAT TINT — badge text is small, so the page's own neutrals do
     not qualify: --c-warning lands at 3.0 here and --c-muted at 4.48.

     They are tokens rather than literals because the dark theme has to move
     all eight together; as hard-coded hexes the four pills stayed light and
     floated on a near-black page. */
  --tint-info: #e8f2f0;
  --tint-info-text: #0b4f6c;
  --tint-warn: #fdf3e3;
  --tint-warn-text: #8a5a08;
  --tint-neutral: #eef2f4;
  --tint-neutral-text: #516674;
  --tint-alert: #fbeee6;
  --tint-alert-text: #8a5a08;
  /* Ground for a chip floating ON a photograph — the one surface that cannot
     take a page token, because it has to stay legible over an unknown image. */
  --c-on-photo: rgba(255,255,255,.94);
  /* --- Typography ------------------------------------------------------- */
  --font-body: "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-head: "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* --- Metrics ---------------------------------------------------------- */
  --container: 1280px;
  --gutter: 28px;
  --radius-sm: 6px; /* chips, small controls                        */
  --radius: 9px; /* buttons, inputs                              */
  --radius-md: 9px; /* panels, popovers — alias of --radius         */
  --radius-lg: 12px; /* cards                                        */
  --radius-pill: 999px;
  /* --- Elevation -------------------------------------------------------- */
  /* Layered rather than one wide blur. A single diffuse shadow behind a
     hairline border is the generated-UI signature; two stops — a short one for
     contact, a longer one for distance — read sharper at every size and let the
     border keep defining the edge. */
  --shadow-sm: 0 1px 2px rgba(11, 48, 64, .06), 0 3px 8px rgba(11, 48, 64, .06);
  --shadow-md: 0 2px 5px rgba(11, 48, 64, .08), 0 8px 18px rgba(11, 48, 64, .10);
  --shadow-lg: 0 2px 6px rgba(11, 48, 64, .12), 0 7px 14px rgba(11, 48, 64, .16);
  /* --- Motion ----------------------------------------------------------- */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --speed: .22s;
  /* --- Header offset (used by sticky elements) -------------------------- */
  --header-h: 82px;
}

/* --------------------------------------------------------------------------
   BRAND INPUTS — two colours, everything else derived
   --------------------------------------------------------------------------
   The customiser writes --brand-1 (primary) and --brand-2 (secondary) onto
   <html> together with data-brand. Nothing above changes until it does: an
   untouched template ships the hand-tuned values, which are the ones the
   accessibility statement's contrast figures were measured against.

   Deriving rather than listing is what makes an arbitrary pair work. The
   earlier version shipped four fixed palettes as their own :root[data-palette]
   blocks; those sat AFTER the dark theme at equal specificity and silently
   overwrote it, which is why chips and buttons kept their light-theme teal on
   a near-black ground. There is nothing left to overwrite now — the dark theme
   re-derives from the same two inputs at higher specificity.

   The selector is `[data-brand]`, not `:root[data-brand]`, so the derivation
   also works on any element that sets the two inputs locally. That is what
   lets the customiser render each palette card's preview in its own colours —
   six live specimens, no duplicated colour maths, and the contrast figure on
   each card read back from what the browser actually resolved.

   color-mix() is the only modern feature in this stylesheet. A browser without
   it ignores this whole block and keeps the defaults above, so the template
   still renders; only the colour picker stops responding.
   ------------------------------------------------------------------------ */
[data-brand] {
  --c-primary: var(--brand-1);
  --c-primary-alt: color-mix(in srgb, var(--brand-1) 84%, #ffffff);
  /* 62%, where --c-heading below keeps 80%, because these are not the same
     kind of thing. --c-heading is TEXT and only gets safer as it darkens;
     --c-deep is the GROUND under the footer and the dark bands, and it is
     brand-relative — at 80% a light brand produced a light band, and the fixed
     cream alphas sitting on it fell to 4.26:1. Anchoring it darker costs the
     band nothing and holds every preset above AA. */
  --c-deep: color-mix(in srgb, var(--brand-1) 62%, #000000);
  --c-fill: var(--brand-1);
  --c-heading: color-mix(in srgb, var(--brand-1) 80%, #000000);
  --c-accent: var(--brand-2);
  --c-accent-alt: color-mix(in srgb, var(--brand-2) 86%, #000000);
  /* Text and fill are pulled down separately for the same reason the defaults
     split them: the bright value is a border colour, not a legible one. */
  --c-accent-text: color-mix(in srgb, var(--brand-2) 62%, #000000);
  --c-accent-fill: color-mix(in srgb, var(--brand-2) 66%, #000000);
  --c-gold: color-mix(in srgb, var(--brand-2) 72%, #ffffff);
  --c-gold-text: color-mix(in srgb, var(--brand-2) 68%, #000000);
}

/* Base. Fonts before reset: the @font-face rules have to be registered before
   anything sets font-family, or the first paint uses the fallback and reflows. */
/* ==========================================================================
   02b. FONTS — self-hosted
   --------------------------------------------------------------------------
   GENERATED — do not edit. Regenerate with `npm run fonts`.

   Poppins, SIL Open Font License 1.1. The licence is in
   assets/fonts/OFL.txt and must stay with the files if you redistribute them.

   These used to come from fonts.googleapis.com on every page, which sent the
   visitor's IP to Google before the cookie banner had even rendered. Serving
   them ourselves is a GDPR fix first and a performance one second.

   font-display: swap — text paints immediately in the fallback and reflows
   when the face arrives, rather than holding the page blank.
   ========================================================================== */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/poppins-300-latin.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: "Poppins";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/poppins-300-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/poppins-400-latin.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: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/poppins-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/poppins-500-latin.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: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/poppins-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/poppins-600-latin.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: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/poppins-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/poppins-700-latin.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: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/poppins-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* ==========================================================================
   02. RESET & BASE
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

/* The browser's own `[hidden] { display: none }` lives in the UA stylesheet, so
   ANY author rule that sets display beats it — `.btn { display: inline-flex }`
   included. The planner's Back button carries `hidden` on the first question
   and was showing anyway: a live control that goes nowhere.
   Three components had already patched this one element at a time
   (.planner[hidden], .planner-results[hidden], .search-overlay[hidden]), which
   is the symptom of a missing general rule rather than three coincidences.
   !important is the conventional treatment here — the attribute is a statement
   that the element is not rendered, and no layout rule should be able to argue
   with it. */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.65;
  color: var(--c-ink);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* No overflow-x: hidden. It was hiding real horizontal overflow rather than
     preventing it — the layout still broke, it just did so silently and with
     no scrollbar to reveal it. It also clipped positioned children like the
     traveller popover. The overflow causes are fixed at source instead. */
}

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

a {
  color: var(--c-primary);
  text-decoration: none;
  transition: color var(--speed) var(--ease), border-color var(--speed) var(--ease), background-color var(--speed) var(--ease);
}

/* Hover colour is inherited so a dark band can swap it for gold — the dark
   orange reads well on white and disappears on deep teal. */
a:hover {
  color: var(--c-link-hover, var(--c-accent-text));
}

.band-dark, .site-footer, .topbar,
.search-summary, .search-editor,
[style*="--c-deep"] {
  --c-link-hover: var(--c-gold);
}

input, select, textarea, button {
  font-family: inherit;
  font-size: inherit;
}

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

hr {
  border: 0;
  border-top: 1px solid var(--c-line-2);
  margin: 0;
}

::-moz-selection {
  background: var(--c-gold);
  color: var(--c-deep);
}

::selection {
  background: var(--c-gold);
  color: var(--c-deep);
}

:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
}

/* Skip link — accessibility requirement for marketplace review */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--c-fill);
  color: #fff;
  padding: 12px 18px;
  border-radius: 0 0 var(--radius) 0;
}

.skip-link:focus {
  left: 0;
  color: #fff;
}

/* ==========================================================================
   MIXINS
   --------------------------------------------------------------------------
   Recipes that were written out by hand at dozens of sites. Each one below
   replaced a block that appeared verbatim across the stylesheet, so changing
   the recipe now means editing it here rather than finding every copy.

   These emit exactly what they replaced. If a mixin ever changes the compiled
   output, that is a decision to review — `npm run check:css` will say so.
   ========================================================================== */
/* The uppercase micro-label: section meta, card locations, table headers,
   form labels, breadcrumbs. Forty-six sites wrote these three declarations
   out longhand, with only the tracking and the colour differing.

   Pass $color: null where the element inherits its colour — several do, and
   forcing one would change the rendering. */
/* Square icon wells. `.icon-box` is the design-system primitive and is
   documented as such, but six components re-implemented it at their own size.
   $radius stays 0 by default because page content in this design is square;
   only the footer strip and floating surfaces are rounded. */
/* The pill-shaped toggles — filter pills, chip toggles, season chips. They
   share the shape and the interaction, and differ only in padding, ground and
   text colour, so those stay at the call site.

   Deliberately NOT extended to the static badges (.badge, .status, .tag).
   Those carry no cursor and no transition, and their padding is a third of
   these. Forcing one base over both families would change how five components
   render, which is a design decision rather than a refactor. */
/* The selected/active state shared by badges, pills, chips, pagination,
   toggles and the season picker — eight rules with a byte-identical body. */
/* ==========================================================================
   03. TYPOGRAPHY
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--c-heading);
  margin: 0;
  line-height: 1.15;
  text-wrap: pretty;
}

h1 {
  font-weight: 700;
  font-size: 44px;
}

/* Page-title scale. Three sizes, not one per page — use these instead of an
   inline font-size on every h1. */
/* Title scale. Interior pages previously set a heading size inline on almost
   every page — nine different values for what are all page titles — which also
   meant the responsive type rules could never reach them. These four steps are
   the sanctioned sizes; nothing should set font-size on a heading inline. */
.t-display {
  font-size: 56px;
  line-height: 1.06;
  letter-spacing: -0.02em;
}

/* Carries its own top margin. Without one, every page that used it invented a
   value inline — 16px on three pages, 14px on five. */
.t-page {
  margin: 14px 0 0;
  font-size: 46px;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.t-panel {
  font-size: 34px;
  line-height: 1.15;
  letter-spacing: -0.015em;
}

.t-sub {
  font-size: 26px;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.t-mini {
  font-size: 21px;
  line-height: 1.3;
}

h2 {
  font-size: 40px;
  letter-spacing: -0.015em;
}

h3 {
  font-size: 28px;
  letter-spacing: -0.015em;
}

h4 {
  font-size: 21px;
}

h5 {
  font-size: 17px;
}

h6 {
  font-size: 15px;
}

p {
  margin: 0 0 16px;
  text-wrap: pretty;
}

p:last-child {
  margin-bottom: 0;
}

strong, b {
  font-weight: 600;
}

/* Uppercase micro-label used throughout the design */
.eyebrow {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--c-accent-text);
}

.eyebrow--muted {
  color: var(--c-muted-2);
}

.eyebrow--gold {
  color: var(--c-gold);
}

.label {
  font-size: 12px;
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--c-muted-2);
}

/* A label that heads a whole panel rather than a field. It existed as
   `style="color:var(--c-deep)"` on the filters column — an inline colour that
   the dark theme could not reach, so the heading went to near-black on a
   near-black panel. */
.label--strong {
  color: var(--c-heading);
}

.lede {
  font-size: 19px;
  line-height: 1.65;
  color: var(--c-body);
}

/* Body scale. The heading scale above was unified early; body text was not, and
   drifted to thirteen sizes across the pages — 12.5 beside 13, 14.5 beside 15 —
   which reads as sloppiness rather than intent. These six steps are the whole
   vocabulary, and 15px is the base because `body` already declares it:

     11px  .label / .eyebrow   uppercase micro-labels
     12px  .text-xs            captions and fine print
     13px  .text-sm            secondary text
     15px  .text-base          body — the default
     17px  .text-lg            lead paragraphs
     19px  .lede               the one larger lead step

   Nothing should set font-size on body copy inline. Half-steps are what the
   drift looked like; if a size feels wrong, move a step, do not invent one. */
.text-lg {
  font-size: 17px;
}

.text-base {
  font-size: 15px;
}

.text-sm {
  font-size: 13px;
}

.text-xs {
  font-size: 12px;
}

.text-body {
  color: var(--c-body);
  line-height: 1.8;
}

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

.price {
  font-family: var(--font-head);
  color: var(--c-primary);
  white-space: nowrap;
}

/* --c-gold is 1.8:1 on white. Stars are text, so they take the readable sibling. */
.stars {
  color: var(--c-gold-text);
  font-size: 12px;
  letter-spacing: 2px;
}

/* Layout frame */
/* ==========================================================================
   04. LAYOUT HELPERS
   ========================================================================== */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  width: 100%;
}

/* Vertical rhythm — ONE scale. Interior pages previously hand-rolled ten
   different inline padding values; these are the sanctioned steps. */
.section {
  padding: 76px 0 0;
} /* homepage rhythm            */
.section--pad {
  padding: 76px 0;
}

.section--tight {
  padding: 52px 0;
}

.section--flush {
  padding-top: 0;
}

/* --- Alternating bands ---------------------------------------------------
   Long white pages read as flat. These give the scroll a rhythm without
   introducing new colours — both tints are existing surface tokens, and the
   hairlines stop the band edges looking accidental. Because .section has no
   bottom padding, each band supplies its own.

   The section BEFORE a band needs bottom padding too, or the band's top edge
   crops the preceding content: sections normally borrow their separation from
   the next one's padding-top, and a band edge is drawn before that applies.  */
.section:has(+ .section--surface),
.section:has(+ .section--tinted),
.section:has(+ .section--deep) {
  padding-bottom: 76px;
}

/* ---------------------------------------------------------------------------
   GROUNDS — the single source of truth for "what colour are the neutrals here"
   ---------------------------------------------------------------------------
   The neutral scale is tuned for white. Any surface that paints itself another
   colour drags the hairlines and hover fills toward its own value until they
   vanish: the separators inside a tinted section measured 1.04 against their
   background, and every hover filled with the section's own colour.

   Every ground is listed once, here, and re-points the four neutrals. No
   component knows which ground it sits on, nothing is restated per component,
   and a new ground is one more selector in one of these two lists.
   ------------------------------------------------------------------------ */
.section--surface, .section--tinted,
.cta-band, .summary-card, .book-box, .empty-state, .contact-strip,
.cell--surface, .mb-card__panel, .support-strip, .company-band,
.season-picker, .qr-note, .demo-note, .pax, .check--insure, .plan-why,
.search-overlay__foot, .info-card, .page-hero--plain,
.month-table th, .compare-table thead th {
  /* These four were literal hexes. That made every tinted section a pocket the
     dark theme could not reach — the neutrals reverted to their light values
     inside it, and card borders and hover fills came back white on a near-black
     page. Naming them means the theme moves them once, in one place. */
  --c-line: var(--ground-line);
  --c-line-2: var(--ground-line-2);
  --c-line-3: var(--ground-line-3);
  --c-hover: var(--ground-hover);
}

/* Dark grounds have the mirror problem: the light neutrals are invisible on
   them, so anything bordered inside had to hand-write a white alpha. */
/* .chat-panel is NOT on this list: its body is #fff and only its header strip
   is dark, so treating the whole panel as a dark ground put cream text on
   white. Scope dark tokens to the element that actually paints dark. */
.band-dark, .topbar, .site-footer, .section--deep, .art-panel, .chat-head {
  --c-line: rgba(255,255,255,.24);
  --c-line-2: rgba(255,255,255,.17);
  --c-line-3: rgba(255,255,255,.12);
  --c-hover: rgba(255,255,255,.07);
  /* Text neutrals too, so .label and .text-muted work on dark without any page
     hand-writing an rgba. Without these, a shared label class is unusable here
     and every dark surface reinvents it inline. */
  --c-muted: rgba(247,242,232,.78);
  --c-muted-2: rgba(247,242,232,.66);
  /* .55 measured 4.30:1 on the shipped deep band — a hairline miss that no
     page happened to expose until a derived palette lightened the ground. */
  --c-muted-3: rgba(247,242,232,.64);
}

.section--surface {
  background: var(--c-surface);
  padding-bottom: 76px;
  border-top: 1px solid var(--ground-line-2);
  border-bottom: 1px solid var(--ground-line-2);
}

/* Fainter alternative for pages that already carry a lot of panel chrome */
.section--tinted {
  background: var(--c-surface-2);
  padding-bottom: 76px;
  border-top: 1px solid var(--c-line-3);
  border-bottom: 1px solid var(--c-line-3);
}

/* Deep band for a full-bleed break in the page — used sparingly */
.section--deep {
  background: var(--c-deep);
  color: var(--c-on-dark);
  padding-bottom: 76px;
}

/* Whatever follows a band starts a fresh rhythm rather than inheriting the
   band's own spacing. */
.section--surface + .section,
.section--tinted + .section,
.section--deep + .section {
  padding-top: 76px;
}

.section--deep h2, .section--deep h3 {
  color: #fff;
}

.section--deep .section-head__lead,
.section--deep .cell__text {
  color: rgba(247, 242, 232, 0.78);
}

.section--intro {
  padding-top: 56px;
} /* first block under a page band */
.section--gap {
  padding-top: 66px;
} /* between interior sections     */
.section--sm {
  padding-top: 44px;
} /* tight lead-in                 */
.section--xs {
  padding-top: 30px;
} /* immediately under a dark band */
.section--end {
  padding-bottom: 80px;
} /* last block before the footer */
.section--end-sm {
  padding-bottom: 70px;
}

.grid {
  display: grid;
  gap: 20px;
}

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

.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

.stack {
  display: flex;
  flex-direction: column;
}

.row {
  display: flex;
  align-items: center;
}

.row-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.wrap {
  flex-wrap: wrap;
}

.gap-8 {
  gap: 8px;
}

.gap-10 {
  gap: 10px;
}

.gap-12 {
  gap: 12px;
}

.gap-16 {
  gap: 16px;
}

.gap-20 {
  gap: 20px;
}

.gap-24 {
  gap: 24px;
}

.divider {
  height: 1px;
  background: var(--c-line-2);
}

/* Components — buttons and forms precede the chrome, as in the original */
/* ==========================================================================
   05. BUTTONS
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: var(--track);
  text-transform: uppercase;
  padding: 17px 30px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--speed) var(--ease);
}

.btn i, .btn svg {
  width: 16px;
  height: 16px;
}

.btn--primary {
  background: var(--c-fill);
  color: #fff;
}

.btn--primary:hover {
  background: var(--c-primary-alt);
  color: #fff;
}

.btn--accent {
  background: var(--c-accent-fill);
  color: #fff;
}

.btn--accent:hover {
  background: var(--c-accent-text);
  color: #fff;
}

.btn--outline {
  border-color: var(--c-line);
  color: var(--c-primary);
}

.btn--outline:hover {
  border-color: var(--c-primary);
  background: var(--c-hover);
  color: var(--c-primary);
}

.btn--outline-accent {
  border-color: var(--c-accent);
  color: var(--c-accent-text);
}

.btn--outline-accent:hover {
  background: var(--c-accent-fill);
  color: #fff;
}

.btn--outline-dark {
  border-color: var(--c-heading);
  color: var(--c-heading);
}

.btn--outline-dark:hover {
  background: var(--c-deep);
  color: #fff;
}

.btn--ghost {
  border-color: var(--c-line-strong);
  color: var(--c-ink);
}

.btn--ghost:hover {
  background: var(--c-hover);
  border-color: var(--c-line);
}

.btn--ghost-light {
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
}

.btn--ghost-light:hover {
  background: var(--c-card);
  color: var(--c-heading);
}

.btn--sm {
  padding: 13px 22px;
  font-size: 12px;
}

.btn--lg {
  padding: 18px 34px;
}

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

.btn:disabled,
.btn.is-disabled {
  background: var(--c-surface);
  border-color: var(--c-line);
  color: var(--c-muted);
  cursor: not-allowed;
}

.btn.is-loading {
  pointer-events: none;
  opacity: 0.85;
}

/* Small pill link (search preview chips, tags) */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--c-primary);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-pill);
  padding: 6px 13px;
  background: transparent;
  cursor: pointer;
  transition: all var(--speed) var(--ease);
}

.chip:hover {
  border-color: var(--c-accent-text);
  color: var(--c-accent-text);
}

.chip.is-active {
  border-color: var(--c-primary);
  background: var(--c-surface);
  color: var(--c-primary);
}

/* Icon-only square button */
.btn-icon {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  background: transparent;
  color: var(--c-heading);
  cursor: pointer;
  flex: none;
  transition: all var(--speed) var(--ease);
}

.btn-icon:hover {
  border-color: var(--c-primary);
  color: var(--c-primary);
}

.btn-icon i, .btn-icon svg {
  width: 17px;
  height: 17px;
}

/* Badge */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  background: var(--c-surface);
  color: var(--c-primary);
  border: 1px solid var(--c-line);
}

/* The tint is a mix of the accent itself, not a frozen rgba() of its shipped
   value — otherwise a buyer who changes --brand-2 gets a new badge text colour
   on the old orange wash. The literal comes first so a browser without
   color-mix() still gets a badge. 9%, not 12%: --c-accent-text measured 4.48
   on the heavier wash, two hundredths short of AA at 12px. */
.badge--accent {
  background: rgba(226, 144, 26, 0.09);
  color: var(--c-accent-text);
  border-color: rgba(226, 144, 26, 0.3);
}

.badge--accent {
  background: color-mix(in srgb, var(--c-accent) 9%, transparent);
  border-color: color-mix(in srgb, var(--c-accent) 30%, transparent);
}

.badge--success {
  background: rgba(31, 122, 90, 0.1);
  color: var(--c-success);
  border-color: rgba(31, 122, 90, 0.25);
}

.badge--solid {
  background: var(--c-fill);
  border-color: var(--c-fill);
  color: #fff;
}

/* ==========================================================================
   06. FORMS
   ========================================================================== */
.field {
  display: block;
  margin-bottom: 0;
}

.field__label {
  display: block;
  font-size: 12px;
  color: var(--c-muted);
  margin-bottom: 7px;
}

.field__hint {
  display: block;
  margin-top: 7px;
  font-size: 12px;
  color: var(--c-muted-2);
}

.field__error {
  display: block;
  margin-top: 7px;
  font-size: 12px;
  color: var(--c-error);
}

.input, .select, .textarea {
  width: 100%;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: 12px 13px;
  font-size: 15px;
  color: var(--c-heading);
  background: var(--c-card);
  outline: 0;
  transition: border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}

.input:focus, .select:focus, .textarea:focus {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(11, 79, 108, 0.08);
}

.input::-moz-placeholder, .textarea::-moz-placeholder {
  color: var(--c-muted-3);
}

.input::placeholder, .textarea::placeholder {
  color: var(--c-muted-3);
}

/* The one native control the template never painted. Chrome gives a range
   input a `buttonface` box and its own system-blue thumb, so the price filter
   stayed a pale bar with an off-brand accent on a dark page. accent-color
   themes track and thumb in a single property; the box paints nothing. */
input[type=range] {
  width: 100%;
  background: transparent;
  accent-color: var(--c-accent-text);
}

.input.is-invalid, .select.is-invalid {
  border-color: var(--c-error);
}

.textarea {
  min-height: 140px;
  resize: vertical;
  line-height: 1.7;
}

.select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237d919c' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  padding-right: 34px;
  cursor: pointer;
}

/* Input with a trailing adornment (e.g. card brand) */
.input-group {
  display: flex;
  align-items: center;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  background: var(--c-card);
  padding: 0 13px;
  transition: border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}

.input-group:focus-within {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(11, 79, 108, 0.08);
}

.input-group .input {
  border: 0;
  padding: 12px 0;
  box-shadow: none;
  flex: 1;
  letter-spacing: 0.08em;
}

.input-group .input:focus {
  box-shadow: none;
}

.input-group__adorn {
  font-size: 12px;
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
  color: var(--c-muted-3);
  white-space: nowrap;
  padding-left: 10px;
}

/* Checkbox / radio rows */
.check {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 13px;
  color: var(--c-body);
  cursor: pointer;
  line-height: 1.6;
}

.check input[type=checkbox],
.check input[type=radio] {
  width: 15px;
  height: 15px;
  margin: 3px 0 0;
  accent-color: var(--c-primary);
  flex: none;
  cursor: pointer;
}

/* Layout chrome */
/* ==========================================================================
   07. TOP STRIP & HEADER
   ========================================================================== */
/* The strip is dark in BOTH themes, so its text takes the on-dark token. It
   used to borrow --c-line-strong, which the dark theme flips to a dark hairline
   — dark text on a dark strip, 1.97:1. */
.topbar {
  background: var(--c-deep);
  color: var(--c-on-dark);
}

.topbar__inner {
  /* Padding rather than a fixed height, so the strip grows with the text
     instead of clipping it when a visitor raises their text size.

     LONGHAND, deliberately. `padding: 8px 0` here also resets the horizontal
     padding .container sets as longhand, which zeroed the page gutter and put
     this strip's text flush against both screen edges while the header below
     kept its margin. This is the trap CLAUDE.md warns about. */
  min-height: 36px;
  padding-top: 8px;
  padding-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font-size: 12px;
  /* Not uppercased. The right-hand slot carries a licence statement, not a
     label — at 40+ characters, caps plus heavy tracking costs real legibility
     and buys nothing, since the strip is already set apart by its dark ground. */
  letter-spacing: 0.02em;
}

.topbar__left, .topbar__right {
  display: flex;
  align-items: center;
  gap: 22px;
}

.topbar__left {
  gap: 9px;
}

/* --c-on-dark, not --c-line-strong: a border token used as text was 3.9:1. */
.topbar a {
  color: var(--c-on-dark);
}

.topbar a:hover {
  color: var(--c-gold);
}

.topbar i, .topbar svg {
  width: 13px;
  height: 13px;
  color: var(--c-gold);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--c-card);
  border-bottom: 1px solid var(--c-line-2);
}

.site-header__inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
}

/* The wordmark ships as artwork in two colourways rather than as web type,
   because the mark's N is a drawn glyph — no font reproduces it. Both are in
   the markup and CSS picks one, since the customiser sets the theme as an
   attribute rather than a colour-scheme.

   Vector, traced from the 3238px original — a downscaled raster wordmark was
   soft on every display that is not exactly 1x. 120px rather than 132: the
   traced file is cropped to its own ink where the PNG carried the artboard's
   margin, so the smaller box renders the same optical width. */
.logo {
  display: flex;
  align-items: center;
  flex: none;
}

.logo__mark {
  display: block;
  width: 120px;
  height: auto;
}

.logo__mark--dark {
  display: none;
}

:root[data-theme=dark] .logo__mark {
  display: none;
}

:root[data-theme=dark] .logo__mark--dark {
  display: block;
}

.logo__mark {
  transition: opacity var(--speed) var(--ease);
}

.logo:hover .logo__mark {
  opacity: 0.82;
}

@media (max-width: 560px) {
  .logo__mark {
    width: 96px;
  }
}
.main-nav {
  display: flex;
  align-items: center;
  gap: 30px;
}

.main-nav a {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: var(--track);
  text-transform: uppercase;
  white-space: nowrap;
  padding: 4px 0;
  /* --c-heading, not --c-deep. They are the same hex on light, but --c-deep is
     a GROUND (footer, dark bands) and the dark theme pushes it to near-black —
     which turned the whole primary nav invisible. Text takes text tokens. */
  color: var(--c-heading);
  border-bottom: 1px solid transparent;
}

.main-nav a:hover {
  color: var(--c-accent-text);
  border-bottom-color: var(--c-accent-text);
}

.main-nav a.is-active {
  color: var(--c-accent-text);
  border-bottom-color: var(--c-accent-text);
}

/* The component index is template chrome, not one of the operator's pages, so
   it is marked rather than blended into the primary nav — a buyer can see at a
   glance which link to delete, and a visitor to a live site would never have
   met it. The dotted rule reads as "provisional" without adding a colour that
   would compete with the active state.

   Specificity, not !important: .main-nav a.nav-demo outranks .main-nav a on
   its own, which leaves .is-active free to win in turn. An !important here
   would have made this the one nav item that could never show as current. */
.main-nav a.nav-demo {
  color: var(--c-muted);
  border-bottom: 1px dashed var(--c-line);
}

.main-nav a.nav-demo:hover,
.main-nav a.nav-demo.is-active {
  color: var(--c-accent-text);
  border-bottom-style: solid;
  border-bottom-color: var(--c-accent-text);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
}

.account-btn {
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: 10px 14px;
  color: var(--c-ink);
  font-size: 12px;
  white-space: nowrap;
}

.account-btn:hover {
  border-color: var(--c-primary);
  color: var(--c-primary);
}

.account-btn i, .account-btn svg {
  width: 16px;
  height: 16px;
}

.burger {
  display: none;
  width: 42px;
  height: 42px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  background: transparent;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: var(--c-heading);
  flex: none;
}

.burger i, .burger svg {
  width: 19px;
  height: 19px;
}

/* ==========================================================================
   08. MOBILE NAVIGATION
   ========================================================================== */
.mobile-nav {
  display: none;
  flex-direction: column;
  padding: 4px 18px 16px;
  background: var(--c-card);
  border-top: 1px solid var(--c-line-2);
}

.mobile-nav.is-open {
  display: flex;
}

.mobile-nav a {
  font-size: 15px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  /* --c-ink, not --c-deep: deep is the dark GROUND colour, so on a dark theme
     it becomes near-black text on a near-black panel. */
  color: var(--c-ink);
  padding: 14px 0;
  border-bottom: 1px solid var(--c-line-2);
}

.mobile-nav a:last-child {
  border-bottom: 0;
}

.mobile-nav a.is-active {
  color: var(--c-accent-text);
}

/* Components */
/* ==========================================================================
   09. HERO
   ========================================================================== */
.hero {
  position: relative;
  height: 620px;
  overflow: hidden;
  background: var(--c-deep);
}

.hero__slides {
  position: absolute;
  inset: 0;
}

.hero__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1.1s var(--ease), transform 7s linear;
}

.hero__slide.is-active {
  opacity: 1;
  transform: scale(1);
}

.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(22, 36, 31, 0.45) 0%, rgba(22, 36, 31, 0.15) 40%, rgba(22, 36, 31, 0.88) 100%);
}

.hero__body {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
}

.hero__inner {
  width: 100%;
  padding-bottom: 120px;
}

.hero__content {
  max-width: 820px;
}

.hero__content.is-animating {
  animation: rise 0.8s var(--ease) both;
}

.hero__kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--c-gold);
  margin-bottom: 20px;
}

.hero__kicker::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--c-gold);
  display: block;
  flex: none;
}

.hero__title {
  margin: 0;
  font-size: 72px;
  line-height: 1.02;
  color: #fff;
  letter-spacing: -0.02em;
}

.hero__sub {
  margin: 20px 0 0;
  font-size: 19px;
  line-height: 1.65;
  color: rgba(247, 242, 232, 0.86);
  max-width: 560px;
}

.hero__dots {
  position: absolute;
  right: var(--gutter);
  bottom: 120px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
  z-index: 3;
}

.hero__dot {
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: var(--font-head);
  font-size: 12px;
  letter-spacing: var(--track);
  text-transform: uppercase;
  padding: 6px 0 6px 14px;
  border-right: 2px solid rgba(247, 242, 232, 0.3);
  color: rgba(247, 242, 232, 0.55);
  transition: all var(--speed) var(--ease);
}

.hero__dot:hover {
  color: #fff;
}

.hero__dot.is-active {
  border-right-color: var(--c-gold);
  color: #fff;
}

/* ==========================================================================
   10. SEARCH WIDGET
   ========================================================================== */
.search-wrap {
  position: relative;
  z-index: 20;
  margin-top: -58px;
}

.search-widget {
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr 0.9fr auto;
  /* No overflow:hidden — it would clip the traveller popover. The corners are
     rounded on the end cells instead. */
}

.search-widget > :first-child {
  border-top-left-radius: var(--radius-lg);
  border-bottom-left-radius: var(--radius-lg);
}

.search-widget > :last-child {
  border-top-right-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-lg);
}

.sw-cell {
  padding: 16px 20px;
  border-right: 1px solid var(--c-line-2);
}

.sw-cell:nth-last-child(2) {
  border-right: 0;
}

.sw-cell__label {
  font-size: 12px;
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--c-muted-2);
  margin-bottom: 7px;
}

.sw-cell__control {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--c-muted-2);
}

.sw-cell__control i, .sw-cell__control svg {
  width: 15px;
  height: 15px;
  flex: none;
}

.sw-cell:first-child .sw-cell__control {
  color: var(--c-accent);
}

.sw-cell__control select,
.sw-cell__control input {
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 15px;
  color: var(--c-ink);
  width: 100%;
  cursor: pointer;
  padding: 0;
}

/* --- Trip planner ---------------------------------------------------------
   One question at a time, so the page never looks like a form.            */
.planner {
  max-width: 760px;
  margin: 0 auto;
}

.planner[hidden] {
  display: none;
}

.planner__rail {
  display: flex;
  gap: 6px;
  margin-bottom: 18px;
}

.planner__tick {
  height: 3px;
  flex: 1;
  border-radius: 2px;
  background: var(--c-line-2);
  transition: background var(--speed) var(--ease);
}

.planner__tick.is-done {
  background: var(--c-accent);
}

.planner__tick.is-now {
  background: var(--c-primary);
}

.planner__step {
  margin: 0 0 10px;
  font-size: 12px;
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--c-muted-2);
}

.planner__stage.is-entering {
  animation: rise 0.32s var(--ease) both;
}

.planner__ask {
  margin: 0;
}

.planner__note {
  margin: 12px 0 0;
  font-size: 15px;
  color: var(--c-body);
}

.planner__options {
  display: grid;
  gap: 12px;
  margin-top: 26px;
}

.plan-opt {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 20px;
  text-align: left;
  cursor: pointer;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-md);
  background: var(--c-card);
  font: inherit;
  transition: border-color var(--speed) var(--ease), background var(--speed) var(--ease), transform var(--speed) var(--ease);
}

.plan-opt:hover {
  border-color: var(--c-accent);
  transform: translateX(3px);
}

.plan-opt.is-picked {
  border-color: var(--c-primary);
  background: var(--c-surface);
}

.plan-opt__label {
  font-size: 17px;
  color: var(--c-ink);
}

.plan-opt__note {
  font-size: 12px;
  color: var(--c-muted-2);
}

.planner__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 24px;
}

.planner-results[hidden] {
  display: none;
}

.planner-results__why {
  margin: 18px 0 0;
  font-size: 15px;
  color: var(--c-body);
}

.plan-grid {
  display: grid;
  gap: 20px;
  margin-top: 24px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.plan-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-md);
  background: var(--c-card);
  overflow: hidden;
  transition: box-shadow var(--speed) var(--ease), transform var(--speed) var(--ease);
}

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

.plan-card__media {
  position: relative;
  aspect-ratio: 16/10;
  background: var(--c-surface-2) center/cover no-repeat;
}

.plan-card__flag {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--c-accent-fill);
  color: #fff;
  font-size: 12px;
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
}

.plan-card__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 18px 8px;
  flex: 1;
}

.plan-card__region {
  font-size: 12px;
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--c-accent-text);
}

.plan-card__name {
  font-size: 17px;
  line-height: 1.3;
  color: var(--c-ink);
}

.plan-card__meta {
  font-size: 12px;
  color: var(--c-muted-2);
}

.plan-card__why {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.plan-why {
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--c-surface);
  border: 1px solid var(--c-line-3);
  font-size: 12px;
  color: var(--c-body);
  white-space: nowrap;
}

.plan-card__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px 18px;
}

.plan-card__price {
  display: flex;
  flex-direction: column;
  font-size: 19px;
  color: var(--c-primary);
}

.plan-card__pp {
  font-size: 12px;
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
  color: var(--c-muted-2);
}

.plan-card__go {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
  color: var(--c-accent-text);
}

.plan-card__go i, .plan-card__go svg {
  width: 14px;
  height: 14px;
}

@media (max-width: 900px) {
  .plan-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  .plan-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .planner__nav {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .planner__nav .btn {
    width: 100%;
    justify-content: center;
  }
  .plan-opt {
    padding: 16px;
    min-height: 44px;
  }
}
/* --- Site search overlay --------------------------------------------------
   Opened from the header magnifier or by pressing "/".                     */
.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
}

.search-overlay[hidden] {
  display: none;
}

.search-overlay__scrim {
  position: absolute;
  inset: 0;
  background: rgba(6, 20, 28, 0.58);
  backdrop-filter: blur(3px);
  animation: fade-in 0.2s var(--ease) both;
}

.search-overlay__panel {
  position: relative;
  width: min(680px, 100vw - 32px);
  margin: 10vh auto 0;
  background: var(--c-card);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 80px rgba(6, 20, 28, 0.34);
  overflow: hidden;
  animation: pop 0.24s var(--ease) both;
}

.search-overlay__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--c-line-2);
}

.search-overlay__bar > i, .search-overlay__bar > svg {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--c-muted-2);
}

.search-overlay__input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: 17px;
  color: var(--c-ink);
}

.search-overlay__input::-webkit-search-cancel-button {
  display: none;
}

.search-overlay__close {
  border: 0;
  background: transparent;
  cursor: pointer;
  width: 34px;
  height: 34px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-muted-2);
  border-radius: 50%;
}

.search-overlay__close:hover {
  background: var(--c-hover);
  color: var(--c-ink);
}

.search-overlay__close i, .search-overlay__close svg {
  width: 17px;
  height: 17px;
}

.search-overlay__results {
  max-height: min(60vh, 460px);
  overflow-y: auto;
  padding: 8px;
}

.search-overlay__empty {
  margin: 0;
  padding: 26px 14px;
  font-size: 15px;
  color: var(--c-muted-2);
}

.search-overlay__empty a {
  color: var(--c-accent-text);
  text-decoration: underline;
}

.so-hit {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
}

.so-hit.is-active {
  background: var(--c-surface);
}

.so-hit__media {
  width: 62px;
  height: 46px;
  flex: none;
  border-radius: var(--radius-sm);
  background: var(--c-surface-2) center/cover no-repeat;
}

.so-hit__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.so-hit__name {
  font-size: 15px;
  color: var(--c-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.so-hit__meta {
  font-size: 12px;
  color: var(--c-muted-2);
}

.so-hit__price {
  font-size: 15px;
  color: var(--c-primary);
  flex: none;
  font-variant-numeric: tabular-nums;
}

.search-overlay__foot {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  padding: 11px 18px;
  border-top: 1px solid var(--c-line-2);
  background: var(--c-surface);
  font-size: 12px;
  color: var(--c-muted-2);
}

.search-overlay__foot kbd {
  display: inline-block;
  min-width: 18px;
  padding: 1px 5px;
  margin-right: 3px;
  border: 1px solid var(--c-line);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--c-card);
  font: inherit;
  font-size: 12px;
  text-align: center;
}

body.has-overlay {
  overflow: hidden;
}

@media (max-width: 600px) {
  .search-overlay__panel {
    margin-top: 0;
    width: 100vw;
    min-height: 100vh;
    border-radius: 0;
  }
  .search-overlay__results {
    max-height: calc(100vh - 132px);
  }
  .search-overlay__foot {
    display: none;
  }
}
/* --- Checkout passenger roster --------------------------------------------
   Every traveller on their own row with the fare that applies to them, so a
   mixed party can see where each figure comes from.                        */
.pax-list {
  display: grid;
  gap: 8px;
  margin: 18px 0 4px;
  padding: 16px 0;
  border-top: 1px solid var(--c-line-3);
  border-bottom: 1px solid var(--c-line-3);
}

.pax {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  border: 1px solid var(--c-line-3);
  border-radius: var(--radius-sm);
  background: var(--c-surface);
  font-size: 13px;
}

.pax--lead {
  border-color: var(--c-accent);
  background: var(--c-accent-soft, rgba(200, 138, 42, 0.08));
}

.pax--lead .pax__who {
  color: var(--c-ink);
  font-weight: 500;
}

.pax__who {
  color: var(--c-body);
}

.pax__fare {
  color: var(--c-ink);
  font-variant-numeric: tabular-nums;
}

.check--insure {
  margin-top: 16px;
  padding: 12px;
  border: 1px solid var(--c-line-2);
  border-radius: var(--radius-sm);
  background: var(--c-surface);
  font-size: 13px;
}

.line__note {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  color: var(--c-muted-2);
}

/* --- Search summary strip + in-place editor -------------------------------
   Sits inside the dark page header on the results listing.                 */
.search-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  margin-top: 16px;
  font-size: 13px;
  color: rgba(247, 242, 232, 0.78);
}

.search-summary__item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.search-summary__item i, .search-summary__item svg {
  width: 14px;
  height: 14px;
  flex: none;
  color: var(--c-gold);
}

.search-summary__edit {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-gold);
  padding: 6px 0;
}

.search-summary__edit i, .search-summary__edit svg {
  width: 13px;
  height: 13px;
}

.search-summary__edit:hover {
  color: #fff;
}

.search-editor {
  margin-top: 20px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(247, 242, 232, 0.16);
  border-radius: var(--radius-md);
  animation: rise 0.3s var(--ease) both;
  /* This panel is dark in BOTH themes — it is a translucent white over a dark
     band, not a themed surface. color-scheme is set once on :root from the
     theme, so in the light theme the browser painted this input's native
     calendar picker for a light background: a dark glyph on a dark panel,
     effectively invisible. Declaring the scheme locally makes the user agent
     paint its own controls to suit the ground they actually sit on, which
     fixes the picker indicator, the spin buttons and the focus ring together.
     Tokens cannot do this — only the UA draws those parts. */
  color-scheme: dark;
}

.search-editor[hidden] {
  display: none;
}

.search-editor__grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.search-editor__field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  position: relative;
}

.search-editor__label {
  font-size: 12px;
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: rgba(247, 242, 232, 0.6);
}

.search-editor__field select,
.search-editor__field input {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid rgba(247, 242, 232, 0.22);
  border-radius: var(--radius-sm);
  background: rgba(8, 21, 28, 0.5);
  color: #fff;
  font: inherit;
  font-size: 15px;
}

.search-editor__field select option {
  color: var(--c-ink);
  background: var(--c-card);
}

.search-editor__field .occ-trigger {
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid rgba(247, 242, 232, 0.22);
  border-radius: var(--radius-sm);
  background: rgba(8, 21, 28, 0.5);
  color: #fff;
  font-size: 15px;
}

.search-editor__field .occ-trigger i,
.search-editor__field .occ-trigger svg {
  color: rgba(247, 242, 232, 0.6);
}

.search-editor__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}

/* --- Traveller occupancy control -----------------------------------------
   The trigger sits in the widget like the other fields; the panel floats out
   of it on desktop and becomes a bottom sheet on small screens, where a
   floating panel with several age selects would run past the fold.        */
.sw-cell--occ {
  position: relative;
}

.occ-trigger {
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  font: inherit;
  font-size: 15px;
  color: var(--c-ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  text-align: left;
}

.occ-trigger i, .occ-trigger svg {
  width: 14px;
  height: 14px;
  flex: none;
  color: var(--c-muted-2);
  transition: transform var(--speed) var(--ease);
}

.is-open > .sw-cell__control .occ-trigger i,
.is-open > .sw-cell__control .occ-trigger svg {
  transform: rotate(180deg);
}

.occ-panel {
  position: absolute;
  z-index: 40;
  top: calc(100% + 10px);
  left: 0;
  width: 330px;
  max-width: calc(100vw - 32px);
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 6px 18px 16px;
}

.occ-panel[hidden] {
  display: none;
}

.occ-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 0;
  border-bottom: 1px solid var(--c-line-3);
}

.occ-row__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.occ-row__label {
  font-size: 15px;
  color: var(--c-ink);
}

.occ-row__note {
  font-size: 12px;
  color: var(--c-muted-2);
}

.stepper {
  display: flex;
  align-items: center;
  gap: 4px;
}

.stepper__btn {
  width: 34px;
  height: 34px;
  flex: none;
  border: 1px solid var(--c-line);
  border-radius: 50%;
  background: var(--c-card);
  color: var(--c-primary);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--speed) var(--ease), color var(--speed) var(--ease);
}

.stepper__btn:hover:not(:disabled) {
  border-color: var(--c-accent-text);
  color: var(--c-accent-text);
}

.stepper__btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.stepper__value {
  min-width: 30px;
  text-align: center;
  font-size: 15px;
  color: var(--c-ink);
  font-variant-numeric: tabular-nums;
}

.occ-ages {
  display: grid;
  gap: 10px;
  padding: 14px 0 4px;
}

.occ-ages[hidden] {
  display: none;
}

.occ-age {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.occ-age__label {
  font-size: 12px;
  color: var(--c-muted-2);
}

.occ-age select {
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font: inherit;
  font-size: 13px;
  color: var(--c-ink);
  background: var(--c-card);
  min-width: 118px;
  min-height: 40px;
  cursor: pointer;
}

.occ-panel__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  padding-top: 14px;
}

.occ-note {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--c-muted-2);
}

.sw-go {
  background: var(--c-fill);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: var(--track);
  text-transform: uppercase;
  padding: 22px 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  cursor: pointer;
}

.sw-go:hover {
  background: var(--c-primary-alt);
  color: #fff;
}

.sw-go i, .sw-go svg {
  width: 16px;
  height: 16px;
}

.sw-hints {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.sw-hints__count {
  font-size: 12px;
  color: var(--c-muted-2);
}

/* ==========================================================================
   11. SECTION HEADERS
   ========================================================================== */
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
}

.section-head__title {
  margin: 14px 0 0;
  font-size: 44px;
  line-height: 1.1;
}

.section-head__lead {
  max-width: 400px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--c-body);
  margin: 0;
}

.section-head--rule {
  padding-bottom: 18px;
  border-bottom: 1px solid var(--c-line-2);
  align-items: flex-end;
  gap: 24px;
}

.section-head--rule .section-head__title {
  font-size: 40px;
  margin-top: 12px;
}

.section-head__meta {
  font-size: 12px;
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
  color: var(--c-muted-2);
  white-space: nowrap;
}

/* ==========================================================================
   12. REGION CARDS
   ========================================================================== */
.region-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 34px;
}

.region-card {
  position: relative;
  display: block;
  height: 380px;
  overflow: hidden;
  background: var(--c-line-2);
  border: 1px solid var(--c-line);
}

.region-card__img {
  position: absolute;
  inset: 0;
  display: block;
  background-size: cover;
  background-position: center;
  transition: transform 0.7s var(--ease);
}

.region-card:hover .region-card__img {
  transform: scale(1.06);
}

.region-card__scrim {
  position: absolute;
  inset: 0;
  display: block;
  background: linear-gradient(180deg, rgba(22, 36, 31, 0) 40%, rgba(22, 36, 31, 0.86) 100%);
}

.region-card__body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 22px;
  display: block;
}

.region-card__title {
  display: block;
  font-family: var(--font-head);
  font-size: 27px;
  color: #fff;
  line-height: 1.2;
}

.region-card__text {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: rgba(247, 242, 232, 0.78);
  line-height: 1.6;
}

.region-card__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 12px;
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--c-gold);
}

.region-card__meta i, .region-card__meta svg {
  width: 14px;
  height: 14px;
}

/* ==========================================================================
   13. TRIP LIST
   ========================================================================== */
.trip-list {
  margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 40px;
}

.trip-row {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 18px 4px;
  border-bottom: 1px solid var(--c-line-3);
}

.trip-row:hover {
  background: var(--c-hover);
}

.trip-row.is-hidden {
  display: none;
}

.trip-row__num {
  flex: none;
  font-size: 12px;
  letter-spacing: var(--track-tight);
  color: var(--c-muted-3);
  width: 34px;
}

.trip-row__main {
  flex: 1;
  min-width: 0;
  display: block;
}

.trip-row__name {
  display: block;
  font-size: 17px;
  color: var(--c-heading);
}

.trip-row__meta {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--c-muted);
  letter-spacing: 0.02em;
}

.trip-row__price {
  flex: none;
  text-align: right;
  display: block;
}

.trip-row__from {
  display: block;
  font-size: 12px;
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
  color: var(--c-muted-3);
}

.trip-row__amount {
  display: block;
  font-family: var(--font-head);
  font-size: 23px;
  color: var(--c-primary);
  white-space: nowrap;
}

.trip-row__arrow {
  flex: none;
  color: var(--c-accent);
  display: flex;
}

.trip-row__arrow i, .trip-row__arrow svg {
  width: 17px;
  height: 17px;
}

.list-toggle {
  display: flex;
  justify-content: center;
  margin-top: 28px;
}

/* ==========================================================================
   14. HOTEL / STAY CARDS
   ========================================================================== */
.hotel-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin-top: 32px;
}

.hotel-card {
  display: block;
  background: var(--c-card);
  border: 1px solid var(--c-line);
  overflow: hidden;
}

.hotel-card:hover {
  border-color: var(--c-primary);
}

.hotel-card__img {
  display: block;
  height: 210px;
  background-size: cover;
  background-position: center;
  transition: transform 0.6s var(--ease);
}

.hotel-card:hover .hotel-card__img {
  transform: scale(1.05);
}

.hotel-card__body {
  display: block;
  padding: 18px 18px 22px;
}

.hotel-card__loc {
  display: block;
  font-size: 12px;
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--c-muted-2);
}

.hotel-card__name {
  display: block;
  margin-top: 8px;
  font-family: var(--font-head);
  font-size: 21px;
  color: var(--c-heading);
  line-height: 1.25;
  min-height: 52px;
}

.hotel-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--c-line-3);
}

/* Which journey a hotel is used on. We are an operator, not a room retailer —
   these cards show where guests stay, never a nightly rate to book. */
.hotel-card__use {
  font-size: 13px;
  color: var(--c-primary);
}

/* ==========================================================================
   15. CTA BAND
   ========================================================================== */
.cta-band {
  border: 1px solid var(--c-line);
  background: var(--c-surface);
  padding: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 34px;
  flex-wrap: wrap;
}

.cta-band__text {
  max-width: 620px;
}

.cta-band__title {
  margin: 0;
  font-size: 36px;
  line-height: 1.15;
}

.cta-band__lead {
  margin: 14px 0 0;
  font-size: 15px;
  line-height: 1.8;
  color: var(--c-body);
}

.cta-band__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.cta-band--dark {
  background: var(--c-deep);
  border-color: var(--c-deep);
  color: rgba(247, 242, 232, 0.8);
}

.cta-band--dark .cta-band__title {
  color: #fff;
}

.cta-band--dark .cta-band__lead {
  color: rgba(247, 242, 232, 0.78);
}

/* ==========================================================================
   16. PAGE HERO (INNER PAGES)
   ========================================================================== */
.page-hero {
  position: relative;
  min-height: 340px;
  display: flex;
  align-items: flex-end;
  background: var(--c-deep);
  overflow: hidden;
}

.page-hero__img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

.page-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(22, 36, 31, 0.35) 0%, rgba(22, 36, 31, 0.85) 100%);
}

.page-hero__inner {
  position: relative;
  z-index: 2;
  padding-top: 60px;
  padding-bottom: 46px;
  width: 100%;
}

.page-hero__title {
  margin: 14px 0 0;
  font-size: 52px;
  color: #fff;
}

.page-hero__lead {
  margin: 16px 0 0;
  font-size: 17px;
  line-height: 1.7;
  color: rgba(247, 242, 232, 0.84);
  max-width: 620px;
}

.page-hero--plain {
  min-height: 0;
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-line-2);
}

.page-hero--plain .page-hero__inner {
  padding-top: 48px;
  padding-bottom: 40px;
}

.page-hero--plain .page-hero__title {
  color: var(--c-heading);
}

.page-hero--plain .page-hero__lead {
  color: var(--c-body);
}

/* ==========================================================================
   17. BREADCRUMB & STEPS
   ========================================================================== */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 12px;
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
  color: var(--c-muted-2);
}

.breadcrumb a {
  color: var(--c-muted-2);
}

.breadcrumb a:hover {
  color: var(--c-accent-text);
}

.breadcrumb i, .breadcrumb svg {
  width: 12px;
  height: 12px;
}

.steps {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
}

.step {
  display: flex;
  align-items: center;
  gap: 12px;
}

.step__dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex: none;
  background: transparent;
  color: var(--c-muted-2);
  border: 1px solid var(--c-line);
  transition: all var(--speed) var(--ease);
}

.step__label {
  font-size: 12px;
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--c-muted-2);
}

.step__line {
  display: block;
  width: 56px;
  height: 1px;
  background: var(--c-line);
  margin: 0 16px;
}

.step:last-child .step__line {
  display: none;
}

.step.is-done .step__dot,
.step.is-current .step__dot {
  background: var(--c-fill);
  border-color: var(--c-fill);
  color: #fff;
}

.step.is-done .step__label,
.step.is-current .step__label {
  color: var(--c-heading);
}

/* Layout */
/* ==========================================================================
   18. SIDEBAR LAYOUT & SUMMARY CARD
   ========================================================================== */
.layout-side {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 34px;
  align-items: start;
}

.layout-side--left {
  grid-template-columns: 300px 1fr;
}

/* Sidebar width modifiers. Use these instead of an inline
   grid-template-columns — inline styles beat the media queries below and
   the column never collapses on mobile. */
.layout-side--wide {
  grid-template-columns: 1fr 392px;
}

.layout-side--narrow {
  grid-template-columns: 1fr 356px;
}

.panel {
  border: 1px solid var(--c-line);
  background: var(--c-card);
  padding: 32px;
}

.panel--flush {
  padding: 0;
}

.panel--sm {
  padding: 24px;
}

.panel--lg {
  padding: 34px;
}

.panel__section {
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid var(--c-line-2);
}

.panel__section:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.summary-card {
  border: 1px solid var(--c-line);
  background: var(--c-surface);
  position: sticky;
  top: 100px;
}

.summary-card__img {
  display: block;
  height: 150px;
  background-size: cover;
  background-position: center;
}

.summary-card__body {
  padding: 24px;
}

.summary-card__title {
  margin-top: 9px;
  font-family: var(--font-head);
  font-size: 24px;
  line-height: 1.25;
  color: var(--c-heading);
}

.fact-list {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--c-line-2);
}

.fact__label {
  color: var(--c-muted);
}

.fact__value {
  color: var(--c-heading);
  text-align: right;
}

/* An outstanding balance. Was an inline var(--c-warning), which is a fill
   colour and read 3.22:1 at this size. */
.fact__value--due {
  color: var(--c-warning-text);
}

.line-list {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--c-line-strong);
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
}

.line__label {
  color: var(--c-body);
}

.line__value {
  color: var(--c-heading);
}

.line--sub .line__value {
  color: var(--c-muted);
}

.line--total .line__label,
.line--total .line__value {
  color: var(--c-heading);
  font-weight: 500;
}

.total-row {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--c-line-strong);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.total-row__label {
  font-size: 12px;
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--c-muted-2);
}

.total-row__value {
  font-family: var(--font-head);
  font-size: 34px;
  color: var(--c-accent-text);
  line-height: 1;
}

.trust-note {
  margin-top: 18px;
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  color: var(--c-muted);
}

.trust-note i, .trust-note svg {
  width: 15px;
  height: 15px;
  color: var(--c-primary);
  flex: none;
}

/* Pages */
/* ==========================================================================
   19. PAYMENT COMPONENTS
   ========================================================================== */
.method-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 16px;
}

.method {
  text-align: left;
  cursor: pointer;
  padding: 16px;
  border-radius: var(--radius);
  background: transparent;
  border: 1px solid var(--c-line);
  color: var(--c-heading);
  display: block;
  width: 100%;
  transition: all var(--speed) var(--ease);
}

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

.method.is-active {
  background: var(--c-surface);
  border-color: var(--c-primary);
}

.method__head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.method__head i, .method__head svg {
  width: 18px;
  height: 18px;
}

.method__name {
  font-size: 15px;
}

.method__note {
  display: block;
  margin-top: 7px;
  font-size: 12px;
  color: var(--c-muted);
  text-align: left;
}

.bank-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.bank {
  cursor: pointer;
  padding: 13px 10px;
  font-size: 12px;
  border-radius: var(--radius);
  background: transparent;
  border: 1px solid var(--c-line);
  color: var(--c-heading);
  transition: all var(--speed) var(--ease);
}

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

.bank.is-active {
  background: var(--c-surface);
  border-color: var(--c-primary);
}

.qr-note {
  margin-top: 26px;
  border: 1px solid var(--c-line-2);
  background: var(--c-surface);
  padding: 22px;
  display: flex;
  align-items: center;
  gap: 18px;
}

.qr-note__icon {
  width: 52px;
  height: 52px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--c-line-strong);
  color: var(--c-primary);
}

.qr-note__icon i, .qr-note__icon svg {
  width: 26px;
  height: 26px;
}

.pay-row {
  margin-top: 26px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.pay-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--c-muted);
}

.pay-hint i, .pay-hint svg {
  width: 14px;
  height: 14px;
  color: var(--c-primary);
  flex: none;
}

.pay-hint.is-warning {
  color: var(--c-warning);
  font-weight: 500;
}

.pay-hint.is-warning i, .pay-hint.is-warning svg {
  color: var(--c-warning);
}

/* Incomplete rather than disabled: the control stays clickable so pressing it
   can explain what is missing. Muted, but not dead. */
.btn.is-incomplete {
  opacity: 0.55;
}

.btn.is-incomplete:hover {
  opacity: 0.72;
}

/* Demo-data shortcut — template affordance, removed before launch */
.demo-fill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px dashed var(--c-line-strong);
  border-radius: var(--radius);
  cursor: pointer;
  padding: 10px 14px;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-primary);
  transition: all var(--speed) var(--ease);
}

.demo-fill:hover {
  border-style: solid;
  border-color: var(--c-primary);
  background: var(--c-hover);
}

.demo-fill i, .demo-fill svg {
  width: 14px;
  height: 14px;
}

.demo-note {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-top: 20px;
  padding: 14px 16px;
  border: 1px dashed var(--c-line-strong);
  border-radius: var(--radius);
  background: var(--c-surface-2);
  font-size: 12px;
  line-height: 1.65;
  color: var(--c-muted);
}

.demo-note i, .demo-note svg {
  width: 15px;
  height: 15px;
  color: var(--c-accent);
  flex: none;
  margin-top: 2px;
}

.demo-note strong {
  color: var(--c-heading);
  font-weight: 500;
}

/* 3-D Secure step */
.secure-head {
  display: flex;
  align-items: center;
  gap: 14px;
}

.secure-head__icon {
  width: 46px;
  height: 46px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--c-line);
  color: var(--c-primary);
  border-radius: var(--radius);
  background: var(--c-surface);
}

.secure-head__icon i, .secure-head__icon svg {
  width: 22px;
  height: 22px;
}

.otp-grid {
  margin-top: 24px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.otp-input {
  width: 52px;
  height: 60px;
  text-align: center;
  font-size: 22px;
  color: var(--c-ink);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  background: var(--c-card);
  outline: 0;
  transition: border-color var(--speed) var(--ease);
}

.otp-input:focus {
  border-color: var(--c-primary);
}

.otp-input.is-filled {
  border-color: var(--c-primary);
}

.otp-grid.is-error .otp-input {
  border-color: var(--c-accent);
}

.otp-hint {
  margin-top: 12px;
  font-size: 12px;
  color: var(--c-muted-2);
}

.otp-hint.is-error {
  color: var(--c-warning);
}

.link-btn {
  background: transparent;
  border: 0;
  color: var(--c-muted-2);
  font-size: 12px;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}

.link-btn:hover {
  color: var(--c-primary);
}

/* Success state */
.success {
  text-align: center;
  padding: 30px 10px;
}

.success__icon {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: var(--c-fill);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.success__icon i, .success__icon svg {
  width: 30px;
  height: 30px;
}

.success__title {
  margin: 22px 0 0;
  font-size: 34px;
}

.success__lead {
  margin: 12px auto 0;
  font-size: 15px;
  line-height: 1.8;
  color: var(--c-body);
  max-width: 460px;
}

.success__actions {
  margin-top: 26px;
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Stage visibility toggling */
[data-stage] {
  display: none;
}

[data-stage].is-active {
  display: block;
}

/* ==========================================================================
   20. TOURS LISTING & FILTERS
   ========================================================================== */
.filters {
  border: 1px solid var(--c-line);
  background: var(--c-card);
  padding: 24px;
  position: sticky;
  top: 100px;
}

.filters__group {
  padding: 20px 0;
  border-top: 1px solid var(--c-line-2);
}

.filters__group:first-of-type {
  padding-top: 0;
  border-top: 0;
}

.filters__title {
  font-size: 12px;
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--c-muted-2);
  margin-bottom: 14px;
}

.filters__options {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.results-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--c-line-2);
  flex-wrap: wrap;
}

.results-bar__count {
  font-size: 13px;
  color: var(--c-muted);
}

.results-bar__sort {
  display: flex;
  align-items: center;
  gap: 10px;
}

.results-bar__sort .select {
  width: auto;
  padding: 9px 34px 9px 12px;
  font-size: 13px;
}

.tour-list {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-top: 24px;
}

.tour-card {
  display: grid;
  grid-template-columns: 260px 1fr 210px;
  border: 1px solid var(--c-line);
  background: var(--c-card);
  overflow: hidden;
  transition: border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}

.tour-card:hover {
  border-color: var(--c-primary);
  box-shadow: var(--shadow-sm);
}

.tour-card.is-hidden {
  display: none;
}

.tour-card__media {
  position: relative;
  min-height: 230px;
  background-size: cover;
  background-position: center;
}

.tour-card__flag {
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(11, 61, 84, 0.9);
  color: #fff;
  font-size: 12px;
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
  padding: 6px 11px;
  border-radius: var(--radius-pill);
}

.tour-card__body {
  padding: 24px 26px;
  display: flex;
  flex-direction: column;
}

.tour-card__loc {
  font-size: 12px;
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--c-muted-2);
}

.tour-card__title {
  margin: 9px 0 0;
  font-size: 24px;
  line-height: 1.25;
}

.tour-card__desc {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.75;
  color: var(--c-body);
}

.tour-card__facts {
  margin-top: 14px;
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--c-muted);
}

.tour-card__facts span {
  display: flex;
  align-items: center;
  gap: 7px;
}

.tour-card__facts i, .tour-card__facts svg {
  width: 14px;
  height: 14px;
  color: var(--c-primary);
}

.tour-card__foot {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--c-line-3);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.tour-card__price-from {
  font-size: 12px;
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
  color: var(--c-muted-3);
}

.tour-card__price {
  font-family: var(--font-head);
  font-size: 26px;
  color: var(--c-primary);
  line-height: 1.1;
}

.tour-card__price small {
  font-size: 12px;
  color: var(--c-muted);
  font-family: var(--font-body);
}

/* Right-hand price column of the listing row */
.tour-card__aside {
  padding: 24px 26px;
  border-left: 1px solid var(--c-line-2);
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
}

.tour-card__aside .tour-card__price {
  font-size: 32px;
  margin-top: 5px;
}

.tour-card__aside .tour-card__view {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 18px;
  background: var(--c-accent-fill);
  color: #fff;
  font-size: 12px;
  letter-spacing: var(--track);
  text-transform: uppercase;
  padding: 12px 18px;
}

.tour-card:hover .tour-card__view {
  background: var(--c-accent-text);
}

.tour-card__aside .tour-card__view i, .tour-card__aside .tour-card__view svg {
  width: 14px;
  height: 14px;
}

/* Square meta tags used on listing rows */
.tag {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-primary);
  border: 1px solid #d7e3e9;
  padding: 5px 10px;
  display: inline-block;
}

/* Pagination — rendered by main.js from the filtered result set */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 32px;
}

.pagination button, .pagination a {
  min-width: 38px;
  height: 38px;
  border-radius: var(--radius);
  cursor: pointer;
  font-family: var(--font-head);
  font-size: 13px;
  border: 1px solid var(--c-line);
  background: transparent;
  color: var(--c-heading);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--speed) var(--ease);
}

.pagination button:hover:not(:disabled),
.pagination a:hover {
  border-color: var(--c-primary);
  color: var(--c-primary);
}

.pagination .is-active {
  background: var(--c-fill);
  border-color: var(--c-fill);
  color: #fff;
}

.pagination button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.pagination .pager-step i, .pagination .pager-step svg {
  width: 15px;
  height: 15px;
}

/* Pagination hides cards independently of filtering, so the two never
   overwrite each other's state. */
.tour-card.is-paged-out {
  display: none;
}

.empty-state {
  border: 1px dashed var(--c-line-strong);
  border-radius: var(--radius-lg);
  padding: 56px 30px;
  text-align: center;
  color: var(--c-muted);
  background: var(--c-surface-2);
}

.empty-state i, .empty-state svg {
  width: 28px;
  height: 28px;
  color: var(--c-muted-3);
  margin: 0 auto 14px;
}

.empty-state__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c-primary);
  margin-bottom: 18px;
}

.empty-state__icon i, .empty-state__icon svg {
  width: 24px;
  height: 24px;
  color: var(--c-primary);
  margin: 0;
}

.empty-state__title {
  font-size: 26px;
}

.empty-state__text {
  margin: 10px auto 0;
  max-width: 460px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--c-muted);
}

.empty-state__actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 22px;
}

/* ==========================================================================
   21. TOUR SINGLE
   ========================================================================== */
.gallery {
  display: grid;
  grid-template-columns: 2.1fr 1fr;
  grid-template-rows: 172px 172px;
  gap: 8px;
}

.gallery__item {
  background-size: cover;
  background-position: center;
  display: block;
}

.gallery__item:first-child {
  grid-row: span 2;
  min-height: 352px;
}

.gallery-thumbs {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.gallery-thumb {
  width: 92px;
  height: 62px;
  cursor: pointer;
  padding: 0;
  /* A <button> with no background-color falls back to the UA's `buttonface`,
     which is near-white and does not follow a theme — six pale tiles on a dark
     page while the photograph loads. */
  background-color: var(--c-surface-2);
  background-size: cover;
  background-position: center;
  border: 1px solid var(--c-line);
  transition: border-color var(--speed) var(--ease);
}

.gallery-thumb:hover {
  border-color: var(--c-primary);
}

.gallery-thumb.is-active {
  border-color: var(--c-accent);
}

/* Journey header actions */
.tool-btn {
  background: transparent;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: 12px 16px;
  font-size: 12px;
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
  color: var(--c-heading);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all var(--speed) var(--ease);
}

.tool-btn:hover {
  border-color: var(--c-primary);
  color: var(--c-primary);
}

.tool-btn i, .tool-btn svg {
  width: 14px;
  height: 14px;
}

/* Departure rows */
.departure {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 0;
  border-bottom: 1px solid var(--c-line-3);
  flex-wrap: wrap;
}

.departure__when {
  flex: none;
  width: 130px;
}

.departure__date {
  font-size: 15px;
  color: var(--c-heading);
}

.departure__status {
  font-size: 12px;
  color: var(--c-muted-2);
}

.departure__detail {
  flex: 1;
  font-size: 13px;
  color: var(--c-body);
  min-width: 160px;
}

.departure__price {
  flex: none;
  text-align: right;
  min-width: 110px;
}

.departure__amount {
  font-family: var(--font-head);
  font-size: 23px;
  color: var(--c-primary);
}

.departure__per {
  font-size: 12px;
  color: var(--c-muted-3);
}

.departure__cta {
  flex: none;
  background: var(--c-fill);
  color: #fff;
  font-size: 12px;
  letter-spacing: var(--track);
  text-transform: uppercase;
  padding: 13px 20px;
}

.departure__cta:hover {
  background: var(--c-primary-alt);
  color: #fff;
}

/* Sticky booking box on the journey page */
.book-box {
  border: 1px solid var(--c-line);
  background: var(--c-surface);
  padding: 28px;
  position: sticky;
  top: 100px;
}

.book-box__price {
  font-family: var(--font-head);
  font-size: 44px;
  color: var(--c-primary);
  line-height: 1;
  margin-top: 8px;
}

.book-box__rows {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.book-box__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  padding-bottom: 11px;
  border-bottom: 1px solid var(--c-line-2);
}

.book-box__row span:first-child {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--c-muted);
}

.book-box__row i, .book-box__row svg {
  width: 15px;
  height: 15px;
}

.book-box .btn {
  display: flex;
  width: 100%;
  margin-top: 10px;
}

.book-box .btn:first-of-type {
  margin-top: 24px;
}

.tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--c-line-2);
  flex-wrap: wrap;
}

.tab {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 14px 20px;
  cursor: pointer;
  font-size: 12px;
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
  color: var(--c-muted-2);
  transition: all var(--speed) var(--ease);
}

.tab:hover {
  color: var(--c-primary);
}

.tab.is-active {
  color: var(--c-heading);
  border-bottom-color: var(--c-accent-text);
}

.tab-panel {
  display: none;
  padding-top: 28px;
}

.tab-panel.is-active {
  display: block;
}

/* inside an already-padded panel the extra top padding is unwanted */
.tab-panel--flush {
  padding-top: 0;
}

.itinerary {
  display: flex;
  flex-direction: column;
}

.itin-day {
  display: flex;
  gap: 24px;
  padding: 22px 0;
  border-bottom: 1px solid var(--c-line-3);
}

.itin-day__num {
  flex: none;
  width: 74px;
  font-size: 12px;
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--c-accent-text);
  padding-top: 4px;
}

.itin-day__title {
  font-size: 21px;
  margin: 0 0 6px;
}

.itin-day__text {
  font-size: 15px;
  line-height: 1.8;
  color: var(--c-body);
  margin: 0;
}

.include-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 40px;
}

.include {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--c-body);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--c-line-3);
}

.include i, .include svg {
  width: 16px;
  height: 16px;
  color: var(--c-primary);
  flex: none;
  margin-top: 3px;
}

.include--no i, .include--no svg {
  color: var(--c-muted-3);
}

.accordion__item {
  border-bottom: 1px solid var(--c-line-2);
}

.accordion__head {
  width: 100%;
  background: transparent;
  border: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
  text-align: left;
  font-size: 17px;
  color: var(--c-heading);
  font-family: var(--font-head);
  font-weight: 500;
}

.accordion__head i, .accordion__head svg {
  width: 18px;
  height: 18px;
  color: var(--c-accent);
  flex: none;
  transition: transform var(--speed) var(--ease);
}

.accordion__item.is-open .accordion__head i,
.accordion__item.is-open .accordion__head svg {
  transform: rotate(180deg);
}

.accordion__body {
  display: none;
  padding: 0 0 22px;
  font-size: 15px;
  line-height: 1.85;
  color: var(--c-body);
}

.accordion__item.is-open .accordion__body {
  display: block;
}

.review {
  padding: 22px 0;
  border-bottom: 1px solid var(--c-line-3);
}

.review__head {
  display: flex;
  align-items: center;
  gap: 14px;
}

.review__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex: none;
  background: var(--c-fill);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-head);
  font-size: 15px;
}

.review__name {
  font-size: 15px;
  color: var(--c-heading);
}

.review__meta {
  font-size: 12px;
  color: var(--c-muted-2);
}

.review__text {
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.8;
  color: var(--c-body);
}

/* ==========================================================================
   22. AUTH & BOOKINGS
   ========================================================================== */
/* The earlier split-screen auth layout (.auth-wrap / .auth-visual / .auth-form /
   .auth-switch / .social-row) was removed: signin.html uses .art-panel and a
   plain form, so none of it was reachable. Two responsive overrides for
   .auth-wrap and .auth-visual outlived the base rules they modified and have
   now gone from base/_responsive.scss too — a media query with nothing to
   override reads like a layout that exists. */
.social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: 13px;
  font-size: 13px;
  color: var(--c-heading);
  background: var(--c-card);
  cursor: pointer;
}

.social-btn:hover {
  border-color: var(--c-primary);
  color: var(--c-primary);
}

.social-btn i, .social-btn svg {
  width: 16px;
  height: 16px;
}

.or-rule {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 22px 0;
  font-size: 12px;
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
  color: var(--c-muted-3);
}

.or-rule::before, .or-rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--c-line-2);
}

/* Booking cards */
/* .booking-card and .progress were superseded by .mb-card and .meter, which
   my-bookings.html actually uses. Removed rather than left as a second way to
   do the same thing. */
/* Components */
/* ==========================================================================
   23. CONTENT BLOCKS
   ========================================================================== */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.split__media {
  background-size: cover;
  background-position: center;
  min-height: 460px;
}

/* Named split ratios — keeps the proportions out of inline styles so the
   responsive rules can collapse them. */
.split--guide {
  grid-template-columns: 1.3fr 1fr;
  gap: 44px;
  align-items: start;
}

.split--about {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
}

/* Two-column detail grid used inside the booking drawers */
.grid--detail {
  grid-template-columns: 1.1fr 1fr;
  gap: 26px;
}

/* Auto-width stat row in the bookings header */
.grid--stats {
  grid-template-columns: repeat(3, auto);
  gap: 26px;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--c-line);
}

.stat {
  padding: 34px 28px;
  border-right: 1px solid var(--c-line-2);
}

.stat:last-child {
  border-right: 0;
}

.stat__num {
  font-family: var(--font-head);
  font-size: 42px;
  color: var(--c-primary);
  line-height: 1;
}

.stat__label {
  margin-top: 10px;
  font-size: 12px;
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
  color: var(--c-muted-2);
}

/* Overlapping fact bar used under the guide hero */
.factbar {
  margin-top: -44px;
  position: relative;
  z-index: 10;
  background: var(--c-card);
  border: 1px solid var(--c-line);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.factbar__item {
  padding: 22px 24px;
  border-right: 1px solid var(--c-line-2);
}

.factbar__item:last-child {
  border-right: 0;
}

.factbar__head {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--c-accent);
}

.factbar__head i, .factbar__head svg {
  width: 15px;
  height: 15px;
}

.factbar__label {
  font-size: 12px;
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--c-muted-2);
}

.factbar__value {
  margin-top: 10px;
  font-family: var(--font-head);
  font-size: 22px;
  color: var(--c-heading);
}

/* Destination cards */
.place-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 30px;
}

.place-card {
  border: 1px solid var(--c-line);
  background: var(--c-card);
  overflow: hidden;
}

.place-card:hover {
  border-color: var(--c-primary);
}

.place-card__img {
  height: 190px;
  background-size: cover;
  background-position: center;
  transition: transform 0.6s var(--ease);
}

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

.place-card__body {
  padding: 20px 22px 24px;
}

.place-card__region {
  font-size: 12px;
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--c-muted-2);
}

.place-card__title {
  margin: 8px 0 0;
  font-family: var(--font-head);
  font-size: 24px;
  color: var(--c-heading);
}

.place-card__text {
  margin: 9px 0 0;
  font-size: 13px;
  line-height: 1.75;
  color: var(--c-body);
}

.place-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-size: 12px;
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--c-accent-text);
}

.place-card__cta i, .place-card__cta svg {
  width: 14px;
  height: 14px;
  transition: transform var(--speed) var(--ease);
}

.place-card:hover .place-card__cta i,
.place-card:hover .place-card__cta svg {
  transform: translateX(3px);
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.feature {
  border: 1px solid var(--c-line);
  padding: 30px 28px;
  background: var(--c-card);
}

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

/* Square well, matching the reference design — page-content icon wells are
   never rounded; only the footer contact strip is. */
.feature__icon {
  width: 46px;
  height: 46px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--c-line-strong);
  color: var(--c-primary);
}

.feature__icon i, .feature__icon svg {
  width: 21px;
  height: 21px;
}

/* Icon beside the heading, not stacked above it — same reasoning as .cell__head.
   The decorative icon sits after the heading in markup and is pulled left with
   order, so a screen reader reaches the title first. */
.feature__head {
  display: flex;
  align-items: center;
  gap: 14px;
}

.feature__head .feature__icon {
  order: -1;
}

.feature__head .feature__title {
  margin: 0;
}

.feature__title {
  margin: 18px 0 0;
  font-size: 20px;
}

.feature__text {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.8;
  color: var(--c-body);
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.team-card {
  border: 1px solid var(--c-line);
  background: var(--c-card);
}

.team-card__img {
  height: 260px;
  background-size: cover;
  background-position: center;
}

.team-card__body {
  padding: 20px;
}

.team-card__name {
  font-size: 21px;
  margin: 0;
}

.team-card__role {
  margin-top: 5px;
  font-size: 12px;
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
  color: var(--c-accent-text);
}

.team-card__text {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.75;
  color: var(--c-body);
}

.timeline {
  border-left: 1px solid var(--c-line);
  padding-left: 34px;
}

.timeline__item {
  position: relative;
  padding-bottom: 34px;
}

.timeline__item::before {
  content: "";
  position: absolute;
  left: -40px;
  top: 6px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--c-white);
  border: 2px solid var(--c-accent);
}

.timeline__year {
  font-family: var(--font-head);
  font-size: 13px;
  letter-spacing: var(--track-tight);
  color: var(--c-accent-text);
}

.timeline__title {
  margin: 6px 0 0;
  font-size: 19px;
}

.timeline__text {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.8;
  color: var(--c-body);
}

.month-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.month-table th, .month-table td {
  text-align: left;
  padding: 14px 16px;
  border-bottom: 1px solid var(--c-line-2);
}

.month-table th {
  font-size: 12px;
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
  color: var(--c-muted-2);
  font-weight: 500;
  background: var(--c-surface);
}

.month-table td {
  color: var(--c-body);
}

.month-table tbody tr:hover {
  background: var(--c-hover);
}

.rating-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 4px;
  background: var(--c-line);
}

.rating-dot.is-on {
  background: var(--c-accent);
}

.price-card {
  border: 1px solid var(--c-line);
  background: var(--c-card);
  padding: 34px 30px;
  display: flex;
  flex-direction: column;
}

.price-card.is-featured {
  border-color: var(--c-primary);
  box-shadow: var(--shadow-md);
}

.price-card__name {
  font-size: 22px;
  margin: 0;
}

.price-card__price {
  margin: 16px 0 0;
  font-family: var(--font-head);
  font-size: 40px;
  color: var(--c-primary);
  line-height: 1;
}

.price-card__price small {
  font-size: 13px;
  color: var(--c-muted);
  font-family: var(--font-body);
}

.price-card__list {
  margin: 22px 0 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.price-card__list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--c-body);
}

.price-card__list i, .price-card__list svg {
  width: 15px;
  height: 15px;
  color: var(--c-primary);
  flex: none;
  margin-top: 4px;
}

.price-card .btn {
  margin-top: 26px;
}

/* Pages */
/* ==========================================================================
   24. CONTACT
   ========================================================================== */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 40px;
  align-items: start;
}

.info-card {
  border: 1px solid var(--c-line);
  background: var(--c-surface);
  padding: 30px;
}

.info-item {
  display: flex;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--c-line-2);
}

.info-item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.info-item__icon {
  width: 38px;
  height: 38px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--c-line-strong);
  color: var(--c-primary);
  background: var(--c-card);
}

.info-item__icon i, .info-item__icon svg {
  width: 19px;
  height: 19px;
}

.info-item__label {
  font-size: 12px;
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--c-muted-2);
}

.info-item__value {
  margin-top: 3px;
  font-size: 15px;
  color: var(--c-heading);
}

.map-embed {
  border: 1px solid var(--c-line);
  background: var(--c-surface);
  height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-muted-2);
  font-size: 13px;
  text-align: center;
  padding: 20px;
  background-size: cover;
  background-position: center;
}

.form-note {
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: var(--radius);
  font-size: 13px;
  display: none;
}

.form-note.is-visible {
  display: block;
}

.form-note--ok {
  background: rgba(31, 122, 90, 0.1);
  color: var(--c-success);
}

.form-note--err {
  background: rgba(179, 64, 47, 0.08);
  color: var(--c-error);
}

/* Layout */
/* ==========================================================================
   25. CONTACT STRIP & FOOTER
   ========================================================================== */
.contact-strip {
  background: var(--c-surface);
  border-top: 1px solid var(--c-line-2);
}

.contact-strip__inner {
  padding-top: 38px;
  padding-bottom: 38px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.contact-strip__item {
  display: flex;
  align-items: center;
  gap: 16px;
}

.contact-strip__icon {
  width: 42px;
  height: 42px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--c-line-strong);
  color: var(--c-primary);
  border-radius: var(--radius);
}

.contact-strip__icon i, .contact-strip__icon svg {
  width: 19px;
  height: 19px;
}

.contact-strip__label {
  display: block;
  font-size: 12px;
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--c-muted-2);
}

.contact-strip__value {
  display: block;
  margin-top: 3px;
  font-size: 15px;
  color: var(--c-heading);
}

.site-footer {
  background: var(--c-deep);
  color: var(--c-on-dark);
}

.site-footer__inner {
  padding-top: 58px;
  padding-bottom: 30px;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 40px;
}

.site-footer__about {
  margin: 18px 0 0;
  font-size: 15px;
  line-height: 1.8;
  max-width: 380px;
}

/* Always the white colourway — the footer ground is dark in both themes. */
.site-footer__logo {
  display: block;
  width: 127px;
  height: auto;
}

.footer-col__title {
  margin: 0 0 16px;
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: #fff;
}

.footer-col__links {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.footer-col__links a {
  font-size: 15px;
  color: var(--c-on-dark);
}

.footer-col__links a:hover {
  color: var(--c-gold);
}

.social {
  margin-top: 20px;
  display: flex;
  gap: 10px;
}

.social a {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(247, 242, 232, 0.2);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.social a:hover {
  border-color: var(--c-gold);
  color: var(--c-gold);
}

.social i, .social svg {
  width: 17px;
  height: 17px;
}

.site-footer__bottom {
  border-top: 1px solid rgba(247, 242, 232, 0.12);
}

.site-footer__bottom-inner {
  padding-top: 20px;
  padding-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font-size: 12px;
  color: var(--c-muted-2);
}

/* Financial-protection wording is a sentence, not a micro-label — see .topbar__inner. */
.site-footer__creds {
  letter-spacing: 0.02em;
  font-size: 12px;
}

/* Demo-only: the route to the template's own docs. Marked in the markup for
   deletion, and styled quietly so it never reads as site navigation. */
.demo-doc-link {
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--c-muted-2);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.demo-doc-link:hover {
  color: var(--c-on-dark);
}

.newsletter {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}

.newsletter .input {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(247, 242, 232, 0.2);
  color: #fff;
}

.newsletter .input::-moz-placeholder {
  color: rgba(185, 199, 207, 0.7);
}

.newsletter .input::placeholder {
  color: rgba(185, 199, 207, 0.7);
}

/* Components */
/* ==========================================================================
   26. CHAT WIDGET
   ========================================================================== */
.chat-dock {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
}

.chat-panel {
  display: none;
  flex-direction: column;
  width: 352px;
  height: 452px;
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.chat-panel.is-open {
  display: flex;
  animation: pop 0.22s var(--ease) both;
}

.chat-head {
  /* --c-fill, not --c-primary: this carries white text. */
  background: var(--c-fill);
  color: #fff;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.chat-head__who {
  display: flex;
  align-items: center;
  gap: 11px;
}

.chat-head__avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--c-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-deep);
  flex: none;
}

.chat-head__avatar i, .chat-head__avatar svg {
  width: 17px;
  height: 17px;
}

.chat-head__name {
  display: block;
  font-size: 15px;
  font-weight: 500;
}

.chat-head__status {
  display: block;
  font-size: 12px;
  color: rgba(247, 242, 232, 0.7);
}

.chat-head__close {
  background: transparent;
  border: 0;
  color: rgba(247, 242, 232, 0.8);
  cursor: pointer;
  padding: 4px;
  display: flex;
}

.chat-head__close:hover {
  color: #fff;
}

.chat-head__close i, .chat-head__close svg {
  width: 18px;
  height: 18px;
}

.chat-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--c-card);
}

.bubble {
  max-width: 86%;
  padding: 10px 13px;
  font-size: 13px;
  line-height: 1.6;
}

.bubble--them {
  align-self: flex-start;
  background: var(--c-surface);
  color: var(--c-heading);
  border-radius: 12px 12px 12px 3px;
}

.bubble--me {
  align-self: flex-end;
  max-width: 82%;
  background: var(--c-fill);
  color: #fff;
  border-radius: 12px 12px 3px 12px;
}

/* No background of its own: .chat-panel already paints --c-card, and this strip
   sits outside .chat-body's scroll area, so nothing ever passes under it. */
.chat-foot {
  padding: 12px 14px;
  border-top: 1px solid var(--c-line-2);
}

.chat-quick {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.chat-quick .chip {
  font-size: 12px;
  padding: 6px 12px;
}

.chat-input-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.chat-input-row .input {
  padding: 11px 12px;
  font-size: 15px;
}

.chat-send {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: var(--radius);
  background: var(--c-accent-fill);
  color: #fff;
  cursor: pointer;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chat-send:hover {
  background: var(--c-accent-text);
}

.chat-send i, .chat-send svg {
  width: 17px;
  height: 17px;
}

.chat-fab {
  position: relative;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  background: var(--c-fill);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 28px rgba(22, 36, 31, 0.28);
  transition: background var(--speed) var(--ease);
}

.chat-fab:hover {
  background: var(--c-primary-alt);
}

.chat-fab.is-open {
  background: var(--c-deep);
}

.chat-fab i, .chat-fab svg {
  width: 23px;
  height: 23px;
}

.chat-fab__dot {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--c-gold);
  border: 2px solid #fff;
}

.chat-fab.is-open .chat-fab__dot,
.chat-fab.is-read .chat-fab__dot {
  display: none;
}

/* Back to top */
.to-top {
  position: fixed;
  right: 24px;
  bottom: 96px;
  z-index: 80;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--c-card);
  border: 1px solid var(--c-line);
  color: var(--c-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  box-shadow: var(--shadow-sm);
  transition: opacity var(--speed) var(--ease), visibility var(--speed) var(--ease);
}

.to-top.is-visible {
  opacity: 1;
  visibility: visible;
}

.to-top i, .to-top svg {
  width: 18px;
  height: 18px;
}

/* ==========================================================================
   26b. SOURCE-DESIGN PRIMITIVES
   --------------------------------------------------------------------------
   Patterns lifted directly from the reference design. These are load-bearing
   to its visual identity — collapsed-border cell grids, square icon wells,
   initials avatars and the dark section band.
   ========================================================================== */
/* --- Dark section band (Services / Contact / Journeys / My bookings) ----- */
/* The band owns everything inside it. Pages that reimplemented this background
   inline then had to re-colour the breadcrumb and the h1 by hand on every
   page — the block class is what makes those compensations unnecessary. */
.band-dark {
  background: var(--c-deep);
  color: #fff;
}

.band-dark h1, .band-dark h2 {
  color: #fff;
}

.band-dark .breadcrumb a {
  color: var(--c-on-dark);
}

.band-dark__inner {
  padding-top: 52px;
  padding-bottom: 56px;
}

.band-dark__inner--sm {
  padding-top: 36px;
  padding-bottom: 38px;
}

.band-dark__lead {
  margin: 16px 0 0;
  font-size: 17px;
  line-height: 1.7;
  color: rgba(247, 242, 232, 0.82);
  max-width: 640px;
}

/* Gold rule + label, the design's standard kicker on dark grounds */
.kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--c-gold);
}

.kicker::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--c-gold);
  display: block;
  flex: none;
}

.kicker--accent {
  color: var(--c-accent-text);
}

.kicker--accent::before {
  background: var(--c-accent);
}

/* --- Collapsed-border cell grid ----------------------------------------
   The design overlaps cell borders with a -0.5px margin and gap:0 so
   adjacent cells share a single hairline. Do not swap this for gap+border:
   the doubled seam is visibly different.                                  */
.cell-grid {
  display: grid;
  gap: 0;
}

.cell-grid > * {
  border: 1px solid var(--c-line);
  margin: -0.5px;
  background: var(--c-card);
}

.cell-grid--2 {
  grid-template-columns: repeat(2, 1fr);
}

.cell-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

.cell-grid--4 {
  grid-template-columns: repeat(4, 1fr);
}

.cell {
  padding: 30px;
}

.cell--lg {
  padding: 32px;
}

.cell--surface {
  background: var(--c-surface);
}

.cell--hover:hover {
  background: var(--c-hover);
}

/* Icon beside the heading, not stacked above it. A small square icon tile sitting
   on top of a title is the stock feature-card shape every generator emits; setting
   them on one line reads as authored and saves a row of vertical space. */
/* The icon is decorative, so it sits AFTER the heading in the markup — a
   screen reader reaches the heading first — and is pulled back to the left
   visually with order. That also stops it reading as an icon tile stacked
   above a title, which is the stock generated feature-card shape. */
.cell__head {
  display: flex;
  align-items: center;
  gap: 14px;
}

.cell__head .cell__title {
  margin: 0;
}

.cell__head .icon-box {
  order: -1;
}

.cell__title {
  margin: 16px 0 0;
  font-size: 21px;
  letter-spacing: -0.01em;
}

.cell__text {
  margin: 9px 0 0;
  font-size: 13px;
  line-height: 1.8;
  color: var(--c-body);
}

.cell__stat {
  font-family: var(--font-head);
  font-size: 40px;
  color: var(--c-primary);
  line-height: 1;
}

.cell__stat-label {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--c-muted);
}

/* --- Square icon well ---------------------------------------------------
   Page-content icon wells are SQUARE in the reference design. Only the
   footer contact strip uses a rounded well — keep the two distinct.       */
.icon-box {
  width: 42px;
  height: 42px;
  flex: none;
  border: 1px solid var(--c-line-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-primary);
}

.icon-box i, .icon-box svg {
  width: 19px;
  height: 19px;
}

.icon-box--lg {
  width: 44px;
  height: 44px;
}

.icon-box--lg i, .icon-box--lg svg {
  width: 20px;
  height: 20px;
}

.icon-box--sm {
  width: 38px;
  height: 38px;
}

.icon-box--sm i, .icon-box--sm svg {
  width: 17px;
  height: 17px;
}

/* --- Initials avatar (team, account) ------------------------------------ */
.avatar {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  flex: none;
  background: var(--c-surface);
  border: 1px solid var(--c-line-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-head);
  font-size: 20px;
  color: var(--c-primary);
}

.avatar--solid {
  background: var(--c-fill);
  border-color: var(--c-fill);
  color: #fff;
}

.avatar--sm {
  width: 48px;
  height: 48px;
  font-size: 17px;
  font-weight: 600;
}

/* --- Numbered step list (Services) -------------------------------------- */
.step-list__item {
  display: flex;
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid var(--c-line-3);
}

.step-list__num {
  flex: none;
  width: 38px;
  /* --c-gold is 1.8:1 on white. At 26px this counts as large text, so the
     darker sibling clears the 3:1 bar while still reading as gold. */
  font-family: var(--font-head);
  font-size: 26px;
  color: var(--c-gold-text);
  line-height: 1.1;
}

.step-list__title {
  font-size: 17px;
  color: var(--c-heading);
  margin: 0;
}

.step-list__text {
  margin: 5px 0 0;
  font-size: 15px;
  line-height: 1.75;
  color: var(--c-body);
}

/* --- Plus-toggle accordion (booking conditions) --------------------------
   The reference rotates a plus 45° into a cross. Distinct from the
   chevron accordion used on the journey page.                             */
.acc-plus {
  border: 1px solid var(--c-line);
  background: var(--c-card);
}

.acc-plus__item {
  border-bottom: 1px solid var(--c-line-2);
}

.acc-plus__item:last-child {
  border-bottom: 0;
}

.acc-plus__head {
  width: 100%;
  background: transparent;
  border: 0;
  font-family: inherit;
  text-align: left;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  font-size: 17px;
  color: var(--c-heading);
}

.acc-plus__head:hover {
  background: var(--c-hover);
}

.acc-plus__icon {
  flex: none;
  display: flex;
  color: var(--c-muted-3);
  transition: transform 0.25s var(--ease), color 0.25s var(--ease);
}

.acc-plus__icon i, .acc-plus__icon svg {
  width: 17px;
  height: 17px;
}

.acc-plus__item.is-open .acc-plus__icon {
  transform: rotate(45deg);
  color: var(--c-accent-text);
}

/* Animated with grid-template-rows rather than max-height: no magic pixel
   ceiling to overflow, and it animates to the content's real height. */
/* Collapsed height is driven by max-height, set from scrollHeight in JS so
   there is no magic ceiling to overflow. The grid-rows approach was tried and
   reverted: the child's own vertical padding still occupies the 0fr row, which
   leaked the first line of every panel. */
.acc-plus__body {
  overflow: hidden;
  max-height: 0;
  /* grid-template-rows:0fr was tried and reverted: it does not fully collapse, the
     child's vertical padding keeps the row open and leaks the first line of content.
     Height is measured from scrollHeight in JS. */
  /* impeccable-disable-next-line layout-transition */
  transition: max-height 0.34s var(--ease);
}

.acc-plus__body p {
  margin: 0;
  padding: 0 24px 22px;
  font-size: 15px;
  line-height: 1.85;
  color: var(--c-body);
  max-width: 860px;
}

/* --- Download / brochure card ------------------------------------------- */
.dl-card {
  display: flex;
  gap: 20px;
  border: 1px solid var(--c-line);
  padding: 20px;
  background: var(--c-card);
}

.dl-card:hover {
  border-color: var(--c-primary);
  background: var(--c-hover);
}

.dl-card__thumb {
  flex: none;
  width: 78px;
  height: 106px;
  display: block;
  background-size: cover;
  background-position: center;
  border: 1px solid var(--c-line);
}

.dl-card__title {
  display: block;
  font-family: var(--font-head);
  font-size: 21px;
  color: var(--c-heading);
  line-height: 1.25;
}

.dl-card__meta {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--c-muted-2);
}

.dl-card__cta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  /* --c-accent is a 2.55:1 border/icon colour. As text it fails AA, which is
     what --c-accent-text exists for — the sibling .place-card__cta gets this right. */
  font-size: 12px;
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--c-accent-text);
}

.dl-card__cta i, .dl-card__cta svg {
  width: 14px;
  height: 14px;
}

/* --- Segmented control (sign in / register) ----------------------------- */
.segmented {
  display: flex;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  overflow: hidden;
  width: -moz-fit-content;
  width: fit-content;
}

.segmented button {
  border: 0;
  cursor: pointer;
  font-family: var(--font-head);
  font-size: 12px;
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
  padding: 13px 22px;
  background: transparent;
  color: var(--c-muted);
  transition: all var(--speed) var(--ease);
}

.segmented button:hover {
  color: var(--c-primary);
}

/* --c-fill, not --c-primary. Anything sitting WHITE text on a solid takes the
   fill token; --c-primary is also read as text, so the dark theme lifts it to
   a value white cannot sit on — this measured 2.98:1 there. */
.segmented button.is-active {
  background: var(--c-fill);
  color: #fff;
}

/* --- Filter pills (my bookings) ----------------------------------------- */
.pill {
  cursor: pointer;
  font-size: 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--c-line);
  transition: all var(--speed) var(--ease);
  font-family: var(--font-head);
  padding: 10px 18px;
  background: transparent;
  color: var(--c-muted);
}

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

.pill.is-active {
  background: var(--c-fill);
  border-color: var(--c-fill);
  color: #fff;
}

/* --- Region toggle chips (contact) -------------------------------------- */
.chip-toggle {
  cursor: pointer;
  font-size: 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--c-line);
  transition: all var(--speed) var(--ease);
  padding: 9px 15px;
  background: transparent;
  color: var(--c-heading);
}

.chip-toggle:hover {
  border-color: var(--c-primary);
}

.chip-toggle.is-active {
  background: var(--c-fill);
  border-color: var(--c-fill);
  color: #fff;
}

/* --- Duty-phone panel (contact) ----------------------------------------- */
.duty {
  margin-top: 20px;
  background: var(--c-deep);
  padding: 26px;
  color: var(--c-on-dark);
}

.duty__head {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 15px;
  color: #fff;
}

.duty__head i, .duty__head svg {
  width: 17px;
  height: 17px;
  color: var(--c-gold);
}

.duty__text {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.75;
}

.duty__cta {
  margin-top: 16px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--c-gold);
  color: var(--c-deep);
  font-size: 12px;
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
  padding: 13px 22px;
}

.duty__cta:hover {
  background: var(--c-card);
  color: var(--c-heading);
}

.duty__cta i, .duty__cta svg {
  width: 15px;
  height: 15px;
}

/* --- Manage-booking card (my bookings) ---------------------------------- */
.mb-card {
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--c-card);
}

.mb-card__head {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px 22px;
  flex-wrap: wrap;
}

.mb-card__thumb {
  flex: none;
  width: 96px;
  height: 72px;
  border-radius: var(--radius);
  display: block;
  background-size: cover;
  background-position: center;
}

.mb-card__main {
  flex: 1;
  min-width: 0;
}

.mb-card__ref {
  font-size: 12px;
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
  color: var(--c-muted-2);
}

.mb-card__title {
  margin: 7px 0 0;
  font-size: 19px;
  font-weight: 600;
  color: var(--c-ink);
  letter-spacing: -0.01em;
}

.mb-card__meta {
  margin: 5px 0 0;
  font-size: 13px;
  color: var(--c-muted);
}

.mb-card__money {
  flex: none;
  text-align: right;
}

.mb-card__money-label {
  font-size: 12px;
  color: var(--c-muted-3);
}

.mb-card__amount {
  font-size: 22px;
  font-weight: 600;
  color: var(--c-primary);
}

.mb-card__note {
  font-size: 12px;
  color: var(--c-muted-2);
}

/* see note on .acc-plus__body — max-height driven from scrollHeight in JS */
.mb-card__body {
  overflow: hidden;
  max-height: 0;
  /* see .acc-plus__body: the grid collapse leaks the first line, so these drawers
     animate a measured max-height too. */
  /* impeccable-disable-next-line layout-transition */
  transition: max-height 0.38s var(--ease);
}

.mb-card__panel {
  border-top: 1px solid var(--c-line-2);
  padding: 22px;
  background: var(--c-surface-2);
}

.status {
  font-size: 12px;
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: var(--radius-pill);
}

/* Tint and text come as a pair from §01 — see the note there on why the page's
   own neutrals do not clear 4.5:1 on these tints, and why they are tokens. */
.status--deposit {
  background: var(--tint-info);
  color: var(--tint-info-text);
}

.status--awaiting {
  background: var(--tint-warn);
  color: var(--tint-warn-text);
}

.status--done {
  background: var(--tint-neutral);
  color: var(--tint-neutral-text);
}

.status--cancel {
  background: var(--tint-alert);
  color: var(--tint-alert-text);
}

.meter {
  height: 6px;
  background: var(--c-line-2);
  border-radius: 99px;
  overflow: hidden;
}

.meter__bar {
  display: block;
  height: 6px;
  border-radius: 99px;
  background: var(--c-primary);
}

.meter__bar--muted {
  background: var(--c-line-strong);
}

/* --- Support strip ------------------------------------------------------ */
.support-strip {
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  padding: 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  flex-wrap: wrap;
  background: var(--c-surface);
}

.support-strip__icon {
  width: 44px;
  height: 44px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--c-line);
  color: var(--c-primary);
  border-radius: var(--radius);
  background: var(--c-card);
}

.support-strip__icon i, .support-strip__icon svg {
  width: 20px;
  height: 20px;
}

/* --- Company details band (about) --------------------------------------- */
.company-band {
  border: 1px solid var(--c-line);
  background: var(--c-surface);
  padding: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}

.company-band__text {
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.9;
  color: var(--c-body);
}

/* --- Art panel with overlay card (sign in) ------------------------------ */
.art-panel {
  min-height: 520px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: flex-end;
  padding: 30px;
  background-size: cover;
  background-position: center;
  background-color: var(--c-deep);
}

.art-panel__card {
  background: rgba(11, 61, 84, 0.82);
  color: #fff;
  padding: 30px;
  max-width: 360px;
  border-radius: var(--radius-lg);
}

.art-panel__list {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.art-panel__list > div {
  display: flex;
  gap: 11px;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
}

.art-panel__list i, .art-panel__list svg {
  width: 15px;
  height: 15px;
  color: var(--c-gold);
  flex: none;
  margin-top: 2px;
}

/* ==========================================================================
   26c. COMPARE TRAY
   --------------------------------------------------------------------------
   Select up to three journeys and put them side by side. Everything is read
   from the data-* attributes already on each card, so there is no separate
   data source to maintain. Injected by main.js — progressive enhancement.
   ========================================================================== */
.compare-toggle {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--c-on-photo);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-pill);
  padding: 7px 12px 7px 9px;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-heading);
  cursor: pointer;
  transition: all var(--speed) var(--ease);
}

.compare-toggle:hover {
  border-color: var(--c-primary);
  color: var(--c-primary);
}

.compare-toggle__box {
  width: 15px;
  height: 15px;
  flex: none;
  border: 1.5px solid var(--c-muted-3);
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.compare-toggle__box i, .compare-toggle__box svg {
  width: 11px;
  height: 11px;
  color: #fff;
  opacity: 0;
}

.compare-toggle.is-on {
  background: var(--c-fill);
  border-color: var(--c-fill);
  color: #fff;
}

.compare-toggle.is-on .compare-toggle__box {
  background: var(--c-card);
  border-color: #fff;
}

.compare-toggle.is-on .compare-toggle__box i,
.compare-toggle.is-on .compare-toggle__box svg {
  color: var(--c-primary);
  opacity: 1;
}

/* --- the tray ------------------------------------------------------------ */
.compare-tray {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 85;
  background: var(--c-deep);
  color: #fff;
  /* No hairline. A sheet lifting off the page is defined by its elevation;
     an edge as well is the belt-and-braces look that reads as generated. */
  transform: translateY(100%);
  transition: transform 0.34s var(--ease);
  box-shadow: 0 -6px 16px rgba(8, 21, 28, 0.26);
}

.compare-tray.is-open {
  transform: none;
}

.compare-tray__inner {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  padding-top: 16px;
  padding-bottom: 16px;
}

.compare-tray__label {
  font-size: 12px;
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--c-gold);
}

.compare-tray__slots {
  display: flex;
  gap: 10px;
  flex: 1;
  flex-wrap: wrap;
}

.compare-slot {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: var(--radius);
  padding: 8px 10px 8px 8px;
  font-size: 13px;
  max-width: 260px;
}

.compare-slot__thumb {
  width: 40px;
  height: 30px;
  border-radius: 4px;
  flex: none;
  background-size: cover;
  background-position: center;
}

.compare-slot__name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
}

.compare-slot__drop {
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  padding: 2px;
  display: flex;
  flex: none;
}

.compare-slot__drop:hover {
  color: #fff;
}

.compare-slot__drop i, .compare-slot__drop svg {
  width: 14px;
  height: 14px;
}

.compare-slot--empty {
  border: 1px dashed rgba(255, 255, 255, 0.22);
  background: transparent;
  /* .45 measured 3.64:1 at 13px on the deep tray. */
  color: rgba(255, 255, 255, 0.66);
  padding: 12px 16px;
}

.compare-tray__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* --- the comparison sheet ------------------------------------------------ */
.compare-sheet {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(8, 21, 28, 0.62);
}

.compare-sheet.is-open {
  display: flex;
  animation: pop 0.24s var(--ease) both;
}

.compare-sheet__panel {
  background: var(--c-card);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 940px;
  max-height: 88vh;
  overflow: auto;
  box-shadow: var(--shadow-lg);
}

.compare-sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 26px;
  border-bottom: 1px solid var(--c-line-2);
  position: sticky;
  top: 0;
  background: var(--c-card);
  z-index: 2;
}

.compare-sheet__close {
  width: 38px;
  height: 38px;
  border-radius: var(--radius);
  border: 1px solid var(--c-line);
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-heading);
}

.compare-sheet__close:hover {
  border-color: var(--c-primary);
  color: var(--c-primary);
}

.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

.compare-table th, .compare-table td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--c-line-2);
  text-align: left;
  vertical-align: top;
}

.compare-table thead th {
  background: var(--c-surface);
  vertical-align: bottom;
}

.compare-table tbody th {
  font-size: 12px;
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
  color: var(--c-muted-2);
  font-weight: 500;
  white-space: nowrap;
  width: 170px;
}

.compare-table__media {
  height: 84px;
  border-radius: var(--radius);
  margin-bottom: 10px;
  background-size: cover;
  background-position: center;
}

.compare-table__name {
  font-family: var(--font-head);
  font-size: 17px;
  color: var(--c-heading);
  line-height: 1.3;
}

.compare-table .is-best {
  color: var(--c-primary);
  font-weight: 600;
}

.compare-table .is-best::after {
  content: "best";
  margin-left: 8px;
  font-size: 12px;
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
  color: var(--c-accent);
  font-weight: 500;
}

@media (max-width: 768px) {
  .compare-tray__inner {
    padding-top: 12px;
    padding-bottom: 12px;
    gap: 12px;
  }
  .compare-tray__label {
    width: 100%;
  }
  .compare-slot__name {
    max-width: 90px;
  }
  .compare-tray__actions {
    width: 100%;
  }
  .compare-tray__actions .btn {
    flex: 1;
  }
  .compare-sheet {
    padding: 0;
  }
  .compare-sheet__panel {
    max-height: 100vh;
    border-radius: 0;
  }
  .compare-table th, .compare-table td {
    padding: 11px 12px;
    font-size: 13px;
  }
  .compare-table tbody th {
    width: 104px;
    font-size: 12px;
  }
  /* keep the tray clear of the chat dock */
  .chat-dock {
    bottom: 92px;
  }
}
/* ==========================================================================
   26d. SEASON PICKER
   --------------------------------------------------------------------------
   Turns "when you go decides where you go" into an actual control: pick a
   month and the destination cards re-rank for it. Scores live in a
   data-months attribute on each card.
   ========================================================================== */
.season-picker {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 26px;
  padding: 18px 20px;
  border: 1px solid var(--c-line);
  background: var(--c-surface);
  border-radius: var(--radius);
}

.season-picker__label {
  font-size: 12px;
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--c-muted-2);
  flex: none;
}

.season-picker__months {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  flex: 1;
}

.season-chip {
  cursor: pointer;
  font-size: 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--c-line);
  transition: all var(--speed) var(--ease);
  background: var(--c-card);
  padding: 7px 13px;
  color: var(--c-body);
}

.season-chip:hover {
  border-color: var(--c-primary);
  color: var(--c-primary);
}

.season-chip.is-active {
  background: var(--c-fill);
  border-color: var(--c-fill);
  color: #fff;
}

.season-picker__note {
  margin: 0;
  font-size: 12px;
  color: var(--c-muted);
  flex-basis: 100%;
}

/* Verdict badge stamped onto each card when a month is chosen */
.place-card__season {
  display: none;
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  font-size: 12px;
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
  padding: 6px 11px;
  border-radius: var(--radius-pill);
  background: var(--c-on-photo);
  color: var(--c-heading);
}

.place-card {
  position: relative;
}

.place-card.has-season .place-card__season {
  display: inline-block;
}

.place-card__season[data-score="3"] {
  background: var(--c-fill);
  color: #fff;
}

.place-card__season[data-score="2"] {
  background: var(--c-gold);
  color: var(--c-deep);
}

.place-card__season[data-score="1"] {
  background: var(--c-on-photo);
  color: var(--c-muted);
}

.place-card__season[data-score="0"] {
  background: var(--c-on-photo);
  color: var(--c-warning);
}

/* Poor months recede rather than disappear — the place still exists */
.place-card.is-offseason {
  opacity: 0.48;
}

.place-card.is-offseason:hover {
  opacity: 0.8;
}

@media (max-width: 768px) {
  .season-picker {
    gap: 12px;
    padding: 14px;
  }
  .season-picker__months {
    gap: 5px;
  }
  .season-chip {
    padding: 9px 11px;
    min-height: 40px;
  }
}
/* ==========================================================================
   LEGAL & POLICY PAGES
   --------------------------------------------------------------------------
   Terms, privacy, cookies and the accessibility statement share one prose
   shell. These pages are read, not scanned, so the measure is narrower than
   the rest of the site and the rhythm is looser.

   Nothing here is legal advice, and the copy in these pages is placeholder
   text a buyer must replace — that is stated on each page rather than left
   for someone to discover.
   ========================================================================== */
.legal {
  max-width: 760px;
}

.legal__updated {
  margin: 0 0 32px;
  font-size: 13px;
  color: var(--c-muted-2);
}

.legal h2 {
  margin: 44px 0 0;
  font-size: 26px;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.legal h2:first-of-type {
  margin-top: 0;
}

.legal h3 {
  margin: 28px 0 0;
  font-size: 17px;
  line-height: 1.35;
}

.legal p {
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.85;
  color: var(--c-body);
}

.legal ul {
  margin: 12px 0 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.legal li {
  font-size: 15px;
  line-height: 1.75;
  color: var(--c-body);
}

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

.legal a {
  color: var(--c-accent-text);
}

/* A definition-style row for "what we collect / why" tables, which read better
   than a real table on a phone. */
.legal-defs {
  margin: 16px 0 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--c-line-2);
}

.legal-def {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 20px;
  padding: 14px 0;
  border-bottom: 1px solid var(--c-line-2);
}

.legal-def__term {
  font-size: 14px;
  color: var(--c-ink);
}

.legal-def__desc {
  font-size: 14px;
  line-height: 1.7;
  color: var(--c-body);
}

/* The buyer-facing warning that this copy is a starting point, not advice.
   A hairline all round rather than a thick coloured stripe down one side —
   the stripe is the most recognisable generated-UI tell there is, and the
   tinted ground already separates this from the prose. */
.legal-note {
  margin: 0 0 32px;
  padding: 16px 18px;
  border: 1px solid var(--c-line);
  background: var(--c-surface);
  font-size: 14px;
  line-height: 1.7;
  color: var(--c-body);
}

.legal-note strong {
  display: block;
  margin-bottom: 4px;
  color: var(--c-ink);
}

@media (max-width: 600px) {
  .legal-def {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }
}
/* ==========================================================================
   SPECIMEN — the components page only
   --------------------------------------------------------------------------
   Scaffolding for components.html: a labelled frame around each component so
   a buyer can see the thing and the class name that makes it at the same
   time. Nothing here styles the components themselves.

   Safe to delete along with components.html if you do not want to ship the
   showcase to your own visitors.
   ========================================================================== */
.spec {
  border: 1px solid var(--c-line);
  background: var(--c-card);
  margin-top: 20px;
}

.spec__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 12px 18px;
  border-bottom: 1px solid var(--c-line-2);
  background: var(--c-surface);
}

.spec__name {
  font-family: var(--font-head);
  font-size: 15px;
  color: var(--c-heading);
}

/* The class a buyer copies. Monospace, selectable, quiet. */
.spec__class {
  font-family: ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  color: var(--c-accent-text);
  word-break: break-all;
}

.spec__body {
  padding: 26px 24px;
}

/* A row of variants sitting side by side — buttons, badges, avatars. */
.spec__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

/* A positioned stage for components that anchor to their card rather than sit
   in the flow. The compare toggle is absolute, top-right; dropped into a bare
   row it found no positioned ancestor, escaped to the page, and parked itself
   over the site header. The stage is the card it expects — and showing it
   pinned in a corner is also more honest about where it really lives than a
   row would be. */
.spec__stage {
  position: relative;
  flex: 1 1 240px;
  min-height: 96px;
  border: 1px dashed var(--c-line-2);
  border-radius: var(--radius-lg);
  background: var(--c-surface);
}

/* Dark specimens need the dark ground, or the component is invisible against
   white. The grounds list in layout/_structure.scss re-points the neutrals. */
.spec__body--dark {
  background: var(--c-deep);
  color: var(--c-on-dark);
}

.spec__note {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--c-muted);
}

/* Section rhythm on a long index page. */
.spec-group {
  margin-top: 56px;
}

.spec-group:first-of-type {
  margin-top: 0;
}

.spec-group__title {
  font-size: 26px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--c-line);
}

.spec-group__intro {
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.8;
  color: var(--c-body);
  max-width: 680px;
}

/* Jump list. Sticky on wide screens, inline above the content on narrow. */
.spec-nav {
  position: sticky;
  top: calc(var(--header-h) + 20px);
  align-self: start;
}

.spec-nav__title {
  font-size: 12px;
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
  color: var(--c-muted-2);
  display: block;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--c-line-2);
}

.spec-nav a {
  display: block;
  padding: 7px 0 7px 12px;
  font-size: 14px;
  color: var(--c-body);
  text-decoration: none;
  /* The rail is always drawn, transparent when idle, so marking a link current
     shifts no text sideways. Colouring a border is free; adding one reflows. */
  border-left: 2px solid transparent;
  transition: color var(--speed) var(--ease), border-color var(--speed) var(--ease);
}

.spec-nav a:hover {
  color: var(--c-accent-text);
}

.spec-nav a.is-current {
  color: var(--c-accent-text);
  border-left-color: var(--c-accent-text);
  font-weight: 500;
}

@media (prefers-reduced-motion: reduce) {
  .spec-nav a {
    transition: none;
  }
}
@media (max-width: 1024px) {
  .spec-nav {
    position: static;
    margin-bottom: 32px;
  }
}
/* ==========================================================================
   COOKIE CONSENT BAR
   --------------------------------------------------------------------------
   Injected by initCookieConsent and shown until the visitor chooses. Two
   things that are law rather than taste, and are easy to get wrong:

   1. Rejecting must be exactly as easy as accepting. A prominent "Accept"
      beside a buried "Manage" is the pattern regulators have repeatedly
      objected to, so both buttons here carry equal visual weight.
   2. Nothing non-essential runs before the choice is made. The bar sets a
      flag; it does not load anything on the visitor's behalf.

   It sits above the chat dock and below a modal, so it never traps focus
   behind another layer.
   ========================================================================== */
.cookie-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  background: var(--c-deep);
  color: var(--c-on-dark);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  transform: translateY(100%);
  transition: transform 0.34s var(--ease);
}

.cookie-bar.is-open {
  transform: none;
}

.cookie-bar__inner {
  display: flex;
  align-items: center;
  gap: 26px;
  padding-top: 18px;
  padding-bottom: 18px;
}

.cookie-bar__text {
  flex: 1;
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
}

.cookie-bar__text a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cookie-bar__actions {
  display: flex;
  gap: 10px;
  flex: none;
}

/* Both choices are real buttons of the same size. The accent one is not
   larger or louder than the outline one — see the note above. */
.cookie-bar__actions .btn {
  min-width: 132px;
  justify-content: center;
}

@media (max-width: 768px) {
  .cookie-bar__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
  .cookie-bar__actions .btn {
    flex: 1;
  }
}
/* Nudge the floating controls up while the bar is showing, so it never covers
   the chat launcher or the back-to-top button. */
.has-cookie-bar .chat-dock,
.has-cookie-bar .to-top {
  bottom: 112px;
}

@media (max-width: 768px) {
  .has-cookie-bar .chat-dock,
  .has-cookie-bar .to-top {
    bottom: 168px;
  }
}
/* ==========================================================================
   CUSTOMISER — appearance (buyer) and accessibility (visitor)
   --------------------------------------------------------------------------
   Two panels, deliberately separate, because they serve two different people:

     APPEARANCE   theme, brand colours, layout. A sales tool for the BUYER.
                  Floating tab on the left edge. Preview an option, copy the
                  two lines it prints, delete the panel before launch.

     ACCESSIBILITY  text size, spacing, motion, links, targets, focus. A real
                  feature for the VISITOR, so it lives in the header where a
                  visitor looks for it — not on a tab pinned to the edge.

   Every control is an attribute on <html> re-pointing design tokens. Nothing
   rebuilds, nothing duplicates the stylesheet, and no component knows any of
   it is happening — the same mechanism the tinted and dark grounds use.

   Delete `initCustomiser()` from boot() to remove both panels; the attributes
   keep working if you set them on <html> yourself.
   ========================================================================== */
/* --- Dark theme ---------------------------------------------------------
   Only tokens move. Every component follows because none of them hard-code a
   colour — which is what the grounds work bought us.                        */
:root[data-theme=dark] {
  /* The native controls follow too — without this the calendar button inside
     the departure date input stayed a black glyph on the dark search bar, and
     the date popup opened white. */
  color-scheme: dark;
  --c-deep: #060f16;
  --c-primary: #4a9fc4;
  --c-primary-alt: #62b2d4;
  --c-ink: #e8f0f4;
  --c-heading: #f4f9fb;
  --c-body: #b9ccd6;
  --c-muted: #93a9b5;
  --c-muted-2: #8497a2;
  --c-muted-3: #a2b3bc;
  --c-on-dark: #b9c7cf;
  --c-bg: #0b1419;
  --c-surface: #101c23;
  --c-surface-2: #16242c;
  --c-hover: #1b2c35;
  --c-line: #24373f;
  --c-line-2: #1d2e35;
  --c-line-3: #182831;
  --c-line-strong: #31474f;
  /* Tinted grounds re-point the neutrals to these. Without the dark values a
     tinted section stayed a light pocket in the middle of a dark page. */
  --ground-line: #2b4049;
  --ground-line-2: #253842;
  --ground-line-3: #20323a;
  --ground-hover: #1e3038;
  /* Card and panel ground. One token, not a list of components — the earlier
     per-component list missed eleven surfaces and left light text on white. */
  --c-card: #101c23;
  /* Ground BEHIND white text. Kept separate from --c-primary because that is
     read AS text here: a primary light enough to read is too light to sit
     white text on. Same split as --c-accent / --c-accent-fill. */
  --c-fill: #1d5a75;
  /* The accent has to lift on a dark ground or it fails contrast the other
     way — #ac5a00 on near-black is unreadable. */
  --c-accent-text: #e8a33f;
  --c-accent-fill: #b26002;
  --c-gold-text: #e0b463;
  /* Status colours are tuned for ink on white; on a near-black card the error
     red measured 3.04:1. Each lifts to clear 4.5:1 against --c-card. */
  --c-success: #52c398;
  --c-warning: #e3a63f;
  --c-warning-text: #e8b45f;
  --c-error: #f08a76;
  /* The four booking pills, tint and text together. */
  --tint-info: #12333d;
  --tint-info-text: #79bfd8;
  --tint-warn: #33280f;
  --tint-warn-text: #e0b45f;
  --tint-neutral: #1f2f37;
  --tint-neutral-text: #a8bbc5;
  --tint-alert: #351f16;
  --tint-alert-text: #ef9d78;
  /* A chip over a photograph flips ground rather than staying white: the
     photo is the same in both themes, so only the chip has to move. */
  --c-on-photo: rgba(9,17,22,.92);
  /* The layered shadows are tuned for ink on white; on a dark page they are
     invisible, so the elevation comes from a darker, tighter drop. */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.34), 0 3px 8px rgba(0,0,0,.30);
  --shadow-md: 0 2px 5px rgba(0,0,0,.40), 0 8px 18px rgba(0,0,0,.34);
  --shadow-lg: 0 2px 6px rgba(0,0,0,.46), 0 7px 14px rgba(0,0,0,.40);
}

/* body already reads --c-bg, so re-pointing the token above is the whole of
   it — no second rule to keep in sync. */
/* Switching theme repoints roughly forty tokens at once, and every component
   carrying `transition: all` animates its share of them on its own schedule —
   the page smears from light to dark over a third of a second and arrives in
   pieces. The switch suppresses transitions for one frame so the change is
   instant, which is also how the OS does it. */
:root[data-theme-switching] * {
  transition: none !important;
}

/* Dark re-derivation of a picked brand pair. Higher specificity than the
   light rule in §01, so the theme wins over the colour — the reverse of the
   old fixed-palette blocks, which sat after the theme and silently undid it. */
:root[data-theme=dark] [data-brand],
:root[data-theme=dark][data-brand] {
  --c-primary: color-mix(in srgb, var(--brand-1) 52%, #e6f2f8);
  --c-primary-alt: color-mix(in srgb, var(--brand-1) 36%, #e6f2f8);
  /* 94, not 84. --c-fill is the ground behind WHITE text, so lightening it is
     the one direction that makes it worse: at 84% the Olive button measured
     4.26:1 and failed. Six per cent is also exactly the lift the hand-tuned
     dark fill had — #0b4f6c at 94% white is #1d5a75, the value this replaced. */
  --c-fill: color-mix(in srgb, var(--brand-1) 94%, #ffffff);
  --c-heading: #f4f9fb;
  --c-deep: #060f16;
  --c-accent-text: color-mix(in srgb, var(--brand-2) 76%, #ffffff);
  /* Same mix as the light theme. It is a solid carrying white text in both, so
     there was nothing for the divergence to buy — and at 74% the amber
     secondary came out at 4.42:1. */
  --c-accent-fill: color-mix(in srgb, var(--brand-2) 66%, #000000);
  --c-gold: color-mix(in srgb, var(--brand-2) 62%, #ffffff);
  --c-gold-text: color-mix(in srgb, var(--brand-2) 66%, #ffffff);
}

/* --- Layout: boxed ------------------------------------------------------ */
:root[data-layout=boxed] body {
  max-width: 1320px;
  margin: 0 auto;
  box-shadow: var(--shadow-lg);
  background: var(--c-bg);
}

/* --- Accessibility preferences -----------------------------------------
   Each block maps to a named WCAG success criterion so the intent is
   auditable rather than decorative.                                        */
/* 1.4.4 Resize text */
:root[data-textsize="110"] {
  font-size: 110%;
}

:root[data-textsize="125"] {
  font-size: 125%;
}

/* 1.4.12 Text spacing — the minimums the criterion asks a page to survive */
:root[data-spacing=wide] p,
:root[data-spacing=wide] li {
  line-height: 1.5 !important;
  letter-spacing: 0.12em;
  word-spacing: 0.16em;
}

/* 2.3.3 Animation from interactions */
:root[data-motion=off] * {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}

/* 1.4.1 Use of colour — links stop relying on colour alone */
:root[data-links=underline] .text-body a,
:root[data-links=underline] .legal a,
:root[data-links=underline] p a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* 2.5.8 Target size */
:root[data-targets=large] .btn,
:root[data-targets=large] .btn-icon,
:root[data-targets=large] .pill,
:root[data-targets=large] .chip-toggle {
  min-height: 44px;
}

/* 2.4.7 / 2.4.11 Focus appearance */
:root[data-focus=strong] :focus-visible {
  outline: 4px solid var(--c-accent-text) !important;
  outline-offset: 3px !important;
}

/* --- The floating tab (appearance only) --------------------------------- */
.cust-tab {
  position: fixed;
  right: 0;
  top: 40%;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--c-fill);
  color: #fff;
  border: 0;
  cursor: pointer;
  border-radius: var(--radius) 0 0 var(--radius);
  box-shadow: var(--shadow-md);
}

.cust-tab:hover {
  background: var(--c-primary-alt);
}

.cust-tab i, .cust-tab svg {
  width: 19px;
  height: 19px;
}

/* --- The panels ---------------------------------------------------------
   Both open from the right — the tab sits on that edge and the header button
   is in that corner, so every way in is on the same side. They are mutually
   exclusive, so sharing an edge costs nothing and the page never has drawers
   closing in from two directions at once.                                  */
.cust-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 95;
  width: min(384px, 92vw);
  background: var(--c-card);
  color: var(--c-ink);
  border-left: 1px solid var(--c-line);
  box-shadow: var(--shadow-lg);
  transform: translateX(100%);
  overflow-y: auto;
  overscroll-behavior: contain;
  /* visibility, not just transform. A drawer parked off-screen at
     translateX(100%) is still in the tab order, so a keyboard visitor could
     tab from the page into a panel nobody had opened — in, of all things, the
     accessibility panel. The 0s delay holds it visible until the slide-out
     finishes, so it does not vanish mid-transition. */
  visibility: hidden;
  transition: transform 0.3s var(--ease), visibility 0s linear 0.3s;
  /* The scrollbar is part of the design. The palette list makes this panel
     long enough that the browser default reads as a seam down the edge. */
  scrollbar-width: thin;
  scrollbar-color: var(--c-line-strong) transparent;
}

.cust-panel::-webkit-scrollbar {
  width: 11px;
}

.cust-panel::-webkit-scrollbar-track {
  background: transparent;
}

.cust-panel::-webkit-scrollbar-thumb {
  background: var(--c-line-strong);
  border-radius: 99px;
  border: 3px solid var(--c-card);
}

.cust-panel.is-open {
  transform: none;
  visibility: visible;
  transition: transform 0.3s var(--ease), visibility 0s;
}

/* Sticky, because the appearance panel is now taller than any viewport and the
   way out should not require scrolling back to find it. */
.cust-panel__head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--c-line-2);
  background: var(--c-card);
}

.cust-panel__title {
  flex: 1 1 auto;
  font-size: 12px;
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
  color: var(--c-muted-2);
}

.cust-panel__body {
  padding: 20px;
}

/* Only offered once something is actually set, so it is never a dead control
   asking to be pressed. */
.cust-reset {
  flex: none;
  display: none;
  padding: 5px 9px;
  font: inherit;
  font-size: 12px;
  color: var(--c-muted);
  background: transparent;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.cust-reset:hover {
  color: var(--c-ink);
  border-color: var(--c-line-strong);
}

.cust-panel[data-dirty=yes] .cust-reset {
  display: block;
}

.cust-group {
  padding-bottom: 22px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--c-line-2);
}

.cust-group:last-child {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}

.cust-group__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 3px;
}

.cust-group__label {
  font-size: 12px;
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
  color: var(--c-muted-2);
}

/* The criterion each control implements. This panel is the product's
   accessibility claim made visible, so it names its sources. */
.cust-wcag {
  flex: none;
  font-size: 10px;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  color: var(--c-muted-3);
}

.cust-hint {
  margin: 0 0 10px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--c-muted);
}

/* One control, not a row of loose boxes — the options are mutually exclusive
   and a segmented control says so at a glance. */
.cust-seg {
  display: flex;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.cust-opt {
  flex: 1 1 0;
  min-width: 0;
  padding: 9px 8px;
  font: inherit;
  font-size: 13px;
  text-align: center;
  border: 0;
  border-left: 1px solid var(--c-line);
  background: transparent;
  color: var(--c-ink);
  cursor: pointer;
  transition: background var(--speed) var(--ease), color var(--speed) var(--ease);
}

.cust-opt:first-child {
  border-left: 0;
}

.cust-opt:hover {
  background: var(--c-hover);
}

.cust-opt[aria-pressed=true] {
  background: var(--c-fill);
  color: #fff;
}

/* --- Palettes -----------------------------------------------------------
   Six specimens, grouped by temperature. Each card sets --brand-1 and
   --brand-2 on itself, and its preview carries data-brand so the whole
   derivation in §01 runs inside it — the buttons, the active row and the
   progress bar you see are the real tokens, not a mock-up of them.

   Naming a colour tells a buyer nothing. Showing it driving the interface
   they are about to buy tells them everything.                              */
.cust-pal-group + .cust-pal-group {
  margin-top: 20px;
}

.cust-pal-group__label {
  display: block;
  margin-bottom: 9px;
  font-size: 12px;
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
  color: var(--c-muted-3);
}

.cust-pal-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pal-card {
  display: block;
  width: 100%;
  text-align: left;
  padding: 12px;
  font: inherit;
  background: transparent;
  color: var(--c-ink);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}

.pal-card:hover {
  border-color: var(--c-line-strong);
}

/* A ring rather than a thicker border: a border-width change would nudge every
   card's contents by a pixel as selection moves down the list. */
.pal-card[aria-pressed=true] {
  border-color: var(--c-fill);
  box-shadow: 0 0 0 1px var(--c-fill);
}

/* The mirror of whatever pair is applied. Same anatomy, no affordance — the
   two inputs above it are the control. */
.pal-card--live {
  margin-top: 12px;
  cursor: default;
}

.pal-card--live:hover {
  border-color: var(--c-line);
}

.pal-card--live .pal-card__foot {
  margin-top: 8px;
}

.pal-card--live .cust-ratio {
  margin-top: 0;
}

.pal-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.pal-card__name {
  font-family: var(--font-head);
  font-size: 15px;
  color: var(--c-heading);
}

.pal-ramp {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: none;
}

.pal-ramp i {
  display: block;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}

/* Mixed against --c-card, not white, so the ramp still reads as a ramp on a
   dark page instead of four pale dots. */
.pal-ramp i:nth-child(1) {
  background: color-mix(in srgb, var(--brand-1) 16%, var(--c-card));
}

.pal-ramp i:nth-child(2) {
  background: color-mix(in srgb, var(--brand-1) 40%, var(--c-card));
}

.pal-ramp i:nth-child(3) {
  background: color-mix(in srgb, var(--brand-1) 68%, var(--c-card));
}

.pal-ramp i:nth-child(4) {
  background: var(--brand-1);
}

/* The secondary sits slightly apart — it is the other half of the pair, not
   the last step of the primary's ramp. */
.pal-ramp i:nth-child(5) {
  background: var(--brand-2);
  margin-left: 4px;
}

/* Hidden, not removed: taking it out of flow would shunt every ramp sideways
   as selection moved down the list. */
.pal-check {
  display: flex;
  flex: none;
  visibility: hidden;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  background: var(--c-fill);
  color: #fff;
}

.pal-check i, .pal-check svg {
  width: 12px;
  height: 12px;
}

.pal-card[aria-pressed=true] .pal-check {
  visibility: visible;
}

/* --- The specimen ------------------------------------------------------- */
.pal-demo {
  position: relative;
  display: grid;
  grid-template-columns: 98px 1fr;
  margin-top: 11px;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--c-card);
  /* An inset hairline, not a border: a bordered box inside a bordered card is
     a card inside a card, and this is a specimen frame. */
  box-shadow: inset 0 0 0 1px var(--c-line-2);
}

.pal-demo__side {
  padding: 8px 7px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--c-surface);
  box-shadow: inset -1px 0 0 var(--c-line-2);
}

.pal-demo__nav {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 5px;
  border-radius: 3px;
  font-size: 10px;
  line-height: 1.2;
  color: var(--c-muted-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pal-demo__nav i {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--c-line-strong);
  flex: none;
}

.pal-demo__nav.is-on {
  background: var(--c-card);
  color: var(--c-heading);
  font-weight: 500;
}

.pal-demo__nav.is-on i {
  background: var(--c-fill);
}

.pal-demo__main {
  padding: 10px 11px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.pal-demo__line {
  display: block;
  height: 5px;
  border-radius: 99px;
  background: var(--c-line-2);
}

.pal-demo__line--short {
  width: 58%;
}

.pal-demo__btns {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pal-demo__btn {
  font-size: 9px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 99px;
  line-height: 1.2;
}

.pal-demo__btn--solid {
  background: var(--c-fill);
  color: #fff;
}

.pal-demo__btn--ghost {
  box-shadow: inset 0 0 0 1px var(--c-primary);
  color: var(--c-primary);
}

.pal-demo__bar {
  display: block;
  height: 5px;
  border-radius: 99px;
  background: var(--c-line-2);
  overflow: hidden;
}

.pal-demo__bar span {
  display: block;
  height: 100%;
  width: 56%;
  border-radius: 99px;
  background: var(--c-fill);
}

/* Reads the two derived text colours back out of the specimen, so the figure
   on the card is measured rather than asserted — and measures the same pair
   the sentence under the pickers does, or the two would disagree by four
   points about the same palette. */
.pal-probe {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.pal-probe--primary {
  color: var(--c-primary);
}

.pal-probe--accent {
  color: var(--c-accent-text);
}

.pal-card__foot {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
}

.pal-card__note {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--c-muted);
}

.pal-ratio {
  flex: none;
  padding: 3px 7px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--c-muted);
  background: var(--c-surface);
  border-radius: var(--radius-sm);
  box-shadow: inset 0 0 0 1px var(--c-line-2);
}

.pal-ratio[data-pass=no] {
  color: var(--c-error);
}

/* --- Custom pair --------------------------------------------------------
   The ramp itself is the control on the live card: its last two chips are
   real colour inputs, sized a step larger than the three derived ones so the
   difference between "yours" and "mixed for you" is visible before the
   sentence explaining it is read.

   A native <input type="color"> ships a bordered rectangle with an inset
   swatch. Both halves have to be reset, in both engines, or the chip that is
   supposed to match the round ones beside it arrives as a grey box.        */
.pal-ramp__pick {
  display: block;
  flex: none;
  width: 21px;
  height: 21px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14), 0 0 0 2px var(--c-card), 0 0 0 3px var(--c-line);
  transition: box-shadow var(--speed) var(--ease);
}

.pal-ramp__pick::-webkit-color-swatch-wrapper {
  padding: 0;
}

.pal-ramp__pick::-webkit-color-swatch {
  border: 0;
  border-radius: 50%;
}

.pal-ramp__pick::-moz-color-swatch {
  border: 0;
  border-radius: 50%;
}

.pal-ramp__pick:hover {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14), 0 0 0 2px var(--c-card), 0 0 0 3px var(--c-line-strong);
}

/* The default ring would sit inside the 3px halo and read as a smudge. */
.pal-ramp__pick:focus-visible {
  outline: 2px solid var(--c-accent-text);
  outline-offset: 4px;
}

/* Live contrast readout. A picker that lets a buyer choose an illegible brand
   and says nothing is how an accessible template stops being one. */
.cust-ratio {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 11px;
  font-size: 12px;
  color: var(--c-muted);
  font-variant-numeric: tabular-nums;
}

.cust-ratio__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
  background: var(--c-muted-3);
}

.cust-ratio[data-pass=yes] .cust-ratio__dot {
  background: var(--c-success);
}

.cust-ratio[data-pass=no] .cust-ratio__dot {
  background: var(--c-error);
}

/* The two lines a buyer copies into their own stylesheet to make a preview
   permanent, so the panel is a configurator and not a dead end. */
.cust-code {
  display: block;
  margin-top: 11px;
  padding: 9px 11px;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 11px;
  line-height: 1.7;
  color: var(--c-body);
  background: var(--c-surface);
  border-radius: var(--radius-sm);
  box-shadow: inset 0 0 0 1px var(--c-line-2);
  white-space: pre-wrap;
  word-break: break-all;
}

.cust-note {
  margin: 14px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--c-muted);
}

.cust-note code {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 11px;
  color: var(--c-body);
}

.cust-note a {
  color: var(--c-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cust-scrim {
  position: fixed;
  inset: 0;
  z-index: 94;
  background: rgba(6, 20, 28, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease);
}

.cust-scrim.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* No mobile reposition. The tab used to drop to bottom: 96px, which was clear
   of everything while it lived on the left edge — on the right it lands inside
   the chat dock and the back-to-top button. Mid-edge is where it stays. */
/* Utilities, motion, keyframes */
/* ==========================================================================
   27. UTILITIES
   ========================================================================== */
.mt-0 {
  margin-top: 0 !important;
}

.mt-8 {
  margin-top: 8px;
}

.mt-12 {
  margin-top: 12px;
}

.mt-16 {
  margin-top: 16px;
}

.mt-20 {
  margin-top: 20px;
}

.mt-24 {
  margin-top: 24px;
}

.mt-28 {
  margin-top: 28px;
}

.mt-32 {
  margin-top: 32px;
}

.mt-40 {
  margin-top: 40px;
}

.mt-52 {
  margin-top: 52px;
}

.mb-0 {
  margin-bottom: 0 !important;
}

.pb-80 {
  padding-bottom: 80px;
}

.pt-30 {
  padding-top: 30px;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.w-full {
  width: 100%;
}

.maxw-460 {
  max-width: 460px;
}

.maxw-560 {
  max-width: 560px;
}

.maxw-620 {
  max-width: 620px;
}

.maxw-720 {
  max-width: 720px;
}

.flex-none {
  flex: none;
}

.is-hidden {
  display: none !important;
}

.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;
}

/* Reveal-on-scroll (progressive enhancement — visible by default without JS) */
.reveal {
  opacity: 1;
}

/* The .js .reveal pair lives in §27b with the stagger — it was declared twice,
   and this earlier copy was dead because the later one always won. */
/* ==========================================================================
   27b. MOTION & LOADING
   --------------------------------------------------------------------------
   Three jobs: stop layout shifting during load, smooth the transition
   between pages, and show shimmering skeletons while media resolves.
   ========================================================================== */
/* --- 1. Reserve icon space -----------------------------------------------
   Lucide replaces every <i data-lucide> with an <svg> AFTER the script runs.
   An empty <i> has zero size, so without a reservation the whole page jolts
   when the swap happens. This baseline is overridden by the per-component
   sizes above, but guarantees the box is never 0×0.                        */
i[data-lucide] {
  display: inline-block;
  width: 16px;
  height: 16px;
  flex: none;
  vertical-align: middle;
}

/* The reservation above is what stops the shift; this just softens the
   moment the real glyph appears. No JS class needed. */
svg.lucide {
  animation: icon-in 0.25s var(--ease) both;
}

@keyframes icon-in {
  from {
    opacity: 0;
  }
}
/* --- 2. Cross-document page transitions ---------------------------------- */
@view-transition {
  navigation: auto;
}
::view-transition-old(root) {
  animation: vt-out 0.26s var(--ease) both;
}

::view-transition-new(root) {
  animation: vt-in 0.34s var(--ease) both;
}

@keyframes vt-out {
  to {
    opacity: 0;
    transform: translateY(-6px);
  }
}
@keyframes vt-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}
/* The sticky header and footer stay put across the transition instead of
   sliding with the page body. */
.site-header {
  view-transition-name: site-header;
}

.site-footer {
  view-transition-name: site-footer;
}

/* Deliberately NO whole-page enter animation as a fallback. Browsers without
   View Transitions get an instant paint, which is faster and less irritating
   than watching every page fade itself in. The transition above is a progressive
   enhancement, not a requirement. */
/* --- 3. Skeletons -------------------------------------------------------- */
.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--c-line-2);
  color: transparent !important;
  border-radius: 4px;
}

.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.72) 50%, rgba(255, 255, 255, 0) 100%);
  /* A loading shimmer, not a marquee: it exists only while media resolves and
     is gone the moment content arrives, so it never competes with readable
     content. Requested explicitly as the loading-placeholder treatment. */
  /* impeccable-disable-next-line marquee */
  animation: shimmer 1.45s infinite;
}

.skeleton--dark {
  background: rgba(255, 255, 255, 0.09);
}

.skeleton--dark::after {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.16) 50%, rgba(255, 255, 255, 0) 100%);
}

@keyframes shimmer {
  100% {
    transform: translateX(100%);
  }
}
/* Text-line skeletons for content placeholders */
.skeleton-line {
  height: 12px;
  margin-bottom: 10px;
  border-radius: 3px;
}

.skeleton-line:last-child {
  margin-bottom: 0;
}

.skeleton-line--60 {
  width: 60%;
}

.skeleton-line--80 {
  width: 80%;
}

.skeleton-line--40 {
  width: 40%;
}

.skeleton-title {
  height: 22px;
  width: 70%;
  margin-bottom: 14px;
  border-radius: 4px;
}

/* --- 4. Media loading ---------------------------------------------------
   Any element with data-bg carries its image in the attribute rather than
   an inline style. main.js preloads it, then paints it and fades it in —
   so the box is reserved from first paint and never resizes.              */
[data-bg] {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Fade in ONLY when a skeleton was actually shown. A cached or local image
   paints instantly with no animation, so navigation never reads as loading. */
[data-bg].did-fade {
  animation: media-in 0.45s var(--ease) both;
}

@keyframes media-in {
  from {
    opacity: 0.01;
  }
  to {
    opacity: 1;
  }
}
/* --- 5. Staggered reveals ------------------------------------------------ */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  will-change: opacity, transform;
}

.js .reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.62s var(--ease), transform 0.62s var(--ease);
  transition-delay: calc(var(--i, 0) * 70ms);
  will-change: auto;
}

/* --- 6. Interaction polish ----------------------------------------------- */
.btn, .chip, .pill, .chip-toggle, .tool-btn, .method, .bank, .btn-icon {
  transform: translateZ(0); /* promote once, avoid repaint jitter */
}

.btn:active, .tool-btn:active, .pill:active, .chip:active {
  transform: translateY(1px);
}

.region-card, .hotel-card, .place-card, .tour-card, .feature, .cell--hover, .dl-card {
  transition: border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease), background-color var(--speed) var(--ease);
}

/* Cards lift on hover without nudging their neighbours */
.place-card:hover, .hotel-card:hover {
  box-shadow: var(--shadow-sm);
}

/* Smooth in-page anchor scrolling, offset for the sticky header */
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

/* ==========================================================================
   28. ANIMATIONS
   ========================================================================== */
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes pop {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes occ-sheet-in {
  from {
    transform: translateY(100%);
  }
  to {
    transform: none;
  }
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* currentColor, not white. This was `rgba(255,255,255,.4)` with a `#fff` top
   edge, which is correct in the only place it was first used — inside a filled
   primary button, where the text is already white — and invisible everywhere
   else. On the components page it rendered a white ring on a white card: a
   specimen showing an empty box.
 *
   Inheriting the text colour keeps the filled-button case pixel-identical
   (those set `color: #fff`, so currentColor IS white) while making the
   component usable on any ground — which is what a loading indicator has to be,
   since it appears wherever something is waiting. */
.spinner {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, currentColor 35%, transparent);
  border-top-color: currentColor;
  animation: spin 0.7s linear infinite;
  display: inline-block;
}

@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;
  }
  html {
    scroll-behavior: auto !important;
  }
  /* Reveals must not leave content invisible when motion is disabled. */
  .js .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
  /* Stop the shimmer loop, keep the flat placeholder. */
  .skeleton::after {
    animation: none !important;
    display: none;
  }
  /* Skip the page transition entirely rather than run it at 0.01ms. */
  ::view-transition-old(root), ::view-transition-new(root) {
    animation: none !important;
  }
}
/* Responsive and print last */
/* ==========================================================================
   29. RESPONSIVE
   ========================================================================== */
@media (max-width: 1180px) {
  .main-nav {
    gap: 20px;
  }
  .hero__title {
    font-size: 60px;
  }
  .region-grid, .hotel-grid, .team-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .stat:nth-child(2) {
    border-right: 0;
  }
  .stat:nth-child(1), .stat:nth-child(2) {
    border-bottom: 1px solid var(--c-line-2);
  }
}
@media (max-width: 1024px) {
  :root {
    --gutter: 22px;
  }
  .main-nav {
    display: none;
  }
  .burger {
    display: flex;
  }
  .account-btn span {
    display: none;
  }
  .account-btn {
    padding: 10px 12px;
  }
  /* The header row is the widest fixed block in the layout. Below the nav
     breakpoint the "Plan a trip" CTA has to go, or logo + actions alone
     force a ~527px minimum and every page scrolls sideways. The CTA is
     still reachable from the mobile menu and the footer. */
  .header-actions .btn--outline-accent {
    display: none;
  }
  .header-actions {
    gap: 8px;
  }
  .site-header__inner {
    gap: 12px;
  }
  .hero {
    height: 540px;
  }
  .hero__title {
    font-size: 52px;
  }
  .hero__dots {
    bottom: 100px;
  }
  .search-widget {
    grid-template-columns: 1fr 1fr;
  }
  .sw-cell {
    border-right: 0;
    border-bottom: 1px solid var(--c-line-2);
  }
  .sw-cell:nth-child(odd) {
    border-right: 1px solid var(--c-line-2);
  }
  .sw-go {
    grid-column: span 2;
  }
  .layout-side,
  .layout-side--left,
  .layout-side--wide,
  .layout-side--narrow {
    grid-template-columns: minmax(0, 1fr);
  }
  .summary-card, .filters, .book-box {
    position: static;
  }
  .grid-3, .grid-4, .feature-grid, .contact-grid, .place-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .cell-grid--3, .cell-grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .band-dark__inner {
    padding-top: 40px;
    padding-bottom: 44px;
  }
  .art-panel {
    min-height: 380px;
  }
  .factbar {
    grid-template-columns: repeat(2, 1fr);
    margin-top: -30px;
  }
  .factbar__item:nth-child(2) {
    border-right: 0;
  }
  .factbar__item:nth-child(1), .factbar__item:nth-child(2) {
    border-bottom: 1px solid var(--c-line-2);
  }
  .trip-list {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .split,
  .split--guide,
  .split--about {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .split__media {
    min-height: 340px;
  }
  .grid--detail {
    grid-template-columns: 1fr;
  }
  .grid--stats {
    grid-template-columns: repeat(3, auto);
    gap: 18px;
  }
  .gallery {
    grid-template-columns: 1fr 1fr;
    height: auto;
  }
  .gallery__item {
    min-height: 200px;
  }
  .gallery__item:first-child {
    grid-row: auto;
    grid-column: span 2;
    min-height: 280px;
  }
  .tour-card {
    grid-template-columns: 240px 1fr;
  }
  .tour-card__aside {
    grid-column: span 2;
    border-left: 0;
    border-top: 1px solid var(--c-line-2);
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    text-align: left;
  }
  .tour-card__aside .tour-card__view {
    margin-top: 0;
  }
  .booking-card {
    grid-template-columns: 180px 1fr;
  }
  .booking-card__side {
    grid-column: span 2;
    border-left: 0;
    border-top: 1px solid var(--c-line-2);
  }
  .section, .section--pad {
    padding-top: 58px;
  }
  .section--pad {
    padding-bottom: 58px;
  }
}
@media (max-width: 768px) {
  :root {
    --gutter: 18px;
    --header-h: 66px;
  }
  .topbar {
    display: none;
  }
  .site-header__inner {
    height: var(--header-h);
  }
  .logo__mark {
    width: 108px;
  }
  h1 {
    font-size: 32px;
  }
  h2 {
    font-size: 28px;
  }
  h3 {
    font-size: 23px;
  }
  .t-display {
    font-size: 34px;
  }
  .t-page {
    font-size: 30px;
  }
  .t-panel {
    font-size: 26px;
  }
  .hero {
    height: 440px;
  }
  .hero__inner {
    padding-bottom: 90px;
  }
  .hero__title {
    font-size: 36px;
  }
  .hero__sub {
    font-size: 17px;
  }
  .hero__dots {
    display: none;
  }
  .search-wrap {
    margin-top: -40px;
  }
  .search-widget {
    grid-template-columns: 1fr;
  }
  .sw-cell, .sw-cell:nth-child(odd) {
    border-right: 0;
  }
  .sw-go {
    grid-column: span 1;
    padding: 18px 24px;
  }
  /* A floating panel carrying up to six age selects runs off the bottom of a
     phone, so it becomes a sheet anchored to the foot of the screen. */
  .occ-panel {
    position: fixed;
    inset: auto 0 0 0;
    width: auto;
    max-width: none;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    border: 0; /* full-width sheet: elevation defines it, not an edge */
    max-height: 78vh;
    overflow-y: auto;
    padding: 6px 20px calc(18px + env(safe-area-inset-bottom));
    box-shadow: 0 -6px 14px rgba(6, 20, 28, 0.2);
    animation: occ-sheet-in 0.26s var(--ease) both;
  }
  .occ-panel__foot {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .occ-panel__foot .btn {
    width: 100%;
  }
  .occ-age select {
    min-width: 140px;
  }
  .section-head, .section-head--rule, .results-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .section-head__title {
    font-size: 30px;
  }
  .section-head--rule .section-head__title {
    font-size: 27px;
  }
  .section-head__lead {
    max-width: none;
  }
  .region-grid, .hotel-grid, .team-grid,
  .grid-2, .grid-3, .grid-4,
  .feature-grid, .include-grid, .method-grid,
  .contact-grid, .contact-strip__inner, .place-grid,
  .site-footer__inner, .social-row {
    grid-template-columns: 1fr;
  }
  .factbar {
    grid-template-columns: 1fr;
  }
  .factbar__item {
    border-right: 0;
    border-bottom: 1px solid var(--c-line-2);
  }
  .factbar__item:last-child {
    border-bottom: 0;
  }
  .cell-grid--2, .cell-grid--3, .cell-grid--4 {
    grid-template-columns: 1fr;
  }
  .grid--stats {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
  .art-panel__card {
    max-width: none;
  }
  .cell, .cell--lg {
    padding: 24px;
  }
  .company-band {
    padding: 26px;
  }
  .acc-plus__head {
    padding: 18px;
    font-size: 15px;
  }
  .acc-plus__body p {
    padding: 0 18px 20px;
  }
  .dl-card {
    gap: 16px;
  }
  .mb-card__head {
    gap: 14px;
  }
  .mb-card__money {
    text-align: left;
  }
  .segmented {
    width: 100%;
  }
  .segmented button {
    flex: 1;
    padding: 13px 12px;
  }
  .art-panel {
    min-height: 320px;
    padding: 20px;
  }
  .art-panel__card {
    max-width: none;
    padding: 22px;
  }
  .support-strip, .duty {
    padding: 20px;
  }
  .stat-grid {
    grid-template-columns: 1fr;
  }
  .stat {
    border-right: 0;
    border-bottom: 1px solid var(--c-line-2);
  }
  .stat:last-child {
    border-bottom: 0;
  }
  .bank-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .region-card {
    height: 300px;
  }
  .hotel-card__name {
    min-height: 0;
  }
  .tour-card, .booking-card {
    grid-template-columns: 1fr;
  }
  .tour-card__media {
    min-height: 200px;
  }
  .tour-card__aside {
    grid-column: auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .booking-card__side {
    grid-column: auto;
  }
  .panel {
    padding: 22px;
  }
  .cta-band {
    padding: 32px 24px;
  }
  .cta-band__title {
    font-size: 27px;
  }
  .page-hero__title {
    font-size: 34px;
  }
  .page-hero {
    min-height: 260px;
  }
  .steps {
    gap: 12px 0;
  }
  .step__line {
    width: 20px;
    margin: 0 10px;
  }
  .step__label {
    display: none;
  }
  .otp-input {
    width: 46px;
    height: 54px;
    font-size: 19px;
  }
  .otp-grid {
    gap: 7px;
  }
  .gallery {
    grid-template-columns: 1fr;
  }
  .gallery__item:first-child {
    grid-column: auto;
  }
  .site-footer__bottom-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    text-align: left;
  }
  .timeline {
    padding-left: 26px;
  }
  .timeline__item::before {
    left: -32px;
  }
  .chat-dock {
    right: 16px;
    bottom: 16px;
  }
  .chat-panel {
    width: calc(100vw - 32px);
    height: 420px;
  }
  .to-top {
    right: 16px;
    bottom: 86px;
  }
  /* Touch targets: nothing tappable below 44px on a phone. */
  .chip, .pill, .chip-toggle, .tool-btn, .btn--sm, .social-btn, .tab {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .btn-icon, .burger, .account-btn {
    min-height: 44px;
    min-width: 44px;
  }
  .check input[type=checkbox], .check input[type=radio] {
    width: 18px;
    height: 18px;
  }
  .footer-col__links a, .mobile-nav a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .month-table {
    font-size: 12px;
  }
  .month-table th, .month-table td {
    padding: 11px 10px;
  }
}
@media (max-width: 420px) {
  .hero__title {
    font-size: 30px;
  }
  .otp-input {
    width: 40px;
    height: 48px;
    font-size: 17px;
  }
  .btn {
    padding: 15px 22px;
    font-size: 12px;
  }
  /* Last thing to drop on the narrowest phones — search still lives in the
     mobile menu and the hero widget. */
  .header-actions .btn-icon {
    display: none;
  }
  .logo__mark {
    width: 91px;
  }
  .grid--stats {
    grid-template-columns: 1fr;
  }
  .bank-grid {
    grid-template-columns: 1fr;
  }
}
/* ==========================================================================
   NARROW-WIDTH CORRECTIONS
   --------------------------------------------------------------------------
   Measured at 320–768px rather than eyeballed. Grouped here, after the other
   queries, because each one overrides a rule that reads as if it already
   handled the small screen.
   ========================================================================== */
/* A `1fr` track takes its minimum from min-content, so a long word or an
   unbreakable address can push the column wider than its container. The page
   hides the overflow, so the excess is silently cropped rather than
   scrollable — which is why this never showed up as a scrollbar. */
@media (max-width: 1024px) {
  .layout-side,
  .layout-side--left,
  .layout-side--wide,
  .layout-side--narrow {
    grid-template-columns: minmax(0, 1fr);
  }
  .trip-list {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 768px) {
  /* `.grid-2` collapses to one column here, but a child carrying
     `grid-column: span 2` asks for a second track and the grid obliges by
     creating an implicit one — leaving the neighbouring field about 40px
     wide. Spanning the full row keeps a single column single. */
  .grid-2 > * {
    grid-column: 1/-1;
  }
  /* Tap targets. The existing 44px block covers the common controls; these
     are the ones it missed. */
  .social a {
    width: 44px;
    height: 44px;
  }
  .pagination button, .pager-step {
    min-width: 44px;
    min-height: 44px;
  }
  .compare-toggle, .link-btn, .place-card__cta, .breadcrumb a,
  .departure__cta, .demo-fill, .contact-strip__value, .info-item__value,
  .results-bar__sort .select {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .check {
    min-height: 44px;
    align-items: center;
  }
  .sw-cell__control select, .sw-cell__control input {
    min-height: 40px;
  }
  .filters__group input[type=range] {
    height: 44px;
  }
}
@media (max-width: 600px) {
  /* `flex: 1` resolves to a basis of 0, so these items have a hypothetical
     width of nothing and flex-wrap can never fire — the text column collapses
     beside the thumbnail and titles wrap one word per line. Giving them a
     100% basis makes the wrap happen. */
  .mb-card__head {
    flex-wrap: wrap;
  }
  .mb-card__main {
    flex: 1 1 100%;
    min-width: 100%;
    order: 3;
  }
  .mb-card__money {
    flex: 1 1 100%;
    text-align: left;
  }
  .trip-row {
    flex-wrap: wrap;
  }
  .trip-row__main {
    flex: 1 1 100%;
    min-width: 100%;
  }
  .trip-row__price {
    margin-left: 54px;
  }
  /* Nested padding leaves the tab content about 170px wide on a small phone */
  .panel--flush .tabs + div {
    padding: 18px;
  }
}
/* An email address has no break opportunity, so it sets the minimum width of
   its whole row. */
.info-item > * {
  min-width: 0;
}

.info-item__value,
.contact-strip__value {
  overflow-wrap: anywhere;
}

/* ==========================================================================
   PRINT
   ========================================================================== */
@media print {
  .topbar, .site-header, .mobile-nav, .chat-dock, .to-top,
  .hero__dots, .site-footer, .search-wrap {
    display: none !important;
  }
  body {
    color: #000;
    background: #fff;
  }
  .panel, .summary-card {
    border-color: #999;
  }
  a {
    color: #000;
    text-decoration: underline;
  }
}