/* ──────────────────────────────────────────────────────────────
   886JetPet — shared design system for the server-rendered pages
   (/, /quotation, /cargo, /contact-us)
   ────────────────────────────────────────────────────────────── */

:root {
  --navy: #1a3363;
  --navy-dark: #12244a;
  --coral: #e0553f;
  --coral-dark: #d94836;
  --ink: #24303f;
  --muted: #5c6a7a;
  --line: #dfe5ec;
  --bg-soft: #f4f7fb;
  --ok: #05ba00;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(26, 51, 99, .10);
}

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

html { scroll-behavior: smooth; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  color: var(--ink);
  background: #fff;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
/* <picture> wrappers must be layout-transparent so descendant img rules
   (.brand img, .gallery-card img, …) keep sizing the img directly. */
picture { display: contents; }
a { color: var(--navy); }

.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, .95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
/* Header container is wider than the page container: side margins shrink so
   the navbar keeps room for the menu + CTA on laptop widths. */
.site-header .container {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding-top: 8px; padding-bottom: 8px;
  max-width: 1440px;
}
.brand { display: flex; align-items: center; text-decoration: none; flex: 1; min-width: 0; }
.brand img { margin-right: 0.625rem; height: 44px; width: auto; flex: 0 0 auto; }
.brand-text { display: flex; flex-direction: column; min-width: 0; }
.brand-name { font-weight: 800; color: var(--navy); font-size: 1.14rem; letter-spacing: .2px; line-height: 1.2; }

/* The 886JetPet wordmark wherever it appears in copy: bold, "Jet" in brand
   red. Rendered by ApplicationHelper#jetpet — inherits the surrounding colour
   so it works on light and dark backgrounds alike. */
.brand-886 { font-weight: 700; }
.brand-886 span, .brand-name span { color: #e51d28; }
.brand-tagline {
  font-size: .78rem; font-weight: 400; color: var(--muted);
  letter-spacing: .02em; line-height: 1.35; word-break: keep-all;
}
.brand-tagline em { font-style: italic; font-weight: 700; color: var(--navy); }

.header-actions { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.header-link { font-size: .9rem; font-weight: 700; color: var(--navy); text-decoration: none; white-space: nowrap; padding: 10px 6px; }
.header-link:hover { color: var(--coral); text-decoration: underline; }

/* Primary nav with dropdown menus */
.header-nav { display: flex; align-items: center; gap: 4px; }
.nav-item { position: relative; }
.nav-toggle {
  display: inline-flex; align-items: center; gap: 7px;
  background: none; border: 0; cursor: pointer; font-family: inherit;
  font-size: .9rem; font-weight: 700; color: var(--navy);
  padding: 10px 10px; border-radius: 8px; white-space: nowrap;
}
.nav-toggle:hover { color: var(--coral); }
.nav-toggle .caret { width: 11px; height: 11px; 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: 0; z-index: 60; min-width: 260px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow); padding: 8px;
  opacity: 0; visibility: hidden; transform: translateY(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: translateY(0); }
.nav-dropdown a {
  display: block; padding: 9px 12px; border-radius: 8px;
  font-size: .9rem; font-weight: 600; color: var(--ink);
  text-decoration: none; white-space: nowrap;
}
.nav-dropdown a:hover { background: var(--bg-soft); color: var(--navy); }
.nav-dropdown a small { display: block; font-weight: 400; font-size: .78rem; color: var(--muted); }
.flag {
  width: 16px; height: 12px; object-fit: cover; border-radius: 2px;
  flex: 0 0 auto; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08);
}
/* Keeps a route's flags and text glued together on one line, even inside
   the mobile panel where the surrounding <a> is allowed to wrap. */
.guide-label {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  max-width: 100%;
}
.nav-dropdown .dd-divider { height: 1px; background: var(--line); margin: 6px 4px; }

/* Wide dropdown variant: route groups in three columns. Sized against the
   viewport and scrollable, because the directory now runs to 30+ corridors.
   Right-anchored (rather than the default left) so the menu grows leftward
   from the nav item and can never run off the right edge. */
.nav-dropdown--wide {
  left: auto; right: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px 14px;
  width: min(780px, calc(100vw - 32px)); padding: 12px 14px 14px;
  max-height: min(72vh, 660px); overflow-y: auto; overscroll-behavior: contain;
}
/* Below ~1140px the nav item sits too far left for a 780px menu to clear the
   viewport's left edge, so drop a column. */
@media (max-width: 1140px) {
  .nav-dropdown--wide {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(520px, calc(100vw - 32px));
  }
}
.nav-dropdown--wide .dd-group { min-width: 0; }
.nav-dropdown--wide .dd-span { grid-column: 1 / -1; }
/* A long region (Europe) spans two columns and flows its links internally,
   instead of stretching the whole menu past the fold. */
.nav-dropdown--wide .dd-group--tall { grid-column: span 2; }
.nav-dropdown--wide .dd-group--tall .dd-links { columns: 2; column-gap: 14px; }
.nav-dropdown--wide .dd-links a { break-inside: avoid; }
.dd-label {
  font-size: .68rem; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--muted); padding: 10px 12px 4px;
}

/* ── Mobile menu (hamburger + full-width slide-down panel) ──
   Links are server-rendered in the panel for SEO; CSS only hides them
   visually until the toggle opens the menu. */
.menu-toggle {
  display: none; background: none; border: 0; cursor: pointer;
  padding: 10px; border-radius: 10px; flex: 0 0 auto;
  /* Cancel the tap-target padding so the icon's visual edge sits exactly on
     the header's right padding, mirroring the logo on the left. */
  margin-right: -10px;
}
.menu-toggle:focus-visible { outline: 3px solid rgba(224, 85, 63, .4); }
.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-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); }

/* Panel: same soft/navy palette as the header strip it replaces, expanding
   top-to-bottom via the grid-rows trick (no max-height magic numbers). */
.mobile-menu {
  display: grid; 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 - 76px); max-height: calc(100dvh - 76px);
  /* Horizontal inset matches the page container's mobile padding (16px) so
     menu rows align with the content below the header. */
  overflow-y: auto; padding: 6px 16px 18px;
}
.mobile-menu-label {
  font-size: .72rem; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--muted); padding: 16px 0 6px;
}
.mobile-menu a:not(.btn) {
  display: block; padding: 12px 2px; font-size: .95rem; font-weight: 600;
  color: var(--navy); text-decoration: none;
  border-bottom: 1px solid var(--line); position: relative;
}
.mobile-menu a:not(.btn)::after {
  content: "→"; position: absolute; right: 4px;
  color: var(--coral); opacity: .55; transition: transform .2s ease, opacity .2s ease;
}
.mobile-menu a:not(.btn):active::after { transform: translateX(3px); opacity: 1; }
.mobile-menu a[aria-current="page"] {
  color: var(--coral-dark); padding-left: 12px;
  box-shadow: inset 3px 0 0 var(--coral);
}
.mobile-menu-cta { display: block; margin: 18px 0 4px; }

/* Collapsible section inside the panel (Pet Travel Guides submenu) */
.msub-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; background: none; border: 0; cursor: pointer; text-align: left;
  font-family: inherit; font-size: .95rem; font-weight: 700; color: var(--navy);
  padding: 12px 4px 12px 2px; border-bottom: 1px solid var(--line);
}
.msub-toggle .caret {
  width: 12px; height: 12px; flex: 0 0 auto; 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; }
/* Sub-links: indented under a rail to read as children of the toggle row */
.mobile-menu .msub-inner a:not(.btn) {
  margin-left: 10px; padding-left: 14px;
  border-left: 2px solid var(--line);
}
.mobile-menu .msub-inner .mobile-menu-label {
  margin-left: 10px; padding: 10px 0 4px 14px;
  border-left: 2px solid var(--line);
}
.mobile-menu .msub-inner a[aria-current="page"] {
  box-shadow: none; border-left-color: var(--coral); padding-left: 14px;
}

/* Staggered top-to-bottom entrance for panel items (--i set inline per row) */
.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, 0) * 35ms);
}
/* The panel is a phone-width control; never paint it on wider screens */
@media (min-width: 561px) {
  .mobile-menu { display: none; }
}

/* ── Buttons ────────────────────────────────────────── */
.btn {
  display: inline-block; border: 0; cursor: pointer; text-decoration: none;
  font-weight: 700; border-radius: 999px; transition: background .15s ease, transform .15s ease;
  text-align: center; font-family: inherit;
}
.btn-primary {
  background: var(--coral); color: #fff;
  padding: 14px 30px; font-size: 1.05rem;
  box-shadow: 0 6px 18px rgba(224, 85, 63, .35);
}
.btn-primary:hover { background: var(--coral-dark); transform: translateY(-1px); }
.btn-small { padding: 10px 20px; font-size: .9rem; }
.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); }
.btn-outline-navy {
  background: transparent; color: var(--navy); border: 2px solid var(--navy);
  padding: 12px 26px; font-size: 1rem;
}
.btn-outline-navy:hover { background: var(--navy); color: #fff; }

/* ── Hero ───────────────────────────────────────────── */
.hero {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 60%, #0d1b38 100%);
  color: #fff; padding: 64px 0 56px;
}
.hero .container { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; }

/* Home-page hero variant with a full-bleed carousel: the section padding moves
   to the text column, and the container is wider so the media column matches
   the photos' native 4:5 ratio on desktop (no crop). */
.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: #ffb4a5;
  border: 1px solid rgba(224, 85, 63, .5);
  font-size: .8rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  padding: 6px 14px; border-radius: 999px; margin-bottom: 18px;
}
.hero h1 { font-size: clamp(1.9rem, 4.2vw, 3rem); line-height: 1.15; font-weight: 800; margin-bottom: 16px; }
.hero h1 em { font-style: normal; color: #ff8a73; }
.hero p.lead { font-size: 1.15rem; color: #c9d4e8; margin-bottom: 26px; max-width: 34em; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 26px; }
.hero-trust { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: .92rem; color: #aebbd6; }
.hero-trust li::before { content: "✓ "; color: var(--ok); font-weight: 800; }

.hero-panel {
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--radius); padding: 26px;
}
.hero-panel h2 { font-size: 1.05rem; color: #ffb4a5; margin-bottom: 14px; text-transform: uppercase; letter-spacing: 1px; }
.hero-panel ol { list-style: none; counter-reset: step; }
.hero-panel li {
  counter-increment: step; display: flex; gap: 14px; align-items: flex-start;
  padding: 10px 0; border-bottom: 1px dashed rgba(255, 255, 255, .12); color: #dde5f2; font-size: .98rem;
}
.hero-panel li:last-child { border-bottom: 0; }
.hero-panel li::before {
  content: counter(step);
  flex: 0 0 28px; height: 28px; border-radius: 50%;
  background: var(--coral); color: #fff; font-weight: 800; font-size: .9rem;
  display: flex; align-items: center; justify-content: center; margin-top: 2px;
}

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

/* Card grids (benefits, features, requirements) */
.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 20px; box-shadow: var(--shadow);
}
.benefit .icon { color: var(--coral); }
.benefit .icon svg { width: 26px; height: 26px; display: block; }
.benefit h3, .benefit h4 { color: var(--navy); font-size: 1.02rem; margin-bottom: 8px; }
/* Icon and heading on one line (all viewports) */
.benefit .benefit-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.benefit .benefit-head h3 { margin-bottom: 0; }
.benefit p { color: var(--muted); font-size: .92rem; }
.benefit .card-kicker { color: var(--coral); font-weight: 700; font-size: 1rem; margin-bottom: 8px; }

/* ── Why-us (home): dashboard mock + benefits ───────── */
/* First line inside the section h2 — nearly title-sized, coral accent */
.section-kicker { display: block; font-size: .85em; color: var(--coral); margin-bottom: 2px; }
.why-benefits { margin-top: 44px; }

/* Concierge service list (home) */
.service-list { list-style: none; max-width: 30em; margin: 0 auto 20px; }
.service-list li {
  display: flex; align-items: center; gap: 12px; padding: 9px 0;
  font-weight: 600; color: var(--ink);
  border-bottom: 1px dashed var(--line);
}
.service-list li:last-child { border-bottom: 0; }
.service-list li svg { width: 22px; height: 22px; flex: 0 0 auto; color: var(--coral); }

/* Cargo cross-sell panel (home) */
.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, 2rem); font-weight: 800; margin-bottom: 14px; }
.cargo-cta h2 em { font-style: normal; color: #ff8a73; }
.cargo-cta p { color: #c9d4e8; margin-bottom: 14px; }
.cargo-cta ul { list-style: none; margin-bottom: 22px; }
.cargo-cta ul li { padding: 4px 0; color: #dde5f2; }
.cargo-cta ul li::before { content: "→ "; color: var(--coral); font-weight: 800; }

/* Reviews (home) */
.review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.review-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 22px; box-shadow: var(--shadow); text-align: center;
}
.review-card img {
  width: 96px; height: 96px; border-radius: 50%; object-fit: cover;
  margin: 0 auto 14px; border: 4px solid var(--bg-soft);
}
.review-card blockquote { font-style: italic; color: var(--muted); font-size: .93rem; margin-bottom: 12px; }
.review-card figcaption { font-weight: 700; color: var(--navy); font-size: .95rem; }
/* Pure-CSS "read more": full text stays in the DOM (good for SEO), clamped visually */
.review-card .rev-toggle { display: none; }
.review-card .quote-clamp {
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.review-card .rev-toggle:checked ~ blockquote .quote-clamp { -webkit-line-clamp: unset; display: block; }
.review-card .rev-more { display: inline-block; cursor: pointer; color: #888ddc; font-size: .85rem; font-weight: 600; margin-top: 8px; }
.review-card .rev-more::after { content: "read more"; }
.review-card .rev-toggle:checked ~ .rev-more::after { content: "read less"; }

/* ── Quote form ─────────────────────────────────────── */
.quote-card {
  max-width: 720px; margin: 0 auto; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 34px clamp(18px, 4vw, 40px) 40px;
}
.quote-card .form-note { text-align: center; color: var(--muted); font-size: .9rem; margin-bottom: 26px; }

fieldset { border: 0; margin: 0 0 8px; min-width: 0; }
legend, .field-label { font-weight: 700; color: var(--navy); font-size: .95rem; margin-bottom: 8px; display: block; }

.direction-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-bottom: 20px; }
.direction-option input { position: absolute; opacity: 0; pointer-events: none; }
.direction-option label {
  display: block; height: 100%; cursor: pointer; text-align: center;
  border: 2px solid var(--line); border-radius: 12px; padding: 14px 10px;
  font-size: .92rem; transition: border-color .15s, background .15s;
}
.direction-option label b { display: block; color: var(--navy); margin-top: 6px; }
.direction-option label small { display: block; color: var(--muted); margin-top: 4px; line-height: 1.4; }
.direction-option .dir-icon { display: flex; justify-content: center; color: var(--navy); }
.direction-option .dir-icon svg { width: 26px; height: 26px; }
.direction-option input:checked + label { border-color: var(--coral); background: #fff4f1; }
.direction-option input:checked + label .dir-icon { color: var(--coral); }
.direction-option input:focus-visible + label { outline: 3px solid rgba(224, 85, 63, .4); }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { margin-bottom: 16px; }
.field label { display: block; font-weight: 600; font-size: .9rem; color: var(--ink); margin-bottom: 6px; }
.field .hint { font-size: .8rem; color: var(--muted); margin-top: 4px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 12px 14px; font-size: 1rem; color: var(--ink);
  border: 1.5px solid var(--line); border-radius: 10px; background: #fff;
  font-family: inherit; transition: border-color .15s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(26, 51, 99, .12);
}
.field textarea { resize: vertical; }
.req::after { content: " *"; color: var(--coral); }

/* Travel option checkboxes (standard form) */
.travel-options { margin-bottom: 18px; }
.travel-options .option { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; }
.travel-options input[type="checkbox"] {
  width: 18px; height: 18px; margin-top: 3px; accent-color: var(--coral); flex: 0 0 auto;
}
.travel-options label { font-size: .93rem; color: var(--ink); cursor: pointer; }
.travel-options label b { color: var(--navy); }
.travel-options .options-note { font-size: .82rem; color: var(--muted); margin-top: 8px; }

/* Airport autocomplete / custom dropdowns */
.ac-wrap { position: relative; }
.ac-wrap:focus-within { z-index: 30; }
.ac-list {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20;
  background: #fff; border: 1.5px solid var(--line); border-radius: 10px;
  box-shadow: var(--shadow); list-style: none; margin: 0; padding: 6px;
  max-height: 260px; overflow-y: auto;
}
.ac-list li { padding: 9px 10px; border-radius: 8px; cursor: pointer; font-size: .92rem; }
.ac-list li:hover, .ac-list li.active { background: var(--bg-soft); color: var(--navy); }

.field .dd-input {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235c6a7a' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
  padding-right: 38px;
}
.field .dd-input[inputmode="none"] { caret-color: transparent; }
.field .dd-input:disabled { background-color: var(--bg-soft); color: var(--muted); cursor: not-allowed; }

/* Progressive form steps (collapsed by JS; no-JS visitors see everything) */
.form-step.step-hidden { display: none; }
/* No fill-mode: a filled transform/opacity animation would leave each step a
   permanent stacking context, painting later steps over an open dropdown list. */
.form-step.step-in { animation: step-in .4s ease; }
@keyframes step-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.form-progress {
  height: 5px; border-radius: 3px; background: var(--bg-soft);
  margin-bottom: 24px; overflow: hidden;
}
.form-progress span {
  display: block; height: 100%; width: 0; border-radius: 3px;
  background: var(--coral); transition: width .35s ease;
}

/* Route: From ✈ To, like an airline booking form */
.route-grid { display: grid; grid-template-columns: 1fr 46px 1fr; gap: 10px; align-items: end; }
.route-plane {
  display: flex; align-items: center; justify-content: center;
  height: 49px; margin-bottom: 16px; color: var(--coral);
}
.route-plane svg { width: 20px; height: 20px; transform: rotate(45deg); }

.pet-block {
  border: 1px dashed var(--line); border-radius: 12px;
  padding: 18px 16px 6px; margin-bottom: 16px; background: var(--bg-soft);
}
.pet-block h4 { color: var(--navy); margin-bottom: 12px; font-size: .98rem; }

.form-error {
  display: none; background: #fdecea; color: #b3261e; border: 1px solid #f5c6c0;
  border-radius: 10px; padding: 12px 16px; margin-bottom: 16px; font-size: .92rem;
}
.form-error.visible { display: block; }
.form-success {
  background: #e8f7e8; color: #1d7a1d; border: 1px solid #bfe5bf;
  border-radius: 10px; padding: 12px 16px; margin-bottom: 16px; font-size: .95rem;
}

.submit-btn { width: 100%; padding: 16px; font-size: 1.15rem; margin-top: 6px; }
.submit-btn[disabled] { opacity: .6; cursor: wait; transform: none; }
.privacy-note { text-align: center; font-size: .8rem; color: var(--muted); margin-top: 12px; }

.not-cargo {
  max-width: 720px; margin: 22px auto 0; text-align: center;
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 22px; font-size: .95rem; color: var(--muted);
}
.not-cargo a { font-weight: 700; color: var(--coral); }
.not-cargo .inline-paw { width: 18px; height: 18px; vertical-align: -3px; color: var(--coral); display: inline; }

/* ── Photo gallery ──────────────────────────────────── */
.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: 34px; height: 34px; border-radius: 50%;
  border: 1px solid rgba(18, 36, 74, .65); /* --navy-dark */
  background: rgba(26, 51, 99, .55); /* --navy, translucent */
  color: #fff;
  font-size: 1.1rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow); transition: background .15s, color .15s;
}
.gallery-btn:hover { background: rgba(26, 51, 99, .85); }
.gallery-btn.prev { left: -10px; }
.gallery-btn.next { right: -10px; }

/* Single-card variant (hero / panel side): full-bleed slides that fill
   the column's height — no gaps, no rounding, no next-card peek. */
.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;
}
/* Full-bleed variant: arrows overlay inside the edges */
.gallery--hero .gallery-btn.prev { left: 10px; }
.gallery--hero .gallery-btn.next { right: 10px; }

/* Media column that should match its sibling's height */
.hero-media { align-self: stretch; display: flex; flex-direction: column; min-height: 0; }
.hero-media .gallery-wrap { flex: 1; min-height: 0; }

/* ── Media sections: text (with the padding) 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: 60px 0; align-self: center; }
.media-section .media-text .section-sub { margin-bottom: 26px; }
.media-section .media-text .service-list { margin: 0 0 20px; max-width: none; }
.media-section .media-figure {
  align-self: stretch; display: flex; flex-direction: column;
  min-height: 460px;
}
.media-section .media-figure .gallery-wrap { flex: 1; min-height: 0; }

/* Client segment cards (who-we-serve section, text column) */
.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-list .client-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.client-list .client-icon {
  width: 34px; height: 34px; flex: 0 0 auto; border-radius: 10px;
  background: rgba(224, 85, 63, .12); color: var(--coral);
  display: flex; align-items: center; justify-content: center;
}
.client-list .client-icon svg { width: 18px; height: 18px; }
.client-list h3 { color: var(--navy); font-size: .95rem; line-height: 1.3; }
.client-list p { color: var(--muted); font-size: .87rem; line-height: 1.5; }

/* ── Steps (how it works): compact colored cards ────── */
.steps-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  max-width: 980px; margin: 0 auto;
}
.step {
  display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: flex-start;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px; box-shadow: var(--shadow);
}
.step .num {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px;
  background: color-mix(in srgb, var(--step-c, var(--coral)) 14%, #fff);
  color: var(--step-c, var(--coral)); font-weight: 800; font-size: 1.05rem;
  display: flex; align-items: center; justify-content: center;
}
.step h3 { color: var(--navy); font-size: 1rem; margin-bottom: 4px; }
.step > h3 { align-self: center; margin-bottom: 0; }
.step > p { flex-basis: 100%; }
.step p { color: var(--muted); font-size: .9rem; line-height: 1.5; }

/* ── FAQ ────────────────────────────────────────────── */
.faq-list { max-width: 760px; 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; color: var(--coral); flex: 0 0 auto; }
.faq-list details[open] summary::after { content: "–"; }
.faq-list details p { padding: 0 20px 18px; color: var(--muted); font-size: .95rem; white-space: pre-line; }

/* ── Contact page ───────────────────────────────────── */
.contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 44px; }
.contact-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 20px; box-shadow: var(--shadow); text-align: center; text-decoration: none;
  transition: transform .15s ease;
}
.contact-card:hover { transform: translateY(-2px); }
.contact-card svg { width: 34px; height: 34px; margin: 0 auto 10px; }
.contact-card h3 { color: var(--navy); font-size: 1rem; margin-bottom: 4px; }
.contact-card p { color: var(--muted); font-size: .9rem; word-break: break-all; }

/* ── Social media links (brand colors) ──────────────── */
.social-links { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.social-btn {
  display: inline-flex; align-items: center; gap: 9px;
  border-radius: 999px; text-decoration: none; font-weight: 700;
  padding: 10px 18px; font-size: .92rem; color: #fff;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.social-btn svg { width: 18px; height: 18px; fill: currentColor; flex: 0 0 auto; }
.social-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(13, 27, 56, .22); filter: brightness(1.05); }
.social-btn--facebook { background: #1877f2; }
.social-btn--instagram {
  background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}
.social-btn--whatsapp { background: #25d366; }
.social-btn--line { background: #06c755; }

/* Follow-us strip (home, after reviews) */
.follow-strip { padding: 46px 0; }
.follow-strip .section-sub { margin-bottom: 26px; }

/* Icon-only round social buttons (footer) */
.footer-social { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.footer-social-label { font-size: .85rem; color: #8fa0bf; margin-right: 4px; }
.social-ico {
  width: 36px; height: 36px; border-radius: 50%; color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; transition: transform .15s ease, filter .15s ease;
}
.site-footer .social-ico { margin-right: 0; }
.social-ico svg { width: 19px; height: 19px; fill: currentColor; }
.social-ico:hover { transform: translateY(-2px); filter: brightness(1.1); }
.social-ico--facebook { background: #1877f2; }
.social-ico--instagram {
  background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}
.social-ico--whatsapp { background: #25d366; }
.social-ico--line { background: #06c755; }

/* ── Bottom CTA / Footer ────────────────────────────── */
.bottom-cta { background: linear-gradient(135deg, var(--navy), var(--navy-dark)); color: #fff; text-align: center; }
.bottom-cta h2 { font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 800; margin-bottom: 12px; }
.bottom-cta p { color: #c9d4e8; margin-bottom: 24px; }

.site-footer { background: #0d1b38; color: #8fa0bf; padding: 42px 0 28px; font-size: .88rem; }
.site-footer a { color: #c9d4e8; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.footer-cols {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 30px; margin-bottom: 30px;
}
.footer-brand .brand-name { color: #fff; font-size: 1.05rem; }
.footer-brand p { margin: 10px 0 14px; line-height: 1.6; max-width: 30em; }
.footer-col h4 {
  color: #fff; font-size: .78rem; font-weight: 700;
  letter-spacing: 1.3px; text-transform: uppercase; margin-bottom: 12px;
}
.footer-col a { display: block; margin-bottom: 9px; font-size: .87rem; }
.footer-base {
  border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 20px;
  display: flex; flex-wrap: wrap; gap: 14px 24px;
  align-items: center; justify-content: space-between;
}
.footer-legal { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: center; }
/* Minimal footer (tokenised quotation pages): two columns, not four. */
.site-footer--minimal { padding: 32px 0 24px; }
.site-footer--minimal .footer-cols { grid-template-columns: 1.6fr 1fr; margin-bottom: 24px; }

/* ── Utility ────────────────────────────────────────── */
.hidden { display: none !important; }
.center { text-align: center; }

/* ── Responsive ─────────────────────────────────────── */
@media (max-width: 900px) {
  .hero { padding: 48px 0 44px; }
  .hero .container { grid-template-columns: 1fr; gap: 32px; }
  .hero--media { padding: 0; }
  .hero--media .container { gap: 26px; }
  .hero-copy { padding: 44px 0 8px; }
  .hero-media { margin: 0 -20px; }

  /* Stacked columns: hero/panel carousels size by aspect ratio again */
  .gallery--hero, .gallery--hero .gallery-track { height: auto; }
  .gallery--hero .gallery-card { height: auto; aspect-ratio: 4 / 5; }

  .media-section > .container { grid-template-columns: 1fr; gap: 0; }
  .media-section .media-text { padding: 40px 0 26px; }
  .media-section .media-figure { margin: 0 -20px; min-height: 0; }
  .benefit-grid, .benefit-grid.cols-3 { grid-template-columns: 1fr 1fr; }
  .steps-grid { grid-template-columns: 1fr; gap: 12px; max-width: 560px; }
  .header-link { display: none; }
  .nav-dropdown--wide { grid-template-columns: 1fr; width: min(320px, calc(100vw - 32px)); gap: 0; }
  .nav-dropdown--wide .dd-group--tall { grid-column: auto; }
  .nav-dropdown--wide .dd-group--tall .dd-links { columns: 1; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
  .cargo-cta .panel { grid-template-columns: 1fr; gap: 26px; }
  .review-grid { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
  .contact-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto 40px; }
}

@media (max-width: 560px) {
  .container { padding: 0 16px; }
  section { padding: 40px 0; }
  .section-sub { margin-bottom: 30px; }

  /* Header: logo + wordmark + tagline, hamburger on the right. */
  .site-header .container { padding: 8px 10px; gap: 8px; }
  .header-actions { display: none; }
  .menu-toggle { display: inline-flex; align-items: center; flex-direction: column; }
  /* Pull the brand over the container padding: the icon sits flush against
     the screen edge, mirroring the burger's flush right edge. */
  .brand img { height: 52px; }
  .brand-name { font-size: 1.1rem; }
  .brand-tagline { font-size: .66rem; line-height: 1.3; }
  .btn-small { padding: 9px 14px; font-size: .82rem; }

  /* Hero: full-width stacked CTAs, tighter panel */
  .hero { padding: 40px 0 38px; }
  .hero--media { padding: 0; }
  .hero-copy { padding: 36px 0 4px; }
  .hero-media { margin: 0 -16px; }
  .media-section .media-figure { margin: 0 -16px; }
  .hero p.lead { font-size: 1.05rem; margin-bottom: 22px; }
  /* .hero-copy aligns children flex-start, so the CTA row needs explicit
     full width for its buttons to actually span the screen */
  .hero-ctas { flex-direction: column; width: 100%; }
  .hero-ctas .btn { width: 100%; }
  /* CTA subtitle drops to its own line on narrow screens */
  .hero-ctas .btn .btn-quote { display: block; font-size: .9em; font-weight: 600; opacity: .95; }
  .hero-trust { gap: 6px 14px; font-size: .8rem; }
  .hero-panel { padding: 20px 16px; }

  .benefit-grid, .benefit-grid.cols-2, .benefit-grid.cols-3 { grid-template-columns: 1fr; }
  .benefit { padding: 20px 18px; }
  .client-list { grid-template-columns: 1fr; }
  .step { padding: 14px 16px; gap: 12px; }
  .step .num { width: 30px; height: 30px; font-size: .95rem; }

  /* Form: single column; direction cards become compact rows */
  .quote-card { padding: 26px 16px 30px; }
  .direction-grid { grid-template-columns: 1fr; }
  .direction-option label { display: flex; align-items: center; gap: 12px; text-align: left; padding: 12px 14px; }
  .direction-option label b { margin-top: 0; }
  .direction-option label small { display: none; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .route-grid { grid-template-columns: 1fr; gap: 0; }
  .route-plane { height: auto; margin: -4px 0 12px; }
  .route-plane svg { transform: rotate(135deg); }
  .pet-block { padding: 16px 14px 4px; }
  .not-cargo { padding: 16px 18px; }

  .bottom-cta .btn { width: 100%; max-width: 340px; }

  .gallery-card { width: min(68vw, 280px); }
  .gallery-btn { width: 30px; height: 30px; font-size: 1rem; }
  .gallery-btn.prev { left: -4px; }
  .gallery-btn.next { right: -4px; }

  .footer-cols,
  .site-footer--minimal .footer-cols { grid-template-columns: 1fr; gap: 24px; }
  .footer-base { flex-direction: column; text-align: center; }
}

/* ── Client dashboard mock (home, why-us section) ───── */
.dash-frame {
  max-width: 920px; margin: 0 auto;
  background: #fff; color: var(--ink);
  border-radius: 14px; overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 24px 60px rgba(26, 51, 99, .18);
}

/* browser chrome */
.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: .68rem; color: var(--muted); padding: 3px 12px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.dash-body { padding: 16px; display: grid; gap: 12px; background: #f4f6f8; }

/* mock hero band */
.dash-hero {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  background: linear-gradient(120deg, #1a3363 0%, #142a54 55%, #0f2145 100%);
  color: #fff; border-radius: 12px; padding: 18px 20px;
}
.dash-hero-left { display: grid; gap: 4px; min-width: 0; }
.dash-kicker { font-size: .58rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; opacity: .7; }
.dash-welcome { font-size: 1.05rem; font-weight: 800; letter-spacing: -.01em; }
.dash-route { display: flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 600; opacity: .95; }
.dash-route svg { width: 14px; height: 14px; opacity: .8; }
.dash-chips { display: flex; gap: 6px; margin-top: 2px; flex-wrap: wrap; }
.dash-chips em {
  font-style: normal; font-size: .62rem; font-weight: 600;
  background: rgba(255, 255, 255, .14); border-radius: 999px; padding: 3px 10px;
}
.dash-countdown {
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 10px; padding: 12px 16px; min-width: 190px; display: grid; gap: 3px;
}
.dash-count-num { font-size: 1.7rem; font-weight: 800; line-height: 1; }
.dash-count-label { font-size: .66rem; opacity: .85; }
.dash-progress {
  height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .2);
  overflow: hidden; margin-top: 5px;
}
.dash-progress i { display: block; height: 100%; border-radius: 3px; background: #ffb74d; }
.dash-count-sub { font-size: .6rem; opacity: .8; }

/* stat tiles */
.dash-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.dash-stat {
  background: #fff; border: 1px solid #e6eaf0; border-radius: 10px;
  padding: 10px 12px; display: grid; gap: 2px;
}
.dash-stat-ico {
  width: 26px; height: 26px; border-radius: 7px; display: flex;
  align-items: center; justify-content: center; margin-bottom: 4px;
  color: var(--c, var(--navy)); background: #eef2f7;
  background: color-mix(in srgb, var(--c, var(--navy)) 12%, #fff);
}
.dash-stat-ico svg { width: 14px; height: 14px; }
.dash-stat-num { font-size: 1.05rem; font-weight: 800; line-height: 1.1; }
.dash-stat-label { font-size: .6rem; color: var(--muted); font-weight: 600; }

/* resource cards + checklist */
.dash-cols { display: grid; grid-template-columns: 1.5fr 1fr; gap: 10px; align-items: start; }
.dash-col { display: grid; gap: 10px; }
.dash-card { background: #fff; border: 1px solid #e6eaf0; border-radius: 10px; padding: 12px 14px; }
.dash-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.dash-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto;
  background: #fdeceb; color: #f44336;
  display: flex; align-items: center; justify-content: center;
}
.dash-avatar svg { width: 18px; height: 18px; }
.dash-avatar--person { background: #e7f2fd; color: #2196f3; }
.dash-card-title { flex: 1; font-size: .8rem; font-weight: 700; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dash-card-title em {
  font-style: normal; font-size: .58rem; font-weight: 600; color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px;
}
.dash-pencil {
  width: 24px; height: 24px; border: 1px solid #e6eaf0; border-radius: 7px;
  display: flex; align-items: center; justify-content: center; color: var(--muted); flex: 0 0 auto;
}
.dash-pencil svg { width: 12px; height: 12px; }
.dash-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 12px; }
.dash-fields span { font-size: .68rem; font-weight: 600; display: grid; overflow-wrap: anywhere; }
.dash-fields b { font-size: .56rem; font-weight: 600; color: var(--muted); }

.dash-tasklist { display: grid; gap: 7px; }
.dash-tasklist .dash-card-title { font-size: .74rem; }
.dash-task {
  display: flex; align-items: center; gap: 8px;
  font-size: .68rem; font-weight: 600; color: #2e5339;
  background: #f0faf1; border: 1px solid #d7eeda; border-radius: 8px; padding: 6px 10px;
}
.dash-task svg { width: 13px; height: 13px; color: #2e7d32; flex: 0 0 auto; }
.dash-task--pending { background: #fffaf2; border-color: #ffe0b2; color: #7a4b12; }
.dash-task--pending svg { color: #ef6c00; }
.dash-task--pending i {
  font-style: normal; margin-left: auto; background: var(--coral); color: #fff;
  font-size: .58rem; font-weight: 700; border-radius: 999px; padding: 3px 10px;
}

/* feature bullets under the frame */
.dash-points {
  list-style: none; display: flex; justify-content: center; gap: 26px;
  flex-wrap: wrap; margin: 26px auto 0; max-width: 980px;
}
.dash-points li { display: flex; align-items: center; gap: 9px; font-size: .92rem; font-weight: 600; color: var(--ink); }
.dash-points svg { width: 18px; height: 18px; color: var(--coral); flex: 0 0 auto; }

@media (max-width: 760px) {
  .dash-hero { flex-direction: column; align-items: stretch; }
  .dash-countdown { min-width: 0; }
  .dash-stats { grid-template-columns: 1fr 1fr; }
  .dash-cols { grid-template-columns: 1fr; }
  .dash-points { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* ── Guide pages (/pet-travel/*, /partners/*) ───────── */
.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; }

/* Shared hero photo backdrop — landing, cargo, private jet, every route guide,
   blog index and posts. Opt in by adding .hero--photo to the <section> and
   rendering shared/_hero_banner. The photo layer sits above .hero's own
   navy gradient — which stays as the fallback if the image fails — and below
   the ::after scrim. That scrim is load-bearing for accessibility: it is what
   holds the hero copy above AA contrast over a bright outdoor photo. The
   binding constraint is the .breadcrumbs #aebbd6, which needs the weakest
   stop at >= .82 (measured against the photo's brightest pixel: 5.22:1 at
   .82, 4.47:1 at .78). Don't lighten it without re-measuring. */
.hero--photo { position: relative; overflow: hidden; }
.hero--photo > .container { position: relative; z-index: 2; }
/* display:block is required — the global `picture { display: contents }` (l.35)
   removes the element's box, which silently voids position/inset and drops the
   img into the hero's flow, stretching the section to the photo's full height. */
.hero-banner { display: block; position: absolute; inset: 0; z-index: 0; }
.hero-banner img {
  display: block; width: 100%; height: 100%;
  /* The hero band is short and wide, so cover() shows roughly the middle 40%
     of the frame — 46% keeps both dogs' heads inside it rather than clipped. */
  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%);
}
@media (max-width: 720px) {
  /* The 547 portrait crop is already centred on the dogs, and a narrow viewport
     puts copy over the whole frame — so scrim evenly rather than diagonally. */
  .hero-banner img { object-position: 50% 50%; }
  .hero--photo::after {
    background: linear-gradient(180deg,
      rgba(11, 25, 54, .86) 0%, rgba(11, 25, 54, .82) 55%, rgba(11, 25, 54, .86) 100%);
  }
  /* Landing hero only: the carousel stacks *inside* the section under the copy,
     so an inset:0 photo spreads over both and the copy sees only its top half
     (the owners' legs, no dogs). Anchor it to the top at the portrait file's own
     aspect instead — the dogs then land behind the copy, and the opaque carousel
     covers whatever runs past it. */
  .hero--media .hero-banner { bottom: auto; aspect-ratio: 547 / 855; }
}
@media (prefers-contrast: more) {
  .hero--photo::after { background: rgba(11, 25, 54, .96); }
}

.breadcrumbs { font-size: .85rem; color: #aebbd6; margin-bottom: 18px; }
.breadcrumbs a { color: #c9d4e8; text-decoration: none; }
.breadcrumbs a:hover { color: #fff; text-decoration: underline; }
.breadcrumbs .sep { margin: 0 8px; color: #5c6a7a; }

.guide-body { max-width: 880px; margin: 0 auto; }
.guide-body > section { padding: 44px 0 0; }
.guide-body > section:last-child { padding-bottom: 56px; }
.guide-body h2 {
  color: var(--navy); font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  font-weight: 800; margin-bottom: 10px;
}
.guide-body h2 + p { color: var(--muted); margin-bottom: 22px; }
.guide-note { font-size: .84rem; color: var(--muted); margin-top: 12px; }
.guide-note a { font-weight: 600; }

/* Bullet list in guide prose, outside the timeline (which styles its own).
   Opt-in by class rather than a bare `.guide-body ul` selector, so it never
   catches the CTA assurance list or the corridor directory. */
.guide-list { margin: 0 0 18px 20px; font-size: .95rem; }
.guide-list li { margin-bottom: 6px; }
.guide-list b { color: var(--navy); }

/* Legal prose (terms, privacy, cookies): restore paragraph/list rhythm
   that the global reset strips */
.legal-body p { margin-bottom: 14px; }
.legal-body ul, .legal-body ol { margin: 0 0 14px 22px; }
.legal-body li { margin-bottom: 7px; }
.legal-body h3 { color: var(--navy); font-size: 1.05rem; margin: 20px 0 8px; }
.legal-body .legal-meta { font-size: .84rem; color: var(--muted); margin-bottom: 6px; }
.legal-body code { font-size: .88em; background: var(--bg-soft); padding: 1px 5px; border-radius: 5px; }

/* Data tables (compliance checklists, comparisons) */
.table-wrap { overflow-x: auto; margin-top: 18px; }
.guide-table {
  width: 100%; border-collapse: collapse; font-size: .92rem;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow); min-width: 640px;
}
.guide-table th {
  background: var(--navy); color: #fff; text-align: left;
  padding: 12px 16px; font-size: .85rem; letter-spacing: .4px; text-transform: uppercase;
}
.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); }
.guide-table td em { font-style: normal; font-weight: 700; color: var(--coral); }

/* 3-column DIY vs agency comparison: highlight the last column */
.compare-table th:last-child { background: var(--coral); }
.compare-table td:last-child { background: #fff4f1; }
.compare-table tbody tr:nth-child(even) td:last-child { background: #ffece7; }

/* Inline pill for critical windows/deadlines */
.window-chip {
  display: inline-block; background: rgba(224, 85, 63, .1); color: var(--coral-dark);
  border: 1px solid rgba(224, 85, 63, .35); border-radius: 999px;
  font-size: .78rem; font-weight: 700; padding: 2px 10px; white-space: nowrap;
}

/* Chronological timeline: numbered vertical steps */
.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-bottom: 6px; }
.timeline h3 .window-chip { margin-left: 8px; vertical-align: 2px; }
.timeline p { color: var(--muted); font-size: .95rem; margin-bottom: 8px; }
.timeline ul { margin: 8px 0 0 18px; color: var(--ink); font-size: .95rem; }
.timeline ul li { margin-bottom: 6px; }
.timeline ul b { color: var(--navy); }
/* A step that closes with a consequence line after its bullets needs the gap
   back — .timeline p only carries a bottom margin. */
.timeline ul + p { margin-top: 12px; }

/* Risk callout */
.callout-risk {
  background: #fdf1ee; border: 1px solid #f5cdc4; border-left: 5px solid var(--coral);
  border-radius: 10px; padding: 16px 18px; margin-top: 14px;
  font-size: .93rem; color: #7a2e20;
}
.callout-risk b { color: var(--coral-dark); }

/* Empathic CTA blockquote */
.cta-quote {
  background: var(--bg-soft); border: 1px solid var(--line); border-left: 6px solid var(--coral);
  border-radius: var(--radius); padding: 30px clamp(20px, 4vw, 38px);
  margin-top: 26px;
}
.cta-quote p { font-size: 1.08rem; color: var(--ink); margin-bottom: 14px; }
.cta-quote footer { font-size: .9rem; color: var(--muted); margin-bottom: 20px; }
.cta-quote .hero-ctas { margin: 0; }

/* Anchor targets on guide pages sit under the sticky header, so an in-page
   jump ("continue reading", the FAQ link) would otherwise land with the
   heading hidden behind it. 88px clears the header at its tallest. */
.guide-body [id] { scroll-margin-top: 88px; }

/* ── Outcome strip (guide hero) ─────────────────────────
   The one-line "what you actually get" promise under the hero lead. Lives on
   the dark hero scrim, so it carries its own light palette; the coral rule
   gives it a scannable left edge on a phone, where it reads as two short
   lines rather than a paragraph. */
.hero-outcome {
  border-left: 3px solid var(--coral);
  padding: 2px 0 2px 14px; max-width: 40em;
  /* .hero--guide zeroes the lead's bottom margin, so the gap is ours to make. */
  margin: 22px 0 0;
}
.hero-outcome b { display: block; color: #fff; font-size: 1.02rem; }
.hero-outcome span { display: block; color: #c9d4e8; font-size: .98rem; }

/* Low-pressure reassurance under a CTA. Middot-separated on one line, wrapping
   to its own lines on a narrow phone. Never a promise we can't keep — no
   response-time claims here. */
.cta-assurance {
  display: flex; flex-wrap: wrap; gap: 4px 10px;
  margin-top: 14px; font-size: .86rem; color: var(--muted);
}
.cta-assurance li { list-style: none; }
/* Separator trails its own item rather than leading the next one, so a wrap on
   a narrow phone never starts a line with a stray middot. */
.cta-assurance li:not(:last-child)::after { content: "·"; margin-left: 10px; opacity: .6; }
.hero .cta-assurance { color: #aebbd6; }

/* ── Early service block ────────────────────────────────
   The calm "prefer not to manage this alone?" card, placed straight after the
   requirements table. Deliberately the soft light treatment rather than
   .included-panel's navy gradient: this high on a regulatory guide, a
   full-contrast sales panel reads as an ad break and costs more trust than
   the extra prominence buys. */
.service-intro {
  background: var(--bg-soft); border: 1px solid var(--line);
  border-left: 5px solid var(--coral); border-radius: var(--radius);
}
/* The card is itself a .guide-body section, so it has to take back the section
   padding (which would otherwise sit inside the card) and pay it out as the
   margin that keeps the page's vertical rhythm. */
.guide-body > section.service-intro {
  padding: 26px clamp(18px, 3.5vw, 32px);
  margin-top: 44px;
}
.service-intro h2 { font-size: 1.22rem; margin-bottom: 10px; }
/* Outranks `.guide-body h2 + p`: this one paragraph is the offer, so it keeps
   full-ink contrast and hands its spacing to the buttons below. */
.guide-body > section.service-intro > p {
  color: var(--ink); font-size: .98rem; max-width: 46em; margin-bottom: 0;
}
.service-intro > p + p { margin-top: 10px; }
.service-intro .hero-ctas { margin: 20px 0 0; }
.service-intro .cta-assurance { margin-top: 12px; }

/* Compact CTA band closing the "what you get" section — lighter than the
   .cta-quote blockquote that ends the page, so the two never feel like the
   same ask twice. */
.cta-band {
  border-top: 1px solid var(--line); margin-top: 26px; padding-top: 24px;
}
.cta-band p { color: var(--muted); max-width: 46em; margin-bottom: 18px; }
.cta-band .hero-ctas { margin: 0; }

/* ── Collapsible route directory ────────────────────────
   Used on the paid-traffic landing pages, where the full 30-corridor grid
   otherwise sits between the reader and their next step. Native <details>:
   keyboard-operable for free, no JS, no layout shift on load, and the links
   stay in the DOM for crawlers whether it is open or closed. */
.route-disclosure {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  margin-top: 20px;
}
.route-disclosure > summary {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  padding: 18px 20px; font-weight: 700; color: var(--navy); font-size: 1.02rem;
  border-radius: var(--radius); list-style: none;
}
.route-disclosure > summary::-webkit-details-marker { display: none; }
.route-disclosure > summary:hover { background: var(--bg-soft); }
.route-disclosure > summary:focus-visible {
  outline: 2px solid var(--navy); outline-offset: -2px;
}
.route-disclosure > summary .summary-count {
  font-weight: 400; font-size: .88rem; color: var(--muted); margin-right: auto;
}
.route-disclosure > summary .summary-caret {
  flex: 0 0 auto; width: 13px; height: 13px; color: var(--coral);
  transition: transform .15s ease;
}
.route-disclosure[open] > summary { border-bottom: 1px solid var(--line); border-radius: var(--radius) var(--radius) 0 0; }
.route-disclosure[open] > summary .summary-caret { transform: rotate(180deg); }
.route-disclosure .disclosure-body { padding: 4px 20px 22px; }

/* Route directory cards (hub) */
a.benefit { display: block; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
a.benefit:hover { transform: translateY(-3px); box-shadow: 0 16px 38px rgba(26, 51, 99, .16); }
a.benefit .card-arrow { color: var(--coral); font-weight: 700; font-size: .9rem; margin-top: 10px; }

/* ── "Everything included" conversion panel (replaces DIY tables) ── */
.included-panel {
  background: linear-gradient(135deg, var(--navy), var(--navy-dark));
  color: #fff; border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 34px clamp(20px, 4vw, 40px) 36px; margin-top: 24px;
}
.included-panel .included-kicker {
  display: inline-block; background: rgba(224, 85, 63, .18); color: #ffb4a5;
  border: 1px solid rgba(224, 85, 63, .5); border-radius: 999px;
  font-size: .74rem; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase;
  padding: 5px 13px; margin-bottom: 14px;
}
.included-panel h3 { font-size: clamp(1.25rem, 2.6vw, 1.6rem); font-weight: 800; margin-bottom: 8px; }
.included-panel .included-sub { color: #c9d4e8; max-width: 44em; margin-bottom: 24px; }
.included-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 22px; margin-bottom: 24px; }
.included-item { display: flex; gap: 12px; align-items: flex-start; }
.included-item svg { width: 22px; height: 22px; flex: 0 0 auto; color: #ff8a73; margin-top: 2px; }
.included-item b { display: block; font-size: .98rem; margin-bottom: 2px; }
/* Mobile: one item per line, tighter and smaller so the list stays compact. */
@media (max-width: 560px) {
  .included-grid { grid-template-columns: 1fr; gap: 0; margin-bottom: 18px; }
  .included-item { gap: 9px; align-items: center; }
  .included-item svg { width: 18px; height: 18px; margin-top: 0; }
  .included-item b { font-size: .86rem; margin-bottom: 0; }
}

/* Live-dashboard mock inside the service panel */
.included-dash {
  border-top: 1px solid rgba(255, 255, 255, .16);
  padding-top: 24px; margin-bottom: 26px;
}
.included-dash-title {
  color: #dde5f2; font-weight: 700; font-size: 1rem;
  text-align: center; margin-bottom: 18px;
}
.included-dash .dash-frame {
  max-width: 760px;
  box-shadow: 0 18px 46px rgba(0, 0, 0, .38);
}
.included-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px;
  border-top: 1px solid rgba(255, 255, 255, .16); padding-top: 22px;
}
.included-foot .tagline { color: #dde5f2; font-weight: 700; }
.included-foot .btn-ghost { border-color: rgba(255, 255, 255, .5); }

/* ── Related routes (cross-reference pills) ─────────── */
.related-routes { margin-top: 26px; }
.related-routes h2 { margin-bottom: 14px; }
.route-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.route-pills a {
  display: inline-block; background: #fff; border: 1px solid var(--line);
  border-radius: 999px; padding: 9px 16px; font-size: .88rem; font-weight: 700;
  color: var(--navy); text-decoration: none;
  transition: border-color .15s ease, color .15s ease, transform .15s ease;
}
.route-pills a:hover { border-color: var(--coral); color: var(--coral); transform: translateY(-1px); }
.bg-soft .route-pills a { background: #fff; }
.route-pills a.route-pills-more { background: var(--navy); color: #fff; border-color: var(--navy); }
.route-pills a.route-pills-more:hover { background: var(--coral); border-color: var(--coral); color: #fff; }

/* "Updated on …, verified by 886JetPet" freshness stamp. Light variant when
   it sits inside the dark guide hero. */
.guide-updated {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 16px; font-size: .84rem; color: var(--muted);
}
.guide-updated svg { width: 16px; height: 16px; flex: 0 0 auto; color: #2e9e6b; }
.guide-updated b { color: var(--navy); font-weight: 700; }
.hero .guide-updated { color: #c9d4e8; }
.hero .guide-updated svg { color: #7fd4a8; }
.hero .guide-updated b { color: #fff; }

/* Local country filter above the pet-travel hub's route directory */
.route-search { position: relative; max-width: 420px; margin: 18px 0 26px; }
.route-search svg {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 17px; height: 17px; color: var(--muted); pointer-events: none;
}
.route-search input {
  width: 100%; padding: 12px 16px 12px 42px;
  border: 1px solid var(--line); border-radius: 999px;
  font: inherit; font-size: .95rem; color: var(--ink); background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.route-search input:focus {
  outline: none; border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(26, 51, 99, .12);
}
.route-no-results {
  text-align: center; padding: 46px 20px; border: 1px dashed var(--line);
  border-radius: var(--radius); color: var(--muted); margin-top: 18px;
}
.route-no-results b { color: var(--navy); }
.route-search-hit {
  background: #f2ff08; color: inherit; border-radius: 2px; padding: 0 1px;
}

/* Compact hub directory — mirrors the wide nav dropdown: regions in columns,
   each corridor a single flag + name row with a coral arrow on the far right.
   Flat (no panel/border/shadow) so it sits inline in the page flow. */
.corridor-directory {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 18px;
  margin-top: 22px;
}
.corridor-group { min-width: 0; break-inside: avoid; }
/* A long region spans two columns and flows its links internally, instead of
   stretching one column far past its neighbours. */
.corridor-group--tall { grid-column: span 2; }
.corridor-group--tall .corridor-links { columns: 2; column-gap: 18px; }
.corridor-group--tall .corridor-link { break-inside: avoid; }

.corridor-region {
  display: flex; align-items: baseline; gap: 6px;
  padding: 6px 10px 4px; font-size: .72rem; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
.corridor-region span { font-weight: 600; opacity: .7; }

.corridor-link {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 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; margin: 0;
  font-size: .9rem; font-weight: 600; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.corridor-link:hover .corridor-name { color: var(--navy); }
.corridor-go {
  flex: 0 0 auto; color: var(--coral); font-weight: 700; font-size: 1.05rem;
  line-height: 1; transform: translateX(-3px); opacity: .55;
  transition: transform .15s ease, opacity .15s ease;
}
.corridor-link:hover .corridor-go,
.corridor-link:focus-visible .corridor-go { transform: translateX(0); opacity: 1; }

@media (max-width: 900px) {
  .corridor-directory { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .corridor-group--tall { grid-column: auto; }
  .corridor-group--tall .corridor-links { columns: 1; }
}
@media (max-width: 560px) {
  .corridor-directory { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .guide-body > section { padding-top: 36px; }
  .timeline > li { padding-left: 52px; }
  .timeline > li::before { width: 36px; height: 36px; font-size: .95rem; }
  .timeline > li::after { left: 17px; top: 42px; }
  .guide-table { font-size: .88rem; }
  .cta-quote .btn { width: 100%; }
  /* Full-width taps for the in-page CTAs, matching the closing blockquote. */
  .service-intro .btn, .cta-band .btn { width: 100%; }
  .service-intro .hero-ctas, .cta-band .hero-ctas { gap: 10px; }
  /* Let the count wrap under the label rather than squeezing both. */
  .route-disclosure > summary { flex-wrap: wrap; padding: 16px; }
  .route-disclosure > summary .summary-count { flex-basis: 100%; order: 3; }
  .route-disclosure > summary .summary-caret { margin-left: auto; }
  .route-disclosure .disclosure-body { padding: 4px 16px 18px; }
}

/* ============================================================
   Blog — index cards, search toolbar, post page
   ============================================================ */
.blog-index { padding: 34px 0 70px; }

.blog-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  margin-bottom: 26px;
}
.blog-search {
  position: relative; flex: 1 1 280px; max-width: 420px;
}
.blog-search svg {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 17px; height: 17px; color: var(--muted); pointer-events: none;
}
.blog-search input {
  width: 100%; padding: 11px 16px 11px 40px;
  border: 1px solid var(--line); border-radius: 999px;
  font: inherit; font-size: .93rem; color: var(--ink); background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.blog-search input:focus {
  outline: none; border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(26, 51, 99, .12);
}
.blog-search-status {
  margin: -14px 0 18px; font-size: .85rem; color: var(--muted); min-height: 1.2em;
}

/* Topic palette — muted editorial tones (each ink passes WCAG AA on its own
   tint and on white). Set as custom properties on the card/chip so the badge,
   the active chip and the card accent all read from one place. */
.topic-costs-planning            { --topic-ink: #8a5a12; --topic-bg: #fbf3e3; --topic-line: #ecdcbd; }
.topic-requirements-paperwork    { --topic-ink: #3a4c8f; --topic-bg: #eef0fb; --topic-line: #d7dcf4; }
.topic-flights-airlines          { --topic-ink: #1c6a8c; --topic-bg: #e8f3f9; --topic-line: #c9e2ef; }
.topic-quarantine                { --topic-ink: #a03b4c; --topic-bg: #fbeef0; --topic-line: #f2d9de; }
.topic-cats-dogs                 { --topic-ink: #3c7048; --topic-bg: #ecf5ee; --topic-line: #d2e7d8; }
.topic-life-in-taiwan            { --topic-ink: #71468c; --topic-bg: #f4eefa; --topic-line: #e4d8f1; }
.topic-other-pets                { --topic-ink: #2b7269; --topic-bg: #e8f4f2; --topic-line: #c9e5e0; }

.topic-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  border: 1px solid var(--line); background: #fff; color: var(--topic-ink, var(--navy));
  border-radius: 999px; padding: 8px 14px; font: inherit; font-size: .84rem;
  font-weight: 700; cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.chip:hover { border-color: var(--topic-ink, var(--navy)); background: var(--topic-bg, var(--bg-soft)); }
.chip.is-active {
  background: var(--topic-ink, var(--navy));
  border-color: var(--topic-ink, var(--navy));
  color: #fff;
}

.blog-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
.blog-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; display: flex;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.blog-card:hover {
  transform: translateY(-3px); box-shadow: var(--shadow);
  border-color: var(--topic-line, transparent);
}
/* The .blog-card display rule outranks the UA [hidden] rule, so search
   filtering needs this to actually hide a card. */
.blog-card[hidden] { display: none; }
.blog-card-link {
  display: flex; flex-direction: column; gap: 10px;
  padding: 22px; text-decoration: none; color: inherit; width: 100%;
}
.blog-card h2, .blog-card h3 {
  font-size: 1.08rem; line-height: 1.35; color: var(--navy); margin: 0;
}
.blog-card p { font-size: .9rem; color: var(--muted); line-height: 1.55; margin: 0; flex: 1; }
.blog-card-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: .78rem; color: var(--muted);
}
.blog-topic {
  color: var(--topic-ink, var(--navy)); background: var(--topic-bg, var(--bg-soft));
  box-shadow: inset 0 0 0 1px var(--topic-line, transparent);
  border-radius: 999px; padding: 3px 10px; font-weight: 700;
  text-decoration: none;
}
.blog-dot { color: var(--line); }
.blog-more {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .86rem; font-weight: 700; color: var(--navy); margin-top: 2px;
}
.blog-more svg { width: 13px; height: 10px; transition: transform .15s ease; }
.blog-card:hover .blog-more svg { transform: translateX(3px); }

.blog-no-results {
  text-align: center; padding: 46px 20px; border: 1px dashed var(--line);
  border-radius: var(--radius); color: var(--muted);
}
.blog-no-results b { color: var(--navy); }

.blog-index-cta { margin-top: 46px; text-align: center; }
.blog-index-cta p { max-width: 620px; margin: 12px auto 20px; color: var(--muted); }
.blog-index-cta .hero-ctas { justify-content: center; }

/* Post page */
.blog-post-meta { margin-bottom: 14px; font-size: .84rem; }
/* On the post hero the tint sits over a soft background, so keep the badge
   near-white and let the topic colour carry through the ink and hairline. */
.blog-post-meta .blog-topic { background: rgba(255, 255, 255, .85); }
.blog-post-body .blog-post-cta { margin-top: 10px; }
.related-posts { margin-top: 30px; }
.related-posts h2 { margin-bottom: 16px; }
.blog-grid--related .blog-card-link { padding: 18px; }

@media (max-width: 900px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .blog-grid { grid-template-columns: 1fr; }
  .blog-search { max-width: none; }
}