/* ==========================================================================
   Nessy Explores — Design System
   Explore Phuket, Beyond the Shore
   Personality: Local · Friendly · Reliable · Adventurous

   Palette, typeface and logo come from the Nessy Explores Brand Book
   (generated by Pomelli). Tokens marked "derived" are NOT in the book —
   they were added because the book supplies only four colours and one
   typeface, which is not enough to build an accessible UI. Every derived
   token is documented for the client on brand.html.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=Noto+Sans+Thai:wght@400;500;600;700&display=swap');

/* --------------------------------------------------------------------------
   1. Tokens — Nessy Explores CI palette
   Modern Tropical · Local Premium · Coastal Editorial
   Usage proportion (client CI): 60% white + light tints · 25% dark surfaces
   (Primary #182429 + Secondary #0F4149) · 10% Brand Teal #017E87 · 5% warm
   accents (Coral / Orange / Yellow). Backgrounds are white/cool-tint; the two
   darks carry contrast (footer, CTA band, hero floor); Brand Teal is the
   PRIMARY brand colour (links, active states, key fills, buttons); Coral is
   the CTA / attention colour; Orange + Yellow are supporting accents.
   -------------------------------------------------------------------------- */
:root {
  /* Nessy Explores CI — client palette */
  --ink:        #182429;   /* Primary — main text + darkest surface (15.9:1 on white) */
  --deep-ocean: #0F4149;   /* Secondary — dark teal surface: footer, CTA band, hero floor (11.2:1) */
  --ocean:      #017E87;   /* Brand Teal — PRIMARY brand: links, active state, key fills, buttons (4.84:1 w/ white; white text OK) */
  --coral:      #FF6155;   /* CTA Coral — primary action / attention (dark text only: 5.36:1) */
  --orange:     #FF7D49;   /* Accent Orange — supporting warm accent (dark text only: 6.26:1) */
  --mango:      #FED17E;   /* Accent Yellow — supporting warm accent, decorative (dark text only: 11.1:1) */
  --white:      #FFFFFF;   /* Background */
  --warm-white: #FFFFFF;   /* page base — pure white */
  --muted-ink:  #5A6B72;   /* muted text — 5.6:1 on white */

  /* Derived states / text-safe variants (not in CI — documented on brand.html) */
  --ocean-dark:     #016A72;   /* teal filled-button hover — deeper (6.35:1 w/ white) */
  --ocean-darker:   #015F67;   /* teal link/icon text-safe on light tints (7.41:1 white) */
  --deep-ocean-2:   #0A2E34;   /* footer base / gradient floor — darker teal */
  --coral-dark:     #F5544A;   /* coral hover — deeper (dark text 4.72:1) */
  --coral-soft:     rgba(255, 97, 85, .16);
  --orange-dark:    #F26A34;   /* orange hover / border */
  --orange-soft:    rgba(255, 125, 73, .16);
  --turquoise:      #3BBCC6;   /* light Brand-Teal tint — accents/eyebrows on dark surfaces (4.9:1 on Secondary) */
  --turquoise-dark: #0F6E77;   /* turquoise, text-safe on light (5.97:1 white) */
  --warm-sand:      #F2F8F8;   /* light cool tint — alternating section bg */
  --sand-2:         #E9F3F3;   /* deeper cool tint — separates sections */
  --sea-mist:       #E5F5F3;   /* Sea Mist — cool accent surface */
  --mango-dark:     #F7BE55;   /* yellow hover / border */

  /* Third-party brand mark — KBank (bank-account tags only, not site CI) */
  --kbank-green: #138F2D;

  /* Danger — anti-scam only. 6.35:1 on white. */
  --warn: #A63D1E;
  --warn-soft: rgba(166, 61, 30, .10);

  /* Neutrals / borders on cool light surfaces */
  --line:      #E2E8E8;    /* border on white */
  --line-soft: #E6ECEC;    /* border on cool-tint surfaces */
  --line-dark: rgba(255, 255, 255, .14);

  /* Semantic on-surface text — cool-surface pairs verified AA (>=4.5:1):
     ink/white 15.9 · ink/warm-sand 14.8 · muted/white 5.6 · white/ocean(teal) 4.84
     ocean-darker/white 7.4 · on-deep/Secondary 9.9 · on-deep/Primary 14.0
     turquoise/Secondary 4.9 · ink/yellow 11.1
     BRAND DIRECTION: the warm CTA surfaces (Coral, Orange) carry WHITE text for a
     bolder, more conventional CTA look. Note this trades contrast — white/coral is
     2.96:1 and white/orange 2.54:1 (below AA) — so we lean on bold 600 weight and
     large/short labels for legibility. Yellow keeps dark text (white 1.43:1 is unusable). */
  --on-ocean:     var(--white);
  --on-deep:      #EAF2F3;
  --on-turquoise: var(--ink);
  --on-coral:     var(--white);
  --on-orange:    var(--white);
  --on-mango:     var(--ink);

  /* ---- Backward-compatible aliases (shared inner pages reference these) ---- */
  --blue: var(--ocean);
  --blue-dark: var(--ocean-dark);
  --blue-darker: var(--ocean-darker);
  --prussian: var(--deep-ocean);
  --prussian-deep: var(--deep-ocean-2);
  --sky: var(--turquoise);
  --frost: var(--warm-sand);
  --frost-deep: var(--sand-2);
  --sunset: var(--coral);
  --sunset-dark: var(--coral-dark);
  --muted: var(--muted-ink);
  --on-blue: var(--on-ocean);
  --on-prussian: var(--on-deep);
  --on-sky: var(--on-turquoise);
  --on-sunset: var(--on-coral);

  /* Type — Bricolage Grotesque (Latin display, editorial character) paired
     with Noto Sans Thai. Thai glyphs fall through to Noto automatically;
     Latin display text takes Bricolage. Hierarchy from size + space + weight. */
  --font: 'Noto Sans Thai', 'Bricolage Grotesque', system-ui, -apple-system, sans-serif;
  --font-display: 'Bricolage Grotesque', 'Noto Sans Thai', system-ui, sans-serif;

  --t-xs:  .8125rem;  /* 13  eyebrow / meta */
  --t-sm:  .9375rem;  /* 15  labels / secondary */
  --t-base: 1rem;     /* 16  body */
  --t-md:  1.1875rem; /* 19  lead / body-large */
  --t-lg:  1.5rem;    /* 24  card title */
  --t-xl:  1.875rem;  /* 30 */
  --t-2xl: 2.375rem;  /* 38 */
  --t-3xl: 3rem;      /* 48  section H2 base */
  --t-4xl: 3.5rem;    /* 56 */
  /* fluid display */
  --t-hero: clamp(2.75rem, 5.2vw + 1rem, 4.75rem);  /* 44 → 76 */
  --t-h2:   clamp(2rem, 2.6vw + 1rem, 3.125rem);    /* 32 → 50 */

  /* Spacing — 4/8 rhythm */
  --s-1: .25rem;  --s-2: .5rem;   --s-3: .75rem;  --s-4: 1rem;
  --s-5: 1.25rem; --s-6: 1.5rem;  --s-8: 2rem;    --s-10: 2.5rem;
  --s-12: 3rem;   --s-16: 4rem;   --s-20: 5rem;   --s-24: 6rem;   --s-32: 8rem;

  /* Radius */
  --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 24px; --r-2xl: 32px; --r-pill: 999px;

  /* Elevation — soft, premium, tinted with Deep Ocean */
  --e-1: 0 1px 2px rgba(15, 65, 73, .05), 0 1px 3px rgba(15, 65, 73, .05);
  --e-2: 0 2px 6px rgba(15, 65, 73, .06), 0 6px 16px rgba(15, 65, 73, .07);
  --e-3: 0 6px 14px rgba(15, 65, 73, .08), 0 18px 40px rgba(15, 65, 73, .10);
  --e-4: 0 16px 32px rgba(15, 65, 73, .12), 0 30px 64px rgba(15, 65, 73, .16);

  /* Motion */
  --ease: cubic-bezier(.22, .68, .26, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur-fast: 140ms;
  --dur: 240ms;
  --dur-slow: 460ms;

  /* Layers */
  --z-base: 0; --z-raised: 10; --z-sticky: 40; --z-dock: 60; --z-nav: 80; --z-modal: 100;

  --wrap: 1200px;
  --wrap-wide: 1320px;
  --nav-h: 76px;
}

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

/* The [hidden] attribute must always win, even over components that set their
   own display (e.g. .tour and .load-more use display:flex). Without this the
   filter/progressive-reveal JS (item.hidden = true) has no visual effect. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + var(--s-4));
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--t-base);
  font-weight: 400;
  line-height: 1.7;
  color: var(--ink);
  background: var(--warm-white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

/* Bricolage Grotesque carries the display voice (Latin); Thai falls through
   to Noto. Hierarchy comes from size + space + weight, not colour or frames. */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.14;
  color: var(--ink);
  margin: 0 0 var(--s-4);
  letter-spacing: -.02em;
  text-wrap: balance;
}
h1 { font-size: var(--t-3xl); line-height: 1.06; }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-lg); font-weight: 600; line-height: 1.28; letter-spacing: -.01em; }
p { margin: 0 0 var(--s-4); max-width: 66ch; }

a { color: var(--blue-darker); text-decoration: none; transition: color var(--dur-fast) var(--ease); }
a:hover { color: var(--prussian); text-decoration: underline; text-underline-offset: 3px; }

ul, ol { margin: 0 0 var(--s-4); padding-left: var(--s-5); }
li { margin-bottom: var(--s-2); }

strong { font-weight: 600; }
small { font-size: var(--t-sm); }

/* Numbers / prices — tabular so cards don't jitter */
.num, .price, table { font-variant-numeric: tabular-nums; }

/* Focus — never removed */
:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
.on-dark :focus-visible, footer :focus-visible { outline-color: var(--sky); }

::selection { background: var(--sky); color: var(--prussian); }

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

.skip-link {
  /* fixed (not absolute) so an elastic over-scroll bounce at the very top
     can't reveal the space above the page and flash this button into view;
     it stays anchored off-screen until focused. */
  position: fixed; left: 50%; top: 0; transform: translate(-50%, -120%);
  z-index: var(--z-modal); background: var(--prussian); color: var(--white);
  padding: var(--s-3) var(--s-6); border-radius: 0 0 var(--r-md) var(--r-md);
  font-weight: 600; font-size: var(--t-sm);
  transition: transform var(--dur) var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); text-decoration: none; color: var(--white); }

/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--s-5); }

section { padding-block: var(--s-20); position: relative; }
section.tight { padding-block: var(--s-12); }

/* Section surfaces — 60% white+frost / 25% blue+prussian / 12% frost-deep / 3% sunset */
.sf-white { background: var(--white); }
.sf-frost { background: var(--frost); }
.sf-frost-deep { background: var(--frost-deep); }
.sf-mist { background: var(--sea-mist); }   /* light aqua band — tours & activities */
.sf-prussian { background: var(--prussian); color: var(--on-prussian); }
.sf-blue { background: var(--blue); color: var(--on-blue); }

.sf-prussian h1, .sf-prussian h2, .sf-prussian h3,
.sf-blue h1, .sf-blue h2, .sf-blue h3 { color: var(--white); }
.sf-prussian a, .sf-blue a { color: var(--sky); }
.sf-prussian a:hover, .sf-blue a:hover { color: var(--sky); }

.grid { display: grid; gap: var(--s-6); }
.g-2 { grid-template-columns: repeat(2, 1fr); }
.g-3 { grid-template-columns: repeat(3, 1fr); }
.g-4 { grid-template-columns: repeat(4, 1fr); }

.stack-sm > * + * { margin-top: var(--s-2); }
.center { text-align: center; }
.center p { margin-inline: auto; }

/* Section heading block */
.head { max-width: 62ch; margin-bottom: var(--s-10); }
.head.center { margin-inline: auto; }
.head p { color: var(--muted); font-size: var(--t-md); margin-bottom: 0; }
.sf-prussian .head p, .sf-blue .head p { color: rgba(234, 247, 253, .84); }

.eyebrow {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-display);
  font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted-ink); margin-bottom: var(--s-4);
}
/* A warm coral→mango bar injects the accent without spending it on text colour */
.eyebrow::before {
  content: ''; width: 26px; height: 3px; flex: none; border-radius: 3px;
  background: linear-gradient(90deg, var(--coral), var(--mango));
}
.sf-prussian .eyebrow, .sf-blue .eyebrow { color: rgba(234, 242, 243, .72); }

/* --------------------------------------------------------------------------
   4. Icons
   -------------------------------------------------------------------------- */
.ic {
  width: 24px; height: 24px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round;
}
.ic-sm { width: 18px; height: 18px; stroke-width: 2; }
.ic-lg { width: 32px; height: 32px; stroke-width: 1.6; }

.icon-tile {
  width: 52px; height: 52px; border-radius: var(--r-md);
  display: grid; place-items: center; flex: none;
  background: var(--frost-deep); color: var(--blue-darker);
}
.icon-tile.sky { background: rgba(65, 189, 209, .28); color: var(--ocean-darker); }
.icon-tile.warn { background: var(--warn-soft); color: var(--warn); }
.sf-prussian .icon-tile, .sf-blue .icon-tile {
  background: rgba(255, 255, 255, .12); color: var(--sky);
}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 48px; padding: var(--s-3) var(--s-6);
  font-family: var(--font); font-size: var(--t-base); font-weight: 500;
  border: 2px solid transparent; border-radius: var(--r-pill);
  cursor: pointer; text-align: center; text-decoration: none;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease),
              color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(.975); }
.btn .ic { width: 20px; height: 20px; transition: transform var(--dur) var(--ease); }
/* Micro-interaction: subtle lift on hover; a trailing arrow icon slides right */
.btn:hover { transform: translateY(-1px); }
.btn:hover:active { transform: scale(.975); }
.btn:hover .ic:last-child { transform: translateX(3px); }

/* Primary — Ocean Blue. The only filled CTA colour on light surfaces.
   The accent orange is deliberately NOT used here: it would read as a
   discount site rather than a licensed operator. */
.btn-primary { background: var(--blue); color: var(--on-blue); box-shadow: var(--e-1); }
.btn-primary:hover { background: var(--blue-dark); color: var(--white); box-shadow: var(--e-2); }

/* Outline */
.btn-outline { background: transparent; border-color: var(--blue); color: var(--blue-darker); }
.btn-outline:hover { background: var(--blue); color: var(--white); }

/* On dark surfaces the filled button inverts to white */
.btn-light { background: var(--white); color: var(--blue-darker); box-shadow: var(--e-2); }
.btn-light:hover { background: var(--frost); color: var(--prussian); }
.btn-onDark { background: transparent; border-color: rgba(255, 255, 255, .5); color: var(--white); }
.btn-onDark:hover { background: rgba(255, 255, 255, .14); border-color: var(--white); color: var(--white); }

/* Coral — the attention CTA. White text fails on coral (1.9:1), so the label
   is Deep Ocean (6.4:1). Used sparingly: hero primary, plan-trip band. */
.btn-coral { background: var(--coral); color: var(--on-coral); box-shadow: var(--e-1); font-weight: 600; }
.btn-coral:hover { background: var(--coral-dark); color: var(--on-coral); box-shadow: var(--e-3); }

/* Ghost on photo/dark — transparent with a white hairline */
.btn-ghost-light { background: transparent; border-color: rgba(255, 255, 255, .55); color: var(--white); }
.btn-ghost-light:hover { background: rgba(255, 255, 255, .12); border-color: #fff; color: #fff; }

.btn-lg { min-height: 56px; padding: var(--s-4) var(--s-8); font-size: var(--t-md); }
.btn-sm { min-height: 40px; padding: var(--s-2) var(--s-4); font-size: var(--t-sm); }
.btn-block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.btn-row.center { justify-content: center; }
/* Hero CTAs: keep the large type but trim the tall height (tight line-height) */
.hero .btn-row .btn.btn-lg { min-height: 46px; padding-block: var(--s-2); padding-inline: var(--s-5); line-height: 1.2; }

/* Loading state — a tapped package CTA spins before it acts, so the tap gets an
   instant physical acknowledgement the way a real booking button would
   (ui-ux-pro-max: loading-buttons, tap-feedback-speed). The label is hidden but
   the box keeps its size, so nothing around it jumps. */
.btn.is-loading { color: transparent !important; pointer-events: none; position: relative; }
.btn.is-loading > * { opacity: 0; }
.btn.is-loading::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border: 2px solid var(--btn-spin, #fff); border-right-color: transparent;
  border-radius: 50%; animation: btnspin .6s linear infinite;
}
.btn-coral { --btn-spin: var(--on-coral); }
.btn-light,
.btn-outline { --btn-spin: var(--blue); }

@keyframes btnspin { to { transform: rotate(360deg); } }

/* Text link with arrow */
.link-arrow {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-weight: 500; font-size: var(--t-sm);
  color: var(--blue-darker); min-height: 44px;
}
.link-arrow .ic { transition: transform var(--dur) var(--ease); }
.link-arrow:hover { text-decoration: none; color: var(--prussian); }
.link-arrow:hover .ic { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   6. Badges & tags
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: var(--s-1);
  padding: 3px var(--s-3); border-radius: var(--r-pill);
  font-size: var(--t-xs); font-weight: 500;
  background: var(--frost-deep); color: var(--blue-darker); white-space: nowrap;
}
.badge-promo { background: var(--sunset); color: var(--on-sunset); }  /* 3% — promo only */
.badge-sky { background: var(--sky); color: var(--on-sky); }
.badge-dark { background: var(--prussian); color: var(--white); }
.badge-outline { background: transparent; border: 1px solid var(--line); color: var(--muted); }

.tag-row { display: flex; flex-wrap: wrap; gap: var(--s-2); }

.rating { display: inline-flex; align-items: center; gap: var(--s-1); font-size: var(--t-sm); color: var(--muted); }
/* Sky Blue is only 2.24:1 on white, below the 3:1 floor for graphics, so
   the star fill uses Ocean Blue */
.rating .ic { width: 16px; height: 16px; fill: var(--blue); stroke: none; }
.rating b { color: var(--prussian); font-weight: 600; }

/* --------------------------------------------------------------------------
   7. Cards
   -------------------------------------------------------------------------- */
.card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--e-1);
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.card-pad { padding: var(--s-6); }
.sf-frost .card, .sf-frost-deep .card { border-color: var(--line-soft); }

.card-link:hover { box-shadow: var(--e-3); border-color: var(--blue); transform: translateY(-3px); }

/* Feature card */
.feature { display: flex; flex-direction: column; gap: var(--s-4); height: 100%; }
.feature h3 { margin: 0; font-size: var(--t-md); }
.feature p { margin: 0; font-size: var(--t-sm); color: var(--muted); }

/* ---- Tour card ---- */
.tour {
  display: flex; flex-direction: column; overflow: hidden; cursor: pointer;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--e-1); height: 100%;
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.tour:hover,
.tour:focus-within { box-shadow: var(--e-3); transform: translateY(-4px); border-color: var(--blue); }

.tour-media {
  position: relative; aspect-ratio: 4 / 4.5; overflow: hidden;
  background: var(--frost-deep);
}
/* Every tour card shares the same 4:4.5 portrait frame so the catalog grid
   stays visually even across categories (object-fit centres each subject). */
.tour-media svg, .tour-media img { width: 100%; height: 100%; object-fit: cover; }
/* keep the full "C" of the Carnival Magic sign in frame */
.tour-media img[src*="carnival-magic"] { object-position: 30% center; }
/* the dolphin sits on the right of the frame — shift crop to keep it in view */
.tour-media img[src*="dolphin-show"] { object-position: 70% center; }
/* keep the performer's face and Simon Cabaret logo in the upper crop */
.tour-media img[src*="simon-cabaret"] { object-position: center 20%; }
.tour-media .ribbons {
  position: absolute; inset: var(--s-3) var(--s-3) auto var(--s-3);
  display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-2);
  pointer-events: none;
}

.tour-body { padding: var(--s-4) var(--s-5) var(--s-5); display: flex; flex-direction: column; gap: var(--s-2); flex: 1; }
.tour-body h3 {
  margin: 0; font-size: var(--t-md); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Editorial card: the description is kept in the DOM for the detail modal, but
   the card itself leads with image → destination → CTA, not a wall of text. */
.tour-desc { display: none; }

.tour-meta {
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4);
  font-size: var(--t-xs); color: var(--muted);
}
.tour-meta span { display: inline-flex; align-items: center; gap: var(--s-1); }
.tour-meta .ic { width: 15px; height: 15px; stroke: var(--blue); }

.tour-foot {
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-3);
  padding-top: var(--s-4); border-top: 1px solid var(--line); margin-top: auto;
}
.price-label { display: block; font-size: var(--t-xs); color: var(--muted); line-height: 1.4; }
.price {
  font-weight: 700; font-size: var(--t-lg);
  color: var(--blue-darker); line-height: 1.2; white-space: nowrap;
}
.price s { font-size: var(--t-sm); color: var(--muted); font-weight: 400; margin-right: var(--s-1); }
.price .unit { font-size: var(--t-xs); font-weight: 400; color: var(--muted); }

/* Editorial footer: the label is a quiet caption so the CTA reads as the single
   primary action; the button gains a trailing arrow that nudges with the card's
   hover/focus, matching the site-wide arrow micro-interaction. */
.tour-foot .price { font-size: var(--t-sm); font-weight: 600; color: var(--muted-ink); }
.tour-foot .btn-primary::after {
  content: ''; width: 15px; height: 15px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--dur) var(--ease);
}
.tour:hover .tour-foot .btn-primary::after,
.tour:focus-within .tour-foot .btn-primary::after { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   8. Navbar — solid warm-white for inner pages; a transparent overlay
   variant (.navbar-overlay) rides over the Home hero and warms to a
   solid bar once the page scrolls (.scrolled, toggled in app.js).
   -------------------------------------------------------------------------- */
.navbar {
  position: sticky; top: 0; z-index: var(--z-nav);
  background: var(--warm-white); color: var(--ink);
  border-bottom: 1px solid var(--line);
  transition: background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.navbar .wrap {
  min-height: var(--nav-h); display: flex; align-items: center; gap: var(--s-5);
}

/* min-height keeps the 40px logo mark from shrinking the tap area below 44px */
.brand { display: flex; align-items: center; gap: var(--s-3); margin-right: auto; min-height: 44px; }
.brand:hover { text-decoration: none; }
/* the exported mark is a square PNG; the circle crops its white corners */
.brand-mark { width: 32px; height: 32px; flex: none; border-radius: 50%; }
.brand-txt { display: flex; flex-direction: column; line-height: 1.12; }
.brand-name {
  font-family: var(--font-display); font-weight: 700; font-size: 1.125rem;
  color: var(--ink); letter-spacing: -.02em;
}
.brand-tag {
  font-family: var(--font-display); font-size: 12px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted-ink); font-weight: 500;
}

.nav-links { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav-links li { margin: 0; }
.nav-links a {
  position: relative;
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 var(--s-3); border-radius: var(--r-sm);
  font-size: var(--t-sm); font-weight: 500; color: var(--ink); white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
/* Micro-interaction: a thin indicator wipes in from the left on hover/current */
.nav-links a::after {
  content: ''; position: absolute; left: var(--s-3); right: var(--s-3); bottom: 5px; height: 2px;
  border-radius: 2px; background: currentColor; opacity: .85;
  transform: scaleX(0); transform-origin: left; pointer-events: none;
  transition: transform var(--dur) var(--ease);
}
.nav-links a:hover::after,
.nav-links a[aria-current="page"]::after { transform: scaleX(1); }
.nav-links a:hover { background: transparent; color: var(--ocean-darker); text-decoration: none; }
.nav-links a[aria-current="page"] { color: var(--ocean-darker); font-weight: 600; }

.nav-cta { display: flex; align-items: center; gap: var(--s-3); }

/* Desktop: brand stays left, CTA stays right, and the menu is absolutely
   centred in the bar. Scoped above the mobile breakpoint so the dropdown
   (which positions .nav-links against the sticky .navbar) is untouched. */
@media (min-width: 861px) {
  .navbar .wrap { position: relative; }
  .navbar .wrap > nav { position: absolute; left: 50%; transform: translateX(-50%); }
}

/* TH / EN language toggle — segmented pill (neutral so it never competes
   with the coral "วางแผนทริป" CTA sitting right next to it) */
.lang {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 3px; border-radius: var(--r-pill); background: var(--sand-2);
  font-family: var(--font-display); font-size: var(--t-xs); font-weight: 600; line-height: 1;
}
.lang .lang-btn {
  position: relative;
  min-width: 32px; height: 30px; padding: 0 var(--s-2); border: 0; border-radius: var(--r-pill);
  background: transparent; font: inherit; cursor: pointer; touch-action: manipulation;
  display: inline-flex; align-items: center; justify-content: center; color: var(--muted-ink);
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
/* Extend the tap area to >=44x44 without enlarging the visible pill (WCAG 2.5.5) */
.lang .lang-btn::before {
  content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 100%; min-width: 44px; height: 44px;
}
.lang .lang-btn[aria-current="true"] { background: var(--white); color: var(--ink); box-shadow: var(--e-1); }
.lang .lang-btn:not([aria-current="true"]):hover { color: var(--ink); text-decoration: none; }

.nav-toggle {
  display: none; width: 46px; height: 46px; border: 0; border-radius: var(--r-sm);
  background: var(--sand-2); color: var(--ink);
  cursor: pointer; place-items: center;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.nav-toggle:hover { background: var(--line); }

/* ---- Transparent overlay variant (Home) ---- */
.navbar-overlay {
  position: fixed; top: 0; left: 0; right: 0;
  background: transparent; border-bottom-color: transparent; color: var(--white);
}
.navbar-overlay .brand-name { color: var(--white); }
.navbar-overlay .brand-tag { color: rgba(255, 255, 255, .78); }
.navbar-overlay .nav-links a { color: rgba(255, 255, 255, .92); }
.navbar-overlay .nav-links a:hover { background: transparent; color: #fff; }
.navbar-overlay .nav-links a[aria-current="page"] { color: #fff; }
.navbar-overlay .lang { background: rgba(255, 255, 255, .18); }
.navbar-overlay .lang .lang-btn:not([aria-current="true"]) { color: rgba(255, 255, 255, .82); }
.navbar-overlay .lang .lang-btn:not([aria-current="true"]):hover { color: #fff; }
.navbar-overlay .lang .lang-btn[aria-current="true"] { background: #fff; color: var(--deep-ocean); box-shadow: none; }
.navbar-overlay .nav-toggle { background: rgba(255, 255, 255, .16); color: #fff; }
.navbar-overlay .nav-toggle:hover { background: rgba(255, 255, 255, .28); }

/* Warmed solid state after scroll */
.navbar-overlay.scrolled {
  background: var(--warm-white); color: var(--ink);
  border-bottom-color: var(--line); box-shadow: var(--e-2);
}
.navbar-overlay.scrolled .brand-name { color: var(--ink); }
.navbar-overlay.scrolled .brand-tag { color: var(--muted-ink); }
.navbar-overlay.scrolled .nav-links a { color: var(--ink); }
.navbar-overlay.scrolled .nav-links a:hover { background: transparent; color: var(--ocean-darker); }
.navbar-overlay.scrolled .nav-links a[aria-current="page"] { color: var(--ocean-darker); }
.navbar-overlay.scrolled .lang { background: var(--sand-2); }
.navbar-overlay.scrolled .lang .lang-btn:not([aria-current="true"]) { color: var(--muted-ink); }
.navbar-overlay.scrolled .lang .lang-btn[aria-current="true"] { background: var(--white); color: var(--ink); box-shadow: var(--e-1); }
.navbar-overlay.scrolled .nav-toggle { background: var(--sand-2); color: var(--ink); }

/* --------------------------------------------------------------------------
   9. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative; min-height: 88vh;
  display: flex; align-items: flex-end;
  background: var(--deep-ocean); color: var(--white);
  overflow: hidden; padding: 0;
}
.hero-art { position: absolute; inset: -7% 0; will-change: transform; }
.hero-art svg, .hero-art img { width: 100%; height: 100%; object-fit: cover; }
/* portrait hero photo: pull the crop downward so the islands + open sea show,
   not just the empty sky at the top */
.hero-art img { object-position: center 82%; }
/* Warm-navy wash, strongest at the bottom-left where the copy sits. Measured
   against hero-bay.webp: coral eyebrow 4.9:1, h1 white 9.1:1, Thai sub 7.8:1,
   lead 6.2:1. A brighter hero photo needs a re-check of these stops. */
.hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(0deg, rgba(9, 34, 46, .92) 0%, rgba(9, 34, 46, .58) 34%, rgba(9, 34, 46, .12) 60%, rgba(9, 34, 46, .30) 100%),
    linear-gradient(90deg, rgba(9, 34, 46, .70) 0%, rgba(9, 34, 46, .30) 46%, rgba(9, 34, 46, 0) 80%);
}
.hero > .wrap {
  position: relative; z-index: var(--z-raised); width: 100%;
  padding-block: calc(var(--nav-h) + var(--s-16)) var(--s-24);
}
.hero-inner { max-width: 720px; }
.hero .eyebrow { color: var(--coral); }
.hero .eyebrow::before { background: linear-gradient(90deg, var(--coral), var(--mango)); }
.hero h1 {
  font-size: var(--t-hero); line-height: 1.18; letter-spacing: -.03em;
  color: var(--white); margin-bottom: var(--s-4);
  text-shadow: 0 2px 30px rgba(9, 34, 46, .5);
}
.hero-lead {
  font-size: var(--t-md); color: rgba(255, 255, 255, .9); max-width: 50ch;
  margin-bottom: var(--s-8); font-weight: 400; line-height: 1.6;
}

/* Stat strip */
/* Dense enough that the numbers hold 4.2:1+ even where the photo behind is
   near-white — a photo has no guaranteed tone, unlike the SVG this replaced. */
.stats {
  position: relative; z-index: var(--z-raised);
  background: rgba(12, 42, 66, .86); border-top: 1px solid rgba(255, 255, 255, .16);
  backdrop-filter: blur(8px);
}
.stats .wrap {
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding-block: var(--s-6); gap: var(--s-4);
}
.stat { text-align: center; }
.stat b {
  display: block; font-size: var(--t-2xl);
  font-weight: 700; color: var(--sky); line-height: 1.15;
}
.stat span { font-size: var(--t-xs); color: rgba(255, 255, 255, .88); }

/* Wave divider */
.wave { display: block; width: 100%; height: auto; }
.wave-top { margin-bottom: -1px; }
.wave-bottom { margin-top: -1px; }

/* Compact hero for inner pages */
.page-hero {
  position: relative; overflow: hidden;
  background: var(--prussian); color: var(--white);
  padding-block: var(--s-16);
}
.page-hero-art { position: absolute; inset: 0; opacity: .75; }
.page-hero-art svg, .page-hero-art img { width: 100%; height: 100%; object-fit: cover; }
.page-hero::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(12, 42, 66, .93) 0%, rgba(12, 42, 66, .80) 52%, rgba(12, 42, 66, .48) 100%);
}
.page-hero .wrap { position: relative; z-index: var(--z-raised); }
.page-hero-inner { max-width: 680px; }
.page-hero h1 { margin: 0 0 var(--s-4); color: var(--white); }
.page-hero h1 em { font-style: normal; color: var(--sky); }
.page-hero-lead { color: rgba(234, 247, 253, .90); font-size: var(--t-md); margin-bottom: 0; }
/* stat strip sits flush to the bottom edge of the band */
.page-hero.with-stats { padding-bottom: 0; }
.page-hero.with-stats .stats { margin-top: var(--s-12); }

/* Breadcrumbs */
.crumbs {
  display: flex; align-items: center; gap: var(--s-1); flex-wrap: wrap;
  list-style: none; margin: 0 0 var(--s-2); padding: 0; font-size: var(--t-xs);
}
.crumbs li { margin: 0; display: inline-flex; align-items: center; gap: var(--s-1); color: rgba(234, 247, 253, .76); }
/* text stays small; the tap area is padded out to 44px */
.crumbs a { color: rgba(234, 247, 253, .88); display: inline-flex; align-items: center; min-height: 44px; }
.crumbs a:hover { color: var(--sky); }
.crumbs .ic { width: 14px; height: 14px; stroke: rgba(234, 247, 253, .55); }
.crumbs [aria-current="page"] { color: var(--sky); }

/* Sticky filter toolbar */
.toolbar {
  position: sticky; top: var(--nav-h); z-index: var(--z-sticky);
  background: rgba(255, 255, 255, .94); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  padding-block: var(--s-3);
}
.toolbar .wrap { display: flex; align-items: center; gap: var(--s-4); }
.toolbar .filter-tabs { flex: 1 1 auto; min-width: 0; }
/* sticky filter bar with no surface of its own: centered icon-over-label tabs
   sitting directly on the section, with a plain teal active underline */
.toolbar-mist {
  background: var(--sea-mist); border-bottom: 0; backdrop-filter: none;
  padding-block: var(--s-4);
}
/* first cards sit close under the sticky tab bar (gap halved) */
#catalog { padding-top: var(--s-4); }
.toolbar-mist .wrap { justify-content: flex-start; }
.toolbar-mist .filter-tabs { flex: 0 1 auto; justify-content: flex-start; }

/* --------------------------------------------------------------------------
   10. Category tiles
   -------------------------------------------------------------------------- */
.cat {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 190px; padding: var(--s-5); overflow: hidden;
  border-radius: var(--r-lg); border: 1px solid var(--line);
  background: var(--frost-deep); color: var(--prussian);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.cat:hover { text-decoration: none; transform: translateY(-4px); box-shadow: var(--e-3); }
.cat-art { position: absolute; inset: 0; opacity: .95; }
.cat-art svg, .cat-art img { width: 100%; height: 100%; object-fit: cover; }
/* Tile art runs from near-white (the minibus in #c-transfer) to deep navy, so the
   caption gets its own floor instead of trusting whatever the illustration puts there. */
.cat::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(12, 42, 66, 0) 30%, rgba(12, 42, 66, .58) 60%, rgba(12, 42, 66, .90) 100%);
}
.cat-body { position: relative; z-index: 2; }
.cat h3 { color: var(--white); margin: 0 0 var(--s-1); font-size: var(--t-md); }
.cat p { color: rgba(255, 255, 255, .90); margin: 0; font-size: var(--t-xs); }
/* Sits above the scrim's transparent top edge, so it carries its own backing. */
.cat .ic {
  position: absolute; top: var(--s-5); left: var(--s-5); z-index: 2;
  stroke: var(--white); box-sizing: content-box; padding: 7px;
  border-radius: 50%; background: rgba(12, 42, 66, .58);
}

/* --------------------------------------------------------------------------
   11. Steps (how to book)
   -------------------------------------------------------------------------- */
.steps { counter-reset: step; display: grid; gap: var(--s-6); }
.step {
  counter-increment: step; position: relative;
  /* top padding must clear the absolutely-placed counter badge (20px offset + 34px) */
  padding: var(--s-6); padding-top: var(--s-16);
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg);
}
.step::before {
  content: counter(step);
  position: absolute; top: var(--s-5); left: var(--s-6);
  width: 34px; height: 34px; border-radius: var(--r-pill);
  display: grid; place-items: center;
  font-weight: 700; font-size: var(--t-base);
  background: var(--blue); color: var(--white);
}
.step h3 { margin: 0 0 var(--s-2); font-size: var(--t-md); }
.step p { margin: 0; font-size: var(--t-sm); color: var(--muted); }

/* --------------------------------------------------------------------------
   12. Trust / anti-scam panel
   -------------------------------------------------------------------------- */
.trust-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--s-8); align-items: start; }

.trust-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-5); }
.trust-list li { display: flex; gap: var(--s-4); margin: 0; }
.trust-list h3 { margin: 0 0 var(--s-1); color: var(--white); font-size: var(--t-md); font-weight: 500; }
.trust-list p { margin: 0; font-size: var(--t-sm); color: rgba(234, 247, 253, .84); }

/* The anti-scam card — deliberately the loudest trust element on the site */
.scam {
  background: var(--white); color: var(--prussian);
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--e-4);
  border-top: 5px solid var(--warn);
}
.scam-head {
  display: flex; gap: var(--s-3); align-items: flex-start;
  padding: var(--s-5) var(--s-6); background: var(--warn-soft);
  border-bottom: 1px solid var(--line-soft);
}
.scam-head .ic { stroke: var(--warn); flex: none; margin-top: 2px; }
.scam-head h3 { margin: 0 0 var(--s-1); font-size: var(--t-md); color: var(--prussian); }
.scam-head p { margin: 0; font-size: var(--t-sm); color: var(--muted); }
.scam-body { padding: var(--s-6); }

.bank {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-4); border: 1px dashed var(--blue); border-radius: var(--r-md);
  background: var(--frost); margin-bottom: var(--s-5);
}
.bank-logo {
  width: 46px; height: 46px; border-radius: var(--r-sm); flex: none;
  display: grid; place-items: center; background: var(--prussian); color: var(--sky);
  font-weight: 700; font-size: var(--t-sm);
}
.bank-logo-kbank { background: #fff; color: var(--charcoal); overflow: hidden; }
.bank-logo-kbank img { width: 100%; height: 100%; object-fit: contain; display: block; padding: 4px; }
.bank-info { min-width: 0; }
.bank-info span { display: block; font-size: var(--t-xs); color: var(--muted); }
.bank-info b { display: block; font-size: var(--t-md); color: var(--prussian); }
.bank-info .acct { font-variant-numeric: tabular-nums; letter-spacing: .04em; }

.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-3); }
.checklist li { display: flex; gap: var(--s-3); margin: 0; font-size: var(--t-sm); line-height: 1.6; }
.checklist .ic { width: 20px; height: 20px; flex: none; margin-top: 3px; }
.checklist .ok .ic { stroke: var(--blue); }
.checklist .no .ic { stroke: var(--warn); }
/* Ocean Blue is too dim on Prussian — dark surfaces switch the tick to Sky */
.checklist.on-dark li { color: rgba(234, 247, 253, .90); }
.checklist.on-dark .ok .ic { stroke: var(--sky); }

/* --------------------------------------------------------------------------
   13. Filter tabs (packages page)
   A horizontal category bar — text tabs with an animated underline that marks
   the active category. The active state is triple-encoded (colour + weight +
   underline) so it never relies on colour alone. On small screens the strip
   scrolls horizontally so all seven categories stay reachable without wrapping.
   -------------------------------------------------------------------------- */
.filter-tabs {
  display: flex;
  align-items: stretch;
  gap: var(--s-6);
  padding-block: var(--s-1);          /* room so focus rings aren't clipped by overflow */
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;              /* Firefox */
  -ms-overflow-style: none;           /* legacy Edge */
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;     /* keep horizontal swipes inside the strip */
}
.filter-tabs::-webkit-scrollbar { display: none; }

.filter-tab {
  position: relative;
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 3px;
  background: none;
  border: 0;
  font-family: var(--font);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1;
  white-space: nowrap;
  color: var(--muted);
  cursor: pointer;
  touch-action: manipulation;
  transition: color var(--dur-fast) var(--ease);
}
.filter-tab::after {                  /* the active-category underline */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--ocean);           /* Andaman Teal — the system's active-state colour */
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--dur) var(--ease);
}
.filter-tab:hover { color: var(--ink); }
.filter-tab:focus-visible {
  outline: 2px solid var(--ocean); outline-offset: 1px; border-radius: var(--r-sm);
  color: var(--ink);
}
.filter-tab.is-active { color: var(--ink); font-weight: 700; }
.filter-tab.is-active::after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .filter-tab::after { transition: none; }
}

/* ---- Tab bar: icon stacked over label; plain teal underline when active ---- */
.toolbar-mist .filter-tab {
  flex-direction: column; gap: var(--s-2); align-items: center;
  padding: 6px 10px 12px; min-width: 68px;
  color: var(--muted);
  white-space: normal; text-align: center; line-height: 1.15;
}
.toolbar-mist .tab-ic {
  width: 26px; height: 26px; flex: none;
  color: var(--muted);
  transition: color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.toolbar-mist .filter-tab:hover { color: var(--ink); }
.toolbar-mist .filter-tab:hover .tab-ic { color: var(--ink); transform: translateY(-1px); }
.toolbar-mist .filter-tab.is-active { color: var(--ink); }
.toolbar-mist .filter-tab.is-active .tab-ic { color: var(--ocean); }

/* ---- Load more (progressive reveal) ---- */
.load-more { display: flex; justify-content: center; margin-top: var(--s-10); }
.load-more .btn { min-width: 160px; }
.load-more .btn:focus-visible { outline: 2px solid var(--ocean); outline-offset: 3px; }
.load-more-chev { transform: rotate(90deg); }

@media (max-width: 600px) {
  .filter-tabs { gap: var(--s-5); }
  .load-more .btn { width: 100%; min-width: 0; }
  .hero-lead br { display: none; }
}

.empty {
  text-align: center; padding: var(--s-16) var(--s-5);
  border: 1.5px dashed var(--line); border-radius: var(--r-lg); background: var(--white);
}
.empty .ic { stroke: var(--blue); margin: 0 auto var(--s-4); width: 40px; height: 40px; }
.empty h3 { margin-bottom: var(--s-2); }
.empty p { color: var(--muted); margin-inline: auto; }

/* --------------------------------------------------------------------------
   14. FAQ accordion
   -------------------------------------------------------------------------- */
.faq { display: grid; gap: var(--s-3); max-width: 820px; }
.faq details {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md);
  overflow: hidden; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.faq details[open] { border-color: var(--blue); box-shadow: var(--e-2); }
.faq summary {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4) var(--s-5); min-height: 56px; cursor: pointer;
  font-weight: 500; font-size: var(--t-base); color: var(--prussian);
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; width: 11px; height: 11px; flex: none; margin-left: auto;
  border-right: 2.25px solid var(--blue); border-bottom: 2.25px solid var(--blue);
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--dur) var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.faq summary:hover { background: var(--frost); }
.faq .answer { padding: 0 var(--s-5) var(--s-5); }
.faq .answer p { margin: 0; font-size: var(--t-sm); color: var(--muted); }

/* --------------------------------------------------------------------------
   15. Testimonials
   -------------------------------------------------------------------------- */
.quote {
  display: flex; flex-direction: column; gap: var(--s-4); height: 100%;
  padding: var(--s-6); background: var(--white);
  border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--e-1);
}
.quote blockquote { margin: 0; font-size: var(--t-sm); line-height: 1.75; color: var(--prussian); flex: 1; }
.quote-by { display: flex; align-items: center; gap: var(--s-3); }
.avatar {
  width: 42px; height: 42px; border-radius: var(--r-pill); flex: none;
  display: grid; place-items: center; background: var(--frost-deep); color: var(--blue-darker);
  font-weight: 700; font-size: var(--t-sm);
}
.quote-by b { display: block; font-size: var(--t-sm); color: var(--prussian); font-weight: 600; }
.quote-by span { font-size: var(--t-xs); color: var(--muted); }

/* --------------------------------------------------------------------------
   16. Split (media + text)
   -------------------------------------------------------------------------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-12); align-items: center; }
.split-art { border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--e-3); background: var(--frost-deep); }
.split-art svg, .split-art img { width: 100%; height: auto; display: block; }
/* photos need a fixed ratio so the grid row height doesn't jump while loading */
.split-art.photo { aspect-ratio: 4 / 3; }
.split-art.photo img { height: 100%; object-fit: cover; }

/* --------------------------------------------------------------------------
   17. CTA band
   -------------------------------------------------------------------------- */
.cta-band { background: var(--deep-ocean); color: var(--white); position: relative; overflow: hidden; }
.cta-band::before {
  content: ''; position: absolute; left: -120px; bottom: -140px;
  width: 380px; height: 380px; border-radius: 50%;
  background: radial-gradient(circle, rgba(69, 175, 193, .22) 0%, rgba(69, 175, 193, 0) 70%);
}
.cta-band::after {
  content: ''; position: absolute; right: -90px; top: -110px;
  width: 360px; height: 360px; border-radius: 50%;
  background: radial-gradient(circle, rgba(243, 161, 95, .18) 0%, rgba(243, 161, 95, 0) 70%);
}
.cta-band .wrap { position: relative; z-index: 2; }
.cta-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-8); flex-wrap: wrap;
}
.cta-inner h2 { margin: 0 0 var(--s-2); color: var(--white); }
.cta-inner p { margin: 0; color: rgba(255, 255, 255, .92); }

/* --------------------------------------------------------------------------
   18. Footer
   -------------------------------------------------------------------------- */
footer { background: var(--prussian-deep); color: rgba(234, 247, 253, .80); font-size: var(--t-sm); }
footer .wrap { padding-block: var(--s-16) var(--s-8); }
.foot-grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: var(--s-8); padding-bottom: var(--s-10);
  border-bottom: 1px solid var(--line-dark);
}
footer h3 {
  color: var(--white); font-size: var(--t-sm); font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase; margin-bottom: var(--s-4);
}
footer ul { list-style: none; padding: 0; margin: 0; }
footer li { margin-bottom: var(--s-2); }
footer a { color: rgba(234, 247, 253, .80); }
/* nav links in the footer are thumb targets too — pad them to 44px */
footer ul:not(.foot-contact) li { margin-bottom: 0; }
footer ul:not(.foot-contact) a {
  display: inline-flex; align-items: center; min-height: 44px; padding-right: var(--s-2);
}
footer a:hover { color: var(--sky); }
footer p { font-size: var(--t-sm); }
/* the navbar brand is tuned for a white bar; invert it inside the dark footer */
footer .brand-name { color: var(--white); }
footer .brand-tag { color: var(--sky); }
.foot-brand .brand { margin-bottom: var(--s-4); }
.foot-contact li { display: flex; gap: var(--s-3); align-items: flex-start; }
.foot-contact .ic { width: 18px; height: 18px; stroke: var(--sky); flex: none; margin-top: 3px; }

.foot-social { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-5); }
.foot-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--r-pill);
  border: 1px solid var(--line-dark); background: rgba(255, 255, 255, .05);
  color: var(--white); transition: background .2s var(--ease-out, ease), border-color .2s var(--ease-out, ease), transform .2s var(--ease-out, ease);
}
.foot-social a:hover { background: var(--ocean); border-color: var(--ocean); transform: translateY(-2px); }
.foot-social .ic { width: 20px; height: 20px; }
.foot-social .ic-brand { fill: currentColor; stroke: none; }
.foot-contact .ic-brand { fill: var(--sky); stroke: none; }

.license {
  display: inline-flex; align-items: center; gap: var(--s-2);
  margin-top: var(--s-4); padding: var(--s-2) var(--s-4);
  border: 1px solid var(--line-dark); border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .05); font-size: var(--t-xs); color: var(--white);
}
.license .ic { width: 17px; height: 17px; stroke: var(--sky); }

.foot-base {
  display: flex; flex-wrap: wrap; gap: var(--s-4);
  justify-content: space-between; align-items: center; padding-top: var(--s-6);
  font-size: var(--t-xs);
}
.foot-base p { margin: 0; font-size: var(--t-xs); }
.foot-legal { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); align-items: center; }
.foot-legal a { color: inherit; text-decoration: none; font-size: var(--t-xs); opacity: .82; border-bottom: 1px solid transparent; transition: opacity var(--dur-2, .2s) var(--ease-out), border-color var(--dur-2, .2s) var(--ease-out); }
.foot-legal a:hover, .foot-legal a:focus-visible { opacity: 1; color: #fff; border-color: rgba(255, 255, 255, .5); }

/* Legal / policy document pages (privacy, terms) */
.legal-body { max-width: 760px; margin: 0 auto; }
.legal-body .legal-updated { color: var(--muted-ink); font-size: var(--t-sm); margin: 0 0 var(--s-6); }
/* inner clauses must not inherit the page-level section padding-block — keep the
   document flowing continuously, height driven only by its own content, with no
   gap between clauses (spacing comes only from each clause's own text rhythm) */
.legal-body section { padding-block: 0; }
.legal-body section + section { margin-top: 0; }
.legal-body h2 { font-size: var(--t-xl); margin: 0 0 var(--s-2); color: var(--charcoal); }
.legal-body h3 { font-size: var(--t-md); margin: var(--s-4) 0 var(--s-2); color: var(--charcoal); }
.legal-body p { margin: 0 0 var(--s-2); color: var(--muted-ink); line-height: 1.55; }
.legal-body ul { margin: 0 0 var(--s-2); padding-left: 0; list-style: none; display: grid; gap: var(--s-2); }
.legal-body ul li { position: relative; margin: 0; padding-left: var(--s-5); color: var(--muted-ink); line-height: 1.5; }
.legal-body ul li::before { content: ""; position: absolute; left: 4px; top: .55em; width: 6px; height: 6px; border-radius: var(--r-pill); background: var(--ocean); }
.legal-body a { color: var(--ocean-darker); }

/* --------------------------------------------------------------------------
   19. Floating contact dock
   -------------------------------------------------------------------------- */
.dock {
  position: fixed; right: var(--s-5); bottom: var(--s-5); z-index: var(--z-dock);
  display: flex; flex-direction: column; gap: var(--s-3);
}
/* secondary action reads as an outlined circle so the filled one stays primary */
.dock a {
  width: 56px; height: 56px; border-radius: var(--r-pill);
  display: grid; place-items: center; box-shadow: var(--e-3);
  background: var(--white); color: var(--blue-darker); border: 1.5px solid var(--line);
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.dock a:hover { transform: translateY(-3px) scale(1.04); background: var(--frost); text-decoration: none; }
.dock a.accent { background: var(--blue); color: var(--white); border-color: var(--blue); }
.dock a.accent:hover { background: var(--blue-dark); color: var(--white); }
/* Official brand colours for the floating LINE / WhatsApp shortcuts */
.dock a.dock-line { background: #06C755; color: #fff; border-color: #06C755; }
.dock a.dock-line:hover { background: #05B24C; color: #fff; }
.dock a.dock-wa { background: #25D366; color: #fff; border-color: #25D366; }
.dock a.dock-wa:hover { background: #1FB457; color: #fff; }
.dock .ic { width: 26px; height: 26px; }

/* --------------------------------------------------------------------------
   20. Brand / CI presentation page
   -------------------------------------------------------------------------- */
.swatch-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-5); }

/* Colour meaning / concept */
.color-story {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4);
  margin-top: var(--s-8); margin-bottom: var(--s-16);
}
.story-item {
  display: flex; gap: var(--s-4); align-items: flex-start;
  padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--white); box-shadow: var(--e-1);
}
.story-dot {
  width: 40px; height: 40px; border-radius: var(--r-pill); flex: none;
  box-shadow: inset 0 0 0 1px rgba(24, 36, 41, .08);
}
.story-item b { display: block; font-size: var(--t-sm); color: var(--prussian); }
.story-item p { margin: var(--s-1) 0 0; font-size: var(--t-xs); color: var(--muted); line-height: 1.6; }
@media (max-width: 720px) { .color-story { grid-template-columns: 1fr; } }
.swatch {
  border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line);
  background: var(--white); box-shadow: var(--e-1);
}
.swatch-chip {
  height: 118px; display: flex; align-items: flex-end; padding: var(--s-3);
  font-size: var(--t-xs); font-weight: 500;
}
.swatch-meta { padding: var(--s-4); }
.swatch-meta b { display: block; font-size: var(--t-sm); color: var(--prussian); }
.swatch-meta code {
  display: inline-block; margin-top: 2px; font-size: var(--t-xs);
  font-family: ui-monospace, 'SF Mono', Menlo, monospace; color: var(--blue-darker);
  letter-spacing: .04em;
}
.swatch-meta p { margin: var(--s-2) 0 0; font-size: var(--t-xs); color: var(--muted); }

/* Colour ratio bar */
.ratio { display: flex; height: 60px; border-radius: var(--r-md); overflow: hidden; box-shadow: var(--e-1); }
.ratio > div {
  display: grid; place-items: center;
  font-size: var(--t-xs); font-weight: 500;
}

/* Logo presentation */
.logo-stage {
  display: grid; place-items: center; padding: var(--s-12) var(--s-6);
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--white);
}
.logo-stage.on-dark { background: var(--prussian); border-color: transparent; }
.logo-stage img { width: 100%; max-width: 340px; height: auto; }
.logo-stage figcaption { margin-top: var(--s-4); font-size: var(--t-xs); color: var(--muted); text-align: center; }
.logo-stage.on-dark figcaption { color: rgba(234, 247, 253, .80); }

.type-sample { padding: var(--s-6); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--white); }
.type-sample + .type-sample { margin-top: var(--s-5); }
.type-sample .label {
  display: block; font-size: var(--t-xs); color: var(--muted); margin-bottom: var(--s-3);
  letter-spacing: .08em; text-transform: uppercase;
}
.type-row { display: flex; align-items: baseline; gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-3); }
.type-row .spec { font-size: var(--t-xs); color: var(--muted); font-family: ui-monospace, Menlo, monospace; white-space: nowrap; }

table {
  width: 100%; border-collapse: collapse; font-size: var(--t-sm);
  background: var(--white); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--e-1);
}
th, td { padding: var(--s-3) var(--s-4); text-align: left; border-bottom: 1px solid var(--line); }
th {
  background: var(--frost-deep); font-weight: 500;
  color: var(--prussian); font-size: var(--t-xs); letter-spacing: .04em; text-transform: uppercase;
}
tbody tr:last-child td { border-bottom: 0; }
td code { font-family: ui-monospace, Menlo, monospace; font-size: var(--t-xs); color: var(--blue-darker); }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.pass { color: #0A6B3D; font-weight: 600; }
.fail { color: var(--warn); font-weight: 600; }

.do-dont { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); }
.dd { padding: var(--s-5); border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--white); }
.dd-head { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-4); font-weight: 500; }
.dd.do { border-left: 4px solid var(--blue); }
.dd.dont { border-left: 4px solid var(--warn); }
.dd.do .dd-head { color: var(--blue-darker); }
.dd.dont .dd-head { color: var(--warn); }
.dd ul { margin: 0; padding-left: var(--s-5); }
.dd li { font-size: var(--t-sm); color: var(--muted); }

.spec-list { display: grid; gap: var(--s-3); }
.spec-item {
  display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap;
  padding: var(--s-4); background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md);
}
.spec-item .spec-name { font-size: var(--t-sm); font-weight: 500; color: var(--prussian); min-width: 150px; }
.spec-item .spec-val { font-family: ui-monospace, Menlo, monospace; font-size: var(--t-xs); color: var(--muted); }

.icon-showcase { display: flex; flex-wrap: wrap; gap: var(--s-4); }
.icon-showcase figure {
  margin: 0; width: 92px; padding: var(--s-3); text-align: center;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md);
}
.icon-showcase .ic { margin: 0 auto var(--s-2); stroke: var(--blue-darker); }
.icon-showcase figcaption { font-size: 12px; color: var(--muted); word-break: break-word; }

/* Demo notice — makes clear this is a pitch demo, not live.
   The one place besides promo badges where the accent orange earns its keep. */
.demo-note {
  /* overrides the 68ch measure that p inherits — this bar spans the viewport */
  margin: 0; max-width: none;
  background: var(--sunset); color: var(--white);
  font-size: var(--t-xs); text-align: center; padding: var(--s-2) var(--s-5);
  display: flex; align-items: center; justify-content: center; gap: var(--s-2);
}
.demo-note .ic { width: 16px; height: 16px; }

/* --------------------------------------------------------------------------
   21. Premium polish — depth, media motion, refined interaction
   These layer on top of the base rules above; scrims, text colours and the
   measured photo-overlay contrast are deliberately left untouched.
   -------------------------------------------------------------------------- */

/* Filled CTA carries a soft vertical depth rather than a flat fill.
   Both stops are Ocean-Blue family, so white text keeps 4.8:1+. */
.btn-primary { background: linear-gradient(180deg, var(--blue) 0%, var(--blue-dark) 100%); }
.btn-primary:hover { background: linear-gradient(180deg, var(--blue-dark) 0%, var(--blue-darker) 100%); }

/* Photo cards: a slow zoom on hover — the signature travel-card move.
   The image lives inside an overflow-hidden 4/3 box, so it never spills. */
.tour-media img, .cat-art img {
  transition: transform var(--dur-slow) var(--ease); will-change: transform;
}
.tour:hover .tour-media img,
.tour:focus-within .tour-media img { transform: scale(1.06); }
.cat:hover .cat-art img { transform: scale(1.07); }

/* A faint navy wash on the top edge gives the photo depth and keeps the
   promo ribbons legible against a bright sky. Sits below the ribbons. */
.tour-media::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(12, 42, 66, .22) 0%, rgba(12, 42, 66, 0) 24%),
    linear-gradient(0deg, rgba(9, 34, 46, .46) 0%, rgba(9, 34, 46, 0) 32%);
}
.tour-media .ribbons { z-index: 2; }
.tour-media .ribbons .badge { box-shadow: 0 2px 8px rgba(12, 42, 66, .28); }

/* Tiles: caption lifts and the scrim deepens on hover, so the whole tile
   reads as one pressable surface. */
.cat-body { transition: transform var(--dur) var(--ease); }
.cat::after { transition: opacity var(--dur) var(--ease); }
.cat:hover .cat-body { transform: translateY(-3px); }
.cat:hover::after { opacity: .82; }

/* Hero photos breathe with a very slow Ken Burns. The scrim above is fixed,
   so measured text contrast is unaffected. Opt-in only. */
@media (prefers-reduced-motion: no-preference) {
  .hero-art img, .page-hero-art img {
    animation: kenburns 26s var(--ease) infinite alternate; transform-origin: 60% 40%;
  }
}
@keyframes kenburns {
  from { transform: scale(1.03); }
  to   { transform: scale(1.12); }
}

/* ---- Hero travel-journal overlay ---- */
.hero-journal {
  position: absolute; inset: 0; z-index: 5; pointer-events: none;
  font-family: var(--font-display);
}
.hero-journal > * { position: absolute; }

.hj-coord {
  top: calc(var(--nav-h) + var(--s-8)); right: var(--s-12);
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto;
  column-gap: var(--s-2); align-items: center; text-align: right;
}
.hj-coord .ic { grid-row: 1 / 3; width: 18px; height: 18px; color: var(--coral); }
.hj-place  { font-size: var(--t-xs); font-weight: 700; letter-spacing: .18em; color: #fff; }
.hj-latlng { grid-column: 2; font-size: .6875rem; letter-spacing: .12em; color: var(--mango); font-variant-numeric: tabular-nums; }

.hj-stamp {
  top: calc(var(--nav-h) + var(--s-16) + var(--s-5)); right: var(--s-12);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: var(--s-2) var(--s-4);
  border: 1.5px solid rgba(255, 255, 255, .5); border-radius: var(--r-sm);
  transform: rotate(-5deg); text-align: center;
}
.hj-stamp-lead { font-size: var(--t-xs); font-weight: 700; letter-spacing: .16em; color: #fff; }
.hj-stamp-sub  { font-size: .625rem; letter-spacing: .2em; color: var(--turquoise); }

.hj-note {
  right: var(--s-12); bottom: var(--s-20); width: 190px;
  display: flex; flex-direction: column; align-items: flex-end; gap: var(--s-2);
  text-align: right;
}
/* Route mirrored so the arrow leads the eye inward toward the hero copy/CTA,
   not off the right edge of the screen. */
.hj-route { width: 120px; height: 60px; transform: scaleX(-1); }
.hj-route-path  { stroke: var(--mango); stroke-width: 2; }
.hj-route-arrow { stroke: var(--mango); stroke-width: 2; fill: none; }
.hj-route-dot   { fill: var(--coral); }
.hj-note-text {
  font-style: italic; font-weight: 500; font-size: var(--t-md);
  color: #fff; text-shadow: 0 1px 12px rgba(9, 34, 46, .6); line-height: 1;
}

@media (max-width: 1080px) { .hj-note { display: none; } }
@media (max-width: 820px)  { .hj-stamp { display: none; } }
@media (max-width: 640px)  { .hero-journal { display: none; } }

@media (prefers-reduced-motion: no-preference) {
  .hj-coord  { opacity: 0; animation: hjFade .8s var(--ease-out) .5s forwards; }
  .hj-stamp  { opacity: 0; animation: hjFade .8s var(--ease-out) .7s forwards, hjFloat 6s ease-in-out 1.5s infinite; }
  .hj-note   { opacity: 0; animation: hjFade .8s var(--ease-out) 1s forwards; }
  .hj-route-path  { stroke-dasharray: 200; stroke-dashoffset: 200; animation: hjDraw 1.2s var(--ease-out) 1.1s forwards; }
  .hj-route-arrow, .hj-route-dot { opacity: 0; animation: hjFade .4s ease 2.1s forwards; }
}
@keyframes hjFade  { to { opacity: 1; } }
@keyframes hjDraw  { to { stroke-dashoffset: 0; } }
@keyframes hjFloat { 0%, 100% { transform: rotate(-5deg) translateY(0); } 50% { transform: rotate(-5deg) translateY(-6px); } }

/* ==========================================================================
   24. Home 2.0 — Warm Coastal editorial components
   Fewer frames, more photography, varied rhythm. Layout leans on whitespace
   and thin rules rather than boxes and shadows.
   ========================================================================== */

/* Wider editorial container + intro helpers */
.wrap-wide { width: 100%; max-width: var(--wrap-wide); margin-inline: auto; padding-inline: var(--s-5); }
.lead { font-size: var(--t-md); color: var(--muted-ink); line-height: 1.6; max-width: 60ch; }
.sf-prussian .lead { color: rgba(234, 242, 243, .8); }

/* Section header — heading left, optional aside right */
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-6) var(--s-10); flex-wrap: wrap; margin-bottom: var(--s-12); }
.sec-head .sec-title { max-width: 48ch; }  /* wide enough for the display-size H2 to stay within 2 lines */
.sec-head .sec-title h2 { margin: 0; }
.sec-head .sec-title .lead { margin: var(--s-4) 0 0; max-width: 52ch; }
.sec-head .sec-aside { max-width: 42ch; }
.sec-head .sec-aside .lead { margin: 0 0 var(--s-3); }

/* Editorial arrow link */
.arrow-link {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-display); font-weight: 600; font-size: var(--t-sm);
  color: var(--ocean-darker); min-height: 44px;
}
.arrow-link .ic { width: 18px; height: 18px; transition: transform var(--dur) var(--ease); }
.arrow-link:hover { text-decoration: none; color: var(--deep-ocean); }
.arrow-link:hover .ic { transform: translateX(5px); }
.sf-prussian .arrow-link, .cta-band .arrow-link { color: var(--turquoise); }
.sf-prussian .arrow-link:hover, .cta-band .arrow-link:hover { color: #fff; }

/* ---- Quick trust bar ----
   Compact credibility strip bridging the dark hero and the catalogue: one row of
   four proofs with soft icon chips, hairline dividers and quiet metric emphasis. */
.trustbar { background: var(--warm-white); border-bottom: 1px solid var(--line); padding-block: 0; }
.trustbar .wrap { display: grid; grid-template-columns: repeat(4, 1fr); padding-block: var(--s-6); }
.trust-item { display: flex; align-items: center; gap: var(--s-3); padding-inline: var(--s-6); position: relative; }
.trust-item:first-child { padding-inline-start: 0; }
.trust-item:last-child  { padding-inline-end: 0; }
/* centred hairline divider sitting in the gutter between items */
.trust-item + .trust-item::before {
  content: ''; position: absolute; inset-inline-start: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 36px; background: var(--line);
}
.trust-ic {
  flex: none; display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: var(--r-md);
  background: var(--sea-mist); color: var(--deep-ocean);
}
.trust-ic .ic { width: 22px; height: 22px; }
.trust-copy b {
  display: block; font-family: var(--font-display); font-size: var(--t-sm);
  color: var(--ink); font-weight: 700; line-height: 1.25; letter-spacing: -.01em;
}
.trust-copy > span { display: block; font-size: var(--t-xs); color: var(--muted-ink); line-height: 1.4; margin-top: 1px; }
.trust-copy > span strong { color: var(--ink); font-weight: 600; }
.trust-metric { color: var(--coral-dark); font-weight: 800; }

/* ---- Find your experience — borderless category tiles ---- */
.cat-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-6); }
.exp-cat { position: relative; display: block; border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 3 / 4; box-shadow: var(--e-1); }
.exp-cat img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); }
.exp-cat:hover img { transform: scale(1.05); }
.exp-cat::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(9, 34, 46, 0) 34%, rgba(9, 34, 46, .5) 66%, rgba(9, 34, 46, .88) 100%);
}
.exp-cat .cap { position: absolute; inset: auto 0 0 0; z-index: 2; padding: var(--s-5); color: #fff; }
.exp-cat h3 { color: #fff; margin: 0 0 3px; font-size: var(--t-lg); }
.exp-cat p { color: rgba(255, 255, 255, .86); margin: 0; font-size: var(--t-xs); }
.exp-cat .go {
  position: absolute; top: var(--s-4); right: var(--s-4); z-index: 2;
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(252, 251, 248, .18); backdrop-filter: blur(4px); color: #fff;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.exp-cat:hover .go { background: var(--coral); color: #fff; transform: rotate(-45deg); }
.exp-cat .go .ic { width: 20px; height: 20px; }

/* ---- Most loved — borderless experience cards ---- */
.exp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-10) var(--s-6); }
.exp { position: relative; display: flex; flex-direction: column; gap: var(--s-3); }
.exp-media { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-lg); overflow: hidden; background: var(--sand-2); }
.exp-media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); }
.exp:hover .exp-media img { transform: scale(1.05); }
.exp-media .badge { position: absolute; top: var(--s-3); left: var(--s-3); z-index: 2; box-shadow: var(--e-1); }
.exp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); }
.exp h3 { font-size: var(--t-lg); margin: 0; line-height: 1.22; }
.exp h3 a { color: var(--ink); }
.exp h3 a:hover { color: var(--ocean-darker); text-decoration: none; }
.exp-rating { display: inline-flex; align-items: center; gap: 3px; font-size: var(--t-sm); color: var(--muted-ink); flex: none; margin-top: var(--s-1); }
.exp-rating .ic { width: 15px; height: 15px; fill: var(--coral); stroke: none; }
.exp-rating b { color: var(--ink); font-weight: 600; }
.exp-desc { font-size: var(--t-sm); color: var(--muted-ink); margin: 0; flex: 1; }
.exp-meta { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); font-size: var(--t-xs); color: var(--muted-ink); }
.exp-meta span { display: inline-flex; align-items: center; gap: var(--s-1); }
.exp-meta .ic { width: 15px; height: 15px; stroke: var(--turquoise-dark); }
.exp-foot { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--line); }
.exp-price { font-family: var(--font-display); font-weight: 700; font-size: var(--t-lg); color: var(--ink); line-height: 1.1; white-space: nowrap; }
.exp-price small { display: block; font-family: var(--font); font-size: var(--t-xs); font-weight: 400; color: var(--muted-ink); letter-spacing: 0; }
.exp-price .unit { font-size: var(--t-xs); font-weight: 400; color: var(--muted-ink); }
/* whole card is one tap target via a stretched title link */
.exp .stretch::after { content: ''; position: absolute; inset: 0; z-index: 3; border-radius: var(--r-lg); }
.exp:hover .arrow-link { color: var(--deep-ocean); }
.exp:hover .arrow-link .ic { transform: translateX(5px); }

/* ---- Editorial split (Local signature, agency) ---- */
.editorial { display: grid; grid-template-columns: 1.02fr .98fr; gap: clamp(2rem, 5vw, 5.5rem); align-items: center; }
.editorial.reverse .editorial-copy { order: 2; }
.editorial.reverse .editorial-media { order: 1; }
.editorial-copy { max-width: 34rem; }
.editorial-copy .lead { margin-bottom: var(--s-6); }
.editorial-media { position: relative; border-radius: var(--r-2xl); overflow: hidden; aspect-ratio: 6 / 5; box-shadow: var(--e-3); background: var(--sand-2); }
.editorial-media.tall { aspect-ratio: 3 / 4; }
.editorial-media > img { width: 100%; height: 100%; object-fit: cover; }

/* --------------------------------------------------------------------------
   24b. Beyond the Shore — signature travel-journal section
   Editorial storytelling: journal meta, a People → Places → Stories route,
   layered imagery and small hand-noted annotations. Uses only CI tokens.
   -------------------------------------------------------------------------- */
.bts-editorial { align-items: center; }
.bts-copy { max-width: 34rem; }

/* Journal meta line — "Local Stories / 01" */
.bts-meta {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-display); font-size: var(--t-xs);
  letter-spacing: .18em; text-transform: uppercase; margin: 0 0 var(--s-3);
}
.bts-meta-label { color: var(--ocean-darker); font-weight: 700; }
.bts-meta-no    { color: var(--muted-ink); font-variant-numeric: tabular-nums; }

/* Story flow — vertical route connecting three chapters */
.bts-flow { list-style: none; margin: var(--s-6) 0 var(--s-8); padding: 0; position: relative; }
/* dashed connector links one circle to the next only — drawn per step except
   the last, so no line dangles below circle 03 */
.bts-step:not(:last-child)::before {
  content: ''; position: absolute; left: 16px; top: 17px; bottom: -25px; width: 2px;
  background: repeating-linear-gradient(var(--ocean) 0 5px, transparent 5px 11px);
  opacity: .55; transform: scaleY(0); transform-origin: top;
  transition: transform 1100ms var(--ease-out) .12s;
}
.bts-step.reveal-in::before { transform: scaleY(1); }

.bts-step { position: relative; display: grid; grid-template-columns: 34px 1fr; gap: var(--s-4); padding-bottom: var(--s-6); }
.bts-step:last-child { padding-bottom: 0; }
.bts-step-no {
  grid-column: 1; z-index: 1; align-self: start;
  width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: var(--r-pill); background: var(--sea-mist); color: var(--ocean-darker);
  font-family: var(--font-display); font-weight: 700; font-size: var(--t-xs);
  font-variant-numeric: tabular-nums; box-shadow: 0 0 0 4px var(--white);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
/* stays light until the reader scrolls that step to the middle of the screen,
   then eases from light to deep — so the column lights up one number at a time
   as you scroll down (driven by .is-lit from the scroll observer in app.js) */
.bts-step.is-lit .bts-step-no { background: var(--ocean); color: var(--white); transition: background-color .8s var(--ease), color .8s var(--ease); }
.bts-step:hover .bts-step-no { background: var(--ocean-darker); color: var(--white); transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.bts-step-body { grid-column: 2; }
.bts-step-time {
  display: inline-block; font-family: var(--font-display); font-weight: 600;
  font-size: var(--t-xs); letter-spacing: .06em; color: var(--ocean);
  text-transform: uppercase;
}
.bts-step-title { display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap; margin: 3px 0 var(--s-1); font-size: var(--t-md); line-height: 1.2; }
.bts-step-en { font-family: var(--font-display); font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.bts-step-th { font-size: var(--t-sm); font-weight: 600; color: var(--muted-ink); }
.bts-step-text { margin: 0; font-size: var(--t-sm); color: var(--muted-ink); line-height: 1.6; max-width: 42ch; }

/* Layered editorial imagery */
.bts-media { position: relative; align-self: center; padding: var(--s-6) var(--s-5) var(--s-10) 0; }
.bts-img { position: relative; border-radius: var(--r-2xl); overflow: hidden; box-shadow: var(--e-3); background: var(--sand-2); }
.bts-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur-slow) var(--ease); }
.bts-img:hover img { transform: scale(1.04); }
.bts-img-main { aspect-ratio: 4 / 5; transform: translate3d(0, var(--par-y, 0px), 0); }
.bts-img-sub {
  position: absolute; left: -6%; bottom: 4%; width: 46%; aspect-ratio: 4 / 3;
  border: 5px solid var(--white); border-radius: var(--r-xl); box-shadow: var(--e-4);
  transform: translate3d(0, var(--par-y, 0px), 0);
}
[data-parallax] { will-change: transform; }

/* Photo caption chips */
.bts-cap {
  position: absolute; left: var(--s-3); bottom: var(--s-3); z-index: 2;
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 6px var(--s-3); border-radius: var(--r-pill);
  background: rgba(24, 36, 41, .72); color: #fff; font-size: var(--t-xs); letter-spacing: .02em;
}
.bts-cap-no { font-family: var(--font-display); font-weight: 700; color: var(--mango); font-variant-numeric: tabular-nums; }
.bts-img-sub .bts-cap { left: var(--s-2); bottom: var(--s-2); padding: 4px var(--s-2); font-size: .75rem; }

/* Journal annotations */
.bts-coord {
  position: absolute; top: var(--s-4); right: var(--s-4); z-index: 2;
  display: grid; grid-template-columns: auto auto; align-items: center; gap: 2px var(--s-2);
  padding: var(--s-2) var(--s-3); background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--e-2);
  transform: translate3d(0, var(--par-y, 0px), 0);
}
.bts-coord .ic { grid-row: 1 / 3; width: 16px; height: 16px; color: var(--coral); }
.bts-coord-place  { font-size: var(--t-xs); font-weight: 700; letter-spacing: .12em; color: var(--ink); }
.bts-coord-latlng { grid-column: 2; font-size: .625rem; letter-spacing: .1em; color: var(--muted-ink); font-variant-numeric: tabular-nums; }

.bts-note {
  position: absolute; right: 3%; bottom: -0.35rem; z-index: 2;
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: var(--t-md); color: var(--ocean-darker);
  transform: translate3d(0, var(--par-y, 0px), 0) rotate(-6deg);
}

@media (max-width: 860px) {
  .bts-copy { max-width: none; }
  .bts-media { padding: var(--s-6) 0 var(--s-8); margin-top: var(--s-2); }
  .bts-img-main { aspect-ratio: 16 / 11; }
  .bts-img-sub { width: 40%; left: 0; }
}
@media (max-width: 560px) {
  .bts-note { display: none; }
  .bts-img-sub { width: 44%; left: -3%; }
  .bts-coord { top: var(--s-2); right: var(--s-2); }
}
@media (prefers-reduced-motion: reduce) {
  .bts-step:not(:last-child)::before { transition: none; transform: scaleY(1); }
  .bts-img:hover img { transform: none; }
  .bts-img-main, .bts-img-sub, .bts-coord { transform: none; }
  .bts-note { transform: rotate(-6deg); }
}

/* overlapping caption chip */
.float-chip {
  position: absolute; z-index: 4; background: var(--warm-white); color: var(--ink);
  border-radius: var(--r-lg); box-shadow: var(--e-4); padding: var(--s-4) var(--s-5);
  display: flex; align-items: center; gap: var(--s-3); max-width: 270px;
}
.float-chip.bl { left: calc(-1 * var(--s-6)); bottom: var(--s-8); }
.float-chip.br { right: calc(-1 * var(--s-6)); bottom: var(--s-8); }
.float-chip .ic { width: 30px; height: 30px; stroke: var(--ocean); flex: none; }
.float-chip b { display: block; font-family: var(--font-display); font-size: var(--t-md); color: var(--ink); line-height: 1.05; }
.float-chip span { font-size: var(--t-xs); color: var(--muted-ink); }

/* editorial list — ticks, no boxes */
.ed-list { list-style: none; padding: 0; margin: 0 0 var(--s-8); display: grid; gap: var(--s-4); }
.ed-list li { display: flex; gap: var(--s-3); margin: 0; font-size: var(--t-base); color: var(--ink); line-height: 1.5; }
.ed-list .ic { width: 22px; height: 22px; flex: none; stroke: var(--turquoise-dark); margin-top: 2px; }
.ed-list b { font-weight: 600; }
.sf-prussian .ed-list li { color: rgba(234, 242, 243, .9); }
.sf-prussian .ed-list .ic { stroke: var(--turquoise); }

/* ---- Values — numbered editorial (on Deep Ocean) ---- */
.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-8) var(--s-10); }
.value { position: relative; padding-top: var(--s-5); }
/* the rule above each 01/02/03 draws left→right when the card scrolls in */
.value::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1.5px;
  background: rgba(255, 255, 255, .26);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 1100ms var(--ease);
}
.value.reveal-in::before { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .value::before { transition: none; }
}
.value .n { font-family: var(--font-display); font-size: var(--t-xl); font-weight: 700; color: var(--coral); line-height: 1; letter-spacing: -.02em; }
.value h3 { font-size: var(--t-lg); margin: var(--s-4) 0 var(--s-2); color: #fff; }
.value-en { font-family: var(--font-display); font-weight: 700; letter-spacing: -.01em; }
.value p { font-size: var(--t-sm); color: rgba(234, 242, 243, .8); margin: 0; line-height: 1.6; }

/* ---- Real Phuket Moments — asymmetric gallery ---- */
.moments { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(140px, 17vw, 210px); gap: var(--s-4); }
.moment { position: relative; overflow: hidden; border-radius: var(--r-md); display: block; background: var(--sand-2); }
.moment img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform var(--dur-slow) var(--ease); }
/* Big Buddha is a tall portrait — pin the crop to the top so the head isn't cut */
.moment img[src*="big-buddha"] { object-position: center top; }
.moment:hover img { transform: scale(1.06); }
.moment.big { grid-column: span 2; grid-row: span 2; }
.moment.wide { grid-column: span 2; }
.moment::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(9, 34, 46, 0) 52%, rgba(9, 34, 46, .55) 100%); opacity: .5; transition: opacity var(--dur) var(--ease); }
.moment:hover::after { opacity: .9; }
.moment .tag { position: absolute; left: var(--s-4); bottom: var(--s-4); z-index: 2; color: #fff; font-size: var(--t-sm); font-weight: 600; display: inline-flex; align-items: center; gap: 7px; text-shadow: 0 1px 10px rgba(9, 34, 46, .55); }
.moment .tag .ic { width: 17px; height: 17px; stroke: #fff; }
/* larger tiles carry a bigger label so the text reads at a glance */
.moment.big .tag, .moment.wide .tag { font-size: var(--t-md); gap: 9px; bottom: var(--s-5); }
.moment.big .tag .ic, .moment.wide .tag .ic { width: 21px; height: 21px; }

/* Editorial hover: a corner "go" arrow fades in, and the label lifts in on
   pointer devices. Touch devices keep the label visible (no hover state). */
.moment::before {
  content: ''; position: absolute; top: var(--s-3); right: var(--s-3); z-index: 3;
  width: 34px; height: 34px; border-radius: var(--r-pill); pointer-events: none;
  background: rgba(9, 34, 46, .5)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E")
    center / 16px no-repeat;
  opacity: 0; transform: translateY(-5px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.moment:hover::before, .moment:focus-visible::before { opacity: 1; transform: translateY(0); background-color: var(--coral); }
@media (hover: hover) {
  .moment .tag { transform: translateY(7px); opacity: 0; transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); }
  .moment:hover .tag, .moment:focus-visible .tag { transform: translateY(0); opacity: 1; }
}
/* Small screens are touch-first: always show the label regardless of any
   lingering hover-capability reporting from emulators. */
@media (max-width: 640px) {
  .moment .tag { opacity: 1 !important; transform: none !important; }
}

/* ---- Brand film — click-to-play video ---- */
.video { max-width: 960px; margin: 0 auto; }
.video-frame {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 16 / 9;                 /* reserves space → no layout shift */
  border-radius: var(--r-lg); background: #0a1a22;
  box-shadow: var(--e-3);
}
.video-poster { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform var(--dur-slow) var(--ease); }
.video-frame::after {                   /* soft scrim so the play button reads */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 60% at 50% 50%, rgba(9, 34, 46, .1), rgba(9, 34, 46, .5));
  transition: background var(--dur) var(--ease);
}
.video-frame:hover .video-poster { transform: scale(1.04); }
.video-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 2; display: grid; place-items: center;
  width: 76px; height: 76px; border-radius: var(--r-pill);
  background: var(--coral); color: var(--on-coral); box-shadow: var(--e-3);
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.video-play .ic { width: 30px; height: 30px; fill: currentColor; stroke: none; margin-left: 3px; }
.video-frame:hover .video-play,
.video-frame:focus-visible .video-play { transform: translate(-50%, -50%) scale(1.08); background: var(--coral-dark); }
.video-frame:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; }
/* Once played, the YouTube iframe replaces the poster/button in the same box */
.video-frame.is-playing { cursor: default; }
.video-frame.is-playing .video-poster, .video-frame.is-playing .video-play,
.video-frame.is-playing::after { display: none; }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 640px) {
  .video-play { width: 60px; height: 60px; }
  .video-play .ic { width: 24px; height: 24px; }
}

/* ---- Reviews — photo cards ---- */
.reviews { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-6); }
.review {
  margin: 0;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--e-1);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.review:hover { transform: translateY(-4px); box-shadow: var(--e-3); }
.review-photo { aspect-ratio: 16 / 11; overflow: hidden; background: var(--sea-mist); }
.review-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur-slow) var(--ease); }
.review:hover .review-photo img { transform: scale(1.05); }
.review-body { display: flex; flex-direction: column; flex: 1; padding: var(--s-5); }
.review-stars { display: inline-flex; gap: 2px; margin-bottom: var(--s-3); }
.review-stars .ic { width: 17px; height: 17px; fill: var(--coral); stroke: none; }
.review blockquote { font-family: var(--font-display); font-weight: 500; font-size: var(--t-md); line-height: 1.5; color: var(--ink); margin: 0 0 var(--s-5); letter-spacing: -.01em; }
.review .by { display: flex; align-items: center; gap: var(--s-3); margin-top: auto; }
.review .avatar { width: 42px; height: 42px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--sea-mist); color: var(--turquoise-dark); font-family: var(--font-display); font-weight: 700; font-size: var(--t-sm); }
.review .by b { display: block; font-size: var(--t-sm); color: var(--ink); font-weight: 600; }
.review .by span { font-size: var(--t-xs); color: var(--muted-ink); }

/* ---- cta-band eyebrow accent — still used by cta-bands on other pages ---- */
.cta-band .eyebrow { color: var(--turquoise); }
.cta-band .eyebrow::before { background: linear-gradient(90deg, var(--coral), var(--mango)); }

/* ---- Plan your trip (white surface: copy + channels left, image right) ---- */
.plan-inner { display: grid; grid-template-columns: 1.02fr .98fr; gap: var(--s-12); align-items: center; }
.plan-copy h2 { color: var(--ink); margin: 0 0 var(--s-3); }
.plan-copy .lead { color: var(--muted-ink); margin: 0 0 var(--s-4); }
.plan-hours { display: flex; align-items: flex-start; gap: var(--s-2); margin: 0 0 var(--s-6); color: var(--muted-ink); font-size: var(--t-sm); line-height: 1.5; }
.plan-hours .ic { width: 18px; height: 18px; margin-top: .12em; stroke: var(--ocean); }
.plan-hours b { color: var(--ink); font-weight: 600; }
.plan-hours .ph-grid { display: grid; grid-template-columns: max-content max-content; gap: 2px var(--s-6); margin-top: 2px; }

/* right-hand image */
.plan-media { border-radius: var(--r-2xl); overflow: hidden; box-shadow: var(--e-3); background: var(--sand-2); aspect-ratio: 16 / 9; }
.plan-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Contact channels — three round icon-only buttons in a single row. LINE emphasised. */
.plan-channels { display: flex; flex-direction: row; gap: var(--s-4); }
.chan {
  width: 60px; height: 60px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--white); border: 1px solid var(--line);
  color: var(--deep-ocean); box-shadow: var(--e-1); -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.chan .ic { width: 26px; height: 26px; }
.chan:hover { border-color: var(--ocean); box-shadow: var(--e-2); transform: translateY(-3px); text-decoration: none; color: var(--ocean); }
.chan:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; }
.chan:active { transform: translateY(0); }
/* LINE = primary channel (coral, white glyph per brand direction) */
.chan-primary { background: var(--coral); border-color: var(--coral); color: #fff; box-shadow: var(--e-2); }
.chan-primary:hover { background: var(--coral-dark); border-color: var(--coral-dark); color: #fff; }
/* Official brand-coloured channels — LINE green / WhatsApp green
   (third-party brand marks, kept true to each brand's own colour) */
.chan-line { background: #06C755; border-color: #06C755; color: #fff; box-shadow: var(--e-2); }
.chan-line:hover { background: #05B24C; border-color: #05B24C; color: #fff; }
.chan-wa { background: #25D366; border-color: #25D366; color: #fff; box-shadow: var(--e-2); }
.chan-wa:hover { background: #1FB457; border-color: #1FB457; color: #fff; }
/* filled brand glyphs (LINE, WhatsApp) render solid, not stroked */
.ic-brand { fill: currentColor; stroke: none; }

/* ---- Footer trust & payment band ---- */
.foot-trust { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-8) var(--s-10); padding-bottom: var(--s-10); margin-bottom: var(--s-10); border-bottom: 1px solid var(--line-dark); }
.foot-trust h3 { color: #fff; font-size: var(--t-sm); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; margin-bottom: var(--s-4); }
.foot-trust .checklist li { color: rgba(234, 242, 243, .82); font-size: var(--t-sm); }
.foot-trust .checklist .ok .ic { stroke: var(--turquoise); }
.foot-trust .checklist .no .ic { stroke: var(--coral); }
.foot-facts { list-style: none; padding: 0; margin: 0 0 var(--s-4); display: grid; gap: var(--s-2); }
.foot-facts li { display: flex; gap: var(--s-2); font-size: var(--t-sm); color: rgba(234, 242, 243, .82); margin: 0; }
.foot-facts .ic { width: 17px; height: 17px; stroke: var(--turquoise); flex: none; margin-top: 3px; }
/* Address row is single-line — center its pin icon with the text */
.foot-facts li:has(use[href="#i-pin"]) { align-items: center; }
.foot-facts li:has(use[href="#i-pin"]) .ic { margin-top: 0; }
.foot-facts em { font-style: normal; color: var(--coral); }
/* clickable address → Google Maps: inherits the muted footer tone, underlines on hover */
.foot-facts a { color: inherit; text-decoration: none; border-bottom: none; transition: color var(--dur) var(--ease); }
.foot-facts a:hover, .foot-facts a:focus-visible { color: #fff; }
.foot-facts .fact-head { display: block; }
.foot-facts .fact-list { list-style: none; margin: var(--s-1) 0 0; padding: 0; display: grid; gap: 2px; }
.foot-facts .fact-list li { display: block; color: inherit; font-size: inherit; margin: 0; }
.foot-facts .fact-list li::before { content: "•"; color: var(--turquoise); margin-right: var(--s-2); }
.foot-bank { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); border: 1px dashed rgba(255, 255, 255, .3); border-radius: var(--r-md); margin-top: var(--s-3); }
.foot-bank .tag { width: 42px; height: 42px; border-radius: var(--r-sm); background: #fff; color: var(--charcoal); display: grid; place-items: center; overflow: hidden; font-weight: 700; font-size: var(--t-xs); flex: none; }
.foot-bank .tag img { width: 100%; height: 100%; object-fit: contain; display: block; padding: 4px; }
.foot-bank b { color: #fff; display: block; font-size: var(--t-sm); }
.foot-bank span { display: block; font-size: var(--t-xs); font-variant-numeric: tabular-nums; letter-spacing: .03em; }

/* --------------------------------------------------------------------------
   22. Scroll reveal
   -------------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(18px); }
.reveal-in {
  opacity: 1; transform: none;
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .card-link:hover, .tour:hover, .tour:focus-within, .cat:hover, .dock a:hover { transform: none; }
  .tour:hover .tour-media img, .tour:focus-within .tour-media img, .cat:hover .cat-art img, .cat:hover .cat-body { transform: none; }
  .tour:hover .tour-foot .btn-primary::after, .tour:focus-within .tour-foot .btn-primary::after { transform: none; }
  .hero-art img, .page-hero-art img { animation: none; }
  /* Home 2.0 — freeze photo zooms, arrow nudges and the rotating go-badge */
  .exp:hover .exp-media img, .exp-cat:hover img, .moment:hover img,
  .editorial-media:hover > img { transform: none; }
  .exp-cat:hover .go { transform: none; }
  .arrow-link:hover .ic, .exp:hover .arrow-link .ic { transform: none; }
  /* keep gallery labels present (don't rely on a hover reveal) */
  .moment .tag { opacity: 1; transform: none; }
  .moment::before { transform: none; }
}

/* --------------------------------------------------------------------------
   23. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  :root { --t-4xl: 2.5rem; --t-3xl: 2rem; --t-2xl: 1.625rem; }
  .g-4 { grid-template-columns: repeat(2, 1fr); }
  .reviews { grid-template-columns: repeat(2, 1fr); }
  .swatch-grid { grid-template-columns: repeat(2, 1fr); }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: var(--s-8); }
  .split { gap: var(--s-8); }
  .trust-grid { grid-template-columns: 1fr; }
  .trustbar .wrap { grid-template-columns: repeat(2, 1fr); gap: var(--s-6) var(--s-8); padding-block: var(--s-8); }
  .trust-item { padding-inline: 0; }
  .trust-item + .trust-item::before { display: none; }
  section { padding-block: var(--s-16); }

  /* Home 2.0 — ease the widest grids in first */
  .exp-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-10) var(--s-6); }
  .editorial { gap: clamp(2rem, 4vw, 3.5rem); }
  .plan-inner { gap: var(--s-10); }
  .float-chip { max-width: 240px; padding: var(--s-3) var(--s-4); }
  .float-chip.bl { left: calc(-1 * var(--s-4)); }
  .float-chip.br { right: calc(-1 * var(--s-4)); }
}

@media (max-width: 860px) {
  .nav-toggle { display: grid; }
  .nav-links {
    /* absolute against the sticky .navbar so the demo bar above it can't push it off */
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--white); padding: var(--s-3) var(--s-5) var(--s-6);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--e-4); max-height: calc(100dvh - var(--nav-h)); overflow-y: auto;
    transform: translateY(-8px); opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
  }
  .nav-links[data-open="true"] { transform: none; opacity: 1; visibility: visible; pointer-events: auto; }
  .nav-links a { min-height: 52px; padding-inline: var(--s-4); font-size: var(--t-base); }
  /* Keep the coral "วางแผนทริป" CTA visible next to the lang toggle + menu button */
  .nav-cta { gap: var(--s-2); }

  /* The transparent overlay nav drops a solid white sheet on mobile, so its
     links must read dark here even before the page has scrolled (otherwise
     the white-on-transparent link colour lands white-on-white). */
  .navbar-overlay .nav-links a { color: var(--ink); }
  .navbar-overlay .nav-links a:hover { background: var(--sand-2); color: var(--ocean-darker); }
  .navbar-overlay .nav-links a[aria-current="page"] { color: var(--ocean-darker); }

  .g-2, .g-3, .g-4 { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
  .split.flip .split-art { order: -1; }
  .do-dont { grid-template-columns: 1fr; }
  .stats .wrap { grid-template-columns: repeat(2, 1fr); gap: var(--s-6) var(--s-4); }
  .hero > .wrap { min-height: 520px; padding-block: var(--s-16) var(--s-20); }
  /* Copy spans the full width here, so a left-to-right scrim leaves line ends
     sitting on bare photo. Both heroes go vertical and hold a flat floor. */
  .hero-scrim {
    background: linear-gradient(180deg, rgba(12, 42, 66, .82) 0%, rgba(12, 42, 66, .78) 40%, rgba(12, 42, 66, .92) 100%);
  }
  .page-hero::after {
    background: linear-gradient(180deg, rgba(12, 42, 66, .88) 0%, rgba(12, 42, 66, .82) 100%);
  }
  .cta-inner { flex-direction: column; align-items: flex-start; }

  /* Home 2.0 — collapse to single-column editorial */
  .sec-head { margin-bottom: var(--s-8); }
  .sec-head .sec-aside { max-width: none; }

  .cat-strip { grid-template-columns: repeat(2, 1fr); gap: var(--s-4); }
  .exp-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-8) var(--s-5); }

  .editorial, .editorial.reverse { grid-template-columns: 1fr; gap: var(--s-8); }
  .editorial.reverse .editorial-copy, .editorial.reverse .editorial-media { order: 0; }
  .editorial-copy { max-width: none; }
  .editorial-media, .editorial-media.tall { aspect-ratio: 16 / 11; }
  .float-chip.bl, .float-chip.br { left: var(--s-4); right: auto; bottom: var(--s-4); max-width: 66%; }

  .values { grid-template-columns: repeat(2, 1fr); gap: var(--s-6) var(--s-8); }

  .moments { grid-template-columns: repeat(2, 1fr); grid-auto-rows: clamp(150px, 40vw, 220px); }
  .moment.big { grid-column: span 2; grid-row: span 1; }
  .moment.wide { grid-column: span 2; }

  .reviews { grid-template-columns: 1fr; gap: var(--s-6); max-width: 520px; }

  .plan-inner { grid-template-columns: 1fr; gap: var(--s-6); }
  .plan-channels { max-width: 460px; }
  .foot-trust { grid-template-columns: 1fr; gap: var(--s-8); }
}

@media (max-width: 560px) {
  :root { --t-4xl: 2.125rem; --t-3xl: 1.75rem; --t-2xl: 1.5rem; --s-20: 3.5rem; --s-24: 4rem; }
  .wrap { padding-inline: var(--s-4); }
  .trustbar .wrap { grid-template-columns: 1fr; gap: var(--s-4); padding-block: var(--s-6); }
  .swatch-grid { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; gap: var(--s-8); }
  .ratio { height: 52px; }
  .ratio > div { font-size: 10px; }
  .btn { width: 100%; }
  .btn-row .btn { width: 100%; }
  .dock { right: var(--s-3); bottom: var(--s-3); }
  .dock a { width: 52px; height: 52px; }
  /* Logomark only + compact CTA so brand · lang · CTA · menu all fit one row */
  .brand-txt { display: none; }
  .nav-cta .btn { width: auto; padding-inline: var(--s-3); white-space: nowrap; }
  .tour-foot { flex-direction: column; align-items: stretch; }
  .bank { flex-wrap: wrap; }
  .spec-item .spec-name { min-width: 0; }

  /* Home 2.0 — single column, tighter gallery */
  .cat-strip { grid-template-columns: 1fr; gap: var(--s-4); }
  .exp-cat { aspect-ratio: 4 / 3; }
  .exp-grid { grid-template-columns: 1fr; gap: var(--s-8); }
  .exp-media { aspect-ratio: 16 / 11; }
  .values { grid-template-columns: 1fr; gap: var(--s-5); }
  .moments { gap: var(--s-3); grid-auto-rows: 42vw; }
  .foot-bank { flex-wrap: wrap; }
  .plan-channels { max-width: none; }
}

/* ==========================================================================
   21) MODALS — tour detail + scam warning (shared shell)
   ========================================================================== */
.modal {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: none; align-items: center; justify-content: center;
  padding: var(--s-4);
}
.modal.is-open { display: flex; }
.modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(18, 36, 41, .55);
  backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .22s ease;
}
.modal.is-open .modal-backdrop { opacity: 1; }
.modal-panel {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  width: 100%; max-width: 560px;
  max-height: calc(100dvh - var(--s-8));
  overflow: hidden;
  background: var(--white);
  border-radius: var(--r-xl);
  box-shadow: var(--e-4);
  transform: translateY(12px) scale(.98);
  opacity: 0; transition: transform .24s var(--ease-out, ease), opacity .24s ease;
}
/* Only the body scrolls; the panel clips so the scrollbar stays inside the
   rounded corners instead of spilling over the panel edge. */
.modal-media { flex: none; }
.modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.modal.is-open .modal-panel { transform: none; opacity: 1; }
.modal-x {
  position: absolute; top: var(--s-3); right: var(--s-3); z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border: none; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .9); color: var(--charcoal, #192E38);
  box-shadow: var(--e-2); cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.modal-x:hover { background: var(--white); transform: scale(1.05); }
.modal-x .ic { width: 20px; height: 20px; }
.modal-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--r-xl) var(--r-xl) 0 0; }
.modal-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Portrait shots crop heads in the 16:10 modal — nudge toward the top so people stay in frame */
.modal-media img[src*="discover-scuba"] { object-position: center top; }
.modal-media img[src*="simon-cabaret"] { object-position: center top; }
.modal-media img[src*="atv-jungle"] { object-position: center 18%; }
.modal-media .ribbons { position: absolute; top: var(--s-3); left: var(--s-3); display: flex; gap: var(--s-2); flex-wrap: wrap; }
.modal-body { padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-4); }
.modal-body h3 { font-family: var(--font-display); font-size: 1.5rem; line-height: 1.2; margin: 0; color: var(--charcoal, #192E38); }
.modal-desc { margin: 0; color: var(--muted, #52616b); line-height: 1.7; }
.modal-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; }
.modal-foot .price { font-size: 1.25rem; font-weight: 700; }
.modal-foot .btn { flex: none; }
/* Trailing arrow on the modal CTA, matching the tour-card button. */
.modal-foot .btn-primary::after {
  content: ''; width: 15px; height: 15px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--dur) var(--ease);
}
.modal-foot .btn-primary:hover::after { transform: translateX(4px); }
.modal-note { margin: 0; font-size: .8125rem; color: var(--muted, #52616b); text-align: center; }

/* per-card detail block: shown in the tour modal, never in the card grid */
.tour-detail { display: none; }
.modal-detail { display: flex; flex-direction: column; gap: var(--s-5); border-top: 1px solid var(--line); padding-top: var(--s-4); }
.modal-detail[hidden] { display: none; }
.detail-block h4 {
  margin: 0 0 var(--s-3); font-size: var(--t-sm); font-weight: 700; color: var(--blue-darker);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2);
}
.detail-cap { font-size: var(--t-xs); font-weight: 400; color: var(--muted); }
.detail-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.detail-list li { display: flex; justify-content: space-between; gap: var(--s-4); font-size: var(--t-sm); line-height: 1.45; }
.detail-list .d-name { color: var(--muted-ink); flex: 1; }
.detail-list .d-val { font-weight: 600; color: var(--charcoal, #192E38); text-align: right; flex: none; max-width: 52%; }
.detail-list .d-val .d-save {
  display: inline-block;
  margin-top: 3px;
  padding: 1px var(--s-2);
  border-radius: var(--r-pill);
  background: var(--coral-soft, rgba(255, 97, 85, .16));
  color: var(--coral-dark, #F5544A);
  font-size: .72em;
  font-weight: 800;
  letter-spacing: .01em;
}
.detail-note { margin: 0; font-size: var(--t-xs); color: var(--muted); line-height: 1.5; }
.detail-block .detail-note { margin-top: var(--s-3); }
/* Slightly tighter note + full block width so a long transfer clause stays on one line in the capped modal */
.detail-note--tight { font-size: 12px; max-width: none; }
/* Bulleted footnote/condition list inside detail blocks */
.detail-bullets { list-style: none; margin: var(--s-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.detail-bullets li { position: relative; padding-left: var(--s-4); font-size: var(--t-xs); color: var(--muted); line-height: 1.5; }
.detail-bullets li::before { content: ""; position: absolute; left: 3px; top: .62em; width: 4px; height: 4px; border-radius: 50%; background: currentColor; }

/* ==========================================================================
   Scam-warning alert — bottom-left corner toast
   Slides in from the bottom-left when the visitor reaches the packages
   section. A bold coral header + coral frame make it read as an urgent
   safety warning rather than a soft info card (colours stay within CI).
   ========================================================================== */
.scam-alert {
  position: fixed; left: var(--s-4); bottom: var(--s-4);
  z-index: calc(var(--z-modal) + 6);
  width: min(320px, calc(100vw - var(--s-6)));
  background: var(--white);
  border: 1px solid var(--coral, #FF6155);
  border-radius: var(--r-lg);
  box-shadow: 0 10px 24px rgba(255, 97, 85, .28), 0 22px 56px rgba(15, 65, 73, .20);
  overflow: hidden;
  transform: translateY(140%); opacity: 0; visibility: hidden;
  transition: transform .36s var(--ease-out, ease), opacity .3s ease, visibility .36s;
}
.scam-alert.is-open { transform: none; opacity: 1; visibility: visible; }
.scam-x {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border: none; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .22); color: var(--white); cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.scam-x:hover { background: rgba(255, 255, 255, .38); transform: scale(1.06); }
.scam-x .ic { width: 17px; height: 17px; }
.scam-head {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: linear-gradient(105deg, var(--coral, #FF6155), var(--coral-dark, #F5544A));
  color: var(--white);
}
.scam-head .scam-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex: none; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .2); color: var(--white);
  animation: scam-pulse 1.6s ease-in-out infinite;
}
.scam-head .scam-ic .ic { width: 22px; height: 22px; }
.scam-heads { display: flex; flex-direction: column; gap: 2px; }
.scam-flag {
  font-size: .8125rem; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; opacity: .95;
}
.scam-head h3 { font-family: var(--font-display); font-size: 1.0625rem; line-height: 1.2; margin: 0; color: var(--white); }
.scam-body { padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-3); font-size: .9rem; }
.scam-lead { margin: 0; line-height: 1.5; color: var(--charcoal, #192E38); font-size: .875rem; }
.scam-lead strong { color: var(--prussian); }
.scam-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.scam-actions .btn { flex: 1 1 auto; }
.scam-note { margin: 0; font-size: .75rem; color: var(--muted, #52616b); text-align: center; }
@keyframes scam-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .5); }
  70%      { box-shadow: 0 0 0 9px rgba(255, 255, 255, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .scam-alert { transition: opacity .2s ease, visibility .2s; }
  .scam-head .scam-ic { animation: none; }
}
@media (max-width: 640px) {
  .scam-alert { left: var(--s-3); right: var(--s-3); bottom: var(--s-3); width: auto; }
}

/* shared warning content (list + bank box), tuned toward the alert palette */
.warn-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--s-3); }
.warn-list li { display: flex; gap: var(--s-3); align-items: flex-start; line-height: 1.55; color: var(--charcoal, #192E38); }
.warn-list li .ic { width: 19px; height: 19px; flex: none; margin-top: 2px; color: var(--ocean); }
.warn-list li .ic-ban { color: var(--coral-dark, #F5544A); }
.warn-bank {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4); border: 1px dashed rgba(255, 97, 85, .5); border-radius: var(--r-lg);
  background: var(--coral-soft, rgba(255, 97, 85, .16)); font-size: .875rem;
}
.warn-bank .tag { display: inline-grid; place-items: center; width: 44px; height: 40px; border-radius: var(--r-sm); background: #fff; color: var(--charcoal); overflow: hidden; font-weight: 700; font-size: .75rem; flex: none; box-shadow: var(--e-1); }
.warn-bank .tag img { width: 100%; height: 100%; object-fit: contain; display: block; padding: 4px; }
.warn-bank b { color: var(--charcoal, #192E38); }

/* ==========================================================================
   22) COOKIE CONSENT
   ========================================================================== */
.cookie {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: calc(var(--z-modal) + 5);
  display: flex; align-items: center; justify-content: center; gap: var(--s-5);
  padding: var(--s-4) clamp(var(--s-4), 5vw, var(--s-12));
  background: var(--white);
  border-top: 1px solid var(--line);
  box-shadow: 0 -6px 24px rgba(18, 36, 41, .12);
  transform: translateY(100%); transition: transform .3s var(--ease-out, ease);
}
.cookie.is-open { transform: none; }
.cookie p { margin: 0; flex: 0 1 auto; text-align: center; font-size: .9375rem; line-height: 1.55; color: var(--charcoal, #192E38); }
.cookie p a { color: var(--ocean); text-decoration: underline; }
.cookie-actions { display: flex; gap: var(--s-3); flex: none; }
.cookie-actions .btn { flex: none; white-space: nowrap; }

/* ==========================================================================
   23) REVIEWS MARQUEE — Google-style auto-slide
   ========================================================================== */
.greviews-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-6); flex-wrap: wrap; margin-bottom: var(--s-8); }
.greviews-head .sec-title { margin: 0; }
/* score badge + CTA read as one tidy cluster, equal height, aligned to the title */
.greviews-actions { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
.gscore { display: inline-flex; align-items: center; gap: var(--s-3); }
.gscore .glogo { width: 28px; height: 28px; flex: none; }
.gscore-body { display: flex; flex-direction: column; gap: 2px; }
.gscore-top { display: flex; align-items: center; gap: var(--s-2); }
.gscore .gnum { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; line-height: 1; color: var(--charcoal, #192E38); font-variant-numeric: tabular-nums; }
.gscore .gstars { display: inline-flex; gap: 1px; color: var(--mango, #F5BE4F); }
.gscore .gstars .ic { width: 15px; height: 15px; fill: currentColor; stroke: none; }
.gscore .gmeta { font-size: .8125rem; color: var(--muted, #52616b); line-height: 1.2; }
.greviews-cta { padding: var(--s-2) var(--s-4); font-size: var(--t-sm); }
.greviews-cta .ic { width: 15px; height: 15px; }
@media (max-width: 640px) {
  .greviews-actions { width: 100%; justify-content: space-between; }
}
.marquee { position: relative; overflow: hidden; --gap: var(--s-6); -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.marquee-track { display: flex; gap: var(--gap); width: max-content; animation: marquee 80s linear infinite; }
.marquee:hover .marquee-track, .marquee:focus-within .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(calc(-50% - var(--gap) / 2)); } }
.greview {
  flex: 0 0 320px; max-width: 320px; margin: 0;
  display: flex; flex-direction: column; gap: var(--s-3);
  padding: var(--s-5);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--e-1);
}
.greview-top { display: flex; align-items: center; gap: var(--s-3); }
.greview-top .avatar { width: 40px; height: 40px; border-radius: var(--r-pill); object-fit: cover; flex: none; }
.greview-top .g-init { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--r-pill); flex: none; font-weight: 700; color: var(--white); font-family: var(--font-display); }
.greview-top b { display: block; line-height: 1.2; color: var(--charcoal, #192E38); }
.greview-top span { font-size: .75rem; color: var(--muted, #52616b); }
.greview-top .gmark { margin-left: auto; width: 20px; height: 20px; flex: none; }
.greview-stars { display: inline-flex; gap: 1px; color: var(--mango, #F5BE4F); }
.greview-stars .ic { width: 16px; height: 16px; fill: currentColor; stroke: none; }
/* unfilled star for ratings below 5 (overall score + per-review) */
.gscore .gstars .ic.is-empty,
.greview-stars .ic.is-empty { color: #d9dee2; }
.greview p { margin: 0; line-height: 1.65; color: var(--charcoal, #192E38); font-size: .9375rem; }
@media (max-width: 640px) { .greview { flex-basis: 280px; } }
@media (prefers-reduced-motion: reduce) {
  .marquee { overflow-x: auto; }
  .marquee-track { animation: none; }
}

/* ==========================================================================
   24) FLIGHT-BOOKING SERVICE NOTE
   ========================================================================== */
.svc-note {
  display: flex; align-items: center; gap: var(--s-4);
  margin-top: var(--s-6);
  padding: var(--s-4) var(--s-5);
  background: linear-gradient(90deg, var(--sea-mist, #E5F5F3), var(--white));
  border: 1px solid var(--line);
  border-left: 4px solid var(--ocean);
  border-radius: var(--r-lg);
  box-shadow: var(--e-1);
}
.svc-note .svc-ic {
  display: inline-grid; place-items: center; flex: none;
  width: 48px; height: 48px; border-radius: var(--r-pill);
  background: var(--ocean); color: var(--white);
}
.svc-note .svc-ic .ic { width: 26px; height: 26px; }
.svc-note .svc-text { flex: 1 1 auto; min-width: 0; }
.svc-note .svc-text b { display: block; color: var(--charcoal, #192E38); font-size: 1.0625rem; }
.svc-note .svc-text p { margin: var(--s-1) 0 0; color: var(--muted, #52616b); line-height: 1.6; font-size: .9375rem; }
.svc-note .btn { flex: none; }
@media (max-width: 640px) {
  .svc-note { flex-wrap: wrap; }
  .svc-note .btn { width: 100%; }
}

@media (max-width: 560px) {
  .cookie { flex-direction: column; align-items: stretch; gap: var(--s-3); padding: var(--s-4); }
  .cookie-actions { width: 100%; }
  .cookie-actions .btn { flex: 1; }
}

/* ==========================================================================
   Find Your Phuket — trip matcher
   ========================================================================== */
.tm-layout { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: var(--s-16); align-items: center; }
.tm-intro { align-self: center; }
.tm-intro .lead { margin-bottom: 0; }

/* ---------- matching motif — two nodes linked into a match, echoing the quiz ---------- */
.tm-motif { position: relative; margin-top: var(--s-10); width: 100%; max-width: 300px; }
.tm-map { width: 100%; height: auto; display: block; overflow: visible; }
/* Muted single-hue teal motif — it's a soft decorative backdrop, so it stays
   secondary and lets the interactive card on the right hold the focus. */
.tm-map-route { stroke: var(--turquoise); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1 11; opacity: .5; }
/* sky doodles — soft, low-opacity so the space still reads open */
.tm-map-sun { fill: var(--turquoise); opacity: .32; }
.tm-map-sun-halo { fill: var(--turquoise); opacity: .12; }
.tm-map-cloud { fill: var(--turquoise); opacity: .12; }
.tm-map-spark { fill: var(--turquoise); opacity: .4; }
.tm-map-plane-badge { fill: var(--ocean); opacity: .55; }
.tm-map-plane-ic { fill: none; stroke: var(--white); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tm-map-pinglow { fill: rgba(15, 65, 73, .1); }
.tm-map-pindrop { fill: var(--ocean); opacity: .55; }
.tm-map-pinic { fill: none; stroke: var(--white); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: no-preference) {
  .tm-map-route { animation: tmRouteFlow 1.1s linear infinite; }
  .tm-map-plane { animation: tmPlaneBob 3s var(--ease) infinite; }
  .tm-map-pin { animation: tmPinBob 2.6s var(--ease) infinite; }
  .tm-map-spark { animation: tmTwinkle 2.8s var(--ease) infinite; }
  .tm-map-spark-2 { animation-delay: .9s; }
  .tm-map-spark-3 { animation-delay: 1.7s; }
}
@keyframes tmRouteFlow { to { stroke-dashoffset: -12; } }
@keyframes tmPlaneBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes tmPinBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes tmTwinkle { 0%, 100% { opacity: .25; } 50% { opacity: .7; } }

.tm-card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--e-2);
  padding: var(--s-8) var(--s-8) var(--s-6);
  overflow: hidden;
}
/* soft ambient wash at the top of the card so it feels less flat behind the orb */
.tm-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 190px; z-index: 0;
  background: radial-gradient(120% 100% at 50% -10%, var(--sea-mist), transparent 70%);
  pointer-events: none;
}
.tm-progress, .tm-form, .tm-result { position: relative; z-index: 1; }

/* ---------- start gate — a "press start" screen that frames the matcher as a game ---------- */
.tm-start { position: relative; z-index: 1; text-align: center; padding: var(--s-2) var(--s-1) 0; }
.tm-start[hidden] { display: none; }
.tm-start-badge {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 5px var(--s-3); border-radius: var(--r-pill);
  background: var(--sea-mist); color: var(--ocean-darker);
  font-family: var(--font-display); font-weight: 700; font-size: var(--t-xs); letter-spacing: .04em;
}
.tm-start-badge .ic { width: 15px; height: 15px; color: var(--coral); }
.tm-start-icon {
  position: relative; width: 88px; height: 88px; margin: var(--s-6) auto var(--s-5);
  display: grid; place-items: center; border-radius: 50%;
  background: linear-gradient(135deg, var(--ocean), var(--turquoise)); color: #fff;
  box-shadow: 0 14px 30px -12px rgba(1,126,135,.65), inset 0 2px 6px rgba(255,255,255,.35);
}
.tm-start-icon .ic { width: 42px; height: 42px; }
/* a pulsing halo that invites a tap */
.tm-start-icon::before {
  content: ""; position: absolute; inset: -8px; border-radius: 50%;
  border: 2px solid var(--turquoise); opacity: .5;
}
@media (prefers-reduced-motion: no-preference) {
  .tm-start-icon::before { animation: tmHalo 2.4s var(--ease) infinite; }
}
@keyframes tmHalo { 0% { transform: scale(1); opacity: .5; } 70% { transform: scale(1.28); opacity: 0; } 100% { opacity: 0; } }
.tm-start-title { margin: 0; font-size: var(--t-xl); line-height: 1.2; color: var(--ink); }
.tm-start-desc { margin: var(--s-3) auto 0; max-width: 42ch; color: var(--muted); font-size: var(--t-md); line-height: 1.6; }
.tm-start-steps { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-5) 0 var(--s-6); padding: 0; list-style: none; }
.tm-start-steps li {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 5px var(--s-3) 5px 5px; border-radius: var(--r-pill);
  background: var(--white); border: 1.5px solid var(--line); color: var(--ink);
  font-weight: 600; font-size: var(--t-xs); box-shadow: 0 2px 0 rgba(15,65,73,.06);
}
.tm-start-steps b { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--ocean); color: #fff; font-family: var(--font-display); font-size: 11px; }
.tm-start-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3); }
.tm-start-btn, .tm-start-alt { flex: 1 1 auto; justify-content: center; }
/* primary CTA sits on the right; secondary on the left */
.tm-start-btn { order: 2; }
.tm-start-alt { order: 1; }
.tm-start-note { margin: var(--s-4) 0 0; color: var(--muted); font-size: var(--t-xs); }
/* narrow screens: stack the two actions, primary on top */
@media (max-width: 480px) {
  .tm-start-actions { flex-direction: column; }
  .tm-start-btn { order: 0; }
  .tm-start-alt { order: 1; }
}
@media (prefers-reduced-motion: no-preference) {
  .tm-start { animation: tmIn var(--dur) var(--ease-out) both; }
}

.tm-progress {
  display: flex; flex-direction: column; gap: var(--s-4);
  margin-bottom: var(--s-6);
}
.tm-progress-row { display: flex; align-items: center; gap: var(--s-4); }

/* ---- level tracker: 3 labelled rounds, connected like a game map ---- */
.tm-track { display: flex; align-items: flex-start; gap: var(--s-1); }
.tm-dot {
  position: relative; flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  text-align: center;
}
/* connecting line between dots */
.tm-dot::before {
  content: ""; position: absolute; top: 13px; left: -50%; width: 100%; height: 3px;
  background: var(--sand-2); border-radius: var(--r-pill); z-index: 0;
}
.tm-dot:first-child::before { display: none; }
.tm-dot.is-done::before { background: var(--turquoise); }
.tm-dot b {
  position: relative; z-index: 1;
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--white); border: 2px solid var(--sand-2); color: var(--muted);
  font-family: var(--font-display); font-size: var(--t-xs); font-weight: 700;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) cubic-bezier(.34,1.56,.64,1);
}
.tm-dot-label { font-size: var(--t-xs); font-weight: 600; color: var(--muted); transition: color var(--dur) var(--ease); }
.tm-dot.is-active b { background: var(--ocean); border-color: var(--ocean); color: #fff; transform: scale(1.12); box-shadow: 0 4px 12px -4px rgba(1,126,135,.6); }
.tm-dot.is-active .tm-dot-label { color: var(--ocean-darker); font-weight: 700; }
.tm-dot.is-done b {
  background: var(--turquoise); border-color: var(--turquoise); color: #fff;
  /* swap the number for a check once the round is cleared */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 15px 15px;
  color: transparent;
}
.tm-count { font-family: var(--font-display); font-weight: 700; font-size: var(--t-sm); color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; letter-spacing: .04em; }
.tm-count .tm-cur { color: var(--ocean); }
.tm-count .tm-total { color: var(--muted); }
.tm-bar { position: relative; flex: 1 1 auto; height: 10px; border-radius: var(--r-pill); background: var(--sand-2); box-shadow: inset 0 0 0 1px rgba(15,65,73,.04); overflow: visible; }
.tm-bar-fill { position: relative; display: block; height: 100%; width: 33.33%; border-radius: inherit; background: linear-gradient(90deg, var(--ocean), var(--turquoise)); box-shadow: 0 1px 6px -1px rgba(1,126,135,.5); transition: width var(--dur-slow) cubic-bezier(.34,1.56,.64,1); }
/* a friendly knob that glides along at the head of the fill */
.tm-bar-fill::after {
  content: ""; position: absolute; top: 50%; right: 0; transform: translate(45%, -50%);
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--white); border: 3px solid var(--ocean);
  box-shadow: 0 2px 6px -1px rgba(1,126,135,.5);
}
.tm-form { margin: 0; }
.tm-step { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
.tm-step[hidden] { display: none; }
.tm-q { padding: 0; font-family: var(--font-display); font-weight: 700; font-size: var(--t-lg); color: var(--ink); line-height: 1.25; }
.tm-hint { margin: var(--s-1) 0 var(--s-5); color: var(--muted); font-size: var(--t-sm); }

.tm-chips { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: var(--s-3); }
.tm-chip {
  position: relative;
  display: flex; align-items: center; gap: var(--s-3);
  min-height: 60px; padding: var(--s-3) var(--s-8) var(--s-3) var(--s-3);
  border: 1.5px solid var(--line); border-radius: var(--r-lg);
  background: var(--white); color: var(--ink);
  font: inherit; font-weight: 500; font-size: var(--t-sm); text-align: left;
  cursor: pointer;
  /* clay "lip" — a soft bottom edge that makes the chip feel like a physical button */
  box-shadow: 0 2px 0 rgba(15,65,73,.07);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur-fast) cubic-bezier(.34,1.56,.64,1);
}
.tm-chip .ic {
  box-sizing: content-box; width: 20px; height: 20px; flex: none; padding: var(--s-2);
  border-radius: var(--r-md); background: var(--sea-mist); color: var(--ocean);
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur) cubic-bezier(.34,1.56,.64,1);
}
.tm-chip:hover {
  background: var(--sea-mist); border-color: var(--turquoise);
  transform: translateY(-3px);
  box-shadow: 0 10px 20px -10px rgba(1,126,135,.4), 0 2px 0 rgba(15,65,73,.07);
}
.tm-chip:hover .ic { background: var(--white); transform: rotate(-6deg) scale(1.08); }
.tm-chip:active { transform: translateY(0) scale(.95); box-shadow: 0 1px 0 rgba(15,65,73,.07); }
.tm-chip:focus-visible { outline: 3px solid var(--turquoise); outline-offset: 2px; }
.tm-chip[aria-pressed="true"] {
  background: var(--sea-mist); color: var(--ocean-darker); font-weight: 700;
  border-color: var(--ocean);
}
.tm-chip[aria-pressed="true"] .ic { background: var(--ocean); color: var(--white); transform: scale(1.1); }
/* a little celebratory squish the moment a chip is picked */
@media (prefers-reduced-motion: no-preference) {
  .tm-chip[aria-pressed="true"] { animation: tmChipPop var(--dur) cubic-bezier(.34,1.56,.64,1); }
}
@keyframes tmChipPop { 0% { transform: scale(1); } 45% { transform: scale(1.05); } 100% { transform: scale(1); } }
/* selected check badge — pops in with a springy overshoot */
.tm-chip::after {
  content: ""; position: absolute; top: 10px; right: 10px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--coral) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
  box-shadow: 0 2px 6px -1px rgba(255,97,85,.5);
  opacity: 0; transform: scale(.3) rotate(-25deg); transition: opacity var(--dur) var(--ease), transform var(--dur) cubic-bezier(.34,1.56,.64,1);
  pointer-events: none;
}
.tm-chip[aria-pressed="true"]::after { opacity: 1; transform: scale(1) rotate(0); }

.tm-nav { display: flex; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-8); }
.tm-nav .tm-back[hidden] { display: none; }
.tm-nav .tm-next { margin-left: auto; }

/* ---- matching beat — a short "computing your result" screen ---- */
.tm-matching { position: relative; z-index: 1; text-align: center; padding: var(--s-8) var(--s-2) var(--s-6); }
.tm-matching[hidden] { display: none; }
.tm-matching-orb {
  display: grid; place-items: center; width: 76px; height: 76px; margin: 0 auto var(--s-5);
  border-radius: 50%; background: linear-gradient(135deg, var(--ocean), var(--turquoise)); color: #fff;
  box-shadow: 0 14px 30px -12px rgba(1,126,135,.65), inset 0 2px 6px rgba(255,255,255,.35);
}
.tm-matching-orb .ic { width: 36px; height: 36px; }
.tm-matching-text { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: var(--t-lg); color: var(--ink); }
.tm-matching-dots { display: inline-flex; gap: 6px; margin-top: var(--s-3); }
.tm-matching-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--coral); display: block; }
@media (prefers-reduced-motion: no-preference) {
  .tm-matching-orb { animation: tmOrbSpin 1.1s cubic-bezier(.5,.1,.5,.9) infinite; }
  .tm-matching-dots i { animation: tmBounce 1s var(--ease) infinite; }
  .tm-matching-dots i:nth-child(2) { animation-delay: .15s; }
  .tm-matching-dots i:nth-child(3) { animation-delay: .3s; }
  .tm-matching { animation: tmIn var(--dur) var(--ease-out) both; }
}
@keyframes tmOrbSpin { 0% { transform: rotate(0) scale(1); } 50% { transform: rotate(180deg) scale(1.06); } 100% { transform: rotate(360deg) scale(1); } }
@keyframes tmBounce { 0%, 100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(-7px); opacity: 1; } }

/* result */
.tm-result[hidden] { display: none; }
.tm-result-eyebrow {
  display: inline-flex; align-items: center; gap: var(--s-2);
  margin: 0 0 var(--s-3); font-family: var(--font-display); font-weight: 700;
  font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--coral);
}
/* the recommended package type — the headline of the result */
.tm-result-type {
  display: inline-flex; align-items: center; margin: 0 0 var(--s-3);
  padding: 6px var(--s-4); border-radius: var(--r-pill);
  background: var(--sea-mist); color: var(--ocean-darker);
  font-family: var(--font-display); font-weight: 700; font-size: var(--t-md); line-height: 1.2;
}
.tm-result-type:empty { display: none; }
.tm-result-title { margin: 0; font-size: var(--t-xl); line-height: 1.15; color: var(--ink); }
.tm-result-tags { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-4) 0 0; }
.tm-tag { display: inline-flex; align-items: center; padding: 4px var(--s-3); border-radius: var(--r-pill); background: var(--sea-mist); color: var(--ocean-darker); font-size: var(--t-xs); font-weight: 600; }
.tm-result-desc { margin: var(--s-4) 0 0; color: var(--muted); font-size: var(--t-md); line-height: 1.65; max-width: 58ch; }
.tm-result-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-top: var(--s-6); }
/* Normalise line-height so the anchor CTA and the button match in height */
.tm-result-actions .btn { line-height: 1.2; }

/* enter animation for step / result swaps */
@media (prefers-reduced-motion: no-preference) {
  .tm-step.is-active { animation: tmIn var(--dur) var(--ease-out) both; }
  /* deal the answer chips in with a quick stagger, like cards fanning out */
  .tm-step.is-active .tm-chip { animation: tmChipIn var(--dur) var(--ease-out) both; }
  .tm-step.is-active .tm-chip:nth-child(1) { animation-delay: 40ms; }
  .tm-step.is-active .tm-chip:nth-child(2) { animation-delay: 85ms; }
  .tm-step.is-active .tm-chip:nth-child(3) { animation-delay: 130ms; }
  .tm-step.is-active .tm-chip:nth-child(4) { animation-delay: 175ms; }
  .tm-step.is-active .tm-chip:nth-child(5) { animation-delay: 220ms; }
  .tm-step.is-active .tm-chip:nth-child(6) { animation-delay: 265ms; }
  /* the result gets a friendlier springy pop to feel like a reveal */
  .tm-result.is-shown { animation: tmPopIn var(--dur-slow) cubic-bezier(.34,1.56,.64,1) both; }
  .tm-result.is-shown .tm-result-type { animation: tmChipPop var(--dur-slow) cubic-bezier(.34,1.56,.64,1) 120ms both; }
}
@keyframes tmChipIn { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes tmIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes tmPopIn { from { opacity: 0; transform: scale(.92) translateY(10px); } to { opacity: 1; transform: none; } }

/* reduced motion: keep the playful states but drop the movement */
@media (prefers-reduced-motion: reduce) {
  .tm-chip:hover, .tm-chip:active { transform: none; }
  .tm-chip:hover .ic, .tm-chip[aria-pressed="true"] .ic { transform: none; }
}

@media (max-width: 860px) {
  .tm-layout { grid-template-columns: 1fr; gap: var(--s-8); }
  .tm-intro { text-align: center; }
  /* the motif exists to fill the empty desktop column — redundant when stacked */
  .tm-motif { display: none; }
  .tm-card { max-width: 720px; margin-inline: auto; width: 100%; }
}
@media (max-width: 680px) {
  .tm-card { padding: var(--s-6) var(--s-5); }
  .tm-chips { grid-template-columns: repeat(2, 1fr); }
  .tm-result-actions .btn { flex: 1 1 auto; justify-content: center; }
}
@media (max-width: 400px) {
  .tm-chips { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Phuket, Our Way — full itinerary left, island map + image popup right
   ========================================================================== */
/* section header (left-aligned like other sections) holds the trip-length filter */
.ow-head { max-width: 640px; margin: 0 0 var(--s-10); }
.ow-head .lead { margin-bottom: 0; }

.ow-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); gap: var(--s-14); align-items: start; }

/* day-length toggle (full day / half day) — a section-level filter */
.ow-modes { display: inline-flex; gap: 4px; margin-top: var(--s-6); padding: 4px; background: var(--sea-mist); border-radius: var(--r-pill); }
.ow-mode { appearance: none; border: 0; cursor: pointer; font-family: var(--font); font-weight: 700; font-size: var(--t-sm); color: var(--ocean-darker); padding: var(--s-2) var(--s-6); border-radius: var(--r-pill); background: transparent; transition: background var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.ow-mode.is-active { background: var(--white); color: var(--ocean); box-shadow: var(--e-1); }
.ow-mode:focus-visible { outline: 2px solid var(--ocean); outline-offset: 2px; }

/* full itinerary list (left column) — plain static list, presented as info only */
.ow-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ow-item { margin: 0; }
.ow-item + .ow-item { border-top: 1px solid var(--line); }
.ow-row { display: flex; align-items: flex-start; gap: var(--s-5); width: 100%; text-align: left; padding: var(--s-4) var(--s-3); font-family: var(--font); color: var(--ink); }
.ow-row-ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-md); background: var(--sea-mist); color: var(--ocean); }
.ow-row-body { min-width: 0; display: flex; flex-direction: column; }
.ow-row-head { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.ow-row-time { font-family: var(--font-display); font-weight: 800; font-size: var(--t-md); line-height: 1; color: var(--ocean); font-variant-numeric: tabular-nums; }
.ow-row-title { margin: 0; font-size: var(--t-base); line-height: 1.3; color: var(--ink); font-weight: 700; }
.ow-row-quote { display: block; margin: 2px 0 0; color: var(--muted); font-size: var(--t-sm); line-height: 1.5; }

/* --- island map (right column) --- */
.ow-map { position: relative; width: 100%; max-width: 460px; margin-inline: auto; }
.ow-svg { width: 100%; height: auto; display: block; overflow: visible; }
.ow-water { fill: var(--turquoise); opacity: .12; }
.ow-island { fill: var(--turquoise); opacity: .34; }
.ow-sea-label { fill: var(--turquoise-dark); opacity: .5; font-family: var(--font); font-weight: 600; font-size: 12px; letter-spacing: .14em; text-anchor: middle; }
.ow-scale-bar { fill: none; stroke: var(--turquoise-dark); stroke-width: 1.5; stroke-linecap: round; opacity: .55; }
.ow-scale-lbl { fill: var(--turquoise-dark); opacity: .6; font-family: var(--font); font-size: 10px; font-weight: 600; text-anchor: middle; }
.ow-compass .ring { fill: var(--white); stroke: var(--line); stroke-width: 1.5; }
.ow-compass .ring-in { fill: none; stroke: var(--sea-mist); stroke-width: 1.5; }
.ow-compass .cn { fill: var(--coral); }
.ow-compass .cs { fill: var(--muted); opacity: .4; }
.ow-compass .dot { fill: var(--white); stroke: var(--line); stroke-width: .75; }
.ow-compass text { fill: var(--ocean-darker); font-family: var(--font-display); font-weight: 800; font-size: 11px; text-anchor: middle; letter-spacing: .02em; }
.ow-route { stroke: var(--coral); stroke-width: 3; stroke-dasharray: 1 11; stroke-linecap: round; opacity: .75; transition: opacity var(--dur) var(--ease); }

/* teardrop pins — hover/tap a time to reveal its place on the left */
.ow-marker { cursor: pointer; transition: opacity var(--dur) var(--ease); }
.ow-marker:focus { outline: none; }
.ow-halo { fill: var(--turquoise); opacity: 0; transition: opacity var(--dur) var(--ease), r var(--dur) var(--ease-out); }
.ow-pin { fill: var(--coral); transition: fill var(--dur) var(--ease); }
.ow-ic { fill: none; stroke: var(--white); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.ow-time { fill: var(--muted); font-family: var(--font-display); font-weight: 600; font-size: 13px; text-anchor: middle; dominant-baseline: central; font-variant-numeric: tabular-nums; pointer-events: none; transition: fill var(--dur) var(--ease); }
.ow-time-bg { fill: var(--white); opacity: .82; }
.ow-marker:hover .ow-pin,
.ow-marker:focus-visible .ow-pin { fill: var(--ocean); }
.ow-marker:hover .ow-halo,
.ow-marker:focus-visible .ow-halo { opacity: .16; r: 22px; }
.ow-marker.is-active .ow-pin { fill: var(--ocean); }
.ow-marker.is-active .ow-halo { opacity: .18; r: 24px; }
.ow-marker.is-active .ow-time { fill: var(--ocean-darker); font-weight: 700; }
@media (prefers-reduced-motion: no-preference) {
  .ow-marker.is-active .ow-halo,
  .ow-marker:hover .ow-halo,
  .ow-marker:focus-visible .ow-halo { animation: owPulse 1.7s var(--ease-out) infinite; }
}
@keyframes owPulse { 0%, 100% { opacity: .14; } 50% { opacity: .3; } }

/* half-day: fade the afternoon leg + its pins */
.ow-half .ow-route-pm { opacity: 0; }
.ow-half .ow-marker:not([data-half]) { opacity: 0; pointer-events: none; }

/* image popup — floats on the map near the active pin (image only) */
.ow-popup { position: absolute; z-index: 5; width: 220px; max-width: 62%; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--e-3); padding: 5px; pointer-events: none; opacity: 0; transform: translateX(-50%) translateY(4px) scale(.97); transform-origin: center bottom; transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease-out); }
.ow-popup[hidden] { display: none; }
.ow-popup.is-open { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
.ow-popup::after { content: ""; position: absolute; left: var(--arrow-x, 50%); width: 12px; height: 12px; background: var(--white); border: 1px solid var(--line); transform: translateX(-50%) rotate(45deg); }
.ow-popup.above::after { bottom: -7px; border-top: none; border-left: none; }
.ow-popup.below::after { top: -7px; border-bottom: none; border-right: none; }
.ow-pop-media { border-radius: calc(var(--r-lg) - 4px); overflow: hidden; aspect-ratio: 16 / 10; background: var(--sea-mist); }
.ow-pop-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 960px) {
  .ow-layout { grid-template-columns: 1fr; gap: var(--s-10); }
  .ow-map { grid-row: 1; max-width: 460px; }
  .ow-list { max-width: 560px; margin-inline: auto; width: 100%; }
}

@media print {
  .navbar, .dock, .demo-note, .cta-band { display: none; }
  body { color: #000; }
}