/* ──────────────────────────────────────────────────────────────
   Design system shared with 886JetPet (same tokens, header, hero, cards, guide
   components), adapted for Traditional Chinese text. One stylesheet, no build step.
   ────────────────────────────────────────────────────────────── */

:root {
  --navy: #1a3363;
  --navy-dark: #12244a;
  --navy-deep: #0d1b38;
  --coral: #e0553f;          /* accents: icons, rules, borders */
  --coral-strong: #c8432f;   /* filled buttons and coral text: 4.9:1 with white */
  --coral-hover: #b03a28;
  --brand-red: #e51d28;
  --cream: #f6e7c8;
  --ink: #24303f;
  --muted: #5c6a7a;
  --line: #dfe5ec;
  --bg-soft: #f4f7fb;
  --ok: #2e7d32;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(26, 51, 99, .10);
  /* Sans-serif CJK faces only: without the CJK TC / Source Han names, Linux and some
     Android builds fall back to a Ming (serif) face for Chinese headings. */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC", "Noto Sans TC",
          "Noto Sans CJK TC", "Source Han Sans TC", "Microsoft JhengHei", "Heiti TC",
          "WenQuanYi Micro Hei", Roboto, "Helvetica Neue", Arial, sans-serif;
}
/* zh-CN pages ask for the Simplified (SC) cuts of the same system faces first: with only the
   TC cuts named, browsers draw mainland text in Taiwan glyph shapes. System fonts only, so
   nothing is fetched from a font host (some of which mainland networks block). */
:root:lang(zh-CN) {
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Noto Sans SC",
          "Noto Sans CJK SC", "Source Han Sans SC", "Microsoft YaHei", "Heiti SC",
          "WenQuanYi Micro Hei", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  font-family: var(--font);
  color: var(--ink);
  background: #fff;
  /* CJK text needs more leading than Latin; a hair of tracking keeps dense
     characters from clumping on small screens. */
  line-height: 1.75;
  letter-spacing: .02em;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

h1, h2, h3, h4 { line-height: 1.4; letter-spacing: .03em; text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
em { font-style: normal; }
/* A phrase that should wrap as a unit rather than mid-word (e.g. 每一步). */
.keep-together { display: inline-block; }

img { max-width: 100%; display: block; height: auto; }
picture { display: contents; }
a { color: var(--navy); }
a:hover { color: var(--coral-strong); }

:focus-visible { outline: 3px solid #f0a090; outline-offset: 2px; border-radius: 4px; }
main:focus { outline: none; }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--navy); color: #fff; padding: 10px 16px; border-radius: 8px;
  font-weight: 700; text-decoration: none; transition: top .15s ease;
}
.skip-link:focus { top: 12px; color: #fff; }

.container { max-width: 1080px; margin: 0 auto; padding: 0 20px; }

/* ── Header ─────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .96);
  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: 1440px; position: relative;
}
/* The badge beside the wordmark (可可飛 over ke ke fei), as two images: a small WebP and an SVG. */
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: 0 1 auto; min-width: 0; }
.brand-mark { width: 52px; height: 52px; flex: none; }
.brand-logo { height: 44px; width: auto; }

.header-actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
/* Narrow screens keep one quote button in the bar itself, beside the menu button. */
.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: 700; color: var(--navy); text-decoration: none;
  white-space: nowrap; padding: 10px 10px; border-radius: 8px;
}
.header-link:hover, .nav-toggle:hover { color: var(--coral-strong); background: var(--bg-soft); }
.header-link[aria-current="page"], .nav-toggle.is-current { color: var(--coral-strong); }

.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 .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: 290px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow); 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: 9px 12px; border-radius: 8px;
  font-size: .93rem; font-weight: 700; color: var(--ink); text-decoration: none;
}
.nav-dropdown a:hover, .nav-dropdown a[aria-current="page"] { background: var(--bg-soft); color: var(--navy); }
.nav-dropdown a small { display: block; font-weight: 400; font-size: .8rem; color: var(--muted); }
/* The destinations mega menu (886JetPet's "Pet Travel Guides"): regions in three
   columns, anchored to the header's right edge rather than to its button, so it can
   never run off either side of the viewport. A transparent bridge under the button
   keeps :hover alive while the pointer travels down to the menu. */
.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 {
  left: auto; right: 20px; transform: translateY(6px);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px 14px;
  width: min(800px, calc(100vw - 40px)); padding: 12px 14px 14px;
  max-height: min(76vh, 660px); overflow-y: auto; overscroll-behavior: contain;
}
.nav-item:hover .nav-dropdown--wide,
.nav-item:focus-within .nav-dropdown--wide,
.nav-item.open .nav-dropdown--wide { transform: none; }
.nav-dropdown--wide .dd-group { min-width: 0; }
.nav-dropdown--wide .dd-span { grid-column: 1 / -1; }
.nav-dropdown--wide .dd-links--row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.nav-dropdown--wide a { white-space: nowrap; }
.dd-label { font-size: .74rem; font-weight: 800; letter-spacing: .14em; color: var(--muted); padding: 10px 12px 4px; }
.dd-divider { height: 1px; background: var(--line); margin: 6px 4px; }

/* Country flags (as on 886JetPet): cropped to 4:3 with a hairline edge so white
   flags (Japan) stay visible on white. Always paired with the country's name. */
.flag {
  display: inline-block; width: 16px; height: 12px; object-fit: cover; border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .1); flex: 0 0 auto;
}
.flags { display: inline-flex; align-items: center; gap: 3px; flex: 0 0 auto; }
.flag-label { display: inline-flex; align-items: center; gap: 7px; }
.destination-card .flag { width: 20px; height: 15px; }

/* Route chip above a guide's h1: 台灣 → 日本. */
.route-chip {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px 8px;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px; padding: 5px 14px; margin-bottom: 14px;
  font-size: .9rem; font-weight: 700; color: #e4eaf4;
}
.route-chip .flag { width: 20px; height: 15px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .25); }
.route-chip svg { width: 16px; height: 16px; color: #c3cee2; }
.route-chip .route-arrow { color: #ff8a73; }

/* Language switch: 繁體中文 | 简体中文 (this site), then English (the sister site). Between
   1024 and 1279px the bar is tight, so the two Chinese names shorten to 繁 and 简. */
.lang-switch {
  display: inline-flex; align-items: center; gap: 7px; margin: 0 6px;
  border: 1.5px solid var(--line); border-radius: 999px; padding: 6px 13px;
  font-size: .88rem; font-weight: 700; white-space: nowrap; letter-spacing: 0; color: var(--navy);
}
.lang-switch > svg { width: 16px; height: 16px; flex: 0 0 auto; }
.lang-options { display: inline-flex; align-items: center; gap: 7px; }
.lang-switch a { color: var(--muted); text-decoration: none; }
.lang-switch a:hover { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.lang-switch a[aria-current="true"] { color: var(--navy); }
.lang-sep { color: #b9c3cf; font-weight: 400; }
.lang-switch .lang-link { padding-left: 9px; border-left: 1.5px solid var(--line); }
.lang-short { display: none; }
@media (min-width: 1024px) and (max-width: 1279px) {
  .lang-switch--header .lang-full { display: none; }
  .lang-switch--header .lang-short { display: inline; }
}

/* Narrow screens: the same choice behind a globe button in the bar (shared/_language_switch_compact,
   Pawgeot's pattern). The list opens on hover, focus or tap (nav-menu controller), aligned right so it
   never leaves the screen. Undoes the inline switch's pill above: here the button is the pill. */
.lang-switch--compact {
  display: none; position: relative; margin: 0 4px 0 auto; padding: 0; gap: 0;
  border: 0; border-radius: 0; font-size: .82rem;
}
.lang-toggle {
  display: inline-flex; align-items: center; gap: 4px; height: 34px; padding: 0 10px;
  border: 1px solid var(--line); border-radius: 999px; background: #fff; cursor: pointer;
  font: inherit; font-size: .82rem; font-weight: 700; color: var(--navy); white-space: nowrap;
}
.lang-toggle:hover, .lang-switch--compact.open .lang-toggle { border-color: var(--navy); }
.lang-switch--compact .lang-globe { width: 16px; height: 16px; color: var(--navy); flex: none; }
.lang-toggle .caret { width: 12px; height: 12px; flex: none; transition: transform .15s ease; }
.lang-switch--compact:hover .caret, .lang-switch--compact:focus-within .caret, .lang-switch--compact.open .caret { transform: rotate(180deg); }
.lang-dropdown {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 160px; padding: 6px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .15s, transform .15s, visibility .15s;
}
/* Bridges the gap under the button so the pointer can reach the list. */
.lang-dropdown::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }
.lang-switch--compact:hover .lang-dropdown, .lang-switch--compact:focus-within .lang-dropdown, .lang-switch--compact.open .lang-dropdown {
  opacity: 1; visibility: visible; transform: none;
}
.lang-switch--compact .lang-dropdown a, .lang-switch--compact .lang-current {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px; border-radius: 8px;
  font-size: .92rem; font-weight: 700; color: var(--navy); text-decoration: none; white-space: nowrap;
}
.lang-dropdown b { min-width: 1.6em; font-size: .78rem; color: var(--muted); }
.lang-switch--compact .lang-dropdown a:hover { background: var(--bg-soft); color: var(--navy); text-decoration: none; }
.lang-switch--compact .lang-current { background: var(--bg-soft); box-shadow: inset 3px 0 0 var(--coral); }
@media (max-width: 1023px) {
  .lang-switch--compact { display: inline-flex; }
  .lang-switch--compact + .header-quick-cta { margin-left: 0; }
}
/* Phones: the globe alone (the list names each language), so the logo keeps its room. */
@media (max-width: 600px) {
  .lang-switch--compact { margin: 0 2px 0 auto; }
  .lang-toggle { padding: 0 9px; }
  .lang-toggle .caret, .lang-toggle .lang-code { display: none; }
}

/* ── 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: .72rem; 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(--bg-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(26, 51, 99, .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: 6px 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: 700;
  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(--coral-strong); box-shadow: inset 3px 0 0 var(--coral); padding-left: 12px; }
.msub-toggle .caret { width: 16px; height: 16px; color: var(--coral); 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: 600;
}
.mobile-menu .msub-inner a[aria-current="page"] { box-shadow: none; border-left-color: var(--coral); }
.lang-switch--mobile {
  display: flex; flex-wrap: wrap; gap: 8px 12px; margin: 0; padding: 14px 2px;
  border: 0; border-bottom: 1px solid var(--line); border-radius: 0; font-size: 1rem;
}
.lang-switch--mobile > svg { width: 18px; height: 18px; }
.lang-switch--mobile .lang-options { gap: 12px; }
.mobile-menu .lang-switch a:not(.btn) { display: inline; width: auto; padding: 0; border: 0; font-weight: 700; }
.mobile-menu .lang-switch a.mobile-lang { padding-left: 12px; border-left: 1.5px solid var(--line); }
.mobile-menu-ctas { display: grid; gap: 10px; margin-top: 18px; }
.mobile-menu-label { font-size: .76rem; font-weight: 800; letter-spacing: .14em; color: var(--muted); padding: 16px 2px 4px; }
.msub-inner .mobile-menu-label { margin-left: 10px; padding-left: 16px; }
.mobile-menu-ctas .btn { width: 100%; }

.mobile-menu-scroll > * { opacity: 0; transform: translateY(-10px); transition: opacity .28s ease, transform .28s ease; }
.menu-open .mobile-menu-scroll > * { opacity: 1; transform: none; transition-delay: calc(60ms + var(--i, 9) * 35ms); }
.mobile-menu-scroll > :nth-child(1) { --i: 0; }
.mobile-menu-scroll > :nth-child(2) { --i: 1; }
.mobile-menu-scroll > :nth-child(3) { --i: 2; }
.mobile-menu-scroll > :nth-child(4) { --i: 3; }
.mobile-menu-scroll > :nth-child(5) { --i: 4; }
.mobile-menu-scroll > :nth-child(6) { --i: 5; }
.mobile-menu-scroll > :nth-child(7) { --i: 6; }
.mobile-menu-scroll > :nth-child(8) { --i: 7; }

/* ── 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: .04em; border-radius: 999px; text-align: center;
  transition: background .15s ease, transform .15s ease, border-color .15s ease;
}
.btn svg { width: 20px; height: 20px; flex: 0 0 auto; }
.btn-primary {
  background: var(--coral-strong); color: #fff;
  padding: 14px 30px; font-size: 1.05rem;
  box-shadow: 0 6px 18px rgba(200, 67, 47, .32);
}
.btn-primary:hover { background: var(--coral-hover); color: #fff; transform: translateY(-1px); }
.btn-small { padding: 9px 18px; font-size: .92rem; box-shadow: none; }
/* LINE is the secondary channel: outlined, so the quote button stays the one filled
   call to action. White label on the navy sections it sits in; on light panels (the
   mobile menu) a dark LINE green that keeps AA contrast. */
.btn-line {
  background: transparent; color: #fff; border: 2px solid #06c755;
  padding: 12px 26px; font-size: 1rem;
}
.btn-line svg { color: #06c755; }
.btn-line:hover { background: rgba(6, 199, 85, .14); color: #fff; }
.mobile-menu .btn-line { background: #fff; color: #05753a; }
.mobile-menu .btn-line:hover { background: #effaf3; color: #05753a; }
.btn-ghost {
  background: transparent; color: #fff; border: 2px solid rgba(255, 255, 255, .6);
  padding: 12px 26px; font-size: 1rem;
}
.btn-ghost:hover { border-color: #fff; background: rgba(255, 255, 255, .08); color: #fff; }
.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; }

/* ── Hero ───────────────────────────────────────────── */
.hero {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 60%, var(--navy-deep) 100%);
  color: #fff; padding: 64px 0 56px;
}
.hero .container { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; }
.hero--media { padding: 0; }
.hero--media .container { max-width: 1220px; grid-template-columns: 1.1fr .9fr; align-items: stretch; }
.hero-copy {
  padding: 64px 0 56px;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
}
.hero-kicker {
  display: inline-block; background: rgba(224, 85, 63, .18); color: #ffc2b5;
  border: 1px solid rgba(224, 85, 63, .5);
  font-size: .85rem; font-weight: 700; letter-spacing: .12em;
  padding: 5px 14px; border-radius: 999px; margin-bottom: 18px;
}
.hero h1 { font-size: clamp(1.85rem, 4.2vw, 2.9rem); line-height: 1.32; font-weight: 800; margin-bottom: 18px; }
.hero-motto { font-size: clamp(1.05rem, 2vw, 1.25rem); color: #ffd7cc; font-weight: 700; letter-spacing: .12em; margin-bottom: 14px; }
.hero p.lead { font-size: 1.1rem; color: #d3dcec; margin-bottom: 28px; max-width: 33em; }
.hero p a:not(.btn) { color: #fff; text-decoration-color: rgba(255, 255, 255, .5); text-underline-offset: 3px; }
.hero p a:not(.btn):hover { color: #ffd7cc; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 26px; }
.hero-alt { font-size: .95rem; color: #c3cee2; margin: -12px 0 22px; }
.hero-alt a { color: #fff; font-weight: 700; text-underline-offset: 3px; }
.hero-alt a:hover { color: #ffd7cc; }
.hero-trust { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: .93rem; color: #c3cee2; }
.hero-trust li { display: inline-flex; align-items: center; gap: 6px; }
.hero-trust svg { width: 16px; height: 16px; color: #7fd4a8; }

/* Photo backdrop under a navy scrim (shared with 886JetPet). The scrim is what keeps
   white copy above AA contrast over a bright outdoor photo: don't lighten it. */
.hero--photo { position: relative; overflow: hidden; }
.hero--photo > .container { position: relative; z-index: 2; }
.hero-banner { display: block; position: absolute; inset: 0; z-index: 0; }
.hero-banner img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 46%; }
.hero--photo::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg, rgba(11, 25, 54, .95) 0%, rgba(11, 25, 54, .90) 45%, rgba(11, 25, 54, .82) 100%);
}


/* Guide / inner-page hero */
.hero--guide { padding: 48px 0 44px; }
.hero--guide .container { display: block; max-width: 880px; }
.hero--guide p.lead { margin-bottom: 0; max-width: none; }
.hero--guide .hero-ctas { margin: 26px 0 0; }
/* Under the quote button on ad landing pages: the form opens on orppio.com. */
.quote-note { margin: 12px 0 0; font-size: .88rem; color: #b8c4da; max-width: 60ch; }

.breadcrumbs { font-size: .88rem; color: #b8c4da; margin-bottom: 16px; }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 0; }
.breadcrumbs li:not(:last-child)::after { content: "/"; margin: 0 9px; color: #6f7f9a; }
.breadcrumbs a { color: #d3dcec; text-decoration: none; }
.breadcrumbs a:hover { color: #fff; text-decoration: underline; }

/* ── Sections ───────────────────────────────────────── */
section { padding: 64px 0; }
.section-title { font-size: clamp(1.5rem, 3vw, 2.05rem); color: var(--navy); font-weight: 800; text-align: center; margin-bottom: 12px; }
.section-sub { text-align: center; color: var(--muted); max-width: 40em; margin: 0 auto 40px; }
.bg-soft { background: var(--bg-soft); }
.center { text-align: center; }
.section-cta { margin-top: 32px; text-align: center; }

/* Card grid (benefits, services) */
.benefit-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.benefit-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.benefit-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.benefit {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px 22px; box-shadow: var(--shadow);
}
.benefit-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.benefit-head svg { width: 26px; height: 26px; color: var(--coral); flex: 0 0 auto; }
.benefit h3 { color: var(--navy); font-size: 1.06rem; }
.benefit p { color: var(--muted); font-size: .95rem; }
.benefit .card-link { display: inline-block; margin-top: 10px; font-weight: 700; font-size: .93rem; color: var(--coral-strong); text-decoration: none; }
.benefit .card-link:hover { text-decoration: underline; }
/* A whole card that is one link (article hub, home page reading list). */
a.benefit--link { display: block; text-decoration: none; color: inherit; transition: transform .15s ease, border-color .15s ease; }
a.benefit--link:hover { transform: translateY(-2px); border-color: var(--navy); color: inherit; }
a.benefit--link:hover .card-link { text-decoration: underline; }

/* Destination cards: the route and the one planning fact that drives its calendar. */
.destination-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.destination-card {
  display: flex; flex-direction: column; gap: 8px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px; box-shadow: var(--shadow); text-decoration: none; color: var(--ink);
  transition: transform .15s ease, border-color .15s ease;
}
.destination-card:hover { transform: translateY(-2px); border-color: var(--navy); color: var(--ink); }
.destination-card h3 { color: var(--navy); font-size: 1.12rem; }
.destination-card p { color: var(--muted); font-size: .93rem; flex: 1; }
.destination-card .lead-time {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 6px;
  font-size: .82rem; font-weight: 700; color: var(--coral-hover);
  background: #fff3f0; border: 1px solid #f6cfc6; border-radius: 999px; padding: 3px 11px;
}
.destination-card .lead-time svg { width: 14px; height: 14px; }
.destination-card .go { font-weight: 700; font-size: .92rem; color: var(--navy); }

/* Steps (how it works) */
.steps-grid { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.steps-grid.cols-3 { grid-template-columns: repeat(3, 1fr); max-width: 980px; margin: 0 auto; }
.step {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px; box-shadow: var(--shadow);
}
.step .num {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 10px; margin-bottom: 12px;
  background: color-mix(in srgb, var(--step-c, var(--coral)) 14%, #fff);
  color: var(--step-c, var(--coral-strong)); font-weight: 800; font-size: 1.05rem;
}
.step h3 { color: var(--navy); font-size: 1.04rem; margin-bottom: 6px; }
.step p { color: var(--muted); font-size: .93rem; }

/* Split media section: copy left, full-bleed carousel right */
.media-section { padding: 0; }
.media-section > .container { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: stretch; }
.media-section .media-text { padding: 64px 0; align-self: center; }
.media-section .media-text .section-title, .media-section .media-text .section-sub { text-align: left; margin-left: 0; }
.media-section .media-figure { align-self: center; padding: 48px 0; }

.check-list { list-style: none; display: grid; gap: 10px; }
.check-list li { display: flex; gap: 10px; align-items: flex-start; }
.check-list svg { width: 20px; height: 20px; color: var(--ok); flex: 0 0 auto; margin-top: 4px; }
.check-list b { color: var(--navy); }

/* Navy feature panel (timing warning on the home page, etc.) */
.feature-panel { background: linear-gradient(135deg, var(--navy), var(--navy-dark)); color: #fff; }
.feature-panel .panel { display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: center; }
.feature-panel h2 { font-size: clamp(1.4rem, 3vw, 1.95rem); font-weight: 800; margin-bottom: 14px; }
.feature-panel p { color: #d3dcec; margin-bottom: 14px; }
.feature-panel ul { list-style: none; margin-bottom: 22px; }
.feature-panel ul li { padding: 5px 0 5px 22px; color: #e4eaf4; position: relative; }
.feature-panel ul li::before { content: ""; position: absolute; left: 2px; top: 15px; width: 8px; height: 8px; border-radius: 50%; background: var(--coral); }
.feature-panel a:not(.btn) { color: #fff; }

.hero-panel {
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--radius); padding: 26px;
}
.hero-panel h3 { font-size: 1.02rem; color: #ffc2b5; margin-bottom: 12px; letter-spacing: .08em; }
.hero-panel dl { display: grid; gap: 0; }
.hero-panel dl > div { display: flex; justify-content: space-between; gap: 14px; padding: 10px 0; border-bottom: 1px dashed rgba(255, 255, 255, .14); }
.hero-panel dl > div:last-child { border-bottom: 0; }
.hero-panel dt { color: #e4eaf4; }
.hero-panel dd { color: #fff; font-weight: 700; white-space: nowrap; }
.hero-panel .panel-note { font-size: .82rem; color: #aebbd6; margin: 12px 0 0; }

/* ── FAQ ────────────────────────────────────────────── */
.faq-list { max-width: 780px; margin: 0 auto; }
.faq-list details {
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  margin-bottom: 12px; overflow: hidden;
}
.faq-list summary {
  cursor: pointer; list-style: none; padding: 16px 20px; font-weight: 700; color: var(--navy);
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; font-size: 1.4rem; line-height: 1; color: var(--coral-strong); flex: 0 0 auto; }
.faq-list details[open] summary::after { content: "−"; }
.faq-list .faq-answer { padding: 0 20px 18px; color: var(--ink); font-size: .97rem; }
.faq-list .faq-answer p + p { margin-top: 8px; }
.faq-group { max-width: 780px; margin: 0 auto; }
.faq-group + .faq-group { margin-top: 36px; }
.faq-group h2 { color: var(--navy); font-size: 1.25rem; margin-bottom: 14px; }

/* ── Contact ────────────────────────────────────────── */
.contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.contact-card {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px 20px; box-shadow: var(--shadow); text-decoration: none; color: var(--ink);
  transition: transform .15s ease, border-color .15s ease;
}
a.contact-card:hover { transform: translateY(-2px); border-color: var(--navy); color: var(--ink); }
.contact-card svg { width: 34px; height: 34px; color: var(--coral); margin-bottom: 4px; }
.contact-card--line svg { color: #06c755; }
.contact-card h2, .contact-card h3 { color: var(--navy); font-size: 1.08rem; }
.contact-card p { color: var(--muted); font-size: .93rem; overflow-wrap: anywhere; }
.contact-card .contact-action { margin-top: 6px; font-weight: 700; color: var(--coral-strong); }
.config-note {
  max-width: 720px; margin: 24px auto 0; padding: 16px 18px; border-radius: 12px;
  background: #fffaf0; border: 1px dashed #e0b45a; color: #6b4c12; font-size: .92rem;
}

/* ── Photos ─────────────────────────────────────────── */
.photo { border-radius: var(--radius); overflow: hidden; background: var(--line); }
.photo img { width: 100%; height: 100%; object-fit: cover; }
/* Two portraits over one landscape: the media column of split sections. */
.photo-mosaic { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-content: center; }
.photo-mosaic .photo:nth-child(1), .photo-mosaic .photo:nth-child(2) { aspect-ratio: 4 / 5; }
.photo-mosaic .photo:nth-child(3) { grid-column: 1 / -1; aspect-ratio: 5 / 3; }

/* ── Bottom CTA ─────────────────────────────────────── */
.bottom-cta { background: linear-gradient(135deg, var(--navy), var(--navy-dark)); color: #fff; text-align: center; }
.bottom-cta h2 { font-size: clamp(1.45rem, 3vw, 2rem); font-weight: 800; margin-bottom: 12px; }
.bottom-cta p { color: #d3dcec; margin: 0 auto 26px; max-width: 36em; }
.bottom-cta .hero-ctas { justify-content: center; margin-bottom: 0; }

/* ── Footer ─────────────────────────────────────────── */
.site-footer { background: var(--navy-deep); color: #a9b7cf; padding: 46px 0 28px; font-size: .9rem; }
.site-footer a { color: #d3dcec; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 28px; margin-bottom: 30px; }
.footer-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.footer-logo .brand-mark { width: 56px; height: 56px; flex: none; }
.footer-logo .brand-logo { height: 46px; width: auto; }
.footer-motto { color: #fff; font-weight: 700; letter-spacing: .12em; margin-bottom: 8px; }
.footer-brand p { max-width: 28em; }
.footer-col h2 { color: #fff; font-size: .92rem; font-weight: 700; letter-spacing: .12em; margin-bottom: 12px; }
.footer-col a { display: block; margin-bottom: 9px; }
.footer-base {
  border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 20px;
  display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between;
}
.footer-company { font-size: .84rem; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 8px 20px; }

/* ── Guide pages (destinations, services) ───────────── */
.guide-body { max-width: 880px; margin: 0 auto; }
.guide-body > section { padding: 44px 0 0; }
.guide-body > section:last-child { padding-bottom: 60px; }
.guide-body h2 { color: var(--navy); font-size: clamp(1.3rem, 2.6vw, 1.65rem); font-weight: 800; margin-bottom: 12px; }
.guide-body h3 { color: var(--navy); font-size: 1.1rem; margin: 22px 0 8px; }
.guide-body p { margin-bottom: 14px; }
.guide-body h2 + p.intro { color: var(--muted); }
.guide-body [id] { scroll-margin-top: 90px; }
.guide-list { margin: 0 0 18px 22px; }
.guide-list li { margin-bottom: 7px; }
.guide-list b { color: var(--navy); }
.guide-note { font-size: .88rem; color: var(--muted); margin-top: 12px; }
.guide-note a { font-weight: 600; }

.guide-updated { display: flex; align-items: center; gap: 8px; margin-top: 16px; font-size: .88rem; color: var(--muted); }
.guide-updated svg { width: 16px; height: 16px; flex: 0 0 auto; color: #2e9e6b; }
.hero .guide-updated { color: #c3cee2; }
.hero .guide-updated svg { color: #7fd4a8; }

.toc { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 22px; margin-top: 36px; }
.toc h2 { font-size: 1rem; margin-bottom: 8px; }
.toc ol { margin-left: 20px; display: grid; gap: 4px; }
.toc a { font-weight: 600; }

.table-wrap { overflow-x: auto; margin-top: 18px; -webkit-overflow-scrolling: touch; }
.guide-table {
  width: 100%; border-collapse: collapse; font-size: .94rem;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow); min-width: 560px;
}
.guide-table th { background: var(--navy); color: #fff; text-align: left; padding: 12px 16px; font-size: .9rem; letter-spacing: .06em; }
.guide-table td { padding: 13px 16px; border-top: 1px solid var(--line); vertical-align: top; }
.guide-table tbody tr:nth-child(even) { background: var(--bg-soft); }
.guide-table td:first-child { font-weight: 700; color: var(--navy); min-width: 6.5em; }
.guide-table td em { font-weight: 700; color: var(--coral-strong); }

.window-chip {
  display: inline-block; background: rgba(224, 85, 63, .1); color: var(--coral-strong);
  border: 1px solid rgba(224, 85, 63, .35); border-radius: 14px; max-width: 100%;
  font-size: .8rem; font-weight: 700; padding: 1px 10px; letter-spacing: 0;
}

.timeline { list-style: none; counter-reset: tstep; margin-top: 26px; }
.timeline > li { counter-increment: tstep; position: relative; padding: 0 0 30px 62px; }
.timeline > li::before {
  content: counter(tstep); position: absolute; left: 0; top: 0;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--navy); color: #fff; font-weight: 800; font-size: 1.05rem;
  display: flex; align-items: center; justify-content: center;
}
.timeline > li::after { content: ""; position: absolute; left: 20px; top: 48px; bottom: 6px; border-left: 2px dashed var(--line); }
.timeline > li:last-child { padding-bottom: 0; }
.timeline > li:last-child::after { display: none; }
.timeline h3 { color: var(--navy); font-size: 1.08rem; margin: 6px 0 6px; }
.timeline h3 .window-chip { margin-left: 8px; vertical-align: 2px; }
.timeline p { color: var(--ink); font-size: .97rem; margin-bottom: 6px; }

.callout {
  background: var(--bg-soft); border: 1px solid var(--line); border-left: 5px solid var(--navy);
  border-radius: 10px; padding: 16px 18px; margin-top: 16px; font-size: .95rem;
}
.callout-risk { background: #fdf1ee; border-color: #f5cdc4; border-left-color: var(--coral); color: #6e2a1d; }
.callout-risk b { color: var(--coral-hover); }
.callout p:last-child { margin-bottom: 0; }

.sources { font-size: .9rem; }
.sources li { margin-bottom: 6px; }
.sources a { overflow-wrap: anywhere; }

/* The calm "let us handle it" card placed mid-guide (from 886JetPet's guides). */
.service-intro {
  background: var(--bg-soft); border: 1px solid var(--line);
  border-left: 5px solid var(--coral); border-radius: var(--radius);
}
.guide-body > section.service-intro { padding: 26px clamp(18px, 3.5vw, 32px); margin-top: 44px; }
.service-intro h2 { font-size: 1.22rem; }
.service-intro .hero-ctas { margin: 18px 0 0; }

.route-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.route-pills a {
  display: inline-block; padding: 8px 16px; border-radius: 999px;
  border: 1.5px solid var(--line); background: var(--bg-soft);
  font-weight: 700; font-size: .92rem; color: var(--navy); text-decoration: none;
  transition: border-color .15s, color .15s, transform .15s;
}
.related-subtitle { margin-top: 26px; }
.route-pills a:hover { border-color: var(--coral); color: var(--coral-strong); transform: translateY(-1px); }

/* Services page: one section per service, icon + body */
.service-block { display: grid; grid-template-columns: 56px 1fr; gap: 18px; padding: 34px 0; border-top: 1px solid var(--line); }
.service-block:first-of-type { border-top: 0; }
.service-block > div { min-width: 0; }
.service-block .service-icon {
  width: 56px; height: 56px; border-radius: 16px; display: flex; align-items: center; justify-content: center;
  background: rgba(224, 85, 63, .1); color: var(--coral-strong);
}
.service-block .service-icon svg { width: 28px; height: 28px; }
.service-block h2 { margin-bottom: 8px; }
.guide-body > section.service-block { padding: 34px 0; }

/* Legal prose */
.legal-body h2 { font-size: 1.2rem; margin: 30px 0 10px; }
.legal-body ul, .legal-body ol { margin: 0 0 14px 22px; }
.legal-body li { margin-bottom: 7px; }
.legal-meta { font-size: .88rem; color: var(--muted); }
.review-flag {
  background: #fffaf0; border: 1px dashed #e0b45a; color: #6b4c12; border-radius: 10px;
  padding: 12px 16px; font-size: .9rem; margin-top: 18px;
}
.company-facts { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; margin-top: 10px; }
.company-facts dt { font-weight: 700; color: var(--navy); }

/* 404 */
.nf-section { padding: 64px 0 80px; text-align: center; }
.nf-section h1 { font-size: clamp(1.7rem, 4vw, 2.4rem); font-weight: 800; color: var(--navy); margin-bottom: 12px; }
.nf-section .nf-lead { color: var(--muted); font-size: 1.08rem; max-width: 34em; margin: 0 auto 30px; }
.nf-section .route-pills { justify-content: center; margin-top: 30px; }
.nf-ctas { justify-content: center; }

/* ── Responsive ─────────────────────────────────────── */
@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; }

  .hero .container { grid-template-columns: 1fr; gap: 30px; }
  .hero--media .container { gap: 26px; }
  .hero-copy { padding: 44px 0 8px; }

  .media-section > .container { grid-template-columns: 1fr; gap: 0; }
  .media-section .media-text { padding: 44px 0 28px; }
  .media-section .media-figure { padding: 0 0 44px; max-width: 560px; }
  .benefit-grid, .benefit-grid.cols-3 { grid-template-columns: 1fr 1fr; }
  .destination-grid { grid-template-columns: 1fr 1fr; }
  .steps-grid { grid-template-columns: 1fr 1fr; }
  .steps-grid.cols-3 { grid-template-columns: 1fr; max-width: 560px; }
  .feature-panel .panel { grid-template-columns: 1fr; gap: 26px; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
}

@media (max-width: 600px) {
  .container { padding: 0 16px; }
  section { padding: 44px 0; }
  .section-sub { margin-bottom: 28px; }
  .site-header > .container { padding-top: 8px; padding-bottom: 8px; }
  .brand { gap: 8px; }
  .brand-mark { width: 44px; height: 44px; }
  .brand-logo { height: 38px; }
  .site-header .header-quick-cta { padding: 8px 14px; font-size: .86rem; letter-spacing: .02em; }

  .hero-copy { padding: 34px 0 4px; }
  .hero p.lead { font-size: 1.02rem; margin-bottom: 22px; }
  .hero-ctas { flex-direction: column; width: 100%; }
  .hero-ctas .btn { width: 100%; }
  .hero-trust { gap: 6px 16px; font-size: .86rem; }
  .hero-panel { padding: 20px 16px; }

  .benefit-grid, .benefit-grid.cols-2, .benefit-grid.cols-3,
  .destination-grid, .steps-grid { grid-template-columns: 1fr; }
  .benefit { padding: 20px 18px; }

  .destination-card p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .service-block { grid-template-columns: 1fr; gap: 12px; }
  .timeline > li { padding-left: 54px; }
  .timeline > li::before { width: 38px; height: 38px; }
  .timeline > li::after { left: 18px; }

  .bottom-cta .btn { width: 100%; max-width: 360px; }
  .footer-cols { grid-template-columns: 1fr; gap: 26px; }
  .footer-base { flex-direction: column; align-items: flex-start; }
  .company-facts { grid-template-columns: 1fr; gap: 2px; }
  .company-facts dd { margin-bottom: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; transition-delay: 0s !important; }
}

@media (prefers-contrast: more) {
  .hero--photo::after { background: rgba(11, 25, 54, .96); }
}

/* ══ Landing page components shared with 886JetPet ═══════════════════════════ */

/* Section h2 with a coral first line ("為什麼選擇可可飛？") */
.section-kicker { display: block; font-size: .78em; color: var(--coral-strong); margin-bottom: 4px; letter-spacing: .08em; }
.hero h1 em { font-style: normal; color: #ff8a73; }
.why-cta { margin-top: 30px; }
.why-benefits { margin-top: 48px; }

/* Photo carousel (gallery_controller.js) */
.gallery-wrap { position: relative; }
.gallery-track {
  display: flex; gap: 14px; overflow-x: auto;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  padding: 4px 4px 16px; scrollbar-width: none;
}
.gallery-track::-webkit-scrollbar { display: none; }
.gallery-card {
  flex: 0 0 auto; width: clamp(220px, 23vw, 250px); aspect-ratio: 4 / 5;
  overflow: hidden; scroll-snap-align: center; background: var(--line);
}
.gallery-card img { width: 100%; height: 100%; object-fit: cover; }
.gallery-btn {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid rgba(18, 36, 74, .65); background: rgba(26, 51, 99, .55); color: #fff;
  font-size: 1.3rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow); transition: background .15s;
}
.gallery-btn:hover { background: rgba(26, 51, 99, .85); }
.gallery-btn.prev { left: -10px; }
.gallery-btn.next { right: -10px; }
/* One full-bleed slide at a time (hero and split sections) */
.gallery--hero { height: 100%; }
.gallery--hero .gallery-track { height: 100%; gap: 0; padding: 0; }
.gallery--hero .gallery-card {
  flex: 0 0 100%; width: 100%; height: 100%; aspect-ratio: auto;
  scroll-snap-align: start; scroll-snap-stop: always;
}
.gallery--hero .gallery-btn.prev { left: 12px; }
.gallery--hero .gallery-btn.next { right: 12px; }
.hero-media { align-self: stretch; display: flex; flex-direction: column; min-height: 0; position: relative; z-index: 2; }
.hero-media .gallery-wrap { flex: 1; min-height: 0; }
.hero--media .hero-copy { padding: 72px 0 64px; }
.media-section .media-figure:has(.gallery-wrap) { align-self: stretch; display: flex; flex-direction: column; min-height: 520px; padding: 0; }
.media-section .media-figure .gallery-wrap { flex: 1; min-height: 0; }

/* The client portal, shown as it really looks: a browser window with the desktop
   screenshot, and a phone with the mobile one overlapping its corner. */
.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 24px 60px rgba(26, 51, 99, .18);
}
.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%; background: #d3dbe6; }
.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; letter-spacing: 0;
}
.dash-frame picture, .portal-phone picture { display: block; }
.dash-frame img { width: 100%; height: auto; }
.portal-phone {
  position: absolute; right: 0; bottom: 0; width: 200px;
  padding: 8px; background: #101826; border-radius: 30px;
  box-shadow: 0 24px 50px rgba(13, 27, 56, .35);
}
.portal-phone img { width: 100%; height: auto; border-radius: 23px; }
.portal-caption { color: var(--muted); font-size: .85rem; margin-top: 14px; max-width: calc(100% - 250px); }
.dash-points {
  list-style: none; display: flex; justify-content: center; gap: 14px 30px;
  flex-wrap: wrap; margin: 30px auto 0; max-width: 980px;
}
.dash-points li { display: flex; align-items: center; gap: 9px; font-size: .96rem; font-weight: 700; color: var(--ink); }
.dash-points svg { width: 20px; height: 20px; color: var(--coral); flex: 0 0 auto; }

/* Home "start here": every route and article as pills under the six cards */
.home-routes { margin-top: 36px; }
.home-routes-title { color: var(--navy); font-size: 1rem; margin: 20px 0 12px; text-align: center; }
.home-routes .route-pills { justify-content: center; }
.home-routes .route-pills a { background: #fff; }
.route-pills .flag-label { gap: 6px; }

/* Client segments (who-we-serve) */
.client-list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.client-list li {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px; box-shadow: 0 4px 14px rgba(26, 51, 99, .06);
}
.client-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.client-icon {
  width: 36px; height: 36px; flex: 0 0 auto; border-radius: 10px;
  background: rgba(224, 85, 63, .12); color: var(--coral-strong);
  display: flex; align-items: center; justify-content: center;
}
.client-icon svg { width: 19px; height: 19px; }
.client-list h3 { color: var(--navy); font-size: 1rem; line-height: 1.4; }
.client-list p { color: var(--muted); font-size: .9rem; line-height: 1.65; }

/* Air-cargo panel */
.cargo-cta { background: linear-gradient(135deg, var(--navy), var(--navy-dark)); color: #fff; }
.cargo-cta .panel { display: grid; grid-template-columns: 1.2fr .8fr; gap: 40px; align-items: center; }
.cargo-cta h2 { font-size: clamp(1.4rem, 3vw, 1.95rem); font-weight: 800; margin-bottom: 16px; }
.cargo-cta h2 em { font-style: normal; color: #ff8a73; }
.cargo-cta ul { list-style: none; margin-bottom: 24px; }
.cargo-cta ul li { padding: 5px 0; color: #e4eaf4; }
.cargo-cta ul li::before { content: "→ "; color: #ff8a73; font-weight: 800; }
.cargo-steps { list-style: none; counter-reset: cstep; }
.cargo-steps li {
  counter-increment: cstep; display: flex; gap: 14px; align-items: flex-start;
  padding: 10px 0; border-bottom: 1px dashed rgba(255, 255, 255, .14); color: #e4eaf4;
}
.cargo-steps li:last-child { border-bottom: 0; }
.cargo-steps li::before {
  content: counter(cstep); flex: 0 0 28px; height: 28px; border-radius: 50%;
  background: var(--coral-strong); color: #fff; font-weight: 800; font-size: .9rem;
  display: flex; align-items: center; justify-content: center; margin-top: 1px;
}
.cargo-cta .panel-note a { color: #fff; }

/* Route directory (/destinations), as on 886JetPet's pet-travel hub */
.route-search { position: relative; max-width: 440px; margin: 0 auto 26px; }
.route-search svg {
  position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
  width: 17px; height: 17px; color: var(--muted); pointer-events: none;
}
.route-search input {
  width: 100%; padding: 12px 16px 12px 44px; border: 1px solid var(--line); border-radius: 999px;
  font: inherit; font-size: 1rem; color: var(--ink); background: #fff; box-shadow: var(--shadow);
}
.route-search input:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(26, 51, 99, .14); }
.route-search-hit { background: #fff2a8; color: inherit; border-radius: 2px; }
.corridor-directory {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 22px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 14px 16px 18px;
}
.corridor-group { min-width: 0; }
.corridor-region {
  display: flex; align-items: baseline; gap: 6px; padding: 8px 10px 4px;
  font-size: .78rem; font-weight: 800; letter-spacing: .14em; color: var(--muted);
}
.corridor-region span { font-weight: 600; opacity: .75; letter-spacing: 0; }
.corridor-link {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px;
  text-decoration: none; transition: background .15s ease;
}
.corridor-link:hover { background: var(--bg-soft); }
.corridor-name { flex: 1 1 auto; min-width: 0; font-size: .97rem; font-weight: 700; color: var(--ink); }
.corridor-link:hover .corridor-name { color: var(--navy); }
.corridor-go { flex: 0 0 auto; color: var(--coral); font-weight: 800; opacity: .55; transform: translateX(-3px); transition: transform .15s, opacity .15s; }
.corridor-link:hover .corridor-go, .corridor-link:focus-visible .corridor-go { opacity: 1; transform: none; }
.route-no-results { text-align: center; padding: 40px 20px; border: 1px dashed var(--line); border-radius: var(--radius); color: var(--muted); margin-top: 18px; }
.route-no-results b { color: var(--navy); }
.route-custom { margin-top: 22px; }

@media (max-width: 1023px) {
  .hero--media .hero-copy { padding: 44px 0 8px; }
  .hero-media { margin: 0 -20px; }
  .gallery--hero, .gallery--hero .gallery-track { height: auto; }
  .gallery--hero .gallery-card { height: auto; aspect-ratio: 4 / 5; }
  .media-section .media-figure:has(.gallery-wrap) { min-height: 0; margin: 0 -20px; max-width: none; }
  .corridor-directory { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cargo-cta .panel { grid-template-columns: 1fr; gap: 26px; }
  .portal-showcase { padding: 0 40px 30px 0; }
  .portal-phone { width: 160px; border-radius: 24px; padding: 6px; }
  .portal-phone img { border-radius: 19px; }
}

@media (max-width: 600px) {
  .hero-media { margin: 0 -16px; }
  .media-section .media-figure:has(.gallery-wrap) { margin: 0 -16px; }
  .gallery--hero .gallery-card { aspect-ratio: 4 / 4.6; }
  .client-list { grid-template-columns: 1fr; }
  .corridor-directory { grid-template-columns: 1fr; padding: 8px 10px 12px; }
  /* Phones see the portal as they would use it: the mobile screenshot, framed. */
  .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); }
  .dash-points { flex-direction: column; align-items: flex-start; gap: 12px; max-width: 320px; }
  .why-cta .btn { width: 100%; max-width: 360px; }
}
@media (max-width: 1023px) { .portal-caption { max-width: calc(100% - 190px); } }
@media (max-width: 600px) { .portal-caption { max-width: none; text-align: center; margin-top: 16px; } }

/* ── Article hubs: topic sections, related cards ───────────────── */
.topic-nav { margin-bottom: 8px; }
.topic-title { color: var(--navy); font-size: 1.2rem; margin: 40px 0 16px; padding-left: 12px; border-left: 4px solid var(--coral); scroll-margin-top: 90px; }
.benefit h4 { color: var(--navy); font-size: 1.06rem; }
.related-grid .benefit h3 { margin-bottom: 6px; }
.guide-table small { color: var(--muted); font-size: .8rem; }
.nav-dropdown--wide a.dd-more { color: var(--coral-strong); font-size: .86rem; }

/* A copyable letter or email template inside a guide. */
.letter-template { background: #fff; border-left-color: var(--navy); overflow-wrap: anywhere; }
.letter-template p { margin-bottom: 10px; }

/* ── Home route selector (pages/_route_finder, route_finder_controller.js) ──
   A white card with a short coral rule on its top edge. Two field tiles (departure, destination)
   joined by a round plane badge that turns navy once the route is complete, then the quote button.
   It opens the white part of the page under the hero; z-index lets an open country list run over the
   section below. */
/* The same space above and below the card, so it sits centred in its white band. */
.route-finder { position: relative; z-index: 3; padding: 52px 0; scroll-margin-top: 92px; }
.rf-card {
  position: relative; background: #fff; border: 1px solid var(--line); border-radius: 18px;
  padding: 26px 30px 16px;
  box-shadow: 0 24px 60px rgba(13, 27, 56, .14), 0 2px 6px rgba(13, 27, 56, .05);
}
.rf-card::before {
  content: ""; position: absolute; left: 30px; top: -2px; width: 64px; height: 4px; border-radius: 2px;
  background: linear-gradient(90deg, var(--coral) 0 62%, var(--navy) 0);
}
.rf-head { margin-bottom: 18px; }
.rf-title { font-size: clamp(1.2rem, 2.2vw, 1.45rem); font-weight: 800; color: var(--navy); }
.rf-title:focus { outline: none; }
.rf-sub { margin-top: 4px; color: var(--muted); font-size: .97rem; max-width: 46em; }

.rf-grid {
  display: grid; align-items: center; gap: 0 10px;
  grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr) auto;
  grid-template-areas: "from badge to go" "status status status status";
}
.rf-field--from { grid-area: from; }
.rf-field--to { grid-area: to; }
.rf-badge { grid-area: badge; }
.rf-go { grid-area: go; }
.rf-status { grid-area: status; }

.rf-field {
  position: relative; display: flex; flex-direction: column; justify-content: center; min-width: 0;
  min-height: 64px; padding: 8px 44px 8px 16px; border-radius: 12px; cursor: text;
  background: var(--bg-soft); border: 1.5px solid var(--line);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
  scroll-margin-top: 104px; -webkit-tap-highlight-color: rgba(26, 51, 99, .1);
}
.rf-field:hover { border-color: #b7c1d4; }
.rf-field:focus-within, .rf-field.is-open {
  background: #fff; border-color: var(--navy); box-shadow: 0 0 0 4px rgba(26, 51, 99, .14);
}
.rf-label { font-size: .8rem; font-weight: 700; color: var(--muted); line-height: 1.3; cursor: inherit; }
.rf-input {
  width: 100%; min-width: 0; padding: 2px 0 0; border: 0; background: transparent; outline: none;
  font: inherit; font-size: 1.06rem; font-weight: 700; line-height: 1.4; color: var(--navy);
  text-overflow: ellipsis; cursor: inherit;
}
/* The tile carries the focus ring (border and halo above), not the bare text field inside it. */
.rf-input:focus-visible { outline: none; }
.rf-input::placeholder { color: var(--muted); font-weight: 500; opacity: 1; }
.rf-caret {
  position: absolute; right: 14px; top: 50%; width: 18px; height: 18px; margin-top: -9px;
  color: var(--muted); pointer-events: none; transition: transform .2s ease;
}
.rf-field.is-open .rf-caret { transform: rotate(180deg); color: var(--navy); }
/* Waiting for the departure: visibly unavailable, still readable. */
.rf-field.is-waiting { background: #eef1f5; border-style: dashed; cursor: not-allowed; padding-right: 16px; }
.rf-field.is-waiting:hover { border-color: var(--line); }
.rf-input:disabled { cursor: inherit; opacity: 1; -webkit-text-fill-color: currentColor; }
.rf-field.is-waiting .rf-caret { display: none; }
.rf-field.is-waiting .rf-input::placeholder { font-size: .94rem; }
/* Fixed to Taiwan (any other departure): a quiet confirmed state with a tick. */
.rf-field.is-fixed { background: #e9eef7; border-color: #c9d4e8; cursor: default; }
.rf-field.is-fixed .rf-caret { display: none; }
.rf-field.is-fixed::after {
  content: ""; position: absolute; right: 19px; top: 50%; width: 6px; height: 12px; margin-top: -8px;
  border: solid var(--navy); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
}

.rf-badge {
  justify-self: center; position: relative; z-index: 2;
  width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1.5px solid var(--line); color: var(--coral-strong);
  box-shadow: 0 4px 12px rgba(26, 51, 99, .08);
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
/* The plane icon points up and to the right: turned to follow the route. */
.rf-badge svg { width: 19px; height: 19px; transform: rotate(45deg); }
.rf-card.is-complete .rf-badge { background: var(--navy); border-color: var(--navy); color: #fff; }
.rf-card.is-leaving .rf-badge svg { animation: rf-takeoff .65s cubic-bezier(.4, 0, .2, 1) both; }
@keyframes rf-takeoff {
  50% { transform: rotate(45deg) translate(3px, -3px); }
  100% { transform: rotate(45deg); }
}

.rf-go { display: inline-flex; align-items: center; justify-content: center; min-height: 60px; margin-left: 8px; padding: 0 30px; white-space: nowrap; }
.rf-status { min-height: 1.6em; margin-top: 12px; font-size: .9rem; color: var(--muted); }
.rf-card.is-leaving .rf-status { color: var(--navy); font-weight: 700; }
.rf-noscript { margin-top: 6px; font-size: .9rem; color: var(--muted); }

/* The country list: under its field (or above it when the screen has more room there). */
.rf-list {
  position: absolute; z-index: 30; left: -1.5px; right: -1.5px; top: calc(100% + 8px);
  max-height: 340px; overflow-y: auto; overscroll-behavior: contain; padding: 6px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 18px 44px rgba(13, 27, 56, .2); cursor: default;
}
.rf-list[hidden] { display: none; }
.rf-field.is-above .rf-list { top: auto; bottom: calc(100% + 8px); }
.rf-group { padding: 10px 12px 4px; font-size: .76rem; font-weight: 800; letter-spacing: .06em; color: var(--muted); }
.rf-option {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 44px; padding: 10px 12px; border-radius: 8px;
  font-size: .97rem; font-weight: 600; line-height: 1.35; color: var(--ink); cursor: pointer;
  -webkit-tap-highlight-color: rgba(26, 51, 99, .1);
}
.rf-option:hover { background: var(--bg-soft); }
.rf-option.is-active { background: #e9eef7; color: var(--navy); box-shadow: inset 3px 0 0 var(--coral); }
.rf-option[aria-selected="true"] { font-weight: 800; color: var(--navy); }
.rf-option[aria-selected="true"]::after {
  content: ""; flex: none; width: 6px; height: 11px; margin: -3px 4px 0 0;
  border: solid var(--navy); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
}
.rf-empty { padding: 12px; font-size: .93rem; color: var(--muted); }

/* Reached from the header's phone button: one soft ring, so the eye lands on the card. */
.rf-card::after {
  content: ""; position: absolute; inset: -2px; border-radius: inherit; pointer-events: none;
  border: 2px solid var(--coral); opacity: 0;
}
.rf-card.is-glowing::after { animation: rf-glow 1.6s ease-out; }
@keyframes rf-glow {
  0% { opacity: .7; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.025, 1.06); }
}

@media (max-width: 1023px) {
  .route-finder { padding: 36px 0; }
  .rf-grid {
    grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr);
    grid-template-areas: "from badge to" "status status go";
    row-gap: 14px;
  }
  .rf-go { margin-left: 0; width: 100%; }
  .rf-status { margin-top: 0; }
}
@media (max-width: 600px) {
  .route-finder { padding: 24px 0; scroll-margin-top: 72px; }
  .rf-card { padding: 22px 16px 12px; border-radius: 16px; }
  .rf-card::before { left: 16px; width: 56px; }
  .rf-head { margin-bottom: 16px; }
  .rf-title { font-size: 1.22rem; }
  .rf-sub { font-size: .93rem; line-height: 1.55; }
  /* Stacked: the badge sits on the seam between the two tiles, its plane pointing down. */
  .rf-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "from" "badge" "to" "go" "status"; row-gap: 0; }
  .rf-badge { width: 34px; height: 34px; margin: -9px 0; }
  .rf-field--from.is-open + .rf-badge { visibility: hidden; }
  .rf-badge svg { width: 17px; height: 17px; transform: rotate(135deg); }
  @keyframes rf-takeoff {
    50% { transform: rotate(135deg) translate(3px, -3px); }
    100% { transform: rotate(135deg); }
  }
  .rf-field { min-height: 62px; scroll-margin-top: 76px; }
  .rf-go { min-height: 52px; margin-top: 14px; }
  .rf-status { margin-top: 10px; text-align: center; }
}

/* ── Phones: the quote button in place of the wordmark once the page is scrolled ──
   header_dock_controller.js docks the header (.is-docked) as soon as the visitor scrolls down: the
   wordmark folds away to the left while the quote button (.header-docked-cta) opens in its place
   beside the badge. Both grow and shrink together, so the globe and the menu button never move and the header keeps
   its height. Back at the top, the wordmark returns. An open menu keeps the wordmark: it ends with its
   own quote button. The bar's small 免費報價 button is for tablets only. */
.header-docked-cta { display: none; }
@media (max-width: 600px) {
  .site-header .header-quick-cta { display: none; }
  .site-header .brand { transition: gap .45s cubic-bezier(.22, 1, .36, 1); }
  .site-header .brand-logo {
    max-width: 120px; object-fit: cover; object-position: left center;
    transition: max-width .45s cubic-bezier(.22, 1, .36, 1), opacity .3s ease .12s, transform .45s cubic-bezier(.22, 1, .36, 1);
  }
  .header-docked-cta {
    display: inline-flex; align-items: center; justify-content: center;
    flex: 1 1 auto; min-width: 0; max-width: 0; min-height: 44px;
    margin-left: 0; padding: 0; overflow: hidden; white-space: nowrap;
    font-size: .95rem; letter-spacing: .04em; box-shadow: none;
    opacity: 0; visibility: hidden; transform: translateX(10px);
    transition: max-width .45s cubic-bezier(.22, 1, .36, 1), margin .45s cubic-bezier(.22, 1, .36, 1),
                padding .45s cubic-bezier(.22, 1, .36, 1), transform .45s cubic-bezier(.22, 1, .36, 1),
                opacity .2s ease, visibility 0s linear .45s, background .15s ease;
  }
  .header-docked-cta:hover { transform: none; }
  .site-header.is-docked:not(.menu-open) .brand { gap: 0; }
  .site-header.is-docked:not(.menu-open) .brand-logo {
    max-width: 0; opacity: 0; transform: translateX(-12px);
    transition: max-width .45s cubic-bezier(.22, 1, .36, 1), opacity .18s ease, transform .45s cubic-bezier(.22, 1, .36, 1);
  }
  .site-header.is-docked:not(.menu-open) .header-docked-cta {
    max-width: 260px; margin-left: 10px; padding: 0 14px; opacity: 1; visibility: visible; transform: none;
    transition: max-width .45s cubic-bezier(.22, 1, .36, 1), margin .45s cubic-bezier(.22, 1, .36, 1),
                padding .45s cubic-bezier(.22, 1, .36, 1), transform .45s cubic-bezier(.22, 1, .36, 1),
                opacity .3s ease .12s, visibility 0s, background .15s ease;
  }
  /* A page opened already scrolled starts docked, without the animation. */
  .site-header.dock-instant .brand, .site-header.dock-instant .brand-logo,
  .site-header.dock-instant .header-docked-cta { transition: none; }
}
/* The narrowest phones: a little less space between the bar's items and around the words, so 免費取得報價
   fits whole beside the badge, the globe and the menu button. */
@media (max-width: 340px) {
  .site-header > .container { gap: 8px; }
  .site-header.is-docked:not(.menu-open) .header-docked-cta { padding: 0 12px; }
}