/* ──────────────────────────────────────────────────────────────
   Yunifly design system. The sister sites' layout and components (header, split hero, cards,
   case cards, portal showcase, guide components) with Yunifly's American aviation identity:
   navy typography, controlled red accents, light sky-blue aviation details, clean white grounds.
   One stylesheet, no build step. English headings use a self-hosted serif; Chinese pages use the
   reader's native CJK sans (no webfont download) with Chinese line-breaking rules.
   ────────────────────────────────────────────────────────────── */

:root {
  --navy: #102A43;           /* headings, links on light grounds, dark sections (14.4:1 on white) */
  --navy-2: #163A5C;
  --navy-deep: #0B1F33;      /* footer, hero ground */
  --red: #C8303F;            /* the quote button (white text 5.2:1), small accents */
  --red-hover: #A92634;
  --red-light: #FF7A85;      /* red on navy grounds (5.3:1) */
  --sky: #4B8FC6;            /* aviation details: icons, rules, chips (decorative) */
  --sky-ink: #24618F;        /* sky as text on white (6.3:1) */
  --sky-pale: #E9F2FA;
  --sky-soft: #B9D6EE;       /* sky text on navy (8.6:1) */
  --soft: #F4F7FB;           /* cool off-white sections */
  --soft-2: #EAF0F6;
  --ink: #1B2533;
  --muted: #55657A;          /* secondary text (5.8:1 on white, 5.3:1 on --soft) */
  --line: #E1E7EF;
  --serif: "Yunifly Serif", Georgia, "Times New Roman", serif;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-hans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC",
               "Noto Sans CJK SC", "Source Han Sans SC", "Segoe UI", Roboto, sans-serif;
  --font-hant: -apple-system, BlinkMacSystemFont, "PingFang TC", "Microsoft JhengHei", "Noto Sans TC",
               "Noto Sans CJK TC", "Source Han Sans TC", "Segoe UI", Roboto, sans-serif;
  --radius: 16px;
  --shadow: 0 10px 30px rgba(16, 42, 67, .07);
  --shadow-lift: 0 20px 46px rgba(16, 42, 67, .14);
}

/* Fraunces SemiBold (SIL OFL, app/assets/fonts/Fraunces-OFL.txt), Latin subset, renamed for the
   modified version: English headings only. Body text stays on system fonts. */
@font-face {
  font-family: "Yunifly Serif"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/assets/yunifly-serif-7629fafe.woff2") format("woff2");
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 90px; }
body {
  font-family: var(--font); color: var(--ink); background: #fff;
  line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-wrap: break-word;
}
h1, h2, h3, h4 { line-height: 1.25; letter-spacing: -.01em; text-wrap: balance; color: var(--navy); }
h1, h2 { font-family: var(--serif); font-weight: 600; letter-spacing: -.005em; }
p, li, dd { text-wrap: pretty; }
img, svg { max-width: 100%; }
img { height: auto; }
a { color: var(--sky-ink); text-underline-offset: 2px; }
a:hover { color: var(--navy); }
b, strong { font-weight: 700; color: inherit; }

/* Chinese pages: native sans for everything (headings included), roomier lines, strict line
   breaking (no punctuation at a line start), long Latin words still wrap, no fake italics. */
:lang(zh-Hans) { font-family: var(--font-hans); }
:lang(zh-Hant) { font-family: var(--font-hant); }
:lang(zh) body, html:lang(zh-Hans) body, html:lang(zh-Hant) body { line-height: 1.85; line-break: strict; word-break: normal; overflow-wrap: anywhere; }
html:lang(zh-Hans) :is(h1, h2, h3), html:lang(zh-Hant) :is(h1, h2, h3) { font-family: inherit; font-weight: 700; letter-spacing: .01em; line-height: 1.4; }
html:lang(zh-Hans) em, html:lang(zh-Hant) em { font-style: normal; }
html:lang(zh-Hans) .section-kicker, html:lang(zh-Hant) .section-kicker,
html:lang(zh-Hans) .hero-kicker, html:lang(zh-Hant) .hero-kicker { letter-spacing: .06em; text-transform: none; }
[lang="en"], [lang="en-US"] { font-family: var(--font); }

:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; border-radius: 4px; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--navy); color: #fff; padding: 10px 16px; border-radius: 8px; }
.skip-link:focus { top: 12px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
main:focus { outline: none; }

.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
section { padding: 76px 0; }
.bg-soft { background: var(--soft); }
.section-kicker {
  display: block; font-size: .8rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--red); margin-bottom: 10px;
}
.section-kicker.center, .section-title, .section-sub { text-align: center; }
.section-title { font-size: clamp(1.75rem, 3.2vw, 2.45rem); margin-bottom: 14px; }
.section-sub { max-width: 720px; margin: 0 auto 40px; color: var(--muted); font-size: 1.07rem; }
.section-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 22px; margin-top: 38px; }
.cta-aside { color: var(--muted); font-size: .95rem; font-weight: 600; }
.chip {
  display: inline-block; font-size: .76rem; font-weight: 700; letter-spacing: .02em; color: var(--sky-ink);
  background: var(--sky-pale); border-radius: 999px; padding: 2px 10px; vertical-align: middle;
}
.chip--quiet { color: var(--muted); background: var(--soft-2); }

/* ── Header ─────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .97); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header > .container {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding-top: 10px; padding-bottom: 10px; max-width: 1360px; position: relative;
}
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; flex: 0 1 auto; min-width: 0; }
.brand-mark { width: 48px; height: 48px; flex: none; }
.brand-text { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.brand-word { height: 24px; width: auto; max-width: none; flex: none; }
.brand-tagline { margin-top: 4px; font-size: .74rem; font-weight: 700; color: var(--muted); line-height: 1.3; letter-spacing: .06em; white-space: nowrap; }
@media (min-width: 1024px) and (max-width: 1239px) { .brand-tagline { display: none; } }

.header-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.site-header .header-quick-cta { display: none; margin-left: auto; white-space: nowrap; }
.header-nav { display: flex; align-items: center; gap: 2px; }
.header-link, .nav-toggle {
  font-size: .95rem; font-weight: 600; color: var(--navy); text-decoration: none;
  white-space: nowrap; padding: 10px 11px; border-radius: 8px;
}
.header-link:hover, .nav-toggle:hover { color: var(--red); background: var(--soft); }
.header-link[aria-current="page"], .nav-toggle.is-current { box-shadow: inset 0 -2px 0 var(--red); border-radius: 8px 8px 0 0; }
.nav-item { position: relative; }
.nav-toggle { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; cursor: pointer; font-family: inherit; letter-spacing: inherit; }
.nav-toggle svg { width: 16px; height: 16px; }
.nav-toggle .caret { width: 14px; height: 14px; transition: transform .15s ease; }
.nav-item:hover .caret, .nav-item.open .caret, .nav-item:focus-within .caret { transform: rotate(180deg); }
.nav-dropdown {
  position: absolute; top: 100%; left: 50%; z-index: 60; min-width: 220px;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow-lift); padding: 8px;
  opacity: 0; visibility: hidden; transform: translate(-50%, 6px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.nav-item:hover .nav-dropdown, .nav-item:focus-within .nav-dropdown, .nav-item.open .nav-dropdown { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.nav-dropdown a {
  display: block; padding: 8px 12px; border-radius: 8px;
  font-size: .92rem; font-weight: 600; color: var(--ink); text-decoration: none;
}
.nav-dropdown a:hover, .nav-dropdown a[aria-current="page"], .nav-dropdown a[aria-current="true"] { background: var(--soft); color: var(--navy); }
.nav-dropdown a small { display: block; font-weight: 400; font-size: .8rem; color: var(--muted); }
.nav-item--mega { position: static; }
.nav-item--mega .nav-toggle { position: relative; }
.nav-item--mega .nav-toggle::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 22px; }
.nav-dropdown--wide, .nav-dropdown--services {
  left: auto; right: 20px; transform: translateY(6px);
  width: min(820px, calc(100vw - 40px)); padding: 12px 14px 14px;
  max-height: min(80vh, 680px); overflow-y: auto; overscroll-behavior: contain;
}
.nav-dropdown--wide { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px; }
.nav-dropdown--services { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; width: min(640px, calc(100vw - 40px)); }
.nav-item:hover :is(.nav-dropdown--wide, .nav-dropdown--services),
.nav-item:focus-within :is(.nav-dropdown--wide, .nav-dropdown--services),
.nav-item.open :is(.nav-dropdown--wide, .nav-dropdown--services) { transform: none; }
.nav-dropdown--services a { display: flex; gap: 10px; align-items: flex-start; }
.dd-icon { display: inline-flex; width: 30px; height: 30px; flex: none; border-radius: 8px; background: var(--sky-pale); color: var(--sky-ink); align-items: center; justify-content: center; }
.dd-icon svg { width: 17px; height: 17px; }
.dd-group { min-width: 0; }
.dd-cols { display: grid; grid-template-columns: 1fr 1fr; }
.dd-cols a { white-space: nowrap; font-size: .9rem; padding: 7px 10px; }
.dd-span { grid-column: 1 / -1; }
.dd-label { display: flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--red); padding: 10px 10px 6px; }
.dd-label svg { width: 16px; height: 16px; }
.dd-divider { height: 1px; background: var(--line); margin: 6px 4px; }
.nav-dropdown--lang { min-width: 160px; left: auto; right: 0; transform: translateY(6px); }
.nav-item--lang:hover .nav-dropdown--lang, .nav-item--lang:focus-within .nav-dropdown--lang, .nav-item--lang.open .nav-dropdown--lang { transform: none; }
.nav-dropdown--lang a[aria-current="true"]::after { content: "✓"; float: right; color: var(--red); }
.lang-toggle span { font-weight: 700; }

/* Flags: local SVGs cropped to 4:3 with a hairline edge so white flags stay visible on white. */
.flag {
  display: inline-block; width: 16px; height: 12px; object-fit: cover; border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(16, 42, 67, .14); flex: 0 0 auto; vertical-align: -1px;
}
.flag--large { width: 28px; height: 21px; border-radius: 3px; }
.flags { display: inline-flex; align-items: center; gap: 3px; flex: 0 0 auto; }
.flag-label { display: inline-flex; align-items: center; gap: 8px; }

/* The language hint bar (never a redirect). */
.lang-hint { background: var(--navy); color: #fff; font-size: .92rem; }
.lang-hint .container { display: flex; align-items: center; gap: 12px; padding-top: 8px; padding-bottom: 8px; }
.lang-hint p { flex: 1; display: flex; align-items: center; gap: 8px; }
.lang-hint p svg { width: 18px; height: 18px; color: var(--sky-soft); flex: none; }
.lang-hint-close { background: none; border: 0; color: #fff; font-size: 1.4rem; line-height: 1; cursor: pointer; padding: 4px 8px; }

/* ── Mobile menu (burger + slide-down panel) ───────── */
.menu-toggle {
  display: none; background: none; border: 0; cursor: pointer; font-family: inherit;
  padding: 6px 8px; border-radius: 10px; flex: 0 0 auto; margin-right: -8px;
  flex-direction: column; align-items: center; gap: 4px; color: var(--navy);
}
.menu-toggle-box { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 24px; height: 20px; }
.menu-toggle .bar { display: block; height: 2.5px; width: 100%; border-radius: 2px; background: var(--navy); transition: transform .3s ease, opacity .2s ease; }
.menu-toggle-label { font-size: .7rem; font-weight: 700; letter-spacing: .1em; }
.menu-open .menu-toggle .bar:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.menu-open .menu-toggle .bar:nth-child(2) { opacity: 0; }
.menu-open .menu-toggle .bar:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
.mobile-menu {
  display: none; grid-template-rows: 0fr; visibility: hidden; background: var(--soft);
  transition: grid-template-rows .42s cubic-bezier(.22, 1, .36, 1), visibility .42s;
}
.menu-open .mobile-menu { grid-template-rows: 1fr; visibility: visible; box-shadow: 0 18px 30px rgba(16, 42, 67, .16); }
.mobile-menu-inner { overflow: hidden; min-height: 0; }
.mobile-menu-scroll { max-height: calc(100vh - 72px); max-height: calc(100dvh - 72px); overflow-y: auto; padding: 8px 16px 20px; }
.mobile-menu a:not(.btn), .msub-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 13px 2px; font-size: 1rem; font-weight: 600;
  color: var(--navy); text-decoration: none; text-align: left;
  border: 0; border-bottom: 1px solid var(--line); background: none;
  font-family: inherit; letter-spacing: inherit; cursor: pointer;
}
.mobile-menu a[aria-current="page"] { color: var(--red); box-shadow: inset 3px 0 0 var(--red); padding-left: 12px; }
.mobile-menu a .flag-label { flex: 1; }
.msub-toggle .caret { width: 16px; height: 16px; color: var(--red); transition: transform .25s ease; }
.msub.open .msub-toggle .caret { transform: rotate(180deg); }
.msub-panel { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .32s cubic-bezier(.22, 1, .36, 1), visibility .32s; }
.msub.open .msub-panel { grid-template-rows: 1fr; visibility: visible; }
.msub-inner { overflow: hidden; min-height: 0; }
.mobile-menu .msub-inner a:not(.btn) { margin-left: 10px; padding-left: 14px; width: calc(100% - 10px); border-left: 2px solid var(--line); font-weight: 500; }
.mobile-menu .msub-inner a[aria-current="page"] { box-shadow: none; border-left-color: var(--red); }
.mobile-lang { display: flex; gap: 6px; padding: 8px 0 10px; border-bottom: 1px solid var(--line); }
.mobile-menu .mobile-lang a:not(.btn) {
  flex: 1; justify-content: center; border: 1px solid var(--line); border-radius: 999px; padding: 8px 6px;
  background: #fff; font-size: .9rem;
}
.mobile-menu .mobile-lang a[aria-current="true"] { background: var(--navy); color: #fff; border-color: var(--navy); }
.mobile-menu-ctas { display: grid; gap: 10px; margin-top: 18px; }
.mobile-menu-ctas .btn { width: 100%; }
.mobile-menu-label { font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: 16px 2px 4px; }

/* ── Buttons ────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; cursor: pointer; text-decoration: none; font-family: inherit;
  font-weight: 700; letter-spacing: .01em; border-radius: 999px; text-align: center; min-height: 44px;
  transition: background .15s ease, transform .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease;
}
.btn svg { width: 19px; height: 19px; flex: 0 0 auto; }
.btn-primary { background: var(--red); color: #fff; padding: 14px 30px; font-size: 1.04rem; box-shadow: 0 10px 22px rgba(200, 48, 63, .24); }
.btn-primary:hover { background: var(--red-hover); color: #fff; transform: translateY(-1px); }
.btn-small { padding: 9px 18px; font-size: .92rem; box-shadow: none; min-height: 40px; }
.btn-large { padding: 17px 38px; font-size: 1.12rem; }
.btn-outline { background: #fff; color: var(--navy); border: 2px solid var(--navy); padding: 12px 26px; font-size: 1rem; }
.btn-outline:hover { background: var(--navy); color: #fff; }
.btn-outline.btn-small { padding: 8px 16px; }
.btn-ghost-light { background: transparent; color: #fff; border: 2px solid rgba(255, 255, 255, .55); padding: 12px 26px; font-size: 1rem; }
.btn-ghost-light:hover { border-color: #fff; background: rgba(255, 255, 255, .08); color: #fff; }
.btn-light { background: #fff; color: var(--navy); }
.btn-light:hover { background: var(--sky-pale); color: var(--navy); }
.hero .btn-primary, .bottom-cta .btn-primary, .site-footer .btn-primary { box-shadow: 0 10px 26px rgba(0, 0, 0, .28); }

/* ── Hero ───────────────────────────────────────────── */
.hero { position: relative; overflow: hidden; color: #fff; background: var(--navy-deep); padding: 72px 0 76px; isolation: isolate; }
/* A quiet sky: two soft cloud glows and a dotted transpacific flight path (decorative). */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 70% at 92% 8%, rgba(75, 143, 198, .32), transparent 70%),
    radial-gradient(45% 60% at 0% 100%, rgba(75, 143, 198, .18), transparent 70%),
    linear-gradient(160deg, #0B1F33 0%, #102A43 55%, #14365A 100%);
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .22;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 600' preserveAspectRatio='none'%3E%3Cpath d='M-20 560 C 320 470 640 260 1220 70' fill='none' stroke='%23B9D6EE' stroke-width='2' stroke-dasharray='2 12' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.hero h1 { color: #fff; font-size: clamp(2rem, 4.4vw, 3.25rem); line-height: 1.12; margin-bottom: 16px; }
.hero-kicker {
  display: inline-flex; align-items: center; gap: 10px; font-size: .8rem; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--sky-soft); margin-bottom: 18px;
}
.hero-kicker::before { content: ""; width: 26px; height: 9px; background: linear-gradient(var(--red) 0 3px, transparent 3px 6px, var(--red) 6px); border-radius: 1px; }
.hero p.lead { font-size: 1.12rem; color: #dce6f1; max-width: 640px; margin-bottom: 28px; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.hero-trust { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px; margin-top: 30px; font-size: .95rem; color: #dce6f1; max-width: 600px; }
.hero-trust li { display: flex; align-items: center; gap: 8px; }
.hero-trust svg { width: 18px; height: 18px; color: var(--red-light); flex: none; }

/* Inner-page hero */
.hero--guide { padding: 44px 0 52px; }
.hero--guide h1 { font-size: clamp(1.85rem, 3.6vw, 2.75rem); max-width: 900px; }
.hero--guide p.lead { max-width: 780px; }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 0; font-size: .86rem; margin-bottom: 20px; color: var(--sky-soft); }
.breadcrumbs li + li::before { content: "/"; margin: 0 8px; opacity: .5; }
.breadcrumbs a { color: var(--sky-soft); text-decoration: none; }
.breadcrumbs a:hover { color: #fff; text-decoration: underline; }
.breadcrumbs [aria-current] { color: #fff; }
.route-chip {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px 8px;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 999px; padding: 5px 14px; margin-bottom: 16px; font-size: .9rem; font-weight: 600; color: #e4eaf4;
}
.route-chip .flag { width: 20px; height: 15px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .25); }
.route-chip .route-arrow { color: var(--red-light); font-weight: 800; }
.article-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.hero .chip { background: rgba(255, 255, 255, .12); color: #fff; }
.guide-updated { display: flex; align-items: flex-start; gap: 8px; font-size: .88rem; color: var(--sky-soft); margin: -10px 0 24px; }
.guide-updated svg { width: 16px; height: 16px; flex: none; margin-top: 4px; }
.guide-updated a { color: var(--sky-soft); }

/* ── Why choose us (the portal) ─────────────────────── */
.portal-showcase { position: relative; max-width: 960px; margin: 0 auto; padding: 0 70px 34px 0; }
.dash-frame { background: #fff; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 30px 70px rgba(16, 42, 67, .22); }
.dash-chrome { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #eef2f7; border-bottom: 1px solid var(--line); }
.dash-dot { width: 10px; height: 10px; border-radius: 50%; }
.dash-dot:nth-child(1) { background: #f28b82; }
.dash-dot:nth-child(2) { background: #fdd663; }
.dash-dot:nth-child(3) { background: #81c995; }
.dash-url { flex: 1; max-width: 340px; margin-left: 10px; background: #fff; border: 1px solid var(--line); border-radius: 999px; font-size: .72rem; color: var(--muted); padding: 3px 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-frame picture, .portal-phone picture { display: block; }
.dash-frame img { width: 100%; height: auto; display: block; }
.portal-phone { position: absolute; right: 0; bottom: 0; width: 200px; padding: 8px; background: #101826; border-radius: 30px; box-shadow: 0 24px 50px rgba(16, 42, 67, .35); }
.portal-phone img { width: 100%; height: auto; border-radius: 23px; display: block; }
.portal-caption { font-size: .84rem; color: var(--muted); margin-top: 14px; max-width: calc(100% - 250px); }
.portal-features { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 28px; max-width: 980px; margin: 34px auto 40px; }
.portal-features li { display: flex; gap: 12px; align-items: flex-start; }
.portal-features svg { width: 24px; height: 24px; color: var(--red); flex: none; margin-top: 2px; }
.portal-features b { display: block; color: var(--navy); }
.portal-features span { color: var(--muted); font-size: .95rem; }

/* ── Cards ──────────────────────────────────────────── */
.card-grid { display: grid; gap: 22px; }
.card-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card {
  display: block; background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 24px; box-shadow: var(--shadow); color: var(--ink); text-decoration: none;
}
.card h3 { font-size: 1.12rem; margin-bottom: 8px; }
.card p { color: var(--muted); font-size: .96rem; }
.card--link { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; position: relative; }
.card--link:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: var(--sky-soft); color: var(--ink); }
.card--link:hover h3 { color: var(--red); }
.card-kind { display: block; font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--sky-ink); margin-bottom: 8px; }
.card-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-weight: 700; color: var(--red); font-size: .93rem; }
.card-link svg { width: 16px; height: 16px; }
.benefit-icon { display: inline-flex; width: 46px; height: 46px; border-radius: 12px; align-items: center; justify-content: center; background: var(--sky-pale); color: var(--navy); margin-bottom: 14px; }
.benefit-icon svg { width: 23px; height: 23px; }
.benefit-grid { margin-top: 10px; }
.service-card { display: flex; flex-direction: column; }
.service-card .card-link { margin-top: auto; padding-top: 14px; }

/* ── Recent relocations: case cards in a scroll-snap row ── */
.carousel { position: relative; }
.case-track {
  list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 4 * 20px) / 5); gap: 20px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 6px 2px 18px; position: relative;
}
.case-track::-webkit-scrollbar { display: none; }
.case-card { position: relative; scroll-snap-align: start; background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.case-photo { position: relative; }
.story-photo, .story-photo img { display: block; }
.case-photo img { width: 100%; aspect-ratio: 4 / 4.2; object-fit: cover; }
.case-badge { position: absolute; left: 10px; top: 10px; background: var(--navy); color: #fff; font-size: .72rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; box-shadow: 0 0 0 2px rgba(255,255,255,.6); }
.case-body { padding: 14px 16px 16px; display: flex; flex-direction: column; flex: 1; }
.case-name { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; color: var(--navy); font-size: 1.05rem; }
.case-route { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 10px; }
.case-place { min-width: 0; font-size: .86rem; font-weight: 700; color: var(--navy); line-height: 1.25; }
.case-arrow { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--red); position: relative; }
.case-arrow::before { content: ""; position: absolute; left: 4px; right: 4px; top: 50%; border-top: 1.5px dashed var(--sky-soft); }
.case-arrow svg { position: relative; width: 18px; height: 18px; background: #fff; padding: 0 2px; }
.case-summary { font-size: .88rem; color: var(--muted); margin-bottom: 10px; }
.case-meta { margin-top: auto; font-size: .76rem; font-weight: 700; color: var(--sky-ink); }
.carousel-controls { display: none; justify-content: center; gap: 10px; margin-top: 6px; }
.carousel-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--navy); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--shadow); }
.carousel-btn:hover { border-color: var(--navy); }
.carousel-btn svg { width: 20px; height: 20px; }

/* ── Client reviews ─────────────────────────────────── */
.review-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.review-card { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 22px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 14px; }
.review-head { display: flex; align-items: center; gap: 12px; line-height: 1.35; }
.review-head b { display: block; color: var(--navy); }
.review-head small { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: .8rem; }
.review-avatar img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; display: block; box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--sky-soft); }
.review-card blockquote { position: relative; font-size: .97rem; color: var(--ink); }
.review-card blockquote::before { content: "“"; display: block; font-family: var(--serif); font-size: 2.6rem; line-height: .6; color: var(--red); margin-bottom: 6px; }
.review-original { font-size: .82rem; color: var(--muted); margin-top: auto; }
.review-original summary { cursor: pointer; font-weight: 600; color: var(--sky-ink); }
.review-original p { margin-top: 8px; font-style: italic; }
.review-actions { text-align: center; margin-top: 28px; }
.attribution-note { display: flex; gap: 10px; align-items: flex-start; max-width: 860px; margin: 26px auto 0; font-size: .86rem; color: var(--muted); background: var(--soft); border-radius: 12px; padding: 14px 16px; }
.attribution-note svg { width: 18px; height: 18px; flex: none; color: var(--sky-ink); margin-top: 3px; }
.bg-soft .attribution-note { background: #fff; }

/* ── Steps ──────────────────────────────────────────── */
.steps-grid { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; counter-reset: step; }
.step { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 22px; box-shadow: var(--shadow); position: relative; }
.step .num { display: inline-flex; width: 38px; height: 38px; border-radius: 50%; background: var(--navy); color: #fff; font-weight: 800; align-items: center; justify-content: center; margin-bottom: 14px; box-shadow: 0 0 0 4px var(--sky-pale); }
.step h3 { font-size: 1.05rem; margin-bottom: 6px; }
.step p { color: var(--muted); font-size: .94rem; }

/* ── Destinations ───────────────────────────────────── */
.destination-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.destination-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 10px; }
.destination-card h3 { display: flex; align-items: center; gap: 10px; font-size: 1.2rem; }
.destination-card p { color: var(--muted); font-size: .93rem; }
.lead-time { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; font-size: .8rem; font-weight: 700; color: var(--sky-ink); background: var(--sky-pale); border-radius: 999px; padding: 3px 10px; }
.lead-time svg { width: 14px; height: 14px; }
.destination-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 6px; }
.destination-links a { display: inline-flex; align-items: center; gap: 6px; font-size: .88rem; font-weight: 700; color: var(--navy); text-decoration: none; border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; }
.destination-links a:hover { border-color: var(--red); color: var(--red); }
.destination-links svg { width: 15px; height: 15px; color: var(--red); }
.destination-more { text-align: center; max-width: 720px; margin: 34px auto 0; color: var(--muted); }
.destination-more .section-cta { margin-top: 16px; }

/* ── Bottom CTA ─────────────────────────────────────── */
.bottom-cta { background: linear-gradient(150deg, #0B1F33, #14365A); color: #fff; text-align: center; padding: 76px 0; position: relative; overflow: hidden; }
.bottom-cta h2 { color: #fff; font-size: clamp(1.8rem, 3.4vw, 2.5rem); margin-bottom: 12px; }
.bottom-cta p { color: #dce6f1; font-size: 1.1rem; max-width: 640px; margin: 0 auto 28px; }
.bottom-cta .hero-ctas { justify-content: center; }
.bottom-cta .bottom-cta-note { font-size: .88rem; color: var(--sky-soft); margin: 18px auto 0; }
.bottom-cta-stripes, .footer-stripes { display: flex; flex-direction: column; gap: 3px; width: 64px; margin: 0 auto 22px; }
.bottom-cta-stripes span, .footer-stripes span { height: 3px; border-radius: 2px; background: var(--red-light); }
.bottom-cta-stripes span:nth-child(2), .footer-stripes span:nth-child(2) { background: #fff; }

/* ── Footer ─────────────────────────────────────────── */
.site-footer { background: var(--navy-deep); color: #c7d4e2; padding: 56px 0 28px; font-size: .93rem; }
.footer-stripes { margin: -30px auto 34px; }
.footer-cols { display: grid; grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr)); gap: 30px; }
.footer-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.footer-logo .brand-mark { width: 44px; height: 44px; }
.footer-logo .brand-word { height: 22px; width: auto; }
.footer-motto { color: #fff; font-family: var(--serif); font-size: 1.15rem; margin-bottom: 8px; }
html:lang(zh-Hans) .footer-motto, html:lang(zh-Hant) .footer-motto { font-family: inherit; font-weight: 700; }
.footer-cta { margin: 16px 0 12px; }
.footer-email { display: flex; align-items: center; gap: 8px; }
.footer-email svg { width: 17px; height: 17px; color: var(--sky-soft); }
.site-footer a { color: #e3ebf3; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-col h2 { color: #fff; font-family: var(--font); font-size: .82rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 12px; }
html:lang(zh-Hans) .footer-col h2, html:lang(zh-Hant) .footer-col h2 { letter-spacing: .04em; font-size: .92rem; }
.footer-col a { display: block; padding: 4px 0; }
.footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; border-top: 1px solid rgba(255, 255, 255, .12); margin-top: 40px; padding-top: 20px; font-size: .85rem; }
.footer-lang, .footer-legal { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; }
.footer-lang a[aria-current="true"] { color: #fff; font-weight: 700; text-decoration: underline; text-decoration-color: var(--red-light); }
.link-button { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }

/* ── Guide pages (route pages, services, guides) ────── */
.guide-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 48px; padding-top: 48px; padding-bottom: 20px; }
.guide-toc { position: sticky; top: 96px; align-self: start; max-height: calc(100vh - 120px); overflow-y: auto; font-size: .88rem; border-left: 2px solid var(--line); padding-left: 16px; }
.toc-title { font-size: .76rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--red); margin-bottom: 8px; }
.guide-toc ol { list-style: none; display: grid; gap: 4px; }
.guide-toc a { color: var(--muted); text-decoration: none; display: block; padding: 2px 0; }
.guide-toc a:hover { color: var(--navy); }
.guide-body { max-width: 820px; }
.guide-body--single { margin: 0 auto; padding-top: 48px; padding-bottom: 20px; }
.guide-body > section, .guide-body .guide-section { padding: 0; margin-bottom: 40px; }
.guide-body h2 { font-size: clamp(1.4rem, 2.4vw, 1.75rem); margin-bottom: 14px; padding-top: 6px; }
.guide-body h3 { font-size: 1.12rem; margin: 22px 0 8px; }
.guide-body p { margin-bottom: 14px; }
.guide-body ul, .guide-body ol:not(.steps-grid):not(.timeline) { margin: 0 0 16px 22px; display: grid; gap: 6px; }
.guide-body li::marker { color: var(--red); }
.callout { background: var(--sky-pale); border-left: 4px solid var(--sky); border-radius: 0 12px 12px 0; padding: 14px 18px; margin: 0 0 18px; }
.callout p:last-child { margin-bottom: 0; }
.callout-risk { background: #FDF0F1; border-left-color: var(--red); }
.facts-panel { background: var(--soft); border: 1px solid var(--line); border-radius: 18px; padding: 24px 24px 20px; margin-bottom: 44px !important; }
.facts-panel h2 { margin-bottom: 6px; }
.species-note { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: .88rem; margin-bottom: 16px !important; }
.species-note svg { width: 18px; height: 18px; color: var(--sky-ink); }
.fact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fact { background: #fff; border-radius: 12px; padding: 14px 16px; border: 1px solid var(--line); }
.fact dt { font-size: .76rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--red); margin-bottom: 4px; }
html:lang(zh-Hans) .fact dt, html:lang(zh-Hant) .fact dt { letter-spacing: .02em; font-size: .86rem; }
.fact dd { font-size: .94rem; color: var(--ink); }
.inline-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px; background: var(--navy); color: #fff; border-radius: 16px; padding: 18px 22px; margin: 0 0 40px; }
.inline-cta p { margin: 0 !important; font-weight: 700; font-size: 1.05rem; }
.story-inline { display: grid; grid-template-columns: 120px 1fr; gap: 18px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 16px; box-shadow: var(--shadow); margin: 0 0 40px; }
.story-inline img { width: 120px; height: 140px; object-fit: cover; border-radius: 10px; }
.story-inline p { margin-bottom: 6px !important; font-size: .93rem; }
.story-kicker { font-size: .74rem !important; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--red); }
.case-route-inline { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-weight: 700; color: var(--navy); }
.faq-list { display: grid; gap: 10px; }
.faq-list details { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 0 18px; }
.faq-list summary { cursor: pointer; font-weight: 700; color: var(--navy); padding: 16px 28px 16px 0; list-style: none; position: relative; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; position: absolute; right: 0; top: 12px; font-size: 1.4rem; color: var(--red); font-weight: 400; }
.faq-list details[open] summary::after { content: "–"; }
.faq-answer { padding-bottom: 14px; color: var(--ink); }
.faq-answer p { margin-bottom: 10px; }
.sources-section { background: var(--soft); border-radius: 16px; padding: 24px; }
.sources { margin-left: 20px; display: grid; gap: 6px; font-size: .93rem; }
.sources-verified, .sources-reminder { display: flex; gap: 8px; align-items: flex-start; font-size: .9rem; margin-top: 12px; }
.sources-verified { font-weight: 700; color: var(--navy); }
.sources-verified svg, .sources-reminder svg { width: 18px; height: 18px; flex: none; margin-top: 3px; color: var(--sky-ink); }
.sources-reminder { color: var(--muted); }
.route-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.route-pills a { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 7px 14px; font-size: .9rem; font-weight: 600; color: var(--navy); text-decoration: none; }
.route-pills a:hover { border-color: var(--red); color: var(--red); }
.related .card-grid { margin-top: 6px; }
.article-author { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .9rem; margin-bottom: 26px !important; }
.article-author svg { width: 18px; height: 18px; color: var(--sky-ink); }
.legal-facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; background: var(--soft); border-radius: 12px; padding: 16px 20px; margin-bottom: 32px; font-size: .93rem; }
.legal-facts dt { font-weight: 700; color: var(--navy); }

/* ── Hubs ───────────────────────────────────────────── */
.hub-body { padding-top: 52px; padding-bottom: 12px; }
.hub-body > section { padding: 36px 0; }
.direction-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.direction-panel { background: var(--soft); border-radius: 18px; padding: 26px; }
.direction-panel h2 { display: flex; align-items: center; gap: 10px; font-size: 1.4rem; margin-bottom: 6px; }
.direction-panel h2 svg { width: 24px; height: 24px; color: var(--red); flex: none; }
.direction-panel > p { color: var(--muted); font-size: .94rem; margin-bottom: 14px; }
.route-list { list-style: none; display: grid; gap: 8px; }
.route-list a { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 11px 14px; text-decoration: none; color: var(--navy); font-weight: 700; }
.route-list a:hover { border-color: var(--red); }
.route-list-label { font-weight: 400; font-size: .84rem; color: var(--muted); }
.on-request { background: var(--soft); border-radius: 18px; padding: 28px !important; margin: 28px 0; }
.on-request h2 { font-size: 1.4rem; margin-bottom: 8px; }
.on-request p { color: var(--muted); margin-bottom: 16px; max-width: 760px; }
.flag-list { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 10px; margin-bottom: 20px; }
.flag-list li { background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; font-size: .9rem; font-weight: 600; color: var(--navy); }
.topic-pills { justify-content: center; margin-bottom: 8px; }
.topic-title { font-size: 1.5rem; margin-bottom: 18px; }
.timeline { list-style: none; display: grid; gap: 18px; max-width: 820px; margin: 0 auto 30px; }
.timeline li { background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--red); border-radius: 14px; padding: 20px 22px; box-shadow: var(--shadow); }
.timeline h2 { font-size: 1.25rem; margin-bottom: 6px; }
.timeline p { color: var(--muted); }

/* ── Contact ────────────────────────────────────────── */
.contact-page { background: radial-gradient(70% 60% at 50% 0%, var(--sky-pale), transparent 70%), var(--soft); padding: 34px 0 90px; }
.contact-page .breadcrumbs ol, .contact-page .breadcrumbs a { color: var(--muted); }
.contact-page .breadcrumbs [aria-current] { color: var(--navy); }
.contact-card { max-width: 640px; margin: 18px auto 0; background: #fff; border: 1px solid var(--line); border-radius: 26px; padding: 48px 40px; text-align: center; box-shadow: var(--shadow-lift); position: relative; }
.contact-card::before { content: ""; position: absolute; left: 50%; top: 0; width: 120px; height: 5px; transform: translateX(-50%); border-radius: 0 0 4px 4px; background: linear-gradient(90deg, var(--red) 0 33%, #fff 33% 66%, var(--red) 66%); box-shadow: 0 0 0 1px var(--line); }
.contact-mark { width: 72px; height: 72px; margin-bottom: 18px; }
.contact-card h1 { font-size: clamp(1.8rem, 4vw, 2.5rem); margin-bottom: 12px; }
.contact-card .lead { color: var(--muted); font-size: 1.1rem; margin-bottom: 28px; }
.contact-email { margin-top: 26px; display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--muted); font-size: .93rem; }
.contact-email a { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 1.05rem; color: var(--navy); }
.contact-email svg { width: 18px; height: 18px; color: var(--red); }

/* Consent banner (only rendered when Google tags are configured). Both choices weigh the same. */
.consent { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 80; max-width: 560px; background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 18px 40px rgba(8, 20, 40, .22); }
.consent[hidden] { display: none; }
.consent-inner { padding: 18px 20px; }
.consent h2 { font-family: var(--font); font-size: 1.05rem; margin-bottom: 6px; }
.consent p { font-size: .92rem; }
.consent-actions { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.consent-actions .btn { flex: 1 1 140px; }
.draft-banner { background: #fff1c9; color: #5c4400; text-align: center; padding: 8px 16px; font-weight: 700; font-size: .9rem; }
.nf-section { padding: 70px 0; }
.nf-lead { color: var(--muted); margin: 10px 0 24px; }
.nf-ctas { margin-bottom: 24px; }

/* The sticky quote bar on phones. */
.sticky-cta { display: none; }
@media (max-width: 720px) {
  .sticky-cta {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .97); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px rgba(16, 42, 67, .08);
  }
  .sticky-cta .btn { width: 100%; padding: 12px 20px; font-size: 1rem; }
  body:has(.sticky-cta) { padding-bottom: 72px; }
  body:has(.menu-open) .sticky-cta { display: none; }
  .consent { bottom: 84px; }
}

/* ── Responsive ─────────────────────────────────────── */
@media (max-width: 1180px) {
  .case-track { grid-auto-columns: calc((100% - 2 * 20px) / 3.2); }
  .carousel-controls { display: flex; }
}
@media (max-width: 1023px) {
  .header-actions { display: none; }
  .site-header .header-quick-cta { display: inline-flex; }
  .menu-toggle { display: inline-flex; }
  .mobile-menu { display: grid; }
  .card-grid.cols-3, .review-grid, .destination-grid { grid-template-columns: 1fr 1fr; }
  .steps-grid { grid-template-columns: 1fr 1fr; }
  .portal-features { grid-template-columns: 1fr; max-width: 520px; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .portal-showcase { padding: 0 40px 30px 0; }
  .portal-phone { width: 160px; border-radius: 24px; padding: 6px; }
  .portal-phone img { border-radius: 19px; }
  .portal-caption { max-width: calc(100% - 190px); }
  .guide-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .guide-toc { display: none; }
  .guide-body { margin: 0 auto; }
  .direction-columns { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .case-track { grid-auto-columns: 72%; }
  .review-grid, .card-grid.cols-3, .destination-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .container { padding: 0 16px; }
  section { padding: 52px 0; }
  .section-sub { margin-bottom: 28px; }
  .site-header > .container { padding-top: 8px; padding-bottom: 8px; }
  .brand { gap: 8px; }
  .brand-mark { width: 40px; height: 40px; }
  .brand-word { height: 19px; }
  .brand-tagline { font-size: .62rem; letter-spacing: .03em; margin-top: 2px; }
  .site-header .header-quick-cta { padding: 8px 13px; font-size: .86rem; }
  .menu-toggle { padding: 6px 4px; margin-right: -4px; }
  .hero { padding: 44px 0 46px; }
  .hero--guide { padding: 30px 0 38px; }
  .hero p.lead { font-size: 1.03rem; margin-bottom: 22px; }
  .hero-ctas { flex-direction: column; align-items: stretch; width: 100%; }
  .hero-ctas .btn { width: 100%; }
  .hero-trust { grid-template-columns: 1fr; font-size: .92rem; }
  .steps-grid, .fact-grid { grid-template-columns: 1fr; }
  .card { padding: 22px 18px; }
  .story-inline { grid-template-columns: 88px 1fr; }
  .story-inline img { width: 88px; height: 110px; }
  .inline-cta { flex-direction: column; align-items: stretch; text-align: center; }
  .footer-cols { grid-template-columns: 1fr; gap: 26px; }
  .footer-base { flex-direction: column; align-items: flex-start; }
  .portal-showcase { padding: 0; display: flex; flex-direction: column; align-items: center; }
  .portal-showcase .dash-frame { display: none; }
  .portal-phone { position: static; width: min(270px, 78vw); }
  .portal-caption { max-width: none; text-align: center; margin-top: 16px; }
  .contact-card { padding: 36px 20px; }
  .legal-facts { grid-template-columns: 1fr; gap: 2px; }
  .legal-facts dd { margin-bottom: 8px; }
  .lang-hint .container { flex-wrap: wrap; }
}
@media (max-width: 380px) {
  .brand-mark { width: 36px; height: 36px; }
  .brand-word { height: 17px; }
  .brand-tagline { display: none; }
  .case-track { grid-auto-columns: 84%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; transition-delay: 0s !important; }
}

/* Ten services and ten destinations: grids sized so no card is left alone on a row. */
@media (min-width: 1180px) {
  .service-grid.card-grid.cols-3 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
  .service-grid .card { padding: 22px 18px; }
  .service-grid h3 { font-size: 1.02rem; }
  .service-grid p { font-size: .9rem; }
}
@media (min-width: 1024px) {
  .destination-grid { grid-template-columns: 1fr 1fr; }
  .destination-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 20px; align-items: start; }
  .destination-card > * { grid-column: 1; }
  .destination-card .destination-links { grid-column: 2; grid-row: 1 / span 3; flex-direction: column; margin-top: 0; padding-top: 2px; }
}
.guide-body > section.facts-panel, .guide-body > section.sources-section { padding: 24px 24px 20px; }
@media (max-width: 600px) { .guide-body > section.facts-panel, .guide-body > section.sources-section { padding: 18px 16px; } }
.site-footer a.btn-primary, .site-footer a.btn-primary:hover { color: #fff; text-decoration: none; }

/* ── Home hero: the team's photo as the main visual ─────────────
   Desktop: the photo fills the right of the hero at full height, fading into the navy behind the
   copy (the dogs sit right of centre, never under the text). Tablet and phones: a band above the
   copy with a soft fade into the navy. The picture reserves its box (absolute, or aspect-ratio),
   so nothing shifts while it loads; it is preloaded and fetched with high priority (the LCP). */
.hero--photo { padding: 0; min-height: 640px; display: flex; align-items: center; }
.hero--photo::after { display: none; }
/* One solid navy ground, so the photo's fade blends into it without a seam. */
.hero--photo::before { background: var(--navy-deep); }
.hero--photo > .container { position: relative; z-index: 1; padding-top: 76px; padding-bottom: 80px; }
.hero--photo .hero-copy { max-width: 600px; }
.hero-banner { position: absolute; top: 0; right: 0; bottom: 0; width: 62%; z-index: 0; display: block; }
.hero-banner img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 55%; display: block; }
.hero-banner::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, var(--navy-deep) 0%, rgba(11, 31, 51, .78) 16%, rgba(11, 31, 51, .2) 42%, rgba(11, 31, 51, 0) 62%),
    linear-gradient(0deg, rgba(11, 31, 51, .35) 0%, rgba(11, 31, 51, 0) 30%);
}
/* The tagline line: positioning, separator, motto — one sentence, two voices. */
.hero-tagline-line { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0; row-gap: 4px; margin-bottom: 18px; }
/* Shown exactly as written (no text-transform): the separator stays glued to the positioning. */
.hero-tagline-line .tagline-positioning { font-size: .95rem; font-weight: 700; letter-spacing: .03em; color: var(--sky-soft); }
.hero-tagline-line .tagline-separator { white-space: pre; font-weight: 700; }
.hero-tagline-line .tagline-motto { font-family: var(--serif); font-size: 1.12rem; color: var(--red-light); }
html:lang(zh-Hans) .hero-tagline-line .tagline-positioning, html:lang(zh-Hant) .hero-tagline-line .tagline-positioning { letter-spacing: .06em; font-size: .92rem; }
html:lang(zh-Hans) .hero-tagline-line .tagline-motto, html:lang(zh-Hant) .hero-tagline-line .tagline-motto { font-family: inherit; font-weight: 700; letter-spacing: .06em; font-size: 1rem; }
@media (min-width: 1440px) { .hero-banner { width: 60%; } }
@media (max-width: 1023px) {
  .hero--photo { display: block; min-height: 0; }
  .hero-banner { position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: 460px; }
  .hero-banner img { object-position: 50% 58%; }
  .hero-banner::after { background: linear-gradient(0deg, var(--navy-deep) 0%, rgba(11, 31, 51, .55) 22%, rgba(11, 31, 51, 0) 50%); }
  .hero--photo > .container { padding-top: 6px; padding-bottom: 52px; margin-top: -40px; }
  .hero--photo .hero-copy { max-width: 680px; }
}
@media (max-width: 600px) {
  .hero-banner { aspect-ratio: 4 / 3; }
  .hero--photo > .container { margin-top: -28px; padding-bottom: 44px; }
}

/* One flag immediately left of each place name; routes read "🇺🇸 USA → 🇯🇵 Japan". */
.flag-label { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.route-label { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.route-label .route-arrow, .review-route .route-arrow, .case-route-inline .route-arrow { color: var(--red); font-weight: 800; }
.review-route { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin-top: 2px; font-size: .8rem; color: var(--muted); }
.case-route-inline { gap: 4px 8px; }
.destination-links a { gap: 8px; }
.case-route { flex-wrap: wrap; row-gap: 6px; }
.case-place .flag-label { white-space: normal; }
.case-arrow { min-width: 28px; }
.destination-card h3 .flag-label { gap: 10px; }
.case-route { flex-wrap: nowrap; }
.case-arrow { min-width: 18px; }
@media (min-width: 1024px) {
  .destination-card { grid-template-rows: auto auto 1fr; }
  .destination-card .lead-time { justify-self: start; align-self: start; }
}
/* Grid children may shrink below their longest word (official form names, URLs) on 320px screens. */
.guide-layout > *, .fact-grid > *, .facts-panel { min-width: 0; }
.fact dd, .fact dt, .guide-body li, .guide-body p { overflow-wrap: anywhere; }
/* In the route-page grid the body stretches to its track: auto margins would size it to its content. */
.guide-layout > .guide-body { margin-left: 0; margin-right: 0; }
.story-inline > div { min-width: 0; }
.case-route-inline { display: flex; flex-wrap: wrap; align-items: center; }
.story-inline .flag-label { white-space: normal; min-width: 0; }