/* =====================================================================
   VIO Shipping design system
   One stylesheet for every page on vioshipping.com.

   Design values (single source of truth)
   Font ........ Manrope 400/500/600/700. Non Latin pages add a Noto
                 fallback for their script (see :lang rules below).
   Brand ....... navy #003F72 (headings, dark surfaces)
                 red  #C43C2C (the only accent: primary actions, labels)
   Spacing ..... 0 2 4 8 12 16 24 32 40 48 64 80 96 px
   Radius ...... Tailwind steps: 4 8 12 16 24 px. Nested shapes with a
                 gap under 32px use inner = outer - gap (only if > 2).
   Type ........ Tailwind scale (see --text-* tokens).
   Motion ...... cubic-bezier(0.22, 1, 0.36, 1); 500ms movement,
                 300ms color/opacity; reveals 700ms.
   Icons ....... Phosphor (assets/phosphor).
   ===================================================================== */

:root {
  /* Brand */
  --navy: #003F72;
  --red: #C43C2C;
  --red-hover: color-mix(in srgb, var(--red) 88%, #000);
  --navy-hover: color-mix(in srgb, var(--navy) 85%, #000);

  /* Cool neutrals, tinted toward navy */
  --ink: #0B2239;
  --text: #3B4A5C;
  --muted: #5B6878;
  --line: #E1E6ED;
  --surface: #F3F5F8;
  --white: #FFFFFF;
  --on-navy: #FFFFFF;
  --on-navy-muted: rgba(255, 255, 255, 0.74);
  --on-navy-line: rgba(255, 255, 255, 0.16);
  --on-navy-fill: rgba(255, 255, 255, 0.08);

  /* Shadows: one light source from above, tinted toward navy */
  --shadow-sm: 0 1px 2px rgba(0, 63, 114, 0.06), 0 1px 1px rgba(0, 63, 114, 0.04);
  --shadow-md: 0 8px 24px rgba(0, 63, 114, 0.10), 0 2px 4px rgba(0, 63, 114, 0.04);
  --shadow-lg: 0 24px 48px rgba(0, 24, 48, 0.32);

  /* Spacing */
  --sp-25: 2px;  --sp-50: 4px;  --sp-75: 8px;  --sp-100: 12px;
  --sp-200: 16px; --sp-300: 24px; --sp-400: 32px; --sp-500: 40px;
  --sp-600: 48px; --sp-700: 64px; --sp-800: 80px; --sp-900: 96px;

  /* Radius */
  --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-2xl: 24px;

  /* Type scale: size / line height */
  --text-xs: 0.75rem;   --lh-xs: 1rem;
  --text-sm: 0.875rem;  --lh-sm: 1.25rem;
  --text-base: 1rem;    --lh-base: 1.5rem;
  --text-lg: 1.125rem;  --lh-lg: 1.75rem;
  --text-xl: 1.25rem;   --lh-xl: 1.75rem;
  --text-2xl: 1.5rem;   --lh-2xl: 2rem;
  --text-3xl: 1.875rem; --lh-3xl: 2.25rem;
  --text-4xl: 2.25rem;  --lh-4xl: 2.5rem;
  --text-5xl: 3rem;     --lh-5xl: 1;
  --text-6xl: 3.75rem;  --lh-6xl: 1;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-move: 500ms;
  --dur-fade: 300ms;
  --dur-reveal: 700ms;

  /* Layering */
  --z-nav: 100;
  --z-panel: 90;
  --z-skip: 110;

  --font: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --container: 1200px;
  --gutter: var(--sp-300);
}

/* Scripts Manrope does not cover fall back to a matching Noto face */
:lang(ko) { --font: 'Manrope', 'Noto Sans KR', system-ui, sans-serif; }
:lang(ja) { --font: 'Manrope', 'Noto Sans JP', system-ui, sans-serif; }
:lang(zh) { --font: 'Manrope', 'Noto Sans SC', system-ui, sans-serif; }
:lang(th) { --font: 'Manrope', 'Noto Sans Thai', system-ui, sans-serif; }
:lang(hi) { --font: 'Manrope', 'Noto Sans Devanagari', system-ui, sans-serif; }
:lang(ar) { --font: 'Noto Kufi Arabic', 'Manrope', system-ui, sans-serif; }

/* ---------------------------------------------------------------------
   Base
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--sp-900);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font);
  font-size: var(--text-base);
  line-height: var(--lh-base);
  font-weight: 400;
  color: var(--text);
  background: var(--white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font);
  color: var(--navy);
  font-weight: 700;
  text-wrap: balance;
}
h3, h4 { font-weight: 600; }
p, li { text-wrap: pretty; }
em, i:not(.ph) { font-style: normal; }
strong, b { font-weight: 600; color: inherit; }

a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
ul { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

:lang(ko) p, :lang(ko) h1, :lang(ko) h2, :lang(ko) h3 { word-break: keep-all; }

.ph { line-height: 1; flex-shrink: 0; }

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Focus: always visible for keyboard users */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
.hero :focus-visible, .country-hero :focus-visible, .tourist-hero :focus-visible,
.expat-hero :focus-visible, .cta-section :focus-visible, .footer :focus-visible, footer :focus-visible {
  outline-color: var(--white);
}

.skip-link {
  position: fixed;
  inset-inline-start: var(--sp-200);
  top: var(--sp-200);
  z-index: var(--z-skip);
  padding: var(--sp-75) var(--sp-100);
  background: var(--navy);
  color: var(--white);
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  font-weight: 600;
  border-radius: var(--r-md);
  transform: translateY(-160%);
  transition: transform var(--dur-move) var(--ease);
}
.skip-link:focus { transform: translateY(0); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------------------------------------------------------------------
   Buttons and links
   --------------------------------------------------------------------- */
.btn-primary, .btn-white, .nav-cta, .btn-whatsapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-75);
  min-height: var(--sp-500);
  padding: var(--sp-75) var(--sp-100);
  border-radius: var(--r-md);
  background: var(--red);
  color: var(--white);
  font-size: var(--text-base);
  line-height: var(--lh-base);
  font-weight: 600;
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
  transition: background-color var(--dur-fade) var(--ease), transform var(--dur-move) var(--ease);
}
.btn-primary:hover, .btn-white:hover, .nav-cta:hover, .btn-whatsapp:hover {
  background: var(--red-hover);
  transform: translateY(-1px);
}
.btn-primary:active, .btn-white:active, .nav-cta:active, .btn-whatsapp:active {
  transform: translateY(1px) scale(0.98);
}
.btn-primary .ph, .btn-white .ph, .nav-cta .ph { font-size: var(--text-xl); }

/* Secondary action: a text link, not a ghost button */
.btn-outline, .text-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-75);
  min-height: var(--sp-500);
  font-size: var(--text-base);
  line-height: var(--lh-base);
  font-weight: 600;
  color: var(--navy);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 32%, transparent);
  text-underline-offset: 6px;
  transition: text-decoration-color var(--dur-fade) var(--ease), color var(--dur-fade) var(--ease);
}
.btn-outline:hover, .text-link:hover { text-decoration-color: currentColor; }
.btn-outline .ph, .text-link .ph {
  font-size: var(--text-lg);
  transition: transform var(--dur-move) var(--ease);
}
.btn-outline:hover .ph, .text-link:hover .ph { transform: translateX(4px); }
[dir="rtl"] .btn-outline:hover .ph, [dir="rtl"] .text-link:hover .ph { transform: translateX(-4px); }

.prose a, .faq-answer a, .content-block a, .section-subtitle a, .center-note a, .note a {
  color: var(--navy);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--navy) 32%, transparent);
  text-underline-offset: 4px;
  transition: text-decoration-color var(--dur-fade) var(--ease);
}
.prose a:hover, .faq-answer a:hover, .content-block a:hover, .section-subtitle a:hover,
.center-note a:hover, .note a:hover { text-decoration-color: var(--navy); }

/* ---------------------------------------------------------------------
   Navigation: a compact bar that floats off the top edge
   --------------------------------------------------------------------- */
.nav {
  position: fixed;
  top: var(--sp-100);
  left: 50%;
  z-index: var(--z-nav);
  width: max-content;
  max-width: calc(100% - var(--sp-400));
  transform: translateX(-50%);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-fade) var(--ease);
}
/* The translucent surface lives on a pseudo element: a backdrop filter on
   .nav itself would trap the fixed mobile panel inside the bar. */
.nav::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  border: 1px solid rgba(0, 63, 114, 0.08);
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  backdrop-filter: saturate(160%) blur(16px);
  transition: background-color var(--dur-fade) var(--ease);
}
.nav.scrolled { box-shadow: var(--shadow-md); }
.nav.scrolled::before { background: rgba(255, 255, 255, 0.96); }

.nav-inner {
  display: flex;
  align-items: center;
  gap: var(--sp-300);
  padding: var(--sp-75) var(--sp-75) var(--sp-75) var(--sp-200);
}
[dir="rtl"] .nav-inner { padding: var(--sp-75) var(--sp-200) var(--sp-75) var(--sp-75); }

.nav-logo { display: flex; align-items: center; min-width: 0; }
.nav-logo img { height: var(--sp-400); width: auto; max-width: 100%; object-fit: contain; object-position: left center; }
.nav-mobile-toggle, .nav-lang { flex-shrink: 0; }

.nav-links { display: flex; align-items: center; gap: var(--sp-50); }
.nav-links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--sp-500);
  padding: var(--sp-75) var(--sp-100);
  border-radius: var(--r-md); /* 16 outer minus 8 gap */
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  transition: background-color var(--dur-fade) var(--ease), color var(--dur-fade) var(--ease);
}
.nav-links a:hover { background: var(--surface); color: var(--navy); }
.nav-links a.active, .nav-links a[aria-current="page"] {
  color: var(--navy);
  font-weight: 600;
  background: rgba(0, 63, 114, 0.06);
}
.nav-links a.nav-cta, .nav-links .nav-cta {
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  font-weight: 600;
  color: var(--white);
  background: var(--red);
  margin-inline-start: var(--sp-75);
}
.nav-links a.nav-cta:hover { background: var(--red-hover); color: var(--white); }

/* Language picker inside the nav */
.nav-lang { position: relative; }
.nav-lang summary {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-50);
  min-height: var(--sp-500);
  padding: var(--sp-75) var(--sp-100);
  border-radius: var(--r-md);
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
  transition: background-color var(--dur-fade) var(--ease);
}
.nav-lang summary::-webkit-details-marker { display: none; }
.nav-lang summary:hover { background: var(--surface); }
.nav-lang summary .ph-caret-down { transition: transform var(--dur-move) var(--ease); }
.nav-lang[open] summary .ph-caret-down { transform: rotate(180deg); }
.nav-lang-list {
  position: absolute;
  top: calc(100% + var(--sp-75));
  inset-inline-end: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(144px, 1fr));
  gap: var(--sp-25);
  padding: var(--sp-75);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
}
.nav-lang-list a {
  display: block;
  padding: var(--sp-75) var(--sp-100);
  border-radius: var(--r-sm); /* 12 outer minus 8 gap */
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  color: var(--text);
  transition: background-color var(--dur-fade) var(--ease);
}
.nav-lang-list a:hover { background: var(--surface); color: var(--navy); }
.nav-lang-list a[aria-current="true"], .nav-lang-list a.active { font-weight: 600; color: var(--navy); background: rgba(0, 63, 114, 0.06); }

/* Language switch for two-language pages: a pill with a sliding navy thumb.
   EN always sits left and VI right, so the thumb moves like a toggle. */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-50);
  flex-shrink: 0;
}
.lang-switch > .ph { font-size: var(--text-xl); color: var(--muted); }
.lang-switch-track {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 3px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
}
.lang-switch-track::before {
  content: "";
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc(50% - 3px);
  border-radius: 999px;
  background: var(--navy);
  box-shadow: var(--shadow-sm);
  transition: transform 220ms var(--ease);
}
.lang-switch-track[data-active="vi"]::before { transform: translateX(100%); }
.lang-switch-track a {
  position: relative; /* above the thumb */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 32px;
  padding: 0 var(--sp-100);
  border-radius: 999px;
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--muted);
  transition: color 220ms var(--ease);
}
.lang-switch-track a:hover { color: var(--navy); }
.lang-switch-track[data-active="en"] a[hreflang="en"],
.lang-switch-track[data-active="vi"] a[hreflang="vi"] { color: var(--white); }
@media (prefers-reduced-motion: reduce) {
  .lang-switch-track::before, .lang-switch-track a { transition: none; }
}

/* Menu toggle: two lines that turn into a cross */
.nav-mobile-toggle {
  display: none;
  position: relative;
  width: var(--sp-500);
  height: var(--sp-500);
  border-radius: var(--r-md);
  transition: background-color var(--dur-fade) var(--ease);
}
.nav-mobile-toggle:hover { background: var(--surface); }
.nav-mobile-toggle .bar {
  position: absolute;
  left: var(--sp-100);
  right: var(--sp-100);
  height: 2px;
  border-radius: 2px;
  background: var(--navy);
  transition: transform var(--dur-move) var(--ease);
}
.nav-mobile-toggle .bar:first-child { transform: translateY(-4px); }
.nav-mobile-toggle .bar:last-child { transform: translateY(4px); }
.nav.is-open .nav-mobile-toggle .bar:first-child { transform: rotate(45deg); }
.nav.is-open .nav-mobile-toggle .bar:last-child { transform: rotate(-45deg); }

@media (max-width: 1080px) {
  .nav {
    left: var(--sp-100);
    right: var(--sp-100);
    width: auto;
    max-width: none;
    transform: none;
  }
  .nav-inner { justify-content: space-between; }
  .nav-mobile-toggle { display: inline-block; }
  .nav-lang, .lang-switch { margin-inline-start: auto; }

  /* Full height panel */
  .nav-links {
    position: fixed;
    inset: 0;
    z-index: -2;
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-50);
    padding: var(--sp-900) var(--sp-300) var(--sp-400);
    background: rgba(255, 255, 255, 0.96);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur-fade) var(--ease), visibility 0s linear var(--dur-fade);
  }
  .nav.is-open { box-shadow: none; }
  .nav.is-open::before { background: transparent; border-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .nav.is-open .nav-links {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--dur-fade) var(--ease), visibility 0s;
  }
  .nav-links li {
    opacity: 0;
    transform: translateY(var(--sp-300));
    transition: opacity var(--dur-move) var(--ease), transform var(--dur-move) var(--ease);
  }
  .nav.is-open .nav-links li {
    opacity: 1;
    transform: none;
    transition-delay: calc(var(--i, 0) * 60ms);
  }
  .nav-links a {
    width: 100%;
    font-size: var(--text-2xl);
    line-height: var(--lh-2xl);
    font-weight: 600;
    padding: var(--sp-100) var(--sp-200);
  }
  .nav-links a.nav-cta { margin: var(--sp-200) 0 0; justify-content: center; font-size: var(--text-base); line-height: var(--lh-base); }
  body.nav-open { overflow: hidden; }
  .nav-inner { gap: var(--sp-75); }
  .nav-lang-list { grid-template-columns: repeat(2, minmax(128px, 1fr)); }
}

/* ---------------------------------------------------------------------
   Hero (all page types share one dark navy surface)
   --------------------------------------------------------------------- */
.hero, .country-hero, .tourist-hero, .expat-hero {
  position: relative;
  isolation: isolate;
  background: var(--navy);
  color: var(--on-navy);
  padding: calc(var(--sp-900) + var(--sp-600)) 0 var(--sp-900);
  overflow: hidden;
}
/* Fine grain instead of a gradient, so the flat navy does not look plastic */
.hero::after, .country-hero::after, .tourist-hero::after, .expat-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.18;
  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='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero-pattern { display: none; }

/* Dotted world map with routes out of Da Nang, low opacity, so the navy
   has depth without a gradient. Da Nang (76.7% across, 56% down the
   artwork) is placed just right of the headline column. */
.hero::before, .country-hero::before, .tourist-hero::before, .expat-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url('/assets/img/hero-map.svg') no-repeat;
  background-size: 1584px auto;
  background-position: calc(50vw - 1135px) 34px;
}
.error-page::before { background-position: calc(50vw - 1215px + 240px) 34px; }
/* right to left pages mirror the columns, so Da Nang sits left of centre */
[dir="rtl"] .tourist-hero::before { background-position: calc(50vw - 1295px) 34px; }

.hero-content, .country-hero-content, .tourist-hero-content, .expat-hero-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
  gap: var(--sp-700);
  align-items: center;
}

.hero h1, .country-hero h1, .tourist-hero h1, .expat-hero h1 {
  max-width: 680px;
  font-size: var(--text-6xl);
  line-height: var(--lh-6xl);
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-bottom: var(--sp-300);
  /* Approved dark theme heading gradient, text only */
  background: linear-gradient(90deg, #FFFFFF 0%, #9B9B9B 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero h1 span, .hero h1 em, .country-hero h1 em, .tourist-hero h1 em, .expat-hero h1 em {
  color: inherit;
  font-style: normal;
}
/* Scripts with stacked marks need a little more air than leading 1 */
:lang(th) .tourist-hero h1, :lang(hi) .tourist-hero h1, :lang(ar) .tourist-hero h1,
:lang(ja) .tourist-hero h1, :lang(zh) .tourist-hero h1, :lang(ko) .tourist-hero h1,
:lang(ru) .tourist-hero h1 {
  font-size: var(--text-5xl);
  line-height: 1.2;
  letter-spacing: 0;
}

.hero-desc, .hero-subtitle {
  max-width: 600px;
  font-size: var(--text-lg);
  line-height: var(--lh-lg);
  color: var(--on-navy-muted);
  margin-bottom: var(--sp-400);
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-75);
  padding: var(--sp-50) var(--sp-100);
  margin-bottom: var(--sp-300);
  border-radius: var(--r-sm);
  background: var(--on-navy-fill);
  border: 1px solid var(--on-navy-line);
  color: var(--on-navy);
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  font-weight: 500;
}
.hero-badge .ph { font-size: var(--text-base); color: var(--on-navy); }
.hero-badge-row { display: flex; flex-wrap: wrap; gap: var(--sp-75); margin-bottom: var(--sp-400); }
.hero-badge-row .hero-badge { margin-bottom: 0; }

.hero-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-300); margin-bottom: var(--sp-600); }
.hero .btn-outline, .hero-buttons .btn-outline { color: var(--on-navy); }

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-75);
  margin-bottom: var(--sp-300);
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  color: var(--on-navy-muted);
}
.breadcrumb a { color: var(--on-navy-muted); transition: color var(--dur-fade) var(--ease); }
.breadcrumb a:hover { color: var(--on-navy); }
.breadcrumb span[aria-hidden="true"], .breadcrumb > span:not([aria-current]) { opacity: 0.6; }
.breadcrumb [aria-current="page"] { color: var(--on-navy); opacity: 1; }

.country-hero .flag {
  font-size: var(--text-5xl);
  line-height: var(--lh-5xl);
  margin-bottom: var(--sp-300);
}

/* Hero facts: plain numbers on hairline dividers, no boxes */
.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-400);
  padding-top: var(--sp-300);
  border-top: 1px solid var(--on-navy-line);
  max-width: 600px;
}
.hero-stat, .hero-stat-box { min-width: 0; }
.hero-stat-number, .hero-stat-box .stat-value {
  font-size: var(--text-3xl);
  line-height: var(--lh-3xl);
  font-weight: 700;
  color: var(--on-navy);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.hero-stat-label, .hero-stat-box .stat-label {
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  color: var(--on-navy-muted);
  margin-top: var(--sp-50);
}

.hero-chat { width: 100%; }
.hero-chat-frame {
  display: block;
  width: 100%;
  height: 560px;
  border: 0;
  border-radius: var(--r-xl);
  background: var(--white);
  box-shadow: var(--shadow-lg);
}

/* ---------------------------------------------------------------------
   Sections
   --------------------------------------------------------------------- */
.section { padding: var(--sp-800) 0 var(--sp-900); }
.section-alt { background: var(--surface); }

.section-header {
  max-width: 680px;
  margin: 0 0 var(--sp-600);
  text-align: start;
}
.section-label {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-75);
  margin-bottom: var(--sp-100);
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  font-weight: 600;
  color: var(--red);
  letter-spacing: 0;
  text-transform: none;
}
.section-title {
  font-size: var(--text-4xl);
  line-height: var(--lh-4xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: var(--sp-200);
}
.section-subtitle {
  font-size: var(--text-lg);
  line-height: var(--lh-lg);
  color: var(--muted);
  max-width: 600px;
}

/* Trust bar under the home hero */
.trust-bar { border-bottom: 1px solid var(--line); background: var(--white); }
/* Five short promises: a short title plus one muted detail, so nothing
   wraps. Desktop: five even columns with hairline dividers. Tablet: a two
   column list. Phone: one item per row. */
.trust-items {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  padding: var(--sp-400) 0;
}
.trust-item {
  display: grid;
  align-content: start;
  gap: var(--sp-25);
  padding-inline: var(--sp-300);
  border-inline-start: 1px solid var(--line);
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
}
.trust-item:first-child { padding-inline-start: 0; border-inline-start: 0; }
.trust-item:last-child { padding-inline-end: 0; }
.trust-item .ph { font-size: var(--text-2xl); color: var(--navy); margin-bottom: var(--sp-75); }
.trust-title { font-weight: 600; color: var(--navy); white-space: nowrap; }
.trust-detail { color: var(--muted); white-space: nowrap; }

@media (max-width: 1023px) {
  .trust-items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, auto);
    grid-auto-flow: column;
    gap: var(--sp-200) var(--sp-600);
    padding: var(--sp-300) 0;
  }
  .trust-item,
  .trust-item:first-child,
  .trust-item:last-child {
    grid-template-columns: var(--sp-300) auto minmax(0, 1fr);
    align-items: center;
    column-gap: var(--sp-100);
    padding: 0;
    border: 0;
  }
  .trust-item .ph { font-size: var(--text-xl); margin-bottom: 0; }
}

@media (max-width: 639px) {
  .trust-items { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; gap: var(--sp-100); }
  .trust-detail { white-space: normal; }
}

/* Services: asymmetric 7/5 then 5/7 */
.services-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--sp-300);
  align-items: start;
}
.service-card {
  grid-column: span 6;
  padding: var(--sp-400);
  border-radius: var(--r-xl);
  background: var(--surface);
  transition: transform var(--dur-move) var(--ease);
}
.services-grid .service-card:nth-child(1), .services-grid .service-card:nth-child(4) { grid-column: span 7; }
.services-grid .service-card:nth-child(2), .services-grid .service-card:nth-child(3) { grid-column: span 5; }
.services-grid .service-card:nth-child(1) { background: var(--navy); color: var(--on-navy-muted); }
.services-grid .service-card:nth-child(1) .service-name { color: var(--on-navy); }
.services-grid .service-card:nth-child(1) .service-time { color: var(--on-navy); }
.services-grid .service-card:nth-child(1) .service-features li { color: var(--on-navy-muted); }
.services-grid .service-card:nth-child(1) .service-features .ph { color: var(--on-navy); }
.services-grid .service-card:nth-child(1) .service-icon { background: var(--red); }
.services-grid .service-card:nth-child(1) .service-ideal { background: var(--on-navy-fill); color: var(--on-navy-muted); }
.services-grid .service-card:nth-child(1) .service-ideal strong { color: var(--on-navy); }
.service-icon {
  display: grid;
  place-items: center;
  width: var(--sp-600);
  height: var(--sp-600);
  margin-bottom: var(--sp-300);
  border-radius: var(--r-lg);
  background: var(--navy);
  color: var(--white);
}
.service-icon .ph { font-size: var(--text-2xl); }
.service-name { font-size: var(--text-2xl); line-height: var(--lh-2xl); font-weight: 700; margin-bottom: var(--sp-50); }
.service-time { font-size: var(--text-sm); line-height: var(--lh-sm); font-weight: 600; color: var(--red); margin-bottom: var(--sp-200); }
.service-desc { max-width: 65ch; margin-bottom: var(--sp-300); }
.service-features { display: grid; gap: var(--sp-75); margin-bottom: var(--sp-300); }
.service-features li { position: relative; padding-inline-start: var(--sp-300); font-size: var(--text-sm); line-height: var(--lh-sm); }
.service-features .ph { position: absolute; inset-inline-start: 0; top: var(--sp-25); font-size: var(--text-base); color: var(--navy); }
.service-ideal {
  padding: var(--sp-200);
  border-radius: var(--r-md);
  background: var(--white);
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  color: var(--muted);
}
.service-ideal strong { color: var(--navy); }
.service-card .text-link { margin-top: var(--sp-200); font-size: var(--text-sm); line-height: var(--lh-sm); }

/* How it works: header beside a vertical timeline */
.how-section .container, .split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--sp-700);
  align-items: start;
}
.how-section .section-header { position: sticky; top: var(--sp-900); margin-bottom: 0; }
.steps-grid { display: grid; gap: var(--sp-300); counter-reset: step; }
.step, .step-card {
  position: relative;
  display: grid;
  grid-template-columns: var(--sp-600) minmax(0, 1fr);
  column-gap: var(--sp-300);
  row-gap: var(--sp-50);
  padding-bottom: var(--sp-300);
  border-bottom: 1px solid var(--line);
}
.step:last-child, .step-card:last-child { border-bottom: 0; padding-bottom: 0; }
.step-number, .step-icon {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: var(--sp-600);
  height: var(--sp-600);
  border-radius: var(--r-lg);
  background: var(--white);
  border: 1px solid var(--line);
  color: var(--navy);
  font-size: var(--text-2xl);
}
.step-number .ph, .step-icon .ph { font-size: var(--text-2xl); }
.step h3, .step h4, .step-card h3 { font-size: var(--text-xl); line-height: var(--lh-xl); font-weight: 600; }
.step p, .step-card p { color: var(--muted); max-width: 60ch; }
.step-num {
  position: absolute;
  top: calc(var(--sp-75) * -1);
  inset-inline-start: calc(var(--sp-500) - var(--sp-50));
  display: grid;
  place-items: center;
  min-width: var(--sp-300);
  height: var(--sp-300);
  padding-inline: var(--sp-50);
  border-radius: var(--r-sm);
  background: var(--red);
  color: var(--white);
  font-size: var(--text-xs);
  line-height: var(--lh-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.step-card .step-num + .step-icon { grid-row: 1 / span 2; }

/* Story section with real photos */
.logistics-section { background: var(--white); }
.logistics-content {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: var(--sp-700);
  align-items: center;
}
.logistics-text h2 {
  font-size: var(--text-4xl);
  line-height: var(--lh-4xl);
  letter-spacing: -0.02em;
  margin-bottom: var(--sp-300);
}
.logistics-text > p { font-size: var(--text-lg); line-height: var(--lh-lg); max-width: 60ch; margin-bottom: var(--sp-400); }
.logistics-features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-200) var(--sp-300); }
.logistics-feature { position: relative; padding-inline-start: var(--sp-400); font-size: var(--text-sm); line-height: var(--lh-sm); color: var(--text); }
.logistics-feature .ph { position: absolute; inset-inline-start: 0; top: 0; font-size: var(--text-xl); color: var(--navy); }
.logistics-images {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: auto auto;
  gap: var(--sp-200);
}
.logistics-images img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-xl); }
.logistics-images img:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.logistics-images img:nth-child(2) { grid-column: span 3; aspect-ratio: 4 / 3; margin-top: calc(var(--sp-700) * -1); margin-inline-start: var(--sp-300); box-shadow: 0 0 0 var(--sp-75) var(--white); }
.logistics-images img:nth-child(3) { grid-column: span 2; aspect-ratio: 3 / 4; }

/* Destination lists (home, tourist and related countries) */
.destinations-grid, .dest-grid, .related-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--sp-600);
  border-top: 1px solid var(--line);
}
.dest-card, .related-card {
  display: grid;
  grid-template-columns: var(--sp-500) minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--sp-200);
  padding: var(--sp-200) var(--sp-75);
  border-bottom: 1px solid var(--line);
  color: var(--text);
  transition: background-color var(--dur-fade) var(--ease);
}
.dest-card::after, .related-card::after {
  content: '\2192';
  grid-column: 3;
  grid-row: 1 / span 2;
  color: var(--navy);
  font-weight: 600;
  transition: transform var(--dur-move) var(--ease);
}
[dir="rtl"] .dest-card::after, [dir="rtl"] .related-card::after { content: '\2190'; }
.dest-card:hover, .related-card:hover { background: var(--surface); }
.dest-card:hover::after, .related-card:hover::after { transform: translateX(4px); }
[dir="rtl"] .dest-card:hover::after, [dir="rtl"] .related-card:hover::after { transform: translateX(-4px); }
.dest-flag, .related-card .flag { grid-row: 1 / span 2; font-size: var(--text-3xl); line-height: var(--lh-3xl); }
.related-card > div { grid-column: 2; grid-row: 1 / span 2; }
.dest-name, .related-card .name { grid-column: 2; font-weight: 600; color: var(--navy); }
.dest-from, .dest-time, .related-card .time {
  grid-column: 2;
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.dest-card[aria-disabled="true"] { pointer-events: none; }
.dest-card[aria-disabled="true"]::after { content: ''; }

/* FAQ: plain question and answer list beside the header */
.faq-section .container, #faq > .container {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: var(--sp-700);
  align-items: start;
}
#faq .section-header { position: sticky; top: var(--sp-900); margin-bottom: 0; }
.faq-list { display: grid; border-top: 1px solid var(--line); }
.faq-item { padding: var(--sp-300) 0; border-bottom: 1px solid var(--line); }
.faq-question {
  display: block;
  margin-bottom: var(--sp-75);
  font-size: var(--text-lg);
  line-height: var(--lh-lg);
  font-weight: 600;
  color: var(--navy);
  text-align: start;
}
.faq-answer, .faq-answer p { color: var(--text); max-width: 65ch; }
.faq-answer p + p { margin-top: var(--sp-100); }

/* Tagline reveal: words light up one at a time as the section scrolls in */
.tagline-section { padding: var(--sp-900) 0; background: var(--white); }
.tagline {
  max-width: 880px;
  font-size: var(--text-5xl);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--navy);
  text-wrap: balance;
}
.tagline .w {
  color: color-mix(in srgb, var(--navy) 28%, transparent);
  transition: color 600ms var(--ease);
}
.tagline .w.on { color: var(--navy); }
.tagline .w.accent.on { color: var(--red); }

/* Closing call to action: same action as the hero */
.cta-section {
  background: var(--navy);
  color: var(--on-navy);
  padding: var(--sp-800) 0 var(--sp-900);
  text-align: start;
}
.cta-section .container { display: grid; gap: var(--sp-200); justify-items: start; }
.cta-section h2 {
  max-width: 680px;
  font-size: var(--text-4xl);
  line-height: var(--lh-4xl);
  letter-spacing: -0.02em;
  color: var(--on-navy);
}
.cta-section p { max-width: 600px; font-size: var(--text-lg); line-height: var(--lh-lg); color: var(--on-navy-muted); }
.cta-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-300); margin-top: var(--sp-200); }
.cta-section .btn-white { margin-top: var(--sp-200); }
.cta-buttons .btn-white { margin-top: 0; }
.cta-section .text-link { color: var(--on-navy); }

/* ---------------------------------------------------------------------
   Country pages
   --------------------------------------------------------------------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-xl); }
.comparison-table { width: 100%; min-width: 720px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.comparison-table th, .comparison-table td {
  padding: var(--sp-200) var(--sp-300);
  text-align: start;
  vertical-align: top;
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  border-bottom: 1px solid var(--line);
}
.comparison-table thead th { background: var(--surface); color: var(--navy); font-weight: 600; }
.comparison-table tbody tr:last-child td { border-bottom: 0; }
.comparison-table tbody tr { transition: background-color var(--dur-fade) var(--ease); }
.comparison-table tbody tr:hover { background: color-mix(in srgb, var(--surface) 60%, transparent); }
.comparison-table td:first-child { font-weight: 600; color: var(--navy); white-space: nowrap; }
.table-badge, .badge-fast {
  display: inline-block;
  padding: var(--sp-25) var(--sp-75);
  border-radius: var(--r-sm);
  font-size: var(--text-xs);
  line-height: var(--lh-xs);
  font-weight: 700;
  color: var(--navy);
  background: var(--white);
  border: 1px solid var(--line);
}
.badge-express, .badge-fast { color: var(--white); background: var(--red); border-color: var(--red); }

.info-grid, .info-grid-2 { columns: 2; column-gap: var(--sp-300); }
.info-card, .info-card-2 {
  break-inside: avoid;
  margin-bottom: var(--sp-300);
  padding: var(--sp-400);
  border-radius: var(--r-xl);
  background: var(--white);
}
.section:not(.section-alt) .info-card, .section:not(.section-alt) .info-card-2 { background: var(--surface); }
.info-card h3, .info-card-2 h3, .info-card-ko h3 {
  display: flex;
  align-items: center;
  gap: var(--sp-100);
  margin-bottom: var(--sp-200);
  font-size: var(--text-xl);
  line-height: var(--lh-xl);
}
.info-card h3 .ph, .info-card-2 h3 .ph, .info-card-ko h3 .ph { font-size: var(--text-2xl); color: var(--navy); }
.info-card ul, .info-card-2 ul, .info-card-ko ul { display: grid; gap: var(--sp-75); }
.info-card li, .info-card-2 li, .info-card-ko li { position: relative; padding-inline-start: var(--sp-300); font-size: var(--text-sm); line-height: var(--lh-sm); }
.info-card li .ph, .info-card-2 li .ph, .info-card-ko li .ph { position: absolute; inset-inline-start: 0; top: var(--sp-25); font-size: var(--text-base); }
.ph.green { color: var(--navy) !important; }
.ph.red { color: var(--red) !important; }
.ph.amber { color: var(--muted) !important; }
.customs-alert, .note {
  display: grid;
  gap: var(--sp-50);
  margin-top: var(--sp-300);
  padding: var(--sp-200) var(--sp-300);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--white);
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
}
.customs-alert h4 { display: flex; align-items: center; gap: var(--sp-75); font-size: var(--text-base); line-height: var(--lh-base); color: var(--navy); }
.customs-alert h4 .ph { color: var(--red); }
.note { grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--sp-100); }
.note .ph { color: var(--red); font-size: var(--text-xl); }
.note strong { color: var(--navy); }

.content-block, .prose { max-width: 720px; }
.content-block h2 {
  font-size: var(--text-3xl);
  line-height: var(--lh-3xl);
  letter-spacing: -0.01em;
  margin-bottom: var(--sp-300);
}
.content-block h3 { font-size: var(--text-xl); line-height: var(--lh-xl); margin: var(--sp-400) 0 var(--sp-100); }
.content-block p { margin-bottom: var(--sp-200); max-width: 65ch; }
.content-block ul { display: grid; gap: var(--sp-75); margin-bottom: var(--sp-200); }
.content-block li { display: flex; gap: var(--sp-75); }
.content-block li::before { content: ''; width: 6px; height: 6px; margin-top: 9px; border-radius: 2px; background: var(--red); flex-shrink: 0; }

.center-note { margin-top: var(--sp-300); font-size: var(--text-sm); line-height: var(--lh-sm); color: var(--muted); }

/* ---------------------------------------------------------------------
   Tourist and expat pages
   --------------------------------------------------------------------- */
.pickup-box {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-300);
  padding: var(--sp-500);
  border-radius: var(--r-2xl);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}
.pickup-box:not(:has(.pickup-icon)) { grid-template-columns: minmax(0, 1fr); }
.pickup-icon {
  display: grid; place-items: center;
  width: var(--sp-700); height: var(--sp-700);
  border-radius: var(--r-xl);
  background: var(--navy); color: var(--white);
}
.pickup-icon .ph { font-size: var(--text-3xl); }
.pickup-box h3 { font-size: var(--text-2xl); line-height: var(--lh-2xl); margin-bottom: var(--sp-100); }
.pickup-box > div > p, .pickup-box > p { color: var(--muted); max-width: 65ch; margin-bottom: var(--sp-300); }
.pickup-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-200) var(--sp-300); }
.pickup-step, .pickup-detail { position: relative; padding-inline-start: var(--sp-400); font-size: var(--text-sm); line-height: var(--lh-sm); color: var(--text); }
.pickup-detail + .pickup-detail { margin-top: var(--sp-100); }
.pickup-step .ph, .pickup-detail .ph { position: absolute; inset-inline-start: 0; top: 0; font-size: var(--text-xl); color: var(--navy); }
.pickup-step a, .pickup-detail a { color: var(--navy); font-weight: 600; }

/* Shipped items: two column list with icons, variable heights */
.souvenir-grid, .usecases-grid, .benefits-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--sp-600);
  border-top: 1px solid var(--line);
}
.souvenir-card, .usecase-card, .benefit-card {
  display: grid;
  grid-template-columns: var(--sp-600) minmax(0, 1fr);
  column-gap: var(--sp-200);
  row-gap: var(--sp-50);
  padding: var(--sp-300) 0;
  border-bottom: 1px solid var(--line);
}
.souvenir-emoji, .usecase-emoji, .benefit-icon {
  grid-row: span 2;
  display: grid; place-items: center;
  width: var(--sp-600); height: var(--sp-600);
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--navy);
}
.section-alt .souvenir-emoji, .section-alt .usecase-emoji, .section-alt .benefit-icon { background: var(--white); }
.souvenir-emoji .ph, .usecase-emoji .ph, .benefit-icon .ph { font-size: var(--text-2xl); }
.souvenir-card h3, .souvenir-card h4, .usecase-card h3, .usecase-card h4, .benefit-card h3 { font-size: var(--text-lg); line-height: var(--lh-lg); font-weight: 600; }
.souvenir-card p, .usecase-card p, .benefit-card p { font-size: var(--text-sm); line-height: var(--lh-sm); color: var(--muted); }

.info-grid-ko { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-300); align-items: start; }
.info-card-ko { padding: var(--sp-400); border-radius: var(--r-xl); background: var(--surface); }
.info-card-ko p { font-size: var(--text-sm); line-height: var(--lh-sm); color: var(--muted); margin-top: var(--sp-200); }

.community-box {
  display: grid;
  gap: var(--sp-200);
  justify-items: start;
  padding: var(--sp-500);
  border-radius: var(--r-2xl);
  background: var(--navy);
  color: var(--on-navy-muted);
}
.community-box h3 { color: var(--on-navy); font-size: var(--text-2xl); line-height: var(--lh-2xl); }
.community-box p { max-width: 65ch; }
.community-tag-list { display: flex; flex-wrap: wrap; gap: var(--sp-75); }
.community-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-300); }
.community-box .text-link { color: var(--on-navy); }
.community-tag {
  padding: var(--sp-50) var(--sp-100);
  border-radius: var(--r-sm);
  background: var(--on-navy-fill);
  border: 1px solid var(--on-navy-line);
  color: var(--on-navy);
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
}

/* ---------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------- */
.footer, body > footer {
  background: var(--navy);
  color: var(--on-navy-muted);
  padding: var(--sp-700) 0 var(--sp-400);
  border-top: 1px solid var(--on-navy-line);
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 2fr));
  gap: var(--sp-500);
  margin-bottom: var(--sp-600);
}
.footer-brand img, footer .nav-logo img { height: var(--sp-400); width: auto; }
.footer-brand p { margin-top: var(--sp-200); max-width: 40ch; }
.footer h3, .footer h4, body > footer h3, body > footer h4 { color: var(--on-navy); font-size: var(--text-sm); line-height: var(--lh-sm); font-weight: 600; margin-bottom: var(--sp-200); }
.footer-links { display: grid; gap: var(--sp-100); }
.footer a, body > footer a { color: var(--on-navy-muted); transition: color var(--dur-fade) var(--ease); }
.footer a:hover, body > footer a:hover { color: var(--on-navy); }
.footer-contact li { position: relative; padding-inline-start: var(--sp-300); }
.footer-contact .ph { position: absolute; inset-inline-start: 0; top: var(--sp-25); font-size: var(--text-base); color: var(--on-navy); }
.footer-bottom {
  padding-top: var(--sp-300);
  border-top: 1px solid var(--on-navy-line);
  font-size: var(--text-xs);
  line-height: var(--lh-xs);
}
.footer-bottom a { text-decoration: underline; text-underline-offset: 3px; }
.footer-partners { margin-bottom: var(--sp-100); }
.footer-legal { display: flex; flex-wrap: wrap; gap: var(--sp-100) var(--sp-300); justify-content: space-between; }
body > footer .brand { color: var(--on-navy); font-size: var(--text-xl); line-height: var(--lh-xl); font-weight: 700; margin-bottom: var(--sp-100); }
body > footer p + p { margin-top: var(--sp-200); }

/* ---------------------------------------------------------------------
   Error page
   --------------------------------------------------------------------- */
.error-page { min-height: 100dvh; display: grid; align-items: center; }
.error-page .hero-content { grid-template-columns: minmax(0, 1fr); }
.error-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--sp-400); max-width: 600px; margin-top: var(--sp-400); border-top: 1px solid var(--on-navy-line); }
.error-links a { display: flex; justify-content: space-between; padding: var(--sp-200) 0; border-bottom: 1px solid var(--on-navy-line); color: var(--on-navy); font-weight: 600; }
.error-links a:hover { color: var(--on-navy-muted); }

/* ---------------------------------------------------------------------
   Hero entrance: copy and chat rise in one after another on load
   --------------------------------------------------------------------- */
@keyframes rise-in {
  from { opacity: 0; transform: translateY(var(--sp-300)); }
  to { opacity: 1; transform: none; }
}
.js :is(.hero-text, .country-hero-text, .tourist-hero-text, .expat-hero-text) > * {
  animation: rise-in var(--dur-reveal) var(--ease) both;
}
.js :is(.hero-text, .country-hero-text, .tourist-hero-text, .expat-hero-text) > :nth-child(2) { animation-delay: 80ms; }
.js :is(.hero-text, .country-hero-text, .tourist-hero-text, .expat-hero-text) > :nth-child(3) { animation-delay: 160ms; }
.js :is(.hero-text, .country-hero-text, .tourist-hero-text, .expat-hero-text) > :nth-child(4) { animation-delay: 240ms; }
.js :is(.hero-text, .country-hero-text, .tourist-hero-text, .expat-hero-text) > :nth-child(5) { animation-delay: 320ms; }
.js :is(.hero-text, .country-hero-text, .tourist-hero-text, .expat-hero-text) > :nth-child(n+6) { animation-delay: 400ms; }
.js :is(.hero-chat, .hero-content > .hero-chat-frame, .country-hero-content > .hero-chat-frame,
  .tourist-hero-content > .hero-chat-frame, .expat-hero-content > .hero-chat-frame, .tourist-hero-content > div:has(> .hero-chat-frame)) {
  animation: rise-in 900ms var(--ease) 300ms both;
}

/* ---------------------------------------------------------------------
   Route: a parcel is loaded in Vietnam, flown along the arc and
   delivered at a destination that changes every loop.
   Only transform and opacity move; the arc comes from two axes
   (linear X, eased Y) so no layout property is animated.
   --------------------------------------------------------------------- */
.route {
  --route-h: 120px;
  --rise: 60px;          /* half the strip: apex of the quadratic path */
  --tilt: 13deg;         /* tangent angle at take off for this aspect */
  --cycle: 7s;
  position: relative;
  height: var(--route-h);
  margin-top: var(--sp-600);
  color: var(--on-navy);
  pointer-events: none;
  user-select: none;
}
.route-line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.route-line path {
  fill: none;
  stroke: rgba(255, 255, 255, 0.36);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 1 9;
}
/* every marker is centred on a point of the path */
.route-at { position: absolute; top: calc(104 / 120 * 100%); width: 0; height: 0; }
.route-at.from { left: 4%; }
.route-at.to { left: 96%; }
.route-at > * { position: absolute; left: 0; top: 0; }

.route-pin { display: grid; gap: var(--sp-50); }
/* labels grow inward so long city names never cross the screen edge */
.route-at.from .route-pin { justify-items: start; transform: translate(-12px, -24px); }
.route-at.to .route-pin { justify-items: end; transform: translate(calc(-100% + 12px), -24px); }
.route-pin .ph { font-size: var(--text-2xl); }
.route-pin span {
  margin-top: var(--sp-75);
  font-size: var(--text-xs);
  line-height: var(--lh-xs);
  font-weight: 600;
  color: var(--on-navy-muted);
  white-space: nowrap;
}
.route-at.to .route-city { animation: route-city var(--cycle) var(--ease) infinite; }

.route-parcel {
  display: grid;
  place-items: center;
  width: var(--sp-400);
  height: var(--sp-400);
  margin: calc(var(--sp-400) / -2) 0 0 calc(var(--sp-400) / -2);
  border-radius: var(--r-md);
  background: var(--red);
  color: var(--white);
  box-shadow: 0 8px 16px rgba(0, 24, 48, 0.32);
}
.route-parcel .ph { font-size: var(--text-xl); }
.route-at.from .route-parcel { top: -40px; animation: route-load var(--cycle) var(--ease) infinite; }
.route-at.to .route-parcel { top: -40px; animation: route-drop var(--cycle) var(--ease) infinite; }
.route-check {
  position: absolute;
  top: -8px;
  right: -8px;
  display: grid;
  place-items: center;
  width: var(--sp-300);
  height: var(--sp-300);
  border-radius: 999px;
  background: var(--white);
  color: var(--navy);
  animation: route-check var(--cycle) var(--ease) infinite;
}
.route-check .ph { font-size: var(--text-base); }

.route-plane {
  position: absolute;
  top: calc(104 / 120 * 100%);
  left: 4%;
  right: 4%;
  height: 0;
  animation: route-x var(--cycle) linear infinite;
}
.route-plane-arc { position: absolute; left: 0; top: 0; animation: route-y var(--cycle) infinite; }
.route-plane-arc .ph {
  display: block;
  font-size: var(--text-3xl);
  margin: calc(var(--text-3xl) / -2) 0 0 calc(var(--text-3xl) / -2);
  animation: route-tilt var(--cycle) linear infinite;
  filter: drop-shadow(0 6px 8px rgba(0, 24, 48, 0.4));
}

@keyframes route-x {
  0%, 14% { transform: translateX(0); }
  78%, 100% { transform: translateX(100%); }
}
/* quadratic ease out to the apex, quadratic ease in back down: a parabola */
@keyframes route-y {
  0%, 14% { transform: translateY(0); animation-timing-function: cubic-bezier(0.333, 0.667, 0.667, 1); }
  46% { transform: translateY(calc(var(--rise) * -1)); animation-timing-function: cubic-bezier(0.333, 0, 0.667, 0.333); }
  78%, 100% { transform: translateY(0); }
}
@keyframes route-tilt {
  0%, 10% { opacity: 0; transform: rotate(calc(90deg - var(--tilt))) scale(0.7); }
  14% { opacity: 1; transform: rotate(calc(90deg - var(--tilt))) scale(1); }
  78% { opacity: 1; transform: rotate(calc(90deg + var(--tilt))) scale(1); }
  84%, 100% { opacity: 0; transform: rotate(calc(90deg + var(--tilt))) scale(0.7); }
}
@keyframes route-load {
  0% { opacity: 0; transform: translateY(var(--sp-75)) scale(0.6); }
  6%, 9% { opacity: 1; transform: none; }
  14%, 100% { opacity: 0; transform: translateY(calc(var(--sp-200) * -1)) scale(0.7); }
}
@keyframes route-drop {
  0%, 80% { opacity: 0; transform: translateY(calc(var(--sp-200) * -1)) scale(0.7); }
  86%, 94% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: none; }
}
@keyframes route-check {
  0%, 85% { opacity: 0; transform: scale(0.4); }
  90%, 95% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}
@keyframes route-city {
  0% { opacity: 0; }
  6%, 94% { opacity: 1; }
  100% { opacity: 0; }
}
.route.is-paused * { animation-play-state: paused !important; }

/* ---------------------------------------------------------------------
   Groups whose children arrive one after another
   --------------------------------------------------------------------- */
.js [data-stagger] > * {
  opacity: 0;
  transform: translateY(var(--sp-300));
  transition: opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease), background-color var(--dur-fade) var(--ease);
  transition-delay: var(--stagger, 0ms);
}
.js [data-stagger].visible > * { opacity: 1; transform: none; }

/* Steps: the timeline fills and a parcel travels to the step in view */
[data-steps] { position: relative; }
.steps-track {
  position: absolute;
  width: 2px;
  border-radius: 2px;
  background: var(--line);
  pointer-events: none;
}
.steps-fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--navy);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--dur-move) var(--ease);
}
.steps-parcel {
  position: absolute;
  left: 50%;
  top: 0;
  display: grid;
  place-items: center;
  width: var(--sp-300);
  height: var(--sp-300);
  margin: calc(var(--sp-300) / -2) 0 0 calc(var(--sp-300) / -2);
  border-radius: var(--r-sm);
  background: var(--red);
  color: var(--white);
  box-shadow: var(--shadow-md);
  z-index: 2;
  transition: transform var(--dur-move) var(--ease), opacity var(--dur-fade) var(--ease);
}
.steps-parcel .ph { font-size: var(--text-sm); }
[data-steps] :is(.step-number, .step-icon) {
  position: relative;
  z-index: 1;
  transition: background-color var(--dur-fade) var(--ease), color var(--dur-fade) var(--ease), border-color var(--dur-fade) var(--ease);
}
[data-steps] .is-active :is(.step-number, .step-icon) { background: var(--navy); border-color: var(--navy); color: var(--white); }

/* Count up numbers keep their final value for assistive tech */
.count-visual { font-variant-numeric: tabular-nums; }

/* Micro interactions */
.dest-flag, .related-card .flag { transition: transform var(--dur-move) var(--ease); }
.dest-card:hover .dest-flag, .related-card:hover .flag { transform: scale(1.12) rotate(-4deg); }
.btn-primary .ph-chat-circle-dots, .btn-white .ph-chat-circle-dots { transition: transform var(--dur-move) var(--ease); }
.btn-primary:hover .ph-chat-circle-dots, .btn-white:hover .ph-chat-circle-dots { transform: rotate(-10deg) scale(1.08); }

/* Photos drift a little against each other while the story scrolls by */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .logistics-images img:nth-child(2) { animation: drift-up linear both; animation-timeline: view(); }
    .logistics-images img:nth-child(3) { animation: drift-down linear both; animation-timeline: view(); }
  }
}
@keyframes drift-up { from { transform: translateY(var(--sp-300)); } to { transform: translateY(calc(var(--sp-300) * -1)); } }
@keyframes drift-down { from { transform: translateY(calc(var(--sp-300) * -1)); } to { transform: translateY(var(--sp-300)); } }

/* ---------------------------------------------------------------------
   Scroll reveal: rise 32px and fade in once (only when JS is running)
   --------------------------------------------------------------------- */
.js .fade-up {
  opacity: 0;
  transform: translateY(var(--sp-400));
  transition: opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease);
}
.js .fade-up.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .fade-up { transform: none; transition: opacity var(--dur-fade) linear; }
  .nav-links li { transform: none !important; }
  .tagline .w { transition: none; }
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
  .js .fade-up { transition-duration: var(--dur-fade) !important; }
  .js [data-stagger] > * { transform: none; }
  .js :is(.hero-text, .country-hero-text, .tourist-hero-text, .expat-hero-text) > *,
  .js :is(.hero-chat, .hero-content > .hero-chat-frame, .country-hero-content > .hero-chat-frame,
    .tourist-hero-content > .hero-chat-frame, .expat-hero-content > .hero-chat-frame) { animation: none; }
  /* Route holds a still frame: plane at the apex, parcel delivered */
  .route *, .route-at.to .route-city { animation: none !important; }
  .route-plane { transform: translateX(50%); }
  .route-plane-arc { transform: translateY(calc(var(--rise) * -1)); }
  .route-plane-arc .ph { transform: rotate(90deg); }
  .route-at.from .route-parcel { opacity: 0; }
}

/* ---------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .hero-content, .country-hero-content, .tourist-hero-content, .expat-hero-content { grid-template-columns: minmax(0, 1fr); gap: var(--sp-600); }
  .hero-chat-frame { height: min(640px, calc(100dvh - var(--sp-900))); min-height: 480px; }
  .logistics-content { grid-template-columns: minmax(0, 1fr); }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .route { --route-h: 96px; --rise: 48px; --tilt: 22deg; --cycle: 6s; margin-top: var(--sp-500); }
  .hero::before, .country-hero::before, .tourist-hero::before, .expat-hero::before {
    background-size: 860px auto;
    background-position: calc(50vw - 550px) 64px;
  }
}

@media (max-width: 480px) {
  .route { --route-h: 80px; --rise: 40px; --tilt: 26deg; }
  .route-plane-arc .ph { font-size: var(--text-2xl); margin: calc(var(--text-2xl) / -2) 0 0 calc(var(--text-2xl) / -2); }
  .nav-logo img { height: var(--sp-300); }
  .nav-lang summary span, .lang-switch > .ph { display: none; }
}

@media (max-width: 860px) {
  :root { --gutter: var(--sp-200); }
  .hero, .country-hero, .tourist-hero, .expat-hero { padding: calc(var(--sp-900) + var(--sp-200)) 0 var(--sp-700); }
  .hero h1, .country-hero h1, .tourist-hero h1, .expat-hero h1 { font-size: var(--text-4xl); line-height: var(--lh-4xl); }
  :lang(th) .tourist-hero h1, :lang(hi) .tourist-hero h1, :lang(ar) .tourist-hero h1,
  :lang(ja) .tourist-hero h1, :lang(zh) .tourist-hero h1, :lang(ko) .tourist-hero h1,
  :lang(ru) .tourist-hero h1 { font-size: var(--text-3xl); line-height: 1.3; }
  .section { padding: var(--sp-700) 0 var(--sp-800); }
  .section-title, .logistics-text h2, .cta-section h2 { font-size: var(--text-3xl); line-height: var(--lh-3xl); }
  .tagline { font-size: var(--text-3xl); line-height: var(--lh-3xl); }
  .tagline-section { padding: var(--sp-700) 0; }
  .services-grid { grid-template-columns: minmax(0, 1fr); }
  .services-grid .service-card:nth-child(n) { grid-column: auto; }
  .service-card { padding: var(--sp-300); }
  .how-section .container, .split, .faq-section .container, #faq > .container { grid-template-columns: minmax(0, 1fr); gap: var(--sp-400); }
  .how-section .section-header, #faq .section-header { position: static; }
  .destinations-grid, .dest-grid, .related-grid, .souvenir-grid, .usecases-grid, .benefits-grid,
  .info-grid-ko, .pickup-steps, .logistics-features, .error-links { grid-template-columns: minmax(0, 1fr); }
  .info-grid, .info-grid-2 { columns: 1; }
  .pickup-box { grid-template-columns: minmax(0, 1fr); padding: var(--sp-300); }
  .community-box { padding: var(--sp-300); }
  .hero-stats { gap: var(--sp-300); }
  .hero-stat-number, .hero-stat-box .stat-value { font-size: var(--text-2xl); line-height: var(--lh-2xl); }
  .footer-grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-400); }
  .logistics-images img:nth-child(2) { margin-top: calc(var(--sp-400) * -1); }
}