/* ============================================================
   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 INDONESIA DMC — COLOR TOKENS
   A warm volcanic terracotta primary with a saffron-gold accent —
   evoking Balinese temples and volcanic earth, and distinct from
   Thailand (green), Japan (indigo) and Korea (teal). Variable names
   are preserved so components recolor cleanly.
   ============================================================ */
:root {
  /* --- Brand scale: volcanic terracotta / clay --- */
  --green-50:  #fbf1ec;
  --green-100: #f6ddd1;
  --green-200: #eebca6;
  --green-300: #df9776;
  --green-400: #cf6f47;
  --green-500: #bc5630;  /* CORE brand terracotta */
  --green-600: #9f4625;
  --green-700: #80371d;
  --green-800: #5f2916;
  --green-900: #421c0f;

  /* --- Ink: deep espresso-brown — premium dark --- */
  --ink-950: #1a0f08;
  --ink-900: #24160d;
  --ink-800: #2f1d12;  /* dark wordmark */
  --ink-700: #432a1b;
  --ink-600: #5d3d29;
  --ink-500: #7c5740;

  /* --- Accent: saffron / temple gold --- */
  --sand-50:  #fdf8ee;
  --sand-100: #f8eed5;
  --sand-200: #efdcaf;
  --sand-300: #e4c47e;
  --gold-400: #d9a93f;
  --gold-500: #c8941f;  /* accent saffron-gold */
  --gold-600: #a3760f;

  /* --- Warm neutral / stone --- */
  --white:     #ffffff;
  --stone-50:  #faf7f3;
  --stone-100: #f1ece4;
  --stone-200: #e4ddd1;
  --stone-300: #d0c6b5;
  --stone-400: #a89d8b;
  --stone-500: #7f7567;
  --stone-600: #5c544a;
  --stone-700: #423c34;
  --stone-800: #2a2620;
  --stone-900: #181511;

  /* --- Status --- */
  --success: #4f8a3d;
  --info:    #bc5630;
  --warning: #c8941f;
  --danger:  #c0432f;

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

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

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

  /* Borders & lines */
  --border:         var(--stone-200);
  --border-strong:  var(--stone-300);
  --border-ink:     rgba(245,237,228,0.14);
  --divider:        var(--stone-200);

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

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

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

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

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

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

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

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

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

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

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

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

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text-strong);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-tight);
  font-weight: var(--fw-bold);
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); letter-spacing: var(--ls-tighter); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
p { margin: 0 0 1em; text-wrap: pretty; }
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-280 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.gfit-270 { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.gfit-230 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.gfit-210 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }

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

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

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

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

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

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

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

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

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

/* ---------- Hero slider ---------- */
.hero { position: relative; min-height: 660px; display: flex; align-items: flex-end;
  margin-top: calc(-1 * var(--header-h)); overflow: hidden; background: var(--ink-950); }
.hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 900ms var(--ease-in-out); }
.hero-slide.is-active { opacity: 1; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-slide .ovr { position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,24,19,0.55) 0%, rgba(8,24,19,0.18) 38%, rgba(8,24,19,0.84) 100%); }
.hero-in { position: relative; max-width: var(--maxw-wide); margin: 0 auto;
  padding: 0 var(--gutter) 88px; width: 100%; }
.hero-copy { max-width: 740px; display: flex; flex-direction: column; gap: 20px; }
.hero-badges { display: flex; gap: 8px; flex-wrap: wrap; }
.hero-eyebrow { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--green-300); }
.hero-copy h1 { font-family: var(--font-display); color: #fff; margin: 0;
  font-size: clamp(2.4rem, 1.5rem + 3.4vw, 3.9rem); line-height: 1.05; letter-spacing: -0.03em; }
.hero-copy .sub { font-family: var(--font-sans); color: rgba(255,255,255,0.9); font-size: 19px;
  line-height: 1.55; max-width: 600px; margin: 0; }
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.hero-nav { position: absolute; right: var(--gutter); bottom: 36px; display: flex; align-items: center; gap: 14px; }
.hero-dots { display: flex; gap: 8px; }
.hero-dots button { width: 9px; height: 9px; border-radius: 999px; border: 0; cursor: pointer;
  background: rgba(255,255,255,0.45); transition: all var(--dur) var(--ease-out); padding: 0; }
.hero-dots button.is-active { width: 26px; background: var(--green-400); }
.hero-arrows { display: flex; gap: 6px; }
.hero-arrows button { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.12); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center; }
.anim-in { animation: heroIn 700ms var(--ease-out); }
@keyframes heroIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

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

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

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

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

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

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

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

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

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

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

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

/* ---------- FAQ (details/summary) ---------- */
.faq { background: var(--surface-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden; transition: border-color var(--dur) var(--ease-out); }
.faq[open] { border-color: var(--green-300); }
.faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; cursor: pointer; padding: 17px 20px; font-family: var(--font-sans);
  font-size: 15.5px; font-weight: 600; color: var(--text-strong); line-height: 1.4; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ic { color: var(--text-muted); transition: transform var(--dur) var(--ease-out); }
.faq[open] summary .ic { color: var(--brand-strong); transform: rotate(45deg); }
.faq > p { margin: 0; padding: 0 20px 18px; font-size: 14.5px; line-height: 1.65; color: var(--text-body); }
.faq-list { display: flex; flex-direction: column; gap: 10px; max-width: 860px; }
.sticky-aside { position: sticky; top: calc(var(--header-h) + 24px); }

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

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

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

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

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

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

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

dialog.modal { border: 0; border-radius: var(--radius-xl); width: min(560px, calc(100vw - 40px));
  max-height: 90vh; padding: 0; background: var(--surface-card); box-shadow: var(--shadow-xl); }
dialog.modal::backdrop { background: rgba(8,24,19,0.55); backdrop-filter: blur(4px); }
.modal-head { padding: 26px 30px 0; display: flex; justify-content: space-between; align-items: flex-start; }
.modal-head h2 { margin: 10px 0 0; font-size: 26px; }
.modal-close { background: var(--surface-muted); border: 1px solid var(--border); border-radius: 50%;
  width: 36px; height: 36px; cursor: pointer; display: flex; align-items: center; justify-content: center;
  color: var(--text-body); }
.modal-body { padding: 22px 30px 30px; }
.form-ok { display: none; flex-direction: column; gap: 14px; align-items: flex-start; }
.form-ok .check { width: 52px; height: 52px; border-radius: 50%; background: var(--brand-tint);
  color: var(--brand-strong); display: flex; align-items: center; justify-content: center; }
.form-ok p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--text-body); }
form.is-sent { display: none; }
form.is-sent + .form-ok { display: flex; }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ---------- Contact / payments ---------- */
.office { padding: 22px 22px 20px; display: flex; flex-direction: column; gap: 10px; }
.office .top { display: flex; align-items: center; gap: 10px; }
.office .flag { font-size: 22px; }
.office h3 { margin: 0; font-size: 17px; }
.office .co { font-size: 12.5px; color: var(--text-muted); }
.office address { margin: 0; font-style: normal; font-size: 14px; line-height: 1.6; color: var(--text-body); }
.office .regs { display: flex; flex-direction: column; gap: 5px; border-top: 1px solid var(--divider); padding-top: 10px; }
.office .regs div { display: flex; justify-content: space-between; gap: 10px; }
.office .regs span:first-child { font-size: 12px; color: var(--text-muted); }
.office .regs span:last-child { font-family: var(--font-mono); font-size: 12px; color: var(--text-strong); }

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

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

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

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

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

/* ---------- 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; }
  .ctaband { padding: 36px 28px; }
  .hero { min-height: 560px; }
  /* Mobile nav: collapse into a dropdown panel */
  .menu-toggle { display: block; }
  .hdr nav { display: none; }
  .hdr.is-menu-open nav { display: flex; flex-direction: column; position: absolute;
    top: var(--header-h); left: 0; right: 0; background: var(--surface-card);
    border-bottom: 1px solid var(--border); box-shadow: var(--shadow-lg); padding: 10px var(--gutter) 18px; }
  .hdr.is-menu-open .hdr-link { color: var(--text-strong); padding: 12px 0; }
  .hdr.is-menu-open .mega { display: none; }
  .hdr .btn-signup { display: none; }
}
@media (max-width: 560px) {
  .trustbar .container { grid-template-columns: repeat(2, 1fr); }
  .ftr-top { grid-template-columns: 1fr; }
  .hero-nav { display: none; }
}

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

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

/* ---- Mobile nav: extend toggle-driven panel up to 900px ---- */
@media (max-width: 900px) {
  /* 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; }
  /* Login/signup move into the panel and stack full-width. */
  .hdr-right { gap: 6px; }
  .hdr.is-menu-open .hdr-right { position: absolute; top: var(--header-h);
    left: 0; right: 0; flex-direction: column; align-items: stretch;
    padding: 12px var(--gutter) 16px; gap: 10px; }
  .hdr.is-menu-open .hdr-right .btn { width: 100%; min-height: 44px; }
}

/* ============================== <= 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); }
  .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; }
  .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; }
  .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; }
}