/* ============================================================
   EXPLERA DMC NEW ZEALAND — FONTS (owner, 2026-10-05: "professional,
   creative, attractive"; replaces Cabinet Grotesk + Aldrich)
   Plus Jakarta Sans  → everything: headings, body, UI, labels (Google Fonts)
   Instrument Serif   → the one italic accent word in a headline (Google Fonts)
   Both load from Google Fonts, which the CSP already allows.
   ============================================================ */

/* ============================================================
   EXPLERA DMC NEW ZEALAND — COLOUR TOKENS ("Meridian" theme)
   Built from the Explera mark: fern green #8bb22e → kawakawa #dce284,
   pounamu #12302b, volcanic black. Accents: kōwhai gold, Pacific ocean.
   The theme is a corporate one — clean white and cool mist surfaces,
   deep pounamu-black bands, fern as the single bright signal colour.
   Variable names are kept from the shared system (--green-*, --ink-*,
   --gold-*) so inline styles in the page modules still resolve.
   ============================================================ */
:root {
  --green-50:  #f4f9e6;
  --green-100: #e7f2c9;
  --green-200: #dce284;
  --green-300: #c4e06a;
  --green-400: #a9cf3f;
  --green-500: #8bb22e;
  --green-600: #6f9423;
  --green-700: #4b6a12;
  --green-800: #36500c;
  --green-900: #233507;

  --ink-950: #050d0b;
  --ink-900: #0a1714;
  --ink-800: #0f231f;
  --ink-700: #16332d;
  --ink-600: #21463e;
  --ink-500: #2f5d52;

  --gold-400: #f0c34e;
  --gold-500: #e0a91c;
  --gold-600: #b9850f;
  --gold-700: #8a6206;

  --ocean-500: #1f7f97;
  --ocean-300: #7cc3d3;
  --glacier:   #bfe3ea;

  --stone-50:  #f6f8f6;
  --stone-100: #eef2ef;
  --stone-200: #e1e7e3;
  --stone-300: #c8d1cc;
  --stone-400: #9aa7a1;
  --stone-500: #6b7a74;
  --stone-600: #4a5853;
  --sand-50:  #f6f8f6;
  --sand-200: #e1e7e3;
  --sand-300: #c8d1cc;

  /* Semantic — "Dark immersive" (owner, 2026-10-05: Safari-style dark site).
     Pounamu-black page, slightly lifted surfaces for cards and panels, lime as
     the signal colour. Text contrast on --bg-page: strong 16:1, body 10:1,
     muted 6:1, faint 4.6:1 (all AA). */
  --bg-page:        #06110e;
  --surface-card:   #0d1c18;
  --surface-raised: #11241f;
  --surface-muted:  #0b1915;
  --surface-sand:   #0f201b;
  --surface-ink:    #030a08;

  --text-strong: #f3f7f2;
  --text-body:   #c4cfc8;
  --text-muted:  #94a49c;
  --text-faint:  #7d8d86;
  --text-link:   #b8e04a;
  --text-on-dark:        #eef4ef;
  --text-on-dark-muted:  rgba(238,244,239,0.7);
  --text-sub: rgba(238,244,239,0.7);

  --brand:        #8bb22e;
  --brand-strong: #b8e04a;
  --brand-tint:   rgba(139,178,46,0.14);
  --brand-soft:   rgba(139,178,46,0.24);
  --accent-gold:  #e0a91c;
  --accent-gold-soft: rgba(224,169,28,0.14);
  --gold-text: #f0c34e;
  --signal:       #b8e04a;

  --border:        rgba(255,255,255,0.09);
  --border-strong: rgba(255,255,255,0.18);
  --divider:       rgba(255,255,255,0.07);
  --border-ink:    rgba(255,255,255,0.12);
  --ring:          rgba(184,224,74,0.45);
  --danger:        #ff8a7a;
}

/* ============================================================
   EXPLERA DMC — TYPOGRAPHY TOKENS ("Meridian" theme)
   One grotesk for the whole system, set large and tight; a serif
   italic for one accent word; .
   ============================================================ */
:root {
  --font-display: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-sans:    'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif:   'Instrument Serif', Georgia, 'Times New Roman', serif;
  --font-tech:    'Plus Jakarta Sans', system-ui, sans-serif;
  --font-mono:    'Plus Jakarta Sans', system-ui, sans-serif;

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

  --fs-mega:     clamp(3rem, 1rem + 7.4vw, 8.4rem);   /* @kind other */
  --fs-display:  clamp(2.6rem, 1.1rem + 5vw, 6rem);   /* @kind other */
  --fs-h1:       clamp(2.4rem, 1.2rem + 4vw, 4.8rem); /* @kind other */
  --fs-h2:       clamp(2rem, 1.1rem + 2.8vw, 3.6rem); /* @kind other */
  --fs-h3:       clamp(1.25rem, 1.05rem + 0.6vw, 1.55rem); /* @kind other */
  --fs-h4:       1.125rem;
  --fs-body-lg:  1.1875rem;
  --fs-body:     1.0625rem;
  --fs-sm:       0.9375rem;
  --fs-xs:       0.8125rem;
  --fs-eyebrow:  0.75rem;

  --lh-tight:   0.96;  /* @kind other */
  --lh-snug:    1.08;  /* @kind other */
  --lh-heading: 1.04;  /* @kind other */
  --lh-body:    1.62;  /* @kind other */
  --lh-relaxed: 1.75;  /* @kind other */

  --ls-tighter: -0.035em; /* @kind other */
  --ls-tight:   -0.025em;  /* @kind other */
  --ls-normal:  0em;      /* @kind other */
  --ls-wide:    0.04em;   /* @kind other */
  --ls-eyebrow: 0.12em;   /* @kind other */
  --ls-mono:    0.04em;   /* @kind other */
}

/* Script fonts for the non-Latin locales (2026-10-05). Plus Jakarta Sans covers
   Latin only (its "Cyrillic Extended" subset lacks basic Russian), so each locale
   adds a matching sans after it: Latin glyphs (brand names, IATA numbers) stay in
   Jakarta and the script falls through to the second family. The stylesheet for
   each is linked only on that locale's pages, by localizeHtml() in lib/i18n.mjs. */
:root:lang(ja) { --font-display: 'Plus Jakarta Sans', 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic', sans-serif; }
:root:lang(ko) { --font-display: 'Plus Jakarta Sans', 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif; }
:root:lang(ar) { --font-display: 'IBM Plex Sans Arabic', 'Noto Sans Arabic', Tahoma, sans-serif; }
:root:lang(ru) { --font-display: 'Plus Jakarta Sans', 'Manrope', 'Segoe UI', Arial, sans-serif; }
:root:lang(ja), :root:lang(ko), :root:lang(ar), :root:lang(ru) {
  --font-sans: var(--font-display); --font-tech: var(--font-display); --font-mono: var(--font-display);
}

/* ============================================================
   EXPLERA DMC — SPACING, RADII, SHADOWS, LAYOUT ("Meridian" theme)
   ============================================================ */
:root {
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.5rem;  --space-6: 2rem;   --space-7: 2.5rem;  --space-8: 3rem;
  --space-9: 4rem;    --space-10: 5rem;  --space-12: 7rem;
  --section-y: clamp(4rem, 2rem + 5vw, 7.5rem); /* @kind spacing */

  /* Radii — generous, the signature of the theme */
  --radius-xs:  6px;
  --radius-sm:  10px;
  --radius-md:  14px;
  --radius-lg:  20px;
  --radius-xl:  28px;
  --radius-2xl: 36px;
  --radius-pill: 999px;
  --radius-card: var(--radius-lg);

  --shadow-xs: 0 1px 2px rgba(0,0,0,0.06);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3), 0 4px 14px -6px rgba(0,0,0,0.4);
  --shadow-md: 0 2px 6px rgba(0,0,0,0.3), 0 18px 40px -18px rgba(0,0,0,0.65);
  --shadow-lg: 0 4px 12px rgba(0,0,0,0.35), 0 40px 80px -30px rgba(0,0,0,0.75);
  --shadow-xl: 0 60px 120px -40px rgba(5,13,11,0.55);
  --shadow-glow: 0 0 0 1px rgba(184,224,74,0.35), 0 18px 50px -12px rgba(139,178,46,0.55);

  --maxw-prose:   70ch;     /* @kind other */
  --maxw-content: 1120px;   /* @kind other */
  --maxw-wide:    1360px;   /* @kind other */
  --maxw-full:    1600px;   /* @kind other */
  --maxw-hdr:     1440px;   /* @kind other */
  --gutter:       clamp(1rem, 0.4rem + 3vw, 3rem); /* @kind spacing */
  --header-h:     112px;    /* @kind spacing */ /* utility strip 36 + bar 76; 72 under 1181px */
  --header-stick: 76px;     /* @kind spacing */ /* the bar alone: the strip folds away on scroll; 64 under 1181px */

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);     /* @kind other */
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1); /* @kind other */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
  --dur-fast: 160ms; /* @kind other */
  --dur:      320ms; /* @kind other */
  --dur-slow: 700ms; /* @kind other */
}

/* ============================================================
   EXPLERA DMC — BASE ELEMENTS ("Meridian" theme)
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-stick) + 12px); }
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;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "tnum" 0;
}
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); font-weight: var(--fw-black); }
h2 { font-size: var(--fs-h2); letter-spacing: var(--ls-tighter); }
h3 { font-size: var(--fs-h3); letter-spacing: -0.02em; line-height: 1.2; }
h4 { font-size: var(--fs-h4); }
h1 em, h2 em, h3 em { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -0.005em; font-size: 1.08em; line-height: 0.9; }
/* Justified paragraph text everywhere (owner, 2026-10-08: "all paragraph or
   2 line text will be alignment justify"; reverses the 2026-10-07 ragged-right
   change). Hyphenation keeps word spacing even on narrow phone columns;
   text-align-last keeps each paragraph's final line ragged. `justify` follows
   the writing direction, so RTL locales justify correctly. Components that set
   their own alignment (centred captions, CTA lines, tables) keep it. */
p, li, dd, blockquote, figcaption, .faq > p {
  text-align: justify; text-justify: inter-word; text-align-last: start;
  -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 7 3 3; overflow-wrap: break-word;
}
p { margin: 0 0 1em; }
a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
img { max-width: 100%; height: auto; }
button { font: inherit; }

/* Eyebrow — a small pill with a live fern dot. */
.ex-eyebrow {
  font-family: var(--font-tech);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-strong);
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 10px;
  padding: 7px 14px 7px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.04);
  line-height: 1.2;
}
.ex-eyebrow::before {
  content: "";
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 4px rgba(139,178,46,0.18);
  flex: none;
}
.ex-eyebrow.on-dark { color: var(--text-on-dark); border-color: rgba(255,255,255,0.18); background: rgba(255,255,255,0.05); }
.ex-eyebrow.on-dark::before { background: var(--signal); box-shadow: 0 0 0 4px rgba(184,224,74,0.18); }

.ex-serif { font-family: var(--font-serif); font-style: italic; font-weight: 400; }
.ex-mono { font-family: var(--font-mono); letter-spacing: var(--ls-mono); }
.ex-prose { max-width: var(--maxw-prose); line-height: var(--lh-relaxed); color: var(--text-body); }
.ex-prose p { margin-bottom: 1.1em; }
.ex-rule-gold { height: 3px; width: 48px; background: var(--brand); border: 0; border-radius: 3px; margin: 0; }
.ex-grad-text {
  background: linear-gradient(100deg, var(--green-500), 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(--brand); outline-offset: 3px; border-radius: 6px; }

/* Non-Latin locales: the Instrument Serif italic accent has no CJK, Arabic or
   Cyrillic glyphs, and synthetic italics in those scripts read as a rendering
   fault. The accent word keeps its colour and drops the face and the slant. */
:lang(ja) :is(h1, h2, h3) em, :lang(ko) :is(h1, h2, h3) em,
:lang(ar) :is(h1, h2, h3) em, :lang(ru) :is(h1, h2, h3) em,
:lang(ja) .ftr-statement em, :lang(ko) .ftr-statement em, :lang(ar) .ftr-statement em, :lang(ru) .ftr-statement em {
  font-family: inherit; font-style: normal; font-weight: inherit; font-size: 1em; line-height: inherit; letter-spacing: inherit;
}
:lang(ja) :is(h1, h2, h3, h4), :lang(ko) :is(h1, h2, h3, h4), :lang(ar) :is(h1, h2, h3, h4) { letter-spacing: 0; }
:lang(ja) :is(p, li, dd) { line-break: strict; }
/* Korean breaks between words, not syllables. */
:lang(ko) { word-break: keep-all; overflow-wrap: anywhere; }
:lang(ar) :is(p, li, dd, blockquote) { line-height: 1.8; }

/* ============================================================
   EXPLERA DMC NEW ZEALAND — "MERIDIAN" THEME (2026-10-05)
   A full rewrite, not a layer: the owner asked for a modern, rich,
   professional, multinational look with motion and depth. Clean white
   and mist surfaces, deep pounamu-black bands, one bright fern signal,
   oversized grotesk type with a serif italic accent, generous radii.
   Every class the markup renders is defined here (guard-css enforces it).
   Tokens come from static/tokens/*, concatenated above this file.
   ============================================================ */

/* ---------- Layout primitives ---------- */
/* Safety net only: `clip` creates no scroll container, so sticky still works,
   and scripts/measure checks element boxes, so overflow is still visible to tests. */
body { overflow-x: clip; }
.container { width: 100%; max-width: var(--maxw-wide); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--section-y) 0; position: relative; }
.section.pt-0 { padding-top: 0; }
.section.pb-0 { padding-bottom: 0; }
.section.tight { padding: 56px 0; }
.bg-sand { background: var(--surface-sand); }
.bg-ink { background: var(--ink-900); color: var(--text-on-dark); }
.bg-ink950 { background: var(--ink-950); color: var(--text-on-dark); }
.ic { display: inline-block; vertical-align: -0.18em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

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

.sec-head { display: flex; flex-direction: column; gap: 18px; margin-bottom: 48px; max-width: 760px; }
.sec-head.tight { margin-bottom: 26px; gap: 14px; }
.sec-head h2 { margin: 0; font-size: var(--fs-h2); }
.sec-head.sm h2 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); }
.sec-head.md h2 { font-size: clamp(1.8rem, 1.3rem + 1.8vw, 2.8rem); }
.sec-head p { margin: 0; font-size: var(--fs-body-lg); line-height: 1.6; color: var(--text-body); max-width: 60ch; }
.sec-head.on-dark p { color: var(--text-on-dark-muted); }
.sec-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px 48px; flex-wrap: wrap; margin-bottom: 48px; }
.sec-row .sec-head { margin-bottom: 0; }
.sec-aside { margin: 0; max-width: 34ch; font-size: var(--fs-body); color: var(--text-muted); line-height: 1.6; }
.on-dark h2, .on-dark h3 { color: #fff; }
h2 em, h1 em { color: var(--brand-strong); }
.on-dark h2 em, .hx-dark h2 em, .ink-hero h1 em, .mh h1 em, .ctaband h2 em, .inkpanel h2 em, .gx-sec h2 em { color: var(--signal); }

.split-2 { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 5vw, 88px); align-items: start; }
.split-21 { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.split-13 { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.split-faq { display: grid; grid-template-columns: 0.85fr 1.35fr; gap: clamp(32px, 6vw, 110px); align-items: start; }
.stack { display: flex; flex-direction: column; gap: 18px; }
.stack-sm { display: flex; flex-direction: column; gap: 12px; }
.stack > h2 { margin: 0; font-size: clamp(1.9rem, 1.2rem + 2vw, 3rem); }
.stack > p { margin: 0; }

/* ---------- Buttons ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-sans); font-weight: 700; font-size: 15px; line-height: 1; letter-spacing: -0.005em;
  padding: 14px 22px; border-radius: var(--radius-pill); border: 1px solid transparent;
  cursor: pointer; text-decoration: none; white-space: nowrap; max-width: 100%; overflow: hidden; isolation: isolate;
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), translate var(--dur) var(--ease-out); }
@media (hover: hover) { .btn:hover { text-decoration: none; } }
.btn:active { transform: scale(0.97); }
.btn .ic { transition: transform var(--dur) var(--ease-out); }
@media (hover: hover) { .btn:hover .ic:last-child { transform: translateX(3px); } }
[dir="rtl"] .btn .ic:last-child:not(.ic-nomirror) { transform: scaleX(-1); }
@media (hover: hover) { [dir="rtl"] .btn:hover .ic:last-child:not(.ic-nomirror) { transform: translateX(-3px) scaleX(-1); } }
@media (hover: hover) { .btn:hover .ic-nomirror:last-child { transform: none; } }
.btn-apply { white-space: normal; text-align: left; line-height: 1.35; }
.btn-sm { padding: 10px 16px; font-size: 14px; gap: 6px; }
.btn-lg { padding: 18px 30px; font-size: 16px; gap: 10px; }
.btn-primary { background: var(--brand); color: var(--ink-900); box-shadow: 0 1px 0 rgba(255,255,255,0.35) inset, 0 10px 30px -12px rgba(139,178,46,0.75); }
@media (hover: hover) { .btn-primary:hover { background: var(--signal); box-shadow: var(--shadow-glow); } }
.btn-ink { background: var(--surface-raised); color: #fff; border: 1px solid var(--border-strong); }
@media (hover: hover) { .btn-ink:hover { background: var(--ink-700); } }
.btn-gold { background: var(--gold-500); color: var(--ink-900); }
@media (hover: hover) { .btn-gold:hover { background: var(--gold-400); } }
.btn-outline { background: transparent; color: var(--text-strong); border-color: var(--border-strong); }
@media (hover: hover) { .btn-outline:hover { border-color: var(--signal); background: var(--signal); color: var(--ink-900); } }
.btn-ghost { background: var(--surface-muted); color: var(--text-strong); }
@media (hover: hover) { .btn-ghost:hover { background: var(--stone-200); } }
.btn-ghost.on-dark { background: rgba(255,255,255,0.06); color: #fff; border-color: rgba(255,255,255,0.18); }
@media (hover: hover) { .btn-ghost.on-dark:hover { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.3); } }
.btn-white { background: #fff; color: var(--ink-900); }
@media (hover: hover) { .btn-white:hover { background: var(--green-50); } }
.btn-glass { background: rgba(255,255,255,0.1); color: #fff; border-color: rgba(255,255,255,0.28);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
@media (hover: hover) { .btn-glass:hover { background: rgba(255,255,255,0.2); } }

/* ---------- Badges, tags ---------- */
.badge { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-sans);
  font-size: 13px; font-weight: 700; padding: 6px 12px; border-radius: var(--radius-pill);
  border: 1px solid; white-space: nowrap; line-height: 1.2; }
.badge-green { background: var(--brand-tint); color: var(--green-800); border-color: var(--brand-soft); }
.badge-ink { background: rgba(255,255,255,0.06); color: var(--text-on-dark); border-color: rgba(255,255,255,0.14); }
.badge-glass { background: rgba(255,255,255,0.08); color: #fff; border-color: rgba(255,255,255,0.22);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.tag { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-sans);
  font-size: 14px; font-weight: 600; line-height: 1; padding: 11px 18px; border-radius: var(--radius-pill);
  cursor: pointer; background: transparent; color: var(--text-body);
  border: 1px solid var(--border-strong); transition: all var(--dur) var(--ease-out); }
@media (hover: hover) { .tag:hover { border-color: var(--signal); color: var(--text-strong); text-decoration: none; } }
.tag.is-active { background: var(--signal); color: var(--ink-900); border-color: var(--signal); }
.tagrow { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- Header: "Structured" — utility strip + main bar + mega panels ----------
   Owner, 2026-10-08: "still i did not like menu style" -> "go by self" ->
   "& structured". Replaces the "Archipelago" floating islands and gliding ink
   pill. Two full-width tiers: a 36px darker utility strip (trade note, email,
   WhatsApp, Agent login, language) over a 76px bar (logo 39px, six links,
   search, Become a partner, Request a quote). The active or hovered link gets
   lime text and a 3px lime bar. Corners are 8px. Under 1181px the strip hides
   and the links fold into an accordion drawer (see "Responsive").
   --header-h is the page-top allowance (strip + bar); --header-stick is the bar
   alone, for sticky offsets, because the strip folds away once the page scrolls. */
.hdr { position: fixed; top: 0; left: 0; right: 0; z-index: 60; transition: transform 520ms var(--ease-out); }
.hdr-util, .hdr-bar { padding-inline: var(--gutter); }
.hdr-util-in, .hdr-in { max-width: var(--maxw-hdr); margin: 0 auto; }
.hdr-util { position: relative; z-index: 2; height: 36px; font-size: 12.5px; line-height: 1; color: rgba(255,255,255,0.72);
  background: rgba(3,9,8,0.62); border-bottom: 1px solid rgba(255,255,255,0.07);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  transition: height var(--dur) var(--ease-out), opacity var(--dur-fast) var(--ease-out), background var(--dur) var(--ease-out); }
.hdr-util-in { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.hdr-util-note { margin: 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hdr-util-links { display: flex; align-items: center; gap: 26px; flex: none; }
.hdr-util-links > a { color: rgba(255,255,255,0.78); white-space: nowrap; transition: color var(--dur-fast) var(--ease-out); }
.hdr-util-links > a.hdr-util-login { color: #fff; font-weight: 700; }
@media (hover: hover) { .hdr-util-links > a:hover { color: var(--signal); text-decoration: none; } }
.hdr.is-scrolled:not(.is-menu-open) .hdr-util { height: 0; opacity: 0; border-bottom-width: 0; overflow: hidden; pointer-events: none; }
.hdr-bar { position: relative; z-index: 1; height: 76px; background: rgba(6,17,14,0.34); border-bottom: 1px solid rgba(255,255,255,0.10);
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  transition: background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out); }
.hdr.is-solid .hdr-bar { background: rgba(7,18,15,0.97); border-bottom-color: rgba(255,255,255,0.09); }
.hdr.is-solid .hdr-util { background: rgba(3,9,8,0.96); }
.hdr-in { position: relative; height: 100%; display: flex; align-items: stretch; gap: 8px; }
.hdr-logo { display: flex; align-items: center; flex: none; margin-inline-end: clamp(14px, 2.4vw, 36px); }
.hdr-logo img { height: 39px; width: auto; max-width: none; display: block; flex: none; }
@media (hover: hover) { .hdr-logo:hover { text-decoration: none; } }
.hdr-logo .logo-dark { display: none; } /* dark theme: the white mark on every header state */
.hdr-logo .logo-white { display: block; }
.hdr nav { display: flex; align-items: stretch; gap: 2px; min-width: 0; }
.has-mega { display: flex; position: static; }
.hdr-link { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; white-space: nowrap;
  font-family: var(--font-sans); font-size: 15px; font-weight: 600; color: rgba(255,255,255,0.88);
  transition: color var(--dur-fast) var(--ease-out); }
.hdr-link::after { content: ""; position: absolute; inset-inline: 12px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--signal);
  transform: scaleX(0); transition: transform var(--dur) var(--ease-out); }
.hdr-link[aria-current], .has-mega:focus-within > .hdr-link, .has-mega.is-open > .hdr-link { color: var(--signal); }
.hdr-link[aria-current]::after, .has-mega:focus-within > .hdr-link::after, .has-mega.is-open > .hdr-link::after { transform: scaleX(1); }
@media (hover: hover) {
  .hdr-link:hover, .has-mega:hover > .hdr-link { color: var(--signal); text-decoration: none; }
  .hdr-link:hover::after, .has-mega:hover > .hdr-link::after { transform: scaleX(1); }
}
.hdr-link:focus-visible { outline: 2px solid var(--ring); outline-offset: -6px; border-radius: 8px; }
.hdr-link .ic { opacity: 0.7; transition: transform var(--dur) var(--ease-out); }
.has-mega:focus-within > .hdr-link .ic, .has-mega.is-open > .hdr-link .ic { transform: rotate(180deg); }
@media (hover: hover) { .has-mega:hover > .hdr-link .ic { transform: rotate(180deg); } }
.hdr-right { display: flex; align-items: center; gap: 10px; flex: none; margin-inline-start: auto; }
.hdr-search { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border: 0; border-radius: 8px; background: transparent; color: #fff; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
@media (hover: hover) { .hdr-search:hover { background: rgba(184,224,74,0.16); color: var(--signal); } }
.hdr .btn { border-radius: 8px; box-shadow: none; }
.hdr .btn-sm { min-height: 44px; padding: 0 20px; font-size: 14.5px; }
.hdr .hdr-partner { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.3); }
@media (hover: hover) { .hdr .hdr-partner:hover { background: transparent; color: var(--signal); border-color: var(--signal); } }
.hdr .btn-rfq { background: var(--brand); color: var(--ink-900); }
@media (hover: hover) { .hdr .btn-rfq:hover { background: var(--signal); } }
.rfq-short, .hdr-drawer, .mega-tg, .menu-toggle { display: none; }

/* Mega panels: attached to the bar's lower edge, aligned to the logo. */
.mega { position: absolute; top: 100%; inset-inline-start: 0; z-index: 3; width: min(100%, 1200px);
  background: #0c1b17; border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 30px 60px -24px rgba(0,0,0,0.85);
  opacity: 0; visibility: hidden; transform: translateY(-6px); transform-origin: top left;
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), visibility var(--dur);
  max-height: calc(100vh - 124px); overflow-y: auto; overscroll-behavior: contain; }
.mega-svc { width: min(100%, 1200px); }
.mega-dst { width: min(100%, 1010px); }
.has-mega:focus-within .mega, .has-mega.is-open .mega { opacity: 1; visibility: visible; transform: none; }
@media (hover: hover) { .has-mega:hover .mega { opacity: 1; visibility: visible; transform: none; } }
.has-mega.is-dismissed .mega { opacity: 0; visibility: hidden; }
.mega-label { margin: 0 0 14px; font-family: var(--font-sans); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--signal); line-height: 1.4; }
[dir="rtl"] .mega-label { letter-spacing: 0; }
.mega-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mega-sec { padding: 26px 26px 20px; border-inline-end: 1px solid var(--divider); min-width: 0; }
.mega-item { display: block; padding: 8px 0; }
.mega-item b { display: block; font-size: 15px; font-weight: 600; color: #fff; line-height: 1.3; transition: color var(--dur-fast) var(--ease-out); }
.mega-item small { display: block; margin-top: 2px; font-size: 13px; color: var(--text-muted); line-height: 1.4; }
@media (hover: hover) { .mega-item:hover { text-decoration: none; } .mega-item:hover b { color: var(--signal); } }
.mega-feat { padding: 26px; background: rgba(139,178,46,0.14); display: flex; flex-direction: column; align-items: flex-start; gap: 0; min-width: 0; }
.mega-feat-t { margin: 0 0 12px; font-size: 24px; font-weight: 700; color: #fff; line-height: 1.2; letter-spacing: -0.01em; }
.mega-feat-p { margin: 0 0 20px; font-size: 14px; line-height: 1.55; color: rgba(255,255,255,0.72); }
.mega-feat .btn { margin-top: auto; }
.mega-foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 15px 26px;
  border-top: 1px solid var(--divider); background: rgba(0,0,0,0.22); font-size: 13.5px; color: rgba(255,255,255,0.7); }
.mega-foot p { margin: 0; }
.mega-foot p a { color: rgba(255,255,255,0.82); }
@media (hover: hover) { .mega-foot p a:hover { color: var(--signal); } }
.mega-more { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--signal); white-space: nowrap; }
@media (hover: hover) { .mega-more:hover { text-decoration: none; } .mega-more:hover .ic { transform: translateX(3px); } }
.mega-more .ic { transition: transform var(--dur) var(--ease-out); }
[dir="rtl"] .mega-more .ic, [dir="rtl"] .mega-feat .ic { transform: scaleX(-1); }
[dir="rtl"] .mega-more:hover .ic { transform: scaleX(-1) translateX(3px); }

.mega-dm { display: grid; grid-template-columns: 250px minmax(0, 1fr); }
.dm-regions { padding: 22px 12px 18px; background: rgba(0,0,0,0.2); border-inline-end: 1px solid var(--divider); }
.dm-regions .mega-label { padding-inline: 12px; }
.dm-tab { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 8px;
  font-size: 14.5px; font-weight: 500; line-height: 1.3; color: rgba(255,255,255,0.8);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.dm-tab > span { min-width: 0; overflow-wrap: anywhere; }
.dm-tab .ic { flex: none; opacity: 0.5; }
[dir="rtl"] .dm-tab .ic { transform: scaleX(-1); }
.dm-tab.is-active { background: rgba(184,224,74,0.13); color: var(--signal); font-weight: 600; }
.dm-tab.is-active .ic { opacity: 1; }
@media (hover: hover) { .dm-tab:hover { text-decoration: none; background: rgba(255,255,255,0.06); color: #fff; } .dm-tab.is-active:hover { background: rgba(184,224,74,0.13); color: var(--signal); } }
.dm-tab:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
.dm-pane { display: none; grid-template-columns: minmax(0, 1fr) 330px; min-height: 340px; }
.dm-pane.is-active { display: grid; }
.dm-list { padding: 26px 28px 22px; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.dm-head { color: var(--signal); }
@media (hover: hover) { .dm-head:hover { text-decoration: underline; } }
.dm-cities { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px 22px; width: 100%; margin-bottom: 18px; }
.dm-cities a { font-size: 15px; font-weight: 500; line-height: 1.3; color: rgba(255,255,255,0.78); overflow-wrap: anywhere; transition: color var(--dur-fast) var(--ease-out); }
.dm-cities a.is-flagship { font-weight: 700; color: #fff; }
@media (hover: hover) { .dm-cities a:hover { color: var(--signal); text-decoration: none; } }
.dm-list .mega-more { margin-top: auto; }
.dm-photo { position: relative; display: block; overflow: hidden; min-height: 240px; background: var(--ink-950); }
.dm-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.dm-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,17,14,0) 38%, rgba(6,17,14,0.88)); }
.dm-cap { position: absolute; inset-inline: 20px; bottom: 18px; z-index: 1; display: flex; flex-direction: column; gap: 3px; }
.dm-cap b { font-size: 22px; font-weight: 700; color: #fff; line-height: 1.2; }
.dm-cap small { font-size: 13px; color: rgba(255,255,255,0.78); line-height: 1.35; }
@media (hover: hover) { .dm-photo:hover { text-decoration: none; } }

.lang-switch { position: relative; }
.lang-switch > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-family: var(--font-sans); font-weight: 700; font-size: 12.5px; color: #fff; border-radius: 6px; padding: 6px 4px; }
.lang-switch > summary::-webkit-details-marker { display: none; }
.lang-switch--drawer { margin-top: 2px; }
.lang-switch > summary:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.lang-switch [data-lang-current] { display: inline-block; max-width: 8em; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.lang-menu { position: absolute; right: 0; top: calc(100% + 12px); z-index: 70; width: 190px; max-width: calc(100vw - 24px);
  background: var(--surface-raised); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow-md);
  padding: 6px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.lang-menu button { text-align: start; background: none; border: 0; cursor: pointer; padding: 9px 10px; border-radius: 6px; font-size: 13px; color: var(--text-body); }
.lang-menu button.is-active { background: var(--brand-tint); color: var(--brand-strong); }
@media (hover: hover) { .lang-menu button:hover { background: var(--brand-tint); color: var(--brand-strong); } }
[dir="rtl"] .lang-menu { right: auto; left: 0; }
.ic-caret { transition: transform .2s ease; }
.lang-switch[open] .ic-caret { transform: rotate(180deg); }

.menu-toggle { align-items: center; gap: 8px; height: 44px; padding: 0 12px; border: 1px solid rgba(255,255,255,0.3); border-radius: 8px; cursor: pointer;
  background: transparent; color: #fff; font-family: var(--font-sans); font-size: 14px; font-weight: 700; }
.menu-toggle .mt-close, .menu-toggle .mt-ic-close { display: none; }
.menu-toggle[aria-expanded="true"] .mt-open, .menu-toggle[aria-expanded="true"] .mt-ic-open { display: none; }
.menu-toggle[aria-expanded="true"] .mt-close { display: inline; }
.menu-toggle[aria-expanded="true"] .mt-ic-close { display: inline-block; }
.menu-toggle:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

/* ---------- Homepage hero: framed, full-viewport, cross-fading ---------- */
.mh { position: relative; padding: 10px; min-height: 100vh; min-height: clamp(700px, 100svh, 1080px); background: var(--bg-page); }
/* The frame fills the viewport but grows with its content, so a long headline
   on a short or very wide screen never runs into the chapter bar. */
.mh-frame { position: relative; min-height: calc(100vh - 20px); min-height: calc(clamp(700px, 100svh, 1080px) - 20px); display: flex; flex-direction: column;
  border-radius: var(--radius-2xl); overflow: hidden; background: var(--ink-950); isolation: isolate; }
.mh-media { position: absolute; inset: 0; z-index: -1; }
.mh-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1600ms var(--ease-in-out); }
.mh-slide.is-active { opacity: 1; }
.mh-slide img, .mh-img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.14); transform-origin: 60% 45%;
  transition: transform 9000ms cubic-bezier(0.2, 0.6, 0.2, 1); will-change: transform; }
.mh-slide.is-active img { transform: scale(1.02); }
/* Scrim (design audit, 2026-10-07): pale slides (snow, cloud, white water)
   washed out the white H1, so the shade is deeper at the bottom and along the
   reading side, and the headline carries a soft shadow. Mirrored in RTL. */
.mh-shade { position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(5,13,11,0.6) 0%, rgba(5,13,11,0.2) 22%, rgba(5,13,11,0.42) 46%, rgba(5,13,11,0.94) 100%),
    linear-gradient(90deg, rgba(5,13,11,0.6) 0%, rgba(5,13,11,0.25) 50%, rgba(5,13,11,0) 80%),
    radial-gradient(90% 80% at 0% 100%, rgba(5,13,11,0.8), transparent 62%); }
[dir="rtl"] .mh-shade { background:
    linear-gradient(180deg, rgba(5,13,11,0.6) 0%, rgba(5,13,11,0.2) 22%, rgba(5,13,11,0.42) 46%, rgba(5,13,11,0.94) 100%),
    linear-gradient(270deg, rgba(5,13,11,0.6) 0%, rgba(5,13,11,0.25) 50%, rgba(5,13,11,0) 80%),
    radial-gradient(90% 80% at 100% 100%, rgba(5,13,11,0.8), transparent 62%); }
.mh-h, .mh-sub { text-shadow: 0 2px 28px rgba(5,13,11,0.45); }
.mh-grain { position: absolute; inset: 0; opacity: 0.16; mix-blend-mode: overlay; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.mh-body { position: relative; flex: 1 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 40px;
  padding: calc(var(--header-h) + 40px) clamp(22px, 4.4vw, 72px) 40px; }
.mh-copy { display: flex; flex-direction: column; justify-content: flex-end; gap: 26px; max-width: 1000px; }
.mh-h { margin: 0; color: #fff; font-size: clamp(2.6rem, min(1rem + 5.2vw, 8.6vh + 0.6rem), 7rem); line-height: 0.94; letter-spacing: -0.04em;
  font-weight: 800; max-width: 15ch; text-wrap: balance; }
.mh-h em { letter-spacing: -0.03em; }
.mh-sub { margin: 0; color: rgba(255,255,255,0.8); font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.3rem); line-height: 1.55; max-width: 52ch; }
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.mh-card { width: 330px; padding: 24px; border-radius: var(--radius-lg); color: #fff;
  background: rgba(10,23,20,0.38); border: 1px solid rgba(255,255,255,0.16);
  -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4); }
.mh-card-k { display: block; font-family: var(--font-tech); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--signal); margin-bottom: 14px; }
.mh-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.mh-card li { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.4; color: rgba(255,255,255,0.72); }
.mh-card li .ic { margin-top: 1px; color: var(--signal); }
.mh-card li b { display: block; color: #fff; font-weight: 700; font-size: 15px; }
.mh-card-go { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 18px; padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.14); color: #fff; font-family: var(--font-tech); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 13px; }
@media (hover: hover) { .mh-card-go:hover { text-decoration: none; color: var(--signal); } }
.mh-foot { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: end; gap: 32px; padding: 0 clamp(22px, 4.4vw, 72px) 34px; color: #fff; }
.mh-count { font-family: var(--font-tech); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 13px; color: rgba(255,255,255,0.6); display: flex; align-items: baseline; gap: 6px; }
.mh-count b { font-family: var(--font-display); font-weight: 800; font-size: 34px; color: #fff; letter-spacing: -0.04em; line-height: 1; }
.mh-chapters { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.mh-ch { display: flex; flex-direction: column; gap: 10px; padding: 8px 0 0; border: 0; background: none; text-align: left; cursor: pointer;
  color: rgba(255,255,255,0.5); transition: color var(--dur) var(--ease-out); min-width: 0; min-height: 44px; }
.mh-ch.is-active { color: #fff; }
@media (hover: hover) { .mh-ch:hover { color: #fff; } }
.mh-ch-bar { display: block; height: 2px; background: rgba(255,255,255,0.22); border-radius: 2px; overflow: hidden; }
.mh-ch-bar i { display: block; height: 100%; background: var(--signal); transform: scaleX(0); transform-origin: left; }
[dir="rtl"] .mh-ch-bar i { transform-origin: right; }
.mh-ch.is-done .mh-ch-bar i { transform: scaleX(1); opacity: 0.5; }
.mh-ch.is-active .mh-ch-bar i { animation: mhFill 7s linear forwards; }
.mh.is-paused .mh-ch.is-active .mh-ch-bar i { animation-play-state: paused; }
.mh-ch-t { font-family: var(--font-tech); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mh-caption { margin: 0; max-width: 26ch; text-align: right; font-size: 13px; line-height: 1.4; color: rgba(255,255,255,0.62); }
.mh-caption::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--signal); margin-right: 8px; vertical-align: 1px; }
@keyframes mhFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- Trust bar ---------- */
.trustbar { padding: 34px 0 0; }
.hx-trust-card { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.stat { display: flex; flex-direction: column; gap: 6px; padding: 30px 24px; position: relative; min-width: 0; container-type: inline-size; }
.stat + .stat { border-left: 1px solid var(--border); }
.stat .v { font-family: var(--font-display); font-weight: 800; line-height: 1; letter-spacing: -0.04em;
  font-size: min(clamp(1.5rem, 0.9rem + 1.3vw, 2.4rem), 17cqi); color: var(--text-strong); white-space: nowrap; }
.stat .l { font-size: 14px; font-weight: 700; color: var(--text-strong); margin-top: 6px; }
.stat .s { font-size: 13px; color: var(--text-muted); line-height: 1.45; }

/* ---------- Cards ---------- */
.card { position: relative; background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); }
.card.pad { padding: 22px 24px; }
.card.pad > :first-child { margin-top: 0; }
.card.pad > :last-child { margin-bottom: 0; }
.tile { width: 48px; height: 48px; border-radius: 14px; background: var(--brand-tint); color: var(--brand-strong);
  display: flex; align-items: center; justify-content: center; flex: none;
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out), transform var(--dur) var(--ease-spring); }
.tile-sm { width: 40px; height: 40px; border-radius: 12px; }
.tile-dark { background: var(--brand-tint); color: var(--signal); }
.tile-glass { background: rgba(255,255,255,0.1); color: var(--signal); border: 1px solid rgba(255,255,255,0.14); }
.icard { padding: 30px 28px; display: flex; flex-direction: column; }
.icard .tile { margin-bottom: 22px; }
.icard h3 { margin: 0 0 10px; font-size: 20px; }
.icard p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--text-body); }
@media (hover: hover) { .icard:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); transform: translateY(-4px); } }
@media (hover: hover) { .icard:hover .tile { background: var(--signal); color: var(--ink-900); transform: rotate(-6deg); } }

.scard { display: flex; flex-direction: column; gap: 12px; padding: 28px 26px 28px; overflow: hidden; color: inherit; min-height: 100%; }
@media (hover: hover) { .scard:hover { text-decoration: none; transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--border-strong); } }
@media (hover: hover) { .scard:hover .tile { background: var(--signal); color: var(--ink-900); } }
.scard .stag { font-family: var(--font-tech); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand-strong); margin-top: 8px; }
.scard h2, .scard h3 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.scard p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--text-body); }
.more { margin-top: auto; padding-top: 14px; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--text-strong); }
.more span { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--surface-muted);
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); }
@media (hover: hover) { a:hover .more span { background: var(--brand); color: var(--ink-900); transform: translateX(3px); } }
.scard .gold-top { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--gold-500), var(--brand)); }
.scard-n { position: absolute; top: 24px; right: 24px; font-family: var(--font-tech); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 12px; color: var(--text-faint); }

.rowcard { display: flex; gap: 16px; padding: 20px 22px; align-items: flex-start; }
.rowcard > * { min-width: 0; }
.rowcard h3 { margin: 0 0 4px; font-size: 17px; }
.rowcard p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--text-body); }
.rowcard b { display: block; font-size: 15.5px; font-weight: 700; color: var(--text-strong); margin-bottom: 3px; }
.rowcard small { font-size: 14px; color: var(--text-body); line-height: 1.55; }
@media (hover: hover) { a.rowcard:hover { text-decoration: none; border-color: var(--border-strong); box-shadow: var(--shadow-sm); } }

/* Destination tile: a tall photo card */
.dtile { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 5; display: block; background: var(--ink-800); isolation: isolate; }
.dtile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1200ms var(--ease-out); }
@media (hover: hover) { .dtile:hover img { transform: scale(1.07); } }
.dtile .ovr { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,13,11,0) 40%, rgba(5,13,11,0.85) 100%); }
.dtile-n { position: absolute; top: 18px; left: 20px; font-family: var(--font-tech); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 12px; color: rgba(255,255,255,0.8);
  padding: 6px 10px; border-radius: 999px; background: rgba(5,13,11,0.3); border: 1px solid rgba(255,255,255,0.2);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.dtile-meta { position: absolute; left: 22px; bottom: 20px; right: 20px; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.dtile-meta .rg { display: block; font-family: var(--font-tech); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--signal); margin-bottom: 6px; }
.dtile-meta .nm { display: block; font-size: clamp(1.5rem, 1.2rem + 0.8vw, 2rem); font-weight: 800; color: #fff; letter-spacing: -0.035em; line-height: 1; }
.dtile-meta .ic { flex: none; width: 46px; height: 46px; padding: 12px; border-radius: 50%; background: #fff; color: var(--ink-900);
  transform: scale(0.8) rotate(-45deg); opacity: 0; transition: transform var(--dur) var(--ease-spring), opacity var(--dur) var(--ease-out); }
@media (hover: hover) { .dtile:hover .dtile-meta .ic { transform: none; opacity: 1; } }

/* Content tile: photo + body */
.ctile { display: flex; flex-direction: column; overflow: hidden; color: inherit; }
@media (hover: hover) { .ctile:hover { text-decoration: none; transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--border-strong); } }
.ctile-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--ink-800); margin: 8px 8px 0; border-radius: calc(var(--radius-lg) - 6px); }
.ctile-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1000ms var(--ease-out); }
@media (hover: hover) { .ctile:hover .ctile-media img { transform: scale(1.06); } }
.ctile-media .ovr { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,13,11,0) 55%, rgba(5,13,11,0.45) 100%); }
.ctile-media .ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(120% 140% at 85% -20%, rgba(139,178,46,0.35), 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: 48px; color: rgba(238,244,239,0.4); }
.ctile-media .flagchip { position: absolute; top: 12px; left: 12px; font-family: var(--font-tech); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; background: rgba(255,255,255,0.92); color: var(--ink-900); padding: 6px 10px; border-radius: 999px; }
.ctile-body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.ctile-body h3 { margin: 0; font-size: 19px; letter-spacing: -0.02em; }
.ctile-body p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--text-body); }

/* Steps */
.step { position: relative; padding: 28px 26px; display: flex; flex-direction: column; }
.step .n { font-family: var(--font-display); font-weight: 800; font-size: 44px; letter-spacing: -0.05em; line-height: 1; color: transparent;
  -webkit-text-stroke: 1.2px var(--border-strong); }
.step .tile { margin: 18px 0; background: var(--brand-tint); color: var(--signal); }
.step h3 { margin: 0 0 8px; font-size: 19px; }
.step p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--text-body); }
@media (hover: hover) { .step:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); } }
@media (hover: hover) { .step:hover .n { color: var(--brand); -webkit-text-stroke-color: var(--brand); } }

/* Reviews (rendered only if REVIEWS is ever populated) */
.review { margin: 0; padding: 28px; 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: 16px; line-height: 1.6; color: var(--text-strong); }
.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; color: var(--text-strong); }
.review .who small { font-size: 13px; color: var(--text-muted); }
.hx-reviews { align-items: stretch; }

.smallprint { margin: 16px 0 0; font-size: 13px; color: var(--text-faint); }

/* Dark panel + affiliations */
.inkpanel { position: relative; overflow: hidden; isolation: isolate; background: var(--ink-900); color: var(--text-on-dark);
  border-radius: var(--radius-2xl); padding: clamp(32px, 5vw, 72px); }
.inkpanel::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(60% 90% at 100% 0%, rgba(139,178,46,0.22), transparent 60%), radial-gradient(50% 70% at 0% 100%, rgba(31,127,151,0.22), transparent 60%); }
.inkpanel .grid { gap: 14px; }
.affil { display: flex; gap: 16px; align-items: center; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-md); padding: 18px; transition: background var(--dur), border-color var(--dur); }
@media (hover: hover) { .affil:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.2); } }
.affil .seal { flex: none; width: 72px; height: 56px; border-radius: 12px; background: #fff; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1px; color: var(--ink-900); overflow: hidden; padding: 6px; }
.affil .seal small { font-family: var(--font-tech); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 11px; letter-spacing: 0.06em; }
.affil .seal .accred-logo { max-height: 42px; max-width: 60px; object-fit: contain; }
.affil b { display: block; font-size: 15px; font-weight: 700; color: #fff; line-height: 1.3; margin-bottom: 3px; }
.affil small { font-size: 13px; color: var(--text-on-dark-muted); line-height: 1.45; }
.accred-logo { display: block; }

/* ---------- FAQ + answer block ---------- */
.faq-list { display: flex; flex-direction: column; border-top: 1px solid var(--border); }
.faq { border-bottom: 1px solid var(--border); }
.faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 24px; cursor: pointer;
  padding: 24px 0; font-size: clamp(1.05rem, 1rem + 0.3vw, 1.25rem); font-weight: 700; color: var(--text-strong); line-height: 1.35; letter-spacing: -0.015em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ic { flex: none; width: 40px; height: 40px; padding: 10px; border-radius: 50%; border: 1px solid var(--border-strong); color: var(--text-strong);
  transition: transform var(--dur) var(--ease-out), background var(--dur), color var(--dur), border-color var(--dur); }
@media (hover: hover) { .faq summary:hover .ic { border-color: var(--signal); } }
.faq[open] summary .ic { transform: rotate(45deg); background: var(--signal); color: var(--ink-900); border-color: var(--signal); }
.faq > p { margin: 0; padding: 0 64px 26px 0; font-size: 16px; line-height: 1.7; color: var(--text-body); }

.answer-block { position: relative; max-width: none; margin: 0; padding: clamp(28px, 4vw, 52px); border-radius: var(--radius-xl);
  background: var(--surface-sand); border: 1px solid var(--border); display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 16px 56px; }
.answer-tag { position: absolute; top: -12px; inset-inline-start: clamp(28px, 4vw, 52px); line-height: 1.2; font-family: var(--font-tech); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-900); background: var(--brand); padding: 5px 11px; border-radius: 999px; }
.answer-block h2 { margin: 0; font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.9rem); line-height: 1.15; color: var(--text-strong); letter-spacing: -0.03em; }
.answer-block p { margin: 0; font-size: clamp(1.05rem, 1rem + 0.25vw, 1.2rem); line-height: 1.65; color: var(--text-strong); }
.updated-stamp { margin: 14px 0 0; font-family: var(--font-tech); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 12px; letter-spacing: 0.04em; color: var(--text-muted); }
.sticky-aside { position: sticky; top: calc(var(--header-stick) + 32px); }

/* ---------- Homepage sections ---------- */
.m-answer { padding-top: clamp(56px, 6vw, 96px); padding-bottom: 0; }

.m-intro-head { display: flex; flex-direction: column; gap: 22px; max-width: 1100px; margin-bottom: clamp(40px, 5vw, 72px); }
.m-intro-head h2 { margin: 0; font-size: var(--fs-display); line-height: 0.98; }
.m-intro-grid { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(32px, 6vw, 110px); align-items: start; }
.m-intro-copy { display: flex; flex-direction: column; gap: 18px; position: sticky; top: calc(var(--header-stick) + 32px); }
.m-intro-copy p { margin: 0; font-size: 17px; line-height: 1.7; color: var(--text-body); }
.m-intro-copy p.lead { font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.4rem); line-height: 1.5; color: var(--text-strong); font-weight: 500; letter-spacing: -0.01em; }
.m-intro-link a { font-weight: 700; }
.m-points { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.m-point { display: grid; grid-template-columns: 44px 52px minmax(0, 1fr); gap: 18px; align-items: start; padding: 28px 0; border-bottom: 1px solid var(--border);
  transition: padding var(--dur) var(--ease-out); }
@media (hover: hover) { .m-point:hover { padding-left: 10px; } }
.m-point-n { font-family: var(--font-tech); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 13px; color: var(--text-faint); padding-top: 14px; }
.m-point-ic { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--brand-tint); color: var(--brand-strong);
  transition: background var(--dur), color var(--dur); }
@media (hover: hover) { .m-point:hover .m-point-ic { background: var(--signal); color: var(--ink-900); } }
.m-point h3 { margin: 4px 0 6px; font-size: 21px; }
.m-point p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--text-body); }
.serif-pull { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); line-height: 1.2;
  color: var(--text-strong); margin: 8px 0 0; letter-spacing: -0.01em; }

/* Dark bands */
.hx-dark { background: var(--ink-900); color: var(--text-on-dark); overflow: hidden; isolation: isolate; margin: 0 10px; border-radius: var(--radius-2xl); }
.hx-dark::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(50% 60% at 90% 0%, rgba(139,178,46,0.2), transparent 65%), radial-gradient(40% 50% at 0% 100%, rgba(31,127,151,0.22), transparent 65%); }
.hx-dark p { color: var(--text-on-dark-muted); }
.hx-dark .card { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.1); color: var(--text-on-dark); }
.hx-dark .card h3 { color: #fff; }
.hx-dark .card p { color: var(--text-on-dark-muted); }
@media (hover: hover) { .hx-dark .scard:hover, .hx-dark .step:hover { background: rgba(255,255,255,0.07); border-color: rgba(184,224,74,0.4); box-shadow: 0 30px 60px -30px rgba(0,0,0,0.6); } }
.hx-dark .tile { background: rgba(184,224,74,0.12); color: var(--signal); }
@media (hover: hover) { .hx-dark .scard:hover .tile { background: var(--signal); color: var(--ink-900); } }
.hx-dark .stag { color: var(--signal); }
.hx-dark .more { color: #fff; }
.gx-more { margin: 14px 0 0; }
.gx-more .more { color: #fff; }
.hub-more { margin: 18px 0 0; max-width: 760px; }
.hx-dark .more span { background: rgba(255,255,255,0.1); }
.hx-dark .scard-n { color: rgba(255,255,255,0.35); }
.hx-services { gap: 14px; }

/* Destinations rail */
.m-dest .tagrow { margin-top: -20px; }
.m-rail { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(260px, 26vw, 400px); gap: 16px; overflow-x: auto;
  scroll-snap-type: x mandatory; padding: 36px max(var(--gutter), calc((100vw - var(--maxw-wide)) / 2 + var(--gutter))) 8px;
  scroll-padding-inline: max(var(--gutter), calc((100vw - var(--maxw-wide)) / 2 + var(--gutter))); scrollbar-width: none; overscroll-behavior-x: contain; }
.m-rail::-webkit-scrollbar { display: none; }
.m-rail > .dtile { scroll-snap-align: start; }
.m-rail > .dtile:nth-child(even) { margin-top: 48px; }
.m-rail [hidden] { display: none; }
.hx-mosaic { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Why: bento */
.m-bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.m-bento-feature { position: relative; grid-column: span 2; grid-row: span 2; border-radius: var(--radius-lg); overflow: hidden; min-height: 460px;
  display: flex; align-items: flex-end; isolation: isolate; color: #fff; background: var(--ink-900); }
.m-bento-feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1400ms var(--ease-out); }
@media (hover: hover) { .m-bento-feature:hover img { transform: scale(1.05); } }
.m-bento-feature::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(5,13,11,0.05) 20%, rgba(5,13,11,0.88) 100%); }
.m-bento-feature-copy { padding: clamp(26px, 3vw, 40px); display: flex; flex-direction: column; gap: 14px; max-width: 520px; }
.m-bento-feature-copy h3 { margin: 0; color: #fff; font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.6rem); letter-spacing: -0.04em; line-height: 1.02; }
.m-bento-feature-copy p { margin: 0; color: rgba(255,255,255,0.78); font-size: 16px; line-height: 1.6; }
.hx-bento { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.m-bento > .icard:last-child { grid-column: span 2; background: var(--ink-900); border-color: var(--ink-900); justify-content: flex-end; }
.m-bento > .icard:last-child h3 { color: #fff; font-size: clamp(1.4rem, 1.1rem + 0.9vw, 1.9rem); letter-spacing: -0.03em; }
.m-bento > .icard:last-child p { color: var(--text-on-dark-muted); max-width: 46ch; }
.m-bento > .icard:last-child .tile { background: var(--signal); color: var(--ink-900); }

/* How it works: sticky intro + stacked steps */
.m-how { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(32px, 6vw, 100px); align-items: start; }
.m-how-head { position: sticky; top: calc(var(--header-stick) + 40px); display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.m-how-head h2 { margin: 0; font-size: var(--fs-h2); color: #fff; }
.m-how-head p { margin: 0; font-size: var(--fs-body-lg); }
.hx-steps { display: flex; flex-direction: column; gap: 14px; position: relative; }
.hx-how .step { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 22px; align-items: start; padding: 30px; }
.hx-how .step .tile { margin: 0; }
.hx-how .step .n { -webkit-text-stroke-color: rgba(255,255,255,0.3); font-size: 52px; min-width: 64px; }
@media (hover: hover) { .hx-how .step:hover .n { color: var(--signal); -webkit-text-stroke-color: var(--signal); } }
.hx-how .step h3 { font-size: 22px; }

.m-affil { padding-bottom: 0; }
.m-intro, .m-why, .m-blog { background: var(--bg-page); }
.m-services { margin-top: 0; }
.mh-captions { display: none; }
.ftr-sites, .ftr-accred { min-width: 0; }
.hx-blog { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.m-faq h2 { margin: 0; font-size: clamp(2rem, 1.3rem + 2.2vw, 3.3rem); }
.m-faq .stack p { font-size: 16.5px; line-height: 1.65; color: var(--text-body); }
.hx { display: block; }
.hx-points { gap: 14px; }

/* ---------- Source-market globe ---------- */
.gx-sec { background: var(--ink-950); color: var(--text-on-dark); margin: 0 10px; border-radius: var(--radius-2xl); overflow: hidden; isolation: isolate; }
.gx-sec::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(40% 60% at 75% 50%, rgba(31,127,151,0.28), transparent 70%), radial-gradient(30% 40% at 10% 10%, rgba(139,178,46,0.16), transparent 70%); }
.gx-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.gx-copy { display: flex; flex-direction: column; gap: 28px; align-items: flex-start; }
.gx-copy .sec-head { margin: 0; }
.gx-copy .sec-head h2 { color: #fff; }
.gx-copy .sec-head p { color: var(--text-on-dark-muted); }
.gx-markets { display: flex; flex-wrap: wrap; gap: 8px; }
.gx-markets a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; font-size: 14px; font-weight: 600;
  color: var(--text-on-dark); background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); transition: all var(--dur) var(--ease-out); }
@media (hover: hover) { .gx-markets a:hover { text-decoration: none; background: rgba(184,224,74,0.14); border-color: rgba(184,224,74,0.5); color: #fff; } }
.gx-stage { position: relative; aspect-ratio: 1; width: 100%; max-width: 640px; justify-self: center; cursor: grab; touch-action: pan-y; }
.gx-stage:active { cursor: grabbing; }
.gx-canvas { width: 100%; height: 100%; display: block; }
.gx-pin-label { position: absolute; left: var(--gx-px, 50%); top: var(--gx-py, 50%); transform: translate(14px, -50%); pointer-events: none; opacity: 0;
  font-family: var(--font-tech); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-900);
  background: var(--signal); padding: 5px 10px; border-radius: 999px; white-space: nowrap; transition: opacity var(--dur); }
.gx-pin-on .gx-pin-label { opacity: 1; }

/* ---------- CTA band ---------- */
.cta-sec { padding-bottom: clamp(48px, 5vw, 80px); }
.ctaband { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--radius-2xl); background: var(--ink-900);
  padding: clamp(36px, 6vw, 88px); display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(260px, 0.6fr); align-items: end; gap: 40px; }
.ctaband::before { content: ""; position: absolute; inset: -40%; z-index: -1;
  background: conic-gradient(from 200deg at 70% 40%, rgba(139,178,46,0.0), rgba(139,178,46,0.35), rgba(31,127,151,0.35), rgba(139,178,46,0.0) 60%);
  filter: blur(60px); animation: ctaSpin 24s linear infinite; }
.ctaband .copy { display: flex; flex-direction: column; gap: 20px; }
.ctaband h2 { margin: 0; color: #fff; font-size: clamp(2.2rem, 1.2rem + 3.4vw, 4.6rem); line-height: 0.98; }
.ctaband .copy p { margin: 0; color: var(--text-on-dark-muted); font-size: var(--fs-body-lg); line-height: 1.6; max-width: 56ch; }
.ctaband .actions { display: flex; flex-direction: column; gap: 10px; }
.ctaband .email { font-family: var(--font-tech); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 13px; color: var(--text-on-dark-muted); text-align: center; margin-top: 6px; }
@media (hover: hover) { .ctaband .email:hover { color: var(--signal); } }
@keyframes ctaSpin { to { transform: rotate(360deg); } }

/* ---------- Site search ---------- */
.search-modal { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: flex-start; justify-content: center; padding: clamp(70px, 14vh, 160px) 16px 16px; }
.search-modal[hidden] { display: none; }
.search-backdrop { position: absolute; inset: 0; background: rgba(5,13,11,0.6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.search-panel { position: relative; width: 100%; max-width: 680px; background: var(--surface-raised); border-radius: var(--radius-xl); box-shadow: var(--shadow-xl);
  overflow: hidden; display: flex; flex-direction: column; max-height: 76vh; animation: popIn 320ms var(--ease-out); }
.search-bar { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--border); }
.search-ic { color: var(--brand-strong); display: inline-flex; }
.search-input { flex: 1; border: 0; background: transparent; font: inherit; font-size: 19px; font-weight: 500; color: var(--text-strong); outline: none; min-width: 0; }
.search-close { border: 0; background: var(--surface-muted); color: var(--text-strong); cursor: pointer; display: inline-flex; padding: 8px; border-radius: 50%; }
.search-results { overflow-y: auto; }
.search-row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 14px 20px; border-bottom: 1px solid var(--divider); text-decoration: none; }
.search-row:last-child { border-bottom: 0; }
.search-row.is-sel { background: var(--surface-sand); text-decoration: none; }
@media (hover: hover) { .search-row:hover { background: var(--surface-sand); text-decoration: none; } }
.search-row .sr-t { color: var(--text-strong); font-size: 15.5px; font-weight: 600; }
.search-row .sr-k { flex: none; color: var(--brand-strong); font-family: var(--font-tech); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
.search-hint, .search-empty { margin: 0; padding: 18px 20px; font-size: 14px; color: var(--text-muted); }
@keyframes popIn { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }

.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: 12px 18px; border-radius: 999px; background: var(--ink-900); color: #fff; font-weight: 700; text-decoration: none; }
.skip-link:focus { width: auto; height: auto; overflow: visible; clip: auto; clip-path: none; outline: 3px solid var(--brand); 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; }

/* ---------- Footer ---------- */
.ftr { position: relative; overflow: hidden; isolation: isolate; background: var(--ink-950); color: var(--text-on-dark-muted);
  padding-top: clamp(4px, 1vw, 16px); margin: 0 10px 10px; border-radius: var(--radius-2xl); }
.ftr::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(50% 40% at 100% 0%, rgba(139,178,46,0.16), transparent 70%), radial-gradient(40% 30% at 0% 60%, rgba(31,127,151,0.14), transparent 70%); }
.ftr a { color: var(--text-on-dark-muted); transition: color var(--dur-fast); }
@media (hover: hover) { .ftr a:hover { color: #fff; text-decoration: none; } }
.ftr .ftr-mail { display: inline-flex; align-items: center; align-self: flex-start; min-height: 44px; font-size: 16px; font-weight: 700; letter-spacing: -0.01em;
  color: #fff; border-bottom: 2px solid var(--signal); overflow-wrap: anywhere; }
@media (hover: hover) { .ftr .ftr-mail:hover { color: var(--signal); } }
.ftr-top { display: grid; grid-template-columns: 1.3fr repeat(4, minmax(0, 1fr)); gap: 32px; padding: clamp(40px, 5vw, 64px) 0; border-bottom: 1px solid rgba(255,255,255,0.1); }
.ftr-brand { display: flex; flex-direction: column; gap: 18px; max-width: 300px; }
.ftr-brand img { height: 48px; width: auto; max-width: 200px; display: block; }
.ftr-brand p { margin: 0; font-size: 14.5px; line-height: 1.6; }
.ftr-col { display: flex; flex-direction: column; gap: 11px; min-width: 0; }
.ftr-h { display: block; font-family: var(--font-tech); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; margin-bottom: 6px; }
.ftr-col a { display: block; font-size: 14.5px; }
/* Footer columns are <details> so phones can fold them (visual audit, 2026-10-06). On wider
   screens they are always open and the summary is a plain heading. */
.ftr-col > summary { list-style: none; cursor: default; }
.ftr-col > summary::-webkit-details-marker { display: none; }
.ftr-col > summary::after { content: none; }
.ftr-band { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px 48px; padding: 32px 0; border-bottom: 1px solid rgba(255,255,255,0.1); align-items: start; }
.ftr-sites-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.ftr-site { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.14);
  font-family: var(--font-tech); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 12px; transition: border-color var(--dur), background var(--dur); }
@media (hover: hover) { .ftr-site:hover { border-color: var(--signal); background: rgba(184,224,74,0.08); } }
.ftr-site small { font-size: 12px; opacity: 0.65; font-family: var(--font-sans); }
.ftr-accred-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.ftr-accred-item { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 14px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); }
.ftr-accred-item .accred-logo { width: auto; height: 34px; max-width: 74px; object-fit: contain; background: #fff; border-radius: 8px; padding: 4px 6px; box-sizing: content-box; }
.ftr-accred-item b { font-family: var(--font-tech); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 12px; background: #fff; color: #111; border-radius: 6px; padding: 8px 6px; }
.ftr-accred-item small { font-family: var(--font-tech); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 12px; letter-spacing: 0.08em; color: var(--text-on-dark-muted); }
.ftr-base { display: flex; justify-content: space-between; align-items: center; gap: 12px 24px; flex-wrap: wrap; padding: 26px 0 30px;
  border-top: 1px solid rgba(255,255,255,0.1); font-size: 13px; }
.ftr-legal { display: inline-flex; flex-wrap: wrap; gap: 6px 18px; }
.ftr-social { display: inline-flex; gap: 8px; align-items: center; }
.ftr-social a { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.14);
  color: var(--text-on-dark); transition: background var(--dur), color var(--dur), border-color var(--dur); }
@media (hover: hover) { .ftr-social a:hover { background: var(--signal); border-color: var(--signal); color: var(--ink-900); } }

/* ---------- WhatsApp dock + channel ---------- */
.wa-dock { position: fixed; inset-inline-end: calc(22px + env(safe-area-inset-right)); bottom: calc(22px + env(safe-area-inset-bottom)); z-index: 50; width: 58px; height: 58px; border-radius: 50%; background: #25D366;
  display: flex; align-items: center; justify-content: center; color: #fff; box-shadow: 0 16px 34px -10px rgba(37,211,102,0.7);
  transition: transform var(--dur) var(--ease-spring); }
@media (hover: hover) { .wa-dock:hover { transform: scale(1.08); text-decoration: none; } }
.wa-channel { position: fixed; inset-inline-end: calc(22px + env(safe-area-inset-right)); bottom: calc(92px + env(safe-area-inset-bottom)); z-index: 51; direction: ltr; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
[dir="rtl"] .wa-channel-card { direction: rtl; }
.wa-channel-btn { width: 50px; height: 50px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.12); cursor: pointer; background: var(--ink-900); color: #25D366;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 12px 28px -10px rgba(5,13,11,0.6); transition: transform var(--dur) var(--ease-spring); }
@media (hover: hover) { .wa-channel-btn:hover { transform: translateY(-2px); } }
.wa-channel-btn:focus-visible, .wa-channel-x:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }
.wa-channel-card { order: -1; position: relative; width: min(310px, calc(100vw - 32px)); background: var(--surface-raised); color: var(--text-strong);
  border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow-lg); animation: popIn 260ms var(--ease-out); }
.wa-channel-card[hidden] { display: none; }
.wa-channel-title { margin: 0 30px 6px 0; font-weight: 800; font-size: 17px; letter-spacing: -0.02em; }
.wa-channel-text { margin: 0 0 14px; font-size: 14.5px; line-height: 1.5; color: var(--text-body); }
.wa-channel-go { width: 100%; justify-content: center; background: #25D366; color: #06110e; white-space: normal; text-align: center; font-size: 14px; line-height: 1.25; min-height: 48px; }
@media (hover: hover) { .wa-channel-go:hover { background: #1ebe5a; color: #06110e; } }
.wa-channel-x { position: absolute; top: 10px; inset-inline-end: 10px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--surface-muted);
  color: var(--text-strong); display: flex; align-items: center; justify-content: center; cursor: pointer; }
[dir="rtl"] .wa-channel-title { margin: 0 0 6px 30px; }

/* ---------- Forms / modal ---------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 14px; font-weight: 700; color: var(--text-strong); display: block; }
.field label > input, .field label > select, .field label > textarea { margin-top: 8px; }
.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: 16px; font-weight: 400; color: var(--text-strong);
  background: var(--surface-sand); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0 16px; height: 52px; outline: none;
  transition: border-color var(--dur), box-shadow var(--dur), background var(--dur); }
.field textarea { padding: 14px 16px; height: auto; min-height: 110px; line-height: 1.5; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { background: var(--surface-raised); border-color: var(--brand); box-shadow: 0 0 0 4px var(--ring); }
.field .hint { font-size: 13px; color: var(--text-muted); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-grid .full { grid-column: 1 / -1; }
.form-foot { grid-column: 1 / -1; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.form-foot small { font-size: 13px; color: var(--text-muted); }
dialog.modal { border: 0; border-radius: var(--radius-xl); width: min(600px, calc(100vw - 32px)); max-height: 90vh; padding: 0; background: var(--surface-raised); box-shadow: var(--shadow-xl); }
dialog.modal[open] { animation: popIn 320ms var(--ease-out); }
dialog.modal::backdrop { background: rgba(5,13,11,0.6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.modal-head { padding: 30px 32px 0; display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.modal-head h2 { margin: 12px 0 0; font-size: 30px; }
.modal-close { flex: none; background: var(--surface-muted); border: 0; border-radius: 50%; width: 44px; height: 44px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; color: var(--text-strong); }
.modal-body { padding: 24px 32px 32px; }
.form-ok { display: none; flex-direction: column; gap: 14px; align-items: flex-start; }
.form-ok .check { width: 56px; height: 56px; border-radius: 50%; background: var(--brand); color: var(--ink-900); display: flex; align-items: center; justify-content: center; }
.form-ok p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--text-body); }
form.is-sent { display: none; }
form.is-sent + .form-ok { display: flex; }
/* Honeypot — hidden by clipping, never by a negative offset (RTL overflow). */
.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; }
.form-err { grid-column: 1 / -1; margin: 4px 0 0; font-size: 14px; color: var(--danger); }
.form-err a { color: inherit; text-decoration: underline; }

/* ---------- Page heroes ---------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-family: var(--font-tech); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 12px; letter-spacing: 0.06em;
  color: var(--text-muted); margin-bottom: 28px; }
.crumbs a { color: var(--text-muted); }
@media (hover: hover) { .crumbs a:hover { color: var(--text-strong); } }
.crumbs .here { color: var(--text-strong); }
.crumbs.on-dark { color: rgba(238,244,239,0.6); }
.crumbs.on-dark a { color: inherit; }
@media (hover: hover) { .crumbs.on-dark a:hover { color: #fff; } }
.crumbs.on-dark .rg { color: var(--signal); }
.crumbs.on-dark .here { color: #fff; }

.page-head { position: relative; overflow: hidden; isolation: isolate; padding: calc(var(--header-h) + clamp(48px, 6vw, 96px)) 0 clamp(48px, 6vw, 88px) !important;
  background: var(--bg-page); border-bottom: 1px solid var(--border); }
.page-head::before { content: ""; position: absolute; z-index: -1; width: 900px; height: 900px; right: -260px; top: -420px; border-radius: 50%;
  background: radial-gradient(circle, rgba(139,178,46,0.22), rgba(191,227,234,0.18) 45%, transparent 70%); filter: blur(10px); }
.page-head::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.5;
  background-image: linear-gradient(var(--divider) 1px, transparent 1px), linear-gradient(90deg, var(--divider) 1px, transparent 1px);
  background-size: 72px 72px; -webkit-mask: radial-gradient(70% 90% at 80% 0%, #000, transparent 70%); mask: radial-gradient(70% 90% at 80% 0%, #000, transparent 70%); }
.page-head .lede { max-width: 980px; display: flex; flex-direction: column; gap: 22px; }
.page-head h1 { margin: 0; font-size: var(--fs-h1); line-height: 0.98; }
.page-head .lede > p { margin: 0; font-size: var(--fs-body-lg); line-height: 1.6; color: var(--text-body); max-width: 64ch; }

/* Photo-plate variant (contact): a generated desk image under a pounamu wash. */
.page-head.fj-photo-head { background: var(--ink-900); border: 0; margin: 10px 10px 0; border-radius: var(--radius-2xl); }
.page-head.fj-photo-head::after { opacity: 1; mask: none; -webkit-mask: none;
  background: linear-gradient(90deg, rgba(5,13,11,0.92) 0%, rgba(5,13,11,0.72) 50%, rgba(5,13,11,0.35) 100%); }
.page-head.fj-photo-head.fj-bg-desk::before { inset: 0; width: auto; height: auto; right: 0; top: 0; border-radius: 0; filter: none;
  background: url('/assets/bg/trade-desk-contour-map.jpg') center / cover no-repeat;
  background-image: image-set(url('/assets/bg/trade-desk-contour-map.webp') type('image/webp'), url('/assets/bg/trade-desk-contour-map.jpg') type('image/jpeg')); }
.page-head.fj-photo-head h1, .page-head.fj-photo-head .crumbs .here { color: #fff; }
.page-head.fj-photo-head .lede > p, .page-head.fj-photo-head .crumbs, .page-head.fj-photo-head .crumbs a { color: rgba(238,244,239,0.75); }
.page-head.fj-photo-head .ex-eyebrow { color: #fff; border-color: rgba(255,255,255,0.2); background: rgba(255,255,255,0.06); }
.page-head.fj-photo-head h1 em { color: var(--signal); }

.ink-hero { position: relative; overflow: hidden; isolation: isolate; background: var(--ink-900); color: var(--text-on-dark);
  margin: 10px 10px 0; border-radius: var(--radius-2xl); }
.ink-hero::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(50% 80% at 95% 0%, rgba(139,178,46,0.3), transparent 65%), radial-gradient(40% 70% at 0% 100%, rgba(31,127,151,0.3), transparent 65%); }
.ink-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.6;
  background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 72px 72px; -webkit-mask: radial-gradient(80% 100% at 85% 0%, #000, transparent 75%); mask: radial-gradient(80% 100% at 85% 0%, #000, transparent 75%); }
.ink-hero .container { padding-top: calc(var(--header-h) + clamp(48px, 6vw, 96px)); padding-bottom: clamp(48px, 6vw, 96px); }
.ink-hero h1 { margin: 0 0 22px; color: #fff; font-size: var(--fs-h1); line-height: 0.98; max-width: 18ch; }
.ink-hero .sub { margin: 0; font-size: var(--fs-body-lg); line-height: 1.6; color: rgba(238,244,239,0.78); max-width: 62ch; }
.ink-hero .ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 34px; }
.ink-hero .id-row { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; flex-wrap: wrap; }
.ink-hero .bigflag { font-size: 48px; line-height: 1; }
.ink-hero .svc-tile { width: 60px; height: 60px; border-radius: 18px; background: rgba(184,224,74,0.12); border: 1px solid rgba(184,224,74,0.3);
  color: var(--signal); display: flex; align-items: center; justify-content: center; }
.band { position: relative; height: clamp(220px, 30vw, 420px); overflow: hidden; margin: 10px 10px 0; border-radius: var(--radius-2xl); background: var(--ink-800); }
.band-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

.city-hero { position: relative; min-height: min(78vh, 760px); display: flex; align-items: flex-end; overflow: hidden; isolation: isolate;
  margin: 10px 10px 0; border-radius: var(--radius-2xl); background: var(--ink-900); }
.city-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; animation: heroPush 14s var(--ease-out) both; }
.city-hero .ovr { position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(5,13,11,0.55) 0%, rgba(5,13,11,0.1) 35%, rgba(5,13,11,0.85) 100%), radial-gradient(80% 70% at 0% 100%, rgba(5,13,11,0.55), transparent 60%); }
.city-hero .container { position: relative; padding-top: calc(var(--header-h) + 60px); padding-bottom: clamp(40px, 5vw, 72px); }
.city-hero h1 { margin: 0 0 16px; color: #fff; font-size: var(--fs-h1); letter-spacing: -0.05em; line-height: 0.96; max-width: 16ch; }
.city-hero .tagline { margin: 0; font-family: var(--font-serif); font-style: italic; font-size: clamp(1.25rem, 1rem + 0.9vw, 1.8rem); color: rgba(255,255,255,0.88); max-width: 40ch; line-height: 1.3; }
@keyframes heroPush { from { transform: scale(1.12); } to { transform: scale(1); } }

/* Photo grids (destination "photo highlights", service "on the ground") */
.pgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.pgrid-item { position: relative; margin: 0; overflow: hidden; border-radius: var(--radius-md); aspect-ratio: 4 / 3; background: var(--surface-muted); }
.pgrid-item:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.pgrid-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1000ms var(--ease-out); }
@media (hover: hover) { .pgrid-item:hover .pgrid-img, .svc-shot:hover .pgrid-img { transform: scale(1.05); } }
.svc-shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.svc-shot { position: relative; overflow: hidden; border-radius: var(--radius-md); aspect-ratio: 3 / 4; background: var(--surface-muted); }
.svc-shot:first-child { aspect-ratio: 4 / 3; }
@media (max-width: 760px) {
  .ftr .ftr-top { grid-template-columns: 1fr; gap: 0; }
  .ftr-brand { margin-bottom: 20px; }
  .ftr-col { gap: 0; border-bottom: 1px solid rgba(255,255,255,0.1); }
  .ftr-col > summary { display: flex; align-items: center; justify-content: space-between; min-height: 48px; margin: 0; cursor: pointer; }
  .ftr-col > summary::after { content: "+"; font-size: 18px; font-weight: 400; color: var(--signal); }
  .ftr-col[open] > summary::after { content: "−"; }
  .ftr-col[open] { padding-bottom: 12px; }
  .ftr .ftr-col > a { display: flex; align-items: center; min-height: 44px; padding: 0; }
}
@media (max-width: 760px) {
  .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pgrid-item:first-child { aspect-ratio: 4 / 3; grid-row: auto; }
  .svc-shots { grid-template-columns: 1fr; }
  .svc-shot, .svc-shot:first-child { aspect-ratio: 4 / 3; }
}

/* ---------- Facts / lists / panels ---------- */
.fact { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; }
.fact .ic { color: var(--brand-strong); margin-top: 2px; }
.fact .k { display: block; font-family: var(--font-tech); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; }
.fact .v { font-size: 15px; font-weight: 700; color: var(--text-strong); line-height: 1.4; }
.prose-block { max-width: 820px; display: flex; flex-direction: column; gap: 18px; }
.prose-block > h2 { margin: 0; font-size: clamp(1.9rem, 1.2rem + 2vw, 3rem); }
.prose-block p { margin: 0; font-size: 17px; line-height: 1.72; color: var(--text-body); }
.prose-block p.lead { font-size: 19px; color: var(--text-strong); }
.lead { color: var(--text-strong); }
.numcard { display: flex; gap: 16px; align-items: flex-start; padding: 20px 22px; }
.numcard .n { flex: none; font-family: var(--font-tech); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 12px; color: var(--ink-900); background: var(--brand); border-radius: 999px; padding: 4px 8px; margin-top: 1px; }
.numcard .t { font-size: 15.5px; font-weight: 600; color: var(--text-strong); line-height: 1.45; }
.listpanel { padding: 30px 28px; background: var(--surface-sand); }
.listpanel .ph { display: block; font-family: var(--font-tech); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand-strong); margin-bottom: 18px; }
.listpanel ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.listpanel li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.5; color: var(--text-body); padding: 12px 0; border-top: 1px solid var(--border); }
.listpanel li:first-child { border-top: 0; padding-top: 0; }
.listpanel li .ic { flex: none; width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--brand); color: var(--ink-900); margin-top: 0; }
.listpanel li .n { flex: none; font-family: var(--font-tech); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 12px; color: var(--brand-strong); margin-top: 3px; }
.tipcard { background: var(--accent-gold-soft); border: 1px solid rgba(224,169,28,0.35); border-radius: var(--radius-md); padding: 18px 22px; display: flex; gap: 14px; align-items: flex-start; }
.tipcard .ic { color: var(--gold-600); margin-top: 3px; flex: none; }
.tipcard p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--text-body); }
.notes-band { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--radius-xl); background: var(--ink-900); padding: clamp(28px, 4vw, 56px); }
.notes-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 100% at 100% 0%, rgba(139,178,46,0.24), transparent 60%); }
.notes-band .copy { max-width: 820px; display: flex; flex-direction: column; gap: 14px; }
.notes-band .copy > p { margin: 0; font-size: 17.5px; line-height: 1.7; color: var(--text-on-dark); }
.notes-band h2, .notes-band h3 { color: #fff; }
.notes-band .ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 10px; }

/* ---------- Tables, chips, lists ---------- */
.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-raised); }
.season-table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 680px; }
.season-table thead tr { background: var(--ink-900); }
.season-table th { text-align: left; padding: 16px 20px; font-family: var(--font-tech); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--signal); white-space: nowrap; }
.season-table tbody tr + tr { border-top: 1px solid var(--divider); }
@media (hover: hover) { .season-table tbody tr:hover { background: var(--surface-sand); } }
.season-table td { padding: 16px 20px; 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-tech); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 13px; color: var(--brand-strong); white-space: nowrap; }
.season-table .td-k { display: none; }
/* Phones: each season becomes a card; the column name rides inside its cell
   (real text, so it is translated with the page). */
@media (max-width: 600px) {
  .tablewrap { overflow: visible; border: 0; background: none; }
  .season-table { min-width: 0; display: block; }
  .season-table thead { display: none; }
  .season-table tbody { display: grid; gap: 12px; }
  .season-table tbody tr { display: block; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-raised); padding: 6px 0; }
  .season-table tbody tr + tr { border-top: 1px solid var(--border); }
  .season-table td { display: block; padding: 8px 18px; }
  .season-table td:first-child { font-size: 17px; white-space: normal; padding-top: 12px; }
  .season-table td.mn { white-space: normal; }
  .season-table .td-k { display: block; margin-bottom: 2px; font-family: var(--font-tech); font-weight: 700; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
}

.month-strip { display: flex; flex-wrap: wrap; gap: 8px; }
.month-chip { display: inline-flex; align-items: baseline; gap: 8px; padding: 10px 16px; border: 1px solid var(--border-strong); border-radius: 999px;
  background: var(--surface-raised); color: inherit; transition: all var(--dur) var(--ease-out); }
@media (hover: hover) { .month-chip:hover { text-decoration: none; background: var(--ink-900); border-color: var(--ink-900); } }
@media (hover: hover) { .month-chip:hover .mc-kanji, .month-chip:hover .mc-name { color: #fff; } }
.month-chip .mc-kanji { font-weight: 800; font-size: 16px; color: var(--text-strong); letter-spacing: -0.02em; }
.month-chip .mc-name { font-family: var(--font-tech); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }

.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ticks li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; line-height: 1.6; color: var(--text-body); }
.ticks li svg { flex: 0 0 auto; margin-top: 4px; color: var(--brand-strong); }
.spec { margin: 16px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 12px 22px; }
.spec dt { font-family: var(--font-tech); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); padding-top: 4px; }
.spec dd { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--text-strong); }

.daylist { list-style: none; margin: 8px 0 0; padding: 0 0 0 36px; position: relative; display: grid; gap: 30px; }
.daylist::before { content: ""; position: absolute; left: 9px; top: 10px; bottom: 10px; width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, var(--brand), var(--ocean-500)); opacity: 0.4; }
.daylist > li { position: relative; }
.daylist > li::before { content: ""; position: absolute; left: -36px; top: 5px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--surface-raised); border: 2px solid var(--brand); box-shadow: 0 0 0 5px var(--brand-tint); }
.daylist > li p { margin: 8px 0 0; font-size: 16px; line-height: 1.7; color: var(--text-body); }
.day-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.day-n { font-family: var(--font-tech); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-900); background: var(--brand); border-radius: 999px; padding: 4px 9px; }
.day-where { font-size: 19px; font-weight: 800; color: var(--text-strong); letter-spacing: -0.02em; }

.cats-panel [data-cat-panel] { display: none; }
.cats-panel [data-cat-panel].is-active { display: grid; }

.cgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.cgrid a { display: flex; align-items: center; gap: 12px; background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 14px 16px; transition: all var(--dur) var(--ease-out); color: inherit; }
@media (hover: hover) { .cgrid a:hover { border-color: var(--ink-900); box-shadow: var(--shadow-sm); transform: translateY(-2px); text-decoration: none; } }
.cgrid .flag { font-size: 22px; flex: none; }
.cgrid .nm { font-size: 15px; font-weight: 700; color: var(--text-strong); line-height: 1.3; }
.cgrid .dot { margin-left: auto; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); }
.local-block { max-width: 820px; display: flex; flex-direction: column; gap: 14px; }
.local-block .lk { font-family: var(--font-tech); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand-strong); }
.local-block h2 { margin: 0; font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.6rem); }
.local-block p { margin: 0; font-size: 17px; line-height: 1.75; color: var(--text-body); }

/* ---------- Contact / payments ---------- */
.office-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.office { padding: 26px 24px 22px; display: flex; flex-direction: column; gap: 12px; height: 100%; }
.office .top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.office .flag { font-size: 24px; }
.office h3 { margin: 0; font-size: 18px; }
.office .co { font-size: 13px; color: var(--text-muted); }
.office address { margin: 0; font-style: normal; font-size: 14.5px; line-height: 1.6; color: var(--text-body); }
.office .regs { margin-top: auto; display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--divider); padding-top: 12px; }
.office .regs div { display: flex; justify-content: space-between; gap: 10px; }
.office .regs span:first-child { font-size: 12.5px; color: var(--text-muted); }
.office .regs span:last-child { font-family: var(--font-tech); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 12.5px; color: var(--text-strong); text-align: end; overflow-wrap: anywhere; }
.office.is-hq { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
.office .hq-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; background: var(--brand); color: var(--ink-900);
  font-family: var(--font-tech); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.offices-note { margin: 12px 0 0; max-width: 680px; font-size: 16px; line-height: 1.7; color: var(--text-body); }
.market-card { padding: 20px 22px; display: flex; flex-direction: column; gap: 12px; }
.contracting-band { position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: clamp(16px, 3vw, 36px);
  align-items: center; background: var(--ink-900); border-radius: var(--radius-xl); padding: clamp(24px, 3.4vw, 44px); }
.contracting-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(50% 120% at 100% 0%, rgba(139,178,46,0.22), transparent 60%); }
.contracting-band > .tile { width: 56px; height: 56px; border-radius: 18px; background: rgba(184,224,74,0.12); color: var(--signal); }
.contracting-band h2 { margin: 10px 0 8px; color: #fff; font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); }
.contracting-band p { margin: 0; max-width: 66ch; font-size: 15px; line-height: 1.65; color: rgba(255,255,255,0.72); }
.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-tech); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.55); }
.channel { display: flex; gap: 16px; padding: 20px 22px; }
.channel .k { display: block; font-family: var(--font-tech); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; }
.channel .v { display: block; font-size: 17px; font-weight: 800; color: var(--text-strong); margin-bottom: 4px; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.channel .s { font-size: 14px; line-height: 1.5; color: var(--text-body); }
@media (hover: hover) { a.channel:hover { text-decoration: none; border-color: var(--ink-900); } }
.emergency { position: relative; overflow: hidden; background: var(--ink-900); border-radius: var(--radius-lg); padding: 22px 24px; }
.emergency .k { display: block; font-family: var(--font-tech); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--signal); margin-bottom: 8px; }
.emergency p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--text-on-dark-muted); }
.bank { overflow: hidden; }
.bank-head { display: flex; align-items: center; gap: 10px; padding: 16px 20px; background: var(--ink-900); }
.bank-head .flag { font-size: 22px; }
.bank-head .cur { font-family: var(--font-tech); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 15px; color: #fff; letter-spacing: 0.04em; }
.bank-head .loc { margin-left: auto; font-family: var(--font-tech); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--signal); }
.bank-body { padding: 16px 20px 18px; 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: 13px; color: var(--text-muted); white-space: nowrap; }
.bank-body .v { font-family: var(--font-tech); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 12.5px; color: var(--text-strong); text-align: right; word-break: break-all; }
.bank-body .v.nm { font-weight: 700; }
.copy-btn { margin-top: 8px; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; background: var(--surface-muted); border: 0; border-radius: 999px;
  padding: 9px 15px; font-size: 13px; font-weight: 700; color: var(--text-strong); cursor: pointer; min-height: 40px; }
@media (hover: hover) { .copy-btn:hover { background: var(--ink-900); color: #fff; } }
.copy-btn.is-copied { background: var(--brand); color: var(--ink-900); }
.bank-note { display: flex; align-items: flex-start; gap: 8px; margin-top: 4px; padding: 10px 12px; border-radius: 10px; background: var(--accent-gold-soft);
  border: 1px solid rgba(224,169,28,0.35); font-size: 12.5px; line-height: 1.5; font-weight: 600; color: var(--gold-700); }
.bank-note svg { flex: none; margin-top: 1px; color: var(--gold-700); }
.notice { background: var(--surface-sand); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: clamp(24px, 3.4vw, 40px);
  display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.notice .seal { flex: none; width: 52px; height: 52px; border-radius: 16px; background: var(--ink-900); color: var(--signal); display: flex; align-items: center; justify-content: center; }
.notice h2, .notice h3 { margin: 0 0 8px; font-size: 20px; }
.notice p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--text-body); flex: 1; min-width: 260px; }
.notice > div:last-child { flex: 1; min-width: 260px; }

/* ---------- Blog ---------- */
.post-meta { font-family: var(--font-tech); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.post-body { max-width: 760px; margin: 0; font-size: 18px; line-height: 1.75; color: var(--text-body); }
.post-body .answer-lead { padding: 22px 26px; border-radius: var(--radius-lg); background: var(--surface-sand); border: 1px solid var(--border); color: var(--text-strong); font-size: 1.06em; }
.bpost .post-body > p.answer-lead:first-child::first-letter { float: none; font: inherit; padding: 0; color: inherit; }
.post-body h2 { margin: 1.8em 0 0.5em; font-size: clamp(1.6rem, 1.2rem + 1.3vw, 2.3rem); }
.post-body h3 { margin: 1.5em 0 0.45em; font-size: 1.3rem; }
.post-dests { max-width: 760px; margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--border); display: grid; gap: 12px; }
.post-body p { margin: 0 0 1.15em; }
.post-body ul { margin: 0 0 1.2em; padding-left: 1.3em; }
.post-body li { margin-bottom: 0.5em; }
.post-body li::marker { color: var(--brand-strong); }
.post-body strong { color: var(--text-strong); }
.post-body blockquote { margin: 0 0 1.2em; padding: 18px 24px; border-left: 3px solid var(--brand); 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: 21px; color: var(--text-strong); }
.post-body .ex-fig { margin: 2.2em 0; }
.post-body .ex-fig img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); }
.post-body .ex-fig figcaption { margin-top: 12px; font-size: 14px; color: var(--text-muted); text-align: left; padding-left: 14px; border-left: 2px solid var(--brand); line-height: 1.5; }
.post-body .ex-fig--feature img { box-shadow: var(--shadow-lg); }
@media (min-width: 980px) { .post-body .ex-fig--feature { width: calc(100% + 160px); margin-left: -80px; margin-right: -80px; } }
.post-body .ex-fig--framed { padding: 12px; background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.post-body .ex-fig--framed img { border-radius: calc(var(--radius-lg) - 6px); }
.post-body .ex-fig--polaroid { width: max-content; max-width: 100%; margin: 2.6em auto; background: #fff; padding: 12px 12px 6px; box-shadow: var(--shadow-lg);
  transform: rotate(-1.4deg); border-radius: 6px; }
.post-body .ex-fig--polaroid img { border-radius: 3px; }
.post-body .ex-fig--polaroid figcaption { border: 0; padding: 10px 4px 6px; font-family: var(--font-serif); font-style: italic; font-size: 16px; color: var(--stone-600); text-align: center; }
.post-body .ex-fig--float img { box-shadow: var(--shadow-md); }
@media (min-width: 760px) { .post-body .ex-fig--float { float: right; width: 45%; margin: 0.4em 0 1em 2em; } }
[dir="rtl"] .post-body .ex-fig--float { float: left; margin: 0.4em 2em 1em 0; }
.post-body .ex-fig--postcard img { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.post-body .ex-fig--postcard figcaption { margin-top: 0; padding: 14px 18px; border: 1px solid var(--border); border-top: 0; border-radius: 0 0 var(--radius-lg) var(--radius-lg); background: var(--surface-sand); }

.dispatch-grid { display: grid; grid-template-columns: 1fr 1.3fr 0.9fr; gap: 18px; align-items: stretch; }
.dispatch-col { display: flex; flex-direction: column; gap: 18px; }
.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-raised); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column;
  text-decoration: none; color: inherit; transition: box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), border-color var(--dur); }
@media (hover: hover) { .dispatch-card:hover { text-decoration: none; box-shadow: var(--shadow-md); transform: translateY(-4px); border-color: var(--border-strong); } }
.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; transition: transform 1000ms var(--ease-out); }
@media (hover: hover) { .dispatch-card:hover .shot img { transform: scale(1.05); } }
.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-tech); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; padding: 6px 11px; border-radius: 999px;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); line-height: 1.3; }
.dispatch-pill-cat { background: rgba(5,13,11,0.55); color: #fff; border: 1px solid rgba(255,255,255,0.25); }
.dispatch-pill-date { background: rgba(255,255,255,0.9); color: var(--ink-900); }
.dispatch-card .body { padding: 22px 22px 22px; flex: 1; display: flex; flex-direction: column; }
.dispatch-no { font-family: var(--font-tech); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 12px; color: var(--text-faint); margin-bottom: 10px; display: block; }
.dispatch-card h2, .dispatch-card h3 { font-size: 20px; line-height: 1.2; letter-spacing: -0.025em; margin: 0; font-weight: 800; }
.dispatch-card .meta { margin-top: auto; padding-top: 18px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dispatch-card .read-time { font-family: var(--font-tech); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 12px; color: var(--text-muted); }
.dispatch-arrow { width: 42px; height: 42px; border-radius: 50%; background: var(--surface-muted); display: flex; align-items: center; justify-content: center; flex: none;
  transition: background var(--dur), transform var(--dur) var(--ease-out); }
.dispatch-arrow svg { width: 16px; height: 16px; }
@media (hover: hover) { .dispatch-card:hover .dispatch-arrow { background: var(--brand); transform: rotate(45deg); } }
[dir="rtl"] .dispatch-arrow svg { transform: scaleX(-1); }
.dispatch-card.notch-tr::after, .dispatch-card.notch-bl::after { content: none; }
.dispatch-card.featured { background: var(--ink-900); border-color: var(--ink-900); color: var(--text-on-dark); grid-row: span 2; }
.dispatch-card.featured .shot { aspect-ratio: auto; flex: 1; min-height: 300px; }
.dispatch-card.featured .shot::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,13,11,0) 30%, rgba(5,13,11,0.94) 92%); }
.dispatch-card.featured .body { position: absolute; inset-inline: 0; bottom: 0; padding: 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-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.5rem); line-height: 1.02; color: #fff; letter-spacing: -0.04em; }
.dispatch-card.featured .read-time { color: var(--text-on-dark-muted); }
.dispatch-card.featured .dispatch-arrow { background: var(--brand); color: var(--ink-900); }
.dispatch-rail { background: var(--surface-sand); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px 26px; display: flex; flex-direction: column; gap: 18px; }
.dispatch-rail p { font-family: var(--font-serif); font-style: italic; font-size: 21px; line-height: 1.35; color: var(--text-strong); margin: 0; }
.dispatch-rail .socials { display: flex; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.dispatch-rail .soc { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--border-strong); display: flex; align-items: center; justify-content: center; color: var(--text-strong); flex: none; }
@media (hover: hover) { .dispatch-rail .soc:hover { background: var(--ink-900); color: #fff; } }
.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: 64px 0 28px; }
.dispatch-archive-head .line { flex: 1; height: 1px; background: var(--border); }
.dispatch-archive-head span { font-family: var(--font-tech); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-muted); white-space: nowrap; }
.dispatch-archive-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.blog-related { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.bpost-cat { display: inline-block; margin-bottom: 16px; font-family: var(--font-tech); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-900); background: var(--brand); padding: 7px 13px; border-radius: 999px; }
/* Editorial post layout (2026-10-05): light header, large serif title, cover photo, narrow centred column. */
.bpost-head { padding: calc(var(--header-h) + clamp(36px, 5vw, 72px)) 0 clamp(22px, 3vw, 34px); }
.bpost-head .crumbs { margin-bottom: 26px; }
.bpost-title { margin: 0 0 20px; max-width: 22ch; font-family: var(--font-display); font-weight: 800; font-style: normal; font-size: clamp(2.2rem, 1.3rem + 3.2vw, 4.4rem);
  line-height: 0.98; letter-spacing: -0.02em; color: var(--text-strong); text-align: start; hyphens: manual; text-wrap: balance; text-transform: uppercase; }
.bpost-meta { margin: 0; font-family: var(--font-tech); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 13px; letter-spacing: 0.04em; color: var(--text-muted); }
.bpost-cover { margin: 0 auto; }
.bpost-cover img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 8; object-fit: cover; border-radius: var(--radius-2xl); background: var(--ink-800); }
.bpost .post-body { max-width: 680px; margin: 0 auto; }
.ctile--dest .ctile-media { aspect-ratio: 1 / 1; }
.bpost .post-body > p:first-child::first-letter { float: left; font-family: var(--font-serif); font-size: 4.2em; line-height: 0.8; padding: 8px 14px 0 0; color: var(--brand-strong); }
[dir="rtl"] .bpost .post-body > p:first-child::first-letter { float: right; padding: 8px 0 0 14px; }

/* In-prose links: underlined, not colour-only (WCAG 1.4.1). Scoped by shape. */
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); }
@media (hover: hover) { 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 blockquote a:not(.btn):hover, .faq > p a:hover { text-decoration-color: currentColor; } }

/* ---------- Legal, sitemap, careers, 404 ---------- */
.legal-prose { max-width: 780px; font-size: 17px; line-height: 1.75; }
.legal-prose a { color: var(--text-link); text-decoration: underline; text-underline-offset: 2px; }
.legal-prose h2 { margin-top: 1.8em; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.legal-updated { font-family: var(--font-tech); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 12px; letter-spacing: 0.04em; color: var(--text-muted); }
.legal-prevails { margin-top: 2em; padding-top: 18px; border-top: 1px solid var(--divider); font-size: 14px; color: var(--text-muted); font-style: italic; }
.sitemap-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-bottom: 8px; }
.sitemap-sec { display: flex; flex-direction: column; gap: 12px; }
.sitemap-sec h2 { margin: 0 0 4px; font-size: 1.4rem; }
.sitemap-wide { margin-top: 40px; }
.sitemap-links { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.sitemap-links a { font-size: 15px; color: var(--text-body); }
@media (hover: hover) { .sitemap-links a:hover { color: var(--text-strong); } }
.sitemap-grid .sitemap-links { flex-direction: column; gap: 10px; }
.sitemap-region { margin: 16px 0; }
.sitemap-rg { display: block; font-family: var(--font-tech); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand-strong); margin-bottom: 8px; }
.nf { min-height: 72vh; display: flex; align-items: center; padding-top: calc(var(--header-h) + 40px); }
.nf .code { font-family: var(--font-display); font-weight: 800; font-size: clamp(6rem, 3rem + 14vw, 14rem); letter-spacing: -0.07em; line-height: 0.85;
  color: transparent; -webkit-text-stroke: 1.5px var(--border-strong); }

/* Hotel marquee (renders only when HOTEL_PARTNERS is populated) */
.hotels-sec { overflow: hidden; }
.hmarquee { overflow: hidden; position: relative; padding: 6px 0; -webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.hmarquee + .hmarquee { margin-top: 14px; }
.hmarquee-track { display: flex; gap: 14px; width: max-content; animation: hscroll 80s linear infinite; }
.hmarquee--rev .hmarquee-track { animation-direction: reverse; }
@media (hover: hover) { .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: 230px; background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 18px; display: flex; flex-direction: column; gap: 10px; margin: 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; font-weight: 800; font-size: 15px; color: var(--text-strong); text-align: center; text-transform: uppercase; }
.hbrand-desc { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--text-muted); text-align: center; }

/* ---------- Motion layer ----------
   Everything below is switched on by site.js adding .fx-on to <html>, which it
   does only with JS running, IntersectionObserver available and
   prefers-reduced-motion unset. With no JS — or for a crawler — nothing is
   hidden: the resting state of every rule is the normal, visible page. Reveals
   use `translate`/`filter`, never `transform`, so they never fight the hover
   lifts and the tilt, which own `transform`. */
.fx-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 70; transform: scaleX(0); transform-origin: left center; pointer-events: none;
  background: linear-gradient(90deg, var(--brand), var(--signal), var(--ocean-500)); }
[dir="rtl"] .fx-progress { transform-origin: right center; }
html.fx-on .fx-rv { opacity: 0; translate: 0 20px;
  transition: opacity 600ms var(--ease-out), translate 700ms var(--ease-out);
  transition-delay: calc(var(--fx-i, 0) * 60ms); }
html.fx-on .fx-rv.fx-in { opacity: 1; translate: 0 0; }
html.fx-on .fx-mask { clip-path: inset(0 0 100% 0); transition: clip-path 1300ms var(--ease-out); transition-delay: calc(var(--fx-i, 0) * 90ms); }
html.fx-on .fx-mask.fx-in { clip-path: inset(0 0 0 0); }
html.fx-on .hdr.fx-hdr-hide { transform: translateY(-130%); }
html.fx-on .mh-frame { transform: scale(calc(1 - var(--mh-p, 0) * 0.05)); transform-origin: 50% 0; }
html.fx-on .mh-body, html.fx-on .mh-foot { opacity: calc(1 - var(--mh-p, 0) * 1.6); translate: 0 calc(var(--mh-p, 0) * -60px); }
html.fx-on .mh-copy > * { animation: heroIn 700ms var(--ease-out) both; }
html.fx-on .mh-copy > :nth-child(2) { animation-delay: 80ms; }
html.fx-on .mh-copy > :nth-child(3) { animation-delay: 160ms; }
html.fx-on .mh-copy > :nth-child(4) { animation-delay: 240ms; }
html.fx-on .mh-card { animation: heroIn 700ms 300ms var(--ease-out) both; }
html.fx-on .mh-foot { animation: heroFade 900ms 400ms var(--ease-out) backwards; }
@keyframes heroIn { from { opacity: 0; translate: 0 24px; } to { opacity: 1; translate: 0 0; } }
/* The H1 is the LCP element: it slides but is never hidden. */
@keyframes heroRise { from { translate: 0 16px; } to { translate: 0 0; } }
@keyframes heroOut { from { opacity: 1; translate: 0 0; } to { opacity: 0; translate: 0 -10px; } }
html.fx-on .mh-copy.is-out > :is(.ex-eyebrow, .mh-h, .mh-sub) { animation: heroOut 240ms var(--ease-out) forwards; }
html.fx-on .mh-copy > .mh-h, html.fx-on .bpost-title { animation: heroRise 700ms var(--ease-out) both; }
@keyframes heroFade { from { opacity: 0; } to { opacity: 1; } }
html.fx-on [data-tilt] { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0px)); transform-style: preserve-3d; transition: transform 400ms var(--ease-out); }
@media (hover: hover) { html.fx-on [data-tilt]:hover { will-change: transform; } }
@media (hover: hover) { html.fx-on [data-tilt]:hover { --ty: -6px; } }
html.fx-on [data-tilt]::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity var(--dur);
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,0.18), transparent 45%); }
@media (hover: hover) { html.fx-on [data-tilt]:hover::after { opacity: 1; } }
html.fx-on .fx-glow { --gx: 50%; --gy: 50%; }
html.fx-on .fx-glow::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 600ms;
  background: radial-gradient(600px circle at var(--gx) var(--gy), rgba(184,224,74,0.12), transparent 40%); }
@media (hover: hover) { html.fx-on .fx-glow:hover::after { opacity: 1; } }
html.fx-on [data-parallax] { translate: 0 var(--py, 0px); scale: 1.12; }
html.fx-on .m-rail { cursor: grab; }
html.fx-on .m-rail.is-drag { cursor: grabbing; scroll-snap-type: none; }
html.fx-on .m-rail.is-drag a { pointer-events: none; }
html.fx-on .stat .v { background: linear-gradient(90deg, var(--text-strong) 50%, var(--brand) 50%); background-size: 200% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text; color: transparent; transition: background-position 1400ms var(--ease-out); }
html.fx-on .stat.fx-in .v { background-position: 0 0; }
/* Jitter/Wix-inspired motion (2026-10-05). All of it lives under html.fx-on, so the resting page is
   unchanged without JS or with reduced motion. clip-path and translate only, never transform. */
html.fx-on .mh-media { animation: fxHeroMask 1100ms var(--ease-out) both; }
html.fx-on .mh-img { scale: 1.1; translate: 0 calc(var(--mh-p, 0) * 70px); }
html.fx-on .city-hero > img { clip-path: inset(0 0 0 0 round 0); animation: heroPush 14s var(--ease-out) both, fxHeroMask 1100ms var(--ease-out) both;
  scale: 1.12; translate: 0 var(--cy, 0px); }
@keyframes fxHeroMask { from { clip-path: inset(6% 8% 6% 8% round 32px); } to { clip-path: inset(0 0 0 0 round 0); } }
html.fx-on .fx-tile .ctile-media, html.fx-on .fx-tile.dtile { clip-path: inset(8% round 24px); transition: clip-path 800ms var(--ease-out);
  transition-delay: calc(var(--fx-i, 0) * 60ms); }
html.fx-on .fx-tile .ctile-media img, html.fx-on .fx-tile.dtile img { scale: 1.08; transition: scale 1000ms var(--ease-out), transform 1000ms var(--ease-out);
  transition-delay: calc(var(--fx-i, 0) * 60ms); }
html.fx-on .fx-tile.fx-in .ctile-media, html.fx-on .fx-tile.dtile.fx-in { clip-path: inset(0 0 0 0 round 0); }
html.fx-on .fx-tile.dtile.fx-in { clip-path: inset(0 0 0 0 round var(--radius-lg)); }
html.fx-on .fx-tile.fx-in .ctile-media img, html.fx-on .fx-tile.dtile.fx-in img { scale: 1; }
html.fx-on .fx-blk { clip-path: inset(3% 2% round 32px); transition: clip-path 800ms var(--ease-out); }
html.fx-on .fx-blk.fx-in { clip-path: inset(0 0 0 0 round var(--radius-2xl)); }
html.fx-on .fx-wipe img { clip-path: inset(0 100% 0 0); transition: clip-path 900ms var(--ease-out); }
html.fx-on[dir="rtl"] .fx-wipe img { clip-path: inset(0 0 0 100%); }
html.fx-on .fx-wipe.fx-in img, html.fx-on[dir="rtl"] .fx-wipe.fx-in img { clip-path: inset(0 0 0 0); }
html.fx-on .bpost-head .crumbs, html.fx-on .bpost-head .bpost-cat, html.fx-on .bpost-meta { animation: heroIn 700ms var(--ease-out) both; }
html.fx-on .bpost-meta { animation-delay: 160ms; }
@supports not (translate: 0) { html.fx-on .fx-rv { opacity: 1; filter: none; } }

@media (prefers-reduced-motion: reduce) {
  /* Tiered (WCAG 2.3.3): movement goes, but state changes still fade quickly
     instead of jumping. .01ms (not 0) keeps transitionend firing. */
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .mega, .mh-slide, dialog.modal[open], .search-panel { transition: opacity 150ms ease !important; transform: none !important; }
  .btn, .hdr-link, a, .tag, .card { transition: color 150ms, background-color 150ms, border-color 150ms !important; }
  .mh-slide img { transform: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1399px) {
  .hdr .hdr-partner { display: none; }
  .hdr-link { padding: 0 11px; font-size: 14.5px; }
  .hdr-link::after { inset-inline: 11px; }
  :lang(ru) .hdr-link { padding: 0 8px; font-size: 13.5px; } /* the longest labels of any locale ("Туры с фиксированными датами") */
  :lang(ru) .hdr-link::after { inset-inline: 8px; }
  :lang(ru) .hdr-search { display: none; }
}
@media (max-width: 1519px) { :lang(fr) .hdr .hdr-partner, :lang(ru) .hdr .hdr-partner { display: none; } }
@media (max-width: 1280px) { :lang(fr) .hdr-link { padding: 0 8px; } :lang(fr) .hdr-link::after { inset-inline: 8px; } }
@media (max-width: 1180px) {
  :root { --header-h: 72px; --header-stick: 64px; }
  .hdr-util { display: none; }
  .hdr-bar { height: 64px; }
  .hdr-in { position: static; align-items: center; }
  .hdr-logo { margin-inline-end: 0; }
  .hdr-right { gap: 8px; }
  .hdr-search { display: none; }
  .hdr .btn-sm { padding: 0 16px; }
  .rfq-long { display: none; }
  .rfq-short { display: inline; }
  .menu-toggle { display: inline-flex; }
  .hdr nav { display: none; }
  html:has(.hdr.is-menu-open) { overflow: hidden; }
  .hdr.is-menu-open nav { display: flex; flex-direction: column; align-items: stretch; gap: 0; position: absolute; top: 100%; left: 0; right: 0;
    padding: 4px var(--gutter) 28px; background: var(--surface-raised); border-top: 1px solid var(--border);
    height: calc(100vh - 64px); height: calc(100dvh - 64px); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; animation: popIn 240ms var(--ease-out); }
  .hdr.is-menu-open .hdr-link { display: flex; width: 100%; min-height: 56px; padding: 14px 0; font-size: 18px; font-weight: 600; color: #fff;
    justify-content: space-between; border-bottom: 1px solid var(--divider); }
  .hdr.is-menu-open .hdr-link::after { content: none; }
  .hdr.is-menu-open .hdr-link[aria-current], .hdr.is-menu-open .has-mega.is-open > .hdr-link { color: var(--signal); }
  .hdr.is-menu-open .has-mega { display: block; position: relative; }
  .hdr.is-menu-open .has-mega > .hdr-link .ic { display: none; }
  .hdr.is-menu-open .mega-tg { display: flex; align-items: center; justify-content: center; position: absolute; top: 0; inset-inline-end: 0;
    width: 56px; height: 56px; border: 0; background: none; color: rgba(255,255,255,0.8); cursor: pointer; }
  .hdr.is-menu-open .mega-tg .ic { transition: transform 200ms ease; }
  .hdr.is-menu-open .has-mega.is-open .mega-tg .ic { transform: rotate(180deg); }
  .hdr.is-menu-open .has-mega:not(.is-open) .mega { display: none; }
  .hdr.is-menu-open .mega { position: static; width: auto; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; border-radius: 0;
    max-height: none; overflow: visible; background: transparent; }
  .hdr.is-menu-open .mega-grid, .hdr.is-menu-open .mega-dm { display: block; }
  .hdr.is-menu-open .mega-sec { padding: 6px 0 4px; border: 0; }
  .hdr.is-menu-open .mega-label { margin: 10px 0 2px; padding-inline: 14px; color: rgba(255,255,255,0.5); }
  .hdr.is-menu-open .mega-item, .hdr.is-menu-open .dm-tab { display: flex; align-items: center; min-height: 44px; padding: 10px 14px; font-size: 16px; font-weight: 500; color: rgba(255,255,255,0.82); }
  .hdr.is-menu-open .mega-item b { font-weight: 500; color: inherit; font-size: 16px; }
  .hdr.is-menu-open .mega-item small, .hdr.is-menu-open .mega-feat, .hdr.is-menu-open .mega-foot,
  .hdr.is-menu-open .dm-pane, .hdr.is-menu-open .dm-regions .mega-label, .hdr.is-menu-open .dm-tab .ic { display: none; }
  .hdr.is-menu-open .dm-regions { padding: 4px 0 8px; background: none; border: 0; }
  .hdr.is-menu-open .dm-tab, .hdr.is-menu-open .dm-tab.is-active { background: none; color: rgba(255,255,255,0.82); font-weight: 500; border-radius: 0; }
  .hdr-drawer { display: block; padding-top: 22px; }
  .hdr-drawer .hdr-menu-cta { display: flex; width: 100%; min-height: 50px; white-space: normal; }
  .hdr-drawer-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
  .hdr-drawer-row .btn { min-height: 50px; padding: 0 10px; white-space: normal; text-align: center; border-radius: 8px; }
  .hdr-drawer .hdr-menu-cta, .hdr-drawer .btn-primary { border-radius: 8px; }
  .hdr-drawer-wa { display: flex; align-items: center; gap: 8px; min-height: 48px; margin-top: 8px; color: rgba(255,255,255,0.78); font-size: 15px; }
  .hdr-drawer .lang-switch > summary { min-height: 44px; font-size: 14px; color: rgba(255,255,255,0.88); }
  .hdr-drawer .lang-menu { position: static; width: 100%; max-width: none; margin-top: 6px; grid-template-columns: repeat(3, minmax(0, 1fr)); box-shadow: none; }
}
@media (max-width: 1100px) {
  .mh-card { display: none; }
  .mh-body { grid-template-columns: 1fr; }
  .g4, .hx-services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hx-trust-card { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stat:nth-child(4) { border-left: 0; }
  .stat:nth-child(n+4) { border-top: 1px solid var(--border); }
  .office-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ftr-top { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ftr-brand { grid-column: 1 / -1; max-width: 520px; }
  .m-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .m-bento-feature { min-height: 380px; }
  .dispatch-grid { grid-template-columns: 1fr; }
  .dispatch-card.featured { grid-row: auto; min-height: 460px; }
  .dispatch-archive-grid, .blog-related { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .g3, .g2, .hx-blog { grid-template-columns: 1fr; }
  .split-2, .split-21, .split-13, .split-faq, .contact-grid, .m-intro-grid, .m-how, .gx-grid, .ftr-band { grid-template-columns: 1fr; }
  .sticky-aside, .m-intro-copy, .m-how-head { position: static; }
  .answer-block { grid-template-columns: 1fr; }
  .ctaband { grid-template-columns: 1fr; align-items: stretch; }
  .form-grid { grid-template-columns: 1fr; }
  .sitemap-grid { grid-template-columns: 1fr; }
  .contracting-band { grid-template-columns: 1fr; }
  .contracting-band .cb-cta { align-items: stretch; }
  .gx-stage { max-width: 480px; }
}
@media (max-width: 760px) {
  .mh { padding: 6px; min-height: 100vh; min-height: max(640px, 100svh); }
  .mh-frame { min-height: calc(100vh - 12px); min-height: calc(max(640px, 100svh) - 12px); }
  .mh-frame, .hx-dark, .gx-sec, .ink-hero, .city-hero, .page-head.fj-photo-head, .ftr, .ctaband, .inkpanel { border-radius: var(--radius-xl); }
  .hx-dark, .gx-sec { margin: 0 6px; }
  .ink-hero, .city-hero, .page-head.fj-photo-head, .band { margin: 6px 6px 0; }
  .ftr { margin: 0 6px 6px; }
  .mh-body { padding-bottom: 28px; }
  .mh-foot { grid-template-columns: auto minmax(0, 1fr); gap: 18px; padding-bottom: 24px; }
  .mh-ch-t, .mh-caption { display: none; }
  .mh-chapters { gap: 6px; }
  .hero-ctas .btn, .ink-hero .ctas .btn, .notes-band .ctas .btn, .sec-row .btn { width: 100%; }
  .sec-row { flex-direction: column; align-items: flex-start; }
  .hx-trust-card { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat { padding: 22px 16px; }
  .stat + .stat { border-left: 0; }
  .stat:nth-child(even) { border-left: 1px solid var(--border); }
  .stat:nth-child(n+3) { border-top: 1px solid var(--border); }
  .stat:nth-child(5) { grid-column: 1 / -1; }
  .g4, .hx-services, .m-bento, .office-grid, .dispatch-archive-grid, .blog-related,
  .gfill-230, .gfill-250, .gfill-280, .gfit-290, .gfit-300, .gfit-280, .gfit-270, .gfit-230, .gfit-210, .cgrid { grid-template-columns: 1fr; }
  .m-bento-feature { grid-column: auto; grid-row: auto; min-height: 420px; }
  .m-bento > .icard:last-child { grid-column: auto; }
  .m-rail { grid-auto-columns: 78vw; }
  .m-rail > .dtile:nth-child(even) { margin-top: 0; }
  .m-point { grid-template-columns: 52px minmax(0, 1fr); }
  .m-point-n { display: none; }
  .hx-how .step { grid-template-columns: 1fr; gap: 14px; }
  .faq > p { padding-right: 0; }
  .ftr-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ftr-base { flex-direction: column; align-items: flex-start; }
  .wa-dock { right: 16px; bottom: 16px; }
  .wa-channel { right: 16px; bottom: 84px; }
  dialog.modal { width: calc(100vw - 20px); max-height: 88vh; overflow-y: auto; }
  .modal-head { padding: 22px 20px 0; }
  .modal-head h2 { font-size: 24px; }
  .modal-body { padding: 18px 20px 24px; }
  .post-body { font-size: 17px; }
  .spec { grid-template-columns: 1fr; gap: 2px 0; }
  .spec dd { margin-bottom: 10px; }
}
@media (max-width: 560px) {
  .btn { white-space: normal; text-align: center; }
  .hdr .btn-sm { padding: 0 14px; }
  .badge { white-space: normal; max-width: 100%; }
  .hdr-logo img { height: 32px; }
  .hdr-in { gap: 8px; }
  .ftr-top { grid-template-columns: 1fr; }
  .answer-block { padding: 30px 20px 24px; }
  .inkpanel, .notes-band, .notice, .ctaband { padding: 28px 20px; }
}

/* Short desktop/laptop screens (1280x720, 1366x768, 1440x900, 1536x864):
   scale the hero headline and spacing to the viewport height so the whole
   hero (headline, buttons, chapter bar) fits on one screen. */
@media (min-width: 761px) and (max-height: 940px) {
  .mh-h { font-size: clamp(2.4rem, min(1rem + 5.2vw, 6.4vh + 0.5rem), 7rem); }
  .mh-copy { gap: 18px; }
  .mh-body { padding-top: calc(var(--header-h) + 22px); padding-bottom: 24px; }
  .mh-foot { padding-bottom: 24px; }
}
/* Phones: a slightly smaller hero headline so the longest slide fits. */
@media (max-width: 760px) {
  .mh-h { font-size: clamp(2rem, 8.6vw + 0.2rem, 2.6rem); }
  .mh-copy { gap: 18px; }
  .mh-body { padding-top: calc(var(--header-h) + 20px); }
}

/* Long words (German, Russian, Dutch compounds) must wrap inside their box
   on any screen width instead of pushing past the edge. */
:where(h1, h2, h3, h4, p, li, dt, dd, figcaption, blockquote, .stat .l, .stat .v) { overflow-wrap: break-word; }
:where(.sec-head, .stat, .stats, .hx-trust-card) > * { min-width: 0; }
:root:is(:lang(de), :lang(ru), :lang(fr), :lang(es), :lang(pt)) :is(h1, h2, h3, .stat .l, .stat .s, .rowcard b, .rowcard h3, .card h3) { overflow-wrap: anywhere; hyphens: auto; }
:root:is(:lang(de), :lang(ru), :lang(fr), :lang(es), :lang(pt)) .stat .l { hyphens: auto; }
/* Longer-translation locales: the hero headline is a little smaller so the
   whole hero still fits one screen. */
:root:is(:lang(de), :lang(ru)) .mh-h { font-size: clamp(2.2rem, min(0.9rem + 4.6vw, 7.6vh + 0.4rem), 6.2rem); }
@media (min-width: 761px) and (max-height: 940px) {
  :root:is(:lang(de), :lang(ru)) .mh-h { font-size: clamp(2.1rem, min(0.9rem + 4.6vw, 5.6vh + 0.4rem), 6.2rem); }
}
@media (max-width: 760px) {
  :root:is(:lang(de), :lang(ru)) .mh-h { font-size: clamp(1.8rem, 7.6vw + 0.2rem, 2.3rem); }
}
/* Justified text on a narrow phone leaves wide gaps between words; let the
   browser hyphenate long words there so lines set evenly. */
@media (max-width: 560px) {
  p, li, dd, figcaption, .mh-sub { hyphens: auto; -webkit-hyphens: auto; }
}
/* Smallest phones (under 360px): the sticky bottom bar already carries
   "Request a quote", so the header keeps only the logo and the menu. */
@media (max-width: 359px) {
  .hdr .btn-rfq { display: none; }
}

/* Narrow phones (up to 429px): the logo, Quote and Menu must all fit in every
   language, so the Menu label is kept for screen readers but hidden visually. */
@media (max-width: 429px) {
  .hdr-logo img { height: 28px; }
  .hdr-in { gap: 6px; }
  .hdr-right { gap: 6px; }
  .hdr .btn-sm { padding: 0 12px; font-size: 14px; }
  .menu-toggle { padding: 0 11px; }
  .menu-toggle .mt-open, .menu-toggle .mt-close { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* ---------- Touch targets (mobile) — keep this block LAST ----------
   44px under a coarse pointer. Inline links in prose are exempt (WCAG 2.5.5). */
/* Non-Latin locales: the serif-italic display touches (taglines, pull quotes,
   polaroid captions) fall back to synthetic italics in Arabic, CJK and Cyrillic,
   which read as a rendering fault. Upright, in the locale's script font. */
html:is(:lang(ar), :lang(ja), :lang(ko), :lang(ru)) :is(.ctile-media .ph span, .serif-pull, .city-hero .tagline, .post-body blockquote p, .post-body .ex-fig--polaroid figcaption, .dispatch-rail p, .legal-prevails, .ex-serif, .bpost-title) {
  font-family: var(--font-display); font-style: normal;
}

@media (pointer: coarse) {
  .ftr-col a, .ftr-legal a, .crumbs a, .sitemap-links a, .ftr-site, .tag, .month-chip, .gx-markets a,
  .search-close, .copy-btn, .hdr-search { min-height: 44px; display: inline-flex; align-items: center; }
  .ftr-social a { width: 44px; height: 44px; }
  .wa-channel-x { width: 44px; height: 44px; }
  .ftr-phone a, .ctaband .email { min-height: 44px; display: inline-flex; align-items: center; }
  .sitemap-rg { min-height: 44px; display: flex; align-items: center; margin-bottom: 0; }
}

/* Dark immersive theme (2026-10-05): the dark bands sit on a dark page, so they
   are lifted by a hairline and a faint lime glow instead of by contrast. */
.hx-dark, .gx-sec, .ctaband, .inkpanel, .contracting-band { border: 1px solid var(--border); }
.hx-dark, .gx-sec, .inkpanel { background: radial-gradient(120% 90% at 85% 0%, rgba(139,178,46,0.10), transparent 55%), var(--ink-900); }
/* Safari-style display type: h1/h2 set bold, upper-case and tight in the scripts
   that have case. The serif accent word keeps its own case. */
:root:is(:lang(en), :lang(es), :lang(fr), :lang(de), :lang(pt), :lang(ru)) :is(h1, h2) {
  text-transform: uppercase; letter-spacing: -0.02em; line-height: 0.98; font-weight: 800; overflow-wrap: break-word; hyphens: manual; }
:root:is(:lang(en), :lang(es), :lang(fr), :lang(de), :lang(pt), :lang(ru)) :is(h1, h2) em { text-transform: none; }

@media (pointer: coarse) { .ctaband::before { animation: none; } }

/* Audit fixes (2026-10-05; justified text removed 2026-10-07, see base.css). */
:is(h1, h2, h3, h4, h5, h6) { text-align: start; }
:lang(ja) :is(h1, h2, h3) { word-break: auto-phrase; overflow-wrap: anywhere; }
/* German and Russian compounds outgrow a 393px headline. Break them at syllables
   (hyphens: auto, from the page's lang), and only fall back to a plain break when
   no hyphenation point fits; words under 12 letters are never split. :root:is() matches the upper-case display rule's
   specificity above, which otherwise forces hyphens: manual and split
   "STERNENBEOBACHTUNG" mid-syllable. */
:root:is(:lang(de), :lang(ru)) :is(h1, h2, h3) { -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 12 5 5; overflow-wrap: break-word; }
html { -webkit-tap-highlight-color: transparent; }
@media (max-width: 760px) {
  .tagrow[data-filter-tags], .tagrow[data-cat-tags] { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
    padding-bottom: 6px; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 24px), transparent); }
  .tagrow[data-filter-tags] > *, .tagrow[data-cat-tags] > * { flex: none; scroll-snap-align: start; }
  .wa-channel { display: none; }
}

/* ---------- Count-aware grids (design audit, 2026-10-07) ----------
   auto-fit/auto-fill grids chose their column count from the width alone, so
   5 cards in 4 columns left one card stranded on its own row (India's entry
   block, Six reasons 4+2, Great Barrier Island on /destinations/). The column
   count now follows the number of items: 5, 6 and 9 run in threes, 4, 7, 8 and
   10–12 in fours; on tablets two columns, and an odd last card spans the row.
   Grids with an inline grid-template-columns keep it (inline wins). */
@media (min-width: 1101px) {
  .blog-related:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grid:is(.g3, .g4, .gfit-210, .gfit-230, .gfit-270, .gfit-280, .gfit-290, .gfit-300, .gfill-230, .gfill-250, .gfill-280):has(> :nth-child(4):last-child, > :nth-child(7):last-child, > :nth-child(8):last-child, > :nth-child(10):last-child, > :nth-child(11):last-child, > :nth-child(12):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grid:is(.g3, .g4, .gfit-210, .gfit-230, .gfit-270, .gfit-280, .gfit-290, .gfit-300, .gfill-230, .gfill-250, .gfill-280):has(> :nth-child(5):last-child, > :nth-child(6):last-child, > :nth-child(9):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid:is(.g3, .g4, .gfit-210, .gfit-230, .gfit-270, .gfit-280, .gfit-290, .gfit-300, .gfill-230, .gfill-250, .gfill-280):has(> :nth-child(n+13):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grid:is(.g3, .g4, .gfit-210, .gfit-230, .gfit-270, .gfit-280, .gfit-290, .gfit-300, .gfill-230, .gfill-250, .gfill-280):has(> :nth-child(4n+13):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid.g3:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .grid:is(.g4, .gfit-210, .gfit-230, .gfit-270, .gfit-280, .gfit-290, .gfit-300, .gfill-230, .gfill-250, .gfill-280):has(> :nth-child(2)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid:is(.g4, .gfit-210, .gfit-230, .gfit-270, .gfit-280, .gfit-290, .gfit-300, .gfill-230, .gfill-250, .gfill-280):has(> :nth-child(3):last-child, > :nth-child(5):last-child, > :nth-child(6):last-child, > :nth-child(9):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid:is(.g4, .gfit-210, .gfit-230, .gfit-270, .gfit-280, .gfit-290, .gfit-300, .gfill-230, .gfill-250, .gfill-280):not(:has(> :nth-child(3):last-child, > :nth-child(5):last-child, > :nth-child(9):last-child)) > :last-child:nth-child(odd):not(:first-child):not(.dtile) { grid-column: 1 / -1; }
  .grid:is(.g4, .gfit-210, .gfit-230, .gfit-270, .gfit-280, .gfit-290, .gfit-300, .gfill-230, .gfill-250, .gfill-280):not(:has(> :nth-child(3):last-child, > :nth-child(5):last-child, > :nth-child(9):last-child)) > .ctile:last-child:nth-child(odd):not(:first-child) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
  .grid:is(.g4, .gfit-210, .gfit-230, .gfit-270, .gfit-280, .gfit-290, .gfit-300, .gfill-230, .gfill-250, .gfill-280):not(:has(> :nth-child(3):last-child, > :nth-child(5):last-child, > :nth-child(9):last-child)) > .ctile:last-child:nth-child(odd):not(:first-child) .ctile-media { margin: 8px; }
}

/* ---------- Experience cards + "On this page" bar (design audit, 2026-10-07) ---------- */
.xp-grid { align-items: start; }
.xp-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.xp-card .t { margin: 0; font-size: 15.5px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.45; text-transform: none; }
.xp-more > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; min-height: 32px;
  font-size: 13.5px; font-weight: 700; color: var(--brand-strong); }
.xp-more > summary::-webkit-details-marker { display: none; }
.xp-more > summary::before { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); transition: transform var(--dur) var(--ease-out); }
[dir="rtl"] .xp-more > summary::before { transform: rotate(135deg); }
.xp-more[open] > summary::before { transform: rotate(45deg); }
.xp-more > p { margin: 6px 0 0; font-size: 15px; line-height: 1.68; color: var(--text-body); }

.fold-list { border-top: 1px solid var(--border); margin-top: 8px; }
.fold { border-bottom: 1px solid var(--border); }
.fold > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; padding: 10px 0; }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary h3 { margin: 0; font-size: 1.05rem; line-height: 1.35; text-transform: none; }
.fold > summary::after { content: ""; flex: none; width: 8px; height: 8px; margin-inline-end: 6px; border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted);
  transform: rotate(45deg); transition: transform var(--dur) var(--ease-out); }
.fold[open] > summary::after { transform: rotate(225deg); }
.fold-body { padding: 0 0 12px; }

.otp { position: sticky; top: calc(var(--header-stick) - 8px); z-index: 40; margin: 28px 0 0; padding: 0 var(--gutter);
  transition: top 520ms var(--ease-out); }
html:has(.hdr.fx-hdr-hide) .otp { top: 8px; }
html:has(.otp) { scroll-padding-top: calc(var(--header-stick) + 72px); }
.otp-in { max-width: var(--maxw-wide); margin: 0 auto; display: flex; align-items: center; gap: 12px; padding: 6px 8px 6px 18px;
  border-radius: var(--radius-pill); background: rgba(6,17,14,0.95); border: 1px solid var(--border);
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); box-shadow: 0 14px 40px -24px rgba(0,0,0,0.8); }
.otp-k { flex: none; font-family: var(--font-tech); font-weight: 700; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.otp-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; min-width: 0; scroll-behavior: smooth;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
[dir="rtl"] .otp-chips { -webkit-mask-image: linear-gradient(270deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(270deg, #000 calc(100% - 28px), transparent); }
.otp-chips::-webkit-scrollbar { display: none; }
.otp-chips a { flex: none; display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: var(--radius-pill);
  font-size: 13.5px; font-weight: 600; color: var(--text-body); white-space: nowrap; border: 1px solid transparent;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast); }
@media (hover: hover) { .otp-chips a:hover { text-decoration: none; color: var(--text-strong); border-color: var(--border-strong); } }
.otp-chips a[aria-current="true"] { background: var(--signal); color: var(--ink-900); }
@media (max-width: 760px) {
  .otp { margin-top: 18px; padding: 0 6px; }
  .otp-in { padding: 5px; border-radius: 18px; }
  .otp-k { display: none; }
}

/* ---------- Mobile action bar (design audit, 2026-10-07) ----------
   On a phone the floating WhatsApp circle gives way to a slim bar with the
   site's one primary action (Request a quote, opens the RFQ modal) and a
   WhatsApp button. The body gains the bar's height at the bottom so the bar
   never sits over the last line of content, and the home hero frame stops
   above it so the slide counter stays visible. Desktop keeps the dock. */
.mbar { display: none; }
@media (pointer: coarse) and (max-width: 760px) {
  :root { --mbar-h: 68px; }
  .wa-dock { display: none; }
  .mbar { display: flex; align-items: center; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
    padding: 10px calc(12px + env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left));
    background: rgba(6,17,14,0.9); border-top: 1px solid var(--border);
    -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); }
  .mbar-rfq { flex: 1 1 auto; min-height: 48px; }
  .mbar-wa { flex: none; width: 48px; height: 48px; border-radius: 50%; background: #25D366; color: #fff; display: flex; align-items: center; justify-content: center; }
  .mbar-wa:focus-visible, .mbar-rfq:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }
  body { padding-bottom: calc(var(--mbar-h) + env(safe-area-inset-bottom)); }
  .mh { padding-bottom: calc(6px + var(--mbar-h) + env(safe-area-inset-bottom)); }
  .mh .hero-ctas { flex-wrap: nowrap; gap: 10px; }
  .mh .hero-ctas .btn { width: auto; flex: 1 1 0; min-width: 0; padding: 15px 10px; font-size: 15px; }
  .mh .hero-ctas .btn .ic { display: none; }
}

@media (max-width: 380px) {
  .hdr-logo img { height: 30px; }
}

/* ---------- Fixed departures (2026-10-08) ----------
   /fixed-departures/ hub and the three package pages: photo hero with a
   key-facts strip, a sticky trip-summary card, a route line that draws itself,
   a day-by-day timeline of <details> cards, departure date cards with a
   build-date booking status, inclusions/exclusions panels, add-on chips, a
   comparison table and a month-by-month departure calendar. Existing tokens
   only. Every motion rule is under html.fx-on (static/js/site.js "Fixed
   departures" block), so without JS or with reduced motion the resting page is
   the complete, visible page. */
.fd-hero { min-height: min(94vh, 880px); }
.fd-hero .ovr { background: linear-gradient(180deg, rgba(5,13,11,0.6) 0%, rgba(5,13,11,0.2) 30%, rgba(5,13,11,0.88) 78%, rgba(5,13,11,0.96) 100%), radial-gradient(80% 70% at 0% 100%, rgba(5,13,11,0.6), transparent 60%); }
.fd-hero .container { padding-bottom: clamp(28px, 4vw, 56px); }
.fd-hero h1 { max-width: 14ch; }
.fd-hero--hub h1 { max-width: 18ch; }
.fd-hero-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.fd-hero-tags .badge { white-space: normal; }
.fd-lead { margin: 0; max-width: 62ch; font-size: var(--fs-body-lg); line-height: 1.6; color: rgba(238,244,239,0.84); }
.fd-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.fd-facts { margin: clamp(28px, 4vw, 44px) 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1px;
  background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.14); border-radius: var(--radius-xl); overflow: hidden;
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); }
.fd-fact { padding: 16px 20px 18px; background: rgba(5,13,11,0.62); min-width: 0; }
.fd-fact dt { display: flex; align-items: center; gap: 8px; font-family: var(--font-tech); font-weight: 700; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(238,244,239,0.62); }
.fd-fact dt .ic { color: var(--signal); }
.fd-fact dd { margin: 8px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: 16px; font-weight: 700; line-height: 1.35; color: #fff; }
.fd-fact-n { font-size: 30px; font-weight: 800; line-height: 1; letter-spacing: -0.03em; color: var(--signal); font-variant-numeric: tabular-nums; }

.fd-st { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 5px 11px; border-radius: var(--radius-pill); border: 1px solid;
  font-size: 12.5px; font-weight: 700; line-height: 1.3; max-width: 100%; flex-wrap: wrap; }
.fd-st > span { min-width: 0; }
.fd-st b { font-size: 13.5px; font-variant-numeric: tabular-nums; }
.fd-st.is-open { background: rgba(184,224,74,0.12); color: var(--signal); border-color: rgba(184,224,74,0.32); }
.fd-st.is-closed { background: var(--accent-gold-soft); color: var(--gold-text); border-color: rgba(224,169,28,0.32); }
.fd-pulse { position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--signal); }

.fd-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(32px, 4vw, 64px); align-items: stretch; }
.fd-main { min-width: 0; }
.fd-sec { padding-top: clamp(56px, 6vw, 96px); }
.fd-sec--first { padding-top: clamp(40px, 5vw, 72px); }
.fd-sec > h2, .fd-h2, .fd-sec-row h2 { margin: 14px 0 18px; font-size: clamp(1.9rem, 1.2rem + 2vw, 3rem); }
.fd-h2 { margin-bottom: 32px; }
.fd-sec-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; }
.fd-sec-row h2 { margin-bottom: 0; }
.fd-p { margin: 0; max-width: 66ch; font-size: 17px; line-height: 1.7; color: var(--text-body); }
.fd-fine { margin: 20px 0 0; font-size: 14px; line-height: 1.6; color: var(--text-muted); }

/* Compact parts of these pages keep start alignment: the site-wide
   justified paragraphs (base.css) open wide gaps in narrow cards and pills. */
.fd-page :is(.fd-sum dd, .fd-fact dd, .fd-inc dd, .fd-who p, .fd-day-list > li, .fd-exl > li, .fd-notes > li, .fd-opt p, .fd-pcard-body > p, .fd-steps p, .fd-date-bb, .fd-day-note, .fd-route li, .fd-legs li, .fd-acts li, .fd-addon-list li, .fd-cal-row, .fd-month-list li, .fd-fine) { text-align: start; -webkit-hyphens: manual; hyphens: manual; }
.fd-sf { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.fd-sf .fd-to { color: var(--signal); }
[dir="rtl"] .fd-sf .fd-to { transform: scaleX(-1); }

/* Route line */
.fd-route { list-style: none; margin: 28px 0 0; padding: 26px 20px 22px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  background: radial-gradient(90% 120% at 100% 0%, rgba(139,178,46,0.1), transparent 60%), var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-xl); }
.fd-route > li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 0 4px; min-width: 0; }
.fd-route > li::before, .fd-route > li::after { content: ""; position: absolute; top: 16px; inset-inline: 0; height: 2px; }
.fd-route > li::before { background: var(--border-strong); }
.fd-route > li::after { background: linear-gradient(90deg, var(--brand), var(--signal)); transform-origin: left center; }
[dir="rtl"] .fd-route > li::after { transform-origin: right center; }
.fd-route > li:first-child::before, .fd-route > li:first-child::after { inset-inline-start: 50%; }
.fd-route > li:last-child::before, .fd-route > li:last-child::after { inset-inline-end: 50%; }
.fd-stop, .fd-hop { list-style: none; }
.fd-route > .is-flight::before, .fd-route > .is-flight::after { background: repeating-linear-gradient(90deg, var(--gold-500) 0 6px, transparent 6px 12px); opacity: 0.8; }
.fd-node { position: relative; z-index: 1; width: 18px; height: 18px; margin: 8px 0; border-radius: 50%; background: var(--bg-page); border: 2px solid var(--signal); box-shadow: 0 0 0 5px rgba(184,224,74,0.14); }
.fd-route > li:first-child .fd-node, .fd-route > li:last-child .fd-node { background: var(--signal); }
.fd-hop-ic { position: relative; z-index: 1; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--ink-900); border: 1px solid rgba(224,169,28,0.5); color: var(--gold-text); }
.fd-stop-n { font-size: 15px; font-weight: 800; line-height: 1.25; letter-spacing: -0.01em; color: var(--text-strong); overflow-wrap: anywhere; }
.fd-stop-k, .fd-hop-t { font-family: var(--font-tech); font-weight: 700; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--signal); }
.fd-hop-t { color: var(--gold-text); }
.fd-route--mini { margin: 2px 0 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; background: none; border: 0; border-radius: 0; }
.fd-route--mini > li { flex-direction: row; gap: 0; padding: 0; text-align: start; }
.fd-route--mini > li::before, .fd-route--mini > li::after { display: none; }
.fd-route--mini .fd-node { width: 14px; height: 2px; margin: 0 7px; border: 0; border-radius: 2px; box-shadow: none; background: var(--signal); }
.fd-route--mini > li:first-child .fd-node { display: none; }
.fd-route--mini .fd-hop-ic { width: 22px; height: 22px; margin: 0 6px; }
.fd-route--mini .fd-stop-n { font-size: 12.5px; font-weight: 700; color: var(--text-body); overflow-wrap: normal; white-space: nowrap; }
.fd-who { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
.fd-who > div { padding: 20px 22px; border-radius: var(--radius-lg); background: var(--surface-card); border: 1px solid var(--border); }
.fd-who-k, .fd-day-lbl, .fd-in-k, .fd-sum-k, .fd-date-k { display: block; font-family: var(--font-tech); font-weight: 700; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.fd-who p { margin: 8px 0 0; font-size: 15px; line-height: 1.65; color: var(--text-body); }

/* Day-by-day timeline */
.fd-expand { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: var(--radius-pill); border: 1px solid var(--border-strong);
  background: transparent; color: var(--text-strong); font-family: var(--font-sans); font-size: 14px; font-weight: 700; cursor: pointer;
  transition: background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out); }
.fd-expand[hidden] { display: none; }
@media (hover: hover) { .fd-expand:hover { border-color: var(--signal); color: var(--signal); } }
.fd-expand:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }
.fd-x-close, .fd-expand[aria-pressed="true"] .fd-x-open { display: none; }
.fd-expand[aria-pressed="true"] .fd-x-close { display: inline; }
.fd-days { list-style: none; margin: 30px 0 0; padding: 0; position: relative; display: grid; gap: 14px; }
.fd-days::before, .fd-days::after { content: ""; position: absolute; inset-inline-start: 27px; top: 28px; bottom: 28px; width: 2px; border-radius: 2px; }
.fd-days::before { background: var(--border); }
.fd-days::after { background: linear-gradient(180deg, var(--signal), var(--brand) 60%, var(--ocean-500)); transform-origin: top center; }
.fd-day { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 18px; align-items: start; }
.fd-day-mark { position: relative; z-index: 1; width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; margin-top: 4px;
  background: var(--surface-raised); border: 1px solid var(--border-strong); font-size: 19px; font-weight: 800; letter-spacing: -0.02em; color: var(--text-strong);
  font-variant-numeric: tabular-nums; transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out); }
.fd-day:has(> .fd-day-d[open]) .fd-day-mark { color: var(--signal); border-color: rgba(184,224,74,0.45); }
@media (hover: hover) { .fd-day:hover .fd-day-mark { background: var(--signal); color: var(--ink-900); border-color: var(--signal); } }
.fd-day-d { min-width: 0; border-radius: var(--radius-lg); background: var(--surface-card); border: 1px solid var(--border); overflow: hidden;
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); }
.fd-day-d[open] { border-color: rgba(184,224,74,0.3); box-shadow: 0 30px 60px -40px rgba(0,0,0,0.8); }
.fd-day-d > summary { list-style: none; cursor: pointer; position: relative; display: grid; gap: 8px; padding: 20px 64px 20px 24px; }
.fd-day-d > summary::-webkit-details-marker { display: none; }
.fd-day-d > summary:focus-visible { outline: 3px solid var(--ring); outline-offset: -3px; border-radius: var(--radius-lg); }
@media (hover: hover) { .fd-day-d:not([open]) > summary:hover { background: var(--surface-raised); } }
.fd-day-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.fd-day-k { font-family: var(--font-tech); font-weight: 700; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--signal); }
.fd-flag { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: var(--radius-pill); font-size: 11.5px; font-weight: 700;
  background: var(--accent-gold-soft); color: var(--gold-text); border: 1px solid rgba(224,169,28,0.3); }
.fd-day-d h3 { margin: 0; font-size: clamp(1.15rem, 1rem + 0.5vw, 1.4rem); line-height: 1.25; letter-spacing: -0.02em; color: var(--text-strong); }
.fd-legs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; font-size: 14px; font-weight: 600; color: var(--text-muted); }
.fd-legs > li + li::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 10px 2px 8px; border-right: 1.5px solid var(--signal); border-bottom: 1.5px solid var(--signal); transform: rotate(-45deg); }
[dir="rtl"] .fd-legs > li + li::before { margin: 0 8px 2px 10px; transform: rotate(135deg); }
.fd-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.fd-chip { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 6px 11px; border-radius: var(--radius-pill); font-size: 12.5px; font-weight: 600; line-height: 1.3;
  background: var(--surface-raised); border: 1px solid var(--border); color: var(--text-body); }
.fd-chip--meal .ic { color: var(--gold-text); }
.fd-chip--meal > span + span::before { content: "·"; margin-inline-end: 6px; color: var(--text-faint); }
.fd-chip--stay .ic { color: var(--ocean-300); }
.fd-chip-k { color: var(--text-faint); }
.fd-day-tog { position: absolute; top: 20px; inset-inline-end: 20px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border-strong);
  transition: transform var(--dur) var(--ease-out), background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out); }
.fd-day-tog::before, .fd-day-tog::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 2px; background: var(--text-strong); }
.fd-day-tog::after { transform: rotate(90deg); }
.fd-day-d[open] .fd-day-tog { transform: rotate(45deg); background: var(--signal); border-color: var(--signal); }
.fd-day-d[open] .fd-day-tog::before, .fd-day-d[open] .fd-day-tog::after { background: var(--ink-900); }
.fd-day-body { display: grid; gap: 22px; padding: 2px 24px 24px; border-top: 1px solid var(--divider); padding-top: 20px; }
.fd-day-body.has-ph { grid-template-columns: minmax(0, 1fr) 240px; align-items: start; }
.fd-day-copy > p { margin: 0 0 16px; font-size: 16px; line-height: 1.7; color: var(--text-body); }
.fd-day-lbl { margin: 0 0 10px; }
.fd-day-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.fd-day-list > li { position: relative; padding-inline-start: 22px; font-size: 15.5px; line-height: 1.6; color: var(--text-strong); }
.fd-day-list > li::before { content: ""; position: absolute; inset-inline-start: 2px; top: 0.6em; width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--signal); }
.fd-opts { display: grid; gap: 10px; }
.fd-opt { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--radius-md); background: var(--surface-raised); border: 1px solid var(--border); }
.fd-opt:first-child { border-color: rgba(224,169,28,0.4); }
.fd-opt > .ic { flex: none; margin-top: 2px; color: var(--signal); }
.fd-opt:first-child > .ic { color: var(--gold-text); }
.fd-opt b { display: block; font-size: 15px; color: var(--text-strong); }
.fd-opt p { margin: 4px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--text-body); }
.fd-day-note { display: flex; gap: 10px; align-items: flex-start; margin: 16px 0 0; padding: 12px 14px; border-radius: var(--radius-md);
  background: var(--accent-gold-soft); border: 1px solid rgba(224,169,28,0.3); font-size: 14.5px; line-height: 1.6; color: var(--text-body); }
.fd-day-note .ic { flex: none; margin-top: 3px; color: var(--gold-text); }
.fd-day-ph { position: relative; margin: 0; aspect-ratio: 4 / 3; border-radius: var(--radius-md); overflow: hidden; background: var(--ink-800); }
.fd-day-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* Departure date cards */
.fd-dates { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.fd-date { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 20px 20px 18px; border-radius: var(--radius-lg); background: var(--surface-card); border: 1px solid var(--border); overflow: hidden;
  transition: border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); }
@media (hover: hover) { .fd-date:hover { border-color: var(--border-strong); transform: translateY(-3px); } }
.fd-date.is-next { border-color: rgba(184,224,74,0.45); background: radial-gradient(120% 90% at 100% 0%, rgba(184,224,74,0.14), transparent 60%), var(--surface-card);
  box-shadow: 0 24px 50px -32px rgba(139,178,46,0.7); }
.fd-date.is-closed { opacity: 0.78; }
.fd-date-flag { align-self: flex-start; padding: 4px 10px; border-radius: var(--radius-pill); background: var(--signal); color: var(--ink-900);
  font-family: var(--font-tech); font-weight: 700; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.3; }
.fd-big { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: end; }
.fd-dd { grid-row: span 2; font-size: clamp(3rem, 2.2rem + 1.8vw, 4.2rem); font-weight: 800; line-height: 0.85; letter-spacing: -0.05em; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.fd-mm { align-self: end; font-size: 16px; font-weight: 800; color: var(--text-strong); line-height: 1.2; overflow-wrap: anywhere; }
.fd-yy { align-self: start; font-family: var(--font-tech); font-weight: 700; font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.fd-date-bb { font-size: 13.5px; line-height: 1.45; color: var(--text-muted); }
.fd-date-bb time { font-weight: 700; color: var(--text-body); }
.fd-anyday { display: flex; gap: 16px; align-items: center; margin-top: 8px; padding: 24px; border-radius: var(--radius-lg); background: var(--surface-card); border: 1px solid var(--border); }
.fd-anyday .ic { flex: none; color: var(--signal); }
.fd-anyday p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--text-strong); }

/* Included / not included */
.fd-inex { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; margin-top: 28px; align-items: start; }
.fd-incl, .fd-excl { padding: clamp(22px, 3vw, 30px); border-radius: var(--radius-xl); }
.fd-incl { background: radial-gradient(100% 80% at 0% 0%, rgba(184,224,74,0.12), transparent 60%), var(--surface-card); border: 1px solid rgba(184,224,74,0.25); }
.fd-excl { background: var(--surface-muted); border: 1px solid var(--border); }
.fd-incl h3, .fd-excl h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; font-size: 18px; letter-spacing: -0.01em; color: var(--text-strong); }
.fd-incl h3 .ic { color: var(--signal); }
.fd-excl h3 .ic { color: var(--danger); }
.fd-inc { margin: 0; display: grid; }
.fd-inc > div { padding: 13px 0; border-top: 1px solid var(--divider); }
.fd-inc > div:first-child { border-top: 0; padding-top: 0; }
.fd-inc dt { display: flex; align-items: center; gap: 8px; font-family: var(--font-tech); font-weight: 700; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.fd-inc dt .ic { color: var(--signal); }
.fd-inc dd { margin: 5px 0 0; font-size: 15.5px; line-height: 1.55; color: var(--text-strong); }
.fd-in-k { margin: 20px 0 12px; }
.fd-acts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.fd-acts > li { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: var(--radius-pill); font-size: 13.5px; font-weight: 600; line-height: 1.3;
  background: rgba(184,224,74,0.09); border: 1px solid rgba(184,224,74,0.22); color: var(--text-strong); }
.fd-acts .ic { flex: none; color: var(--signal); }
.fd-exl { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.fd-exl > li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.55; color: var(--text-body); }
.fd-exl .ic { flex: none; margin-top: 4px; color: var(--danger); opacity: 0.85; }

/* Add-ons, notes, steps */
.fd-addons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 24px; }
.fd-addon-g { padding: 22px; border-radius: var(--radius-lg); background: var(--surface-card); border: 1px solid var(--border); }
.fd-addon-k { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; font-family: var(--font-tech); font-weight: 700; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--signal); }
.fd-addon-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.fd-addon-list > li { display: inline-flex; align-items: center; gap: 6px; padding: 9px 13px; border-radius: var(--radius-pill); font-size: 13.5px; font-weight: 600; line-height: 1.3;
  background: var(--surface-raised); border: 1px solid var(--border-strong); color: var(--text-strong); transition: border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); }
@media (hover: hover) { .fd-addon-list > li:hover { border-color: var(--gold-500); transform: translateY(-2px); } }
.fd-addon-list .ic { flex: none; color: var(--gold-text); }
.fd-notes { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
.fd-notes > li { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border-radius: var(--radius-md); background: var(--surface-card); border: 1px solid var(--border);
  font-size: 15.5px; line-height: 1.6; color: var(--text-body); }
.fd-notes .ic { flex: none; margin-top: 3px; color: var(--ocean-300); }
.fd-steps { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.fd-steps > li { padding: 22px; border-radius: var(--radius-lg); background: var(--surface-card); border: 1px solid var(--border); }
.fd-step-n { display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 14px; border-radius: 50%; background: var(--signal); color: var(--ink-900); font-weight: 800; }
.fd-steps p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--text-body); }

/* Trip summary (sticky on desktop) */
.fd-summary { padding-top: clamp(40px, 5vw, 72px); min-width: 0; }
.fd-summary-in { position: sticky; top: calc(var(--header-h) + 24px); padding: 26px; border-radius: var(--radius-xl); border: 1px solid var(--border-strong);
  background: radial-gradient(120% 70% at 100% 0%, rgba(139,178,46,0.16), transparent 60%), var(--ink-900); box-shadow: var(--shadow-lg); }
.fd-sum-k { color: var(--signal); }
.fd-sum-name { margin: 8px 0 12px; font-size: 21px; font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; color: var(--text-strong); }
.fd-sum { margin: 0; }
.fd-sum > div { padding: 11px 0; border-top: 1px solid var(--divider); }
.fd-sum dt { display: flex; align-items: center; gap: 8px; font-family: var(--font-tech); font-weight: 700; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.fd-sum dt .ic { color: var(--signal); }
.fd-sum dd { margin: 4px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--text-strong); }
.fd-sum-cta { width: 100%; margin-top: 16px; white-space: normal; }
.fd-sum-mail { display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; color: var(--text-body); overflow-wrap: anywhere; }
.fd-sum-mail .ic { flex: none; color: var(--signal); }
@media (hover: hover) { .fd-sum-mail:hover { color: var(--text-strong); } }

/* Package cards */
.fd-pcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.fd-pcards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fd-pcard { position: relative; display: flex; flex-direction: column; overflow: hidden; color: inherit; border-radius: var(--radius-xl); background: var(--surface-card); border: 1px solid var(--border);
  transition: transform var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); }
@media (hover: hover) { .fd-pcard:hover { text-decoration: none; transform: translateY(-6px); border-color: var(--border-strong); box-shadow: var(--shadow-md); } }
.fd-pcard:focus-visible { outline: 3px solid var(--ring); outline-offset: 3px; }
.fd-pcard-media { position: relative; aspect-ratio: 16 / 11; margin: 8px 8px 0; border-radius: calc(var(--radius-xl) - 8px); overflow: hidden; background: var(--ink-800); isolation: isolate; }
.fd-pcard-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1000ms var(--ease-out); }
@media (hover: hover) { .fd-pcard:hover .fd-pcard-media img { transform: scale(1.06); } }
.fd-pcard-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,13,11,0.15) 0%, transparent 35%, rgba(5,13,11,0.82) 100%); }
.fd-pcard-days { position: absolute; z-index: 1; inset-inline-start: 18px; bottom: 14px; display: flex; align-items: baseline; gap: 8px; color: #fff; }
.fd-pcard-days b { font-size: 56px; font-weight: 800; line-height: 0.85; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.fd-pcard-days span { font-family: var(--font-tech); font-weight: 700; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--signal); }
.fd-pcard-style { position: absolute; z-index: 1; top: 12px; inset-inline-start: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: var(--radius-pill);
  font-size: 12.5px; font-weight: 700; color: #fff; background: rgba(5,13,11,0.45); border: 1px solid rgba(255,255,255,0.22); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.fd-pcard-body { display: flex; flex-direction: column; gap: 12px; flex: 1; padding: 20px 22px 22px; }
.fd-pcard-body h3 { margin: 0; font-size: 20px; line-height: 1.2; letter-spacing: -0.02em; color: var(--text-strong); }
.fd-pcard-body > p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--text-body); }
.fd-pcard-foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--divider); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.fd-pcard-next { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 13px; color: var(--text-muted); }
.fd-pcard-next .ic { color: var(--signal); }
.fd-pcard-next time { font-weight: 700; color: var(--text-strong); }
.fd-pcard-go { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--text-strong); transition: color var(--dur) var(--ease-out); }
.fd-pcard-go .ic { transition: transform var(--dur) var(--ease-out); }
[dir="rtl"] .fd-pcard-go .ic { transform: scaleX(-1); }
@media (hover: hover) { .fd-pcard:hover .fd-pcard-go { color: var(--signal); } .fd-pcard:hover .fd-pcard-go .ic { transform: translateX(3px); } [dir="rtl"] .fd-pcard:hover .fd-pcard-go .ic { transform: translateX(-3px) scaleX(-1); } }

/* Comparison table */
.fd-cmp-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-xl); border: 1px solid var(--border); background: var(--surface-card); }
.fd-cmp-wrap:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }
.fd-cmp { width: 100%; min-width: 760px; table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: 14.5px; }
.fd-cmp thead th, .fd-cmp thead td { background: var(--ink-900); padding: 20px 18px; text-align: start; vertical-align: bottom; border-bottom: 1px solid var(--border); }
.fd-cmp thead td { width: 230px; }
.fd-cmp thead th { font-size: 16px; font-weight: 800; line-height: 1.25; letter-spacing: -0.01em; }
.fd-cmp thead th a { color: var(--text-strong); }
@media (hover: hover) { .fd-cmp thead th a:hover { color: var(--signal); } }
.fd-cmp tbody th { position: sticky; inset-inline-start: 0; z-index: 1; padding: 14px 18px; text-align: start; vertical-align: top; white-space: nowrap; background: var(--surface-raised);
  font-family: var(--font-tech); font-weight: 700; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); border-top: 1px solid var(--divider); }
.fd-cmp tbody th .ic { color: var(--signal); margin-inline-end: 8px; }
.fd-cmp td { padding: 14px 18px; vertical-align: top; line-height: 1.55; color: var(--text-body); border-top: 1px solid var(--divider); }
.fd-cmp tbody tr:first-child th, .fd-cmp tbody tr:first-child td { border-top: 0; }
@media (hover: hover) { .fd-cmp tbody tr:hover td { background: var(--surface-sand); } }
.fd-cmp-n { font-size: 24px; font-weight: 800; color: var(--signal); font-variant-numeric: tabular-nums; }
.fd-cmp-hint { display: none; align-items: center; gap: 8px; }

/* Departure calendar */
.fd-cal { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.fd-month { padding: 20px; border-radius: var(--radius-lg); background: var(--surface-card); border: 1px solid var(--border); }
.fd-month-h { display: flex; align-items: baseline; gap: 8px; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--divider); }
.fd-month-m { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: var(--text-strong); }
.fd-month-y { font-family: var(--font-tech); font-weight: 700; font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.fd-month-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.fd-cal-row { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; align-items: start; }
.fd-cal-row.is-closed { opacity: 0.78; }
.fd-cal-d { display: grid; place-items: center; width: 52px; height: 52px; border-radius: var(--radius-md); background: var(--surface-raised); border: 1px solid var(--border-strong);
  font-size: 22px; font-weight: 800; letter-spacing: -0.03em; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.fd-cal-row.is-next .fd-cal-d { background: var(--signal); border-color: var(--signal); color: var(--ink-900); }
.fd-cal-b { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fd-cal-b > a { font-size: 15px; font-weight: 700; line-height: 1.35; color: var(--text-strong); }
@media (hover: hover) { .fd-cal-b > a:hover { color: var(--signal); } }
.fd-cal-meta { font-size: 13px; line-height: 1.5; color: var(--text-muted); }
.fd-cal-meta time { color: var(--text-body); font-weight: 600; }
.fd-cal-b .fd-st { margin-top: 5px; }

@media (max-width: 1100px) {
  .fd-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .fd-summary { padding-top: clamp(48px, 6vw, 72px); }
  .fd-summary-in { position: static; }
  .fd-pcards { grid-template-columns: minmax(0, 1fr); }
  .fd-pcards .fd-pcard { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); }
  .fd-pcards .fd-pcard-media { aspect-ratio: auto; min-height: 260px; margin: 8px; }
  .fd-cal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .fd-dates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fd-inex, .fd-who, .fd-addons { grid-template-columns: minmax(0, 1fr); }
  .fd-steps { grid-template-columns: minmax(0, 1fr); }
  .fd-day-body.has-ph { grid-template-columns: minmax(0, 1fr); }
  .fd-day-ph { aspect-ratio: 16 / 9; }
  .fd-cmp-hint { display: flex; }
}
@media (max-width: 760px) {
  .fd-hero { min-height: 0; }
  .fd-hero .container { padding-top: calc(var(--header-h) + 72px); }
  .fd-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: var(--radius-lg); }
  .fd-fact { padding: 14px 14px 15px; }
  .fd-fact:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .fd-fact dd { font-size: 15px; }
  .fd-ctas .btn { flex: 1 1 auto; white-space: normal; text-align: center; }
  .fd-pcards .fd-pcard { display: flex; }
  .fd-pcards .fd-pcard-media { aspect-ratio: 16 / 11; min-height: 0; margin: 8px 8px 0; }
  .fd-pcards--2 { grid-template-columns: minmax(0, 1fr); }
  .fd-cal { grid-template-columns: minmax(0, 1fr); }
  /* The full route turns vertical: one stop per row, the line runs down. */
  .fd-route:not(.fd-route--mini) { grid-auto-flow: row; grid-auto-columns: auto; padding: 14px 18px; }
  .fd-route:not(.fd-route--mini) > li { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 14px; text-align: start; padding: 8px 0; }
  .fd-route:not(.fd-route--mini) > li::before, .fd-route:not(.fd-route--mini) > li::after { top: 0; bottom: 0; inset-inline: 16px auto; width: 2px; height: auto; }
  .fd-route:not(.fd-route--mini) > li:first-child::before, .fd-route:not(.fd-route--mini) > li:first-child::after { top: 50%; inset-inline-start: 16px; }
  .fd-route:not(.fd-route--mini) > li:last-child::before, .fd-route:not(.fd-route--mini) > li:last-child::after { bottom: 50%; inset-inline-end: auto; }
  .fd-route:not(.fd-route--mini) > li::after { background: linear-gradient(180deg, var(--brand), var(--signal)); transform-origin: top center; }
  .fd-route:not(.fd-route--mini) > .is-flight::before, .fd-route:not(.fd-route--mini) > .is-flight::after { background: repeating-linear-gradient(180deg, var(--gold-500) 0 6px, transparent 6px 12px); }
  .fd-route:not(.fd-route--mini) .fd-node { margin: 8px; }
  .fd-route:not(.fd-route--mini) .fd-stop-k { margin-inline-start: auto; }
  .fd-days::before, .fd-days::after { inset-inline-start: 19px; }
  .fd-day { grid-template-columns: 40px minmax(0, 1fr); gap: 10px; }
  .fd-day-mark { width: 40px; height: 40px; border-radius: 13px; font-size: 15px; margin-top: 10px; }
  .fd-day-d > summary { padding: 16px 52px 16px 16px; }
  .fd-day-tog { top: 16px; inset-inline-end: 12px; }
  .fd-day-body { padding: 16px 16px 18px; }
  .fd-dates { gap: 10px; }
  .fd-date { padding: 16px 14px 14px; }
  .fd-anyday { flex-direction: column; align-items: flex-start; }
}
@media (pointer: coarse) {
  .fd-day-d > summary { min-height: 44px; }
  .fd-sum-mail, .fd-cal-b > a { min-height: 44px; display: flex; align-items: center; }
}

/* Fixed departures — motion (html.fx-on only). */
html.fx-on .fd-hero .fd-hero-tags, html.fx-on .fd-hero .fd-lead, html.fx-on .fd-hero .fd-ctas, html.fx-on .fd-hero .fd-facts { animation: heroIn 800ms var(--ease-out) both; }
html.fx-on .fd-hero h1 { animation: heroRise 800ms var(--ease-out) both; }
html.fx-on .fd-hero .fd-lead { animation-delay: 90ms; }
html.fx-on .fd-hero .fd-ctas { animation-delay: 170ms; }
html.fx-on .fd-hero .fd-facts { animation-delay: 260ms; }
html.fx-on .fd-rv { transition: opacity 650ms var(--ease-out), translate 750ms var(--ease-out); transition-delay: calc(var(--fd-i, 0) * 70ms); }
html.fx-on .fd-rv:not(.fd-in) { opacity: 0; translate: 0 24px; }
html.fx-on .fd-route > li::after { transition: transform 520ms linear; transition-delay: calc(var(--fd-i, 0) * 420ms + 150ms); }
html.fx-on .fd-route:not(.fd-in) > li::after { transform: scaleX(0); }
@media (max-width: 760px) { html.fx-on .fd-route:not(.fd-route--mini):not(.fd-in) > li::after { transform: scaleY(0); } }
html.fx-on .fd-route .fd-node, html.fx-on .fd-route .fd-hop-ic { transition: scale 500ms var(--ease-spring); transition-delay: calc(var(--fd-i, 0) * 420ms); }
html.fx-on .fd-route > li > span:not(.fd-node):not(.fd-hop-ic) { transition: opacity 500ms var(--ease-out), translate 600ms var(--ease-out); transition-delay: calc(var(--fd-i, 0) * 420ms + 120ms); }
html.fx-on .fd-route:not(.fd-in) .fd-node, html.fx-on .fd-route:not(.fd-in) .fd-hop-ic { scale: 0; }
html.fx-on .fd-route:not(.fd-in) > li > span:not(.fd-node):not(.fd-hop-ic) { opacity: 0; translate: 0 8px; }
html.fx-on .fd-days.fd-rail::after { transform: scaleY(var(--fd-p, 0)); transition: transform 120ms linear; }
html.fx-on .fd-day-d[open] .fd-day-body { animation: fdOpen 450ms var(--ease-out) both; }
@keyframes fdOpen { from { opacity: 0; translate: 0 -8px; } to { opacity: 1; translate: 0 0; } }
html.fx-on .fd-pulse::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--signal); animation: fdPulse 2s var(--ease-out) infinite; }
@keyframes fdPulse { from { opacity: 0.9; scale: 0.5; } to { opacity: 0; scale: 1.8; } }
html.fx-on .fd-pcard-media img { scale: 1.08; transition: scale 1200ms var(--ease-out), transform 1000ms var(--ease-out); }
html.fx-on .fd-pcard.fd-in .fd-pcard-media img { scale: 1; }

/* ---------- 100% Pure New Zealand band (home) ---------- */
.pure-nz { padding-top: clamp(24px, 4vw, 56px); padding-bottom: clamp(24px, 4vw, 56px); }
.pure-card { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 64px); align-items: center;
  padding: clamp(28px, 4vw, 56px); border: 1px solid var(--border); border-radius: var(--radius-xl);
  background: radial-gradient(120% 140% at 0% 0%, rgba(184,224,74,0.1), transparent 55%), var(--surface-raised); }
.pure-logo { width: 100%; max-width: 440px; height: auto; justify-self: center; filter: drop-shadow(0 12px 30px rgba(0,0,0,0.45)); }
.pure-copy { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.pure-copy h2 { margin: 0; }
.pure-copy p { margin: 0; max-width: 56ch; }
@media (max-width: 860px) { .pure-card { grid-template-columns: 1fr; } .pure-logo { max-width: 320px; } }
html.fx-on .pure-logo { transition: transform 700ms var(--ease-out); }
@media (hover: hover) { html.fx-on .pure-card:hover .pure-logo { transform: scale(1.03); } }

/* Fixed departures: prices (NZD) */
.fd-price { display: inline-flex; align-items: baseline; gap: 6px; font-variant-numeric: tabular-nums; }
.fd-price-c { font-family: var(--font-tech); font-weight: 700; font-size: 0.78em; letter-spacing: 0.06em; color: var(--text-muted); }
.fd-price-n { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em; color: var(--text-strong); font-size: 1.15em; }
.fd-date-pr { display: flex; align-items: baseline; gap: 8px; font-size: 13.5px; line-height: 1.45; color: var(--text-muted); }
.fd-date-pr .fd-price-n { font-size: 22px; color: var(--signal); }
.fd-sum dd .fd-price-n, .fd-fact dd .fd-price-n { color: var(--signal); }

/* ---------- Representation programme (/representation/, apply, track) ----------
   lib/pages/representation.mjs + static/js/representation.js, ported from explera.jp
   (2026-10-09) and recoloured for the dark theme. Site tokens only; the form controls reuse
   .form-grid/.field, the tables .season-table, the bands .contracting-band/.ctaband. */
.ex-mono { font-family: var(--font-mono); letter-spacing: 0.02em; }
.rep-cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.rep-note { max-width: 820px; margin: 14px 0 0; padding-inline-start: 14px; border-inline-start: 3px solid var(--gold-400);
  font-size: 14px; line-height: 1.6; color: var(--text-muted); }
.rep-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; }
.rep-steps li { background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; }
.rep-steps .n { font-family: var(--font-tech); font-weight: 700; font-size: 12px; letter-spacing: .08em; color: var(--gold-text); }
.rep-steps h3 { margin: 8px 0 6px; font-size: 18px; }
.rep-steps p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--text-body); }
.season-table.rep-ex { min-width: 0; }
.rep-rules { margin: 20px 0 0; padding-inline-start: 1.1em; display: grid; gap: 10px; max-width: 860px; }
.rep-rules li { line-height: 1.6; color: var(--text-body); }
.rep-rules strong { color: var(--text-strong); }
.rep-links { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 8px; font-size: 14px; }
.rep-muted { margin: 0; font-size: 14px; line-height: 1.6; color: var(--text-muted); }
.rep-foot { margin-top: 22px; font-size: 13.5px; color: var(--text-muted); }
.rep-app { max-width: 900px; }
.rep-app [hidden] { display: none !important; }
.rep-app input[type=email], .rep-app input[type=tel], .rep-app input[type=url], .rep-app input[name=code],
.rep-app input[name=reference] { direction: ltr; }
[dir=rtl] .rep-app input[type=email], [dir=rtl] .rep-app input[type=tel], [dir=rtl] .rep-app input[type=url] { text-align: right; }
.rep-card { background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 24px; margin-bottom: 18px; }
.rep-card h2 { margin: 0 0 6px; font-size: 22px; }
.rep-card > p + p { margin-top: 10px; }
.rep-stage .form-grid + .form-grid { margin-top: 0; }
.rep-alert { background: var(--surface-muted); border-inline-start: 3px solid var(--gold-400); padding: 12px 16px; }
.rep-status { display: block; min-height: 1.2em; color: var(--text-muted); }
.rep-status.is-bad { color: var(--danger); font-weight: 600; }
.rep-status-label { margin: 0 0 6px; font-size: 18px; font-weight: 700; color: var(--brand-strong); }
.rep-ref { margin: 4px 0 12px; font-size: 18px; color: var(--text-strong); }
.rep-stepnav { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.rep-stepnav button { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--border-strong);
  background: var(--surface-card); border-radius: var(--radius-pill); padding: 8px 14px;
  font: 600 13.5px var(--font-sans); color: var(--text-body); cursor: pointer; }
.rep-stepnav button span { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--surface-muted); font-family: var(--font-mono); font-size: 12px; }
.rep-stepnav button[aria-current=step] { border-color: var(--signal); color: var(--text-strong); }
.rep-stepnav button[aria-current=step] span { background: var(--signal); color: var(--ink-900); }
.rep-save { min-height: 1.2em; margin: 0 0 12px; font-size: 12.5px; color: var(--text-muted); }
.rep-app fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.rep-app legend { padding: 0; margin-bottom: 6px; }
.rep-app legend h2 { margin: 0; }
.rep-app [aria-invalid=true] { border-color: var(--danger) !important; box-shadow: 0 0 0 2px color-mix(in oklab, var(--danger) 20%, transparent); }
.rep-label { font-size: 14px; font-weight: 700; color: var(--text-strong); }
.rep-label .req { color: var(--brand-strong); margin-inline-start: 3px; }
.rep-checks { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 6px 0; border-radius: var(--radius-sm); }
.rep-checks label, .rep-decl label { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; line-height: 1.5;
  color: var(--text-body); font-weight: 400; }
.rep-checks input, .rep-decl input { margin-top: 3px; width: 18px; height: 18px; flex: 0 0 18px; accent-color: var(--brand); }
.rep-decl { display: grid; gap: 12px; }
.rep-docs { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rep-docs li { display: grid; grid-template-columns: 1fr auto; gap: 6px 14px; align-items: center; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-card); }
.rep-docs li.has-file { border-color: var(--brand-strong); }
.rep-docs li.is-missing { border-color: var(--danger); }
.rep-doc-name { font-weight: 600; font-size: 14.5px; color: var(--text-strong); }
.rep-doc-name .req { color: var(--brand-strong); margin-inline-start: 3px; }
.rep-doc-state { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--text-muted); }
.rep-doc-file { overflow-wrap: anywhere; }
.rep-link { background: none; border: 0; padding: 0; color: var(--text-link); text-decoration: underline; cursor: pointer; font: inherit; }
.rep-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 22px; padding-top: 18px;
  border-top: 1px solid var(--divider); }
.rep-timeline, .rep-plain { margin: 0; padding-inline-start: 1.2em; display: grid; gap: 8px; color: var(--text-body); }
.rep-timeline p { margin: 4px 0 0; font-size: 14px; color: var(--text-muted); }
@media (max-width: 640px) {
  .rep-card { padding: 18px; }
  .rep-docs li { grid-template-columns: 1fr; }
  .rep-docs input[type=file] { max-width: 100%; }
}

/* ---------- Touch targets (coarse pointer) — keep this block LAST ---------- */
@media (pointer: coarse) {
  .skip-link:focus { min-height: 44px; display: inline-flex; align-items: center; padding: 0 16px; }
  .lang-switch > summary { min-height: 44px; padding: 0 14px; }
  .otp-chips a, .xp-more > summary, .fold > summary { min-height: 44px; }
  .rep-stepnav button, .rep-links a, .rep-link { min-height: 44px; }
  .rep-links a { display: inline-flex; align-items: center; }
}