/* ============================================================
   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;
  /* Gold used as TEXT needs more contrast than gold used as an icon, a rule or
     a gradient stop: --gold-600 is 4.09:1 on white. Icons keep --gold-600. */
  --gold-text: #9c5f5d;  /* 4.99:1 on white */

  /* --- 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);
  /* These two are TEXT-ONLY tokens (verified: never used for a border or a
     background), so they are set to values that clear WCAG AA 4.5:1 on the
     surfaces they actually render on rather than tracking the stone ramp.
     They previously pointed at --stone-500 (4.35:1) and --stone-400 (2.55:1)
     on --stone-50; .smallprint at 2.55 was the worst contrast on the site and
     appeared on every page. The ramp itself is unchanged — stone-400/500 stay
     correct where they are used for rules, chips and dividers. */
  --text-muted:     #6b5b64;  /* 5.98:1 on --stone-50, 6.35:1 on white */
  --text-faint:     #73626c;  /* 5.35:1 on --stone-50, 5.69:1 on white */
  --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 */
  /* Header/mega only. The nav strip carries nine top-level items plus the
     logo, search, language switcher and the portal button; in the expanding
     locales (ru, fr, pt, de, es) that needs ~1,500px of run, which the 1280px
     content cap cannot give it. Capping the header wider than the content is
     what lets the strip fit without shrinking the type. */
  --maxw-hdr:      1760px;   /* @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; max-width: 100%;
  transition: all var(--dur) var(--ease-out); }
/* The one button on the site that carries a whole role name: the careers page
   states the required subject line on the button itself ("Apply — subject:
   Guest Experience & Guide Coordination Intern"). At 521px wide it ran past the
   viewport on a phone and past its own card on a desktop, because .btn is
   nowrap. This one wraps — at every width, not only on a phone. */
.btn-apply { white-space: normal; text-align: left; line-height: 1.35; }
.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-hdr); margin: 0 auto; padding: 0 var(--gutter);
  height: var(--header-h); display: flex; align-items: center; gap: 10px; }
/* Above the drawer breakpoint the strip needs every pixel, so the header (and
   the mega panel that must stay aligned to it) takes a fixed 24px gutter
   instead of the page's clamp(), which reaches 48px on a wide screen. */
@media (min-width: 1500px) { .hdr-in, .mega-in { padding-inline: 24px; } }
.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 6px; 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); }
/* Drawer-only: the portal link the header strip gives up below 760px. Hidden
   everywhere by default; the mobile block turns it on inside an open drawer. */
.hdr-link--portal { display: none; }
.hdr.is-solid .hdr-link .ic { color: var(--text-muted); }
.hdr-right { margin-left: auto; display: flex; align-items: center; gap: 6px; 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-hdr); 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: 12px; 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: 12px; 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: 12px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--brand-strong); margin-top: 4px; }
/* Keyed on the class, not the tag: these card titles are the page's top-level
   sections and are now <h2>, which is what stops /services/, /payment/ and
   /blog/ jumping h1 -> h3 and skipping a level. Appearance is unchanged. */
.scard h2, .scard h3 { margin: 0; font-size: 18.5px; font-weight: 700; }
.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: 12px; 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: 12px; 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: 12px; 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: 12px; 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: 12px; 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-text); }
.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: 12px; 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); }
.updated-stamp { max-width: 860px; margin: 10px 0 28px 20px; 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: 12px;
  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 ---------- */


/* Skip link: off-screen until it receives keyboard focus, then pinned top-left
   above everything. First focusable element on every page. */
/* Hidden by clipping, not by a negative offset. `left: -9999px` is genuinely
   off-screen in a left-to-right document, but in RTL the inline start is the
   right edge, so the same element sits in the scrollable overflow instead —
   every Arabic page reported a 10,392px scroll width against a 393px viewport,
   which is exactly the "not mobile friendly" a crawler flags. Clipping to a
   1px box takes up no scrollable area in either direction. */
.skip-link { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap;
  inset-inline-start: 12px; top: 12px; z-index: 10000; padding: 10px 16px;
  border-radius: 8px; background: var(--ink, #0f141e); color: #fff;
  font-weight: 600; text-decoration: none; }
.skip-link:focus { width: auto; height: auto; overflow: visible;
  clip: auto; clip-path: none; outline: 3px solid #fff; outline-offset: 2px; }
.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: 12px;
  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: 12px;
  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: 12px; 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; }
/* The control lives INSIDE its <label>, which is what associates the two for a
   screen reader. Wrapping rather than for/id is deliberate: the enquiry form in
   the footer renders on all 4,671 pages and /contact-us/ carries a second copy
   of the same field names, so generated ids would collide site-wide — and a
   duplicate id is itself a conformance failure. Wrapping also adds no new
   English strings, so it needs no bake in the eight locale caches. */
.field label { font-family: var(--font-sans); font-size: 13.5px; font-weight: 600; color: var(--text-strong);
  display: block; }
/* .field's own 6px gap used to sit between the label and the control; now that
   the control is inside the label, reproduce it here so the spacing is identical. */
.field label > input, .field label > select, .field label > textarea { margin-top: 6px; }
/* Controls must not inherit the label's 600 weight. */
.field input, .field select, .field textarea { font-weight: 400; }
.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). Hidden by clipping rather than by left:-9999px: in an RTL document
   the negative offset lands inside the scrollable overflow, and /ar/contact-us/
   reported a 10,392px scroll width with the entire header pushed off-screen. A
   clipped 1px box is just as present in the DOM for a bot and takes up no
   scrollable area in either writing direction. */
.hp-field { position: absolute !important; inset-inline-start: 0 !important; top: 0;
  width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0);
  clip-path: inset(50%); 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 ---------- */
/* The contact page's two columns. This was an inline
   `style="grid-template-columns:1fr 1.2fr"`, which no media query can override,
   so on a phone the enquiry form sat in a column starting 333px in and running
   to 701px — clipped away by overflow-x:hidden. The form, on the page whose job
   is the form, was invisible on every phone in all nine locales. */
.contact-grid { display: grid; grid-template-columns: 1fr 1.2fr;
  gap: clamp(28px, 4vw, 56px); align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

.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: 12px; 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-text); 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: 12px; 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: 12px;
  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: 12px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--gold-text); }
.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: 12px; 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: 12px; 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: 12px; 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: 12px; 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: 12px; 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: 12px;
  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: 12px; 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 h2, .notice h3 { margin: 0 0 6px; font-size: 18px; font-weight: 700; }
.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: 12px; 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; }

/* ---------- In-prose links: underlined, not colour-only ----------
   WCAG 1.4.1 — a link inside a block of body text may not be distinguished from
   the text around it by colour alone, and the site's link rose against the body
   ink does not clear the 3:1 difference the technique asks for.

   Scoped by SHAPE, not by container. The first cut of this rule listed the
   prose wrappers by class (.post-body, .prose-block, .local-block) and missed
   five more — thirteen paragraphs sat in inline-styled <div style="max-width:
   860px"> with no class to name, plus .lede, .sec-head, .apply-steps and the
   sticky aside. A link inside a <p> or an <li> inside <main> IS prose, wherever
   that paragraph happens to live, so that is what the selector says; anything
   new inherits the fix instead of needing to be found.

   The opt-outs are the things shaped like a control rather than a sentence.
   <main> keeps it off the header and footer, which are their own affordance.
   The underline is drawn at 45% of the link colour so it reads as a rule under
   the words rather than a heavy second baseline, and goes full strength on
   hover and keyboard focus. */
main p > a:not(.btn):not(.tag):not(.badge):not(.month-chip),
main li > a:not(.btn):not(.tag):not(.badge):not(.month-chip),
main blockquote a:not(.btn),
.faq > p a {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
}
main p > a:not(.btn):not(.tag):not(.badge):not(.month-chip):hover,
main li > a:not(.btn):not(.tag):not(.badge):not(.month-chip):hover,
main p > a:not(.btn):not(.tag):not(.badge):not(.month-chip):focus-visible,
main li > a:not(.btn):not(.tag):not(.badge):not(.month-chip):focus-visible,
main blockquote a:not(.btn):hover,
.faq > p a:hover, .faq > p a:focus-visible {
  text-decoration-color: currentColor;
}

/* ---------- 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: 12px; 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: 12px; color: var(--text-muted);
  margin-bottom: 8px; display: block; }
.dispatch-card h2, .dispatch-card h3 { font-size: 19px; line-height: 1.24; letter-spacing: -.005em; margin: 0; font-weight: 700; }
.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: 12px; 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: 12px; 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;
  /* --brand (#de6b90) gives white 3.17:1; --brand-strong gives 5.98:1. The chip
     carries 12px uppercase text, so it needs the 4.5:1 threshold, not 3:1. */
  background: var(--brand-strong);
  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: 12px; 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: 12px; 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: 12px; 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; }
}

/* ---- The header strip has to FIT the phone, not merely be clipped by it ----
   At 393px the strip wanted 557px: logo 113 + search 44 + language 126 +
   "Travel agent login" 166 + hamburger 44, plus gaps and gutters. `html, body
   { overflow-x: hidden }` a few rules up meant the page did not scroll
   sideways — it just cut the overflow off, and what fell off the end was the
   menu button. Nine nav items, unreachable, on every page, in all nine
   locales. So the login button leaves the strip below 760px and becomes a
   drawer item (.hdr-link--portal) instead, and below 420px the language
   control drops its chevron. */
@media (max-width: 760px) {
  .hdr .btn-login { display: none; }
  .hdr.is-menu-open .hdr-link--portal { display: flex; }
}
/* A button is allowed to be two lines; it is not allowed to be wider than the
   phone. `white-space: nowrap` is right on a desktop strip and wrong here: the
   careers page states the required subject line on the button itself ("Apply —
   subject: Guest Experience & Guide Coordination Intern"), which ran to 521px
   and was cut off by the body's overflow-x:hidden on every phone. */
@media (max-width: 560px) {
  .btn { white-space: normal; text-align: center; max-width: 100%; }
  /* Same for pill badges. Kyoto's "Onsen towns within reach" fits on one line
     in English and runs 126px past a 393px phone in Russian. */
  .badge { white-space: normal; max-width: 100%; }
}

@media (max-width: 420px) {
  .hdr-right { gap: 4px; }
  .lang-switch > summary { padding-inline: 10px; gap: 4px; }
  .lang-switch > summary .ic-caret { display: none; }
}
/* Below 390px the language control keeps the globe and drops the name. The
   name is the locale's own — "Português" is 119px where "中文" is 75 — and the
   widest of them is what decides whether the hamburger fits on a 360px phone.
   The control keeps its accessible name either way. */
@media (max-width: 389px) {
  .lang-switch > summary [data-lang-current] { 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; }
/* height:auto is what makes the width/height ATTRIBUTES safe. lib/image-dims.mjs
   now stamps every remote photo with its measured intrinsic size so the browser
   can reserve the box before the bytes arrive (no layout shift). Without this
   rule the height attribute would become the used height on any image the CSS
   sizes by width, and squash it; with it, the attributes supply the ratio and
   the CSS still decides the size. */
img, video, svg, iframe { max-width: 100%; }
img { height: auto; }
.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. */
/* The WhatsApp number is the first thing to go: with it in the strip every
   locale needs >=1600px, without it >=1440px. Measured, not guessed — see the
   drawer-breakpoint comment below. It stays in the drawer and the footer. */
@media (max-width: 1599px) { .hdr-phone { display: none; } }

/* ---- Mobile nav: toggle-driven panel up to 1439px ----
   900 -> 1000 when /itineraries/ made the nav eight items, 1000 -> 1150 when
   /entertainment/ made it nine, and 1150 -> 1439 because the earlier arithmetic
   counted only the nav labels, the logo and the button. It left out the rest of
   .hdr-right — search, the language switcher and the WhatsApp number — and so
   under-read the requirement by roughly 400px. MEASURED, per locale, at the
   point every item is laid out: the strip wanted 1,585px in en, 1,723px in de,
   1,767px in ru, 1,804px in es and 1,821px in fr, inside 1,184px of usable
   width. It overflowed in eight of nine locales at EVERY desktop width, and
   `.hdr nav { min-width: 0 }` meant the nowrap links did not push anything —
   they painted straight over the phone number and the portal button. Nothing
   clipped them, so nothing looked broken until you read the words.
   Closing it took four things, each measured rather than guessed: one portal
   button instead of two pointing at the same URL, a wider header cap
   (--maxw-hdr), tighter gap/padding, and the phone dropping out below 1600px.
   All nine locales now fit at >=1500px with 53px of slack in the tightest (es)
   and 62px in the next (fr), so that is where the drawer hands over. At 1440 es
   was still 7px over and fr had 2px — measured, not eyeballed.
   If a tenth nav item or a longer label ever arrives, re-measure before
   nudging this number — the sum lives in .hdr-right as much as in the nav. */
@media (max-width: 1499px) {
  /* 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: 12px; 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: 12px; 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: 12px; font-weight: 600;
  letter-spacing: 0.08em; color: var(--text-on-dark-muted); }

/* ── Touch targets (mobile) ──────────────────────────────────────────────
   Measured in Chromium at Pixel 5: every interactive CONTROL on the site sat
   under Google's 48x48 recommendation — buttons 191x33, the language menu
   82x31, the header search 38x38, the hero segment control 42x3. The page
   layout itself was never the problem (horizontal overflow is 0 on every
   page); it was control size and sub-12px label text.

   PLACED LAST ON PURPOSE. The first version sat mid-file and .ftr-site is
   redefined 100 lines later at the same specificity, so source order put the
   padding back and 40 footer links stayed 36px. An override block has to win
   the cascade, which means being last.

   Scoped to (pointer: coarse) so the desktop design is untouched — a 44px
   minimum is right for a thumb and wrong for a mouse. Inline links in body
   prose are deliberately NOT included: Google does not flag inline targets
   and WCAG 2.5.5 exempts them, and forcing them to 44px would wreck the
   typography of 216 blog posts. */
@media (pointer: coarse) {
  .btn, .tag, .ftr-site, .lang-switch > summary, .lang-menu button,
  .hdr-search, .menu-toggle, .hdr-logo, a.more, a.email, a.v,
  .crumbs a, a.hr-mail, select, summary {
    min-height: 44px;
  }
  .btn, .tag, .ftr-site, .lang-menu button, a.more, a.hr-mail, .crumbs a {
    display: inline-flex; align-items: center;
  }
  /* Breadcrumb links are navigation, not prose, so they are sized like every
     other control. The row is made a wrapping flex line so the 44px links sit
     on a tidy baseline with their separators instead of stretching one very
     tall text line. `a.ex-mono` is deliberately NOT here: every one of them is
     a mailto inside a sentence, which is the same inline exception the body
     links get — and min-height on an inline box does nothing anyway, so the
     old rule only looked like it was doing something. */
  .crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0 7px; }
  .btn-sm { padding: 12px 16px; }
  .tag { padding: 12px 16px; }
  .ftr-site { padding: 12px 14px; }
  .lang-switch > summary { padding: 12px 14px; }
  .lang-menu { width: 232px; gap: 4px; }
  .lang-menu button { padding: 12px 10px; min-width: 44px; }
  .hdr-search, .menu-toggle { width: 44px; height: 44px; }
  .hdr-logo { display: inline-flex; align-items: center; }
  /* The hero progress segments are a 3px-tall control. Extending the hit area
     with a transparent ::after did not work: .exh-seg carries overflow:hidden
     to clip its fills, so the pseudo-element was clipped straight back to 3px
     and every tap 20px off the bar landed on the gradient behind it —
     elementFromPoint returned .exh-grad2, not the button. So the button itself
     becomes 44px tall and paints its own 3px track as a centred background
     strip, with the two fill spans pinned to the same 3px band. Identical on
     screen, forty-four pixels to a thumb. */
  .exh-prog { gap: 8px; }
  .exh-seg { position: relative; height: 44px; border-radius: 0;
    background: linear-gradient(rgba(255,255,255,0.22), rgba(255,255,255,0.22))
      center / 100% 3px no-repeat; }
  .exh-seg-done, .exh-seg-fill { top: 50%; bottom: auto; height: 3px;
    margin-top: -1.5px; border-radius: 3px; }
  /* Checkboxes and radios: the box stays its native size, the label row
     carries the height. */
  input[type="checkbox"], input[type="radio"] { min-width: 24px; min-height: 24px; }
  label { min-height: 44px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  /* The honeypot must stay invisible and untappable — never size it up. */
  .hp-field, input.hp-field { min-width: 0 !important; min-height: 0 !important; }

  /* Dense navigation lists — the footer's region/market/column grids, the
     footer base row, and the HTML sitemap — render their links at 22px, two
     pixels under the 24x24 minimum WCAG 2.2 AA (2.5.8) sets for a pointer
     target. Deliberately taken to 24px and NOT to the 44px this block uses
     elsewhere: 44px is AAA (2.5.5), and the footer alone carries 352 of these
     links, so the AAA figure would add roughly 7,700px to every page on a
     phone. 24px clears the level the rest of this audit is measured against
     and costs the footer almost nothing. */
  .ftr-regions-grid a, .ftr-markets-grid a, .ftr-col a,
  .ftr-social a, .ftr-legal a, .ftr-base a,
  .sitemap-links a {
    min-height: 24px; display: inline-flex; align-items: center;
  }
}