/* ============================================================
   EXPLERA DMC — FONTS
   Google Fonts (no brand fonts were supplied — see readme).
   Bricolage Grotesque  → display / headings (characterful, premium)
   Hanken Grotesk       → body & UI (clean, professional at small sizes)
   Cormorant Garamond   → editorial serif accents, eyebrows, pull-quotes
   Spline Sans Mono     → codes, TAT license no., net rates, tabular data
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..800&family=Hanken+Grotesk:wght@400;500;600;700&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Spline+Sans+Mono:wght@400;500;600&display=swap');

/* ============================================================
   EXPLERA DMC JAPAN — COLOR TOKENS
   Sakura/rose brand kit from the Japan standalone: cherry-blossom
   pink core, rose-gold accent, deep plum "ink" for premium dark.
   Same variable names as the shared design system, so every
   component recolours from these values.
   ============================================================ */
:root {
  /* --- Brand scale: sakura pink --- */
  --green-50:  #fdf2f6;
  --green-100: #fbe4ed;
  --green-200: #f6c9d8;  /* blossom highlight */
  --green-300: #efa9c0;
  --green-400: #e98ca7;  /* blossom mid */
  --green-500: #de6b90;  /* CORE brand (sakura) */
  --green-600: #cc4f78;
  --green-700: #ab3a61;
  --green-800: #842c4b;
  --green-900: #5c2036;

  /* --- Ink: deep plum (premium dark) --- */
  --ink-950: #180c15;
  --ink-900: #241320;
  --ink-800: #321b2b;  /* wordmark dark */
  --ink-700: #44263a;
  --ink-600: #583244;
  --ink-500: #6e4256;

  /* --- Sand & rose-gold accent --- */
  --sand-50:  #fbf6f3;
  --sand-100: #f6e8e6;
  --sand-200: #eed5d4;
  --sand-300: #e3bcc0;
  --gold-400: #d8a59a;
  --gold-500: #c98b86;  /* accent rose-gold */
  --gold-600: #a96e6c;

  /* --- Warm neutral / stone (rose-grey) --- */
  --white:     #ffffff;
  --stone-50:  #fbf7f8;
  --stone-100: #f4edef;
  --stone-200: #e8dde1;
  --stone-300: #d6c6cc;
  --stone-400: #ab98a1;
  --stone-500: #82707a;
  --stone-600: #5d4e57;
  --stone-700: #443a41;
  --stone-800: #2c2429;
  --stone-900: #1a151a;

  /* --- Status --- */
  --success: #4f9a2e;
  --info:    #6e4256;
  --warning: #c98a1e;
  --danger:  #c0432f;

  /* ============ SEMANTIC ALIASES ============ */
  --brand:          var(--green-500);
  --brand-strong:   var(--green-700);
  --brand-soft:     var(--green-100);
  --brand-tint:     var(--green-50);
  --accent-gold:    var(--gold-500);
  --accent-gold-soft: var(--sand-100);

  /* Backgrounds */
  --bg-page:        var(--stone-50);
  --bg-surface:     var(--white);
  --surface-card:   var(--white);
  --surface-muted:  var(--stone-100);
  --surface-ink:    var(--ink-900);
  --surface-ink-2:  var(--ink-800);
  --surface-sand:   var(--sand-50);

  /* Text */
  --text-strong:    var(--ink-800);
  --text-body:      var(--stone-700);
  --text-muted:     var(--stone-500);
  --text-faint:     var(--stone-400);
  --text-on-dark:   #f7e9ef;
  --text-on-dark-muted: #c9aebb;
  --text-inverse:   var(--white);
  --text-link:      var(--green-700);

  /* Borders & lines */
  --border:         var(--stone-200);
  --border-strong:  var(--stone-300);
  --border-ink:     rgba(247,233,239,0.14);
  --divider:        var(--stone-200);

  /* Focus ring */
  --ring: color-mix(in oklab, var(--green-500) 55%, transparent);
}

/* ============================================================
   EXPLERA DMC — TYPOGRAPHY TOKENS
   ============================================================ */
:root {
  /* Families */
  --font-display: 'Bricolage Grotesque', 'Hanken Grotesk', system-ui, sans-serif;
  --font-sans:    'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --font-serif:   'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-mono:    'Spline Sans Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* Weights */
  --fw-regular: 400; /* @kind other */
  --fw-medium:  500; /* @kind other */
  --fw-semibold: 600; /* @kind other */
  --fw-bold:    700; /* @kind other */

  /* Fluid display scale (clamp for hero/marketing) */
  --fs-display:  clamp(2.75rem, 1.4rem + 5.6vw, 5.25rem); /* @kind other */
  --fs-h1:       clamp(2.25rem, 1.4rem + 3.4vw, 3.5rem);  /* @kind other */
  --fs-h2:       clamp(1.75rem, 1.2rem + 2.1vw, 2.5rem);  /* @kind other */
  --fs-h3:       clamp(1.375rem, 1.1rem + 1vw, 1.75rem);  /* @kind other */
  --fs-h4:       1.25rem;   /* 20 */
  --fs-title:    1.0625rem; /* 17 */
  --fs-body-lg:  1.125rem;  /* 18 */
  --fs-body:     1rem;      /* 16 */
  --fs-sm:       0.875rem;  /* 14 */
  --fs-xs:       0.75rem;   /* 12 */
  --fs-eyebrow:  0.8125rem; /* 13 */

  /* Line heights */
  --lh-tight:   1.05;  /* @kind other */
  --lh-snug:    1.18;  /* @kind other */
  --lh-heading: 1.22;  /* @kind other */
  --lh-body:    1.6;   /* @kind other */
  --lh-relaxed: 1.72;  /* @kind other */

  /* Letter spacing */
  --ls-tighter: -0.03em; /* @kind other */
  --ls-tight:   -0.015em; /* @kind other */
  --ls-normal:  0em;     /* @kind other */
  --ls-wide:    0.04em;  /* @kind other */
  --ls-eyebrow: 0.18em;  /* @kind other */
  --ls-mono:    0.02em;  /* @kind other */
}

/* ============================================================
   EXPLERA DMC — SPACING, RADII, SHADOWS, LAYOUT
   8px base rhythm.
   ============================================================ */
:root {
  /* Spacing scale */
  --space-0:  0;
  --space-1:  0.25rem;  /* 4  */
  --space-2:  0.5rem;   /* 8  */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.5rem;   /* 24 */
  --space-6:  2rem;     /* 32 */
  --space-7:  2.5rem;   /* 40 */
  --space-8:  3rem;     /* 48 */
  --space-9:  4rem;     /* 64 */
  --space-10: 5rem;     /* 80 */
  --space-12: 7rem;     /* 112 */
  --section-y: clamp(3.5rem, 2rem + 6vw, 7rem); /* @kind spacing */

  /* Radii — soft, premium but not pill-everything */
  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  18px;
  --radius-xl:  26px;
  --radius-2xl: 36px;
  --radius-pill: 999px;
  --radius-card: var(--radius-lg);

  /* Shadows — warm, low, layered (never harsh black) */
  --shadow-xs:  0 1px 2px rgba(17,48,43,0.06);
  --shadow-sm:  0 2px 6px rgba(17,48,43,0.07), 0 1px 2px rgba(17,48,43,0.05);
  --shadow-md:  0 8px 22px -8px rgba(17,48,43,0.14), 0 2px 6px rgba(17,48,43,0.06);
  --shadow-lg:  0 22px 48px -16px rgba(17,48,43,0.22), 0 6px 14px rgba(17,48,43,0.08);
  --shadow-xl:  0 40px 80px -24px rgba(12,36,30,0.32);
  --shadow-gold: 0 10px 30px -10px rgba(187,152,70,0.45);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.6);

  /* Layout */
  --maxw-prose:    72ch;     /* @kind other */
  --maxw-content:  1080px;   /* @kind other */
  --maxw-wide:     1280px;   /* @kind other */
  --maxw-full:     1440px;   /* @kind other */
  --gutter:        clamp(1.25rem, 0.5rem + 3vw, 3rem); /* @kind spacing */
  --header-h:      76px;     /* @kind spacing */

  /* Motion */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1); /* @kind other */
  --ease-spring: cubic-bezier(0.34, 1.4, 0.5, 1); /* @kind other */
  --dur-fast: 140ms; /* @kind other */
  --dur:      220ms; /* @kind other */
  --dur-slow: 420ms; /* @kind other */
}

/* ============================================================
   EXPLERA DMC — BASE ELEMENTS & BRAND UTILITIES
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-body);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text-strong);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-tight);
  font-weight: var(--fw-bold);
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); letter-spacing: var(--ls-tighter); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
p { margin: 0 0 1em; text-wrap: pretty; text-align: justify; text-justify: inter-word; -webkit-hyphens: auto; hyphens: auto; }
a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Eyebrow / kicker — uppercase mono-spaced label, the brand's signature label */
.ex-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  font-weight: var(--fw-medium);
  color: var(--brand-strong);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.ex-eyebrow::before {
  content: "";
  width: 22px; height: 2px;
  background: var(--accent-gold);
  display: inline-block;
}

/* Serif editorial accent */
.ex-serif { font-family: var(--font-serif); font-style: italic; font-weight: 500; }

/* Net-rate / code chip */
.ex-mono { font-family: var(--font-mono); letter-spacing: var(--ls-mono); }

/* Prose container */
.ex-prose { max-width: var(--maxw-prose); line-height: var(--lh-relaxed); color: var(--text-body); }
.ex-prose p { margin-bottom: 1.1em; }

/* Hairline gold rule */
.ex-rule-gold { height: 2px; width: 56px; background: var(--accent-gold); border: 0; border-radius: 2px; }

/* Brand gradient text (use sparingly) */
.ex-grad-text {
  background: linear-gradient(100deg, var(--green-600), var(--green-400) 60%, var(--green-200));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

::selection { background: var(--green-200); color: var(--ink-900); }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: 4px; }

/* ============================================================
   EXPLERA DMC — PRODUCTION SITE COMPONENT STYLES
   Ported from the Claude Design prototype (project/ui_kits/website).
   Tokens come from the design-system files concatenated above this.
   ============================================================ */

/* ---------- Layout primitives ---------- */
.container { max-width: var(--maxw-wide); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--section-y) 0; }
.section.pt-0 { padding-top: 0; }
.section.pb-0 { padding-bottom: 0; }
.section.tight { padding: 48px 0; }
.bg-sand { background: var(--surface-sand); }
.bg-ink { background: var(--ink-900); background-image: radial-gradient(120% 180% at 88% -40%, rgba(138,181,42,0.16), transparent 55%); }
.bg-ink950 { background: var(--ink-950); }

.ic { display: inline-block; vertical-align: -0.18em; flex: none; }

.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
.gfill-230 { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.gfill-250 { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.gfill-280 { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.gfit-290 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.gfit-300 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.gfit-280 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.gfit-270 { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.gfit-230 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.gfit-210 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }

.sec-head { display: flex; flex-direction: column; gap: 14px; margin-bottom: 40px; max-width: 680px; }
.sec-head.tight { margin-bottom: 22px; gap: 12px; }
.sec-head h2 { margin: 0; font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem); }
.sec-head.sm h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 1.9rem); }
.sec-head.md h2 { font-size: clamp(1.6rem, 1.3rem + 1.1vw, 2.1rem); }
.sec-head p { margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--text-body); }
.sec-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 38px; }
.sec-row .sec-head { margin-bottom: 0; }
.on-dark h2, .on-dark h3 { color: #fff; }
.ex-eyebrow.on-dark { color: var(--green-300); }

.split-2 { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(28px, 4vw, 64px); align-items: start; }
.split-21 { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(28px, 4vw, 60px); align-items: start; }
.split-13 { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(28px, 4vw, 60px); align-items: start; }
.split-faq { display: grid; grid-template-columns: 0.8fr 1.4fr; gap: clamp(28px, 4vw, 64px); align-items: start; }

.stack { display: flex; flex-direction: column; gap: 16px; }
.stack-sm { display: flex; flex-direction: column; gap: 12px; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-sans); font-weight: 600; font-size: 15px; line-height: 1;
  padding: 11px 20px; border-radius: var(--radius-md); border: 1px solid transparent;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: all var(--dur) var(--ease-out); }
.btn:hover { text-decoration: none; box-shadow: var(--shadow-md); }
.btn:active { transform: scale(0.98); }
.btn-sm { padding: 8px 14px; font-size: 13px; border-radius: var(--radius-sm); gap: 6px; }
.btn-lg { padding: 15px 28px; font-size: 16px; gap: 10px; }
.btn-primary { background: var(--green-500); color: var(--ink-900); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--green-600); }
.btn-ink { background: var(--ink-800); color: #fff; box-shadow: var(--shadow-sm); }
.btn-ink:hover { background: var(--ink-700); }
.btn-gold { background: var(--gold-500); color: #fff; box-shadow: var(--shadow-gold); }
.btn-gold:hover { background: var(--gold-600); box-shadow: var(--shadow-gold); }
.btn-outline { background: transparent; color: var(--ink-800); border-color: var(--border-strong); }
.btn-outline:hover { background: var(--surface-muted); }
.btn-ghost { background: transparent; color: var(--brand-strong); }
.btn-ghost:hover { background: var(--brand-tint); }
.btn-ghost.on-dark { color: #eef3ea; border-color: var(--border-ink); }
.btn-ghost.on-dark:hover { background: rgba(255,255,255,0.08); }
.btn-white { background: #fff; color: var(--ink-800); box-shadow: var(--shadow-sm); }
.btn-glass { background: rgba(255,255,255,0.14); color: #fff; border-color: rgba(255,255,255,0.35); }
.btn-glass:hover { background: rgba(255,255,255,0.24); }

/* ---------- Badges, tags ---------- */
.badge { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-sans);
  font-size: 12.5px; font-weight: 600; padding: 5px 11px; border-radius: var(--radius-pill);
  border: 1px solid; white-space: nowrap; }
.badge-green { background: var(--green-100); color: var(--green-800); border-color: var(--green-200); }
.badge-ink { background: var(--ink-800); color: #eef3ea; border-color: transparent; }
.badge-glass { background: rgba(255,255,255,0.14); color: #fff; border-color: rgba(255,255,255,0.28); }

.tag { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-sans);
  font-size: 14px; font-weight: 500; line-height: 1; padding: 9px 16px; border-radius: var(--radius-pill);
  cursor: pointer; background: var(--surface-card); color: var(--text-body);
  border: 1px solid var(--border); transition: all var(--dur) var(--ease-out); }
.tag:hover { border-color: var(--green-400); background: var(--brand-tint); text-decoration: none; }
.tag.is-active { background: var(--ink-800); color: #eef3ea; border-color: var(--ink-800); }
.tagrow { display: flex; gap: 9px; flex-wrap: wrap; }

/* ---------- Header ---------- */
.hdr { position: sticky; top: 0; z-index: 40; background: transparent;
  border-bottom: 1px solid transparent; transition: all var(--dur) var(--ease-out); }
.hdr.is-solid { background: rgba(250,248,243,0.88); backdrop-filter: blur(12px);
  border-bottom-color: var(--border); }
.hdr-in { max-width: var(--maxw-wide); margin: 0 auto; padding: 0 var(--gutter);
  height: var(--header-h); display: flex; align-items: center; gap: 18px; }
.hdr-logo { display: block; flex: none; }
.hdr-logo img { height: 36px; width: auto; display: block; }
.hdr-logo .logo-dark, .hdr.is-solid .hdr-logo .logo-white { display: none; }
.hdr.is-solid .hdr-logo .logo-dark { display: block; }
.hdr nav { display: flex; margin-left: 4px; min-width: 0; }
.hdr nav > div { position: static; }
.hdr-link { padding: 8px 9px; white-space: nowrap; font-family: var(--font-sans); font-size: 14px;
  font-weight: 500; color: rgba(255,255,255,0.92); display: inline-flex; align-items: center; gap: 4px; }
.hdr-link:hover { text-decoration: none; }
.hdr.is-solid .hdr-link { color: var(--text-strong); }
.hdr-link .ic { color: rgba(255,255,255,0.7); }
.hdr.is-solid .hdr-link .ic { color: var(--text-muted); }
.hdr-right { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.hdr-phone { display: flex; align-items: center; gap: 6px; white-space: nowrap;
  font-family: var(--font-mono); font-size: 13px; color: rgba(255,255,255,0.9); }
.hdr-phone:hover { text-decoration: none; }
.hdr.is-solid .hdr-phone { color: var(--text-body); }
.hdr-phone .ic { color: var(--green-300); }
.hdr.is-solid .hdr-phone .ic { color: var(--brand-strong); }
.hdr .btn-login { background: rgba(255,255,255,0.14); color: #fff; border-color: rgba(255,255,255,0.35); }
.hdr.is-solid .btn-login { background: transparent; color: var(--ink-800); border-color: var(--border-strong); }
.hdr .btn-signup { background: var(--green-500); color: var(--ink-900); }
.hdr.is-solid .btn-signup { background: var(--ink-800); color: #fff; }

.mega { position: absolute; left: 0; right: 0; background: var(--surface-card);
  border-bottom: 1px solid var(--border); box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: all var(--dur) var(--ease-out); max-height: 70vh; overflow-y: auto; }
.has-mega:hover .mega, .has-mega:focus-within .mega, .has-mega.is-open .mega {
  opacity: 1; visibility: visible; transform: none; }
.mega-in { max-width: var(--maxw-wide); margin: 0 auto; padding: 22px var(--gutter) 26px; display: grid; }
.mega-services { grid-template-columns: repeat(4, 1fr); gap: 6px; }
.mega-dests { grid-template-columns: repeat(6, 1fr); gap: 18px; }
.mega-item { display: flex; gap: 11px; padding: 11px 12px; border-radius: var(--radius-md);
  transition: background var(--dur); }
.mega-item:hover { background: var(--brand-tint); text-decoration: none; }
.mega-item .ic { color: var(--brand-strong); margin-top: 2px; }
.mega-item b { display: block; font-family: var(--font-sans); font-size: 14.5px; font-weight: 600; color: var(--text-strong); }
.mega-item small { font-size: 12.5px; color: var(--text-muted); }
.mega-col { display: flex; flex-direction: column; gap: 7px; }
.mega-col > .mega-region { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--brand-strong); font-weight: 600;
  padding-bottom: 5px; border-bottom: 1px solid var(--divider); margin-bottom: 3px; }
.mega-col > a { font-size: 13px; color: var(--text-body); line-height: 1.35; }
.mega-col > a:hover { color: var(--brand-strong); text-decoration: none; }
.mega-col > a.is-flagship { font-weight: 600; }

/* Language switcher */
.lang-switch { position: relative; }
.lang-switch > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: #fff;
  border: 1px solid rgba(255,255,255,0.3); border-radius: 999px; padding: 6px 12px; }
.lang-switch > summary::-webkit-details-marker { display: none; }
.hdr.is-solid .lang-switch > summary { color: var(--ink-800); border-color: var(--divider); }
.lang-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; width: 180px;
  background: #fff; border: 1px solid var(--divider); border-radius: var(--radius-md);
  box-shadow: var(--shadow-md); padding: 6px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.lang-menu button { text-align: left; background: none; border: 0; cursor: pointer; padding: 8px 10px;
  border-radius: var(--radius-sm); font-size: 13px; color: var(--text-body); }
.lang-menu button:hover { background: var(--brand-tint); color: var(--brand-strong); }
[dir="rtl"] .lang-menu { right: auto; left: 0; }
[dir="rtl"] .lang-menu button { text-align: right; }
/* Switcher polish: keep the button on one line, ellipsis long endonyms, mark the
   active language, and never let the menu overflow a small viewport. */
.lang-switch > summary { white-space: nowrap; }
.lang-switch [data-lang-current] { display: inline-block; max-width: 8em; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
.lang-menu { max-width: calc(100vw - 24px); }
.lang-menu button.is-active { background: var(--brand-tint); color: var(--brand-strong); font-weight: 600; }

.menu-toggle { display: none; background: none; border: 0; cursor: pointer; color: #fff; padding: 6px; }
.hdr.is-solid .menu-toggle { color: var(--ink-800); }

/* ---------- Hero — draggable filmstrip ---------- */
.exh { position: relative; margin-top: calc(-1 * var(--header-h)); height: min(92vh, 820px);
  min-height: 560px; background: var(--ink-950); overflow: hidden; }
.exh-track { position: absolute; inset: 0; display: flex; will-change: transform;
  transition: transform 900ms var(--ease-in-out); cursor: grab; touch-action: pan-y; }
.exh-track.is-dragging { transition: none; cursor: grabbing; }
.exh-cell { position: relative; flex: 0 0 100%; height: 100%; overflow: hidden; }
.exh-img { width: 100%; height: 100%; object-fit: cover; display: block; transform-origin: 62% 42%; }
.exh-grad1 { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,24,19,0.66) 0%, rgba(8,24,19,0.18) 28%, rgba(8,24,19,0.46) 58%, rgba(8,24,19,0.93) 100%); }
.exh-grad2 { position: absolute; inset: 0; background: radial-gradient(78% 72% at 16% 94%, rgba(8,24,19,0.62), transparent 60%); }
.exh-glow { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 70% at 88% 4%, rgba(138,181,42,0.16), transparent 60%); }
.exh-ghost { position: absolute; right: clamp(8px, 3vw, 56px); top: calc(var(--header-h) + 4px);
  font-family: var(--font-display); font-weight: 800; font-size: clamp(7rem, 22vw, 22rem);
  line-height: 0.8; color: rgba(255,255,255,0.06); letter-spacing: -0.04em; user-select: none; pointer-events: none; }
.exh-overlay { position: absolute; inset: 0; pointer-events: none; display: flex; align-items: flex-end; }
.exh-overlay-in { width: 100%; max-width: var(--maxw-wide); margin: 0 auto; padding: 0 var(--gutter) clamp(82px, 13vh, 140px); }
.exh-copy { max-width: 760px; display: flex; flex-direction: column; gap: 20px; pointer-events: auto; }
.exh-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--green-300); }
.exh-dash { width: 22px; height: 2px; background: var(--gold-500); flex: none; }
.exh-h { font-family: var(--font-display); color: #fff; font-size: clamp(2.3rem, 1.2rem + 3.6vw, 4.4rem);
  line-height: 1.02; letter-spacing: -0.03em; margin: 0; font-weight: 800; text-wrap: balance;
  text-shadow: 0 2px 28px rgba(8,24,19,0.5); }
/* Words are separated by a real space in the markup (see heroWords in
   lib/pages/home.mjs) so the H1 reads as words to a parser; that space renders
   as the gap between these inline-blocks, so no margin is needed here. */
.exh-h span { display: inline-block; }
.exh-sub { font-family: var(--font-sans); color: rgba(255,255,255,0.86);
  font-size: clamp(1rem, 0.9rem + 0.45vw, 1.2rem); line-height: 1.6; max-width: 560px; margin: 0;
  text-shadow: 0 1px 18px rgba(8,24,19,0.55); }
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.exh-rise { transition: opacity 600ms var(--ease-out), transform 720ms var(--ease-out); }
.exh-pre { opacity: 0; transform: translateY(18px); }
.exh-ctrl { position: absolute; left: 0; right: 0; bottom: 22px; pointer-events: none; }
.exh-ctrl-in { max-width: var(--maxw-wide); margin: 0 auto; padding: 0 var(--gutter);
  display: flex; align-items: center; gap: 18px; }
.exh-counter { font-family: var(--font-mono); font-size: 12.5px; color: rgba(255,255,255,0.7); flex: none; }
.exh-counter span { opacity: 0.5; }
.exh-prog { flex: 1; display: flex; gap: 7px; pointer-events: auto; }
.exh-seg { flex: 1; height: 3px; padding: 0; border: 0; border-radius: 3px; background: rgba(255,255,255,0.22);
  position: relative; overflow: hidden; cursor: pointer; }
.exh-seg-done, .exh-seg-fill { position: absolute; inset: 0; transform-origin: left; background: var(--green-400); }
.exh-seg-done { transform: scaleX(0); transition: transform 500ms var(--ease-out); }
.exh-seg.is-done .exh-seg-done { transform: scaleX(1); }
.exh-seg-fill { transform: scaleX(0); }
.exh-seg.is-active .exh-seg-fill { animation: exhFill 6.5s linear forwards; }
.exh.is-paused .exh-seg.is-active .exh-seg-fill { animation-play-state: paused; }
.exh-arrows { display: flex; gap: 8px; pointer-events: auto; flex: none; }
.exh-arrows button { width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.3);
  background: rgba(8,24,19,0.35); backdrop-filter: blur(8px); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center; }
@keyframes exhKen { from { transform: scale(1.04); } to { transform: scale(1.14); } }
@keyframes exhFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: no-preference) { .exh-ken { animation: exhKen 8s var(--ease-out) forwards; } }
@media (max-width: 640px) { .exh-ghost { display: none; } }

/* Custom interactive cursor (desktop fine-pointer only) */
.exfx-on, .exfx-on a, .exfx-on button, .exfx-on [data-cursor], .exfx-on input,
.exfx-on select, .exfx-on textarea { cursor: none !important; }
.exfx-ring { position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none; will-change: transform;
  width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid rgba(138,181,42,0.85);
  display: flex; align-items: center; justify-content: center;
  transition: width 240ms var(--ease-out), height 240ms var(--ease-out), background 240ms var(--ease-out), border-color 240ms var(--ease-out); }
.exfx-dot { position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none; will-change: transform;
  width: 6px; height: 6px; border-radius: 50%; background: var(--green-400); transition: opacity 200ms; }
.exfx-label { opacity: 0; font-family: var(--font-mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.12em; color: var(--ink-900); transition: opacity 200ms; white-space: nowrap; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; }
  .exh-pre { opacity: 1; transform: none; } }

@media (max-width: 720px) {
  .exh-ctrl-in { gap: 12px; }
  .exh-arrows { display: none; }
}

/* ---------- Trust bar / stats ---------- */
.trustbar { padding: 34px 0; }
.trustbar .container { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; }
.stat { display: flex; flex-direction: column; gap: 4px; }
.stat .v { font-family: var(--font-mono); font-weight: 600; line-height: 1; letter-spacing: -0.01em;
  font-size: clamp(1.7rem, 1.3rem + 1.2vw, 2.3rem); color: #fff; }
.stat .l { font-family: var(--font-sans); font-size: 12.5px; font-weight: 600; color: var(--green-300);
  text-transform: uppercase; letter-spacing: 0.08em; }
.stat .s { font-size: 12.5px; color: var(--text-on-dark-muted); }

/* ---------- Cards ---------- */
.card { background: var(--surface-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.icard { padding: 26px 24px; }
.icard .tile, .tile { width: 46px; height: 46px; border-radius: var(--radius-md);
  background: var(--brand-tint); color: var(--brand-strong);
  display: flex; align-items: center; justify-content: center; flex: none; }
.icard .tile { margin-bottom: 16px; }
.icard h3 { margin: 0 0 8px; font-size: 19px; }
.icard p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--text-body); }
.tile-sm { width: 38px; height: 38px; border-radius: var(--radius-sm); }
.tile-dark { background: var(--ink-800); color: var(--green-300); }
.tile-glass { background: rgba(255,255,255,0.1); color: var(--green-300); }

.scard { display: flex; flex-direction: column; gap: 10px; padding: 24px 22px 26px;
  position: relative; overflow: hidden; transition: all var(--dur) var(--ease-out); color: inherit; }
.scard:hover { text-decoration: none; transform: translateY(-3px); box-shadow: var(--shadow-md);
  border-color: var(--green-300); }
.scard .tile { width: 44px; height: 44px; }
.scard .stag { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--brand-strong); margin-top: 4px; }
.scard h3 { margin: 0; font-size: 18.5px; }
.scard p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text-body); }
.scard .more, .more { margin-top: auto; padding-top: 12px; display: inline-flex; align-items: center;
  gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--text-link); }
.scard .gold-top { position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--gold-400), var(--gold-600)); }

.rowcard { display: flex; gap: 16px; padding: 18px 20px; align-items: flex-start; }
.rowcard h3 { margin: 0 0 4px; font-size: 16.5px; }
.rowcard p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text-body); }
.rowcard b { display: block; font-size: 15px; font-weight: 700; color: var(--text-strong); margin-bottom: 3px; }
.rowcard small { font-size: 13.5px; color: var(--text-body); line-height: 1.55; }

/* ---------- Seasonal calendar (/seasons/) ----------
   The old month name is the page's identity, so it is set large in the serif
   and given room to breathe; the chip strip at the foot of each month page is
   the sibling navigation that keeps the twelve pages one cluster rather than
   twelve orphans. */
.wafu-mark { font-family: var(--font-serif); font-size: clamp(38px, 7vw, 60px); line-height: 1;
  color: #fff; letter-spacing: 0.04em; }

.month-strip { display: flex; flex-wrap: wrap; gap: 10px; }
.month-chip { display: inline-flex; align-items: baseline; gap: 8px;
  padding: 9px 14px; border: 1px solid var(--border); border-radius: var(--radius-pill);
  background: var(--surface-card); color: inherit; transition: all var(--dur) var(--ease-out); }
.month-chip:hover { text-decoration: none; border-color: var(--green-300);
  transform: translateY(-2px); box-shadow: var(--shadow-md); }
.month-chip .mc-kanji { font-family: var(--font-serif); font-size: 19px; color: var(--text-strong); }
.month-chip .mc-name { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--text-muted); }

/* ---------- Event page lists ----------
   .ticks and .spec are used only by the /events/ pages. They shipped with the
   markup but without these rules, so the "why this is hard to sell" checklists
   and the at-a-glance table rendered as unstyled browser defaults. */
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ticks li { display: flex; gap: 10px; align-items: flex-start;
  font-size: 15px; line-height: 1.6; color: var(--text-body); }
.ticks li svg { flex: 0 0 auto; margin-top: 4px; color: var(--green-600); }

.spec { margin: 14px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 10px 18px; }
.spec dt { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--text-muted); padding-top: 3px; }
.spec dd { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--text-strong); }
@media (max-width: 560px) {
  .spec { grid-template-columns: 1fr; gap: 2px 0; }
  .spec dd { margin-bottom: 8px; }
}

/* ---------- Itinerary day-by-day ----------
   /itineraries/ prints the programme as an <ol> whose items already carry a
   "Day 1" label, so a default list marker would number them twice. The marker
   is dropped and the sequence is drawn instead: one rail down the left with a
   node per day, which is how a trade itinerary is read — top to bottom, and
   scannable for the one day the agent is arguing about. */
.daylist { list-style: none; margin: 6px 0 0; padding: 0 0 0 26px; position: relative;
  display: grid; gap: 26px; }
.daylist::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px;
  width: 1px; background: var(--border); }
.daylist > li { position: relative; }
.daylist > li::before { content: ""; position: absolute; left: -26px; top: 6px;
  width: 11px; height: 11px; border-radius: 50%; box-sizing: border-box;
  background: var(--surface-card); border: 2px solid var(--green-600); }
.daylist > li p { margin: 6px 0 0; font-size: 15px; line-height: 1.7; color: var(--text-body); }
.day-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.day-n { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--green-600); }
.day-where { font-size: 17px; font-weight: 600; color: var(--text-strong); }

/* ---------- Destination tiles ---------- */
.dtile { position: relative; border-radius: var(--radius-lg); overflow: hidden;
  aspect-ratio: 4 / 3; display: block; box-shadow: var(--shadow-md); }
.dtile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out); }
.dtile:hover img { transform: scale(1.06); }
.dtile .ovr { position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,24,19,0) 35%, rgba(8,24,19,0.8) 100%); }
.dtile-meta { position: absolute; left: 18px; bottom: 16px; right: 18px;
  display: flex; align-items: flex-end; justify-content: space-between; }
.dtile-meta .rg { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--green-300); margin-bottom: 4px; }
.dtile-meta .nm { font-family: var(--font-display); font-size: 23px; font-weight: 700; color: #fff;
  letter-spacing: -0.01em; }
.dtile-meta .ic { color: #fff; opacity: 0.9; }

.ctile { display: flex; flex-direction: column; overflow: hidden;
  transition: all var(--dur) var(--ease-out); color: inherit; }
.ctile:hover { text-decoration: none; transform: translateY(-3px); box-shadow: var(--shadow-md);
  border-color: var(--green-300); }
.ctile-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.ctile-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ctile-media .ovr { position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,24,19,0) 50%, rgba(8,24,19,0.55) 100%); }
.ctile-media .ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(120% 160% at 85% -30%, rgba(138,181,42,0.3), transparent 55%),
              linear-gradient(140deg, var(--ink-700), var(--ink-950)); }
.ctile-media .ph span { font-family: var(--font-serif); font-style: italic; font-size: 46px;
  color: rgba(238,243,234,0.32); }
.ctile-media .flagchip { position: absolute; top: 12px; left: 12px; font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  background: rgba(255,255,255,0.92); color: var(--ink-800); padding: 4px 9px;
  border-radius: var(--radius-pill); }
.ctile-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.ctile-body h3 { margin: 0; font-size: 18px; }
.ctile-body p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--text-body); }

/* ---------- Steps ---------- */
.step { position: relative; padding: 26px 22px; }
.step .n { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--gold-600); }
.step .tile { width: 44px; height: 44px; margin: 14px 0; background: var(--ink-800); color: var(--green-300); }
.step h3 { margin: 0 0 8px; font-size: 18.5px; }
.step p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--text-body); }

/* ---------- Reviews ---------- */
.review { margin: 0; padding: 24px 24px 22px; display: flex; flex-direction: column; gap: 14px; }
.review .stars { display: flex; gap: 3px; color: var(--gold-500); }
.review .stars svg { fill: currentColor; }
.review blockquote { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--text-body); }
.review figcaption { margin-top: auto; display: flex; align-items: center; gap: 10px;
  border-top: 1px solid var(--divider); padding-top: 14px; }
.review .flag { font-size: 22px; }
.review .who b { display: block; font-size: 14px; font-weight: 700; color: var(--text-strong); }
.review .who small { font-size: 12.5px; color: var(--text-muted); }

/* ---------- Brand wall / affiliations ---------- */
.brandwall { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.brandwall > div { display: flex; align-items: center; justify-content: center; height: 74px;
  background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-md);
  transition: all var(--dur) var(--ease-out); }
.brandwall > div:hover { border-color: var(--green-300); box-shadow: var(--shadow-sm); }
.brandwall span { font-size: 14px; font-weight: 600; color: var(--stone-500); text-align: center; padding: 0 10px; }
.smallprint { margin: 14px 0 0; font-size: 12.5px; color: var(--text-faint); }

.inkpanel { background: var(--ink-900);
  background-image: radial-gradient(120% 200% at 88% -30%, rgba(138,181,42,0.16), transparent 55%);
  border-radius: var(--radius-2xl); padding: clamp(28px, 4vw, 48px); }
.affil { display: flex; gap: 14px; align-items: flex-start; background: rgba(255,255,255,0.06);
  border: 1px solid var(--border-ink); border-radius: var(--radius-lg); padding: 18px; }
.affil .seal { flex: none; width: 52px; height: 52px; border-radius: var(--radius-md); background: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  color: var(--ink-800); }
.affil .seal small { font-family: var(--font-mono); font-size: 9px; font-weight: 600; letter-spacing: 0.06em; }
.affil b { display: block; font-size: 14.5px; font-weight: 700; color: #fff; line-height: 1.3; margin-bottom: 3px; }
.affil small { font-size: 12.5px; color: var(--text-on-dark-muted); line-height: 1.45; }

/* ---------- Discover band ---------- */
.discover { position: relative; overflow: hidden; border-radius: var(--radius-2xl);
  border: 1px solid var(--border); background: var(--surface-card);
  display: grid; grid-template-columns: 1.25fr 1fr; align-items: stretch; }
.discover-copy { padding: clamp(26px, 3.4vw, 44px); display: flex; flex-direction: column; gap: 16px; }
.discover-copy h2 { margin: 0; font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem); }
.discover-copy > p { margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--text-body); }
.discover-items { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.discover-items > div { display: flex; align-items: center; gap: 10px; }
.discover-items .tile { width: 34px; height: 34px; border-radius: var(--radius-sm); }
.discover-items span:last-child { font-size: 14px; font-weight: 600; color: var(--text-strong); }
.discover-media { position: relative; min-height: 320px; }
.discover-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.discover-media .ovr { position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(8,24,19,0.18), transparent 40%); }

/* ---------- FAQ (details/summary) ---------- */
.faq { background: var(--surface-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden; transition: border-color var(--dur) var(--ease-out); }
.faq[open] { border-color: var(--green-300); }
.faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; cursor: pointer; padding: 17px 20px; font-family: var(--font-sans);
  font-size: 15.5px; font-weight: 600; color: var(--text-strong); line-height: 1.4; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ic { color: var(--text-muted); transition: transform var(--dur) var(--ease-out); }
.faq[open] summary .ic { color: var(--brand-strong); transform: rotate(45deg); }
.faq > p { margin: 0; padding: 0 20px 18px; font-size: 14.5px; line-height: 1.65; color: var(--text-body); }
.faq-list { display: flex; flex-direction: column; gap: 10px; max-width: 860px; }
/* AEO answer block (BLUF) — question H2 + a concise, self-contained answer. */
.answer-block { max-width: 860px; margin: 28px 0; padding: 4px 0 4px 20px;
  border-left: 3px solid var(--green-300); }
.answer-block h2 { margin: 0 0 8px; font-size: clamp(1.15rem, 1rem + 0.6vw, 1.4rem); line-height: 1.3; color: var(--text-strong); }
.answer-block p { margin: 0; font-size: 16px; line-height: 1.7; color: var(--text-body); }
.answer-block .updated-stamp { margin: 10px 0 0; font-size: 12.5px; color: var(--text-muted); font-family: var(--font-mono); }
.sticky-aside { position: sticky; top: calc(var(--header-h) + 24px); }

/* ---- Site search ---- */
.hdr-search { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
  border: 0; background: transparent; color: currentColor; cursor: pointer; border-radius: var(--radius-md);
  opacity: 0.9; transition: opacity var(--dur) var(--ease-out), background var(--dur) var(--ease-out); }
.hdr-search:hover { opacity: 1; background: color-mix(in srgb, currentColor 10%, transparent); }
.search-modal { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: flex-start;
  justify-content: center; padding: clamp(60px, 12vh, 140px) 16px 16px; }
.search-modal[hidden] { display: none; }
.search-backdrop { position: absolute; inset: 0; background: rgba(9, 14, 22, 0.55); backdrop-filter: blur(3px); }
.search-panel { position: relative; width: 100%; max-width: 620px; background: var(--surface-card);
  border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  overflow: hidden; display: flex; flex-direction: column; max-height: 78vh; }
.search-bar { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.search-ic { color: var(--text-muted); display: inline-flex; }
.search-input { flex: 1; border: 0; background: transparent; font: inherit; font-size: 16.5px;
  color: var(--text-strong); outline: none; }
.search-close { border: 0; background: transparent; color: var(--text-muted); cursor: pointer;
  display: inline-flex; padding: 4px; border-radius: var(--radius-sm); }
.search-close:hover { color: var(--text-strong); }
.search-results { overflow-y: auto; }
.search-row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 12px 16px; border-bottom: 1px solid var(--border); text-decoration: none; }
.search-row:last-child { border-bottom: 0; }
.search-row:hover, .search-row.is-sel { background: var(--surface-sand); }
.search-row .sr-t { color: var(--text-strong); font-size: 15px; font-weight: 500; }
.search-row .sr-k { flex: none; color: var(--green-300); font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase; }
.search-hint, .search-empty { margin: 0; padding: 16px; font-size: 13.5px; color: var(--text-muted); }

/* ---------- CTA band ---------- */
.ctaband { position: relative; overflow: hidden; border-radius: var(--radius-2xl);
  background: var(--ink-900);
  background-image: radial-gradient(120% 200% at 90% -30%, rgba(138,181,42,0.2), transparent 55%);
  padding: 56px; display: flex; align-items: center; justify-content: space-between;
  gap: 32px; flex-wrap: wrap; }
.ctaband .copy { max-width: 600px; display: flex; flex-direction: column; gap: 16px; }
.ctaband h2 { margin: 0; color: #fff; font-size: clamp(1.9rem, 1.4rem + 1.7vw, 2.7rem); }
.ctaband .copy p { margin: 0; color: var(--text-on-dark-muted); font-size: 16.5px; line-height: 1.6; }
.ctaband .actions { display: flex; flex-direction: column; gap: 12px; min-width: 240px; }
.ctaband .email { font-family: var(--font-mono); font-size: 12.5px; color: var(--text-on-dark-muted);
  text-align: center; margin-top: 2px; }

/* ---------- Newsletter band ---------- */
.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; }

.nlband { background: var(--ink-900);
  background-image: radial-gradient(120% 200% at 88% -30%, rgba(138,181,42,0.18), transparent 55%);
  padding: 52px 0; border-bottom: 1px solid var(--border-ink); }
.nlband-in { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(24px, 4vw, 56px);
  align-items: center; }
.nl-copy { display: flex; flex-direction: column; gap: 12px; }
.nl-copy h2 { margin: 0; color: #fff; font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem); }
.nl-copy p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--text-on-dark-muted); }

.nl-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
.nl-form input[type="email"] { flex: 1 1 240px; min-height: 48px; font-family: var(--font-sans);
  font-size: 16px; color: #fff; background: rgba(255,255,255,0.08);
  border: 1px solid var(--border-ink); border-radius: var(--radius-md); padding: 0 16px;
  outline: none; transition: all var(--dur) var(--ease-out); }
.nl-form input[type="email"]::placeholder { color: var(--text-on-dark-muted); }
.nl-form input[type="email"]:focus { border-color: var(--green-500); box-shadow: 0 0 0 3px var(--ring); }
.nl-form .btn { min-height: 48px; font-size: 16px; }
.nl-form .btn:disabled { opacity: 0.6; cursor: wait; }
.nl-consent { flex-basis: 100%; display: flex; gap: 9px; align-items: flex-start;
  font-family: var(--font-sans); font-size: 12.5px; line-height: 1.55;
  color: var(--text-on-dark-muted); cursor: pointer; }
.nl-consent input[type="checkbox"] { flex: none; width: 15px; height: 15px; margin: 2px 0 0;
  accent-color: var(--green-500); cursor: pointer; }
.nl-consent strong { color: #eef3ea; }
.nl-ok, .nl-err { flex-basis: 100%; margin: 0; font-size: 14px; line-height: 1.55; font-weight: 600; }
.nl-ok { color: var(--green-300); }
.nl-err { color: #f2a0a0; }
.nl-err a { color: inherit; text-decoration: underline; }
.nl-form.is-subscribed input[type="email"], .nl-form.is-subscribed .btn,
.nl-form.is-subscribed .nl-consent { display: none; }

/* ---------- Footer ---------- */
.ftr { background: var(--ink-950); color: var(--text-on-dark-muted); padding-top: 56px; }
.ftr a { color: var(--text-on-dark-muted); }
.ftr a:hover { color: var(--green-300); text-decoration: none; }
.ftr-top { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 28px;
  padding-bottom: 40px; border-bottom: 1px solid var(--border-ink); }
.ftr-brand { display: flex; flex-direction: column; gap: 16px; max-width: 280px; }
.ftr-brand img { height: 52px; width: auto; max-width: 208px; display: block; }
.ftr-brand p { margin: 0; font-size: 14px; line-height: 1.6; }
.ftr-col { display: flex; flex-direction: column; gap: 11px; }
.ftr-h { font-family: var(--font-sans); font-size: 13px; font-weight: 700; color: #eef3ea;
  text-transform: uppercase; letter-spacing: 0.06em; }
.ftr-col a { font-size: 14px; }
.ftr-regions { padding: 28px 0 6px; border-bottom: 1px solid var(--border-ink); }
.ftr-regions .ftr-h { display: block; margin-bottom: 16px; }
.ftr-regions-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 28px; padding-bottom: 22px; }
.ftr-regions-grid > div { font-size: 13px; line-height: 1.9; }
.ftr-regions-grid .rg { color: var(--green-300); font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase; display: block; margin-bottom: 3px; }
.ftr-regions-grid .sep { opacity: 0.45; }
.ftr-markets { padding: 28px 0 6px; border-bottom: 1px solid var(--border-ink); }
.ftr-markets-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 12px; }
.ftr-markets-head .ftr-h { display: inline; }
.ftr-markets-head > a { font-size: 13px; opacity: 0.7; color: var(--text-sub); }
.ftr-markets-head > a:hover { opacity: 1; }
.ftr-markets-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px 28px; padding-bottom: 22px; }
.ftr-markets-grid > div { font-size: 13px; line-height: 1.9; }
.ftr-markets-grid .rg { color: var(--green-300); font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase; display: block; margin-bottom: 3px; }
.ftr-markets-grid .sep { opacity: 0.45; }
.ftr-sites { padding: 22px 0; border-bottom: 1px solid var(--border-ink);
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.ftr-site { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px;
  border-radius: var(--radius-pill); border: 1px solid var(--border-ink);
  font-family: var(--font-mono); font-size: 12.5px; transition: all var(--dur) var(--ease-out); }
.ftr-site:hover { border-color: var(--green-500); }
.ftr-site small { font-size: 10.5px; opacity: 0.7; font-family: var(--font-sans); }
.ftr-base { display: flex; justify-content: space-between; align-items: center;
  padding: 22px 0 30px; flex-wrap: wrap; gap: 12px;
  font-family: var(--font-mono); font-size: 12.5px; }

/* ---------- WhatsApp dock ---------- */
.wa-dock { position: fixed; right: 22px; bottom: 22px; z-index: 50; width: 56px; height: 56px;
  border-radius: 50%; background: #25D366; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 30px -8px rgba(37,211,102,0.6); color: #fff; }
.wa-dock:hover { text-decoration: none; }

/* ---------- Forms / modal ---------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-family: var(--font-sans); font-size: 13.5px; font-weight: 600; color: var(--text-strong); }
.field label .req { color: var(--brand-strong); margin-left: 3px; }
.field input, .field select, .field textarea { width: 100%; font-family: var(--font-sans); font-size: 15px;
  color: var(--text-strong); background: var(--surface-card); border: 1px solid var(--border-strong);
  border-radius: var(--radius-md); padding: 0 14px; height: 46px; outline: none;
  transition: all var(--dur) var(--ease-out); }
.field textarea { padding: 11px 14px; height: auto; min-height: 96px; line-height: 1.5; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--green-500); box-shadow: 0 0 0 3px var(--ring); }
.field .hint { font-size: 12.5px; color: var(--text-muted); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-grid .full { grid-column: 1 / -1; }
.form-foot { grid-column: 1 / -1; display: flex; gap: 12px; align-items: center; }
.form-foot small { font-size: 12.5px; color: var(--text-muted); }

dialog.modal { border: 0; border-radius: var(--radius-xl); width: min(560px, calc(100vw - 40px));
  max-height: 90vh; padding: 0; background: var(--surface-card); box-shadow: var(--shadow-xl); }
dialog.modal::backdrop { background: rgba(8,24,19,0.55); backdrop-filter: blur(4px); }
.modal-head { padding: 26px 30px 0; display: flex; justify-content: space-between; align-items: flex-start; }
.modal-head h2 { margin: 10px 0 0; font-size: 26px; }
.modal-close { background: var(--surface-muted); border: 1px solid var(--border); border-radius: 50%;
  width: 36px; height: 36px; cursor: pointer; display: flex; align-items: center; justify-content: center;
  color: var(--text-body); }
.modal-body { padding: 22px 30px 30px; }
.form-ok { display: none; flex-direction: column; gap: 14px; align-items: flex-start; }
.form-ok .check { width: 52px; height: 52px; border-radius: 50%; background: var(--brand-tint);
  color: var(--brand-strong); display: flex; align-items: center; justify-content: center; }
.form-ok p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--text-body); }
form.is-sent { display: none; }
form.is-sent + .form-ok { display: flex; }
/* Honeypot — visually hidden anti-spam field (kept off display:none so bots fill it). */
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px;
  opacity: 0; pointer-events: none; }
/* Inline form error (shown if /api/submit is unreachable). */
.form-err { grid-column: 1 / -1; margin: 4px 0 0; font-size: 14px; color: var(--danger, #b42318); }
.form-err a { color: inherit; text-decoration: underline; }

/* ---------- Page heroes / breadcrumbs ---------- */
.crumbs { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em;
  color: var(--text-muted); margin-bottom: 18px; }
.crumbs a { color: var(--text-muted); }
.crumbs .here { color: var(--brand-strong); }
.crumbs.on-dark { color: rgba(238,243,234,0.75); }
.crumbs.on-dark a { color: inherit; }
.crumbs.on-dark .rg { color: var(--green-300); }
.crumbs.on-dark .here { color: #fff; }

.page-head { padding: calc(var(--header-h) + 40px) 0 48px; }
.page-head .lede { max-width: 780px; display: flex; flex-direction: column; gap: 16px; }
.page-head h1 { margin: 0; font-size: clamp(2.1rem, 1.4rem + 2.4vw, 3.1rem); letter-spacing: -0.025em; }
.page-head .lede > p { margin: 0; font-size: 17px; line-height: 1.7; color: var(--text-body); }

.ink-hero { position: relative; margin-top: calc(-1 * var(--header-h)); background: var(--ink-900);
  background-image: radial-gradient(120% 160% at 85% -30%, rgba(138,181,42,0.2), transparent 55%); }
.ink-hero .container { padding-top: calc(var(--header-h) + 48px); padding-bottom: 52px; }
.ink-hero h1 { margin: 0 0 12px; color: #fff; font-size: clamp(2rem, 1.4rem + 2.4vw, 3.2rem);
  letter-spacing: -0.028em; max-width: 860px; }
.ink-hero .sub { margin: 0; font-size: 17.5px; line-height: 1.65; color: rgba(238,243,234,0.85); max-width: 700px; }
.ink-hero .ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.ink-hero .id-row { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.ink-hero .bigflag { font-size: 40px; line-height: 1; }
.ink-hero .svc-tile { width: 56px; height: 56px; border-radius: var(--radius-md);
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.18); color: var(--green-300);
  display: flex; align-items: center; justify-content: center; }

.city-hero { position: relative; min-height: 430px; display: flex; align-items: flex-end;
  margin-top: calc(-1 * var(--header-h));
  background: linear-gradient(140deg, var(--ink-700), var(--ink-950)); }
.city-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.city-hero .ovr { position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,24,19,0.5) 0%, rgba(8,24,19,0.25) 40%, rgba(8,24,19,0.85) 100%); }
.city-hero .container { position: relative; padding-top: calc(var(--header-h) + 40px);
  padding-bottom: 44px; width: 100%; }
.city-hero h1 { margin: 0 0 10px; font-family: var(--font-display); color: #fff;
  font-size: clamp(2.3rem, 1.5rem + 3vw, 3.6rem); letter-spacing: -0.03em; line-height: 1.05; max-width: 800px; }
.city-hero .tagline { margin: 0; font-family: var(--font-serif); font-style: italic; font-weight: 500;
  font-size: clamp(1.1rem, 1rem + 0.7vw, 1.45rem); color: rgba(255,255,255,0.92);
  max-width: 640px; line-height: 1.4; }

/* ---------- Facts / lists / panels ---------- */
.fact { display: flex; gap: 13px; align-items: flex-start; padding: 16px 18px; }
.fact .ic { color: var(--brand-strong); margin-top: 2px; }
.fact .k { display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 3px; }
.fact .v { font-size: 14px; font-weight: 600; color: var(--text-strong); line-height: 1.4; }

.prose-block { max-width: 760px; display: flex; flex-direction: column; gap: 16px; }
.prose-block p { margin: 0; font-size: 16px; line-height: 1.72; color: var(--text-body); }
.prose-block p.lead { font-size: 16.5px; }
.serif-pull { font-family: var(--font-serif); font-style: italic; font-weight: 500;
  font-size: 21px; line-height: 1.45; color: var(--ink-700); margin: 6px 0 0; }

.numcard { display: flex; gap: 14px; align-items: flex-start; padding: 17px 19px; }
.numcard .n { flex: none; font-family: var(--font-mono); font-size: 13px; font-weight: 600;
  color: var(--gold-600); margin-top: 1px; }
.numcard .t { font-size: 15px; font-weight: 600; color: var(--text-strong); line-height: 1.45; }

.listpanel { padding: 22px 24px; }
.listpanel .ph { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--brand-strong); margin-bottom: 14px; }
.listpanel ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.listpanel li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px;
  line-height: 1.5; color: var(--text-body); }
.listpanel li .ic { color: var(--brand-strong); margin-top: 2px; }
.listpanel li .n { flex: none; font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  color: var(--gold-600); margin-top: 2px; }

.tipcard { background: var(--surface-sand); border: 1px solid var(--sand-200);
  border-radius: var(--radius-lg); padding: 16px 20px; display: flex; gap: 12px; align-items: flex-start; }
.tipcard .ic { color: var(--gold-600); margin-top: 2px; }
.tipcard p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--text-body); }

.notes-band { position: relative; overflow: hidden; border-radius: var(--radius-xl);
  background: var(--ink-900);
  background-image: radial-gradient(120% 200% at 88% -30%, rgba(138,181,42,0.18), transparent 55%);
  padding: clamp(26px, 4vw, 44px); }
.notes-band .copy { max-width: 780px; display: flex; flex-direction: column; gap: 12px; }
.notes-band .copy > p { margin: 0; font-size: 17px; line-height: 1.7; color: var(--text-on-dark); }
.notes-band .ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }

/* ---------- Seasonality table ---------- */
.tablewrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); background: var(--surface-card); }
.season-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 680px; }
.season-table thead tr { background: var(--ink-900); }
.season-table th { text-align: left; padding: 13px 18px; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--green-300); font-weight: 500;
  white-space: nowrap; }
.season-table tbody tr + tr { border-top: 1px solid var(--divider); }
.season-table td { padding: 14px 18px; color: var(--text-body); line-height: 1.5; }
.season-table td:first-child { font-weight: 700; color: var(--text-strong); white-space: nowrap; }
.season-table td.mn { font-family: var(--font-mono); font-size: 13px; color: var(--brand-strong);
  white-space: nowrap; }

/* ---------- City categories tabs ---------- */
.cats-panel [data-cat-panel] { display: none; }
.cats-panel [data-cat-panel].is-active { display: grid; }

/* ---------- Country grid ---------- */
.cgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 10px; }
.cgrid a { display: flex; align-items: center; gap: 11px; background: var(--surface-card);
  border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px 14px;
  transition: all var(--dur) var(--ease-out); color: inherit; }
.cgrid a:hover { border-color: var(--green-400); background: var(--brand-tint); text-decoration: none; }
.cgrid .flag { font-size: 21px; flex: none; }
.cgrid .nm { font-size: 14px; font-weight: 600; color: var(--text-strong); line-height: 1.3; }
.cgrid .dot { margin-left: auto; flex: none; width: 7px; height: 7px; border-radius: 50%;
  background: var(--green-500); }

.local-block { max-width: 820px; display: flex; flex-direction: column; gap: 12px; }
.local-block .lk { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--gold-600); }
.local-block h2 { margin: 0; font-size: clamp(1.5rem, 1.2rem + 1vw, 1.9rem); }
.local-block p { margin: 0; font-size: 16px; line-height: 1.8; color: var(--text-body); }

/* ---------- Contact / payments ---------- */
.office { padding: 22px 22px 20px; display: flex; flex-direction: column; gap: 10px; }
.office .top { display: flex; align-items: center; gap: 10px; }
.office .flag { font-size: 22px; }
.office h3 { margin: 0; font-size: 17px; }
.office .co { font-size: 12.5px; color: var(--text-muted); }
.office address { margin: 0; font-style: normal; font-size: 14px; line-height: 1.6; color: var(--text-body); }
.office .regs { display: flex; flex-direction: column; gap: 5px; border-top: 1px solid var(--divider); padding-top: 10px; }
.office .regs div { display: flex; justify-content: space-between; gap: 10px; }
.office .regs span:first-child { font-size: 12px; color: var(--text-muted); }
.office .regs span:last-child { font-family: var(--font-mono); font-size: 12px; color: var(--text-strong); }
.office.is-hq { outline: 1px solid rgba(138,181,42,0.35); outline-offset: -1px; }
.office .hq-badge { display: inline-flex; align-items: center; gap: 4px; vertical-align: middle;
  margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: rgba(138,181,42,0.16);
  color: #3f5a12; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; font-weight: 600; }
.offices-note { margin: 10px 0 0; max-width: 640px; font-size: 15px; line-height: 1.7; color: var(--text-body); }
/* Worldwide contact + contracting directory */
.market-card { padding: 18px 20px 16px; display: flex; flex-direction: column; gap: 12px; }
.market-card .top { display: flex; align-items: center; gap: 10px; }
.market-card .flag { font-size: 22px; }
.market-card h3 { margin: 0; font-size: 16px; }
.market-rows { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--divider); padding-top: 12px; }
.market-rows > div { display: flex; flex-direction: column; gap: 2px; }
.market-rows .mk { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.market-rows .mk .ic { color: var(--gold-600); }
.market-rows a { font-family: var(--font-mono); font-size: 14px; font-weight: 600; color: var(--text-strong);
  word-break: break-all; text-decoration: none; }
.market-rows a:hover { color: var(--brand); text-decoration: underline; }
/* Hotel & activity vendor contracting band */
.contracting-band { display: grid; grid-template-columns: auto 1fr auto; gap: clamp(16px, 3vw, 30px);
  align-items: center; background: var(--ink-900);
  background-image: radial-gradient(120% 200% at 90% -40%, rgba(138,181,42,0.18), transparent 55%);
  border-radius: var(--radius-xl); padding: clamp(22px, 3vw, 32px) clamp(22px, 3vw, 36px); }
.contracting-band > .tile { width: 50px; height: 50px; flex: none; border-radius: 14px;
  display: grid; place-items: center; background: rgba(255,255,255,0.08); color: var(--brand); }
.contracting-band .ex-eyebrow { color: var(--brand); }
.contracting-band h2 { margin: 6px 0 8px; color: #fff; font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.6rem); }
.contracting-band p { margin: 0; max-width: 66ch; font-size: 14.5px; line-height: 1.65; color: rgba(255,255,255,0.74); }
.contracting-band p strong { color: #fff; }
.contracting-band .cb-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.contracting-band .cb-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(255,255,255,0.55); }
@media (max-width: 760px) {
  .contracting-band { grid-template-columns: 1fr; text-align: left; }
  .contracting-band .cb-cta { align-items: stretch; }
  .contracting-band .cb-cta .btn { justify-content: center; }
}

.channel { display: flex; gap: 16px; padding: 18px 20px; }
.channel .k { display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 3px; }
.channel .v { display: block; font-family: var(--font-mono); font-size: 16px; font-weight: 600;
  color: var(--text-strong); margin-bottom: 4px; }
.channel .s { font-size: 13.5px; line-height: 1.5; color: var(--text-body); }

.emergency { background: var(--ink-900);
  background-image: radial-gradient(120% 200% at 88% -30%, rgba(138,181,42,0.16), transparent 55%);
  border-radius: var(--radius-lg); padding: 20px 22px; }
.emergency .k { display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--green-300); margin-bottom: 6px; }
.emergency p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--text-on-dark-muted); }

.bank { overflow: hidden; }
.bank-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; background: var(--ink-900);
  background-image: radial-gradient(140% 240% at 90% -60%, rgba(138,181,42,0.18), transparent 55%); }
.bank-head .flag { font-size: 20px; }
.bank-head .cur { font-family: var(--font-mono); font-size: 15px; font-weight: 600; color: #fff;
  letter-spacing: 0.04em; }
.bank-head .loc { margin-left: auto; font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--green-300); }
.bank-body { padding: 14px 18px 16px; display: flex; flex-direction: column; gap: 8px; }
.bank-body > div { display: flex; justify-content: space-between; gap: 12px; }
.bank-body > div + div { border-top: 1px solid var(--divider); padding-top: 8px; }
.bank-body .k { font-size: 12.5px; color: var(--text-muted); white-space: nowrap; }
.bank-body .v { font-family: var(--font-mono); font-size: 12.5px; color: var(--text-strong);
  text-align: right; word-break: break-all; }
.bank-body .v.nm { font-weight: 600; }
.copy-btn { margin-top: 6px; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface-muted); border: 1px solid var(--border); border-radius: var(--radius-pill);
  padding: 6px 13px; font-family: var(--font-sans); font-size: 12.5px; font-weight: 600;
  color: var(--text-body); cursor: pointer; }
.copy-btn.is-copied { background: var(--brand-tint); color: var(--brand-strong); }
.bank-note { display: flex; align-items: flex-start; gap: 7px; margin-top: 4px; padding: 8px 10px;
  border-radius: var(--radius-sm); background: rgba(184,134,11,0.08); border: 1px solid rgba(184,134,11,0.30);
  font-size: 11.5px; line-height: 1.5; font-weight: 500; color: var(--gold-700,#92660a); }
.bank-note svg { flex: none; margin-top: 1px; color: var(--gold-700,#92660a); }

.notice { background: var(--surface-sand); border: 1px solid var(--sand-200);
  border-radius: var(--radius-xl); padding: clamp(22px, 3vw, 34px);
  display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.notice .seal { flex: none; width: 46px; height: 46px; border-radius: var(--radius-md);
  background: var(--surface-card); color: var(--gold-600); display: flex; align-items: center;
  justify-content: center; border: 1px solid var(--sand-300); }
.notice h3 { margin: 0 0 6px; font-size: 18px; }
.notice p { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--text-body); flex: 1; min-width: 280px; }
.notice > div:last-child { flex: 1; min-width: 280px; }

/* ---------- Blog ---------- */
.post-meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-muted); }
.post-body { max-width: 760px; margin: 0; font-size: 16.5px; line-height: 1.74; }
.post-body h2 { margin: 1.6em 0 0.5em; font-size: clamp(1.4rem, 1.15rem + 0.9vw, 1.75rem); }
.post-body h3 { margin: 1.4em 0 0.45em; font-size: 1.15rem; }
.post-body p { margin: 0 0 1.1em; }
.post-body ul { margin: 0 0 1.2em; padding-left: 1.3em; }
.post-body li { margin-bottom: 0.45em; }
.post-body li::marker { color: var(--brand-strong); }
.post-body strong { color: var(--text-strong); }
.post-body blockquote { margin: 0 0 1.2em; padding: 14px 20px; border-left: 3px solid var(--gold-500);
  background: var(--surface-sand); border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.post-body blockquote p { margin: 0; font-family: var(--font-serif); font-style: italic; font-size: 18px; }

/* Paragraphs are justified + hyphenated site-wide (see static/tokens/base.css).
   Short italic pull-quotes read better ragged than justified — only a few lines,
   so opt them out. text-align:start keeps RTL (Arabic) aligned correctly. */
.post-body blockquote p { text-align: start; -webkit-hyphens: manual; hyphens: manual; }

/* ---------- Blog in-body image cards ---------- */
.post-body .ex-fig { margin: 2em 0; }
.post-body .ex-fig img { display: block; width: 100%; height: auto; }
.post-body .ex-fig figcaption { margin-top: 10px; font-family: var(--font-mono); font-size: 12.5px;
  letter-spacing: 0.01em; color: var(--text-muted); text-align: center; }

/* feature — wide, rounded, deep shadow; breaks the text column on desktop */
.post-body .ex-fig--feature img { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
@media (min-width: 980px) {
  .post-body .ex-fig--feature { width: calc(100% + 130px); margin-left: -65px; margin-right: -65px; }
}

/* framed — gallery mat with a thin border */
.post-body .ex-fig--framed { padding: 14px; background: var(--surface-card); border: 1px solid var(--border);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-md); }
.post-body .ex-fig--framed img { border-radius: 2px; }
.post-body .ex-fig--framed figcaption { margin-top: 12px; }

/* polaroid — white print, tilted, serif caption */
.post-body .ex-fig--polaroid { width: max-content; max-width: 100%; margin: 2.4em auto; background: #fff;
  padding: 12px 12px 6px; box-shadow: var(--shadow-lg); transform: rotate(-1.3deg); }
.post-body .ex-fig--polaroid img { border-radius: 1px; }
.post-body .ex-fig--polaroid figcaption { padding: 10px 4px 6px; font-family: var(--font-serif);
  font-style: italic; font-size: 15px; color: var(--stone-600); }

/* float — magazine style, text wraps on desktop */
.post-body .ex-fig--float img { border-radius: var(--radius-md); box-shadow: var(--shadow-md); }
.post-body .ex-fig--float figcaption { text-align: left; }
@media (min-width: 760px) {
  .post-body .ex-fig--float { float: right; width: 45%; margin: 0.4em 0 1em 1.8em; }
}
[dir="rtl"] .post-body .ex-fig--float { float: left; margin: 0.4em 1.8em 1em 0; }

/* postcard — image with an attached caption bar */
.post-body .ex-fig--postcard img { border-radius: var(--radius-md) var(--radius-md) 0 0; }
.post-body .ex-fig--postcard figcaption { margin-top: 0; padding: 12px 16px; text-align: left;
  background: var(--surface-sand); border: 1px solid var(--border); border-top: none;
  border-radius: 0 0 var(--radius-md) var(--radius-md); }

/* ============ Blog — dispatch cards (hub) + related ============
   Same card system as the group's Thailand site, so the two blogs read as one
   publication: a photo "shot" with category/date pills, a mono dispatch number,
   the headline, and a read-time + circular arrow footer. Every token used here
   already exists in static/tokens/, which is why this ports across unchanged.

   The hub grid is three columns — two stacked cards, one tall dark featured
   card, then a quote rail plus a card — and the remaining posts fall into a
   uniform archive grid below. */
.dispatch-grid { display: grid; grid-template-columns: 1fr 1.28fr 0.86fr; gap: 22px;
  padding-bottom: 8px; align-items: stretch; }
.dispatch-col { display: flex; flex-direction: column; gap: 22px; }
/* The side columns carry different content (two cards vs a rail plus a card),
   so let the last card absorb the slack and both columns finish level with the
   featured card rather than leaving a ragged gap. */
.dispatch-col > .dispatch-card:last-child { flex: 1; }
.dispatch-col > .dispatch-card:last-child .shot { flex: 1; aspect-ratio: auto; min-height: 190px; }

.dispatch-card { position: relative; background: var(--surface-card); border-radius: var(--radius-xl);
  overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column;
  text-decoration: none; color: inherit; transition: box-shadow .18s, transform .18s; }
.dispatch-card:hover { text-decoration: none; box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.dispatch-card:focus-visible { outline: 3px solid var(--ring); outline-offset: 3px; }
.dispatch-card .shot { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface-muted); }
.dispatch-card .shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.dispatch-pills { position: absolute; top: 14px; inset-inline: 14px; display: flex; gap: 8px;
  flex-wrap: wrap; z-index: 2; }
.dispatch-pill { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .05em;
  text-transform: uppercase; padding: 6px 11px; border-radius: var(--radius-pill);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); line-height: 1.3; }
.dispatch-pill-cat { background: rgba(12,36,30,.62); color: var(--text-on-dark);
  border: 1px solid rgba(244,236,221,.28); }
.dispatch-pill-date { background: rgba(250,248,243,.88); color: var(--ink-900); }

.dispatch-card .body { padding: 20px 20px 22px; flex: 1; display: flex; flex-direction: column; }
.dispatch-no { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted);
  margin-bottom: 8px; display: block; }
.dispatch-card h3 { font-size: 19px; line-height: 1.24; letter-spacing: -.005em; margin: 0; }
.dispatch-card .meta { margin-top: auto; padding-top: 16px; display: flex; align-items: center;
  justify-content: space-between; gap: 10px; }
.dispatch-card .read-time { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
.dispatch-arrow { width: 40px; height: 40px; border-radius: 50%; background: var(--accent-gold-soft);
  border: 1px solid var(--sand-200); display: flex; align-items: center; justify-content: center;
  flex: none; transition: background .18s, transform .18s; }
.dispatch-arrow svg { width: 15px; height: 15px; }
.dispatch-card:hover .dispatch-arrow { background: var(--gold-500); color: #fff; transform: rotate(45deg); }
[dir="rtl"] .dispatch-arrow svg { transform: scaleX(-1); }
[dir="rtl"] .dispatch-card:hover .dispatch-arrow { transform: rotate(-45deg); }

/* Corner notches cut back to the page colour, so stacked cards interlock.
   Logical corners keep the cut on the outer edge in RTL. */
.dispatch-card.notch-tr::after, .dispatch-card.notch-bl::after {
  content: ""; position: absolute; width: 40px; height: 40px; background: var(--bg-page); z-index: 3; }
.dispatch-card.notch-tr::after { top: 0; inset-inline-end: 0; border-end-start-radius: 40px; }
.dispatch-card.notch-bl::after { bottom: 0; inset-inline-start: 0; border-start-end-radius: 40px; }

.dispatch-card.featured { background: var(--ink-900); color: var(--text-on-dark); grid-row: span 2; }
.dispatch-card.featured .shot { aspect-ratio: auto; flex: 1; min-height: 260px; }
.dispatch-card.featured .shot::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(12,36,30,0) 30%, rgba(12,36,30,.94) 92%); }
.dispatch-card.featured .body { position: absolute; inset-inline: 0; bottom: 0; padding: 30px 30px 32px; }
.dispatch-card.featured .dispatch-pills { position: static; margin-bottom: 18px; }
.dispatch-card.featured .dispatch-no { color: var(--text-on-dark-muted); }
.dispatch-card.featured h2 { font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.05rem); line-height: 1.08; color: #fff;
  letter-spacing: -.01em; margin: 0; text-wrap: balance; }
.dispatch-card.featured .read-time { color: var(--text-on-dark-muted); }
.dispatch-card.featured .dispatch-arrow { background: var(--gold-500); }
.dispatch-card.featured .dispatch-arrow svg { stroke: var(--ink-900); }

.dispatch-rail { background: var(--surface-muted); border-radius: var(--radius-xl); padding: 28px 26px;
  display: flex; flex-direction: column; gap: 18px; }
.dispatch-rail p { font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: 18px;
  line-height: 1.5; color: var(--text-strong); margin: 0; }
.dispatch-rail .socials { display: flex; gap: 10px; margin-top: 4px; flex-wrap: wrap; }
.dispatch-rail .soc { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--sand-200);
  display: flex; align-items: center; justify-content: center; color: var(--text-strong); flex: none; }
.dispatch-rail .soc svg { width: 16px; height: 16px; }
.dispatch-rail .btn { align-self: flex-start; }

.dispatch-archive-head { display: flex; align-items: center; gap: 18px; margin: 54px 0 26px; }
.dispatch-archive-head .line { flex: 1; height: 1px; background: var(--sand-200); }
.dispatch-archive-head span { font-family: var(--font-mono); font-size: 11.5px; text-transform: uppercase;
  letter-spacing: .1em; color: var(--text-muted); white-space: nowrap; }
.dispatch-archive-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

/* related cards on a post page — same card, uniform 3-up */
.blog-related { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

/* post page — category eyebrow in the hero + magazine drop cap */
.bpost-cat { display: inline-block; margin-bottom: 12px; font-family: var(--font-mono); font-size: 12px;
  letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: #fff; background: var(--brand);
  padding: 6px 13px; border-radius: 100px; }
.bpost .post-body > p:first-child::first-letter { float: left; font-family: var(--font-display);
  font-weight: 800; font-size: 3.4em; line-height: .8; padding: 6px 12px 0 0; color: var(--brand-strong); }
[dir="rtl"] .bpost .post-body > p:first-child::first-letter { float: right; padding: 6px 0 0 12px; }

@media (max-width: 1000px) {
  .dispatch-grid { grid-template-columns: 1fr; }
  .dispatch-card.featured { grid-row: auto; min-height: 420px; }
  .dispatch-archive-grid, .blog-related { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .dispatch-grid { gap: 16px; }
  .dispatch-col { gap: 16px; }
  .dispatch-archive-grid, .blog-related { grid-template-columns: 1fr; }
  .dispatch-card.featured .body { padding: 22px 22px 24px; }
}

/* ============ Legal pages + HTML sitemap ============ */
.legal-prose { max-width: 760px; }
.legal-prose a { color: var(--text-link); text-decoration: underline; text-underline-offset: 2px; }
.legal-prose h2 { margin-top: 1.7em; }
.legal-updated { font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; color: var(--text-muted); }
.legal-prevails { margin-top: 2em; padding-top: 16px; border-top: 1px solid var(--divider);
  font-size: 13.5px; color: var(--text-muted); font-style: italic; }

.sitemap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-bottom: 8px; }
.sitemap-sec { display: flex; flex-direction: column; gap: 12px; }
.sitemap-sec h2 { margin: 0 0 4px; font-size: 1.2rem; }
.sitemap-wide { margin-top: 34px; }
.sitemap-links { display: flex; flex-wrap: wrap; gap: 7px 16px; }
.sitemap-links a { font-size: 14px; color: var(--text-body); }
.sitemap-links a:hover { color: var(--text-link); }
.sitemap-grid .sitemap-links { flex-direction: column; gap: 9px; }
.sitemap-region { margin: 14px 0; }
.sitemap-rg { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; }

.ftr-legal { display: inline-flex; flex-wrap: wrap; gap: 5px 18px; }
.ftr-legal a { color: inherit; opacity: .82; }
.ftr-legal a:hover { opacity: 1; text-decoration: underline; }

@media (max-width: 760px) {
  .sitemap-grid { grid-template-columns: 1fr; gap: 24px; }
}

/* ============ Careers — role cards + apply steps ============ */
.roles { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 18px; }
.role { display: flex; flex-direction: column; gap: 10px; padding: 22px; }
.role .role-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.role h3 { margin: 2px 0 0; font-size: 19px; }
.role p { margin: 0; font-size: 14px; line-height: 1.62; color: var(--text-body); }
.role .role-h { margin-top: 6px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; font-weight: 600; color: var(--text-muted); }
.role ul { margin: 0; padding-inline-start: 1.15em; font-size: 13.5px; line-height: 1.55; color: var(--text-body); }
.role li { margin-bottom: 4px; }
.role li::marker { color: var(--brand-strong); }
.role .btn { margin-top: 14px; align-self: flex-start; }
/* Highlighted recruitment address — the one application channel, made unmissable. */
.hr-mail { display: inline-flex; align-items: center; gap: 9px; padding: 11px 18px;
  align-self: flex-start; width: max-content; max-width: 100%;
  background: var(--brand-tint); border: 1.5px solid var(--brand);
  border-radius: 100px; font-family: var(--font-mono); font-weight: 700;
  font-size: 17px; letter-spacing: .01em; color: var(--brand-strong);
  box-shadow: 0 1px 0 rgba(0,0,0,.03), inset 0 0 0 3px rgba(255,255,255,.55);
  transition: transform .2s, box-shadow .2s; }
.hr-mail:hover { text-decoration: none; transform: translateY(-1px); box-shadow: var(--shadow-md);
  background: var(--brand-soft); }
.hr-mail .ic { color: var(--brand-strong); }
.hr-mail--sm { padding: 3px 10px; font-size: 12.5px; gap: 6px; border-width: 1px;
  box-shadow: none; vertical-align: baseline; }
.role .role-spec { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; padding: 12px 14px;
  background: var(--surface-sand); border: 1px solid var(--border); border-radius: var(--radius-md);
  font-size: 12.5px; }
.role .role-spec > div { display: flex; flex-direction: column; gap: 1px; }
.role .role-spec .wide { grid-column: 1 / -1; }
.role .role-spec .k { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; font-weight: 600; color: var(--text-muted); }
.role .role-spec .v { color: var(--text-strong); line-height: 1.45; }
.apply-steps { margin: 10px 0 0; padding-inline-start: 1.3em; font-size: 14.5px; line-height: 1.65;
  color: var(--text-body); }
.apply-steps li { margin-bottom: 10px; padding-inline-start: 4px; }
.apply-steps li::marker { font-family: var(--font-mono); font-weight: 700; color: var(--brand-strong); }

/* ---------- 404 ---------- */
.nf { min-height: 60vh; display: flex; align-items: center; }
.nf .code { font-family: var(--font-serif); font-style: italic; font-size: 96px; color: var(--stone-300);
  line-height: 1; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .g4 { grid-template-columns: repeat(2, 1fr); }
  .trustbar .container { grid-template-columns: repeat(3, 1fr); }
  .hdr-phone { display: none; }
  .mega-dests { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 880px) {
  .g3, .g2 { grid-template-columns: 1fr; }
  .split-2, .split-21, .split-13, .split-faq { grid-template-columns: 1fr; }
  .sticky-aside { position: static; }
  .discover { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .nlband-in { grid-template-columns: 1fr; }
  .nl-form input[type="email"], .nl-form .btn { flex-basis: 100%; }
  .ftr-top { grid-template-columns: 1fr 1fr; }
  .ftr-regions-grid { grid-template-columns: 1fr; }
  .ftr-markets-grid { grid-template-columns: repeat(2, 1fr); }
  .ctaband { padding: 36px 28px; }
  .hero { min-height: 560px; }
  /* Mobile nav: collapse into a dropdown panel */
  .menu-toggle { display: block; }
  .hdr nav { display: none; }
  .hdr.is-menu-open nav { display: flex; flex-direction: column; position: absolute;
    top: var(--header-h); left: 0; right: 0; background: var(--surface-card);
    border-bottom: 1px solid var(--border); box-shadow: var(--shadow-lg); padding: 10px var(--gutter) 18px; }
  .hdr.is-menu-open .hdr-link { color: var(--text-strong); padding: 12px 0; }
  .hdr.is-menu-open .mega { display: none; }
  .hdr .btn-signup { display: none; }
}
@media (max-width: 560px) {
  .trustbar .container { grid-template-columns: repeat(2, 1fr); }
  .ftr-top { grid-template-columns: 1fr; }
  .hero-nav { display: none; }
}

/* ===== RWD refinements (v2.1) ===== */
/* Additive, mobile-safe responsive polish. Desktop rules above are untouched.
   Mobile nav matches static/js/site.js: [data-menu-toggle] toggles `is-menu-open`
   on the .hdr ([data-header]) element. */

/* Global safety: no horizontal overflow; media never breaks page width. */
html, body { overflow-x: hidden; }
img, video, svg, iframe { max-width: 100%; }
.tablewrap { -webkit-overflow-scrolling: touch; }

/* The WhatsApp number in the header strip is the first thing to give up its
   space. With NINE nav items (Entertainment joined Itineraries) the nine labels
   run about 730px at 14px with 9px padding a side; add the 206px logo and the
   sign-up button and the strip needs roughly 1,120px before anything collides.
   So the phone goes at 1350px and the drawer takes over at 1150px. The number
   is never lost — the drawer carries it, and every page ends on a CTA band
   with the same number. */
@media (max-width: 1350px) { .hdr-phone { display: none; } }

/* ---- Mobile nav: toggle-driven panel up to 1150px ----
   900 -> 1000 when /itineraries/ made the nav eight items, and 1000 -> 1150 now
   /entertainment/ makes it nine. The arithmetic is in the comment above: nine
   labels plus the logo and the sign-up button want about 1,120px. Rather than
   let the desktop strip overflow, the drawer — which already works and is a
   better experience at that width anyway — takes over one band earlier. */
@media (max-width: 1150px) {
  /* Show the hamburger, hide the inline nav until toggled (matches JS). */
  .menu-toggle { display: block; min-width: 44px; min-height: 44px;
    display: flex; align-items: center; justify-content: center; }
  .hdr nav { display: none; }
  .hdr.is-menu-open nav { display: flex; flex-direction: column; position: absolute;
    top: var(--header-h); left: 0; right: 0; background: var(--surface-card);
    border-bottom: 1px solid var(--border); box-shadow: var(--shadow-lg);
    padding: 8px var(--gutter) 16px; max-height: calc(100vh - var(--header-h));
    overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .hdr.is-menu-open .hdr-link { color: var(--text-strong); padding: 12px 2px;
    min-height: 44px; font-size: 16px; border-bottom: 1px solid var(--divider); }
  /* Mega menus: render inline as plain stacked link lists, no overlay. */
  .hdr.is-menu-open .has-mega { position: static; }
  .hdr.is-menu-open .mega { position: static; opacity: 1; visibility: visible;
    transform: none; box-shadow: none; border-bottom: 0; max-height: none;
    overflow: visible; background: transparent; }
  .hdr.is-menu-open .mega-in { display: block; padding: 0 0 6px; }
  .hdr.is-menu-open .mega-services,
  .hdr.is-menu-open .mega-dests { grid-template-columns: 1fr; gap: 4px; }
  .hdr.is-menu-open .mega-item { padding: 10px 0; min-height: 44px; }
  .hdr.is-menu-open .mega-col { gap: 4px; margin-top: 6px; }
  .hdr.is-menu-open .mega-col > a { padding: 9px 0; min-height: 40px; display: flex;
    align-items: center; font-size: 15px; }
  /* Keep hdr-right in the header bar when nav is open — don't overlay the nav dropdown. */
  .hdr-right { gap: 6px; }
  .hdr.is-menu-open .hdr-right { position: static; flex-direction: row;
    align-items: center; padding: 0; gap: 6px; }
  /* Nav dropdown must appear above page content. */
  .hdr.is-menu-open nav { z-index: 200; }
  /* Hide phone + login in header strip when menu is open — saves space; available in nav. */
  .hdr.is-menu-open .hdr-phone,
  .hdr.is-menu-open .btn-login { display: none; }
}

/* ============================== <= 1024px ============================== */
@media (max-width: 1024px) {
  .g4 { grid-template-columns: repeat(2, 1fr); }
  .mega-services { grid-template-columns: repeat(2, 1fr); }
  .mega-dests { grid-template-columns: repeat(3, 1fr); }
  .discover-items { grid-template-columns: 1fr 1fr; }
  .ftr-regions-grid { grid-template-columns: repeat(2, 1fr); }
  .ftr-markets-grid { grid-template-columns: repeat(2, 1fr); }
  .hero { min-height: 560px; }
}

/* ============================== <= 768px ============================== */
@media (max-width: 768px) {
  /* Comfortable base reading size + gutters. */
  body { font-size: 16px; }
  .section.tight { padding: 36px 0; }

  /* Collapse all multi-column grids to a single column. */
  .g2, .g3, .g4 { grid-template-columns: 1fr; }
  .gfill-230, .gfill-250, .gfill-280,
  .gfit-290, .gfit-280, .gfit-270, .gfit-230, .gfit-210 { grid-template-columns: 1fr; }
  .split-2, .split-21, .split-13, .split-faq { grid-template-columns: 1fr;
    gap: clamp(24px, 6vw, 36px); }
  .cgrid { grid-template-columns: 1fr; }
  .brandwall { grid-template-columns: repeat(2, 1fr); }
  .discover { grid-template-columns: 1fr; }
  .discover-items { grid-template-columns: 1fr 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .nlband-in { grid-template-columns: 1fr; }
  .ftr-top { grid-template-columns: 1fr 1fr; }
  .ftr-regions-grid { grid-template-columns: 1fr; }
  .ftr-markets-grid { grid-template-columns: repeat(2, 1fr); }
  .trustbar .container { grid-template-columns: repeat(2, 1fr); }

  /* sec-row (heading + button) stacks; CTA band stacks. */
  .sec-row { flex-direction: column; align-items: flex-start; gap: 16px; }
  .sec-row .btn { width: 100%; }
  .ctaband { flex-direction: column; align-items: stretch; padding: 36px 24px; }
  .ctaband .copy { max-width: none; }
  .ctaband .actions { min-width: 0; }
  .ctaband .actions .btn { width: 100%; }

  /* Heroes: lower min-height, tighter padding, stacked full-width CTAs. */
  .hero { min-height: 480px; }
  .hero-in { padding-bottom: 56px; }
  .hero-copy .sub { font-size: 17px; }
  .hero-ctas .btn, .ink-hero .ctas .btn, .notes-band .ctas .btn { width: 100%; }
  .ink-hero .container { padding-bottom: 40px; }
  .ink-hero .sub { font-size: 16px; }
  .city-hero { min-height: 360px; }
  .city-hero .container { padding-bottom: 36px; }
  .page-head { padding: calc(var(--header-h) + 28px) 0 36px; }
  .page-head .lede > p { font-size: 16px; }

  /* Newsletter form: input + button full-width stacked. */
  .nl-form input[type="email"], .nl-form .btn { flex: 1 1 100%; width: 100%; }

  /* Tables stay inside their scroll wrapper. */
  .tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tablewrap table { min-width: 640px; }

  /* Modal: near full-width with margins, scrollable. */
  dialog.modal { width: calc(100vw - 28px); max-height: 88vh; overflow-y: auto; }
  .modal-head { padding: 20px 20px 0; }
  .modal-head h2 { font-size: 22px; }
  .modal-body { padding: 18px 20px 24px; }
  .modal-close { min-width: 44px; min-height: 44px; }

  /* Tap targets for footer + tabs + buttons. */
  .ftr-col a, .ftr-site, .ftr a { min-height: 32px; }
  .ftr-base { flex-direction: column; align-items: flex-start; gap: 8px; }

  /* Sticky WhatsApp dock: smaller, clear of content. */
  .wa-dock { right: 16px; bottom: 16px; }

  /* Recently added prose/itinerary/FAQ content: comfortable measure. */
  .prose-block, .post-body, .local-block, .faq-list { max-width: 100%; }
}

/* ============================== <= 480px ============================== */
@media (max-width: 480px) {
  .trustbar .container { grid-template-columns: 1fr 1fr; }
  .ftr-top { grid-template-columns: 1fr; }
  .ftr-markets-grid { grid-template-columns: 1fr; }
  .brandwall { grid-template-columns: 1fr; }
  .discover-items { grid-template-columns: 1fr; }
  .tagrow { gap: 7px; }

  /* Tighten oversized fixed display type that can overflow narrow screens. */
  .nf .code { font-size: 64px; }
  .dtile-meta .nm { font-size: 20px; }
  .ctile-media .ph span { font-size: 36px; }
  .hero-copy .sub, .ink-hero .sub { font-size: 16px; }

  /* Hero CTAs already full-width; ensure groups stack cleanly. */
  .hero-ctas, .ink-hero .ctas, .notes-band .ctas { width: 100%; }

  /* Hero slider dots/arrows large enough to tap if shown. */
  .hero-arrows button { width: 44px; height: 44px; }

  /* Footer region/site lists wrap comfortably. */
  .ftr-sites { gap: 10px; }

  /* Logo doesn't crowd the toggle. */
  .hdr-logo img { height: 30px; }

  /* Reduce heavy section padding on the smallest screens. */
  .ctaband { padding: 28px 18px; }
  .inkpanel, .notes-band, .notice { padding: 22px 18px; }
}

/* Footer social icons */
.ftr-social { display: inline-flex; gap: 10px; align-items: center; }
.ftr-social a { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 8px;
  background: rgba(255,255,255,0.06); color: #cfd8e6; transition: background .15s, color .15s; }
.ftr-social a:hover { background: var(--brand); color: #0c241e; }
/* ===== Hotel partners — animated logo marquee ===== */
.hotels-sec { overflow: hidden; }
.hmarquee { overflow: hidden; position: relative; padding: 6px 0;
  -webkit-mask: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.hmarquee + .hmarquee { margin-top: 14px; }
.hmarquee-track { display: flex; gap: 14px; width: max-content; animation: hscroll 80s linear infinite; will-change: transform; }
.hmarquee--rev .hmarquee-track { animation-direction: reverse; }
.hmarquee:hover .hmarquee-track { animation-play-state: paused; }
@keyframes hscroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.hbrand-card { flex: 0 0 auto; width: 224px; background: #fff; border: 1px solid rgba(15,36,30,0.08);
  border-radius: 16px; padding: 18px 18px 14px; box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  display: flex; flex-direction: column; gap: 9px; margin: 2px 0; }
.hbrand-logo { height: 42px; display: flex; align-items: center; justify-content: center; }
.hbrand-logo img { max-height: 40px; max-width: 175px; object-fit: contain; }
.hbrand-wm { display: none; align-items: center; justify-content: center; width: 100%;
  font-weight: 700; font-size: 15.5px; color: var(--text-strong); text-align: center; line-height: 1.15; text-transform: uppercase; }
.hbrand-desc { margin: 0; font-size: 11.5px; line-height: 1.45; color: var(--text-muted); text-align: center; }
@media (prefers-reduced-motion: reduce) {
  .hmarquee-track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; }
  .hmarquee { -webkit-mask: none; mask: none; }
}

/* Footer accreditation strip — the same bodies as the homepage affiliations
   grid (JNTO, JATA, IATA, ASTA), on every page. Logos come from the Clearbit
   Logo API with the abbreviation as the fallback when a fetch fails. */
.ftr-accred { padding: 18px 0 4px; border-top: 1px solid rgba(255,255,255,0.08); }
.ftr-accred-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.ftr-accred-item { display: inline-flex; align-items: center; gap: 9px; padding: 7px 13px 7px 9px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.09); border-radius: var(--radius-md); }
.ftr-accred-item img { display: block; width: 30px; height: 30px; object-fit: contain;
  background: #fff; border-radius: 5px; padding: 3px; }
/* Accreditation marks are self-hosted from each body's own site, so they arrive
   in whatever colour that body publishes — ASTA and IATA supply white-on-
   transparent, JATA navy. Both placements sit the mark on a white chip, so a
   white one would vanish. brightness(0) flattens any source colour to a black
   silhouette: the row stays uniform, and a replacement file never has to be a
   particular variant to work. */
.accred-logo { filter: brightness(0); }
.affil .seal .accred-logo { max-height: 34px; max-width: 54px; object-fit: contain; }
.ftr-accred-item b { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  background: #fff; color: #111; border-radius: 5px; padding: 8px 6px; }
.ftr-accred-item small { font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; color: var(--text-on-dark-muted); }