/* ===== Design tokens ===== */
:root {
  --navy-900: #060f1c;
  --navy-800: #0b1b30;
  --navy-700: #16324f;
  --ink: #0f1923;
  --slate: #46566a;
  --slate-light: #6b7a8d;     /* large / decorative muted — darkened for readability */
  --slate-muted: #5a6b7d;     /* AA-contrast small text on white (~4.6:1) */
  --line: #e7ebf1;
  --bg: #ffffff;
  --bg-soft: #f6f8fb;
  --bg-softer: #eef2f8;
  --accent: #0e9f6e;        /* premium emerald */
  --accent-dark: #047857;
  --accent-soft: #d6f1e6;
  --accent-2: #0e9f6e;
  --ok: #1aa974;
  --danger: #d6453d;
  --white: #ffffff;

  /* ── Brand emerald ramp · gradients & fills ──────────────────────
     --accent (#0e9f6e) is the solid brand green for text/fills.
     The ramp below is the slightly brighter pair used in gradients. */
  --emerald-400: #34d399;   /* light highlight / hero tag */
  --emerald-500: #10b981;   /* gradient start */
  --emerald-600: #059669;   /* gradient end */

  /* ── Semantic palette · reserved roles, never decorative ─────────
     Use these (not raw hex) for state. success=valid, warn=caution,
     danger=error, info=neutral notice. */
  --success: var(--accent);          /* positive / valid — #0e9f6e */
  --success-soft: var(--accent-soft);
  --success-ink: var(--accent-dark);
  --warn: #b45309;                   /* caution text & icons (amber-700) */
  --warn-bright: #f59e0b;            /* caution dot / vivid accent (amber-500) */
  --warn-soft: #fff4e5;              /* caution surface */
  --warn-line: #fde3c2;              /* caution border */
  /* --danger declared above (#d6453d) — error state */
  --danger-soft: #fdecea;            /* error surface */
  --danger-ink: #b3261e;             /* error text on soft */
  --info: #2563eb;                   /* neutral notice (blue-600) */
  --info-soft: #eff6ff;              /* notice surface */
  --radius: 18px;
  --radius-sm: 11px;
  --radius-lg: 24px;          /* big premium surfaces */
  --field-h: 46px;           /* unified control height */
  --container: 1160px;
  --font-head: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;

  /* --- spacing scale (4px base) --- */
  --space-1: .25rem; --space-2: .5rem;  --space-3: .75rem; --space-4: 1rem;
  --space-5: 1.5rem; --space-6: 2rem;   --space-7: 2.5rem; --space-8: 3rem;
  --space-9: 4rem;   --space-10: 5rem;  --space-12: 7rem;

  /* --- fluid type scale --- */
  --step--1: clamp(.78rem, .76rem + .1vw, .82rem);   /* labels, fineprint */
  --step-0:  1rem;                                     /* body */
  --step-1:  1.075rem;                                 /* lead-sm */
  --step-2:  clamp(1.15rem, 1.08rem + .35vw, 1.3rem); /* card h3 */
  --step-3:  clamp(1.4rem, 1.25rem + .6vw, 1.6rem);   /* sub-heads */
  --step-4:  clamp(1.8rem, 1.5rem + 1.4vw, 2.5rem);   /* section h2 */
  --step-5:  clamp(2.6rem, 1.9rem + 3vw, 4rem);       /* hero h1 */
  --lh-tight: 1.08; --lh-snug: 1.3; --lh-body: 1.6;
  --tracking-tight: -.03em; --tracking-wide: .08em;

  /* --- elevation (xs/1/2/3 resting tiers + rings) --- */
  --shadow-xs: 0 1px 2px rgba(11, 27, 48, .06);
  --shadow-sm: 0 1px 3px rgba(11, 27, 48, .08);
  --shadow-1: 0 2px 6px rgba(11, 27, 48, .06), 0 8px 20px rgba(11, 27, 48, .06);
  --shadow-2: 0 12px 30px rgba(11, 27, 48, .12);
  --shadow-3: 0 30px 70px rgba(11, 27, 48, .22);
  --shadow: 0 14px 34px rgba(11, 27, 48, .12);   /* legacy alias */
  --shadow-lg: 0 30px 70px rgba(11, 27, 48, .22); /* legacy alias */
  --ring: 0 0 0 4px rgba(14, 159, 110, .22);
  --ring-soft: 0 0 0 4px rgba(14, 159, 110, .15);
  --ring-danger: 0 0 0 4px rgba(214, 69, 61, .18);

  /* masked SVG check (replaces literal glyphs) */
  --ico-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

/* ===== Reset ===== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; }
h1, h2, h3, h4 { font-family: var(--font-head); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); }

.container { width: min(100% - 2.5rem, var(--container)); margin-inline: auto; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ===== Skip link + global keyboard focus ===== */
.skip-link {
  position: absolute; left: 1rem; top: -3.5rem; z-index: 100;
  background: var(--navy-800); color: #fff; font-family: var(--font-head);
  font-weight: 700; font-size: .9rem; padding: .6rem 1rem;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  transition: top .18s ease;
}
.skip-link:focus { top: 0; outline: 3px solid var(--accent); outline-offset: 2px; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 6px rgba(14, 159, 110, .45); }
.main-nav a:focus-visible, .footer-col a:focus-visible, .crumbs a:focus-visible,
.footer-legal a:focus-visible, .link-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.nav-toggle:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
*:focus:not(:focus-visible) { outline: none; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--step--1);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--accent-dark);
  margin-bottom: .85rem;
}

/* ===== Buttons ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--step-0);
  line-height: 1;
  padding: .85rem 1.5rem;
  border-radius: 12px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform .42s var(--spring), box-shadow .2s ease, background .2s ease, border-color .2s ease, opacity .2s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px) scale(.985); transition-duration: .12s; }
.btn svg { flex: none; }

/* primary — emerald gradient */
.btn-primary {
  background: linear-gradient(135deg, var(--emerald-500), #047857);
  color: #fff;
  box-shadow: 0 10px 24px rgba(14, 159, 110, .35);
}
.btn-primary:hover { box-shadow: 0 14px 30px rgba(14, 159, 110, .5); transform: translateY(-2px); }
.btn-primary:active { transform: translateY(1px); box-shadow: 0 6px 14px rgba(14, 159, 110, .35); }

/* ghost — only legible on navy */
.btn-ghost {
  background: rgba(255, 255, 255, .10);
  color: var(--white);
  border-color: rgba(255, 255, 255, .55);
}
.btn-ghost:hover { background: rgba(255, 255, 255, .18); }

/* outline / dark — secondary on LIGHT surfaces */
.btn-outline, .btn-dark {
  background: #fff; color: var(--navy-800);
  border-color: var(--line); box-shadow: var(--shadow-xs);
}
.btn-outline:hover, .btn-dark:hover { background: var(--bg-soft); border-color: var(--navy-700); transform: translateY(-1px); }

.btn-block { width: 100%; }

/* sizes */
.btn-sm { padding: .55rem 1rem; font-size: var(--step--1); }
.btn-lg { padding: 1rem 1.9rem; font-size: 1.05rem; }
.btn-lg:hover { transform: translateY(-1px); }

/* states: disabled + loading */
.btn:disabled, .btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; pointer-events: none; }
.btn[aria-busy="true"] { pointer-events: none; opacity: .88; position: relative; color: transparent !important; }
.btn[aria-busy="true"] > * { visibility: hidden; }
.btn[aria-busy="true"]::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 18px; height: 18px;
  margin: -9px 0 0 -9px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff;
  animation: btn-spin .6s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* ===== Header ===== */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.brand { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--font-head); }
.brand-mark { color: var(--accent); display: grid; place-items: center; }
.brand-name { font-weight: 800; font-size: 1.3rem; letter-spacing: -.03em; color: var(--navy-800); }

.main-nav { display: flex; align-items: center; gap: 2rem; }
.main-nav a { font-weight: 600; font-size: .95rem; color: var(--slate); transition: color .15s ease; }
.main-nav a:hover { color: var(--navy-800); }
.main-nav .nav-cta {
  color: var(--white);
  background: var(--navy-800);
  padding: .6rem 1.2rem;
  border-radius: 999px;
  transition: background .15s ease, box-shadow .2s ease;
}
.main-nav .nav-cta:hover { background: var(--navy-700); color: var(--white); box-shadow: var(--ring); }

.nav-toggle {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: 0; cursor: pointer; padding: 8px;
}
.nav-toggle span { width: 24px; height: 2px; background: var(--navy-800); border-radius: 2px; transition: .25s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ===== Hero ===== */
.hero {
  position: relative;
  background:
    radial-gradient(1100px 480px at 78% -8%, rgba(14, 159, 110, .28), transparent 60%),
    linear-gradient(160deg, var(--navy-900), var(--navy-800) 55%, var(--navy-700));
  color: var(--white);
  padding: 4.5rem 0 6.5rem;
  overflow: hidden;
}
.hero-inner { display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items: center; }
.hero .eyebrow { color: var(--accent); }
.hero h1 { font-size: var(--step-5); font-weight: 800; line-height: var(--lh-tight); letter-spacing: -.035em; }
.hero .lead { color: rgba(255, 255, 255, .82); font-size: 1.12rem; line-height: var(--lh-snug); max-width: 36rem; margin-top: 1.1rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 1.8rem; }
.hero-trust { display: flex; gap: 2.2rem; margin-top: 2.6rem; flex-wrap: wrap; }
.hero-trust strong { display: block; font-family: var(--font-head); font-size: 1.6rem; font-weight: 800; color: var(--accent); }
.hero-trust span { color: rgba(255, 255, 255, .7); font-size: .85rem; }

.route-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.2rem; }
.pill { font-size: .72rem; font-weight: 700; padding: .25rem .6rem; border-radius: 999px; font-family: var(--font-head); }
.pill-live { color: var(--ok); background: rgba(26, 169, 116, .12); }
.route-id { font-size: .82rem; color: var(--slate-light); font-weight: 600; }
.route-line { display: grid; grid-template-columns: auto 1fr auto; gap: .6rem; align-items: center; }
.node { display: flex; align-items: center; gap: .55rem; }
.node strong { display: block; font-size: .95rem; }
.node small { color: var(--slate-light); font-size: .76rem; }
.dot { width: 12px; height: 12px; border-radius: 50%; border: 3px solid var(--line); background: var(--white); flex: none; }
.dot.done { border-color: var(--accent); background: var(--accent); }
.track { position: relative; height: 3px; background: var(--line); border-radius: 3px; }
.track .progress { position: absolute; inset: 0 40% 0 0; background: var(--accent); border-radius: 3px; }
.track .ship {
  position: absolute; top: 50%; left: 60%; transform: translate(-50%, -50%);
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--white); border: 2px solid var(--accent);
  display: grid; place-items: center; color: var(--accent);
}
.track .ship svg { width: 12px; height: 12px; }
.route-meta { display: flex; justify-content: space-between; gap: .5rem; margin-top: 1.3rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.route-meta small { display: block; color: var(--slate-light); font-size: .72rem; }
.route-meta strong { font-size: .9rem; }
.route-meta .ok { color: var(--ok); }

/* ===== Logos ===== */
.logos { background: var(--bg-soft); padding: 2.2rem 0; border-bottom: 1px solid var(--line); }
.logos-label { text-align: center; color: var(--slate-light); font-size: .85rem; font-weight: 600; margin-bottom: 1rem; }
.logos-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1rem 1.6rem; }
.logos-row span { font-family: var(--font-head); font-weight: 800; font-size: 1.1rem; color: #9aa9ba; letter-spacing: -.02em; }

/* Carrier badges */
.carriers .carrier {
  font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em;
  padding: .45rem 1.1rem; border-radius: 12px; border: 1px solid var(--line);
  background: var(--white); box-shadow: var(--shadow-sm);
}
.carrier-dhl { color: #d40511; }

/* ===== Generic section ===== */
.section { padding: var(--space-10) 0; }
.section-tight { padding: var(--space-8) 0; }
.section-head { text-align: center; max-width: 42rem; margin: 0 auto var(--space-8); }
.section-head h2 { font-size: var(--step-4); font-weight: 800; color: var(--navy-800); letter-spacing: -.03em; }
.section-head p { color: var(--slate); margin-top: .8rem; font-size: 1.05rem; line-height: var(--lh-snug); }

/* ===== Service cards ===== */
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.6rem;
  box-shadow: var(--shadow-1);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: transparent; }
.card-icon {
  width: 54px; height: 54px; border-radius: 14px;
  display: grid; place-items: center;
  color: var(--accent-dark);
  background: var(--bg-softer); margin-bottom: 1.1rem;
}
.card-icon svg { width: 26px; height: 26px; }
.card h3 { font-size: var(--step-2); color: var(--navy-800); }
.card p { color: var(--slate); margin-top: .5rem; font-size: .95rem; }
.card ul { margin-top: 1rem; display: grid; gap: .45rem; }
.card li { position: relative; padding-left: 1.5rem; color: var(--slate); font-size: .9rem; }
.card li::before {
  content: ""; position: absolute; left: 0; top: .15em;
  width: 1rem; height: 1rem;
  -webkit-mask: var(--ico-check) center / contain no-repeat;
  mask: var(--ico-check) center / contain no-repeat;
  background: var(--accent-dark);
}

/* ===== Track section ===== */
.section-track { background: var(--bg-soft); }
.track-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
.track-copy h2 { font-size: clamp(1.8rem, 3.5vw, 2.4rem); color: var(--navy-800); }
.track-copy p { color: var(--slate); margin-top: .8rem; }
.link-btn { background: none; border: 0; color: var(--accent-dark); font-weight: 700; cursor: pointer; padding: 0; font: inherit; text-decoration: underline; }
.track-form { display: flex; gap: .6rem; margin-top: 1.5rem; }
.track-form input {
  flex: 1; min-height: var(--field-h); padding: .7rem 1.1rem;
  border: 1.5px solid var(--line);
  border-radius: 999px; /* deliberate hero-search pill */
  font: inherit; color: var(--ink); background: var(--white);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.track-form input::placeholder { color: var(--slate-light); }
.track-form input:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }

.track-result {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.6rem; min-height: 220px;
  box-shadow: var(--shadow-1);
}
.track-empty { height: 100%; min-height: 190px; display: grid; place-content: center; justify-items: center; text-align: center; color: var(--slate-muted); gap: .5rem; }
.track-empty-ico { color: var(--accent-dark); display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--accent-soft); margin-bottom: .3rem; }
.track-empty-ico svg { width: 28px; height: 28px; }
.track-empty-title { color: var(--navy-800); font-size: var(--step-2); }
.track-empty p { max-width: 30rem; }

.track-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.2rem; }
.track-card-head .tid { font-family: var(--font-head); font-weight: 800; color: var(--navy-800); font-size: 1.05rem; }
.track-sub { color: var(--slate); font-size: .88rem; font-weight: 600; margin: -.6rem 0 1.1rem; }
.status-badge { font-size: .78rem; font-weight: 700; padding: .3rem .7rem; border-radius: 999px; font-family: var(--font-head); }
.status-transit { color: var(--accent-dark); background: rgba(14, 159, 110, .12); }
.status-delivered { color: var(--ok); background: rgba(26, 169, 116, .12); }
.status-error { color: #d6453d; background: rgba(214, 69, 61, .12); }

.timeline { display: grid; gap: 0; margin-top: .5rem; }
.tl-item { display: grid; grid-template-columns: auto 1fr; gap: .9rem; }
.tl-marker { display: flex; flex-direction: column; align-items: center; }
.tl-dot { width: 14px; height: 14px; border-radius: 50%; border: 3px solid var(--line); background: var(--white); margin-top: 3px; }
.tl-item.active .tl-dot { border-color: var(--accent); background: var(--accent); box-shadow: 0 0 0 4px rgba(14, 159, 110, .18); }
.tl-item.complete .tl-dot { border-color: var(--accent); background: var(--accent); }
.tl-line { width: 2px; flex: 1; background: var(--line); min-height: 26px; }
.tl-item:last-child .tl-line { display: none; }
.tl-body { padding-bottom: 1rem; }
.tl-body strong { display: block; color: var(--ink); font-size: .95rem; }
.tl-body small { color: var(--slate-light); font-size: .82rem; }
.track-error { text-align: center; color: var(--slate); padding: 1.5rem 0; }

/* ===== Steps ===== */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); counter-reset: step; }
.steps li {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.6rem; position: relative;
  box-shadow: var(--shadow-1);
}
.step-num {
  width: 40px; height: 40px; border-radius: 12px;
  display: grid; place-items: center; font-family: var(--font-head);
  font-weight: 800; color: var(--white);
  background: linear-gradient(135deg, var(--emerald-500), #047857);
  margin-bottom: 1rem;
}
.steps h3 { color: var(--navy-800); font-size: var(--step-2); }
.steps p { color: var(--slate); font-size: .92rem; margin-top: .4rem; }

/* ===== About ===== */
.section-about { background: var(--bg-soft); }
.about-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 3.5rem; align-items: center; }
.about-copy h2 { font-size: clamp(1.8rem, 3.5vw, 2.5rem); color: var(--navy-800); }
.about-copy p { color: var(--slate); margin-top: .8rem; font-size: 1.05rem; }
.ticks { display: grid; gap: .7rem; margin: 1.5rem 0; }
.ticks li { position: relative; padding-left: 1.9rem; color: var(--ink); }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .05em;
  width: 1.3rem; height: 1.3rem; border-radius: 50%;
  background: var(--accent-soft);
}
.ticks li::after {
  content: ""; position: absolute; left: .27rem; top: .32em;
  width: .76rem; height: .76rem;
  background-color: var(--accent-dark);
  -webkit-mask: var(--ico-check) center / contain no-repeat;
  mask: var(--ico-check) center / contain no-repeat;
}
.about-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.stat {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.6rem; text-align: center;
  box-shadow: var(--shadow-1);
}
.stat strong {
  display: flex; align-items: center; justify-content: center;
  width: 50px; height: 50px; border-radius: 14px;
  background: var(--bg-softer); color: var(--accent-dark); margin: 0 auto .85rem;
}
.stat strong svg { width: 26px; height: 26px; }
.stat span { color: var(--slate); font-size: .88rem; }

/* ===== Quote band ===== */
.section-quote-band {
  background: linear-gradient(135deg, var(--navy-800), var(--navy-700));
  color: var(--white); text-align: center; padding: 4rem 0;
}
.section-quote-band blockquote { max-width: 50rem; margin: 0 auto; font-family: var(--font-head); font-size: clamp(1.25rem, 2.6vw, 1.7rem); font-weight: 600; line-height: 1.4; }
.section-quote-band cite { display: block; margin-top: 1.3rem; font-size: .95rem; font-style: normal; color: var(--accent); font-weight: 700; }

/* ===== Quote form ===== */
.quote-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 3.5rem; align-items: start; }
.quote-copy h2 { font-size: clamp(1.8rem, 3.5vw, 2.5rem); color: var(--navy-800); }
.quote-copy p { color: var(--slate); margin-top: .8rem; font-size: 1.05rem; }
.quote-form {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 1.8rem; box-shadow: var(--shadow-2);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field { margin-bottom: 1rem; display: flex; flex-direction: column; }
.field label, .calc-field label, .pay-form label, .co-section label {
  font-family: var(--font-head); font-weight: 600; font-size: var(--step--1);
  color: var(--navy-800); letter-spacing: .005em; margin-bottom: .4rem;
}
.field .opt, .calc-field .opt, .pay-form .opt { color: var(--slate-light); font-weight: 500; }
.field input, .field select, .field textarea {
  width: 100%; min-height: var(--field-h); padding: .7rem .85rem;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm); font: inherit; background: var(--white); color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field textarea { resize: vertical; min-height: 5.5rem; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: var(--ring);
}
.field input::placeholder, .field textarea::placeholder { color: var(--slate-light); }
.field input.invalid, .field select.invalid, .field textarea.invalid,
input.invalid, select.invalid { border-color: var(--danger) !important; box-shadow: var(--ring-danger); }
.field input.valid, .field input.is-valid { border-color: var(--accent); }
.field input:disabled, .field select:disabled { background: var(--bg-soft); color: var(--slate-light); }
.field-hint { color: var(--slate-muted); font-size: var(--step--1); margin-top: .35rem; }
.field-error { color: var(--danger); font-size: var(--step--1); margin-top: .3rem; display: flex; gap: .3rem; align-items: center; }
.form-note { margin-top: .9rem; font-size: .92rem; text-align: center; min-height: 1.2rem; }
.form-note.success { color: var(--ok); font-weight: 600; }
.form-note.error { color: var(--danger); font-weight: 600; }

/* ===== Footer ===== */
.site-footer { background: var(--navy-900); color: rgba(255, 255, 255, .72); padding: 3.5rem 0 1.6rem; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2rem; padding-bottom: 2.5rem; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.footer-brand .brand-name { color: var(--white); }
.footer-brand .brand-mark { color: var(--accent); }
.footer-brand p { margin-top: .8rem; max-width: 18rem; font-size: .92rem; }
.footer-col h4 { color: var(--white); font-size: .95rem; margin-bottom: .9rem; }
.footer-col a, .footer-col span { display: block; color: rgba(255, 255, 255, .82); font-size: .9rem; margin-bottom: .55rem; transition: color .15s ease; }
.footer-col a:hover { color: var(--accent); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 1.4rem; font-size: .85rem; gap: 1rem; flex-wrap: wrap; }
.footer-legal a:hover { color: var(--accent); }

/* ===== Soft section ===== */
.section-soft { background: var(--bg-soft); }

/* ===== Standalone page hero ===== */
.page-hero {
  background:
    radial-gradient(900px 360px at 85% -20%, rgba(14, 159, 110, .25), transparent 60%),
    linear-gradient(160deg, var(--navy-900), var(--navy-800) 60%, var(--navy-700));
  color: var(--white);
  padding: var(--space-8) 0 var(--space-7);
}
.page-hero .eyebrow { color: var(--accent); }
.page-hero h1 { font-size: clamp(2rem, 4vw, 2.9rem); font-weight: 800; line-height: var(--lh-tight); }
.page-hero p { color: rgba(255, 255, 255, .82); margin-top: .7rem; max-width: 42rem; line-height: var(--lh-snug); }
.page-hero p strong { color: #fff; }
.page-hero p a { color: var(--accent); font-weight: 600; }
.page-hero p a:hover { text-decoration: underline; }
.page-hero-sm { padding: var(--space-7) 0 var(--space-6); }
.page-hero-meta { color: rgba(255, 255, 255, .72) !important; font-size: .9rem; }
.crumbs { font-size: .85rem; color: rgba(255, 255, 255, .72); margin-bottom: 1rem; }
.crumbs a { color: rgba(255, 255, 255, .88); }
.crumbs a:hover { color: var(--accent); }
.crumbs span { margin: 0 .35rem; }

.track-form-hero { margin-top: 1.5rem; max-width: 480px; }
.link-btn-light { color: var(--accent); }

.track-page { max-width: 720px; margin: 0 auto; }
.track-help { text-align: center; margin-top: 1.4rem; }

.muted { color: var(--slate-muted); font-size: .92rem; }
.muted a { color: var(--accent-dark); font-weight: 600; }
.muted a:hover { text-decoration: underline; }

/* AA-contrast small text across forms / fineprint */
.calc-fineprint, .field-hint, .rate-eta small, .rate-price small, .route-meta small { color: var(--slate-muted); }

/* ===== CTA band ===== */
.cta-band {
  position: relative; overflow: hidden;
  background:
    radial-gradient(700px 300px at 80% 0%, rgba(14, 159, 110, .25), transparent 60%),
    linear-gradient(135deg, var(--navy-900), var(--navy-700));
  color: #fff; text-align: center; padding: 4.5rem 0;
}
.cta-band h2 { font-size: clamp(1.9rem, 3.5vw, 2.6rem); font-weight: 800; }
.cta-band p { margin-top: .6rem; color: rgba(255, 255, 255, .78); }
.cta-band .hero-actions { justify-content: center; margin-top: 1.8rem; }
.cta-band .btn-ghost { border-color: rgba(255, 255, 255, .5); color: #fff; }
.cta-band .btn-ghost:hover { background: rgba(255, 255, 255, .16); }

/* ===== Legal pages ===== */
.legal { padding: 3.5rem 0 4.5rem; }
.legal-inner { max-width: 760px; margin: 0 auto; }
.legal h2 { color: var(--navy-800); font-size: 1.3rem; margin-top: 2rem; }
.legal p { color: var(--slate); margin-top: .8rem; }
.legal ul { list-style: disc; padding-left: 1.3rem; margin-top: .8rem; }
.legal li { color: var(--slate); margin-top: .4rem; }
.legal a { color: var(--accent-dark); font-weight: 600; }
.legal a:hover { text-decoration: underline; }

/* ===== Thank-you / confirmation ===== */
.confirm { padding: var(--space-9) 0 var(--space-10); background: var(--bg-soft); }
.confirm-card {
  max-width: 600px; margin: 0 auto; text-align: center;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 2.6rem 2.4rem; box-shadow: var(--shadow-3);
}
.confirm-ico {
  width: 66px; height: 66px; border-radius: 50%;
  background: rgba(26, 169, 116, .12); color: var(--ok);
  display: grid; place-items: center; margin: 0 auto 1.3rem;
}
.confirm-ico svg { width: 32px; height: 32px; }
.confirm-card h1 { color: var(--navy-800); font-size: clamp(1.5rem, 3vw, 2rem); }
.confirm-card p { color: var(--slate); margin-top: .7rem; }
.confirm-summary { text-align: left; margin: 1.6rem 0 1.8rem; }
.confirm-summary div {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .75rem 0; border-bottom: 1px solid var(--line);
}
.confirm-summary div:first-child { border-top: 1px solid var(--line); }
.confirm-summary dt { color: var(--slate-light); font-size: .9rem; margin: 0; }
.confirm-summary dd { margin: 0; font-weight: 600; color: var(--ink); }
.confirm-actions { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; margin-top: 1.6rem; }

/* tracking-number chip on confirmation */
.ty-tracking {
  background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 1rem 1.2rem; margin: 1.4rem 0; text-align: center;
}
.ty-tracking small { display: block; color: var(--slate-muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; margin-bottom: .25rem; }
.ty-tracking strong { font-family: var(--font-head); font-weight: 800; font-size: 1.5rem; color: var(--navy-800); letter-spacing: .02em; }

/* ===== Rate calculator card ===== */
.calc-card {
  width: 100%; max-width: min(410px, 100%);
  background: var(--white); color: var(--ink);
  border-radius: var(--radius-lg); padding: 1.6rem;
  box-shadow: var(--shadow-3);
  border: 1px solid rgba(255, 255, 255, .6);
}
.calc-title { color: var(--navy-800); font-size: var(--step-2); letter-spacing: -.02em; }
.calc-sub { color: var(--slate); font-size: .88rem; margin: .25rem 0 1.1rem; }
.calc-row { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.calc-field { display: flex; flex-direction: column; margin-bottom: .8rem; min-width: 0; }
.calc-field label { font-family: var(--font-head); font-size: var(--step--1); font-weight: 600; color: var(--navy-800); margin-bottom: .3rem; }
.calc-field .opt { color: var(--slate-light); font-weight: 500; }
.calc-field select, .calc-field input {
  min-height: var(--field-h); padding: .65rem .8rem; border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  font: inherit; background: var(--white); color: var(--ink); width: 100%;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.calc-field select::placeholder, .calc-field input::placeholder { color: var(--slate-light); }
.calc-field select:focus, .calc-field input:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
.calc-field select.invalid, .calc-field input.invalid { border-color: var(--danger) !important; box-shadow: var(--ring-danger); }
.calc-card .btn { margin-top: .3rem; }
.calc-note { margin-top: .7rem; font-size: .85rem; color: var(--danger); font-weight: 600; text-align: center; min-height: 1em; }
.calc-fineprint { margin-top: .7rem; font-size: .73rem; color: var(--slate-muted); text-align: center; }

/* inline variant on the rates page hero */
.calc-card-inline { max-width: none; margin-top: 1.6rem; }
.calc-row-4 { grid-template-columns: repeat(4, 1fr); }

/* Rates search form — small curve to match the result cards (rates page only) */
.calc-card.calc-card-inline { border-radius: 8px; }
.calc-card-inline .calc-field select,
.calc-card-inline .calc-field input,
.calc-card-inline .calc-origin,
.calc-card-inline .combo-input,
.calc-card-inline .combo-list,
.calc-card-inline .btn { border-radius: 6px; }
.calc-actions { display: flex; align-items: center; gap: 1rem; margin-top: .2rem; }
.calc-actions .calc-note { margin: 0; text-align: left; }

/* ===== Rate results ===== */
.rates-wrap { max-width: var(--container); margin: 0 auto; }
.rate-summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.rate-route { font-family: var(--font-head); font-weight: 800; font-size: 1.25rem; color: var(--navy-800); display: block; }
.rate-route .arrow { color: var(--accent-dark); margin: 0 .3rem; }
.rate-meta { color: var(--slate); font-size: .9rem; }
.rate-charge { color: var(--accent-dark); font-weight: 600; }
.rate-list { display: grid; gap: .7rem; }
.rate-card {
  display: grid; grid-template-columns: minmax(150px, 230px) 1fr auto; gap: 1rem 1.6rem; align-items: center;
  background: var(--white); border: 1px solid var(--line); border-radius: 8px;
  padding: .85rem 1.3rem; box-shadow: var(--shadow-1); transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
/* Price stacked above a full-width button, grouped at the right like Jumingo */
.rate-cta { display: flex; flex-direction: column; align-items: stretch; gap: .55rem; min-width: 168px; }

/* ===== Results bar (count + price span) — Jumingo-style summary above the list ===== */
.rate-resultbar {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: 0 .25rem .9rem; margin-bottom: .2rem; border-bottom: 1px solid var(--line);
}
.rrb-count { color: var(--slate); font-size: .92rem; }
.rrb-count strong { color: var(--ink); font-family: var(--font-head); font-weight: 800; }
.rrb-range { color: var(--ink); font-weight: 600; white-space: nowrap; }
.rrb-sort {
  display: inline-flex; align-items: center; gap: .35rem;
  color: var(--slate-muted); font-size: .82rem; font-weight: 600;
}
.rate-list { margin-top: 1rem; }

/* ===== Collection → delivery journey (the Jumingo timeline) ===== */
/* A generous block on the left: points anchored, a long dotted connector between
   them, with a comfortable gap before the price column. */
.rate-journey { display: flex; align-items: center; gap: 1.4rem; min-width: 0; max-width: 560px; }
.rj-point { display: flex; flex-direction: column; gap: .15rem; flex: 0 0 auto; min-width: 0; }
.rj-point--end { align-items: flex-start; flex: 0 0 auto; }
.rj-label {
  font-family: var(--font-head); font-size: .67rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--slate-light);
}
.rj-date { font-weight: 700; color: var(--ink); font-size: 1.02rem; line-height: 1.25; white-space: nowrap; }
.rj-sub { font-size: .8rem; color: var(--slate-muted); }
.rj-track { flex: 1 1 auto; min-width: 84px; display: flex; align-items: center; gap: .5rem; color: var(--accent); }
.rj-node { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--accent); background: var(--white); flex: 0 0 auto; }
.rj-node--end { background: var(--accent); }
.rj-line { flex: 1 1 auto; height: 0; border-top: 2px dotted var(--accent); opacity: .55; }
.rj-plane { display: inline-flex; flex: 0 0 auto; color: var(--accent); }
.rj-plane svg { display: block; transform: rotate(90deg); }
.rate-card:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }
.rate-card.is-featured { border-color: var(--accent); box-shadow: var(--shadow-2), inset 0 2px 0 var(--accent); }

/* Featured "best value" card: full-width recommendation ribbon at the top (Jumingo-style) */
.rate-card.is-featured { position: relative; overflow: hidden; padding-top: 2.4rem; }
.rate-ribbon {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3;
  display: flex; align-items: center; gap: .45rem;
  padding: .5rem 1.4rem;
  background: var(--accent-dark); color: #fff;
  font-family: var(--font-head); font-weight: 700; font-size: .82rem; letter-spacing: .01em;
}
.rate-ribbon svg { flex: 0 0 auto; }

.rate-main { display: flex; flex-direction: column; gap: .25rem; }
.rate-carrier { font-family: var(--font-head); font-weight: 800; font-size: 1.15rem; }
.rate-carrier.dhl { color: #d40511; }
.rate-service { color: var(--slate); font-size: .9rem; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.rbadge { font-size: .68rem; font-weight: 700; padding: .15rem .5rem; border-radius: 999px; font-family: var(--font-head); }
.rbadge-cheap { color: var(--ok); background: rgba(26, 169, 116, .12); }
.rbadge-fast { color: var(--accent-dark); background: rgba(14, 159, 110, .14); }
.rate-eta { color: var(--ink); font-size: .95rem; }
.rate-eta small, .rate-price small { display: block; color: var(--slate-light); font-size: .72rem; font-weight: 500; }
.rate-price { font-family: var(--font-head); font-weight: 800; font-size: 1.35rem; color: var(--navy-800); text-align: right; }
.rate-select { padding: .85rem 1.4rem; font-size: 1rem; justify-content: center; }
.rate-card .rate-select { border-radius: 6px; }   /* small curve to match the cards (beats .btn-primary pill) */
.rates-fine { margin-top: 1.4rem; text-align: center; font-size: .82rem; }
.rates-empty { text-align: center; padding: 2.5rem 1rem; }
.rates-empty p { color: var(--ink); font-size: 1.05rem; }
.rates-empty .muted { margin-top: .5rem; }

/* ===== Quote selection banner ===== */
.quote-selection {
  background: var(--bg-softer); border: 1px solid var(--line);
  border-left: 3px solid var(--accent); border-radius: var(--radius-sm);
  padding: .85rem 1rem; margin-bottom: 1.2rem;
}
.qs-title { font-family: var(--font-head); font-weight: 700; color: var(--navy-800); }
.qs-meta { color: var(--slate); font-size: .9rem; margin-top: .15rem; }

/* ===== Rate / calculator responsive ===== */
@media (max-width: 760px) {
  .calc-row-4 { grid-template-columns: 1fr 1fr; }
  .calc-actions { flex-direction: column; align-items: stretch; }
  .calc-actions .calc-note { text-align: center; }
  .rate-card { grid-template-columns: 1fr auto; gap: .9rem 1rem; }
  .rate-main { grid-column: 1; grid-row: 1; }
  .rate-cta { grid-column: 2; grid-row: 1; }
  .rate-journey { grid-column: 1 / -1; grid-row: 2; padding-top: .8rem; border-top: 1px solid var(--line); }
}
@media (max-width: 440px) {
  .rate-card { grid-template-columns: 1fr; gap: .8rem; padding: 1.1rem; }
  .rate-main { grid-column: 1; grid-row: auto; }
  .rate-journey { grid-column: 1; grid-row: auto; gap: .5rem; }
  .rate-cta { grid-column: 1; grid-row: auto; align-items: stretch; }
  .rate-eta, .rate-price { text-align: left; }
  .rate-price { font-size: 1.5rem; }
  .rate-select { width: 100%; }
  .rate-summary { flex-direction: column; align-items: flex-start; }
  .rj-track { min-width: 30px; }
}

/* ===== Reveal animation ===== */
.reveal { opacity: 0; transform: translateY(var(--reveal-travel)); transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); transition-delay: calc(var(--i, 0) * var(--stagger)); will-change: opacity, transform; }
.reveal.in { opacity: 1; transform: none; will-change: auto; }

/* ===== Responsive ===== */
@media (max-width: 960px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-copy { order: -1; }            /* headline leads on mobile */
  .hero-card { order: 0; margin-top: 1.6rem; }
  .hero { padding: 3.2rem 0 5rem; }
  .cards, .steps { grid-template-columns: repeat(2, 1fr); }
  .track-grid, .about-grid, .quote-grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .main-nav {
    position: absolute; top: 72px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--white); border-bottom: 1px solid var(--line);
    padding: .5rem 1.25rem 1.25rem;
    box-shadow: var(--shadow-2);
    max-height: calc(100dvh - 72px); overflow-y: auto; -webkit-overflow-scrolling: touch;
    transform: translateY(-12px); opacity: 0; pointer-events: none;
    transition: .2s ease;
  }
  .main-nav.open { transform: none; opacity: 1; pointer-events: auto; }
  .main-nav a { padding: .85rem .25rem; min-height: 48px; display: flex; align-items: center; border-bottom: 1px solid var(--line); }
  .main-nav .nav-cta { justify-content: center; text-align: center; margin-top: .75rem; border-bottom: 0; }
  .nav-toggle { display: flex; }
  body.nav-open { overflow: hidden; }   /* scroll-lock behind drawer */
  .link-btn { min-height: 44px; display: inline-flex; align-items: center; }
  .footer-col a, .footer-legal a, .crumbs a { display: inline-flex; min-height: 40px; align-items: center; }
  .footer-col a { min-height: 40px; }
  .btn { min-height: 48px; }
}
@media (max-width: 560px) {
  .cards, .steps, .about-stats, .field-row, .calc-row, .calc-row-4 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .track-form { flex-direction: column; }
  .track-form .btn { width: 100%; }
  .hero-trust { gap: 1.5rem; }
  /* prevent iOS zoom-on-focus (>=16px) on touch widths only */
  .calc-field input, .calc-field select,
  .field input, .field select, .field textarea,
  .track-form input { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; scroll-behavior: auto; }
  .reveal, .reveal.in { opacity: 1 !important; transform: none !important; transition: none !important; transition-delay: 0 !important; }
  .seller-band::after, .cta-band::before, #services::before { display: none !important; }
}

/* ===== DHL origin chip + carrier tag ===== */
/* ===== Destination combobox (type-to-search) ===== */
.combo { position: relative; }
.combo-list {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40;
  margin: 0; padding: .3rem; list-style: none;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 16px 36px rgba(13, 34, 49, .20); max-height: 264px; overflow-y: auto;
}
.combo-option {
  padding: .55rem .7rem; border-radius: 8px; cursor: pointer;
  font-family: var(--font-body); font-size: .95rem; color: var(--ink); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.combo-option:hover, .combo-option.is-active { background: var(--accent-soft); color: var(--accent-dark); }
.combo-option mark { background: transparent; color: var(--accent-dark); font-weight: 700; }
.combo-empty { padding: .6rem .7rem; color: var(--slate-light); font-size: .9rem; font-style: italic; }

/* ===== Floating WhatsApp button ===== */
.wa-fab {
  position: fixed; right: 18px; bottom: 18px; z-index: 90;
  display: inline-flex; align-items: center; gap: .55rem;
  height: 54px; padding: 0 18px 0 15px; border-radius: 999px;
  background: linear-gradient(180deg, var(--emerald-500), var(--emerald-600)); color: #fff;
  box-shadow: 0 12px 30px -8px rgba(14, 159, 110, .5), 0 4px 12px rgba(11, 27, 48, .12);
  font-family: var(--font-head); font-weight: 700; font-size: .92rem;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.wa-fab:hover { color: #fff; transform: translateY(-2px); filter: brightness(1.03); box-shadow: 0 18px 38px -10px rgba(14, 159, 110, .55), 0 6px 16px rgba(11, 27, 48, .14); }
.wa-fab:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 6px rgba(14, 159, 110, .45), 0 12px 30px -8px rgba(14, 159, 110, .5); }
.wa-fab svg { flex: none; }
.wa-fab-label { white-space: nowrap; }
@media (max-width: 560px) {
  .wa-fab { right: 14px; bottom: 14px; height: 52px; width: 52px; padding: 0; justify-content: center; }
  .wa-fab-label { display: none; }
}
.footer-col .wa-link { display: inline-flex; align-items: center; gap: .35rem; }

/* ===== L × W × H dimension boxes ===== */
.dim-group { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: .35rem; }
.dim-input { text-align: center; padding-left: .35rem !important; padding-right: .35rem !important; min-width: 0; }
.dim-input::-webkit-outer-spin-button, .dim-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.dim-input { -moz-appearance: textfield; appearance: textfield; }
.dim-x { color: var(--slate-light); font-family: var(--font-head); font-weight: 800; font-size: .9rem; text-align: center; }

.calc-origin {
  display: flex; align-items: center; gap: .45rem;
  padding: .62rem .7rem; border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  background: var(--bg-soft); color: var(--ink); font-weight: 600; font-size: .92rem;
}
.calc-origin svg { color: var(--accent-dark); flex: none; }
.carrier-tag { font-family: var(--font-body); font-weight: 600; font-size: .82rem; color: var(--slate-light); letter-spacing: .01em; }

/* ===== Rate summary actions + business view ===== */
.rate-route-wrap { min-width: 0; }
.rate-summary-actions { display: flex; align-items: center; gap: 1.3rem; flex-wrap: wrap; }

/* ===== Premium polish ===== */
.hero-trust strong { color: var(--accent); }
.section-head h2, .about-copy h2, .track-copy h2, .quote-copy h2 { letter-spacing: -.03em; }
.about-copy h2, .track-copy h2, .quote-copy h2 { font-size: var(--step-4); }
.card-icon { background: linear-gradient(150deg, var(--accent-soft), #eafaf3); color: var(--accent-dark); }
.carrier { box-shadow: var(--shadow-sm); }
.nav-cta { box-shadow: 0 6px 16px rgba(11, 27, 48, .18); }
.section-quote-band { background: linear-gradient(135deg, var(--navy-900), var(--navy-700)); }
.section-quote-band cite { color: var(--accent); }
.legal h2 { font-size: var(--step-3); }

/* ============================================================
   CHECKOUT — step bar, two-column grid, order summary, pay card
   ============================================================ */

/* --- step progress bar --- */
.stepbar {
  display: flex; align-items: center; gap: .5rem; justify-content: center;
  max-width: 720px; margin: 0 auto var(--space-7); padding: 0; flex-wrap: wrap;
}
.stepbar-step {
  display: flex; align-items: center; gap: .55rem;
  color: var(--slate-light); font-family: var(--font-head); font-weight: 700; font-size: .9rem;
}
.stepbar-num {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  font-size: .85rem; background: var(--bg-softer); color: var(--slate-light);
  border: 1.5px solid var(--line); flex: none;
}
.stepbar-step.is-active { color: var(--navy-800); }
.stepbar-step.is-active .stepbar-num {
  background: linear-gradient(135deg, var(--emerald-500), #047857); color: #fff;
  border-color: transparent; box-shadow: 0 6px 14px rgba(14, 159, 110, .3);
}
.stepbar-step.is-done { color: var(--accent-dark); }
.stepbar-step.is-done .stepbar-num { background: var(--accent); color: #fff; border-color: transparent; }
.stepbar-step:not(:last-child)::after {
  content: ""; width: 34px; height: 2px; background: var(--line); margin-left: .5rem; border-radius: 2px;
}
.stepbar-step.is-active:not(:last-child)::after,
.stepbar-step.is-done:not(:last-child)::after { background: var(--accent); }

/* --- two-step checkout (details -> payment) --- */
.co-step[hidden] { display: none; }
.co-step-actions { margin-top: .4rem; }
.co-back {
  display: inline-flex; align-items: center; gap: .4rem;
  background: none; border: 0; cursor: pointer; padding: 0; margin: 0 0 1.4rem;
  font-family: var(--font-head); font-weight: 700; font-size: .85rem; color: var(--accent-dark);
}
.co-back svg { transition: transform .15s ease; }
.co-back:hover { color: var(--accent); }
.co-back:hover svg { transform: translateX(-3px); }

/* horizontal field grid within each wizard step */
.co-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem 1.2rem; }
.co-grid .field { margin: 0; min-width: 0; }
.co-grid .field--full { grid-column: 1 / -1; }
/* roomier controls inside the wizard */
.co-step .field input, .co-step .field select { min-height: 52px; padding: .8rem .9rem; }
.co-step .field textarea { min-height: 92px; padding: .8rem .9rem; }
.co-section legend .legend-sub { font-weight: 600; color: var(--slate-light); }
.co-dropoff {
  display: flex; gap: .8rem; align-items: flex-start;
  background: var(--accent-soft); border: 1px solid #a7e8cf; border-radius: 12px;
  padding: .9rem 1rem; margin-top: .9rem;
}
.co-dropoff svg { color: var(--accent-dark); flex: none; margin-top: .1rem; }
.co-dropoff strong { display: block; font-family: var(--font-head); color: var(--navy-800); font-size: .95rem; margin-bottom: .2rem; }
.co-dropoff > div span { color: var(--slate); font-size: .85rem; line-height: 1.5; }

/* ===== From | To two-column address layout (DHL-style, improved) ===== */
.addr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; }
.addr-grid .addr-col {
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.6rem 1.6rem 1.7rem; margin: 0;
}
.addr-grid .addr-col + .addr-col { padding-top: 1.6rem; }
.addr-col legend { display: flex; align-items: center; gap: .55rem; padding: 0; margin-bottom: 1.1rem; width: 100%; }

/* "To" column locked until "From" (sender) is complete */
.addr-lock-hint { display: none; align-items: center; gap: .3rem; margin-left: auto; font-family: var(--font-body); font-size: .72rem; font-weight: 700; color: var(--warn); background: rgba(245, 158, 11, .14); padding: .18rem .55rem; border-radius: 999px; }
.addr-lock-hint svg { flex: none; }
.addr-col.is-locked { background: #f3f5f9; }
.addr-col.is-locked .addr-lock-hint { display: inline-flex; }
.addr-col.is-locked .field input { cursor: not-allowed; }
.addr-tag { display: inline-flex; align-items: center; font-family: var(--font-head); font-weight: 800; font-size: .92rem; padding: .22rem .6rem; border-radius: 8px; letter-spacing: .01em; }
.addr-tag-from { color: var(--navy-800); background: #e6ecf6; }
.addr-tag-to { color: #fff; background: var(--accent); }
.addr-col .legend-sub { font-weight: 600; color: var(--slate); font-size: .9rem; }
.addr-col .field { margin-bottom: .8rem; }
.addr-col .field:last-child { margin-bottom: 0; }
.addr-col .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin-bottom: .8rem; }
.addr-col .field-row .field { margin-bottom: 0; }
.addr-country-label { display: block; font-family: var(--font-head); font-weight: 600; font-size: .8rem; color: #121c2a; margin-bottom: .4rem; }
@media (max-width: 760px) { .addr-grid { grid-template-columns: 1fr; gap: 1rem; } }

/* compact drop-off note */
.co-dropoff-note {
  display: flex; align-items: flex-start; gap: .5rem;
  margin: 1rem 0 0; padding: .6rem .8rem;
  background: var(--accent-soft); border: 1px solid #a7e8cf; border-radius: 10px;
  color: var(--slate); font-size: .8rem; line-height: 1.45;
}
.co-dropoff-note svg { color: var(--accent-dark); flex: none; margin-top: .15rem; }
.co-dropoff-note strong { color: var(--navy-800); }
.co-section .field-hint { margin-top: .7rem; }
@media (max-width: 560px) { .co-grid { grid-template-columns: 1fr; } }

/* compact 5-step bar on narrow screens (numbers only) */
@media (max-width: 620px) {
  .stepbar { gap: .35rem; }
  .stepbar-label { display: none; }
  .stepbar-step:not(:last-child)::after { width: 16px; margin-left: .35rem; }
}

/* --- two-column layout (summary DOM-first; visually right on desktop) --- */
.checkout-grid {
  display: grid; grid-template-columns: minmax(0, 1280px); justify-content: center;
  gap: var(--space-8); align-items: start; max-width: 1320px; margin: 0 auto;
}
.checkout-grid.with-summary { grid-template-columns: 1.5fr .85fr; justify-content: stretch; }
.checkout-grid > .order-summary { order: 2; position: sticky; top: 92px; }
.checkout-grid > .pay-card { order: 1; }

/* --- order summary --- */
.order-summary {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-2);
}
.os-title { color: var(--navy-800); font-size: 1.15rem; }
.summary-route {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: 1rem 0 1.2rem; padding: .9rem 1rem;
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-family: var(--font-head); font-weight: 700; color: var(--navy-800); font-size: .98rem;
}
.summary-route .sr-arrow { color: var(--accent-dark); flex: none; }
.summary-route .sr-to { color: var(--navy-800); }
.summary-rows { display: grid; gap: 0; }
.summary-row { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--line); }
.summary-row:first-child { border-top: 1px solid var(--line); }
.summary-row dt { color: var(--slate-muted); font-size: .9rem; margin: 0; }
.summary-row dd { margin: 0; font-weight: 600; color: var(--ink); font-size: .92rem; text-align: right; }
.summary-total {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem;
  margin-top: 1.2rem; padding-top: 1.1rem; border-top: 2px solid var(--line);
}
.summary-total > span { font-family: var(--font-head); font-weight: 700; color: var(--navy-800); }
.summary-total small { display: block; color: var(--slate-muted); font-weight: 500; font-size: .72rem; }
.summary-total strong { font-family: var(--font-head); font-weight: 800; font-size: 1.7rem; color: var(--accent-dark); letter-spacing: -.02em; white-space: nowrap; }
.summary-fine { margin-top: 1rem; font-size: .78rem; }

/* --- pay card + sections --- */
.pay-card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 1.8rem; box-shadow: var(--shadow-2);
}
.co-section { border: 0; padding: 0; margin: 0 0 1.6rem; min-width: 0; }
.co-section + .co-section { padding-top: 1.6rem; border-top: 1px solid var(--line); }
.co-section legend { font-family: var(--font-head); font-weight: 800; font-size: 1.05rem; color: var(--navy-800); padding: 0; margin-bottom: 1rem; }
.pay-form { min-width: 0; }

/* card brand SVGs (decorative trust cues) */
.card-brands { display: flex; gap: .5rem; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; }
.card-brands svg { height: 26px; width: auto; border: 1px solid var(--line); border-radius: 6px; background: var(--white); }

/* secure / demo reassurance */
.secure-note {
  display: flex; align-items: center; gap: .5rem; color: var(--accent-dark);
  font-size: .85rem; font-weight: 600; margin: .4rem 0 1.2rem;
}
.secure-note svg { flex: none; }
.demo-note { text-align: center; color: var(--slate-muted); font-size: .78rem; margin-top: .7rem; }
#pay-btn { margin-top: .4rem; }

/* missing-params fallback inside the summary */
.summary-empty { display: grid; gap: .6rem; padding: .5rem 0 1rem; color: var(--slate); }
.summary-empty a { color: var(--accent-dark); font-weight: 700; }
.summary-empty a:hover { text-decoration: underline; }

/* ============================================================
   TRACKING — current-status hero, progress bar, facts, timeline
   (forward-compatible with the upgraded renderTimeline output)
   ============================================================ */
.tid-wrap { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.track-copy { display: inline-flex; align-items: center; gap: .3rem; font-size: .78rem; text-decoration: none; }
.track-copy svg { opacity: .8; }

.track-status {
  display: grid; grid-template-columns: 1fr; gap: 1.1rem;
  background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.3rem 1.4rem; margin-bottom: 1.3rem;
}
.track-status-main small { color: var(--slate-muted); font-size: .74rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.track-status-main strong { display: block; font-family: var(--font-head); font-size: 1.25rem; color: var(--navy-800); margin: .2rem 0 .3rem; letter-spacing: -.02em; }
.track-status-line { color: var(--slate); font-size: .92rem; }
.track-status-line strong { display: inline; font-size: inherit; color: var(--accent-dark); }

.tp-bar { position: relative; height: 5px; background: var(--line); border-radius: 999px; }
.tp-fill { position: absolute; inset: 0 auto 0 0; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-dark)); border-radius: 999px; transition: width .5s ease; }
.tp-stages { display: flex; justify-content: space-between; margin-top: .7rem; }
.tp-stages li { position: relative; flex: 1; text-align: center; font-size: .72rem; font-weight: 600; color: var(--slate-light); }
.tp-stages li:first-child { text-align: left; }
.tp-stages li:last-child { text-align: right; }
.tp-dot { display: block; width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--line); background: var(--white); margin: 0 auto .35rem; }
.tp-stages li:first-child .tp-dot { margin-left: 0; }
.tp-stages li:last-child .tp-dot { margin-right: 0; }
.tp-stages li.done { color: var(--accent-dark); }
.tp-stages li.done .tp-dot { border-color: var(--accent); background: var(--accent); }
.tp-stages li.now { color: var(--navy-800); }
.tp-stages li.now .tp-dot { border-color: var(--accent); background: var(--white); box-shadow: 0 0 0 4px rgba(14, 159, 110, .18); }

.track-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: .9rem 1.4rem; margin-bottom: 1.4rem; }
.track-facts div { display: flex; flex-direction: column; gap: .15rem; }
.track-facts dt { color: var(--slate-muted); font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.track-facts dd { margin: 0; color: var(--ink); font-weight: 600; font-size: .92rem; }
.track-facts .arrow { color: var(--accent-dark); margin: 0 .25rem; }
.track-h { color: var(--navy-800); font-size: 1rem; margin: 0 0 .9rem; }

.tl-time { display: block; color: var(--slate-muted); font-size: .76rem; margin-top: .1rem; }

.track-notfound { min-height: auto; padding: 1.5rem 0; }
.track-notfound h3 { color: var(--navy-800); font-size: 1.1rem; }
.track-notfound-actions { display: flex; gap: .9rem; align-items: center; justify-content: center; flex-wrap: wrap; margin: .4rem 0; }
.track-recent { text-align: center; margin-top: 1rem; }

/* ============================================================
   Checkout / tracking responsive
   ============================================================ */
@media (max-width: 960px) {
  .checkout-grid, .checkout-grid.with-summary { grid-template-columns: 1fr; justify-content: stretch; }
  .checkout-grid > .order-summary { order: -1; position: static; }   /* summary first on mobile */
}
@media (max-width: 560px) {
  .stepbar-label { display: none; }
  .stepbar-step:not(:last-child)::after { width: 20px; }
  .track-facts { grid-template-columns: 1fr; }
  .track-status-main strong { font-size: 1.1rem; }
  .summary-total strong { font-size: 1.5rem; }
}

/* ===== Premium hero v2 ===== */
.hero {
  padding: 5.5rem 0 5.5rem;
  background:
    radial-gradient(820px 440px at 88% -12%, rgba(14, 159, 110, .22), transparent 62%),
    radial-gradient(640px 460px at 4% 118%, rgba(14, 159, 110, .10), transparent 60%),
    linear-gradient(162deg, #060f1c 0%, #0b1d33 52%, #0e2a47 100%);
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1.4px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(125% 95% at 76% 6%, #000 0%, transparent 60%);
          mask-image: radial-gradient(125% 95% at 76% 6%, #000 0%, transparent 60%);
}
.hero-deco { position: absolute; inset: 0; z-index: 0; overflow: hidden; opacity: .6; pointer-events: none; }
.hero-deco svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-inner { position: relative; z-index: 1; }

.hero .eyebrow { display: inline-flex; align-items: center; color: var(--accent); }
.hero .eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--accent); margin-right: .65rem; opacity: .9; }

/* Live-rates badge on the quote card */
.calc-badge {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--font-head); font-weight: 700; font-size: .7rem;
  letter-spacing: .07em; text-transform: uppercase; color: var(--accent-dark);
  background: var(--accent-soft); padding: .3rem .65rem; border-radius: 999px; margin-bottom: .9rem;
}
.calc-badge-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 rgba(14, 159, 110, .5); animation: calcpulse 2.2s infinite; }
@keyframes calcpulse { 0% { box-shadow: 0 0 0 0 rgba(14, 159, 110, .5); } 70% { box-shadow: 0 0 0 7px rgba(14, 159, 110, 0); } 100% { box-shadow: 0 0 0 0 rgba(14, 159, 110, 0); } }

/* Richer quote card + glossier primary button */
.calc-card { box-shadow: 0 32px 70px rgba(3, 10, 20, .48); border: 1px solid rgba(255, 255, 255, .75); }
.calc-card .btn-block { padding-top: .95rem; padding-bottom: .95rem; }
.btn-primary {
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0) 44%),
    linear-gradient(135deg, var(--emerald-500), #047857);
}

/* Premium carrier strip */
.logos { background: var(--bg); padding: 2.6rem 0; }
.logos-label { text-transform: uppercase; letter-spacing: .14em; font-size: .72rem; color: var(--slate-light); }
.carriers { gap: 1.1rem 1.3rem; align-items: center; }
.carrier { border-color: var(--line); }

/* ===== Futuristic refresh ===== */
:root {
  --accent: var(--emerald-500);            /* brighter emerald */
  --grad-from: #34e3a8;
  --grad-to: #06b083;
  --glow: rgba(16, 201, 140, .5);
}

/* Buttons — neon gradient primary, glass secondary */
.btn-primary {
  background: linear-gradient(135deg, var(--grad-from), var(--grad-to));
  color: #04251a;
  box-shadow: 0 10px 30px var(--glow), inset 0 1px 0 rgba(255, 255, 255, .4);
}
.btn-primary:hover {
  filter: brightness(1.05);
  transform: translateY(-2px);
  box-shadow: 0 16px 42px var(--glow), inset 0 1px 0 rgba(255, 255, 255, .5);
}
.hero .btn-ghost, .cta-band .btn-ghost {
  background: rgba(255, 255, 255, .07);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-color: rgba(255, 255, 255, .22); color: #fff;
}
.hero .btn-ghost:hover, .cta-band .btn-ghost:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .42); }

/* Hero — animated aurora, gradient headline, glowing quote card */
.hero::after {
  content: ""; position: absolute; inset: -25% -10% auto -10%; height: 130%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(42% 44% at 28% 32%, rgba(16, 201, 140, .20), transparent 70%),
    radial-gradient(40% 42% at 78% 58%, rgba(22, 180, 205, .14), transparent 72%);
  filter: blur(16px);
  animation: aurora 16s ease-in-out infinite alternate;
}
@keyframes aurora { 0% { transform: translate3d(-3%, -2%, 0) scale(1); } 100% { transform: translate3d(4%, 3%, 0) scale(1.08); } }
.grad-text {
  background: linear-gradient(118deg, var(--grad-from) 0%, #19c8db 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-trust strong { text-shadow: 0 0 20px rgba(16, 201, 140, .35); }

.hero .calc-card {
  position: relative; border-color: transparent;
  box-shadow: 0 30px 80px rgba(2, 8, 16, .55), 0 0 60px rgba(16, 201, 140, .12);
}
.hero .calc-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(150deg, rgba(52, 227, 168, .85), rgba(25, 200, 219, .3) 42%, rgba(255, 255, 255, .05) 72%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}

/* ===== Fix pass: layout + refinements ===== */

/* 1. Hide stray ordered-list markers on the steps */
.steps { list-style: none; padding-left: 0; }

/* 5. Loosen hero heading line-height (was cramped) */
.hero h1 { line-height: 1.16; }

/* 2/6. Unify CTAs — nav "Get a price" uses the primary green gradient like the hero */
.main-nav .nav-cta {
  background: linear-gradient(135deg, var(--grad-from), var(--grad-to));
  color: #04251a;
  box-shadow: 0 6px 16px var(--glow);
}
.main-nav .nav-cta:hover { filter: brightness(1.05); color: #04251a; background: linear-gradient(135deg, var(--grad-from), var(--grad-to)); }

/* 7. Hero photography layer (subtle, under the dark gradient) */
.hero {
  background:
    radial-gradient(820px 440px at 88% -12%, rgba(16, 201, 140, .18), transparent 62%),
    linear-gradient(160deg, rgba(6, 15, 28, .93), rgba(11, 29, 51, .9) 55%, rgba(14, 42, 71, .82));
}
.hero-deco { opacity: .42; }

/* 3. Trust bar (DHL + payment methods + SSL) */
.trust-bar { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 1rem 2.2rem; }
.trust-group { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; justify-content: center; }
.trust-label { text-transform: uppercase; letter-spacing: .12em; font-size: .66rem; font-weight: 700; color: var(--slate-light); }
.pay-badge {
  display: inline-flex; align-items: center; gap: .35rem; height: 30px; padding: 0 .6rem;
  border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: var(--shadow-sm);
  font-family: var(--font-head); font-weight: 800; font-size: .78rem; color: var(--navy-800);
}
.pay-visa { color: #1434cb; font-style: italic; letter-spacing: .02em; }
.pay-ico { width: 14px; height: 16px; }
.mc-mark { width: 26px; height: 16px; position: relative; display: inline-block; }
.mc-mark::before, .mc-mark::after { content: ""; position: absolute; top: 1px; width: 14px; height: 14px; border-radius: 50%; }
.mc-mark::before { left: 0; background: #eb001b; }
.mc-mark::after { right: 0; background: #f79e1b; mix-blend-mode: multiply; }
.trust-ssl { color: var(--ok); font-weight: 700; font-size: .82rem; font-family: var(--font-head); }
.trust-ssl svg { width: 18px; height: 18px; }

/* 4. Why section — single image replaces the sparse 2x2 grid */
.about-media { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); min-height: 360px; }
.about-media img { width: 100%; height: 100%; min-height: 360px; object-fit: cover; display: block; }
.about-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 42%, rgba(6, 15, 28, .6)); }
.about-media-chip {
  position: absolute; left: 1rem; bottom: 1rem; z-index: 1; display: flex; flex-direction: column;
  background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border-radius: 12px; padding: .7rem 1rem; box-shadow: var(--shadow);
}
.about-media-chip strong { font-family: var(--font-head); font-size: 1.6rem; font-weight: 800; color: var(--navy-800); line-height: 1; }
.about-media-chip span { font-size: .8rem; color: var(--slate); margin-top: .2rem; }

/* 9. Mobile: calculator card drops BELOW the hero text */
@media (max-width: 960px) {
  .hero-card { order: 0; margin-top: 1.6rem; }
}

/* ===== Hero metric bar (elite, divided) ===== */
.hero-metrics {
  display: flex; flex-wrap: wrap; margin-top: 2.4rem;
  border-top: 1px solid rgba(255, 255, 255, .14); padding-top: 1.5rem;
}
.hero-metrics .metric { padding: 0 1.7rem; position: relative; }
.hero-metrics .metric:first-child { padding-left: 0; }
.hero-metrics .metric + .metric::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 36px; background: rgba(255, 255, 255, .16);
}
.metric-value { display: block; font-family: var(--font-head); font-weight: 800; font-size: 1.45rem; letter-spacing: -.02em; color: #fff; line-height: 1.1; }
.metric-label { display: block; font-size: .72rem; letter-spacing: .07em; text-transform: uppercase; color: rgba(255, 255, 255, .58); margin-top: .35rem; }

@media (max-width: 560px) {
  .hero-metrics { gap: 1.1rem 1.6rem; border-top: none; padding-top: 1rem; }
  .hero-metrics .metric { padding: 0; }
  .hero-metrics .metric + .metric::before { display: none; }
  .metric-value { font-size: 1.25rem; }
}

/* ===== Elite hero: clean gradient + world-routes globe ===== */
.hero {
  background:
    radial-gradient(760px 540px at 80% 14%, rgba(16, 201, 140, .16), transparent 60%),
    radial-gradient(620px 460px at 4% 112%, rgba(16, 201, 140, .08), transparent 60%),
    linear-gradient(160deg, #060f1c 0%, #0a1a2e 52%, #0c2238 100%);
}
.hero-deco { opacity: .68; }
@media (max-width: 960px) { .hero-deco { opacity: .38; } }

/* ===== Elite hero v2: Dubai-night photo + directional scrim + flight routes ===== */
.hero {
  background:
    radial-gradient(680px 480px at 84% 8%, rgba(16, 201, 140, .16), transparent 60%),
    linear-gradient(101deg, rgba(6, 13, 24, .96) 0%, rgba(8, 20, 36, .9) 36%, rgba(9, 24, 42, .66) 68%, rgba(11, 32, 54, .5) 100%),
    url("images/hero-airport.jpg") center / cover no-repeat;
}
.hero::after { mix-blend-mode: screen; opacity: .7; }   /* aurora reads as city glow, not haze */
.hero-deco { opacity: .9; }
@media (max-width: 960px) {
  .hero {
    background:
      radial-gradient(600px 420px at 80% 6%, rgba(16, 201, 140, .14), transparent 60%),
      linear-gradient(180deg, rgba(6, 13, 24, .92) 0%, rgba(8, 20, 36, .82) 55%, rgba(10, 28, 48, .8) 100%),
      url("images/hero-airport.jpg") center / cover no-repeat;
  }
  .hero-deco { opacity: .55; }
}

/* ===== Hero v3: DHL cargo plane, brighter, no motion/lines ===== */
.hero {
  background:
    linear-gradient(100deg, rgba(6, 13, 24, .85) 0%, rgba(8, 20, 36, .6) 34%, rgba(9, 24, 42, .3) 60%, rgba(11, 32, 54, .1) 100%);
}
.hero::after { display: none; }   /* remove the aurora wash so the photo reads clean */
@media (max-width: 960px) {
  .hero {
    background:
      linear-gradient(180deg, rgba(6, 13, 24, .82) 0%, rgba(8, 20, 36, .55) 52%, rgba(10, 28, 48, .42) 100%);
  }
}

/* ============================================================================
   ALIFLOW KINETIC — palette + hero + calculator redesign (authoritative)
   Intentionally LAST so it wins the cascade over the earlier layered overrides.
   Brand: Deep Navy foundation · Vibrant Teal CTA · Crisp-white surfaces ·
   tonal depth (no heavy shadow) · Plus Jakarta Sans + Inter.
   ============================================================================ */

:root {
  --accent:       #0e9f6e;   /* emerald — the ownable lane (DHL=yellow, FedEx=purple) */
  --accent-dark:  #047857;   /* deep emerald — body links, labels (AA on white) */
  --accent-light: #6ee7b7;   /* light emerald — accents on dark surfaces */
  --accent-soft:  #d6f1e6;   /* emerald tint */
  --grad-from:    var(--emerald-500);   /* bright emerald — CTA gradient start */
  --grad-to:      #047857;   /* deep emerald — CTA gradient end */
  --glow:         rgba(14, 159, 110, .40);
  --ring:         0 0 0 4px rgba(14, 159, 110, .22);
  --ring-soft:    0 0 0 4px rgba(14, 159, 110, .15);
  --ok:           #00b87c;   /* green kept ONLY for true logistics status (tracking) */
  --navy-900:     #081320;
  --navy-800:     #0d2231;   /* deep-navy */
  --navy-700:     #16324f;
  --line:         #e2e8f0;
  --bg-soft:      #f9fafb;
  --bg-softer:    #eef7f2;

  /* ---- Motion system (one settle curve + one response curve) ---- */
  --ease-out:     cubic-bezier(.22, 1, .36, 1);  /* things ARRIVING — reveals, settles; zero overshoot */
  --ease-soft:    cubic-bezier(.4, 0, .2, 1);     /* things RESPONDING — hover, press, focus */
  --dur-reveal:   .55s;   /* scroll reveal */
  --dur-ui:       .18s;   /* quick press / UI */
  --dur-ui-slow:  .26s;   /* card lift, chevron, price slab */
  --reveal-travel: 16px;
  --stagger:      70ms;
  --spring:       cubic-bezier(.34, 1.56, .64, 1); /* overshoot+settle; upgraded to linear() below */
}
/* Spring physics where the browser supports linear() easing (Chrome 113+, Safari 17.4+) */
@supports (animation-timing-function: linear(0, 1)) {
  :root { --spring: linear(0, 0.009, 0.035 2.1%, 0.281 6.7%, 0.723 12.9%, 1.017, 1.121, 1.149 24.3%, 1.103, 1.013, 0.985 56%, 1.006, 1.004, 1); }
}

/* ---- Buttons: teal gradient with WHITE text (Kinetic spec) ---- */
.btn-primary {
  background: linear-gradient(135deg, var(--emerald-500), #047857);
  color: #fff;
  box-shadow: 0 10px 26px rgba(14, 159, 110, .32), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.btn-primary:hover {
  color: #fff; filter: brightness(1.03); transform: translateY(-2px);
  box-shadow: 0 16px 38px rgba(14, 159, 110, .45), inset 0 1px 0 rgba(255, 255, 255, .28);
}
.btn-primary:active { transform: translateY(0); }
.main-nav .nav-cta { background: linear-gradient(135deg, var(--emerald-500), #047857); color: #fff; box-shadow: 0 6px 16px var(--glow); }
.main-nav .nav-cta:hover { background: linear-gradient(135deg, var(--emerald-500), #047857); color: #fff; filter: brightness(1.03); }

/* ===== Hero — "Quiet Authority" editorial minimalist ===== */
.hero {
  position: relative; color: #fff; overflow: hidden;
  padding: 5.5rem 0 4.5rem;
  /* plain solid navy background */
  background: #0a1c30;
}
.hero::before { display: none; }   /* kill legacy dot-grid */
.hero::after  { display: none; }   /* kill legacy aurora wash */
.hero-deco    { display: none; }   /* no route lines */

.hero-inner {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: stretch; gap: 1.9rem;
}
.hero-copy { max-width: 42rem; }

.hero .eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  font-family: var(--font-head); font-weight: 700;
  font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
  color: #6ee7b7; margin-bottom: 1.1rem;
}
.hero .eyebrow::before { content: ""; width: 30px; height: 2px; border-radius: 2px; background: #6ee7b7; margin: 0; }

.hero h1 {
  font-family: var(--font-head);
  font-size: clamp(2.6rem, 1.8rem + 3.4vw, 4.25rem);
  font-weight: 800; line-height: 1.04; letter-spacing: -.035em;
  max-width: 16ch; margin: 0;
}
/* solid, confident headline — no gradient text (the cheap-template tell) */
.hero .grad-text {
  background: none;
  -webkit-background-clip: border-box; background-clip: border-box;
  color: #fff; -webkit-text-fill-color: #fff;
  text-shadow: none;
}

.hero .lead {
  font-family: var(--font-body);
  color: rgba(255, 255, 255, .84); font-size: 1.12rem; line-height: 1.6;
  max-width: 34rem; margin: 1.4rem 0 0;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2rem; }
.hero-actions .btn { min-height: 48px; border-radius: 10px; padding: .85rem 1.6rem; }
.hero .btn-primary { background: linear-gradient(135deg, var(--emerald-500), #047857); color: #fff; box-shadow: 0 10px 28px rgba(14, 159, 110, .35); }
.hero .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(14, 159, 110, .45); }
.hero .btn-ghost {
  background: rgba(255, 255, 255, .08); color: #fff;
  border: 1px solid rgba(255, 255, 255, .22);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.hero .btn-ghost:hover { background: rgba(255, 255, 255, .15); border-color: rgba(255, 255, 255, .42); }

/* Divided 3-metric bar */
.hero-metrics { display: flex; flex-wrap: wrap; margin-top: 2.6rem; padding-top: 1.6rem; border-top: 1px solid rgba(255, 255, 255, .16); }
.hero-metrics .metric { padding: 0 1.8rem; position: relative; }
.hero-metrics .metric:first-child { padding-left: 0; }
.hero-metrics .metric + .metric::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 34px; background: rgba(255, 255, 255, .16); }
.metric-value { display: block; font-family: var(--font-head); font-weight: 800; font-size: 1.5rem; letter-spacing: -.02em; color: #fff; line-height: 1.1; text-shadow: none; }
.metric-label { display: block; font-family: var(--font-body); font-size: .72rem; letter-spacing: .07em; text-transform: uppercase; color: rgba(255, 255, 255, .62); margin-top: .4rem; }

/* ===== Floating glass calculator ===== */
.hero-card { display: flex; justify-content: center; }
.hero .calc-card {
  position: relative; z-index: 1;
  width: 100%; max-width: 420px;
  background: rgba(255, 255, 255, .96);
  -webkit-backdrop-filter: blur(18px) saturate(118%); backdrop-filter: blur(18px) saturate(118%);
  color: #121c2a;
  border: 1px solid rgba(226, 232, 240, .9);
  border-radius: 24px;
  padding: 1.7rem 1.6rem;
  box-shadow: 0 4px 12px rgba(13, 34, 49, .05), 0 24px 60px rgba(13, 34, 49, .22);
  transition: transform .25s ease, box-shadow .25s ease;
}
.hero .calc-card::after { display: none; }   /* remove legacy neon border ring */
.hero .calc-card:hover { transform: translateY(-4px); box-shadow: 0 6px 16px rgba(13, 34, 49, .06), 0 32px 72px rgba(13, 34, 49, .28); }
/* quiet brand signature: a thin teal rule above the title */
.hero .calc-card::before { content: ""; display: block; width: 34px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--emerald-500), #047857); margin-bottom: 1rem; }

/* Credible, steady (non-anxious) live badge */
.calc-badge {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--font-head); font-weight: 700; font-size: .68rem;
  letter-spacing: .1em; text-transform: uppercase; color: #065f46;
  background: rgba(14, 159, 110, .12); padding: .32rem .65rem; border-radius: 9999px; margin-bottom: .85rem;
}
.calc-badge-dot { width: 7px; height: 7px; border-radius: 50%; background: #047857; box-shadow: 0 0 0 0 rgba(14, 159, 110, .5); animation: calcpulse 2.6s infinite; }

.calc-title { font-family: var(--font-head); font-weight: 800; font-size: 1.35rem; letter-spacing: -.02em; color: #0f172a; margin: 0; }
.calc-sub { font-family: var(--font-body); color: #45464d; font-size: .88rem; margin: .3rem 0 1.2rem; }

.calc-field { display: flex; flex-direction: column; margin-bottom: .85rem; min-width: 0; }
.calc-field label { font-family: var(--font-head); font-weight: 600; font-size: .8rem; color: #121c2a; margin-bottom: .4rem; }
.calc-field .opt { color: #9aa3ad; font-weight: 500; }
.calc-row { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }

.calc-field select, .calc-field input {
  width: 100%; min-height: 48px; padding: .7rem .85rem;
  font: inherit; color: #121c2a; background: #fff;
  border: 1.5px solid #e2e8f0; border-radius: 12px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.calc-field select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2345464d' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .9rem center; padding-right: 2.4rem;
}
.calc-field input::placeholder { color: #9aa3ad; }
.calc-field select:focus, .calc-field input:focus { outline: none; border-color: var(--accent-dark); box-shadow: var(--ring); }
.calc-field select.invalid, .calc-field input.invalid { border-color: var(--danger) !important; box-shadow: var(--ring-danger); }

/* Fixed origin — visibly locked, not a choice */
.calc-origin {
  display: flex; align-items: center; gap: .5rem;
  min-height: 48px; padding: .7rem .85rem;
  background: #f9fafb; border: 1.5px solid #e2e8f0; border-radius: 12px;
  font-family: var(--font-body); font-weight: 600; color: #121c2a;
}
.calc-origin svg { color: #047857; flex: none; }
.calc-origin::after {
  content: ""; margin-left: auto; width: 14px; height: 14px; flex: none; background: #9aa3ad;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10' width='16' height='11' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10' width='16' height='11' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Primary submit + trailing arrow */
.hero .calc-card .btn-block {
  width: 100%; min-height: 48px; margin-top: .5rem;
  border-radius: 10px; font-family: var(--font-head); font-weight: 700;
  color: #fff; background: linear-gradient(135deg, var(--emerald-500), #047857);
  box-shadow: 0 8px 20px rgba(14, 159, 110, .28);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.hero .calc-card .btn-block:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(14, 159, 110, .4); filter: brightness(1.02); }
.hero .calc-card .btn-block:active { transform: translateY(0); }
.calc-card .btn-block svg { transition: transform .15s ease; }
.calc-card .btn-block:hover svg { transform: translateX(3px); }

.calc-note { margin-top: .7rem; min-height: 1em; text-align: center; font-family: var(--font-body); font-size: .85rem; font-weight: 600; color: #d6453d; }

/* On-card trust strip (grafted from the conversion concept) */
.calc-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem 1.1rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #eef1f5; }
.calc-trust li { display: inline-flex; align-items: center; gap: .35rem; font-family: var(--font-body); font-size: .72rem; font-weight: 600; color: #45464d; }
.calc-trust li::before { content: ""; width: 13px; height: 13px; flex: none; background: #047857; -webkit-mask: var(--ico-check) center / contain no-repeat; mask: var(--ico-check) center / contain no-repeat; }

.calc-fineprint { margin-top: .8rem; text-align: center; font-family: var(--font-body); font-size: .74rem; color: #6b7280; }

/* ===== Horizontal quote bar (hero) — left-to-right ===== */
.calc-bar {
  position: relative; z-index: 1;
  background: rgba(255, 255, 255, .97);
  -webkit-backdrop-filter: blur(18px) saturate(118%); backdrop-filter: blur(18px) saturate(118%);
  color: #121c2a;
  border: 1px solid rgba(226, 232, 240, .9);
  border-radius: 18px;
  padding: 1.05rem 1.25rem 1.1rem;
  box-shadow: 0 4px 12px rgba(13, 34, 49, .05), 0 24px 60px rgba(13, 34, 49, .22);
}
.calc-bar-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .9rem; flex-wrap: wrap; }
.calc-bar-head .calc-badge { margin-bottom: 0; }
.calc-track-link { font-family: var(--font-head); font-weight: 700; font-size: .8rem; color: var(--accent-dark); display: inline-flex; align-items: center; gap: .3rem; }
.calc-track-link svg { transition: transform .15s ease; }
.calc-track-link:hover { color: var(--accent); }
.calc-track-link:hover svg { transform: translateX(3px); }

.calc-bar-fields {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.45fr) minmax(0, .72fr) minmax(0, 1fr) auto;
  gap: .85rem;
  align-items: end;
}
.calc-bar .calc-field { margin-bottom: 0; min-width: 0; }
.calc-bar .calc-origin { white-space: nowrap; overflow: hidden; }
.calc-bar-btn { min-height: 48px; align-self: end; white-space: nowrap; padding: .85rem 1.6rem; border-radius: 10px; }
.calc-bar-btn svg { transition: transform .15s ease; }
.calc-bar-btn:hover svg { transform: translateX(3px); }

.calc-bar .calc-note { text-align: left; margin-top: .65rem; }
.calc-underbar { display: flex; align-items: center; justify-content: space-between; gap: .55rem 1.4rem; flex-wrap: wrap; margin-top: .85rem; padding-top: .85rem; border-top: 1px solid #eef1f5; }
.calc-underbar .calc-trust { margin: 0; padding: 0; border: none; justify-content: flex-start; gap: .45rem 1.2rem; }
.calc-underbar .calc-fineprint { margin: 0; text-align: right; }

/* ---- Responsive ---- */
@media (max-width: 960px) {
  .hero {
    padding: 3.5rem 0 3rem;
    background:
      radial-gradient(520px 480px at 88% -6%, rgba(14, 159, 110, .20), transparent 62%),
      linear-gradient(160deg, #0e2540 0%, #0a1b30 100%);
  }
  .hero h1 { max-width: 20ch; }
  /* quote bar: two columns + full-width button */
  .calc-bar-fields { grid-template-columns: 1fr 1fr; gap: .8rem 1rem; }
  .calc-bar-btn { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .hero-metrics { gap: 1.1rem 1.6rem; border-top: none; padding-top: .5rem; }
  .hero-metrics .metric { padding: 0; }
  .hero-metrics .metric + .metric::before { display: none; }
  .metric-value { font-size: 1.3rem; }
}
@media (max-width: 560px) {
  .calc-bar-fields { grid-template-columns: 1fr; }
  .calc-underbar { flex-direction: column; align-items: flex-start; }
  .calc-underbar .calc-fineprint { text-align: left; }
}
@media (max-width: 520px) {
  .calc-row { grid-template-columns: 1fr; }
  .calc-bar { padding: 1rem 1rem 1.05rem; }
}

/* ===== Quote: request-type selector (segmented pills) ===== */
.field-legend { display: block; font-family: var(--font-head); font-weight: 600; font-size: var(--step--1); color: var(--navy-800); margin-bottom: .5rem; }
.reqtype-group { display: flex; flex-wrap: wrap; gap: .5rem; }
.reqtype { cursor: pointer; }
.reqtype input { position: absolute; opacity: 0; width: 0; height: 0; }
.reqtype span {
  display: inline-flex; align-items: center; min-height: 40px; padding: .4rem .85rem;
  border: 1.5px solid var(--line); border-radius: 999px; background: #fff;
  font-family: var(--font-body); font-weight: 600; font-size: .88rem; color: var(--navy-800);
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.reqtype:hover span { border-color: var(--accent); }
.reqtype input:checked + span { background: rgba(14, 159, 110, .12); border-color: var(--accent); color: var(--accent-dark); }
.reqtype input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ===== Seller band (e-commerce pitch) ===== */
.seller-band { background: linear-gradient(150deg, #0e2540 0%, #0a1b30 100%); color: #fff; position: relative; overflow: hidden; }
.seller-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(700px 460px at 88% 0%, rgba(14, 159, 110, .28), transparent 60%); pointer-events: none; }
.seller-inner { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; gap: 2.5rem; align-items: center; }
.seller-band .eyebrow { color: var(--accent-light); }
.seller-band h2 { color: #fff; font-size: var(--step-4); letter-spacing: -.03em; }
.seller-band p { color: rgba(255, 255, 255, .82); margin-top: .8rem; max-width: 40rem; }
.seller-points { display: grid; gap: .9rem; margin: 0; }
.seller-points li { display: flex; gap: .7rem; align-items: flex-start; color: rgba(255, 255, 255, .92); }
.seller-points li strong { display: block; color: #fff; font-family: var(--font-head); font-weight: 700; }
.seller-points li small { color: rgba(255, 255, 255, .65); font-size: .9rem; }
.seller-ico { flex: none; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: rgba(14, 159, 110, .22); color: var(--accent-light); margin-top: .1rem; }
.seller-actions { margin-top: 1.6rem; display: flex; gap: .8rem; flex-wrap: wrap; }
@media (max-width: 860px) { .seller-inner { grid-template-columns: 1fr; gap: 1.6rem; } }

/* ===== Service cards: links, featured + tag ===== */
.card { display: flex; flex-direction: column; }
.card .card-link { margin-top: auto; }
.card-link {
  display: inline-flex; align-items: center; gap: .3rem; padding-top: .9rem;
  font-family: var(--font-head); font-weight: 700; font-size: .88rem; color: var(--accent-dark);
  transition: gap .15s ease, color .15s ease;
}
.card-link:hover { color: var(--accent); gap: .55rem; }
.card.is-featured { position: relative; border-color: var(--accent); box-shadow: 0 12px 32px rgba(14, 159, 110, .14); }
.card.is-featured::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--accent); border-radius: var(--radius) var(--radius) 0 0; }
.card-tag {
  align-self: flex-start; font-family: var(--font-head); font-weight: 700; font-size: .64rem;
  letter-spacing: .07em; text-transform: uppercase; color: var(--accent-dark);
  background: rgba(14, 159, 110, .12); padding: .22rem .55rem; border-radius: 999px; margin-bottom: .7rem;
}

/* ===== Quote bar: quick chips + live inline price ===== */
.calc-quick { display: flex; flex-wrap: wrap; gap: .55rem 1.5rem; margin-top: 1rem; }
.quick-group { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.quick-label { font-family: var(--font-head); font-weight: 700; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--slate-light); margin-right: .1rem; }
.quick-unit { color: var(--slate-light); font-size: .8rem; }
.qchip {
  font-family: var(--font-body); font-weight: 600; font-size: .82rem; color: var(--navy-800);
  background: #fff; border: 1.5px solid var(--line); border-radius: 999px;
  padding: .34rem .72rem; min-height: 33px; cursor: pointer; white-space: nowrap;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.qchip-kg { min-width: 40px; text-align: center; padding: .34rem .55rem; }
.qchip:hover { border-color: var(--accent); color: var(--accent-dark); }
.qchip[aria-pressed="true"] { background: rgba(14, 159, 110, .12); border-color: var(--accent); color: var(--accent-dark); }
.qchip:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.calc-live {
  display: grid; grid-template-rows: 0fr; opacity: 0; margin-top: 0;
  transition: grid-template-rows var(--dur-ui-slow) var(--ease-out), opacity var(--dur-ui-slow) var(--ease-out), margin-top var(--dur-ui-slow) var(--ease-out);
}
.calc-live.is-open { grid-template-rows: 1fr; opacity: 1; margin-top: 1rem; }
.calc-live-inner { overflow: hidden; }
.calc-live.is-open .calc-live-inner {
  background: linear-gradient(180deg, rgba(14, 159, 110, .06), rgba(14, 159, 110, .11));
  border: 1px solid rgba(14, 159, 110, .22); border-radius: 12px;
  padding: .8rem 1.05rem; box-shadow: 0 6px 18px rgba(14, 159, 110, .12);
}
.calc-live-headline { margin: 0; font-family: var(--font-head); line-height: 1.2; }
.calc-live-from { color: var(--slate); font-size: .98rem; font-weight: 600; }
.calc-live-amount { color: var(--navy-800); font-weight: 800; font-size: 1.55rem; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.calc-live-eta { color: var(--slate); font-size: .98rem; font-weight: 600; }
.calc-live-meta { margin: .25rem 0 0; color: var(--slate-muted); font-size: .76rem; }
@media (prefers-reduced-motion: reduce) { .calc-live { transition: none; } }

/* ---- Keep the cobalt accent cohesive across inner components ---- */
.card-icon { background: linear-gradient(150deg, #d6f1e6, #e9f6ef); color: #065f46; }
.rbadge-cheap { color: #065f46; background: rgba(14, 159, 110, .12); }
.rbadge-fast { color: var(--warn); background: rgba(245, 158, 11, .16); }
.rate-charge { color: var(--accent-dark); }

/* ===== Rate tiers, skeleton loading & price count-up (audit pass) ===== */
.rate-delta { display: block; color: var(--slate-muted); font-size: .72rem; font-weight: 500; margin-top: .2rem; }
.rate-delta-best { color: var(--accent-dark); font-weight: 700; }
.rate-card.is-featured { position: relative; border-color: var(--accent); box-shadow: 0 10px 30px rgba(14, 159, 110, .14), inset 0 2px 0 var(--accent); }

@keyframes rate-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.rate-list:not(.rate-skeleton) .rate-card { animation: rate-in .5s cubic-bezier(.16, 1, .3, 1) both; }
.rate-list:not(.rate-skeleton) .rate-card:nth-child(2) { animation-delay: .06s; }
.rate-list:not(.rate-skeleton) .rate-card:nth-child(3) { animation-delay: .12s; }
.rate-list:not(.rate-skeleton) .rate-card:nth-child(4) { animation-delay: .18s; }

.rate-skeleton .sk-card { display: block; }
.rate-skeleton .sk { position: relative; overflow: hidden; background: #eef1f6; border-radius: 8px; }
.rate-skeleton .sk-line { height: 14px; margin: .45rem 0; }
.rate-skeleton .sk-w30 { width: 30%; } .rate-skeleton .sk-w40 { width: 40%; } .rate-skeleton .sk-w60 { width: 60%; }
.rate-skeleton .sk-btn { height: 42px; width: 170px; margin-top: .9rem; border-radius: 10px; }
.rate-skeleton .sk::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .65), transparent); animation: sk-shimmer 1.3s infinite; }
@keyframes sk-shimmer { 100% { transform: translateX(100%); } }

/* ===== Coverage grid (audit) ===== */
.coverage-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.coverage-card {
  display: flex; flex-direction: column; gap: .3rem;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.2rem 1.3rem; box-shadow: var(--shadow-xs);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.coverage-card:hover { border-color: var(--accent); box-shadow: var(--shadow-1); transform: translateY(-2px); }
.cov-region { font-family: var(--font-head); font-weight: 700; color: var(--navy-800); font-size: 1.02rem; }
.cov-eta { color: var(--accent-dark); font-weight: 600; font-size: .9rem; }
@media (max-width: 760px) { .coverage-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .coverage-grid { grid-template-columns: 1fr; } }

/* ===== FAQ accordion (audit) ===== */
.faq { max-width: 820px; margin: 0 auto; display: grid; gap: .7rem; }
.faq-item { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.faq-item summary {
  list-style: none; cursor: pointer; padding: 1.1rem 1.3rem;
  font-family: var(--font-head); font-weight: 700; color: var(--navy-800); font-size: 1.02rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ""; width: 10px; height: 10px; flex: none; margin-top: -3px;
  border-right: 2px solid var(--slate); border-bottom: 2px solid var(--slate);
  transform: rotate(45deg); transition: transform .2s ease;
}
.faq-item[open] summary { color: var(--accent-dark); }
.faq-item[open] summary::after { transform: rotate(-135deg); margin-top: 3px; }
.faq-item summary:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; border-radius: var(--radius-sm); }
.faq-body { padding: 0 1.3rem 1.2rem; color: var(--slate); line-height: var(--lh-body); }
.faq-body p { max-width: 64ch; margin: 0; }
.faq-body a { color: var(--accent-dark); font-weight: 600; }

/* ============================================================
   FLOW POLISH — soft section seams + one unified response curve
   (the page reads as one continuous glide; nothing new is added,
    existing motion is unified onto --ease-out / --ease-soft)
   ============================================================ */

/* ---- Section seams ---- */
/* hero (navy) -> services (white): CLEAN crisp edge. The soft navy-to-transparent
   fade here read as a white haze at the hero bottom — removed per owner (2026-06-19). */
#services { position: relative; }
#services > .container { position: relative; z-index: 1; }

/* White/light seam fades removed per owner (2026-06-19): the seller-band top
   sheen, its grey bottom fade, and the cta-band white top fade all read as a
   milky haze. Sections now meet on clean, crisp edges. */
.seller-band { background: linear-gradient(150deg, #0e2540 0%, #0a1b30 100%); }
.seller-inner { position: relative; z-index: 1; }
.cta-band > .container { position: relative; z-index: 1; }

/* ---- Unified micro-interactions: everything that RESPONDS shares one curve ---- */
.card, .coverage-card, .rate-card {
  transition: transform var(--dur-ui-slow) var(--ease-soft),
              box-shadow var(--dur-ui-slow) var(--ease-soft),
              border-color var(--dur-ui-slow) var(--ease-soft);
}
.card:hover, .coverage-card:hover, .rate-card:hover { transform: translateY(-3px); }

.btn {
  transition: transform var(--dur-ui) var(--ease-soft),
              box-shadow var(--dur-ui) var(--ease-soft),
              background var(--dur-ui) var(--ease-soft),
              border-color var(--dur-ui) var(--ease-soft);
}

.qchip {
  transition: background var(--dur-ui) var(--ease-soft),
              border-color var(--dur-ui) var(--ease-soft),
              color var(--dur-ui) var(--ease-soft);
}
.qchip:active { transform: translateY(1px); }

/* link arrows glide on the same response curve */
.card-link svg, .calc-track-link svg, .calc-card .btn-block svg, .calc-bar-btn svg {
  transition: transform var(--dur-ui) var(--ease-soft);
}
.card-link:hover svg { transform: translateX(3px); }

/* FAQ chevron settles on the shared slow-ui timing */
.faq-item summary::after { transition: transform var(--dur-ui-slow) var(--ease-soft); }


/* ============================================================
   MERIDIAN — Living Globe Quote Console
   APPEND TO THE END of styles.css (must be the LAST hero rules
   so it wins the cascade over the Kinetic block + emerald legacy).
   No script.js changes. Every JS hook preserved.
   ============================================================ */

/* ---- 1. Deep-space sky (two cobalt blooms over 3-stop navy) ---- */
.hero.hero--meridian {
  position: relative;
  color: #fff;
  overflow: hidden;
  padding: 5.25rem 0 4rem;
  background: #0a1c30;   /* plain solid navy */
}
.hero.hero--meridian::before,
.hero.hero--meridian::after { display: none; }   /* legacy glows / dot-grid stay off */

/* ---- 2. Departure scene ---- */
.hero--meridian .hero-orbit {
  position: absolute; inset: auto 0 0 0;
  width: 100%; height: 80%; z-index: 0;
  pointer-events: none; opacity: 1;
}

/* routes draw outward from the UAE pin, staggered, then hold */
.hero--meridian .orbit-route {
  stroke-dasharray: 1300; stroke-dashoffset: 1300;
  animation: meridianRouteDraw 1.7s var(--ease-out) forwards;
}
.hero--meridian .orbit-route--1 { animation-delay: .35s; }
.hero--meridian .orbit-route--2 { animation-delay: .55s; }
.hero--meridian .orbit-route--3 { animation-delay: .75s; }
@keyframes meridianRouteDraw { to { stroke-dashoffset: 0; } }

/* destination pins + labels fade in once their route lands */
.hero--meridian .orbit-dest { opacity: 0; animation: meridianEndFade .6s var(--ease-out) forwards; }
.hero--meridian .orbit-dest--uk { animation-delay: 1.5s; }
.hero--meridian .orbit-dest--de { animation-delay: 1.8s; }
.hero--meridian .orbit-dest--us { animation-delay: 2.1s; }
@keyframes meridianEndFade { to { opacity: 1; } }
.hero--meridian .dest-label {
  fill: #a7f3d0; font-family: var(--font-head); font-size: 16px; font-weight: 600; letter-spacing: .03em;
}
.hero--meridian .dest-ring {
  fill: none; stroke: #6ee7b7; stroke-width: 1.4;
  transform-box: fill-box; transform-origin: center;
  animation: meridianPulse 3.2s ease-in-out infinite;
}
@keyframes meridianPulse {
  0%, 100% { transform: scale(.8); opacity: .25; }
  50% { transform: scale(1.18); opacity: .6; }
}

/* origin pin (UAE) — continuous ping */
.hero--meridian .origin-ping {
  fill: none; stroke: #6ee7b7; stroke-width: 1.5;
  transform-box: fill-box; transform-origin: center;
  animation: meridianPing 2.8s ease-out infinite;
}
@keyframes meridianPing {
  0% { transform: scale(.5); opacity: .85; }
  70%, 100% { transform: scale(2.6); opacity: 0; }
}

/* parcel travels the Germany arc on a calm loop */
.hero--meridian .orbit-parcel {
  offset-path: path("M175 360 Q 600 70 1010 195");
  offset-rotate: 0deg;
  animation: meridianParcel 5.6s cubic-bezier(.45, 0, .25, 1) 1.6s infinite;
}
@keyframes meridianParcel {
  0%   { offset-distance: 0%;   opacity: 0; }
  9%   { opacity: 1; }
  58%  { offset-distance: 100%; opacity: 1; }
  66%  { offset-distance: 100%; opacity: 0; }
  100% { offset-distance: 100%; opacity: 0; }
}

/* "Delivered" stamp pops when the parcel lands, synced to the loop */
.hero--meridian .orbit-stamp {
  transform-box: fill-box; transform-origin: 12% 50%;
  opacity: 0; animation: meridianStamp 5.6s ease 1.6s infinite;
}
.hero--meridian .stamp-chip { fill: rgba(10, 27, 48, .82); stroke: rgba(110, 231, 183, .5); stroke-width: 1; }
.hero--meridian .stamp-badge { fill: #6ee7b7; }
.hero--meridian .stamp-text { fill: #e7f6ef; font-family: var(--font-head); font-size: 14px; font-weight: 700; letter-spacing: .02em; }
@keyframes meridianStamp {
  0%, 50% { opacity: 0; transform: scale(.7); }
  58% { opacity: 1; transform: scale(1.06); }
  64% { transform: scale(1); }
  90% { opacity: 1; }
  100% { opacity: 0; transform: scale(1); }
}

/* ---- 3. Layout shell + entrance (NO .reveal dependency) ---- */
.hero--meridian .hero-inner {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: stretch;
  gap: 1.85rem;
}
.hero--meridian .hero-copy { max-width: 46rem; }

.hero--meridian .hero-copy,
.hero--meridian .calc-bar,
.hero--meridian .hero-metrics {
  opacity: 0;
  animation: meridianRise var(--dur-reveal) var(--ease-out) forwards;
}
.hero--meridian .hero-copy    { animation-delay: .05s; }
.hero--meridian .calc-bar     { animation-delay: .14s; }
.hero--meridian .hero-metrics { animation-delay: .23s; }
@keyframes meridianRise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ---- 4. Copy ---- */
.hero--meridian .eyebrow {
  display: inline-flex; align-items: center; gap: .65rem;
  font-family: var(--font-head); font-weight: 700;
  font-size: .74rem; letter-spacing: .18em; text-transform: uppercase;
  color: #6ee7b7; margin-bottom: .85rem;
}
.hero--meridian .eyebrow::before {
  content: ""; width: 30px; height: 2px; border-radius: 2px;
  background: #6ee7b7; margin: 0;
}
.hero--meridian h1 {
  font-family: var(--font-head);
  font-size: clamp(2.7rem, 1.8rem + 3.6vw, 4.5rem);
  font-weight: 800; line-height: 1.06; letter-spacing: -.038em;
  max-width: 15ch; margin: 0;
}
/* restrained metallic-cobalt sheen on line 2 (specificity beats the kill block) */
.hero.hero--meridian .grad-text {
  background: linear-gradient(92deg, #ffffff 0%, #cdeede 42%, #6ee7b7 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  text-shadow: none;
  background-size: 200% 100%;
  animation: meridianSheen 1.1s var(--ease-out) .55s both;
}
@keyframes meridianSheen { from { background-position: 120% 0; } to { background-position: 0 0; } }
.hero--meridian .lead {
  font-family: var(--font-body);
  color: rgba(255, 255, 255, .9);
  font-size: 1.14rem; line-height: 1.45;
  max-width: 30rem; margin: 1.3rem 0 0;
}

/* ============================================================
   5. THE QUOTE CONSOLE
   ============================================================ */
.hero--meridian .calc-bar {
  position: relative; z-index: 2;
  width: 100%; max-width: 1080px; margin: 0 auto;
  color: #121c2a;
  background: linear-gradient(180deg, #ffffff 0%, #fafcff 100%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
          backdrop-filter: blur(18px) saturate(120%);
  border: 1px solid rgba(226, 232, 240, .9);
  border-radius: 22px;
  padding: 1.25rem 1.4rem 1.2rem;
  overflow: visible;                              /* let combobox dropdown escape */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 2px 6px rgba(8, 19, 38, .06),
    0 30px 70px rgba(8, 19, 38, .30);
  transition: transform var(--dur-ui-slow) var(--ease-soft),
              box-shadow var(--dur-ui-slow) var(--ease-soft);
}
/* aurora border-light ring (grafted from Aurora Split) */
.hero--meridian .calc-bar::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit;
  padding: 1px; pointer-events: none; z-index: -1;
  background: linear-gradient(150deg, rgba(110, 231, 183, .9), rgba(14, 159, 110, .18) 38%, rgba(255, 255, 255, 0) 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.hero--meridian .calc-bar:hover {
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 6px 18px rgba(8, 19, 38, .08),
    0 40px 88px rgba(8, 19, 38, .34);
}
/* cobalt launch-rule above the head row */
.hero--meridian .calc-bar::before {
  content: ""; display: block; width: 44px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, var(--emerald-500), #047857);
  margin: 0 0 .95rem;
}
.hero--meridian .calc-bar-head { margin-bottom: 1rem; }
.hero--meridian .calc-badge {
  color: var(--accent-dark); background: var(--accent-soft);
}

/* console split: form | result  (single column until a price exists) */
.hero--meridian .calc-console-grid {
  display: grid; grid-template-columns: 1fr; gap: 0;
  transition: grid-template-columns var(--dur-ui-slow) var(--ease-out);
}
.hero--meridian .calc-console-grid:has(.calc-live.is-open) {
  grid-template-columns: minmax(0, 2.1fr) minmax(258px, 1fr);
  gap: 1.25rem;
}

/* fields: rail track first, Destination given primacy */
.hero--meridian .calc-bar-fields {
  display: grid;
  grid-template-columns: 14px minmax(0, 1.2fr) minmax(0, 1.5fr) minmax(0, .7fr) minmax(0, 1fr) auto;
  gap: .85rem; align-items: end;
}
.hero--meridian .calc-bar-fields .calc-field,
.hero--meridian .calc-bar-fields .calc-bar-btn { grid-row: 1; }

/* decorative From -> To route rail */
.hero--meridian .calc-rail {
  grid-row: 1; align-self: stretch;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  padding-bottom: 15px; gap: 3px;
}
.hero--meridian .rail-dot { width: 7px; height: 7px; border-radius: 50%; background: #cbd5e1; transition: background var(--dur-ui) var(--ease-soft), box-shadow var(--dur-ui) var(--ease-soft); }
.hero--meridian .rail-from { background: #047857; }
.hero--meridian .rail-arc { width: 2px; flex: 1; min-height: 18px; background: linear-gradient(#047857, #cbd5e1); }
/* "to" dot lights up once a valid quote lands (driven off .is-open, not #to[value]) */
.hero--meridian .calc-bar:has(.calc-live.is-open) .rail-to {
  background: #047857; box-shadow: 0 0 0 3px rgba(14, 159, 110, .18);
}
.hero--meridian .calc-bar:has(.calc-live.is-open) .rail-arc {
  background: linear-gradient(#047857, #047857);
}

.hero--meridian .calc-bar .calc-field { margin-bottom: 0; min-width: 0; }
.hero--meridian .calc-bar-fields .combo-input,
.hero--meridian .calc-bar-fields .calc-field input { min-height: 48px; border-radius: 12px; }

/* locked From */
.hero--meridian .calc-origin {
  display: inline-flex; align-items: center; gap: .45rem;
  min-height: 48px; padding: 0 .85rem; border-radius: 12px;
  background: #f3f6fb; border: 1px solid #e6ecf5;
  font-weight: 600; color: #1f2d3d;
  white-space: nowrap; overflow: hidden;
}
.hero--meridian .origin-lock { margin-left: auto; color: #94a3b8; flex: none; }
.hero--meridian .calc-origin::after { content: none; display: none; }   /* suppress legacy masked lock — Meridian uses the explicit .origin-lock SVG */

/* Destination primacy: globe icon + charging cobalt underline */
.hero--meridian .calc-field--to .combo { position: relative; }
.hero--meridian .calc-field--to .to-icon {
  position: absolute; left: .8rem; top: 50%; transform: translateY(-50%);
  color: #047857; pointer-events: none; z-index: 2; display: inline-flex;
}
.hero--meridian .calc-field--to .combo-input {
  padding-left: 2.5rem;
  border-color: #cbe4da; border-width: 1.5px;
}
.hero--meridian .calc-field--to .combo-input:focus {
  border-color: #047857;
  box-shadow: 0 0 0 4px rgba(14, 159, 110, .18), inset 0 -2px 0 #047857;
}

.hero--meridian .calc-bar-btn {
  min-height: 48px; align-self: end; white-space: nowrap;
  padding: .85rem 1.6rem; border-radius: 12px;
}

/* chips on an inset preset shelf */
.hero--meridian .calc-quick {
  display: flex; flex-wrap: wrap; gap: .55rem 1.4rem;
  margin-top: 1rem; padding: .8rem .9rem;
  background: rgba(14, 159, 110, .04);
  border: 1px solid rgba(14, 159, 110, .08);
  border-radius: 14px;
  box-shadow: inset 0 1px 2px rgba(13, 34, 73, .04);
}

/* ---- 6. Live-price result panel (the punchline) ---- */
.hero--meridian .calc-live {
  display: grid; grid-template-rows: 0fr; opacity: 0; margin-top: 0;
  transition: grid-template-rows var(--dur-ui-slow) var(--ease-out),
              opacity var(--dur-ui-slow) var(--ease-out),
              margin-top var(--dur-ui-slow) var(--ease-out);
}
.hero--meridian .calc-live.is-open { grid-template-rows: 1fr; opacity: 1; margin-top: 1rem; }
/* in split (desktop) mode it sits beside the form, no top margin */
.hero--meridian .calc-console-grid:has(.is-open) .calc-live.is-open { margin-top: 0; }
.hero--meridian .calc-live-inner { overflow: hidden; }
.hero--meridian .calc-live.is-open .calc-live-inner {
  display: flex; flex-direction: column; justify-content: center; height: 100%;
  background: linear-gradient(160deg, rgba(14, 159, 110, .07), rgba(14, 159, 110, .13));
  border: 1px solid rgba(14, 159, 110, .22);
  border-radius: 16px;
  padding: 1.1rem 1.2rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 10px 26px rgba(14, 159, 110, .14);
  animation: meridianPanelIn var(--dur-ui-slow) var(--ease-out);
}
@keyframes meridianPanelIn { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }
.hero--meridian .calc-live-tag {
  font-family: var(--font-head); font-weight: 700; font-size: .68rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--accent-dark);
  margin-bottom: .35rem;
}
.hero--meridian .calc-live-headline { margin: 0; font-family: var(--font-head); line-height: 1.15; }
.hero--meridian .calc-live-amount {
  display: inline-block;
  color: #0d2231; font-weight: 800;
  font-size: clamp(1.85rem, 1.4rem + 1vw, 2.3rem);
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.hero--meridian .calc-live-from,
.hero--meridian .calc-live-eta { color: #475569; font-size: 1rem; font-weight: 600; }
.hero--meridian .calc-live-meta { margin: .35rem 0 0; color: #64748b; font-size: .78rem; }

/* ---- 7. Metrics = luminous ground line ---- */
.hero--meridian .hero-metrics {
  display: flex; flex-wrap: wrap; justify-content: center;
  margin: 2.4rem auto 0; padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, .14);
}
.hero--meridian .hero-metrics .metric { padding: 0 1.8rem; position: relative; }
.hero--meridian .hero-metrics .metric + .metric::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 34px; background: rgba(255, 255, 255, .16);
}

/* ============================================================
   8. RESPONSIVE
   ============================================================ */
@media (max-width: 960px) {
  .hero.hero--meridian {
    padding: 3.4rem 0 2.6rem;
    background:
      radial-gradient(560px 480px at 86% -6%, rgba(14, 159, 110, .20), transparent 62%),
      radial-gradient(620px 420px at 6% 2%, rgba(110, 231, 183, .08), transparent 58%),
      linear-gradient(165deg, #0c2138 0%, #081626 56%, #060f1c 100%);
  }
  .hero--meridian h1 { max-width: 20ch; }
  .hero--meridian .calc-console-grid:has(.calc-live.is-open) { grid-template-columns: 1fr; gap: 0; }
  .hero--meridian .calc-console-grid:has(.is-open) .calc-live.is-open { margin-top: 1rem; }
  .hero--meridian .calc-bar-fields { grid-template-columns: 1fr 1fr; gap: .8rem 1rem; }
  .hero--meridian .calc-bar-fields .calc-field,
  .hero--meridian .calc-bar-fields .calc-bar-btn { grid-row: auto; }
  .hero--meridian .calc-rail { display: none; }
  .hero--meridian .calc-bar-btn { grid-column: 1 / -1; }
  .hero--meridian .hero-orbit { height: 62%; opacity: .7; }
  .hero--meridian .orbit-route--3, .hero--meridian .dest-label,
  .hero--meridian .orbit-parcel, .hero--meridian .orbit-stamp { display: none; }
}
@media (max-width: 560px) {
  .hero--meridian .calc-bar-fields { grid-template-columns: 1fr; }
  .hero.hero--meridian .calc-bar { border-radius: 18px; padding: 1rem 1rem 1.05rem; }
  .hero--meridian .calc-quick { gap: .5rem .9rem; }
  .hero--meridian .calc-underbar { flex-direction: column; align-items: flex-start; }
  .hero--meridian .calc-underbar .calc-fineprint { text-align: left; }
  .hero--meridian .hero-metrics { gap: 1.1rem 1.6rem; border-top: none; padding-top: .8rem; }
  .hero--meridian .hero-metrics .metric { padding: 0; }
  .hero--meridian .hero-metrics .metric + .metric::before { display: none; }
  .hero--meridian .metric-value { font-size: 1.3rem; }
}

/* ============================================================
   9. REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .hero--meridian .orbit-route { stroke-dashoffset: 0; animation: none; }
  .hero--meridian .orbit-dest { opacity: 1; animation: none; }
  .hero--meridian .orbit-parcel { display: none; }
  .hero--meridian .orbit-stamp { opacity: 1; animation: none; }
  .hero--meridian .origin-ping, .hero--meridian .dest-ring { animation: none; opacity: .35; }
  .hero.hero--meridian .grad-text { animation: none; background-position: 0 0; }
  .hero--meridian .hero-copy,
  .hero--meridian .calc-bar,
  .hero--meridian .hero-metrics { opacity: 1; animation: none; }
  .hero--meridian .calc-live,
  .hero--meridian .calc-live.is-open .calc-live-inner,
  .hero--meridian .calc-console-grid { transition: none; animation: none; }
  .hero--meridian .calc-bar { transition: none; }
  .hero--meridian .calc-bar:hover { transform: none; }
}

/* ============================================================
   MERIDIAN REFINEMENT (owner feedback) — cleaner console:
   • From stacked ABOVE Destination (vertical, not side-by-side)
   • smaller, refined price (no oversized "cheap" number)
   • no white glare (aurora ring + inset highlights removed)
   • calmer card, narrower focused width
   Appended last so it wins over the Meridian block above.
   ============================================================ */

/* --- Calmer console: narrower, left-aligned, single clean shadow --- */
.hero.hero--meridian .calc-bar {
  max-width: 600px; margin: 0;
  background: #fff;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border: 1px solid #e6ecf2;
  border-radius: 18px;
  padding: 1.3rem 1.4rem 1.25rem;
  box-shadow: 0 1px 2px rgba(8, 19, 38, .05), 0 16px 40px rgba(8, 19, 38, .12);
  transition: max-width var(--dur-ui-slow) var(--ease-out), box-shadow var(--dur-ui-slow) var(--ease-soft);
}
/* card grows to reveal the price panel on the right once a quote exists */
.hero.hero--meridian .calc-bar:has(.calc-live.is-open) { max-width: 840px; }
.hero--meridian .calc-bar::before { display: none; }   /* drop the launch rule — calmer top */
.hero--meridian .calc-bar::after  { display: none; }   /* remove the white aurora glare ring */
.hero.hero--meridian .calc-bar:hover {
  transform: none;                                      /* no lift — quieter */
  box-shadow: 0 1px 2px rgba(8, 19, 38, .05), 0 20px 46px rgba(8, 19, 38, .14);
}

/* --- Form left, price RIGHT (single column until a quote exists) --- */
.hero--meridian .calc-console-grid {
  grid-template-columns: 1fr; gap: 0; align-items: start;
  transition: grid-template-columns var(--dur-ui-slow) var(--ease-out);
}
.hero--meridian .calc-console-grid:has(.calc-live.is-open) {
  grid-template-columns: minmax(0, 1.7fr) minmax(232px, 1fr);
  gap: 1.4rem;
}

/* --- Fields stacked: From over Destination; Weight | Size share one row --- */
.hero--meridian .calc-bar-fields {
  grid-template-columns: 1fr 1fr;
  gap: .9rem 1rem;
  align-items: end;
}
.hero--meridian .calc-rail { display: none; }           /* drop the horizontal rail */
.hero--meridian .calc-bar-fields .calc-field,
.hero--meridian .calc-bar-fields .calc-bar-btn { grid-row: auto; }
.hero--meridian .calc-field--from,
.hero--meridian .calc-field--to,
.hero--meridian .calc-bar-btn { grid-column: 1 / -1; }
.hero--meridian .calc-field--weight { grid-column: 1 / 2; }
.hero--meridian .calc-field--dims   { grid-column: 2 / -1; }

/* --- Chips: lighter, no inset shelf --- */
.hero--meridian .calc-quick {
  background: transparent; border: none; box-shadow: none;
  border-top: 1px solid #eef1f5; border-radius: 0;
  margin-top: .5rem; padding: .95rem 0 0;
}

/* --- Price result: compact, refined, clean (no glare) --- */
.hero--meridian .calc-live.is-open { margin-top: 1rem; }                                  /* mobile fallback: below form */
.hero--meridian .calc-console-grid:has(.is-open) .calc-live.is-open { margin-top: 0; }     /* desktop: beside the form */
.hero--meridian .calc-live.is-open .calc-live-inner {
  background: #f6f8fd;
  border: 1px solid #e5ebf6;
  border-radius: 12px;
  padding: .85rem 1rem;
  box-shadow: none;                                     /* kill the inset white highlight */
  animation: none;                                      /* clean appear, no slide */
}
.hero--meridian .calc-live-tag {
  font-size: .7rem; letter-spacing: .14em; color: #7180a0; margin-bottom: .28rem;
}
.hero--meridian .calc-live-headline { display: flex; flex-direction: column; align-items: flex-start; gap: .12rem; }
/* delivery date is the hero of the card — speed certainty is what sellers buy */
.hero--meridian .calc-live-eta {
  order: -1; font-size: 1.32rem; font-weight: 800; color: #0d2231; letter-spacing: -.015em; line-height: 1.15;
}
.hero--meridian .calc-live-eta:empty { display: none; }
.hero--meridian .calc-live-price { font-size: 1rem; font-weight: 600; color: #475569; }
.hero--meridian .calc-live-from { color: #64748b; font-weight: 500; }
.hero--meridian .calc-live-amount { font-size: 1.08rem; font-weight: 800; color: #0d2231; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.hero--meridian .calc-live-meta { font-size: .76rem; margin-top: .35rem; color: #64748b; }

/* Country flags — destination field, dropdown results, popular chips */
.qchip-flag { margin-right: .38rem; font-size: .95rem; line-height: 1; }
.combo-flag { display: inline-block; width: 1.5em; margin-right: .15rem; text-align: center; font-size: .98rem; }
.to-icon .to-flag { font-size: 1.02rem; line-height: 1; }

/* --- Left-align the metrics to share the console's axis --- */
.hero--meridian .hero-metrics { justify-content: flex-start; margin: 2.2rem 0 0; }

/* --- Responsive: collapse the split (price below) on smaller screens --- */
@media (max-width: 760px) {
  .hero.hero--meridian .calc-bar,
  .hero.hero--meridian .calc-bar:has(.calc-live.is-open) { max-width: 100%; }
  .hero--meridian .calc-console-grid:has(.calc-live.is-open) { grid-template-columns: 1fr; gap: 0; }
  .hero--meridian .calc-console-grid:has(.is-open) .calc-live.is-open { margin-top: 1rem; }
}
@media (max-width: 560px) {
  .hero--meridian .calc-bar-fields { grid-template-columns: 1fr; }
  .hero--meridian .calc-field--weight,
  .hero--meridian .calc-field--dims { grid-column: 1 / -1; }
}

/* =====================================================================
   LIVE DIMENSION FEEDBACK  (calculator — volumetric / oversized hint)
   Additive: a full-width row between the calc fields and the quick chips.
   Reads on the white Quote Console card (dark text).
   ===================================================================== */
.dim-feedback {
  display: flex; align-items: center; gap: .55rem;
  margin: .65rem 0 .15rem; padding: .5rem .72rem;
  border-radius: 11px;
  font-family: var(--font-head); font-size: .8rem; font-weight: 600; line-height: 1.35;
  color: #065f46; background: #eef7f2; border: 1px solid #c4e7d8;
  animation: dimfb-in var(--dur-ui-slow, .26s) var(--ease-out, ease) both;
  transition: color .2s var(--ease-soft, ease), background-color .2s var(--ease-soft, ease), border-color .2s var(--ease-soft, ease);
}
.dim-feedback[hidden] { display: none; }
.dim-feedback .dimfb-icon { display: inline-flex; flex: none; color: currentColor; }
.dim-feedback .dimfb-text { flex: 1 1 auto; min-width: 0; }
.dim-feedback .dimfb-tag {
  flex: none; font-size: .66rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  padding: .16rem .5rem; border-radius: 999px;
}
.dim-feedback .dimfb-tag.is-standard  { background: rgba(14, 159, 110, .12); color: #065f46; }
.dim-feedback .dimfb-tag.is-oversized { background: rgba(180, 83, 9, .16); color: var(--warn); }
.dim-feedback.is-partial  { color: #5b6b80; background: #f4f6fb; border-color: #e5ebf6; }
.dim-feedback.is-oversized { color: var(--warn); background: #fff7ed; border-color: #fed7aa; }
@keyframes dimfb-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .dim-feedback { animation: none; } }

/* =====================================================================
   "CAN I SHIP IT?"  — prohibited / restricted item checker
   ===================================================================== */
.ship-check { max-width: 760px; margin: 0 auto; }
.ship-check-bar {
  display: flex; align-items: center; gap: .55rem;
  background: var(--white); border: 1.5px solid var(--line); border-radius: 14px;
  padding: .3rem .55rem .3rem .9rem;
  box-shadow: 0 2px 12px rgba(8, 19, 38, .05);
  transition: border-color var(--dur-ui, .18s) var(--ease-soft, ease), box-shadow var(--dur-ui, .18s) var(--ease-soft, ease);
}
.ship-check-bar:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.ship-check-ico { display: inline-flex; flex: none; color: var(--accent); }
.ship-check-input {
  flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent;
  font-family: var(--font-head); font-size: 1.02rem; font-weight: 500; color: var(--navy-800); padding: .72rem 0;
}
.ship-check-input::placeholder { color: #94a3b8; font-weight: 500; }
.ship-check-clear {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border: 0; border-radius: 9px; cursor: pointer;
  background: var(--bg-softer); color: var(--navy-800);
  transition: background var(--dur-ui, .18s) var(--ease-soft, ease);
}
.ship-check-clear[hidden] { display: none; }
.ship-check-clear:hover { background: #e2e8f0; }

.ship-check-result:empty { display: none; }
.ship-check-result { margin-top: .9rem; }
.ship-verdict {
  display: flex; gap: .85rem; align-items: flex-start;
  padding: 1rem 1.1rem; border-radius: 14px; border: 1px solid var(--line); background: var(--bg-soft);
  animation: dimfb-in var(--dur-ui-slow, .26s) var(--ease-out, ease) both;
}
.ship-verdict-ico {
  flex: none; width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; margin-top: 1px;
}
.ship-verdict-body { min-width: 0; }
.ship-verdict-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .6rem; }
.ship-verdict-name { font-family: var(--font-head); font-weight: 800; color: var(--navy-800); font-size: 1.06rem; }
.ship-verdict-status { font-weight: 800; font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; }
.ship-verdict-note { color: #475569; font-size: .92rem; margin-top: .3rem; line-height: 1.5; }
.ship-verdict-dest { display: flex; gap: .4rem; align-items: flex-start; color: var(--slate-muted); font-size: .86rem; line-height: 1.5; margin-top: .55rem; padding-top: .55rem; border-top: 1px dashed var(--line); }
.ship-verdict-dest .svd-ico { flex: none; margin-top: .08rem; color: var(--accent-dark); }
.ship-verdict-dest strong { color: var(--ink); font-weight: 700; }
.ship-verdict.allowed    { background: rgba(26, 169, 116, .07);  border-color: rgba(26, 169, 116, .32); }
.ship-verdict.allowed    .ship-verdict-ico { background: rgba(26, 169, 116, .15); color: #0f7a52; }
.ship-verdict.allowed    .ship-verdict-status { color: #0f7a52; }
.ship-verdict.restricted { background: rgba(245, 158, 11, .08); border-color: rgba(245, 158, 11, .4); }
.ship-verdict.restricted .ship-verdict-ico { background: rgba(245, 158, 11, .18); color: var(--warn); }
.ship-verdict.restricted .ship-verdict-status { color: var(--warn); }
.ship-verdict.prohibited { background: rgba(214, 69, 61, .07);  border-color: rgba(214, 69, 61, .34); }
.ship-verdict.prohibited .ship-verdict-ico { background: rgba(214, 69, 61, .15); color: #c0392b; }
.ship-verdict.prohibited .ship-verdict-status { color: #c0392b; }
.ship-verdict.unknown    .ship-verdict-ico { background: var(--bg-softer); color: #475569; }

.ship-check-suggest { margin-top: 1.15rem; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.ship-suggest-label { font-size: .72rem; font-weight: 800; color: #64748b; text-transform: uppercase; letter-spacing: .07em; margin-right: .15rem; }
.ship-suggest-chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.ship-chip {
  display: inline-flex; align-items: center; border: 1px solid var(--line); background: var(--white);
  color: var(--navy-800); font-family: var(--font-head); font-weight: 600; font-size: .82rem;
  padding: .42rem .8rem; border-radius: 999px; cursor: pointer;
  transition: border-color var(--dur-ui, .18s) var(--ease-soft, ease), background var(--dur-ui, .18s) var(--ease-soft, ease), transform var(--dur-ui, .18s) var(--ease-soft, ease);
}
.ship-chip:hover { border-color: var(--accent); background: var(--accent-soft); transform: translateY(-1px); }
.ship-chip .ship-dot { width: 7px; height: 7px; border-radius: 50%; margin-right: .45rem; flex: none; }
.ship-dot.allowed { background: #1aa974; }
.ship-dot.restricted { background: var(--warn-bright); }
.ship-dot.prohibited { background: #d6453d; }
.ship-check-note { margin-top: 1.15rem; font-size: .82rem; color: #64748b; line-height: 1.55; }
.ship-check-note a { color: var(--accent); font-weight: 600; }
@media (max-width: 560px) {
  .ship-verdict-status { width: 100%; }
}

/* =====================================================================
   ROUTE LANDING PAGES (/shipping/*) + homepage "Popular routes" links
   ===================================================================== */
.route-hero { background: linear-gradient(160deg, #0e2540 0%, #0a1b30 100%); color: #fff; padding: 3.4rem 0 2.7rem; }
.route-hero .eyebrow { color: #6ee7b7; }
.crumb { font-size: .82rem; color: rgba(255, 255, 255, .6); margin-bottom: .9rem; }
.crumb a { color: rgba(255, 255, 255, .82); text-decoration: none; }
.crumb a:hover { color: #fff; }
.crumb span { margin: 0 .15rem; }
.route-hero h1 { font-family: var(--font-head); font-size: clamp(1.9rem, 4vw, 2.9rem); font-weight: 800; letter-spacing: -.03em; color: #fff; margin: .2rem 0 .65rem; line-height: 1.1; }
.route-lead { font-size: clamp(1rem, 1.5vw, 1.14rem); color: rgba(255, 255, 255, .82); max-width: 62ch; line-height: 1.6; }
.route-hero-actions { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1.4rem; }
.route-stats { display: flex; gap: 1.4rem 2.6rem; flex-wrap: wrap; margin-top: 2rem; border-top: 1px solid rgba(255, 255, 255, .13); padding-top: 1.4rem; }
.rstat { display: flex; flex-direction: column; }
.rstat-v { font-family: var(--font-head); font-weight: 800; font-size: 1.16rem; color: #fff; }
.rstat-l { font-size: .82rem; color: rgba(255, 255, 255, .62); margin-top: .15rem; }

.route-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 2.6rem; align-items: start; }
.route-main h2 { font-family: var(--font-head); font-size: clamp(1.4rem, 2.4vw, 1.8rem); font-weight: 800; color: var(--navy-800); letter-spacing: -.02em; margin: 2.1rem 0 .6rem; }
.route-main h2:first-child { margin-top: 0; }
.route-main p { color: #334155; line-height: 1.65; margin-bottom: .65rem; }
.route-main a { color: var(--accent); font-weight: 600; }
.route-note { font-size: .9rem; color: #64748b; }
.route-table { width: 100%; border-collapse: collapse; margin: .6rem 0 1.1rem; }
.route-table th, .route-table td { text-align: left; padding: .68rem .9rem; border-bottom: 1px solid var(--line); }
.route-table thead th { font-family: var(--font-head); font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; color: #64748b; }
.route-table tbody td:last-child { font-weight: 700; color: var(--navy-800); }
.route-table-cta { margin: .3rem 0 0; }
.route-steps { margin: .5rem 0 1rem; padding-left: 1.1rem; }
.route-steps li { margin-bottom: .55rem; color: #334155; line-height: 1.55; }
.route-aside { position: sticky; top: 88px; }
.route-card { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 16px; padding: 1.4rem; box-shadow: 0 2px 14px rgba(8, 19, 38, .04); }
.route-card h3 { font-family: var(--font-head); font-weight: 800; color: var(--navy-800); font-size: 1.15rem; margin-bottom: .35rem; }
.route-card p { color: #475569; font-size: .92rem; margin-bottom: 1rem; line-height: 1.5; }
.route-card .btn { width: 100%; margin-bottom: .5rem; }
.route-card .btn:last-child { margin-bottom: 0; }
@media (max-width: 820px) { .route-grid { grid-template-columns: 1fr; gap: 1.6rem; } .route-aside { position: static; } }

/* Homepage "Popular routes" internal links */
.route-links-wrap { margin-top: 2.2rem; text-align: center; }
.route-links-label { font-size: .72rem; font-weight: 800; color: #64748b; text-transform: uppercase; letter-spacing: .08em; margin-bottom: .85rem; }
.route-links { display: flex; flex-wrap: wrap; gap: .55rem; justify-content: center; }
.route-pill { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid var(--line); background: var(--white); color: var(--navy-800); font-family: var(--font-head); font-weight: 600; font-size: .9rem; padding: .58rem 1rem; border-radius: 999px; text-decoration: none; transition: border-color var(--dur-ui, .18s) var(--ease-soft, ease), background var(--dur-ui, .18s) var(--ease-soft, ease), transform var(--dur-ui, .18s) var(--ease-soft, ease); }
.route-pill span { color: var(--accent); font-weight: 700; }
.route-pill:hover { border-color: var(--accent); background: var(--accent-soft); transform: translateY(-1px); }

/* =====================================================================
   BULK QUOTE TOOL (bulk.html)
   ===================================================================== */
.bulk-tool { max-width: 940px; margin: 0 auto; }
.bulk-intro h2 { font-family: var(--font-head); font-weight: 800; color: var(--navy-800); font-size: clamp(1.4rem, 2.4vw, 1.8rem); letter-spacing: -.02em; margin-bottom: .6rem; }
.bulk-hint { font-size: .88rem; color: #64748b; line-height: 1.55; margin-top: .4rem; }
.bulk-hint code { background: var(--bg-softer); padding: .05rem .35rem; border-radius: 5px; font-size: .85em; }
.bulk-input { margin-top: 1.6rem; }
.bulk-input > label { display: block; font-family: var(--font-head); font-weight: 700; color: var(--navy-800); margin-bottom: .5rem; }
#bulk-csv { width: 100%; border: 1.5px solid var(--line); border-radius: 12px; padding: .9rem 1rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9rem; color: var(--navy-800); background: var(--white); resize: vertical; line-height: 1.6; transition: border-color var(--dur-ui, .18s) var(--ease-soft, ease), box-shadow var(--dur-ui, .18s) var(--ease-soft, ease); }
#bulk-csv:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.bulk-input-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .9rem; align-items: center; }
.btn-file { cursor: pointer; }
.bulk-error { margin-top: .8rem; color: var(--danger); font-weight: 600; font-size: .9rem; }

.bulk-output { margin-top: 2.2rem; }
.bulk-summary { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 1.2rem; }
.bsum { flex: 1 1 140px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 13px; padding: .9rem 1.1rem; }
.bsum-v { display: block; font-family: var(--font-head); font-weight: 800; font-size: 1.4rem; color: var(--navy-800); letter-spacing: -.01em; }
.bsum-l { display: block; font-size: .78rem; color: #64748b; margin-top: .15rem; }
.bsum-total { background: var(--accent-soft); border-color: #a7e8cf; }
.bsum-total .bsum-v { color: #065f46; }
.bsum-err { background: #fff7ed; border-color: #fed7aa; }
.bsum-err .bsum-v { color: var(--warn); }
.bulk-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 13px; }
.bulk-table { margin: 0; min-width: 640px; }
.bulk-table th, .bulk-table td { padding: .6rem .85rem; font-size: .9rem; }
.bulk-table tbody tr:last-child td { border-bottom: 0; }
.brow-err td { background: rgba(214, 69, 61, .035); }
.bstatus { display: inline-block; font-family: var(--font-head); font-weight: 700; font-size: .72rem; padding: .15rem .55rem; border-radius: 999px; }
.bstatus.ok { background: rgba(26, 169, 116, .14); color: #0f7a52; }
.bstatus.err { background: rgba(214, 69, 61, .12); color: #c0392b; }
.bulk-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.3rem; }
.bulk-note { margin-top: 1.1rem; font-size: .82rem; color: #64748b; line-height: 1.55; }

/* Ghost buttons on LIGHT surfaces (route sidebar card + bulk tool) — the base
   .btn-ghost is white-on-translucent for dark heroes and is invisible here. */
.route-card .btn-ghost,
.bulk-input-actions .btn-ghost,
.bulk-actions .btn-ghost {
  background: var(--white);
  color: var(--navy-800);
  border-color: var(--line);
}
.route-card .btn-ghost:hover,
.bulk-input-actions .btn-ghost:hover,
.bulk-actions .btn-ghost:hover { background: var(--bg-soft); border-color: var(--accent); color: var(--navy-800); }

/* Independence / trademark disclaimer line in the footer (full-width, muted) */
.footer-bottom .tm-note {
  flex: 0 0 100%;            /* full-width own line, below the copyright row (no max-width: it would
                               shrink the wrap-calc size and keep the note on the copyright row) */
  width: 100%;
  margin: .55rem 0 0;
  padding-top: .7rem;
  border-top: 1px solid rgba(255, 255, 255, .08);
  font-size: .72rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, .42);
}

/* Safety: if a browser lacks offset-path, hide the traveling parcel (the arcs,
   pins, labels and stamp still tell the UAE→world story without it). */
@supports not (offset-path: path("M0 0 L1 1")) {
  .hero--meridian .orbit-parcel { display: none; }
}

/* Active destination — highlighted when picked in the calculator (journey sync) */
.hero--meridian .orbit-dest.is-active .dest-label { fill: #e7f6ef; font-weight: 800; }
.hero--meridian .orbit-dest.is-active .dest-dot { fill: #e6efff; transform-box: fill-box; transform-origin: center; transform: scale(1.3); }
.hero--meridian .orbit-dest.is-active .dest-ring { stroke: #6ee7b7; animation-duration: 1.5s; }

/* =====================================================================
   Freight page (freight.html) — scoped .frt-* components.
   Appended last so it wins the cascade (project convention). Reuses
   .route-*, .cards/.card, .quote-grid/.quote-form, .bulk-summary/.bsum.
   ===================================================================== */
/* Honest "quote-on-request" framing note */
.frt-status {
  display: flex; gap: .9rem; align-items: flex-start;
  background: var(--accent-soft); border: 1px solid #a7e8cf;
  border-radius: var(--radius); padding: 1.1rem 1.3rem; max-width: 940px; margin: 0 auto;
}
.frt-status-ico { color: var(--accent-dark); flex: 0 0 auto; line-height: 0; margin-top: .1rem; }
.frt-status p { margin: 0; color: var(--navy-800); font-size: .95rem; line-height: 1.6; }

/* "What we move" — three mode cards (base .cards is 4-up) */
.frt-cards { grid-template-columns: repeat(3, 1fr); }

/* Estimator shell */
.frt-estimator { max-width: 940px; margin: 0 auto; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.8rem; box-shadow: var(--shadow-2); }
.frt-est-form .field-legend { display: block; font-family: var(--font-head); font-weight: 700; color: var(--navy-800); margin-bottom: .55rem; font-size: .92rem; }
.frt-dims { border: 1px solid var(--line); border-radius: 14px; padding: 1.1rem 1.2rem .4rem; margin: .2rem 0 1.3rem; background: var(--bg-soft); }
.frt-dims legend { font-family: var(--font-head); font-weight: 700; color: var(--navy-800); font-size: .9rem; padding: 0 .4rem; }
.frt-dims-row { grid-template-columns: 1fr 1fr 1fr; }
.frt-or { text-align: center; font-size: .82rem; color: var(--slate-light); margin: .2rem 0 .9rem; }
.frt-cbm-field { margin-bottom: .4rem; }
.frt-est-error { margin-top: .8rem; color: var(--danger); font-weight: 600; font-size: .9rem; }

/* Estimator result */
.frt-est-result { margin-top: 1.6rem; border-top: 1px solid var(--line); padding-top: 1.4rem; }
.frt-est-rec { font-size: .92rem; color: var(--slate); line-height: 1.6; margin: .2rem 0 1.1rem; }
.frt-est-rec strong { color: var(--navy-800); }
.frt-est-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.frt-est-note { margin-top: 1.1rem; font-size: .82rem; color: #64748b; line-height: 1.6; }

@media (max-width: 860px) { .frt-cards { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .frt-dims-row { gap: .6rem; }
  .frt-estimator { padding: 1.3rem; }
}

/* =====================================================================
   Hero conversion pass (2026-06-20) — appended last so it wins the cascade.
   1) standalone CTA  2) collapsible dimensions  3) factual trust band
   4) louder instant-price result + softer background map.
   ===================================================================== */
/* 1 — Standalone hero CTA under the subheadline */
.hero--meridian .hero-cta { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.6rem; }
.hero--meridian .hero-cta .btn { min-height: 50px; padding: .85rem 1.5rem; font-size: 1rem; }
.hero--meridian .hero-cta-primary { box-shadow: 0 10px 26px rgba(14, 159, 110, .34); }

/* 2 — Collapse the optional L×W×H behind a toggle (weight goes full-width) */
.hero--meridian .calc-field--weight { grid-column: 1 / -1; }
.hero--meridian .calc-field--dims { grid-column: 1 / -1; display: none; }
.hero--meridian .calc-bar-fields.dims-open .calc-field--dims { display: flex; }
.dim-toggle {
  grid-column: 1 / -1; justify-self: start;
  display: inline-flex; align-items: center; gap: .4rem;
  background: none; border: none; padding: .15rem 0; margin: -.15rem 0 .1rem; cursor: pointer;
  font-family: var(--font-head); font-weight: 600; font-size: .82rem; color: var(--accent-dark);
}
.dim-toggle .opt { color: var(--slate-light); font-weight: 500; }
.dim-toggle:hover { color: var(--accent); }
.dim-toggle:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.dim-toggle-ico { transition: transform var(--dur-ui, .18s) var(--ease-soft, ease); }
.calc-bar-fields.dims-open .dim-toggle-ico { transform: rotate(45deg); }

/* 3 — Factual trust band below the hero (no fabricated logos/ratings) */
.trust-band { background: var(--bg-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 1rem 0; }
.trust-band-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .55rem 1.7rem; }
.trust-band-lead { font-family: var(--font-head); font-weight: 700; color: var(--navy-800); font-size: .9rem; }
.trust-points { display: flex; flex-wrap: wrap; gap: .55rem 1.6rem; list-style: none; margin: 0; padding: 0; }
.trust-points li { display: inline-flex; align-items: center; gap: .45rem; font-size: .88rem; color: var(--slate); font-weight: 500; }
.trust-points svg { width: 17px; height: 17px; color: var(--accent-dark); flex: none; }
@media (max-width: 760px) { .trust-band-inner { justify-content: flex-start; } }

/* 4 — Make the instant result pop (cobalt-tinted card + cobalt price);
   "Delivered by" stays the visual hero (owner's deliberate hierarchy). */
.hero--meridian .calc-live.is-open .calc-live-inner { background: linear-gradient(180deg, #f2fbf7 0%, #e7f6ef 100%); border-color: #c4e7d8; }
.hero--meridian .calc-live-amount { font-size: 1.5rem; font-weight: 800; color: #065f46; letter-spacing: -.02em; }
.hero--meridian .calc-live-tag { color: #2f7a5e; font-weight: 700; }

/* 4 — Soften the orbit map so the eye lands on the headline + console */
.hero--meridian .hero-orbit { opacity: .66; }

/* =====================================================================
   Hero globe + layout pass (2026-06-20) — appended last so it wins.
   Dotted rotating-globe background (replaces the orbit SVG), a stats strip
   moved out of the hero, a roomier instant-result panel, two-line ETA.
   ===================================================================== */
/* Hero = full-width two columns: instant-rate console LEFT, globe RIGHT */
.hero--meridian .hero-inner {
  display: grid; grid-template-columns: minmax(0, 1fr);
  align-items: start; gap: 2.5rem;
  width: 100%; max-width: 760px; margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 5rem);
}
.hero--meridian .hero-left { min-width: 0; display: flex; flex-direction: column; align-items: stretch; gap: 1.55rem; }
.hero--meridian .hero-globe-wrap { min-width: 0; align-self: center; display: flex; align-items: center; justify-content: center; }
.hero--meridian .hero-globe { position: static; transform: none; width: 100%; max-width: 660px; aspect-ratio: 1 / 1; height: auto; pointer-events: auto; touch-action: none; cursor: grab; }
/* the console fills the left column (idle capped; expands when a price shows) */
.hero.hero--meridian .calc-bar { max-width: 680px; margin: 0; }
.hero.hero--meridian .calc-bar:has(.calc-live.is-open) { max-width: 100%; }
.hero--meridian .calc-console-grid:has(.calc-live.is-open) { grid-template-columns: minmax(0, 1.55fr) minmax(280px, .85fr); gap: 1.3rem; }

/* stack on tablet/phone: copy + console, then the globe below */
@media (max-width: 1024px) {
  .hero--meridian .hero-inner { grid-template-columns: 1fr; gap: 1.9rem; max-width: 720px; }
  .hero--meridian .hero-globe-wrap { order: 3; }
  .hero--meridian .hero-globe { max-width: 320px; opacity: .85; }
}
@media (max-width: 600px) { .hero--meridian .hero-globe { max-width: 250px; opacity: .78; } .hero--meridian .hero-left { gap: 1.2rem; } }
@media (prefers-reduced-motion: reduce) { .hero--meridian .hero-globe { opacity: .85; } .hero--meridian .hero-globe-wrap { animation: none; opacity: 1; } }

/* Globe presence: a soft cobalt floor-glow behind it + an entrance that lands just after the console.
   Scoped to .hero-globe-wrap only — does NOT touch .hero::before/::after. */
.hero--meridian .hero-globe-wrap { position: relative; opacity: 0; animation: meridianGlobeIn .8s var(--ease-out) .28s forwards; }
.hero--meridian .hero-globe-wrap::before {
  content: ""; position: absolute; inset: 12% 8%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(14, 159, 110, .22), transparent 72%);
  filter: blur(30px); z-index: 0; pointer-events: none;
}
.hero--meridian .hero-globe { position: relative; z-index: 1; }
@keyframes meridianGlobeIn { from { opacity: 0; transform: scale(.965); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hero--meridian .hero-globe-wrap { animation: none; opacity: 1; } }

/* Stats strip — icon-led "hard numbers" bar below the hero, with a cobalt hairline accent */
.hero-stats { background: linear-gradient(180deg, #0a1b30 0%, #081626 100%); padding: 1.75rem 0; position: relative; }
.hero-stats::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: min(90%, 560px); height: 1px; background: linear-gradient(90deg, transparent, rgba(110, 231, 183, .55), transparent); }
.hero-stats .hero-metrics { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 1.4rem 3.4rem; margin: 0 auto; padding: 0; border: none; }
.hero-stats .metric { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0; padding: 0; position: static; }
.hero-stats .metric::before { content: none !important; }
.hero-stats .metric-ico { color: #6ee7b7; line-height: 0; margin-bottom: .5rem; }
.hero-stats .metric-ico svg { width: 22px; height: 22px; }
.hero-stats .metric-value { font-family: var(--font-head); font-weight: 800; font-size: 1.5rem; color: #fff; letter-spacing: -.015em; line-height: 1.05; }
.hero-stats .metric-label { font-size: .72rem; letter-spacing: .07em; text-transform: uppercase; color: rgba(255, 255, 255, .52); margin-top: .32rem; }
@media (max-width: 560px) { .hero-stats .hero-metrics { gap: 1.5rem 2rem; } .hero-stats .metric { flex: 0 1 40%; } }

/* Instant-result panel padding + fills its cell (tag top, date/price middle, meta bottom) */
.hero--meridian .calc-live.is-open .calc-live-inner { padding: 1.15rem 1.3rem; display: flex; flex-direction: column; justify-content: space-between; min-height: 170px; gap: .5rem; }

/* Two-line ETA: small "Delivered by" label over the big date (never cramped) */
.hero--meridian .calc-live-eta { display: flex; flex-direction: column; gap: .12rem; }
.hero--meridian .calc-live-eta .eta-label {
  font-family: var(--font-body); font-size: .72rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: #6b7c97;
}
.hero--meridian .calc-live-eta .eta-date {
  font-family: var(--font-head); font-size: 1.34rem; font-weight: 800; color: #0d2231;
  letter-spacing: -.015em; line-height: 1.14;
}
@media (max-width: 760px) {
  .hero--meridian .calc-console-grid:has(.calc-live.is-open) { grid-template-columns: 1fr; gap: 0; }
}

/* =====================================================================
   Header refinement pass (2026-06-20) — "make it easy to send".
   Action-worded "Ship a parcel" pill + a Track outline pill paired beside it,
   a sharper sticky header that gains a shadow on scroll, and the actions
   surfaced first in the mobile drawer. Appended last so it wins the cascade.
   ===================================================================== */
.site-header { background: rgba(255, 255, 255, .88); -webkit-backdrop-filter: saturate(140%) blur(12px); backdrop-filter: saturate(140%) blur(12px); transition: box-shadow .25s ease; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .site-header { background: #fff; } }
.site-header.is-scrolled { box-shadow: 0 4px 20px rgba(10, 27, 48, .09); border-bottom-color: transparent; }
.main-nav { gap: 1.5rem; }
/* primary action — action-worded, icon-led, dominant */
.main-nav .nav-cta { display: inline-flex; align-items: center; gap: .45rem; font-weight: 700; min-height: 42px; box-sizing: border-box; }
.main-nav .nav-cta svg, .main-nav .nav-track svg { flex: none; }
.site-header.is-scrolled .main-nav .nav-cta { box-shadow: 0 8px 22px rgba(14, 159, 110, .5); }
.main-nav .nav-cta:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 5px rgba(14, 159, 110, .45); }
/* secondary "Track" outline pill, paired immediately before Ship */
.main-nav .nav-track { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; color: var(--navy-800); padding: .48rem 1rem; min-height: 42px; box-sizing: border-box; border: 1.5px solid var(--line); border-radius: 999px; transition: border-color .15s ease, background .15s ease, color .15s ease; }
.main-nav .nav-track:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-dark); }
@media (max-width: 860px) {
  /* surface Ship + Track at the top of the open drawer, centred */
  .main-nav .nav-cta, .main-nav .nav-track { order: -1; justify-content: center; text-align: center; margin-top: 0; }
  .main-nav .nav-track { border: 1.5px solid var(--line); margin-bottom: .5rem; }
}

/* ===== Checkout — local UAE pickup add-on ===== */
.summary-pickup { margin: .25rem 0 .9rem; }
.summary-pickup .pickup-toggle {
  display: flex; align-items: flex-start; gap: .7rem; cursor: pointer;
  padding: .8rem .9rem; border: 1px solid var(--line); border-radius: 12px;
  background: var(--accent-soft); transition: border-color .18s ease, box-shadow .18s ease;
}
.summary-pickup .pickup-toggle:hover { border-color: var(--accent); }
.summary-pickup .pickup-toggle:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.summary-pickup input[type="checkbox"] { width: 1.15rem; height: 1.15rem; margin-top: .1rem; accent-color: var(--accent); flex: 0 0 auto; cursor: pointer; }
.summary-pickup .pickup-text { display: flex; flex-direction: column; gap: .15rem; flex: 1 1 auto; min-width: 0; }
.summary-pickup .pickup-label { font-weight: 600; font-size: .92rem; }
.summary-pickup .pickup-note { color: var(--muted); font-size: .76rem; line-height: 1.4; }
.summary-pickup .pickup-price { font-weight: 700; font-size: .9rem; color: var(--accent-dark); white-space: nowrap; flex: 0 0 auto; }
.summary-pickup .pickup-emirate { display: flex; align-items: center; gap: .5rem; margin: .5rem 0 0; padding: .5rem .15rem 0; }
.summary-pickup .pickup-emirate label { font-size: .8rem; font-weight: 600; color: var(--slate-muted); flex: 0 0 auto; }
.summary-pickup .pickup-emirate select { flex: 1 1 auto; min-width: 0; height: 40px; padding: 0 .6rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; font-family: var(--font-body); font-size: .88rem; color: var(--ink); cursor: pointer; }
.summary-pickup .pickup-emirate select:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring-soft); }

/* ===== Animated "How to book a shipment" — cinematic video-style loop ===== */
.shipx{background:#fff}
.shipx-wrap{max-width:920px;margin:0 auto;padding:0 1.25rem;text-align:center}
.shipx-head{margin-bottom:1.6rem}
.shipx-eyebrow{display:inline-block;font:700 .72rem/1 "Inter",sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#047857;background:#d6f1e6;padding:.4rem .7rem;border-radius:999px}
.shipx-title{font-family:"Plus Jakarta Sans",sans-serif;font-weight:800;color:#0f1923;font-size:clamp(1.5rem,4vw,2.1rem);margin:.7rem 0 0;line-height:1.15}

.shipx-player{position:relative;border:1px solid #e7ebf1;border-radius:16px;background:linear-gradient(180deg,#fbfcff,#f6f8fb);box-shadow:0 14px 34px rgba(11,27,48,.12);padding:clamp(1rem,3vw,1.6rem);overflow:hidden}

.shipx-prog{display:flex;gap:.5rem;margin-bottom:1rem}
.shipx-seg{flex:1;height:5px;border-radius:999px;background:#e7ebf1;overflow:hidden}
.shipx-fill{display:block;height:100%;width:100%;border-radius:999px;background:linear-gradient(90deg,#047857,#065f46);transform:scaleX(0);transform-origin:left;animation:shipx-seg 14s linear infinite}
.shipx-f2{animation-delay:3.5s}.shipx-f3{animation-delay:7s}.shipx-f4{animation-delay:10.5s}
@keyframes shipx-seg{0%{transform:scaleX(0)}18%,100%{transform:scaleX(1)}}

.shipx-stage{position:relative;aspect-ratio:16/9;border-radius:12px;background:radial-gradient(120% 120% at 50% 18%,#e9f6ef 0%,#f6f8fb 60%);overflow:hidden}
.shipx-grid{position:absolute;inset:0;background-image:linear-gradient(#d6e8df 1px,transparent 1px),linear-gradient(90deg,#d6e8df 1px,transparent 1px);background-size:34px 34px;opacity:.35;mask:radial-gradient(90% 80% at 50% 60%,#000,transparent);animation:shipx-pan 14s linear infinite}
@keyframes shipx-pan{to{transform:translateX(-34px)}}
.shipx-glow{position:absolute;left:50%;top:46%;width:46%;aspect-ratio:1;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(14, 159, 110,.18),transparent);animation:shipx-pulse 14s ease-in-out infinite}
@keyframes shipx-pulse{0%,100%{opacity:.5;transform:translate(-50%,-50%) scale(.9)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}}

/* hero box */
.shipx-box{will-change:transform;position:absolute;left:50%;top:50%;width:clamp(90px,18%,150px);transform:translate(-50%,-46%) rotateZ(0);animation:shipx-box 14s cubic-bezier(.65,0,.35,1) infinite}
.shipx-boxsvg{width:100%;display:block;filter:drop-shadow(0 12px 18px rgba(11,27,48,.22))}
.shipx-tape{transform-box:fill-box;transform-origin:center;animation:shipx-tape 14s ease infinite}
@keyframes shipx-tape{0%,6%{opacity:0}10%,100%{opacity:1}}
@keyframes shipx-box{
0%{transform:translate(-50%,-46%) scale(.7) rotateZ(-6deg);opacity:0}
6%{transform:translate(-50%,-46%) scale(1) rotateZ(0);opacity:1}
24%{transform:translate(-50%,-46%) scale(1) rotateZ(0)}
30%{transform:translate(-58%,-46%) scale(.96) rotateZ(-3deg)}
50%{transform:translate(-50%,-46%) scale(1) rotateZ(0)}
70%{transform:translate(-50%,-44%) scale(1) rotateZ(3deg)}
82%{transform:translate(120%,-30%) scale(.82) rotateZ(10deg);opacity:1}
90%,100%{transform:translate(160%,-20%) scale(.7) rotateZ(14deg);opacity:0}}

/* printed label on box */
.shipx-label{position:absolute;left:14%;top:30%;width:46%;background:#fff;border-radius:4px;padding:5px;box-shadow:0 4px 8px rgba(11,27,48,.25);transform-origin:top center;transform:translateY(-180%) rotate(8deg);opacity:0;animation:shipx-label 14s ease infinite}
.shipx-label .shipx-lbar{display:block;height:2px;margin:2px 0;background:#0f1923;border-radius:1px}
.shipx-label .shipx-lbar:nth-child(2){width:70%}.shipx-label .shipx-lbar:nth-child(3){width:50%}
.shipx-ldhl{display:block;font:800 5px/1 "Plus Jakarta Sans",sans-serif;color:#d40511;letter-spacing:.04em;margin-top:2px}
@keyframes shipx-label{0%,55%{opacity:0;transform:translateY(-180%) rotate(8deg)}62%{opacity:1;transform:translateY(0) rotate(0)}66%{transform:translateY(0) rotate(0) scale(1.08)}70%,100%{opacity:1;transform:translateY(0) rotate(0)}}

/* scenes */
.shipx-scene{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0}
.shipx-s1{animation:shipx-sc1 14s ease infinite}
.shipx-s2{animation:shipx-sc2 14s ease infinite}
.shipx-s3{animation:shipx-sc3 14s ease infinite}
.shipx-s4{animation:shipx-sc4 14s ease infinite}
@keyframes shipx-sc1{0%,2%{opacity:0}6%,22%{opacity:1}26%,100%{opacity:0}}
@keyframes shipx-sc2{0%,26%{opacity:0}30%,46%{opacity:1}50%,100%{opacity:0}}
@keyframes shipx-sc3{0%,50%{opacity:0}54%,70%{opacity:1}74%,100%{opacity:0}}
@keyframes shipx-sc4{0%,74%{opacity:0}78%,94%{opacity:1}100%{opacity:0}}

/* s1 dimension lines + price */
.shipx-dim{position:absolute;width:60%;left:18%;top:24%}
.shipx-dash{fill:none;stroke:#047857;stroke-width:2.5;stroke-dasharray:6 6;stroke-linecap:round;stroke-dashoffset:240;animation:shipx-draw 14s ease infinite}
.shipx-dash2{animation-delay:.5s}
@keyframes shipx-draw{0%,4%{stroke-dashoffset:240}12%,24%{stroke-dashoffset:0}28%,100%{stroke-dashoffset:240}}
.shipx-price{position:absolute;right:14%;top:20%;display:flex;align-items:baseline;gap:.25rem;background:#fff;border:1px solid #e7ebf1;border-radius:12px;padding:.45rem .7rem;box-shadow:0 10px 22px rgba(11,27,48,.14);transform:translateY(12px) scale(.85);opacity:0;animation:shipx-pop 14s cubic-bezier(.2,1.4,.4,1) infinite}
.shipx-price span{font:700 .6rem/1 "Inter";color:#5a6b7d}
.shipx-price strong{font:800 1.3rem/1 "Plus Jakarta Sans";color:#0f1923}
@keyframes shipx-pop{0%,12%{opacity:0;transform:translateY(12px) scale(.85)}16%,22%{opacity:1;transform:translateY(0) scale(1)}26%,100%{opacity:0;transform:translateY(12px) scale(.85)}}

/* s2 card + tap + check */
.shipx-card{position:absolute;left:50%;top:30%;width:clamp(120px,30%,180px);aspect-ratio:1.6;transform:translate(-50%,0) translateX(-60px) rotate(-8deg);background:linear-gradient(135deg,#047857,#065f46);border-radius:12px;box-shadow:0 14px 28px rgba(14, 159, 110,.35);animation:shipx-card 14s ease infinite}
.shipx-chip{position:absolute;left:14%;top:30%;width:18%;aspect-ratio:1.3;border-radius:3px;background:linear-gradient(135deg,#ffe8a3,#f5c451)}
.shipx-cnum{position:absolute;left:14%;bottom:16%;font:700 .58rem/1 "Inter";color:#d6f1e6;letter-spacing:.1em}
.shipx-wifi{position:absolute;right:12%;top:24%;width:16%;aspect-ratio:1;border:2px solid #d6f1e6;border-left:0;border-bottom:0;border-radius:0 60% 0 0;opacity:.85}
@keyframes shipx-card{0%,30%{transform:translate(-50%,0) translateX(-60px) rotate(-8deg)}40%{transform:translate(-50%,0) translateX(10px) rotate(-2deg)}44%{transform:translate(-50%,0) translateX(0) rotate(0) scale(.95)}48%,50%{transform:translate(-50%,0) translateX(0) rotate(0)}}
.shipx-tap{position:absolute;left:50%;top:48%;width:14%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(14, 159, 110,.4),transparent);opacity:0;animation:shipx-tap 14s ease infinite}
@keyframes shipx-tap{0%,42%{opacity:0;transform:translate(-50%,-50%) scale(.4)}44%{opacity:1}48%{opacity:0;transform:translate(-50%,-50%) scale(2)}100%{opacity:0}}
.shipx-check{position:absolute;left:50%;top:30%;width:clamp(34px,9%,44px);transform:translate(-50%,-120%) scale(.6);opacity:0;animation:shipx-checkin 14s ease infinite}
.shipx-cring{stroke-dasharray:126;stroke-dashoffset:126;animation:shipx-ring 14s ease infinite}
.shipx-ctick{stroke-dasharray:40;stroke-dashoffset:40;animation:shipx-tick 14s ease infinite}
@keyframes shipx-checkin{0%,44%{opacity:0;transform:translate(-50%,-120%) scale(.6)}48%{opacity:1;transform:translate(-50%,-120%) scale(1)}50%{opacity:0}}
@keyframes shipx-ring{0%,44%{stroke-dashoffset:126}48%{stroke-dashoffset:0}100%{stroke-dashoffset:0}}
@keyframes shipx-tick{0%,46%{stroke-dashoffset:40}50%{stroke-dashoffset:0}100%{stroke-dashoffset:0}}

/* s3 printer + sheet */
.shipx-printer{position:absolute;left:50%;top:18%;width:clamp(130px,34%,200px);transform:translateX(-50%)}
.shipx-pslot{height:14px;border-radius:8px 8px 4px 4px;background:linear-gradient(180deg,#0a1c30,#1a2f47);box-shadow:0 6px 14px rgba(11,27,48,.3)}
.shipx-sheet{position:relative;margin:0 8%;background:#fff;border:1px solid #e7ebf1;border-radius:0 0 6px 6px;padding:8px;text-align:left;box-shadow:0 8px 18px rgba(11,27,48,.16);transform-origin:top;clip-path:inset(0 0 100% 0);animation:shipx-print 14s cubic-bezier(.5,0,.2,1) infinite}
.shipx-sheet .shipx-sbar{display:block;height:3px;margin:3px 0;background:#0f1923;border-radius:2px}
.shipx-sheet .shipx-sbar:nth-child(2){width:65%}.shipx-sheet .shipx-sbar:nth-child(3){width:45%}
.shipx-sheet em{display:block;font:800 6px/1 "Plus Jakarta Sans";color:#d40511;margin-top:4px;letter-spacing:.05em}
@keyframes shipx-print{0%,52%{clip-path:inset(0 0 100% 0)}66%{clip-path:inset(0 0 0 0)}70%{clip-path:inset(0 0 0 0)}74%,100%{clip-path:inset(0 0 100% 0)}}

/* s4 courier */
.shipx-hand{position:absolute;right:6%;bottom:0;width:clamp(120px,34%,200px);transform:translateX(40px);opacity:0;animation:shipx-handin 14s ease infinite}
@keyframes shipx-handin{0%,76%{opacity:0;transform:translateX(40px)}80%{opacity:1;transform:translateX(0)}94%{opacity:1;transform:translateX(0)}100%{opacity:0}}
.shipx-fly{position:absolute;left:0;top:50%;width:10%;aspect-ratio:1;border-radius:3px;background:#38b88a;opacity:0;animation:shipx-fly 14s ease infinite}
@keyframes shipx-fly{0%,94%{opacity:0}96%{opacity:.6;transform:translate(140px,-30px) rotate(20deg) scale(.5)}100%{opacity:0;transform:translate(300px,-80px) rotate(40deg) scale(.2)}}

/* captions */
.shipx-caps{position:relative;height:4rem;margin-top:1rem}
.shipx-cap{position:absolute;inset:0;display:flex;flex-direction:column;gap:.2rem;opacity:0;transform:translateY(8px)}
.shipx-cap b{font:800 .95rem/1 "Plus Jakarta Sans";color:#047857}
.shipx-cap span{font:400 .85rem/1.3 "Inter";color:#5a6b7d}
.shipx-c1{animation:shipx-cap 14s ease infinite}
.shipx-c2{animation:shipx-cap 14s ease infinite 3.5s}
.shipx-c3{animation:shipx-cap 14s ease infinite 7s}
.shipx-c4{animation:shipx-cap 14s ease infinite 10.5s}
@keyframes shipx-cap{0%{opacity:0;transform:translateY(8px)}4%,22%{opacity:1;transform:translateY(0)}26%,100%{opacity:0;transform:translateY(-8px)}}

.shipx-cta{margin-top:1.6rem}

@media (max-width:520px){
.shipx-title{font-size:1.4rem}
.shipx-cap span{font-size:.78rem}
.shipx-caps{height:5rem}
}

@media (prefers-reduced-motion:reduce){
.shipx-fill,.shipx-grid,.shipx-glow,.shipx-box,.shipx-tape,.shipx-label,.shipx-scene,.shipx-dash,.shipx-price,.shipx-card,.shipx-tap,.shipx-check,.shipx-cring,.shipx-ctick,.shipx-sheet,.shipx-hand,.shipx-fly,.shipx-cap{animation:none!important}
.shipx-fill{transform:scaleX(1)}
.shipx-glow{opacity:.7}
.shipx-box{transform:translate(-50%,-46%) scale(1)!important;opacity:1}
.shipx-tape,.shipx-label{opacity:1;transform:none}
.shipx-label{transform:translateY(0) rotate(0)}
.shipx-s4{opacity:1}
.shipx-hand{opacity:1;transform:none}
.shipx-scene:not(.shipx-s4){opacity:0}
.shipx-c4{opacity:1;transform:none}
.shipx-cap:not(.shipx-c4){opacity:0}
}

/* ===== Solid navy header (homepage) — colored bar with icon actions ===== */
.site-header.site-header--solid {
  background: #0a1c30; -webkit-backdrop-filter: none; backdrop-filter: none;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.site-header--solid .brand-name { color: #fff; }
.site-header--solid.is-scrolled { box-shadow: 0 6px 22px rgba(0, 0, 0, .4); border-bottom-color: rgba(255, 255, 255, .08); }
.header-actions { display: flex; align-items: center; gap: .35rem; }
.header-icon {
  display: inline-grid; place-items: center; width: 44px; height: 44px;
  border-radius: 11px; color: rgba(255, 255, 255, .9);
  transition: background .15s ease, color .15s ease;
}
.header-icon:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.header-icon:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ============================================================
   Centered hero (headline → feature bullets → slim quote bar)
   Overrides the earlier two-column meridian layout.
   ============================================================ */
.hero.hero--meridian { padding: 6.5rem 0 6rem; overflow: visible; }   /* visible so the destination dropdown can escape the hero */
.hero--meridian .hero-inner {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 2.4rem; width: 100%; max-width: 1240px; margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}
.hero--meridian .hero-copy { max-width: 56rem; margin: 0 auto; display: block; }
.hero--meridian .hero-copy .eyebrow { justify-content: center; margin-bottom: 1rem; }
.hero--meridian .hero-copy .eyebrow::before { display: none; }
.hero-title {
  text-transform: uppercase; margin: 0; color: #fff;
  font-family: var(--font-head); font-weight: 800;
  font-size: clamp(2.35rem, 1.4rem + 3.8vw, 4.35rem);
  line-height: 1.05; letter-spacing: -.02em;
}
.hero--meridian .hero-copy .lead {
  margin: 1.1rem auto 0; max-width: 48ch;
  color: rgba(255, 255, 255, .8); font-size: 1.08rem;
}

/* hero action cards (Ship Now / Get a Quote) */
.hero-cards {
  margin: .1rem auto 0; width: 100%; max-width: 680px;
  display: flex; justify-content: center;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .22); overflow: hidden;
}
.hero-card {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: .15rem;
  padding: 1.05rem .9rem; text-decoration: none;
  border-right: 1px solid var(--line); transition: background .15s ease;
}
.hero-card:last-child { border-right: 0; }
.hero-card:hover { background: var(--bg-soft); }
.hero-card:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.hero-card .hc-ico {
  width: 38px; height: 38px; border-radius: 10px; margin-bottom: .4rem;
  display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-dark);
}
.hero-card .hc-ico svg { width: 19px; height: 19px; }
.hero-card .hc-title { font-family: var(--font-head); font-weight: 700; font-size: 1rem; color: var(--ink); }
.hero-card .hc-sub { font-size: .78rem; color: var(--slate-muted); }
@media (max-width: 620px) {
  .hero-cards { flex-direction: column; }
  .hero-card { border-right: 0; border-bottom: 1px solid var(--line); }
  .hero-card:last-child { border-bottom: 0; }
}

/* slim quote bar */
.quote-bar {
  display: flex; align-items: stretch; text-align: left;
  width: 100%; max-width: 1000px; margin: .6rem auto 0;
  background: #fff; border-radius: 18px; padding: 9px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .4);
}
.quote-bar .qb-field {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: center;
  gap: 3px; padding: .8rem 1.25rem; border-right: 1px solid var(--line);
}
.quote-bar .qb-field label {
  margin: 0; font-size: .68rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--slate-muted);
}
.quote-bar .qb-static { display: inline-flex; align-items: center; gap: .4rem; color: var(--ink); font-weight: 600; font-size: .95rem; white-space: nowrap; }
.quote-bar .qb-static .origin-lock { color: var(--slate-light); flex: none; }
.quote-bar .qb-field input,
.quote-bar .combo-input {
  border: 0; outline: none; background: transparent; width: 100%; height: auto;
  font-family: var(--font-body); font-size: 1rem; color: var(--ink); padding: 0;
}
.quote-bar .qb-to { position: relative; }
.quote-bar .qb-to .combo { display: flex; align-items: center; gap: .45rem; position: static; }
.quote-bar .qb-to .to-icon { color: var(--slate-light); display: inline-flex; flex: none; }
.quote-bar .qb-to .combo-list { top: calc(100% + 12px); left: 0; right: auto; min-width: 260px; max-width: 340px; }
.quote-bar .qb-btn {
  flex: none; display: inline-flex; align-items: center; gap: .5rem; margin-left: 6px;
  padding: 0 2rem; border: 0; border-radius: 13px; cursor: pointer;
  background: var(--accent); color: #fff;
  font-family: var(--font-head); font-weight: 700; font-size: 1rem;
  transition: background .15s ease, transform .12s ease;
}
.quote-bar .qb-btn:hover { background: var(--accent-dark); }
.quote-bar .qb-btn:active { transform: translateY(1px); }
.quote-bar .qb-btn[aria-busy="true"] { opacity: .7; cursor: default; }

.hero--meridian .calc-note { color: #ffb4ac; margin: .65rem auto 0; text-align: center; min-height: 1px; }
.hero-subnote { margin: 1rem auto 0; color: rgba(255, 255, 255, .6); font-size: .92rem; }
.hero-subnote a { color: #6ee7b7; font-weight: 600; text-decoration: none; }
.hero-subnote a:hover { text-decoration: underline; }
.calc-anchor { display: block; height: 0; scroll-margin-top: 90px; }

/* mobile: stack the quote bar into a card */
@media (max-width: 720px) {
  .quote-bar { flex-direction: column; padding: 10px; gap: 6px; border-radius: 14px; }
  .quote-bar .qb-field { border-right: 0; border-bottom: 1px solid var(--line); padding: .6rem .75rem; }
  .quote-bar .qb-field:last-of-type { border-bottom: 0; }
  .quote-bar .qb-btn { margin: 4px 0 0; padding: .85rem; justify-content: center; width: 100%; }
  .quote-bar .qb-to .combo-list { min-width: 0; max-width: none; right: 0; }
  .hero-features { gap: 1rem 1.6rem; }
}

/* ===================================================================
   Wave 1 — foundation polish (emerald brand truth + motion system)
   =================================================================== */
/* Engineered figures: every AED amount uses tabular numerals so the
   count-up reveal never reflows/jitters as digit widths change. */
.rate-price, .rate-amount, .shipx-price strong, .calc-amount, .calc-live-amount,
.bsum-total .bsum-v, .co-total, [data-amount] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Unify the header CTA into the 12px button language (pills now reserved
   for small chips / status badges / the deliberate hero-search field). */
.main-nav .nav-cta { border-radius: 12px; }

/* Spring-lift the hero quote CTA to match the global button physics. */
.quote-bar .qb-btn { transition: transform .42s var(--spring), background .2s var(--ease-soft), box-shadow .25s var(--ease-soft); }
.quote-bar .qb-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px var(--glow); }
.quote-bar .qb-btn:active { transform: translateY(1px) scale(.99); transition-duration: .12s; }

/* ===================================================================
   Wave 2 — living globe hero (the signature moment)
   A drag-spinnable emerald dotted Earth lives behind the hero copy and
   flies your parcel to the country you pick. Capped to the hero box so it
   never spills; edges masked to melt into the navy; reduced-motion safe.
   =================================================================== */
.hero.hero--meridian { position: relative; isolation: isolate; }
.hero--meridian .hero-inner { position: relative; z-index: 2; }

/* Specificity 0,3,0 to defeat the dormant 2-col meridian globe rules above. */
.hero.hero--meridian .hero-globe {
  position: absolute; top: 50%; right: 0; left: auto; bottom: auto;
  transform: translateY(-50%);
  width: min(600px, 52%); height: min(600px, 96%); max-width: none; aspect-ratio: auto;
  z-index: 1; pointer-events: none; opacity: 1; animation: none;
  -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 72%, transparent 100%);
}

.hero-aurora {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
  background:
    radial-gradient(38% 46% at 70% 34%, rgba(16, 185, 129, .22), transparent 70%),
    radial-gradient(34% 42% at 22% 66%, rgba(6, 120, 95, .16), transparent 72%);
  filter: blur(58px);
  animation: heroAurora 22s var(--ease-soft) infinite alternate;
  will-change: transform;
}
@keyframes heroAurora {
  from { transform: translate3d(-2%, -1%, 0) scale(1); }
  to   { transform: translate3d(3%, 2%, 0) scale(1.08); }
}

/* On narrow screens the globe steps back to a faint, centered ambient wash (perf + legibility).
   Width capped to 100% so the absolutely-positioned canvas never causes horizontal overflow. */
@media (max-width: 900px) {
  .hero.hero--meridian .hero-globe {
    width: 100%; height: 56vh; left: 0; right: auto; top: 36%;
    transform: translateY(-50%); opacity: .28;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-aurora { animation: none; }
}

/* ===================================================================
   Wave 3 — tactile micro-interactions (the "crafted" layer)
   =================================================================== */
/* Richer scroll-reveal: rise + settle with a hint of scale. */
@media (prefers-reduced-motion: no-preference) {
  .reveal { transform: translateY(26px) scale(.985); }
  .reveal.in { transform: none; }
}

/* Condensing, frosted header on scroll — applies to both light & solid variants. */
.site-header { transition: box-shadow .25s var(--ease-soft), background .25s var(--ease-soft); }
.header-inner { transition: height .28s var(--ease-soft); }
.site-header.is-scrolled .header-inner { height: 60px; }
.site-header--solid.is-scrolled {
  background: rgba(9, 21, 36, .82);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  backdrop-filter: saturate(150%) blur(14px);
  border-bottom-color: rgba(110, 231, 183, .14);
}

/* Cursor-spotlight cards: an emerald glow tracks the pointer; content stays above it.
   Gated to fine pointers + motion-allowed; the class is added by JS. */
@media (prefers-reduced-motion: no-preference) and (pointer: fine) {
  .spotlight { position: relative; }
  .spotlight::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 0;
    pointer-events: none;
    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(14, 159, 110, .15), transparent 60%);
    opacity: 0; transition: opacity .3s var(--ease-soft);
  }
  .spotlight:hover::before { opacity: 1; }
  .spotlight > * { position: relative; z-index: 1; }
}

/* Magnetic CTAs lean toward the cursor; will-change keeps it on the compositor. */
.btn-primary, .quote-bar .qb-btn { will-change: transform; }

/* ===================================================================
   Wave 4 — price-reveal theatre
   The figures already count up from 0 (animatePrices). This adds a single
   emerald light-sweep across the best-value card as the price materializes.
   =================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .rate-list:not(.rate-skeleton) .rate-card.is-featured::after {
    content: ""; position: absolute; inset: 0; z-index: 2;
    pointer-events: none; border-radius: inherit;
    background: linear-gradient(105deg, transparent 38%, rgba(110, 231, 183, .10) 48%, rgba(110, 231, 183, .26) 50%, rgba(110, 231, 183, .10) 52%, transparent 62%);
    background-size: 240% 100%; background-position: 130% 0;
    animation: rate-shimmer 1.15s var(--ease-out) .3s 1;
  }
}
@keyframes rate-shimmer {
  from { background-position: 130% 0; }
  to   { background-position: -40% 0; }
}

/* ===================================================================
   Wave 5 — living tracking timeline (the most-visited courier screen)
   The traveled path glows emerald, the current node breathes, completed
   milestones pop a check, and the whole spine rises in on render.
   =================================================================== */
.tl-dot { width: 16px; height: 16px; position: relative; transition: background .3s var(--ease-out), border-color .3s var(--ease-out), box-shadow .3s var(--ease-out); }
/* the path up to the current node reads as "already travelled" */
.tl-item.complete .tl-line { background: var(--accent); }

@media (prefers-reduced-motion: no-preference) {
  /* completed milestones pop a white check with spring overshoot */
  .track-result .tl-item.complete .tl-dot::after {
    content: ""; position: absolute; inset: 0; margin: auto; width: 9px; height: 9px;
    background: #fff;
    -webkit-mask: var(--ico-check) center / 9px 9px no-repeat;
    mask: var(--ico-check) center / 9px 9px no-repeat;
    transform: scale(0); animation: tl-check .45s var(--spring) .15s both;
  }
  /* the current node breathes */
  .track-result .tl-item.active .tl-dot { animation: tl-pulse 2.4s var(--ease-soft) infinite; }
  /* the spine rises in, staggered top-to-bottom */
  .track-result .tl-item { animation: tl-rise .5s var(--ease-out) both; }
  .track-result .tl-item:nth-child(2) { animation-delay: .06s; }
  .track-result .tl-item:nth-child(3) { animation-delay: .12s; }
  .track-result .tl-item:nth-child(4) { animation-delay: .18s; }
  .track-result .tl-item:nth-child(5) { animation-delay: .24s; }
  .track-result .tl-item:nth-child(6) { animation-delay: .30s; }
}
@keyframes tl-check { to { transform: scale(1); } }
@keyframes tl-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(14, 159, 110, .18); }
  50%      { box-shadow: 0 0 0 9px rgba(14, 159, 110, .04); }
}
@keyframes tl-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ===================================================================
   Homepage redesign — below-hero sections
   delivery-promise · trust band · why-Aliflow · live routes
   =================================================================== */

/* --- 1 · Delivery-promise strip --- */
.offer-strip { background: var(--bg-soft); border-bottom: 1px solid var(--line); padding: 1.5rem 0; }
.offer-line {
  max-width: 840px; margin: 0 auto; text-align: center;
  font-family: var(--font-head); font-weight: 700;
  font-size: clamp(1rem, .92rem + .5vw, 1.18rem); line-height: 1.5;
  color: var(--slate); letter-spacing: -.01em;
}
.offer-line strong { color: var(--accent-dark); font-weight: 800; }

/* --- 2 · Trust band — five real promises --- */
.trust-rail { background: var(--bg-soft); border-bottom: 1px solid var(--line); padding: 2.8rem 0 2.2rem; }
.trust-rail-grid { display: grid; grid-template-columns: repeat(5, 1fr); list-style: none; margin: 0; padding: 0; }
.trust-cell { display: flex; flex-direction: column; gap: .25rem; padding: .2rem 1.5rem; border-left: 1px solid var(--line); }
.trust-cell:first-child { border-left: 0; padding-left: 0; }
.trust-ico { color: var(--accent-dark); margin-bottom: .45rem; }
.trust-ico svg { width: 23px; height: 23px; }
.trust-cell strong { font-family: var(--font-head); font-weight: 800; font-size: .95rem; color: var(--navy-800); line-height: 1.25; }
.trust-cell span { font-size: .84rem; color: var(--slate); line-height: 1.45; }
.trust-rail-note { margin: 2rem 0 0; text-align: right; font-size: var(--step--1); color: var(--slate-muted); line-height: 1.5; }
@media (max-width: 920px) {
  .trust-rail-grid { grid-template-columns: repeat(3, 1fr); gap: 1.8rem 0; }
  .trust-cell { padding: 0 1.3rem; }
  .trust-cell:first-child, .trust-cell:nth-child(4) { border-left: 0; padding-left: 0; }
  .trust-rail-note { text-align: left; }
}
@media (max-width: 560px) {
  .trust-rail-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem 0; }
  .trust-cell, .trust-cell:nth-child(odd) { border-left: 0; padding: 0 1rem; }
  .trust-cell:nth-child(even) { border-left: 1px solid var(--line); }
}
@media (max-width: 380px) {
  .trust-rail-grid { grid-template-columns: 1fr; gap: 1.3rem; }
  .trust-cell, .trust-cell:nth-child(even) { border-left: 0; padding: 0; }
}

/* --- 3 · Why Aliflow vs booking DHL yourself (signature, navy) --- */
.vs-section { position: relative; overflow: hidden; color: #fff; background: linear-gradient(160deg, #060f1c 0%, #0b1b30 55%, #16324f 150%); }
.vs-aurora { position: absolute; top: -18%; right: -8%; width: 60%; height: 90%; z-index: 0; pointer-events: none; background: radial-gradient(closest-side, rgba(16, 185, 129, .16), transparent 70%); filter: blur(54px); }
.vs-section .container { position: relative; z-index: 1; }
.section-head--left { text-align: left; max-width: 760px; margin-inline: 0; }
.section-head--left .eyebrow::before { display: none; }
.vs-section .eyebrow { color: var(--accent-light); }
.vs-section h2 { color: #fff; }
.vs-section .section-head p { color: rgba(255, 255, 255, .72); }

.vs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; margin-top: 2.6rem; align-items: start; }
.vs-card { position: relative; border-radius: var(--radius-lg); padding: 1.9rem 1.7rem; }
.vs-card-title { font-family: var(--font-head); font-weight: 800; font-size: 1.15rem; margin-bottom: 1.3rem; }
.vs-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: .95rem; }
.vs-rows li { position: relative; padding-left: 34px; line-height: 1.45; font-size: .96rem; }
.vs-mark { position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; }
.vs-mark--no { border: 1.5px dashed rgba(255, 255, 255, .3); }
.vs-mark--no::before { content: ""; width: 9px; height: 1.6px; background: rgba(255, 255, 255, .42); border-radius: 2px; }
.vs-mark--yes { background: var(--accent); color: #fff; }
.vs-mark--yes svg { width: 13px; height: 13px; }
.vs-card--plain { background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .08); }
.vs-card--plain .vs-card-title { color: rgba(255, 255, 255, .7); }
.vs-card--plain .vs-rows li { color: rgba(255, 255, 255, .56); }
.vs-card--alf { background: linear-gradient(165deg, rgba(16, 185, 129, .12), rgba(6, 120, 95, .05)); border: 1px solid var(--accent); box-shadow: var(--shadow-3), 0 0 44px rgba(16, 185, 129, .14); }
.vs-card--alf .vs-card-title { color: #fff; }
.vs-card--alf .vs-rows li { color: rgba(255, 255, 255, .92); }
.vs-card--alf .vs-rows em { color: var(--accent-light); font-style: normal; font-weight: 700; }
.vs-cta { margin-top: 1.7rem; width: 100%; }
.vs-helper { display: block; text-align: center; margin-top: .7rem; font-size: .82rem; color: rgba(255, 255, 255, .55); }
@media (max-width: 760px) {
  .vs-grid { grid-template-columns: 1fr; }
  .vs-card--alf { order: -1; }
}

/* --- 4 · Popular routes — live computed prices (navy) --- */
.routes-section { position: relative; overflow: hidden; color: #fff; background: #060f1c; }
.routes-section .eyebrow { color: var(--accent-light); }
.routes-section h2 { color: #fff; }
.routes-section .section-head p { color: rgba(255, 255, 255, .72); }
.eyebrow--live { display: inline-flex; align-items: center; gap: .5rem; }
.eyebrow--live::before { display: none; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: livePulse 2.2s ease-out infinite; }
@keyframes livePulse { 0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, .5); } 70% { box-shadow: 0 0 0 7px rgba(16, 185, 129, 0); } 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); } }

.route-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); gap: 1rem; margin-top: 2.4rem; }
.route-fallback { color: var(--accent-light); font-weight: 700; }
.route-tile { position: relative; display: flex; flex-direction: column; gap: .3rem; padding: 1.3rem 1.3rem 1.4rem; border-radius: 16px; text-decoration: none; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); transition: transform .3s var(--ease-soft), border-color .3s var(--ease-soft), background .3s var(--ease-soft); }
.route-tile:hover { transform: translateY(-3px); border-color: rgba(16, 185, 129, .55); background: rgba(255, 255, 255, .07); }
.route-top { display: flex; align-items: center; justify-content: space-between; min-height: 26px; }
.route-flag { font-size: 1.5rem; line-height: 1; }
.route-badge { font-family: var(--font-head); font-weight: 800; font-size: .62rem; letter-spacing: .04em; text-transform: uppercase; color: #04251a; background: linear-gradient(135deg, var(--grad-from), var(--grad-to)); padding: .22rem .5rem; border-radius: 999px; }
.route-name { font-family: var(--font-head); font-weight: 700; font-size: .98rem; color: rgba(255, 255, 255, .92); margin-top: .35rem; }
.route-arrow { color: var(--accent-light); }
.route-price { color: rgba(255, 255, 255, .58); font-size: .82rem; font-weight: 600; margin-top: .15rem; }
.route-price strong { display: block; color: var(--accent-light); font-family: var(--font-head); font-weight: 800; font-size: 1.7rem; letter-spacing: -.02em; margin-top: .1rem; font-variant-numeric: tabular-nums; }
.route-eta { font-size: .8rem; color: rgba(255, 255, 255, .6); }
.route-ladder { display: flex; flex-wrap: wrap; gap: .25rem .7rem; margin-top: .75rem; padding-top: .75rem; border-top: 1px solid rgba(255, 255, 255, .08); font-size: .73rem; color: rgba(255, 255, 255, .72); font-variant-numeric: tabular-nums; }
.route-tile--gcc { border-color: rgba(16, 185, 129, .6); }
.routes-note { margin: 1.9rem 0 0; font-size: var(--step--1); color: rgba(255, 255, 255, .5); line-height: 1.5; }
.routes-tail { margin: .6rem 0 0; font-size: .92rem; color: rgba(255, 255, 255, .72); }
.routes-tail a { color: var(--accent-light); font-weight: 700; }

/* --- Final CTA band: risk-reversal micro-line + quiet track link --- */
.cta-microline { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.5rem; margin: 1.4rem 0 0; font-size: .9rem; color: rgba(255, 255, 255, .72); }
.cta-microline span { position: relative; }
.cta-microline span:not(:first-child)::before { content: ""; position: absolute; left: -.9rem; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: var(--accent); }
.cta-quietlink { display: inline-block; margin-top: 1.15rem; font-size: .88rem; color: rgba(255, 255, 255, .58); font-weight: 600; transition: color .2s var(--ease-soft); }
.cta-quietlink:hover { color: var(--accent-light); }

/* ===================================================================
   How-it-works + Can-I-ship — elevated two-column layouts
   =================================================================== */
/* How it works: animation left, static 4-step list right (fills the stage's empty space) */
.shipx-wrap { max-width: 1120px; }
.shipx-stage-grid { display: grid; grid-template-columns: 1.3fr .85fr; gap: 2.8rem; align-items: center; margin-top: .2rem; }
.shipx-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; text-align: left; }
.shipx-steps li { display: grid; grid-template-columns: 40px 1fr; gap: 1rem; align-items: start; }
.shipx-stepn { width: 40px; height: 40px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-dark); font-family: var(--font-head); font-weight: 800; font-size: 1.1rem; display: grid; place-items: center; }
.shipx-stept strong { display: block; font-family: var(--font-head); font-weight: 800; font-size: 1.06rem; color: var(--navy-800); margin-bottom: .12rem; }
.shipx-stept span { color: var(--slate); font-size: .92rem; line-height: 1.5; }
@media (max-width: 860px) {
  .shipx-stage-grid { grid-template-columns: 1fr; gap: 1.9rem; }
  .shipx-steps { max-width: 460px; margin-inline: auto; }
}

/* Can I ship it?: intro + guarantee left, live checker right */
.checker-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: 3rem; align-items: start; }
.checker-intro .section-head { margin-bottom: 1.4rem; }
.checker-guarantee { display: flex; gap: .8rem; align-items: flex-start; background: var(--accent-soft); border: 1px solid #b6e3d0; border-radius: var(--radius); padding: 1rem 1.1rem; }
.checker-guarantee .cg-ico { color: var(--accent-dark); flex: none; }
.checker-guarantee .cg-ico svg { width: 24px; height: 24px; }
.checker-guarantee p { margin: 0; color: #065f46; font-size: .92rem; line-height: 1.5; font-weight: 500; }
.checker-grid .ship-check { max-width: none; margin: 0; }
@media (max-width: 860px) {
  .checker-grid { grid-template-columns: 1fr; gap: 1.9rem; }
}

/* ===================================================================
   Currency display switcher — view in any currency, billed in AED
   =================================================================== */
.routes-controls { display: flex; align-items: center; justify-content: center; gap: .6rem; margin-top: 1.4rem; flex-wrap: wrap; }
.currency-label { font-size: .82rem; font-weight: 600; color: var(--slate-muted); }
.currency-switch { position: relative; display: inline-flex; align-items: center; }
.currency-switch select {
  appearance: none; -webkit-appearance: none;
  font-family: var(--font-head); font-weight: 700; font-size: .85rem;
  padding: .42rem 1.8rem .42rem .85rem; border-radius: 999px;
  border: 1.5px solid var(--line); background: #fff; color: var(--navy-800);
  cursor: pointer; transition: border-color .2s var(--ease-soft), box-shadow .2s var(--ease-soft);
}
.currency-switch select:hover { border-color: var(--accent); }
.currency-switch select:focus-visible { outline: none; box-shadow: var(--ring); border-color: var(--accent); }
.currency-switch .cs-ic { position: absolute; right: .7rem; pointer-events: none; color: var(--slate-muted); font-size: .85rem; line-height: 1; }
.aed-billed-note { font-size: .82rem; color: var(--accent-dark); font-weight: 600; }

/* On the navy routes section */
.routes-section .currency-label { color: rgba(255, 255, 255, .7); }
.routes-section .currency-switch select { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .22); color: #fff; }
.routes-section .currency-switch select:hover { border-color: var(--accent-light); }
.routes-section .currency-switch select option { color: #0f1923; }
.routes-section .currency-switch .cs-ic { color: rgba(255, 255, 255, .6); }
.routes-section .aed-billed-note { color: var(--accent-light); }

/* AED reference anchors under converted prices */
.route-aed { display: block; font-size: .72rem; color: rgba(255, 255, 255, .5); margin-top: .12rem; font-variant-numeric: tabular-nums; }
.rate-aed { display: block; color: var(--slate-muted); font-size: .72rem; font-weight: 500; font-variant-numeric: tabular-nums; }

/* Rates page: switch sits right-aligned above the results */
.routes-controls--rates { justify-content: flex-end; margin: 0 0 1.2rem; }
@media (max-width: 560px) { .routes-controls--rates { justify-content: flex-start; } }

/* ===================================================================
   Header — premium nav on the solid navy bar.
   Reuses the dormant .main-nav / .nav-cta / .nav-track / .nav-toggle system;
   adds dark-bar theming, the active-page underline, and the mobile drawer reskin.
   =================================================================== */
/* Light nav links + white hamburger on the navy bar */
.site-header--solid .main-nav a { color: rgba(255, 255, 255, .78); }
.site-header--solid .main-nav a:hover { color: #fff; }
.site-header--solid .nav-toggle span { background: #fff; }
.site-header--solid .main-nav .nav-track { border-color: rgba(255, 255, 255, .24); color: rgba(255, 255, 255, .9); }
.site-header--solid .main-nav .nav-track:hover { border-color: var(--accent); background: rgba(14, 159, 110, .16); color: #fff; }

/* Signature: center-origin emerald active/hover underline (plain links only) */
.main-nav a:not(.nav-cta):not(.nav-track) { position: relative; }
.main-nav a:not(.nav-cta):not(.nav-track)::after {
  content: ""; position: absolute; left: 50%; bottom: -7px; width: 22px; height: 2px;
  background: var(--accent); border-radius: 2px;
  transform: translateX(-50%) scaleX(0); transform-origin: center;
  transition: transform .25s var(--ease-out);
}
.main-nav a:not(.nav-cta):not(.nav-track):hover::after,
.main-nav a[aria-current="page"]:not(.nav-cta):not(.nav-track)::after { transform: translateX(-50%) scaleX(1); }
.site-header--solid .main-nav a[aria-current="page"] { color: #fff; }
.site-header--solid .main-nav .nav-track[aria-current="page"] { border-color: var(--accent); background: rgba(14, 159, 110, .18); color: #fff; }

/* Secondary links live only inside the mobile drawer */
@media (min-width: 861px) { .main-nav .drawer-only { display: none; } }

/* Mobile drawer reskin: frosted navy (the dormant panel was white) */
@media (max-width: 860px) {
  .site-header--solid .main-nav {
    background: rgba(9, 21, 36, .97);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-bottom-color: rgba(255, 255, 255, .08);
  }
  .site-header--solid .main-nav a { border-bottom-color: rgba(255, 255, 255, .08); }
  .site-header.is-scrolled .main-nav { top: 60px; }   /* follow the condensed bar */
  .main-nav .nav-cta { order: -2; }                    /* CTA first in the drawer */
  .main-nav .nav-track { order: -1; }
  .main-nav .drawer-only { color: rgba(255, 255, 255, .68); font-weight: 600; }
}
/* Keep the bar fully opaque while the drawer is open (legibility) */
body.nav-open .site-header--solid { background: #0a1c30; -webkit-backdrop-filter: none; backdrop-filter: none; }

/* Reduced motion: underline appears instantly */
@media (prefers-reduced-motion: reduce) {
  .main-nav a:not(.nav-cta):not(.nav-track)::after { transition: none; }
}

/* Clip the hero's decorative horizontal bleed (aurora/globe) without trapping the
   destination dropdown, which opens vertically. Kills a few px of h-scroll on tablet. */
.hero.hero--meridian { overflow-x: clip; }

/* ===================================================================
   Header v2 — two-tier premium courier bar (utility strip + main bar
   with hover-pill nav, an inline track field, and a glowing CTA).
   =================================================================== */
.site-header.site-header--solid { background: linear-gradient(180deg, #0c2038 0%, #07111f 100%); border-bottom: 1px solid rgba(110, 231, 183, .14); }

/* Tier 1 — utility strip */
.header-util { background: rgba(0, 0, 0, .24); border-bottom: 1px solid rgba(255, 255, 255, .06); overflow: hidden; transition: height .28s var(--ease-soft), opacity .2s ease; }
.header-util-inner { display: flex; align-items: center; justify-content: space-between; height: 37px; gap: 1rem; }
.hu-tag { display: inline-flex; align-items: center; gap: .45rem; font-size: .78rem; font-weight: 500; color: rgba(255, 255, 255, .56); white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.hu-tag svg { color: var(--accent-light); flex: none; }
.hu-links { display: flex; align-items: center; gap: .85rem; flex: none; }
.hu-link { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; font-weight: 600; color: rgba(255, 255, 255, .72); }
.hu-link:hover { color: #fff; }
.hu-link svg { color: var(--accent); flex: none; }
.hu-divider { width: 1px; height: 15px; background: rgba(255, 255, 255, .14); }
.hu-currency select { background: transparent; border: 1px solid rgba(255, 255, 255, .2); color: rgba(255, 255, 255, .88); font-size: .76rem; font-weight: 700; padding: .18rem 1.4rem .18rem .55rem; border-radius: 999px; }
.hu-currency select:hover { border-color: var(--accent); }
.hu-currency select option { color: #0f1923; }
.hu-currency .cs-ic { right: .55rem; color: rgba(255, 255, 255, .5); font-size: .75rem; }
.site-header.is-scrolled .header-util { height: 0; opacity: 0; border-bottom-color: transparent; }

/* Tier 2 — main bar */
.site-header--solid .header-inner { gap: 1rem; }
.site-header--solid .main-nav { gap: .35rem; }
.site-header--solid .brand-mark { filter: drop-shadow(0 0 9px rgba(16, 185, 129, .5)); }
.site-header--solid .brand-name { font-size: 1.34rem; }

/* nav: hover-pills, bright text (kill the old underline) */
.main-nav a:not(.nav-cta):not(.nav-track)::after { display: none !important; }
.site-header--solid .main-nav a:not(.nav-cta):not(.nav-track) { color: rgba(255, 255, 255, .82); font-weight: 600; padding: .52rem .85rem; border-radius: 9px; transition: background .2s var(--ease-soft), color .15s ease; }
.site-header--solid .main-nav a:not(.nav-cta):not(.nav-track):hover { background: rgba(255, 255, 255, .08); color: #fff; }
.site-header--solid .main-nav a[aria-current="page"] { background: rgba(16, 185, 129, .16); color: #6ee7b7; }

/* right cluster — inline track field + CTA */
.header-actions { display: flex; align-items: center; gap: .7rem; }
.header-track { display: flex; align-items: center; height: 42px; padding-left: .85rem; border-radius: 999px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .15); transition: border-color .2s, background .2s, box-shadow .2s; }
.header-track:focus-within { border-color: var(--accent); background: rgba(255, 255, 255, .1); box-shadow: 0 0 0 3px rgba(14, 159, 110, .22); }
.ht-ico { display: inline-flex; color: rgba(255, 255, 255, .5); flex: none; }
.ht-input { background: transparent; border: 0; outline: none; color: #fff; font-family: var(--font-body); font-size: .88rem; width: 160px; padding: 0 .55rem; }
.ht-input::placeholder { color: rgba(255, 255, 255, .45); }
.ht-go { display: grid; place-items: center; width: 34px; height: 34px; margin: 3px; border: 0; border-radius: 999px; cursor: pointer; color: #04251a; background: linear-gradient(135deg, var(--grad-from), var(--grad-to)); transition: filter .15s, transform .12s; flex: none; }
.ht-go:hover { filter: brightness(1.06); }
.ht-go:active { transform: scale(.93); }

/* CTA (lives in .header-actions now) */
.header-actions .nav-cta { display: inline-flex; align-items: center; gap: .45rem; height: 42px; padding: 0 1.25rem; border-radius: 999px; font-family: var(--font-head); font-weight: 700; font-size: .95rem; color: #fff; background: linear-gradient(135deg, var(--grad-from), var(--grad-to)); box-shadow: 0 8px 22px rgba(16, 185, 129, .42); white-space: nowrap; transition: filter .15s, box-shadow .25s, transform .42s var(--spring); }
.header-actions .nav-cta:hover { filter: brightness(1.04); box-shadow: 0 12px 32px rgba(16, 185, 129, .58); }
.header-actions .nav-cta svg { transition: transform .25s var(--ease-out); }
.header-actions .nav-cta:hover svg { transform: translateX(3px); }
.header-actions .nav-cta:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 5px rgba(14, 159, 110, .45); }

/* Mobile (≤860): utility shows compact, track field + CTA hidden, drawer carries it */
@media (max-width: 860px) {
  .header-util .hu-tag { display: none; }
  .header-util-inner { justify-content: flex-end; height: 36px; }
  .header-actions { display: none; }
  .main-nav .nav-drawer-cta { order: -1; justify-content: center; text-align: center; color: #fff !important; background: linear-gradient(135deg, var(--grad-from), var(--grad-to)); border-radius: 12px; font-weight: 700; border-bottom: 0 !important; margin-bottom: .45rem; }
}

/* Two-tier header: anchor the mobile drawer to the actual header bottom
   (the dormant top:72px assumed a single-tier bar). 100% adapts to the
   utility strip being present or collapsed on scroll. */
.site-header--solid .main-nav { top: 100%; }

/* ===================================================================
   WAVE 9 — APEX HOMEPAGE REDESIGN (the contract)
   Cinematic split hero · living globe · flight-console calculator ·
   live-price payoff · kinetic button language · motion choreography ·
   material/surface depth. Appended last → wins the cascade.
   Brand law: emerald-on-navy, zero cobalt. Honesty law: no fabricated
   proof/prices/capabilities.
   =================================================================== */

/* ---- Token system: the physics every surface draws from ---- */
:root {
  /* navy surface tiers (void -> elevated) */
  --nv-void:#04101e; --nv-900:#07182a; --nv-850:#0a1f35; --nv-800:#0e2740;
  --nv-line:rgba(148,197,178,.12); --nv-line-hi:rgba(180,240,215,.22);
  /* light surface tiers */
  --pp-0:#ffffff; --pp-1:#f6faf8; --pp-2:#eef4f1;
  --pp-line:#e4ebe8; --pp-line-em:rgba(14,159,110,.16);
  /* emerald ramp (gradient, never flat neon) */
  --em-bright:var(--emerald-500); --em-core:#0e9f6e; --em-deep:#047857;
  --em-grad:linear-gradient(135deg,var(--emerald-500) 0%,#0e9f6e 52%,#047857 100%);
  --em-grad-soft:linear-gradient(135deg,rgba(16,185,129,.16),rgba(4,120,87,.10));
  --teal:#19c8db;
  /* two-part shadow ladder: ambient bloom + tight contact */
  --sh-1:0 1px 2px rgba(4,16,30,.10);
  --sh-2:0 2px 4px rgba(4,16,30,.08),0 8px 18px rgba(4,16,30,.10);
  --sh-3:0 4px 8px rgba(4,16,30,.10),0 18px 40px rgba(4,16,30,.16);
  --sh-4:0 8px 16px rgba(4,16,30,.12),0 40px 80px rgba(4,16,30,.30);
  --sh-em:0 8px 22px rgba(14,159,110,.34),0 2px 6px rgba(4,120,87,.30);
  /* inner highlights (lit top bevel) */
  --inset-hi-dark:inset 0 1px 0 rgba(180,240,215,.10);
  --inset-hi-light:inset 0 1px 0 rgba(255,255,255,.9);
  /* motion + layout additions */
  --ease-expressive:cubic-bezier(.16,1,.3,1);
  --container-wide:1500px;
  /* scoped film grain */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ===================== THE CINEMATIC SPLIT HERO ===================== */
.hero.hero--meridian {
  padding: clamp(3.25rem,4.5vw,6rem) 0 clamp(3.5rem,5vw,6rem);
  position: relative; isolation: isolate; overflow-x: clip;
  background:
    radial-gradient(120% 92% at 50% 14%, transparent 40%, rgba(2,8,16,.55) 100%),
    linear-gradient(180deg,#0a2036 0%,#07182a 56%,var(--nv-void) 100%);
  border-bottom: 1px solid rgba(16,185,129,.18);
}
.hero--meridian .hero-inner {
  display: grid; grid-template-columns: minmax(0,1.06fr) minmax(0,.94fr);
  align-items: center; gap: clamp(2rem,4vw,5rem);
  width: min(100% - 3rem, var(--container-wide)); max-width: none; margin-inline: auto;
  text-align: left; position: relative; z-index: 2;
  min-height: clamp(500px,58vh,680px); padding-inline: 0;
}
.hero--meridian .hero-copy { max-width: 38rem; margin: 0; }
.hero--meridian .hero-copy .eyebrow {
  justify-content: flex-start; margin-bottom: 1.05rem;
  color: #6ee7b7; letter-spacing: .14em; font-weight: 700;
}
.hero--meridian .hero-copy .eyebrow::before { display: none; }
.hero-title {
  text-transform: none; margin: 0; color: #fff;
  font-family: var(--font-head); font-weight: 800;
  font-size: clamp(2.4rem,1.5rem + 3vw,4.1rem);
  line-height: 1.04; letter-spacing: -.035em; max-width: 16ch;
}
.hero-sub {
  margin: 1.1rem 0 0; color: rgba(234,246,240,.74);
  font-size: clamp(1rem,.95rem + .3vw,1.16rem); line-height: 1.55; max-width: 33rem;
}
.hero--meridian .quote-bar,
.hero--meridian .calc-live,
.hero--meridian .hero-secondary { max-width: 560px; justify-self: start; }
.hero--meridian .quote-bar { margin: 1.6rem 0 0; }
.hero-secondary { margin: 1rem 0 0; color: rgba(234,246,240,.62); font-size: .95rem; }
.hero-secondary a { color: #6ee7b7; text-decoration: none; font-weight: 600; }
.hero-secondary a:hover { text-decoration: underline; }
.hero--meridian .calc-note { color: #ffb4ac; margin: .6rem 0 0; text-align: left; min-height: 1px; }

/* the right stage: the living globe */
.hero-stage { position: relative; aspect-ratio: 1/1; width: 100%; max-width: 640px; justify-self: center; }
.hero.hero--meridian .hero-globe {
  position: absolute; inset: 0; width: 100%; height: 100%;
  max-width: none; aspect-ratio: 1/1; top: auto; right: auto; left: auto; bottom: auto;
  transform: none; z-index: 1; pointer-events: auto; opacity: 1;
  animation: heroGlobeIn 1.1s var(--ease-out) .2s both;
  -webkit-mask-image: radial-gradient(closest-side,#000 70%,transparent 100%);
          mask-image: radial-gradient(closest-side,#000 70%,transparent 100%);
}
@keyframes heroGlobeIn { from { opacity:0; transform:scale(.94);} to { opacity:1; transform:scale(1);} }
.hero-stage::after {   /* floor glow under the sphere */
  content:""; position:absolute; left:50%; bottom:4%; width:62%; height:18%;
  transform:translateX(-50%); z-index:0; pointer-events:none; filter:blur(34px);
  background:radial-gradient(closest-side,rgba(16,185,129,.34),transparent 72%);
}

/* aurora (dual emerald + a teal depth note) behind everything */
.hero--meridian .hero-aurora {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(42% 50% at 74% 38%, rgba(16,185,129,.30), transparent 70%),
    radial-gradient(34% 44% at 20% 70%, rgba(6,120,95,.18), transparent 72%),
    radial-gradient(28% 38% at 88% 78%, rgba(25,200,219,.12), transparent 70%);
  filter: blur(64px); animation: heroAurora 24s var(--ease-soft) infinite alternate; will-change: transform;
}
@keyframes heroAurora { from { transform: translate3d(0,0,0) scale(1);} to { transform: translate3d(-2%,1%,0) scale(1.05);} }

/* scoped film grain over the hero only (NOT global body) */
.hero.hero--meridian::after {
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  opacity:.05; mix-blend-mode:overlay; background-image:var(--grain); background-size:160px 160px;
}

/* dropdown must escape the hero + sit above grain/globe */
.hero--meridian .quote-bar { position: relative; z-index: 5; }
.hero--meridian .quote-bar .qb-to .combo-list,
.hero--meridian .quote-bar .combo-list { z-index: 40; }

/* the calculator as a dark "flight console" */
.hero--meridian .quote-bar {
  background: linear-gradient(180deg, rgba(13,33,54,.88), rgba(9,24,40,.93));
  border: 1px solid rgba(110,231,183,.18); border-radius: 18px; padding: 10px;
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 24px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
}
.hero--meridian .quote-bar:focus-within {
  border-color: rgba(16,185,129,.32);
  box-shadow: 0 24px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 3px rgba(16,185,129,.2);
}
.hero--meridian .quote-bar .qb-field { border-right-color: rgba(255,255,255,.09); }
.hero--meridian .quote-bar .qb-field label { color: rgba(167,243,208,.78); }
.hero--meridian .quote-bar .qb-static,
.hero--meridian .quote-bar .qb-field input,
.hero--meridian .quote-bar .combo-input { color: #eaf6f0; }
.hero--meridian .quote-bar .combo-input::placeholder { color: rgba(234,246,240,.5); }
.hero--meridian .quote-bar .qb-to .to-icon,
.hero--meridian .quote-bar .qb-static .origin-lock { color: rgba(167,243,208,.6); }

/* the live-price payoff panel (revives the dormant #calc-live machinery) */
.hero--meridian .calc-live { margin-top: 1.05rem; }
.calc-live { display: grid; grid-template-rows: 0fr; opacity: 0;
  transition: grid-template-rows .42s var(--ease-out), opacity .3s var(--ease-soft), margin .3s var(--ease-out); }
.calc-live.is-open { grid-template-rows: 1fr; opacity: 1; }
.hero--meridian .calc-live.is-open {
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(13,33,54,.72), rgba(9,24,40,.84));
  border: 1px solid rgba(110,231,183,.22); box-shadow: var(--sh-4), var(--inset-hi-dark);
}
.calc-live > .calc-live-inner { overflow: hidden; min-height: 0; }
.calc-live.is-open > .calc-live-inner { padding: 1.1rem 1.3rem; }
.calc-live-inner { display: grid; gap: .42rem; }
.calc-live-tag { display:inline-flex; align-items:center; gap:.5rem; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:#6ee7b7; font-weight:700; }
.calc-live-headline { display:flex; align-items:baseline; gap:.5rem; margin:0; font-family:var(--font-head); line-height:1.1; }
.calc-live-from { color:rgba(234,246,240,.6); font-size:.95rem; font-weight:600; }
.calc-live-amount { font-family:var(--font-head); font-weight:800; color:#fff; letter-spacing:-.02em;
  font-size:clamp(1.9rem,1.4rem + 1.8vw,2.7rem); transition:color .25s var(--ease-soft); }
.calc-live-eta { margin:0; color:#a7f3d0; font-weight:600; font-size:1rem; }
.calc-live-eta .eta-label { display:inline; color:rgba(234,246,240,.6); font-weight:500; margin-right:.35rem; }
.calc-live-eta .eta-date { font-weight:700; color:#a7f3d0; }
.calc-live-meta { margin:0; color:rgba(234,246,240,.56); font-size:.86rem; }
.calc-live-actions { display:flex; flex-wrap:wrap; align-items:center; gap:.55rem 1rem; margin-top:.55rem; }
.calc-live-book { padding: .72rem 1.3rem; font-size: .95rem; }
.calc-live-trust { color:rgba(234,246,240,.52); font-size:.8rem; }
/* one-shot "delivered" celebration, synced to the globe arc landing */
.calc-live.delivered-pulse.is-open { animation: delivered-pop .55s var(--ease-expressive) both; }
@keyframes delivered-pop { 0%{box-shadow:0 0 0 0 rgba(14,159,110,.55);} 55%{box-shadow:0 0 0 14px rgba(14,159,110,0);} 100%{box-shadow:0 0 0 0 rgba(14,159,110,0);} }
.calc-live.delivered-pulse .calc-live-amount { animation: price-flash .6s var(--ease-out); }
@keyframes price-flash { 0%{color:var(--emerald-500);} 100%{color:#fff;} }

/* hero responsive */
@media (max-width: 960px) {
  .hero--meridian .hero-inner { grid-template-columns: 1fr; text-align: center; gap: 2rem; min-height: 0; }
  .hero--meridian .hero-copy { max-width: 42rem; margin-inline: auto; }
  .hero--meridian .hero-copy .eyebrow { justify-content: center; }
  .hero-title, .hero-sub { max-width: 100%; margin-inline: auto; }
  .hero--meridian .quote-bar,
  .hero--meridian .calc-live,
  .hero--meridian .hero-secondary { justify-self: stretch; margin-inline: auto; }
  .hero--meridian .calc-note { text-align: center; }
  .hero-stage { order: -1; max-width: 380px; margin-inline: auto; }
  .hero.hero--meridian .hero-globe { pointer-events: none; }
}
@media (max-width: 620px) { .hero-stage { max-width: 290px; } }
@media (prefers-reduced-motion: reduce) {
  .hero--meridian .hero-aurora, .hero.hero--meridian .hero-globe { animation: none; }
  .calc-live { transition: opacity .2s linear; }
}

/* ===================== KINETIC BUTTON LANGUAGE ===================== */
.btn-primary, .quote-bar .qb-btn, .vs-cta, .calc-live-book {
  position: relative; isolation: isolate; overflow: hidden; border: 0; border-radius: 999px;
  background: var(--em-grad); color: #fff; font-family: var(--font-head); font-weight: 700; letter-spacing: -.01em;
  display: inline-flex; align-items: center; gap: .5rem; justify-content: center;
  box-shadow: 0 10px 26px rgba(14,159,110,.32), inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(0,0,0,.12);
  transition: box-shadow .22s var(--ease-soft), filter .22s var(--ease-soft), transform .42s var(--spring);
  will-change: transform;
}
.btn-primary::before, .quote-bar .qb-btn::before, .calc-live-book::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.45) 50%, transparent 62%);
  transform: translateX(-120%); transition: transform .7s var(--ease-out);
}
.btn-primary:hover::before, .quote-bar .qb-btn:hover::before, .calc-live-book:hover::before { transform: translateX(120%); }
.btn-primary:hover, .quote-bar .qb-btn:hover, .vs-cta:hover, .calc-live-book:hover {
  color: #fff; filter: brightness(1.04) saturate(1.05);
  box-shadow: 0 18px 40px rgba(14,159,110,.5), inset 0 1px 0 rgba(255,255,255,.34), inset 0 -1px 0 rgba(0,0,0,.14);
}
.btn-primary:active, .quote-bar .qb-btn:active, .vs-cta:active, .calc-live-book:active {
  transition: transform .08s var(--ease-soft), box-shadow .08s var(--ease-soft);
  box-shadow: 0 4px 12px rgba(14,159,110,.34), inset 0 1px 2px rgba(0,0,0,.22); filter: brightness(.98);
}
.btn-primary svg, .quote-bar .qb-btn svg, .vs-cta svg, .calc-live-book svg, .nav-cta svg { transition: transform .26s var(--spring); }
.btn-primary:hover svg, .quote-bar .qb-btn:hover svg, .vs-cta:hover svg, .calc-live-book:hover svg, .nav-cta:hover svg { transform: translateX(4px); }
.btn-primary:focus-visible, .quote-bar .qb-btn:focus-visible, .vs-cta:focus-visible, .calc-live-book:focus-visible {
  outline: none; box-shadow: 0 0 0 3px #0a1c30, 0 0 0 6px rgba(14,159,110,.85), 0 14px 32px rgba(14,159,110,.4);
}
/* the single hero CTA breathes so it's the brightest pixel on the page */
@media (prefers-reduced-motion: no-preference) {
  .hero--meridian .quote-bar .qb-btn:not(:hover):not(:active) { animation: cta-breathe 3.6s var(--ease-soft) infinite; }
}
@keyframes cta-breathe {
  0%,100% { box-shadow: 0 10px 26px rgba(14,159,110,.32), inset 0 1px 0 rgba(255,255,255,.28); }
  50%     { box-shadow: 0 12px 34px rgba(14,159,110,.5), 0 0 0 4px rgba(14,159,110,.10), inset 0 1px 0 rgba(255,255,255,.3); }
}

/* ===================== MOTION CHOREOGRAPHY ===================== */
/* directional reveals (build on the existing .reveal/.in system) */
.reveal[data-rv="left"]  { transform: translateX(-26px); }
.reveal[data-rv="right"] { transform: translateX(26px); }
.reveal[data-rv="scale"] { transform: translateY(14px) scale(.965); }
.reveal[data-rv="rise"]  { transform: translateY(22px); }
.reveal[data-rv].in { transform: none; }
.vs-card.reveal, .route-tile.reveal { transition: opacity .62s var(--ease-out), transform .68s var(--ease-out); transition-delay: calc(var(--i,0)*90ms); }
.trust-cell.reveal { transition: opacity .5s var(--ease-out), transform .56s var(--ease-out); transition-delay: calc(var(--i,0)*60ms); }

/* live-dot beacon ping */
.eyebrow--live .live-dot, .calc-live-tag .live-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--em-core); flex: none; }
@media (prefers-reduced-motion: no-preference) {
  .eyebrow--live .live-dot::after, .calc-live-tag .live-dot::after {
    content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--em-core); animation: beacon 1.8s var(--ease-out) infinite;
  }
}
@keyframes beacon { 0%{transform:scale(1);opacity:.7;} 100%{transform:scale(3.4);opacity:0;} }

/* smooth FAQ expand + spring chevron */
.faq-item .faq-body { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .34s var(--ease-out), opacity .26s var(--ease-soft); }
.faq-item[open] .faq-body { grid-template-rows: 1fr; opacity: 1; }
.faq-item .faq-body > * { overflow: hidden; }

/* combobox arrival + option polish */
.combo-list:not([hidden]) { animation: combo-in .22s var(--ease-out) both; }
@keyframes combo-in { from{opacity:0;transform:translateY(-6px);} to{opacity:1;transform:none;} }

/* ===================== SURFACE / MATERIAL DEPTH ===================== */
/* light section tiers (kills any SaaS-grey undertone) */
.trust-rail { background: var(--pp-1); border-top: 1px solid var(--pp-line); border-bottom: 1px solid var(--pp-line); }

/* DARK routes section — radial light source + navy-card tiles */
.routes-section { background: radial-gradient(120% 85% at 50% 0%, var(--nv-850), var(--nv-void) 72%); border-bottom: 1px solid rgba(16,185,129,.18); }
.routes-section .container { width: min(100% - 3rem, var(--container-wide)); }
.routes-section .section-head { text-align: left; max-width: 760px; margin-inline: 0; }
.route-grid { grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: clamp(1rem,1.4vw,1.5rem); }
@media (min-width: 1500px) { .route-grid { grid-template-columns: repeat(4,1fr); } }
.routes-section .route-tile {
  background: linear-gradient(180deg, var(--nv-800), var(--nv-850));
  border: 1px solid var(--nv-line); box-shadow: var(--sh-3), var(--inset-hi-dark);
}
.routes-section .route-tile:hover {
  transform: translateY(-5px); border-color: var(--nv-line-hi);
  box-shadow: var(--sh-4), 0 0 0 1px rgba(16,185,129,.2), var(--inset-hi-dark);
}

/* CTA band — graded navy with an emerald floor-bloom */
.cta-band { position: relative; overflow: hidden; background: linear-gradient(160deg, var(--nv-900), var(--nv-void)); border-top: 1px solid rgba(16,185,129,.18); }
.cta-band > .container { position: relative; z-index: 1; }
.cta-band::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; filter: blur(50px);
  background: radial-gradient(40% 60% at 50% 120%, rgba(16,185,129,.26), transparent 70%),
              radial-gradient(30% 40% at 85% -10%, rgba(25,200,219,.10), transparent 70%);
}

/* vs-section FLIPPED to a clean LIGHT surface (breaks the routes->vs adjacent-dark)
   — every element re-checked for AA on light */
.vs-section { background: linear-gradient(165deg, var(--pp-1) 0%, var(--pp-0) 72%); color: var(--ink); }
.vs-section .vs-aurora { background: radial-gradient(closest-side, rgba(16,185,129,.1), transparent 70%); }
.vs-section .eyebrow { color: var(--accent-dark); }
.vs-section h2 { color: var(--navy-800); }
.vs-section .section-head p { color: var(--slate); }
.vs-card--plain { background: var(--pp-0); border: 1px solid var(--pp-line); box-shadow: var(--sh-1); }
.vs-card--plain .vs-card-title { color: var(--slate); }
.vs-card--plain .vs-rows li { color: var(--slate); }
.vs-card--plain .vs-mark--no { border: 1.5px dashed #c2ccc8; }
.vs-card--plain .vs-mark--no::before { background: #9aa7a2; }
.vs-card--alf { background: linear-gradient(165deg, #f0fbf6 0%, #ffffff 75%); border: 1px solid rgba(14,159,110,.4); box-shadow: var(--sh-3), 0 0 44px rgba(16,185,129,.12); }
.vs-card--alf .vs-card-title { color: var(--navy-800); }
.vs-card--alf .vs-rows li { color: var(--ink); }
.vs-card--alf .vs-rows em { color: var(--accent-dark); font-style: normal; font-weight: 700; }
.vs-card--alf .vs-mark--yes { background: var(--em-core); color: #fff; }
.vs-helper { color: var(--slate-muted); }

/* white-card material: lit top edge + two-part shadow */
.ship-check, .faq-item { box-shadow: var(--sh-2), var(--inset-hi-light); }

/* ---- Decisive override of the THREE legacy light-themed .hero--meridian
   .calc-live blocks (styles.css ~1955 / ~2133 / ~2525). Hero-scoped + appended
   last so it wins; turns the payoff panel into dark glass with a clean
   amount-first hierarchy. ---- */
.hero--meridian .calc-live.is-open {
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(13,33,54,.78), rgba(9,24,40,.9));
  border: 1px solid rgba(110,231,183,.24);
  box-shadow: var(--sh-4), var(--inset-hi-dark);
}
.hero--meridian .calc-live.is-open .calc-live-inner {
  display: grid; gap: .42rem; height: auto;
  background: transparent; border: 0; border-radius: 0;
  padding: 1.15rem 1.35rem; box-shadow: none;
}
.hero--meridian .calc-live-tag {
  display: inline-flex; align-items: center; gap: .5rem; order: -1;
  font-family: var(--font-head); font-weight: 700; font-size: .7rem;
  letter-spacing: .1em; text-transform: uppercase; color: #6ee7b7; margin: 0;
}
.hero--meridian .calc-live-headline {
  display: flex; flex-direction: row; align-items: baseline; gap: .5rem;
  margin: 0; line-height: 1.05; order: 0;
}
.hero--meridian .calc-live-from { color: rgba(234,246,240,.6); font-size: .98rem; font-weight: 600; }
.hero--meridian .calc-live-amount {
  display: inline-block; color: #fff; font-weight: 800;
  font-size: clamp(2rem, 1.5rem + 1.6vw, 2.7rem); letter-spacing: -.02em;
}
.hero--meridian .calc-live-eta {
  order: 1; display: block; margin: 0; color: #a7f3d0; font-size: 1rem; font-weight: 600;
}
.hero--meridian .calc-live-eta .eta-label { display: inline; color: rgba(234,246,240,.62); font-weight: 500; font-size: 1rem; margin-right: .35rem; text-transform: none; letter-spacing: 0; }
.hero--meridian .calc-live-eta .eta-date { display: inline; color: #a7f3d0; font-weight: 700; font-size: 1rem; }
.hero--meridian .calc-live-meta { order: 2; margin: 0; color: rgba(234,246,240,.55); font-size: .84rem; }
.hero--meridian .calc-live-actions { order: 3; }

/* Console: 3 fields on row 1, full-width morphing CTA on row 2 (the
   "See all 4 services" label is too long to share the row → was crowding
   "United Arab Emirates" into the destination field). */
.hero--meridian .quote-bar { flex-wrap: wrap; row-gap: 8px; }
.hero--meridian .quote-bar .qb-field { padding: .7rem 1rem; }
.hero--meridian .quote-bar .qb-from { flex: 1.45 1 0; }
.hero--meridian .quote-bar .qb-to { flex: 1.25 1 0; }
.hero--meridian .quote-bar .qb-weight { flex: .8 1 0; border-right: 0; }
.hero--meridian .quote-bar .qb-from .qb-static { font-size: .92rem; }
.hero--meridian .quote-bar .qb-btn { flex: 1 0 100%; margin: 0; padding: .85rem; justify-content: center; white-space: nowrap; }

/* ===================================================================
   WAVE 10 — "BIGGEST, NOT GOOFIEST"
   White-on-BLACK (no navy-blue), authoritative & restrained. Scoped to the
   homepage via body.page-dark so shared components on other pages are
   untouched. Strips the playful motion (breathing CTA, sheen sweep, beacon
   pings, emerald glows) and recolours every surface to near-black with a
   single disciplined emerald accent.
   =================================================================== */
body.page-dark { background: #000; }

/* strip the playful motion + emerald glows */
body.page-dark .hero--meridian .quote-bar .qb-btn { animation: none !important; }
body.page-dark .eyebrow--live .live-dot::after,
body.page-dark .calc-live-tag .live-dot::after { display: none !important; }
body.page-dark .btn-primary::before,
body.page-dark .quote-bar .qb-btn::before,
body.page-dark .calc-live-book::before { display: none !important; }
body.page-dark .hero-stage::after { display: none; }
body.page-dark .site-header--solid .brand-mark { filter: none; }

/* header → black */
body.page-dark .site-header.site-header--solid { background: #0a0a0b; border-bottom: 1px solid rgba(255,255,255,.08); }
body.page-dark .header-util { background: #050505; border-bottom: 1px solid rgba(255,255,255,.06); }
body.page-dark .site-header--solid.is-scrolled { background: rgba(8,8,9,.9); border-bottom-color: rgba(255,255,255,.08); }

/* HERO → black */
body.page-dark .hero.hero--meridian {
  background: linear-gradient(180deg, #0c0c0e 0%, #070708 58%, #000 100%);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
body.page-dark .hero--meridian .hero-aurora {
  background: radial-gradient(42% 50% at 72% 42%, rgba(255,255,255,.05), transparent 70%);
  filter: blur(72px); animation: none;
}
body.page-dark .hero--meridian .hero-copy .eyebrow { color: rgba(255,255,255,.5); letter-spacing: .18em; }
body.page-dark .hero-sub { color: rgba(255,255,255,.64); }
body.page-dark .hero-secondary { color: rgba(255,255,255,.52); }
body.page-dark .hero-secondary a { color: #fff; }
body.page-dark .hero--meridian .calc-note { color: #f87171; }

/* console */
body.page-dark .hero--meridian .quote-bar {
  background: linear-gradient(180deg, #161618, #0f0f11); border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 24px 60px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.05);
}
body.page-dark .hero--meridian .quote-bar:focus-within { border-color: rgba(255,255,255,.22); box-shadow: 0 24px 60px rgba(0,0,0,.6), 0 0 0 2px rgba(16,185,129,.4); }
body.page-dark .hero--meridian .quote-bar .qb-field { border-right-color: rgba(255,255,255,.1); }
body.page-dark .hero--meridian .quote-bar .qb-field label { color: rgba(255,255,255,.48); }
body.page-dark .hero--meridian .quote-bar .qb-static,
body.page-dark .hero--meridian .quote-bar .qb-field input,
body.page-dark .hero--meridian .quote-bar .combo-input { color: #fff; }
body.page-dark .hero--meridian .quote-bar .combo-input::placeholder { color: rgba(255,255,255,.4); }
body.page-dark .hero--meridian .quote-bar .qb-to .to-icon,
body.page-dark .hero--meridian .quote-bar .qb-static .origin-lock { color: rgba(255,255,255,.42); }

/* live price panel */
body.page-dark .hero--meridian .calc-live.is-open { background: #121214; border: 1px solid rgba(255,255,255,.1); box-shadow: 0 24px 60px rgba(0,0,0,.55); }
body.page-dark .hero--meridian .calc-live-tag { color: var(--emerald-400); }
body.page-dark .hero--meridian .calc-live-amount { color: #fff; }
body.page-dark .hero--meridian .calc-live-from { color: rgba(255,255,255,.55); }
body.page-dark .hero--meridian .calc-live-eta { color: rgba(255,255,255,.85); }
body.page-dark .hero--meridian .calc-live-eta .eta-label { color: rgba(255,255,255,.55); }
body.page-dark .hero--meridian .calc-live-eta .eta-date { color: #fff; }
body.page-dark .hero--meridian .calc-live-meta { color: rgba(255,255,255,.5); }
body.page-dark .hero--meridian .calc-live-trust { color: rgba(255,255,255,.45); }

/* buttons: restrained emerald (no breath/sheen/big glow) */
body.page-dark .btn-primary, body.page-dark .quote-bar .qb-btn,
body.page-dark .vs-cta, body.page-dark .calc-live-book {
  background: linear-gradient(180deg, var(--emerald-500), var(--emerald-600));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 6px 18px rgba(0,0,0,.4);
}
body.page-dark .btn-primary:hover, body.page-dark .quote-bar .qb-btn:hover,
body.page-dark .vs-cta:hover, body.page-dark .calc-live-book:hover {
  filter: brightness(1.06); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 10px 26px rgba(16,185,129,.28);
}

/* trust-rail → black */
body.page-dark .trust-rail { background: #060607; border-top: 1px solid rgba(255,255,255,.07); border-bottom: 1px solid rgba(255,255,255,.07); }
body.page-dark .trust-cell strong { color: #fff; }
body.page-dark .trust-cell span { color: rgba(255,255,255,.58); }
body.page-dark .trust-ico { color: var(--emerald-400); }
body.page-dark .trust-rail-note { color: rgba(255,255,255,.4); }

/* routes → black, charcoal tiles, white amounts */
body.page-dark .routes-section { background: #000; border-bottom: 1px solid rgba(255,255,255,.07); }
body.page-dark .routes-section .route-tile { background: #121214; border: 1px solid rgba(255,255,255,.1); box-shadow: none; }
body.page-dark .routes-section .route-tile:hover { border-color: rgba(255,255,255,.26); box-shadow: 0 18px 40px rgba(0,0,0,.5); transform: translateY(-5px); }
body.page-dark .routes-section h2 { color: #fff; }
body.page-dark .routes-section .section-head p { color: rgba(255,255,255,.64); }
body.page-dark .routes-section .eyebrow { color: rgba(255,255,255,.5); }
body.page-dark .route-name { color: #fff; }
body.page-dark .route-price { color: rgba(255,255,255,.55); }
body.page-dark .route-price strong { color: #fff; }
body.page-dark .route-arrow { color: var(--emerald-400); }
body.page-dark .route-eta, body.page-dark .route-ladder { color: rgba(255,255,255,.6); }
body.page-dark .routes-note { color: rgba(255,255,255,.42); }
body.page-dark .routes-tail { color: rgba(255,255,255,.6); }
body.page-dark .routes-tail a, body.page-dark .route-fallback { color: var(--emerald-400); }

/* vs → dark (revert the light flip) */
body.page-dark .vs-section { background: linear-gradient(180deg, #060607, #000); color: #fff; }
body.page-dark .vs-section h2 { color: #fff; }
body.page-dark .vs-section .eyebrow { color: rgba(255,255,255,.5); }
body.page-dark .vs-section .section-head p { color: rgba(255,255,255,.64); }
body.page-dark .vs-card--plain { background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.08); box-shadow: none; }
body.page-dark .vs-card--plain .vs-card-title { color: rgba(255,255,255,.6); }
body.page-dark .vs-card--plain .vs-rows li { color: rgba(255,255,255,.5); }
body.page-dark .vs-card--plain .vs-mark--no { border: 1.5px dashed rgba(255,255,255,.28); }
body.page-dark .vs-card--plain .vs-mark--no::before { background: rgba(255,255,255,.4); }
body.page-dark .vs-card--alf { background: linear-gradient(165deg, rgba(16,185,129,.1), rgba(16,185,129,.02)); border: 1px solid rgba(16,185,129,.45); box-shadow: 0 0 40px rgba(16,185,129,.1); }
body.page-dark .vs-card--alf .vs-card-title { color: #fff; }
body.page-dark .vs-card--alf .vs-rows li { color: rgba(255,255,255,.9); }
body.page-dark .vs-card--alf .vs-rows em { color: var(--emerald-400); }
body.page-dark .vs-helper { color: rgba(255,255,255,.5); }

/* shipx → dark */
body.page-dark .shipx { background: #060607; }
body.page-dark .shipx-eyebrow { color: var(--emerald-400); background: rgba(16,185,129,.12); }
body.page-dark .shipx-title { color: #fff; }
body.page-dark .shipx-player { background: linear-gradient(180deg, #121214, #0d0d0f); border: 1px solid rgba(255,255,255,.1); box-shadow: 0 14px 34px rgba(0,0,0,.5); }
body.page-dark .shipx-stept strong { color: #fff; }
body.page-dark .shipx-stept span { color: rgba(255,255,255,.6); }
body.page-dark .shipx-stepn { background: rgba(16,185,129,.16); color: var(--emerald-400); }

/* can-i-ship → dark */
body.page-dark #can-i-ship { background: #000; }
body.page-dark #can-i-ship h2 { color: #fff; }
body.page-dark #can-i-ship .section-head p { color: rgba(255,255,255,.64); }
body.page-dark #can-i-ship .eyebrow { color: rgba(255,255,255,.5); }
body.page-dark .checker-guarantee { background: rgba(16,185,129,.1); border: 1px solid rgba(16,185,129,.28); }
body.page-dark .checker-guarantee p { color: #a7f3d0; }
body.page-dark .checker-guarantee .cg-ico { color: var(--emerald-400); }
body.page-dark .ship-check { background: #121214; border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius); padding: 1.2rem; }
body.page-dark .ship-check-bar { background: #0c0c0e; border: 1px solid rgba(255,255,255,.12); }
body.page-dark .ship-check-bar:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(16,185,129,.25); }
body.page-dark .ship-check-input { color: #fff; }
body.page-dark .ship-check-input::placeholder { color: rgba(255,255,255,.4); }
body.page-dark .ship-check-ico { color: var(--emerald-400); }
body.page-dark .ship-suggest-label { color: rgba(255,255,255,.5); }
body.page-dark .ship-check-note { color: rgba(255,255,255,.5); }
body.page-dark .ship-check-note a { color: var(--emerald-400); }
/* dark suggestion chips */
body.page-dark .ship-chip { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); color: rgba(255,255,255,.86); }
body.page-dark .ship-chip:hover { border-color: var(--accent); background: rgba(16,185,129,.14); }
/* readable verdict result cards on black */
body.page-dark .ship-verdict { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12); }
body.page-dark .ship-verdict-name { color: #fff; }
body.page-dark .ship-verdict-note { color: rgba(255,255,255,.66); }
body.page-dark .ship-verdict.allowed { background: rgba(26,169,116,.12); border-color: rgba(26,169,116,.4); }
body.page-dark .ship-verdict.allowed .ship-verdict-ico { color: var(--emerald-400); }
body.page-dark .ship-verdict.allowed .ship-verdict-status { color: var(--emerald-400); }
body.page-dark .ship-verdict.restricted { background: rgba(245,158,11,.14); border-color: rgba(245,158,11,.45); }
body.page-dark .ship-verdict.restricted .ship-verdict-ico { color: #fbbf24; }
body.page-dark .ship-verdict.restricted .ship-verdict-status { color: #fbbf24; }
body.page-dark .ship-verdict.prohibited { background: rgba(214,69,61,.14); border-color: rgba(214,69,61,.45); }
body.page-dark .ship-verdict.prohibited .ship-verdict-ico { color: #f87171; }
body.page-dark .ship-verdict.prohibited .ship-verdict-status { color: #f87171; }

/* faq → dark */
body.page-dark #faq.section-soft { background: #060607; }
body.page-dark #faq h2 { color: #fff; }
body.page-dark #faq .section-head p { color: rgba(255,255,255,.64); }
body.page-dark #faq .section-head p a { color: var(--emerald-400); }
body.page-dark #faq .eyebrow { color: rgba(255,255,255,.5); }
body.page-dark .faq-item { background: #121214; border: 1px solid rgba(255,255,255,.1); }
body.page-dark .faq-item summary { color: #fff; }
body.page-dark .faq-item[open] summary { color: var(--emerald-400); }
body.page-dark .faq-body { color: rgba(255,255,255,.66); }
body.page-dark .faq-body a { color: var(--emerald-400); }

/* cta-band → pure black */
body.page-dark .cta-band { background: #000; }
body.page-dark .cta-band::after { opacity: .45; }
body.page-dark .cta-band h2 { color: #fff; }
body.page-dark .cta-band p { color: rgba(255,255,255,.7); }

/* footer → black */
body.page-dark .site-footer { background: #0a0a0b; }

/* ===================================================================
   WAVE 11 — WHITE THEME (owner: "prefer white background instead of black")
   Clean white-on-light, still serious/restrained, emerald as the single
   accent. Scoped to body.page-light. Overrides the dark hero/console/panel
   from WAVE 9 and re-strips the playful motion (the dark page-dark rules in
   WAVE 10 go inert once the body class is page-light).
   =================================================================== */
body.page-light { background: #fff; }

/* re-strip the goofy motion on the light theme too */
body.page-light .hero--meridian .quote-bar .qb-btn { animation: none !important; }
body.page-light .eyebrow--live .live-dot::after,
body.page-light .calc-live-tag .live-dot::after { display: none !important; }
body.page-light .btn-primary::before,
body.page-light .quote-bar .qb-btn::before,
body.page-light .calc-live-book::before { display: none !important; }

/* header → white */
body.page-light .site-header.site-header--solid { background: #fff; border-bottom: 1px solid var(--line); }
body.page-light .site-header--solid.is-scrolled { background: rgba(255,255,255,.9); border-bottom-color: var(--line); }
body.page-light .site-header--solid .brand-name { color: var(--ink); }
body.page-light .site-header--solid .brand-mark { color: var(--accent); filter: none; }
body.page-light .header-util { background: #f6f8fb; border-bottom: 1px solid var(--line); }
body.page-light .hu-tag { color: var(--slate-muted); }
body.page-light .hu-tag svg { color: var(--accent); }
body.page-light .hu-link { color: var(--slate); }
body.page-light .hu-link:hover { color: var(--ink); }
body.page-light .hu-divider { background: var(--line); }
body.page-light .hu-currency select { color: var(--ink); border-color: var(--line); }
body.page-light .hu-currency select option { color: var(--ink); }
body.page-light .hu-currency .cs-ic { color: var(--slate-light); }
body.page-light .site-header--solid .main-nav a:not(.nav-cta):not(.nav-track) { color: var(--slate); }
body.page-light .site-header--solid .main-nav a:not(.nav-cta):not(.nav-track):hover { background: var(--bg-soft); color: var(--ink); }
body.page-light .site-header--solid .main-nav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent-dark); }
body.page-light .header-track { background: #f1f4f8; border: 1px solid var(--line); }
body.page-light .ht-input { color: var(--ink); }
body.page-light .ht-input::placeholder { color: var(--slate-light); }
body.page-light .ht-ico { color: var(--slate-light); }
body.page-light .site-header--solid .nav-toggle span { background: var(--ink); }
@media (max-width: 860px) {
  body.page-light .site-header--solid .main-nav { background: #fff; border-bottom-color: var(--line); }
  body.page-light .site-header--solid .main-nav a { color: var(--slate); border-bottom-color: var(--line); }
  body.page-light .site-header--solid .main-nav .drawer-only { color: var(--slate); }
}

/* HERO → white */
body.page-light .hero.hero--meridian {
  background: linear-gradient(180deg, #ffffff 0%, #f6f9fb 100%);
  border-bottom: 1px solid var(--line);
}
body.page-light .hero--meridian .hero-aurora {
  background: radial-gradient(42% 50% at 74% 40%, rgba(16,159,110,.07), transparent 70%);
  filter: blur(70px); animation: none;
}
body.page-light .hero.hero--meridian::after { opacity: .03; }
body.page-light .hero-stage::after { display: block; background: radial-gradient(closest-side, rgba(16,159,110,.16), transparent 72%); }
body.page-light .hero--meridian .hero-copy .eyebrow { color: var(--accent-dark); letter-spacing: .16em; }
body.page-light .hero-title { color: var(--ink); }
body.page-light .hero-sub { color: var(--slate); }
body.page-light .hero-secondary { color: var(--slate-muted); }
body.page-light .hero-secondary a { color: var(--accent-dark); }
body.page-light .hero--meridian .calc-note { color: var(--danger); }

/* console → white card */
body.page-light .hero--meridian .quote-bar {
  background: #fff; border: 1px solid var(--line);
  box-shadow: 0 18px 50px rgba(15,25,35,.12), inset 0 1px 0 #fff;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
body.page-light .hero--meridian .quote-bar:focus-within { border-color: var(--accent); box-shadow: 0 18px 50px rgba(15,25,35,.12), var(--ring); }
body.page-light .hero--meridian .quote-bar .qb-field { border-right-color: var(--line); }
body.page-light .hero--meridian .quote-bar .qb-field label { color: var(--slate-muted); }
body.page-light .hero--meridian .quote-bar .qb-static,
body.page-light .hero--meridian .quote-bar .qb-field input,
body.page-light .hero--meridian .quote-bar .combo-input { color: var(--ink); }
body.page-light .hero--meridian .quote-bar .combo-input::placeholder { color: var(--slate-light); }
body.page-light .hero--meridian .quote-bar .qb-to .to-icon,
body.page-light .hero--meridian .quote-bar .qb-static .origin-lock { color: var(--slate-light); }

/* live price panel → light */
body.page-light .hero--meridian .calc-live.is-open { background: #f6f9fc; border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(15,25,35,.08); }
body.page-light .hero--meridian .calc-live-tag { color: var(--accent-dark); }
body.page-light .hero--meridian .calc-live-amount { color: var(--ink); }
body.page-light .hero--meridian .calc-live-from { color: var(--slate); }
body.page-light .hero--meridian .calc-live-eta { color: var(--accent-dark); }
body.page-light .hero--meridian .calc-live-eta .eta-label { color: var(--slate); }
body.page-light .hero--meridian .calc-live-eta .eta-date { color: var(--ink); }
body.page-light .hero--meridian .calc-live-meta { color: var(--slate-muted); }
body.page-light .hero--meridian .calc-live-trust { color: var(--slate-muted); }

/* buttons stay emerald (great on white); restrained shadow */
body.page-light .btn-primary, body.page-light .quote-bar .qb-btn,
body.page-light .vs-cta, body.page-light .calc-live-book {
  background: linear-gradient(180deg, var(--emerald-500), var(--emerald-600));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 8px 20px rgba(14,159,110,.22);
}
body.page-light .btn-primary:hover, body.page-light .quote-bar .qb-btn:hover,
body.page-light .vs-cta:hover, body.page-light .calc-live-book:hover {
  filter: brightness(1.04); box-shadow: inset 0 1px 0 rgba(255,255,255,.34), 0 12px 28px rgba(14,159,110,.32);
}

/* trust-rail → light */
body.page-light .trust-rail { background: #f6f8fb; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
body.page-light .trust-cell strong { color: var(--ink); }
body.page-light .trust-cell span { color: var(--slate); }
body.page-light .trust-ico { color: var(--accent); }
body.page-light .trust-rail-note { color: var(--slate-muted); }

/* routes → white cards */
body.page-light .routes-section { background: #fff; border-bottom: 1px solid var(--line); }
body.page-light .routes-section h2 { color: var(--ink); }
body.page-light .routes-section .section-head p { color: var(--slate); }
body.page-light .routes-section .eyebrow { color: var(--accent-dark); }
body.page-light .routes-section .route-tile { background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-2); }
body.page-light .routes-section .route-tile:hover { border-color: var(--accent); box-shadow: var(--sh-3); transform: translateY(-4px); }
body.page-light .route-name { color: var(--ink); }
body.page-light .route-price { color: var(--slate); }
body.page-light .route-price strong { color: var(--ink); }
body.page-light .route-arrow { color: var(--accent); }
body.page-light .route-eta { color: var(--slate-muted); }
body.page-light .route-ladder { color: var(--slate-muted); border-top-color: var(--line); }
body.page-light .routes-note { color: var(--slate-muted); }
body.page-light .routes-tail { color: var(--slate); }
body.page-light .routes-tail a, body.page-light .route-fallback { color: var(--accent-dark); }
body.page-light .routes-section .currency-label { color: var(--slate-muted); }
body.page-light .routes-section .currency-switch select { background: #fff; border-color: var(--line); color: var(--ink); }
body.page-light .routes-section .currency-switch select option { color: var(--ink); }
body.page-light .routes-section .currency-switch .cs-ic { color: var(--slate-light); }
body.page-light .routes-section .aed-billed-note { color: var(--accent-dark); }
body.page-light .route-aed { color: var(--slate-muted); }

/* vs → light (matches WAVE 9 flip; restated for safety) */
body.page-light .vs-section { background: linear-gradient(165deg, #f6f8fb 0%, #fff 72%); color: var(--ink); }
body.page-light .vs-section h2 { color: var(--navy-800); }
body.page-light .vs-section .eyebrow { color: var(--accent-dark); }
body.page-light .vs-section .section-head p { color: var(--slate); }
body.page-light .vs-card--plain { background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-1); }
body.page-light .vs-card--plain .vs-card-title { color: var(--slate); }
body.page-light .vs-card--plain .vs-rows li { color: var(--slate); }
body.page-light .vs-card--plain .vs-mark--no { border: 1.5px dashed #cbd5e1; }
body.page-light .vs-card--plain .vs-mark--no::before { background: #94a3b8; }
body.page-light .vs-card--alf { background: linear-gradient(165deg, #f0fbf6, #fff); border: 1px solid rgba(16,159,110,.4); box-shadow: var(--sh-3), 0 0 40px rgba(16,185,129,.1); }
body.page-light .vs-card--alf .vs-card-title { color: var(--navy-800); }
body.page-light .vs-card--alf .vs-rows li { color: var(--ink); }
body.page-light .vs-card--alf .vs-rows em { color: var(--accent-dark); }
body.page-light .vs-card--alf .vs-mark--yes { background: var(--accent); color: #fff; }
body.page-light .vs-helper { color: var(--slate-muted); }

/* cta-band → light */
body.page-light .cta-band { background: #f6f8fb; border-top: 1px solid var(--line); }
body.page-light .cta-band::after { display: none; }
body.page-light .cta-band h2 { color: var(--ink); }
body.page-light .cta-band p { color: var(--slate); }
body.page-light .cta-microline { color: var(--slate-muted); }
body.page-light .cta-quietlink { color: var(--slate-muted); }
body.page-light .cta-quietlink:hover { color: var(--accent-dark); }

/* footer → light */
body.page-light .site-footer { background: #f6f8fb; color: var(--slate); border-top: 1px solid var(--line); }
body.page-light .footer-brand .brand-name { color: var(--ink); }
body.page-light .footer-brand .brand-mark { color: var(--accent); }
body.page-light .footer-brand p { color: var(--slate); }
body.page-light .footer-col h4 { color: var(--ink); }
body.page-light .footer-col a, body.page-light .footer-col span { color: var(--slate); }
body.page-light .footer-col a:hover { color: var(--accent-dark); }
body.page-light .footer-grid { border-bottom-color: var(--line); }
body.page-light .footer-bottom, body.page-light .footer-bottom span { color: var(--slate-muted); }
body.page-light .footer-legal a { color: var(--slate); }
body.page-light .footer-legal a:hover { color: var(--accent-dark); }
body.page-light .tm-note { color: var(--slate-muted); }

/* ===================================================================
   WAVE 12 — CENTERED HERO (owner: "calculator again in the middle, globe
   behind in the image"). Reverts the 2-column split → centered column with
   the living globe as a full-bleed backdrop behind the content.
   =================================================================== */
.hero.hero--meridian { padding-top: clamp(2.5rem, 3.5vw, 4rem); padding-bottom: clamp(2.5rem, 3.5vw, 4rem); }
.hero--meridian .hero-inner {
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  width: min(100% - 3rem, 1120px); gap: 1.3rem; min-height: clamp(640px, 72vh, 760px);
}
.hero--meridian .hero-copy { max-width: 1100px; margin: 0 auto; text-align: center; position: relative; z-index: 2; }
.hero--meridian .hero-copy .eyebrow { justify-content: center; }
.hero--meridian .hero-title { max-width: 22ch; margin-inline: auto; text-wrap: balance; }
.hero--meridian .hero-sub { max-width: 52ch; margin-inline: auto; text-wrap: balance; }
.hero--meridian .calc-note { text-align: center; }

/* calculator: single row, centered, comfortably wide */
.hero--meridian .quote-bar {
  flex-wrap: nowrap; max-width: 900px; margin: 1.6rem auto 0; justify-self: center;
}
.hero--meridian .quote-bar .qb-btn { flex: none; width: auto; margin: 0 0 0 8px; padding: 0 1.75rem; }
.hero--meridian .calc-live { max-width: 720px; margin: 1.05rem auto 0; justify-self: center; }
.hero--meridian .hero-secondary { max-width: 900px; margin-left: auto; margin-right: auto; justify-self: center; }

/* globe → full-bleed backdrop, behind the centered content */
.hero-stage {
  position: absolute; inset: 0; z-index: 0; width: 100%; max-width: none;
  aspect-ratio: auto; margin: 0; pointer-events: none; overflow: hidden;   /* clip so the globe never bleeds into the next section */
}
.hero-stage::after { display: none; }
.hero.hero--meridian .hero-globe {
  position: absolute; left: 50%; top: 50%; right: auto; bottom: auto;
  transform: translate(-50%, -50%);                /* centred */
  /* size from the hero HEIGHT (88% of the stage) so the whole sphere always
     fits inside the hero — no right/bottom clipping — while staying big & bold */
  height: min(600px, 88%); width: auto; max-width: none; aspect-ratio: 1 / 1;
  opacity: .82; pointer-events: none;
  animation: none;   /* the heroGlobeIn scale keyframe was clobbering translate(-50%,-50%) → globe hung off-centre & got clipped */
  -webkit-mask-image: radial-gradient(closest-side, #000 90%, transparent 100%);
          mask-image: radial-gradient(closest-side, #000 90%, transparent 100%);
}

/* real country flags (flagcdn) — small rounded chip with a hairline edge */
.flag-img {
  width: 22px; height: 16px; border-radius: 3px; object-fit: cover; flex: none;
  display: inline-block; vertical-align: middle; box-shadow: 0 0 0 1px rgba(15, 25, 35, .12);
}
.qb-static .flag-img { margin-right: .08rem; }
.qb-to .to-flag { display: inline-flex; }
.combo-flag .flag-img { width: 24px; height: 17px; }
.route-flag .flag-img { width: 30px; height: 22px; border-radius: 4px; }
@media (max-width: 900px) {
  .hero--meridian .quote-bar { flex-wrap: wrap; }
  .hero--meridian .quote-bar .qb-btn { flex: 1 0 100%; width: auto; margin: 8px 0 0; padding: .85rem; }
}
@media (max-width: 760px) {
  .hero.hero--meridian .hero-globe { width: 116%; left: 50%; right: auto; opacity: .4; }
}

/* ===================================================================
   WAVE 13 — sleeker & wider hero (owner: "too chunky, make it smaller and
   wider"), + the Dimensions field (owner: "why is there no dimension").
   =================================================================== */
/* headline + sub: smaller, wider, lighter */
.hero--meridian .hero-title {
  font-size: clamp(2rem, 1.45rem + 1.9vw, 3.15rem);
  line-height: 1.06; letter-spacing: -.03em; font-weight: 800; max-width: 26ch;
}
.hero--meridian .hero-sub {
  font-size: clamp(.96rem, .92rem + .2vw, 1.06rem); line-height: 1.55; max-width: 58ch;
}

/* calculator: sleeker (thinner) + wider, with generous space between fields */
.hero--meridian .quote-bar { max-width: 1080px; padding: 8px; border-radius: 16px; }
.hero--meridian .quote-bar .qb-field { padding: .55rem 1.25rem; }
.hero--meridian .quote-bar .qb-field label { font-size: .6rem; letter-spacing: .07em; margin: 0 0 1px; white-space: nowrap; }
.hero--meridian .quote-bar .qb-static,
.hero--meridian .quote-bar .qb-field input,
.hero--meridian .quote-bar .combo-input { font-size: .92rem; }
.hero--meridian .quote-bar .qb-from { flex: 1.6 1 0; }
.hero--meridian .quote-bar .qb-to { flex: 1.2 1 0; }
.hero--meridian .quote-bar .qb-weight { flex: .62 1 0; }
.hero--meridian .quote-bar .qb-dims { flex: 1.15 1 0; border-right: 0; }
.hero--meridian .quote-bar .qb-from .qb-static { white-space: nowrap; }
/* lock sits tight after the country name, not pushed to (and over) the divider */
.hero--meridian .quote-bar .qb-from .origin-lock { margin-left: 0; }
.hero--meridian .quote-bar .qb-dims { flex: 1 1 0; border-right: 0; }
.hero--meridian .quote-bar .qb-btn { padding: 0 1.4rem; font-size: .92rem; }

/* dimensions field — three compact inputs L × W × H */
.qb-dims .qb-dims-row { display: flex; align-items: center; gap: .28rem; }
.qb-dims .qb-dims-row input {
  width: 2.5rem; min-width: 0; text-align: center; padding: 0 !important;
  -moz-appearance: textfield;
}
.qb-dims .qb-dims-row input::-webkit-outer-spin-button,
.qb-dims .qb-dims-row input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qb-dims-x { color: var(--slate-light); font-size: .82rem; line-height: 1; flex: none; }

/* volumetric-weight feedback line under the calc */
.dim-feedback { margin: .65rem auto 0; max-width: 1060px; display: flex; align-items: center; justify-content: center; gap: .6rem; font-size: .82rem; }
.dim-feedback[hidden] { display: none; }
.dim-feedback .dimfb-text { color: var(--slate); }
.dim-feedback .dimfb-tag { font-weight: 700; font-size: .68rem; letter-spacing: .04em; text-transform: uppercase; padding: .18rem .55rem; border-radius: 999px; }
.dim-feedback .dimfb-tag.is-standard { color: var(--accent-dark); background: var(--accent-soft); }
.dim-feedback .dimfb-tag.is-oversized { color: var(--warn); background: rgba(245,158,11,.14); }
.dim-feedback.is-partial .dimfb-text { color: var(--slate-muted); }

/* price panel: SLIM single row — "From AED X · Delivered by <date>" on the
   left, one button on the right. The jargon meta (chargeable/Zone) and the
   verbose trust line are HIDDEN in the hero (they live on the rates page) so
   the teaser stays clean, clear and smooth. */
.hero--meridian .calc-live { max-width: 1060px; }
.hero--meridian .calc-live-tag,
.hero--meridian .calc-live-meta,
.hero--meridian .calc-live-trust { display: none; }
.hero--meridian .calc-live.is-open .calc-live-inner {
  display: flex; flex-direction: row; align-items: center; flex-wrap: wrap;
  gap: .2rem 1.1rem; padding: .38rem .55rem .38rem 1.25rem; min-height: 0; height: auto;
}
.hero--meridian .calc-live-headline { align-items: baseline; gap: .4rem; }
.hero--meridian .calc-live-from { font-size: .9rem; }
.hero--meridian .calc-live-amount { font-size: clamp(1.3rem, 1.15rem + .5vw, 1.5rem); }
.hero--meridian .calc-live-eta { font-size: .94rem; display: flex; flex-direction: row; align-items: baseline; gap: .32rem; }
.hero--meridian .calc-live-eta .eta-label { font-weight: 500; }
.hero--meridian .calc-live-eta::before { content: "·"; color: var(--slate-light); }
.hero--meridian .calc-live-actions { margin: 0 0 0 auto; flex-direction: row; align-items: center; gap: 0; }
.hero--meridian .calc-live-book { padding: .48rem 1rem; font-size: .88rem; }
@media (max-width: 680px) {
  .hero--meridian .calc-live.is-open .calc-live-inner { padding: .7rem .85rem; }
  .hero--meridian .calc-live-eta::before { content: ""; }
  .hero--meridian .calc-live-actions { margin: .35rem 0 0; width: 100%; }
  .hero--meridian .calc-live-book { width: 100%; justify-content: center; }
  .qb-dims .qb-dims-row input { width: 100%; }
}

/* consolidated reduced-motion guard — MUST stay last */
@media (prefers-reduced-motion: reduce) {
  .btn-primary::before, .quote-bar .qb-btn::before, .calc-live-book::before { display: none; }
  .eyebrow--live .live-dot::after, .calc-live-tag .live-dot::after { animation: none; }
  .hero.hero--meridian .hero-globe { animation: none; }
}

/* ============================================================================
   WHITE THEME — SECONDARY PAGES (append to styles.css, after WAVE 11)
   Every rule scoped under body.page-light so the homepage is never touched.
   Re-themes page-specific dark components to match the white homepage.
   Tokens verified against :root — shadows are --shadow-1/2/3 (NOT --sh-*).
   ============================================================================ */

/* ----------------------------------------------------------------------------
   SHARED — dark hero banners + breadcrumbs (used by rates / checkout / track /
   quote / freight / bulk / privacy / terms). Declared ONCE here.
   ---------------------------------------------------------------------------- */

/* .page-hero banner: navy gradient -> clean light surface */
body.page-light .page-hero {
  background: var(--bg-soft);                 /* #f6f8fb */
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}
body.page-light .page-hero .eyebrow { color: var(--accent-dark); }   /* AA emerald */
body.page-light .page-hero h1 { color: var(--ink); }
body.page-light .page-hero p { color: var(--slate); }
body.page-light .page-hero p strong { color: var(--ink); }
body.page-light .page-hero p a { color: var(--accent-dark); font-weight: 600; }
body.page-light .page-hero p a:hover { text-decoration: underline; }
body.page-light .page-hero-meta { color: var(--slate-muted) !important; }

/* .crumbs breadcrumb on the light .page-hero */
body.page-light .crumbs { color: var(--slate-muted); }
body.page-light .crumbs a { color: var(--slate); }
body.page-light .crumbs a:hover { color: var(--accent-dark); }
body.page-light .crumbs span { color: var(--slate-light); }

/* .route-hero banner (freight.html + bulk.html): navy -> light */
body.page-light .route-hero {
  background: var(--bg-soft);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}
body.page-light .route-hero .eyebrow { color: var(--accent-dark); }
body.page-light .route-hero h1 { color: var(--ink); }
body.page-light .route-hero .route-lead { color: var(--slate); }
body.page-light .route-hero .route-lead strong { color: var(--ink); }

/* .crumb breadcrumb inside .route-hero */
body.page-light .route-hero .crumb { color: var(--slate-muted); }
body.page-light .route-hero .crumb a { color: var(--slate); }
body.page-light .route-hero .crumb a:hover { color: var(--accent-dark); }

/* route-hero stat row: hairline divider + light text */
body.page-light .route-stats { border-top: 1px solid var(--line); }
body.page-light .rstat-v { color: var(--ink); }
body.page-light .rstat-l { color: var(--slate-muted); }

/* Ghost CTAs sit inside the now-light heroes. .btn-ghost is built for navy
   (translucent white) -> must read as a white outline button on light. */
body.page-light .page-hero .btn-ghost,
body.page-light .route-hero .btn-ghost,
body.page-light .confirm-actions .btn-ghost,
body.page-light .confirm-actions .btn-ghost.btn-dark {
  background: #fff;
  color: var(--navy-800);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-xs);
}
body.page-light .page-hero .btn-ghost:hover,
body.page-light .route-hero .btn-ghost:hover,
body.page-light .confirm-actions .btn-ghost:hover,
body.page-light .confirm-actions .btn-ghost.btn-dark:hover {
  background: var(--bg-soft);
  border-color: var(--accent);
  color: var(--navy-800);
}

/* ----------------------------------------------------------------------------
   RATES (rates.html)
   ---------------------------------------------------------------------------- */

/* Inline calculator card in the hero: kill WAVE 9's heavy dark shadow +
   invisible white border; restyle as a clean white panel. Scoped through
   .page-hero so the homepage's .hero .calc-card chain is never touched. */
body.page-light .page-hero .calc-card.calc-card-inline {
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-2);
}
body.page-light .page-hero .calc-card-inline label,
body.page-light .page-hero .calc-card-inline .calc-field label { color: var(--navy-800); }
body.page-light .page-hero .calc-card-inline .calc-field .opt { color: var(--slate-light); }
body.page-light .page-hero .calc-card-inline .calc-field input {
  background: #fff; color: var(--ink); border: 1.5px solid var(--line);
}
body.page-light .page-hero .calc-card-inline .calc-field input::placeholder { color: var(--slate-light); }
body.page-light .page-hero .calc-card-inline .calc-field input:focus {
  border-color: var(--accent); box-shadow: var(--ring);
}
body.page-light .page-hero .calc-card-inline .calc-origin {
  background: var(--bg-soft); border: 1px solid var(--line); color: var(--ink);
}
body.page-light .page-hero .calc-card-inline .calc-origin svg { color: var(--accent-dark); }
body.page-light .page-hero .calc-card-inline .dim-x { color: var(--slate-light); }
body.page-light .page-hero .calc-card-inline .combo-list {
  background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-3);
}
body.page-light .page-hero .calc-card-inline .combo-input { color: var(--ink); }
body.page-light .page-hero .calc-card-inline .combo-input::placeholder { color: var(--slate-light); }

/* Rates hero: Jumingo-style navy header band (scoped to the rates page only).
   Two classes on the section out-specify the generic light .page-hero rules.
   Kept COMPACT (owner: "too chunky and big") — tight padding, smaller title + fields. */
body.page-light .page-hero.page-hero--rates {
  background:
    radial-gradient(900px 300px at 85% -30%, rgba(14, 159, 110, .26), transparent 60%),
    linear-gradient(160deg, var(--navy-900), var(--navy-800) 60%, var(--navy-700));
  color: #fff;
  border-bottom: none;
  padding: 1.6rem 0 1.5rem;
}
.page-hero--rates .crumbs { margin-bottom: .5rem; font-size: .78rem; }
body.page-light .page-hero.page-hero--rates .eyebrow { color: var(--accent); font-size: .7rem; margin-bottom: .15rem; }
body.page-light .page-hero.page-hero--rates h1 {
  color: #fff; font-size: clamp(1.5rem, 2.6vw, 2rem); letter-spacing: -.01em; margin: .1rem 0 0;
}
body.page-light .page-hero.page-hero--rates p { color: rgba(255, 255, 255, .8); font-size: .86rem; margin-top: .3rem; }
body.page-light .page-hero.page-hero--rates p strong { color: #fff; }
body.page-light .page-hero.page-hero--rates .crumbs { color: rgba(255, 255, 255, .66); }
body.page-light .page-hero.page-hero--rates .crumbs a { color: rgba(255, 255, 255, .85); }
body.page-light .page-hero.page-hero--rates .crumbs a:hover { color: #fff; }
body.page-light .page-hero.page-hero--rates .crumbs span { color: rgba(255, 255, 255, .5); }
/* White search card pops on the navy, with a restrained emerald outline (Jumingo's bar = orange; ours = brand emerald) — compact padding + slimmer fields */
body.page-light .page-hero.page-hero--rates .calc-card.calc-card-inline {
  border: 1px solid rgba(14, 159, 110, .4);
  box-shadow: 0 18px 44px rgba(3, 12, 24, .4);
  padding: 1rem 1.1rem; margin-top: 1rem;
}
body.page-light .page-hero.page-hero--rates .calc-card-inline .calc-field { margin-bottom: .5rem; }
body.page-light .page-hero.page-hero--rates .calc-card-inline .calc-field label { font-size: .72rem; margin-bottom: .22rem; }
body.page-light .page-hero.page-hero--rates .calc-card-inline .calc-field select,
body.page-light .page-hero.page-hero--rates .calc-card-inline .calc-field input,
body.page-light .page-hero.page-hero--rates .calc-card-inline .calc-origin {
  min-height: 40px; padding: .48rem .7rem; font-size: .9rem;
}
/* Center the weight value, like the dimension inputs */
body.page-light .page-hero.page-hero--rates .calc-card-inline #calc-weight { text-align: center; }
body.page-light .page-hero.page-hero--rates .calc-card-inline .calc-actions { margin-top: .15rem; }
body.page-light .page-hero.page-hero--rates .calc-card-inline .btn { min-height: 40px; padding: .5rem 1.3rem; }
/* Auto-update hint (replaces the manual "Update price" button) */
.calc-actions--auto { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.calc-autohint {
  display: inline-flex; align-items: center; gap: .4rem;
  margin: 0; color: var(--slate-muted); font-size: .8rem; font-weight: 500;
}
.calc-autohint svg { color: var(--accent-dark); flex: none; }
.calc-actions--auto .calc-note { margin: 0; min-height: 0; }
/* All four fields on ONE line (a later generic `.calc-row{1fr 1fr}` was forcing 2×2).
   Destination/Size get more room than Weight; collapses gracefully on smaller screens. */
body.page-light .page-hero.page-hero--rates .calc-card-inline .calc-row-4 {
  grid-template-columns: 1fr 1.2fr .72fr 1.32fr; gap: .7rem;
}
@media (max-width: 880px) {
  body.page-light .page-hero.page-hero--rates .calc-card-inline .calc-row-4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  body.page-light .page-hero.page-hero--rates .calc-card-inline .calc-row-4 { grid-template-columns: 1fr; }
}

/* Currency switch row above the results */
body.page-light .routes-controls--rates .currency-label { color: var(--slate-muted); }
body.page-light .routes-controls--rates .currency-switch select {
  background: #fff; border-color: var(--line); color: var(--ink);
}
body.page-light .routes-controls--rates .currency-switch select option { color: var(--ink); }
body.page-light .routes-controls--rates .currency-switch select:hover { border-color: var(--accent); }
body.page-light .routes-controls--rates .currency-switch .cs-ic { color: var(--slate-light); }
body.page-light .routes-controls--rates .aed-billed-note { color: var(--accent-dark); }

/* Rate summary line (route + meta + "New search") */
body.page-light .rate-route { color: var(--ink); }
body.page-light .rate-route .arrow { color: var(--accent-dark); }
body.page-light .rate-meta { color: var(--slate); }
body.page-light .rate-meta strong { color: var(--ink); }
body.page-light .rate-summary-actions .link-btn { color: var(--accent-dark); }

/* Rate cards: white surface, hairline border, soft shadow.
   (Base keeps transform on hover — only restate surface/shadow here.) */
body.page-light .rate-card {
  background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-1);
}
body.page-light .rate-card:hover { box-shadow: var(--shadow-3); border-color: var(--line); }
body.page-light .rate-card.is-featured {
  border-color: var(--accent);
  box-shadow: var(--shadow-2), inset 0 2px 0 var(--accent);
}
body.page-light .rate-carrier.dhl { color: #d40511; }       /* keep DHL brand red */
body.page-light .rate-service { color: var(--slate); }
body.page-light .rate-eta { color: var(--ink); }
body.page-light .rate-eta small,
body.page-light .rate-price small { color: var(--slate-muted); }
body.page-light .rate-price,
body.page-light .rate-amount { color: var(--ink); }
body.page-light .rate-delta { color: var(--slate-muted); }
body.page-light .rate-delta-best { color: var(--accent-dark); }
body.page-light .rbadge-cheap { color: var(--accent-dark); background: var(--accent-soft); }
body.page-light .rbadge-fast { color: var(--accent-dark); background: rgba(14, 159, 110, .14); }
body.page-light .rates-fine { color: var(--slate-muted); }
body.page-light .rates-fine strong { color: var(--slate); }

/* Results bar + collection→delivery journey on the white theme */
body.page-light .rate-resultbar { border-bottom-color: var(--line); }
body.page-light .rrb-count { color: var(--slate); }
body.page-light .rrb-count strong, body.page-light .rrb-range { color: var(--ink); }
body.page-light .rrb-sort { color: var(--slate-muted); }
body.page-light .rj-label { color: var(--slate-light); }
body.page-light .rj-date { color: var(--ink); }
body.page-light .rj-sub { color: var(--slate-muted); }
body.page-light .rj-track { color: var(--accent-dark); }
body.page-light .rj-node { border-color: var(--accent-dark); background: #fff; }
body.page-light .rj-node--end { background: var(--accent-dark); }
body.page-light .rj-line { border-top-color: var(--accent-dark); }

/* Loading skeleton: lighter shimmer base on white */
body.page-light .rate-skeleton .sk { background: #eef1f6; }

/* Empty / prompt states */
body.page-light .rates-empty p { color: var(--ink); }
body.page-light .rates-empty .muted { color: var(--slate-muted); }
body.page-light .rates-empty .muted a { color: var(--accent-dark); }
body.page-light .rates-empty .muted a:hover { text-decoration: underline; }

/* ----------------------------------------------------------------------------
   CHECKOUT (checkout.html)
   Body components are already light; reinforce the key surfaces + empty link.
   ---------------------------------------------------------------------------- */
body.page-light .pay-card,
body.page-light .order-summary {
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-2);
}
body.page-light .order-summary .muted a { color: var(--accent-dark); font-weight: 600; }
body.page-light .order-summary .muted a:hover { text-decoration: underline; }

/* ----------------------------------------------------------------------------
   TRACK (track.html)
   ---------------------------------------------------------------------------- */

/* In-hero pill search (already white-bg; guarantee light tokens) */
body.page-light .track-form-hero input {
  border: 1.5px solid var(--line);
  background: var(--white);
  color: var(--ink);
  box-shadow: var(--shadow-1);
}
body.page-light .track-form-hero input::placeholder { color: var(--slate-light); }
body.page-light .track-form-hero input:focus { border-color: var(--accent); box-shadow: var(--ring); }
body.page-light .link-btn-light { color: var(--accent-dark); }   /* "ALF-7723-XK" sample btn */

/* Result card / empty state */
body.page-light .track-result {
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
}
body.page-light .track-empty { color: var(--slate-muted); }
body.page-light .track-empty-ico { color: var(--accent-dark); background: var(--accent-soft); }
body.page-light .track-empty-title { color: var(--ink); }

/* Status card head + badges */
body.page-light .track-card-head .tid { color: var(--ink); }
body.page-light .track-sub { color: var(--slate); }
body.page-light .status-transit  { color: var(--accent-dark); background: rgba(14, 159, 110, .12); }
body.page-light .status-delivered { color: var(--accent-dark); background: rgba(14, 159, 110, .12); }
body.page-light .status-error    { color: #c23a32; background: rgba(214, 69, 61, .10); }
body.page-light .track-error { color: var(--slate); }
body.page-light .track-error a { color: var(--accent-dark); font-weight: 600; }
body.page-light .track-error a:hover { text-decoration: underline; }

/* Living timeline: light surfaces, emerald traveled-path intact */
body.page-light .tl-dot { border-color: var(--line); background: var(--white); }
body.page-light .tl-item.active .tl-dot,
body.page-light .tl-item.complete .tl-dot { border-color: var(--accent); background: var(--accent); }
body.page-light .tl-item.complete .tl-line { background: var(--accent); }
body.page-light .tl-line { background: var(--line); }
body.page-light .tl-body strong { color: var(--ink); }
body.page-light .tl-body small { color: var(--slate-muted); }
body.page-light .tl-time { color: var(--slate-muted); }

/* "Latest shipment" recent line + bottom help */
body.page-light .track-recent,
body.page-light .track-help { color: var(--slate-muted); }
body.page-light .track-recent .link-btn,
body.page-light .track-help a { color: var(--accent-dark); }

/* ----------------------------------------------------------------------------
   THANK-YOU (thank-you.html)
   ---------------------------------------------------------------------------- */
body.page-light .confirm { background: var(--bg-soft); }
body.page-light .confirm-card {
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-2);
}
body.page-light .confirm-ico { background: var(--accent-soft); color: var(--accent-dark); }
body.page-light .confirm-card h1 { color: var(--ink); }
body.page-light .confirm-card p { color: var(--slate); }
body.page-light .confirm-summary div,
body.page-light .confirm-summary div:first-child { border-color: var(--line); }
body.page-light .confirm-summary dt { color: var(--slate-muted); }
body.page-light .confirm-summary dd { color: var(--ink); }

/* tracking-number chip ALF-XXXXXX */
body.page-light .ty-tracking {
  background: var(--accent-soft);
  border: 1px solid #bfe7d4;
}
body.page-light .ty-tracking small { color: var(--accent-dark); }
body.page-light .ty-tracking strong { color: var(--ink); }
/* (.confirm-actions .btn-ghost handled in the SHARED ghost-CTA block above) */

/* ----------------------------------------------------------------------------
   LEGAL (privacy.html + terms.html)
   .legal prose is already light; reinforced so it survives base-rule changes.
   ---------------------------------------------------------------------------- */
body.page-light .legal h2 { color: var(--ink); }
body.page-light .legal p,
body.page-light .legal li { color: var(--slate); }
body.page-light .legal a { color: var(--accent-dark); font-weight: 600; }
body.page-light .legal a:hover { text-decoration: underline; }
body.page-light .legal .muted { color: var(--slate-muted); }
body.page-light .legal .muted a { color: var(--accent-dark); }

/* ----------------------------------------------------------------------------
   LEADFORMS (quote.html / freight.html / bulk.html)
   All page-specific forms, cards, .bsum estimator, .bulk-tool table and
   .cta-band are ALREADY light (and .cta-band has its own page-light override).
   The only dark pieces were the heroes + ghost CTAs — handled in SHARED above.
   No additional rules required.
   ---------------------------------------------------------------------------- */

/* ===================================================================
   CHECKOUT — compact, professional shipment form (owner: not a "cheap
   page / big title white space"; should read like a real shipping platform).
   =================================================================== */
/* compact header replaces the big page-hero */
body.page-light .co-head { background: #fff; border-bottom: 1px solid var(--line); padding: 1rem 0 1.05rem; }
body.page-light .co-head-inner { display: flex; align-items: flex-end; justify-content: space-between; gap: .6rem 1.5rem; flex-wrap: wrap; }
body.page-light .co-head .crumbs { margin: 0; }
body.page-light .co-head-title { font-family: var(--font-head); font-weight: 800; font-size: clamp(1.4rem, 1.1rem + 1vw, 1.8rem); color: var(--ink); letter-spacing: -.02em; margin: .3rem 0 0; line-height: 1.1; }
body.page-light .co-head-secure { display: inline-flex; align-items: center; gap: .4rem; font-size: .82rem; font-weight: 600; color: var(--accent-dark); white-space: nowrap; }
body.page-light .co-head-secure svg { color: var(--accent); }
body.page-light .co-section-wrap { padding: 1.7rem 0 var(--space-8); }

/* the form panel: clean white card */
body.page-light .pay-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-2); padding: clamp(1.3rem, 2.4vw, 2.1rem); }
body.page-light .stepbar { margin-bottom: 1.4rem; }

/* From | To: real vertical divider + tighter, like a pro shipment form */
body.page-light .addr-grid { grid-template-columns: 1fr 1fr; gap: 0; position: relative; }
body.page-light .addr-grid .addr-col { padding: 0 2.4rem; }
body.page-light .addr-grid .addr-col:first-child { padding-left: 0; }
body.page-light .addr-grid .addr-col:last-child { padding-right: 0; }
body.page-light .addr-grid .addr-col + .addr-col { padding-top: 0; }

/* Wider checkout for desktop (cards were capped narrow / iPad-width) */
body.page-light .co-head .container,
body.page-light .co-section-wrap > .container { width: min(100% - 2.5rem, 1280px); }
body.page-light .addr-col .field { margin-bottom: .65rem; }
body.page-light .addr-col .field-row { gap: .6rem; margin-bottom: .65rem; }
body.page-light .addr-col legend { margin-bottom: .9rem; }

/* professional inputs */
body.page-light .pay-card .field input,
body.page-light .pay-card .field select {
  width: 100%; background: #fff; color: var(--ink);
  border: 1px solid var(--line); border-radius: 9px; padding: .58rem .7rem;
  font-family: var(--font-body); font-size: .92rem; transition: border-color .15s, box-shadow .15s;
}
body.page-light .pay-card .field input::placeholder { color: var(--slate-light); }
body.page-light .pay-card .field input:focus,
body.page-light .pay-card .field select:focus { border-color: var(--accent); box-shadow: var(--ring); outline: none; }
body.page-light .pay-card .field label { font-size: .76rem; font-weight: 600; color: var(--slate); margin-bottom: .25rem; letter-spacing: .01em; }
body.page-light .pay-card .field .opt { color: var(--slate-light); font-weight: 500; }

/* locked country chip (From UAE / To dest) */
body.page-light .pay-card .calc-origin {
  display: flex; align-items: center; gap: .45rem;
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: 9px;
  padding: .55rem .7rem; color: var(--ink); font-size: .92rem; font-weight: 600;
}
body.page-light .pay-card .addr-country-label { font-size: .76rem; font-weight: 600; color: var(--slate); margin-bottom: .25rem; display: block; }
body.page-light .addr-tag-from { background: var(--accent-soft); color: var(--accent-dark); }
body.page-light .addr-tag-to { background: var(--accent); color: #fff; }

@media (max-width: 760px) {
  body.page-light .addr-grid { grid-template-columns: 1fr; }
  body.page-light .addr-grid .addr-col { padding: 0; }
  body.page-light .addr-grid .addr-col:last-child { border-left: 0; border-top: 1px solid var(--line); padding-top: 1.3rem; margin-top: 1.3rem; }
  body.page-light .co-head-inner { align-items: flex-start; }
}

/* ----- CHECKOUT: extended DHL-style fields (business contact, phone grid, 3-col rows, notes) ----- */
body.page-light .co-check { display: inline-flex; align-items: center; gap: .5rem; margin: 0 0 .65rem; font-size: .85rem; color: var(--slate); font-weight: 500; cursor: pointer; }
body.page-light .co-check input { width: 16px; height: 16px; accent-color: var(--accent); flex: none; }

body.page-light .addr-col .field-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .6rem; margin-bottom: .65rem; }
body.page-light .addr-col .field-row-3 .field { margin-bottom: 0; }

body.page-light .pay-card .phone-grid { display: flex; flex-wrap: wrap; gap: .4rem; align-items: stretch; }
body.page-light .pay-card .phone-grid .phone-type { flex: 0 0 auto; width: auto; min-width: 74px; }
body.page-light .pay-card .phone-grid .phone-code { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .3rem; padding: .55rem; border: 1px solid var(--line); border-radius: 9px; background: var(--bg-soft); font-size: .9rem; font-weight: 600; color: var(--ink); white-space: nowrap; }
body.page-light .pay-card .phone-grid .phone-code-edit { padding: 0 .15rem; }
body.page-light .pay-card .phone-grid .phone-code-input { width: 46px; border: 0 !important; background: transparent !important; padding: .55rem .2rem !important; box-shadow: none !important; font-weight: 600; text-align: center; }
body.page-light .pay-card .phone-grid .phone-num { flex: 1 1 110px; min-width: 84px; }
body.page-light .pay-card .phone-grid .phone-ext { flex: 0 0 56px; width: 56px; text-align: center; }

body.page-light .pay-card .field textarea {
  width: 100%; background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 9px;
  padding: .58rem .7rem; font-family: var(--font-body); font-size: .92rem; resize: vertical; min-height: 54px;
}
body.page-light .pay-card .field textarea:focus { border-color: var(--accent); box-shadow: var(--ring); outline: none; }
body.page-light .pay-card .field textarea::placeholder { color: var(--slate-light); }

@media (max-width: 760px) { body.page-light .addr-col .field-row-3 { grid-template-columns: 1fr; } }

/* ============================================================
   ALIFLOW CHECKOUT — UNIFIED PREMIUM REDESIGN  (v63)
   Recessed mirrored address wells · living FROM→TO seam · one lit
   card + torn-receipt summary · spring-confirmed controls · editable
   country & phone-code · auto-advance addresses. Scoped to checkout.
   ============================================================ */

/* ---------- 0. SECTION BACKGROUND — premium, matches homepage warmth ---------- */
body.page-light .co-section-wrap{
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(14,159,110,.07), transparent 58%),
    linear-gradient(180deg, #ffffff 0%, #f7faf9 34%, var(--bg-soft) 100%);
  padding: clamp(1.6rem, 3vw, 2.6rem) 0 var(--space-8);
}
body.page-light .co-head{
  background: linear-gradient(180deg,#ffffff, #fbfdfc);
  box-shadow: 0 1px 0 rgba(11,27,48,.04);
}

/* ---------- 1. MEASURE & GRID (φ split at payment) ---------- */
body.page-light .checkout-grid{
  display:grid; grid-template-columns:minmax(0,1fr);
  gap:clamp(1.5rem,3vw,2.75rem);
  max-width:1280px; margin:0 auto; align-items:start;
  transition:grid-template-columns .5s var(--ease-out), max-width .5s var(--ease-out);
}
body.page-light .checkout-grid.with-summary{
  grid-template-columns:minmax(0,1fr) clamp(320px,28%,380px);
  max-width:1280px;
}
body.page-light .checkout-grid > .pay-card{ order:1; }
body.page-light .checkout-grid > .order-summary{ order:2; position:sticky; top:96px; }

/* ---------- 2. L2 — the one floating card ---------- */
body.page-light .pay-card{
  position:relative; background:#fff;
  border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:clamp(1.4rem,2.6vw,2.3rem);
  box-shadow:
    0 1px 0 0 rgba(255,255,255,.9) inset,
    0 1px 2px rgba(11,27,48,.05),
    0 18px 48px -12px rgba(11,27,48,.16);
}
body.page-light .pay-card::before{        /* emerald premium seam */
  content:""; position:absolute; inset:0 0 auto 0; height:3px;
  border-radius:var(--radius-lg) var(--radius-lg) 0 0; pointer-events:none;
  background:linear-gradient(90deg, transparent 8%, rgba(14,159,110,.55) 50%, transparent 92%);
}

/* ---------- 3. MIRRORED ADDRESS WELLS + SEAM ---------- */
body.page-light .addr-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:1.5rem;
  align-items:stretch; position:relative;
}
body.page-light .addr-grid .addr-col,
body.page-light .addr-grid .addr-col:first-child,
body.page-light .addr-grid .addr-col:last-child{
  display:flex; flex-direction:column;
  background:linear-gradient(180deg,#fafbfd,#f5f8fc);
  border:1px solid var(--line); border-left:1px solid var(--line);
  border-radius:16px; padding:1.5rem; margin:0;
  box-shadow:inset 0 1px 2px rgba(11,27,48,.04);
  transition:box-shadow .35s var(--ease-out), border-color .35s var(--ease-out), transform .35s var(--ease-out);
}
body.page-light .addr-grid .addr-col:focus-within{    /* von Restorff: active well lifts */
  border-color:#cdeede;
  box-shadow:inset 0 1px 2px rgba(11,27,48,.04), 0 10px 30px rgba(14,159,110,.10);
  transform:translateY(-1px);
}
body.page-light .addr-col .field:last-child{ margin-bottom:0; }

/* centered FROM→TO vector */
body.page-light .addr-grid::before{
  content:""; position:absolute; top:54px; bottom:14px; left:50%;
  width:1px; transform:translateX(-50%); pointer-events:none;
  background:linear-gradient(180deg,transparent,var(--line) 18%,var(--line) 82%,transparent);
}
.addr-seam{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:34px; height:34px; border-radius:50%; z-index:2; pointer-events:none;
  display:grid; place-items:center;
  background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-1);
  color:var(--accent-dark);
}
.addr-seam svg{ width:16px; height:16px; animation:seamGlide 3.2s var(--ease-soft) infinite; }
@keyframes seamGlide{ 0%,100%{transform:translateX(-2px)} 50%{transform:translateX(2px)} }

/* Miller chunk eyebrows */
.addr-subhead{
  display:block; font-family:var(--font-head); font-weight:700;
  font-size:.68rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--slate-light); margin:1.1rem 0 .55rem;
}
.addr-subhead:first-of-type{ margin-top:.2rem; }

/* From/To tags — engraved, asymmetric salience */
body.page-light .addr-tag{ border-radius:9px; padding:.26rem .62rem; box-shadow:inset 0 0 0 1px rgba(255,255,255,.35); }
body.page-light .addr-tag-from{ background:var(--accent-soft); color:var(--accent-dark); box-shadow:inset 0 0 0 1px rgba(14,159,110,.18); }
body.page-light .addr-tag-to{ background:linear-gradient(135deg,var(--emerald-500),var(--emerald-600)); color:#fff; box-shadow:0 4px 12px -2px rgba(14,159,110,.4), inset 0 1px 0 rgba(255,255,255,.25); }

/* ---------- 4. TYPE SCALE ---------- */
body.page-light .pay-card .co-section > legend,
body.page-light .addr-col legend{
  font-family:var(--font-head); font-weight:800;
  font-size:1.12rem; letter-spacing:-.018em; color:var(--ink); margin-bottom:1.05rem;
}
body.page-light .pay-card .field label,
body.page-light .pay-card .addr-country-label{
  font-size:.735rem; font-weight:600; letter-spacing:.02em; color:var(--slate-muted); margin-bottom:.3rem;
}
body.page-light .addr-col .field{ margin-bottom:.7rem; }
body.page-light .addr-col .field-row,
body.page-light .addr-col .field-row-3{ margin-bottom:.7rem; gap:.55rem; }
#co-step-items, #co-step-payment{ max-width:600px; margin-inline:auto; }

/* ---------- 5. FIELDS — L0 inset rest, emerald focus ---------- */
body.page-light .pay-card .field{ position:relative; display:flex; flex-direction:column; }
body.page-light .pay-card .field input,
body.page-light .pay-card .field select,
body.page-light .pay-card .field textarea{
  min-height:48px; padding:.7rem .8rem;
  background:#fff; border:1px solid var(--line); border-radius:11px;
  box-shadow:inset 0 1px 2px rgba(11,27,48,.035);
  transition:border-color .16s var(--ease-soft), box-shadow .16s var(--ease-soft),
             background-color .16s var(--ease-soft), transform .16s var(--ease-soft);
}
body.page-light .pay-card .field input:hover:not(:focus):not(:disabled),
body.page-light .pay-card .field select:hover:not(:focus):not(:disabled){ border-color:#cdd5df; }
body.page-light .pay-card .field input:focus,
body.page-light .pay-card .field select:focus,
body.page-light .pay-card .field textarea:focus{
  outline:none; border-color:var(--accent);
  box-shadow:var(--ring), inset 0 1px 3px rgba(11,27,48,.05);
  transform:translateY(-1px);
}
body.page-light .pay-card .field:focus-within label{ color:var(--accent-dark); }
body.page-light .pay-card .field input.invalid,
body.page-light .pay-card .field select.invalid,
body.page-light .pay-card .field textarea.invalid{
  border-color:var(--danger) !important; box-shadow:var(--ring-danger), inset 0 1px 2px rgba(214,69,61,.06);
}
body.page-light .pay-card .field input:disabled,
body.page-light .pay-card .field select:disabled{ background:var(--bg-soft); color:var(--slate-light); cursor:not-allowed; }

/* custom emerald select chevron */
body.page-light .pay-card .field select,
body.page-light .pay-card .phone-grid .phone-type{
  appearance:none; -webkit-appearance:none; padding-right:2.2rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23047857' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .75rem center;
}

/* ---------- 6. VALID CHECK-POP + per-field error ---------- */
body.page-light .pay-card .field.has-status input{ padding-right:2.4rem; }
.field-check{
  position:absolute; right:.7rem; bottom:9px;
  width:20px; height:20px; border-radius:50%; background:var(--accent);
  display:grid; place-items:center; pointer-events:none;
  opacity:0; transform:scale(0);
}
.field-check svg{ width:12px; height:12px; }
.field.is-ok .field-check{ animation:fieldCheckPop .5s var(--spring) both; }
@keyframes fieldCheckPop{
  0%{ opacity:0; transform:scale(0) rotate(-12deg); }
  60%{ opacity:1; transform:scale(1.18) rotate(2deg); }
  100%{ opacity:1; transform:scale(1) rotate(0); }
}
body.page-light .field.is-ok input{ border-color:var(--accent) !important; }
.field-msg{
  font-size:.76rem; color:var(--danger); margin-top:.3rem;
  opacity:0; transform:translateY(-3px);
  transition:opacity .2s var(--ease-out), transform .2s var(--ease-out);
}
.field.is-bad .field-msg{ opacity:1; transform:none; }
/* don't badge phone sub-inputs (they live in .phone-grid flex) */
body.page-light .phone-grid .field-check{ display:none; }

/* ---------- 7. PROGRESSIVE DISCLOSURE + COMPANY REVEAL ---------- */
.opt-group{ margin:0 0 .65rem; }
.opt-add{
  display:inline-flex; align-items:center; gap:.4rem;
  background:none; border:0; cursor:pointer; padding:.3rem .1rem; border-radius:7px;
  font-family:var(--font-body); font-size:.82rem; font-weight:600; color:var(--accent-dark);
  transition:color .15s var(--ease-soft);
}
.opt-add svg{ transition:transform .25s var(--spring); }
.opt-add:hover{ color:var(--accent); }
.opt-add[aria-expanded="true"] svg{ transform:rotate(45deg); }
.opt-add:focus-visible{ outline:none; box-shadow:var(--ring); }
.opt-reveal{
  max-height:0; overflow:hidden; opacity:0;
  transition:max-height .34s var(--ease-out), opacity .25s var(--ease-out);
}
.opt-reveal.is-open{ max-height:320px; opacity:1; }

#from-company-field, #to-company-field{
  overflow:hidden; max-height:140px; opacity:1;
  transition:max-height .3s var(--ease-out), opacity .22s var(--ease-out), margin .3s var(--ease-out);
}
.co-collapse{ max-height:0 !important; opacity:0 !important; margin-bottom:0 !important; padding-top:0 !important; padding-bottom:0 !important; }

/* ---------- 8. CUSTOM EMERALD CHECKBOX ---------- */
body.page-light .co-check{
  display:inline-flex; align-items:center; gap:.6rem; margin:0 0 .65rem;
  min-height:44px; font-size:.9rem; color:var(--slate); font-weight:500; cursor:pointer; user-select:none;
}
body.page-light .co-check input{
  appearance:none; -webkit-appearance:none; width:20px; height:20px; flex:none; margin:0;
  border:1.5px solid var(--line); border-radius:6px; background:#fff; cursor:pointer; position:relative;
  transition:background .18s var(--ease-out), border-color .18s var(--ease-out), box-shadow .18s var(--ease-out), transform .12s var(--spring);
}
body.page-light .co-check input:hover{ border-color:var(--accent); }
body.page-light .co-check input:checked{
  background:linear-gradient(180deg,var(--emerald-500),var(--emerald-600)); border-color:transparent;
  box-shadow:0 4px 10px rgba(14,159,110,.30);
}
body.page-light .co-check input::after{
  content:""; position:absolute; left:6px; top:2.5px; width:5px; height:10px;
  border:solid #fff; border-width:0 2.2px 2.2px 0;
  transform:rotate(45deg) scale(0); transform-origin:center; transition:transform .2s var(--spring);
}
body.page-light .co-check input:checked::after{ transform:rotate(45deg) scale(1); }
body.page-light .co-check input:active{ transform:scale(.92); }
body.page-light .co-check input:focus-visible{ outline:none; box-shadow:var(--ring); border-color:var(--accent); }
body.page-light .co-check:hover{ color:var(--ink); }

/* ---------- 9. PHONE GRID — one unit, editable code ---------- */
body.page-light .pay-card .phone-grid .phone-type,
body.page-light .pay-card .phone-grid .phone-num,
body.page-light .pay-card .phone-grid .phone-ext,
body.page-light .pay-card .phone-grid .phone-code{ min-height:48px; border-radius:10px; }
body.page-light .pay-card .phone-grid .phone-code-edit{ background:var(--bg-soft); transition:border-color .16s var(--ease-soft), box-shadow .16s var(--ease-soft); }
body.page-light .pay-card .phone-grid .phone-code-edit:focus-within{ border-color:var(--accent); box-shadow:var(--ring); }
body.page-light .pay-card .phone-grid .phone-code-input{ width:52px; }
body.page-light .pay-card .phone-grid .phone-code-input:focus{ box-shadow:none !important; }

/* ---------- 10. EDITABLE COUNTRY PICKER (flag + native select) ---------- */
body.page-light .country-pick{ position:relative; display:block; }
body.page-light .country-pick .country-flag{
  position:absolute; left:.72rem; top:50%; transform:translateY(-50%);
  width:22px; height:16px; border-radius:3px; z-index:1; pointer-events:none;
  box-shadow:0 0 0 1px rgba(11,27,48,.10), 0 1px 2px rgba(11,27,48,.12);
}
body.page-light .pay-card .field .country-pick .country-select{
  width:100%; padding-left:2.7rem; font-weight:600; color:var(--ink);
  border-left:3px solid var(--accent);
}

/* ---------- 11. PRIMARY CTA — flagship money button ---------- */
.co-step-actions{ margin-top:1.5rem; }
/* Back + Continue button row (not full width) — Jumingo ZURÜCK/WEITER style */
body.page-light .pay-card .co-step-actions--nav .co-nav-btns { display: flex; justify-content: flex-end; align-items: center; gap: .7rem; flex-wrap: wrap; }
body.page-light .pay-card .co-step-actions--nav .co-next,
body.page-light .pay-card .co-step-actions--nav #pay-btn { width: auto; min-width: 150px; }
body.page-light .pay-card .co-step-actions--nav .form-note { margin-top: .6rem; text-align: right; }
body.page-light .pay-card .co-prev {
  width: auto; min-height: 56px; border-radius: 999px; padding: 1rem 1.5rem;
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-head); font-size: 1rem; font-weight: 700; letter-spacing: -.01em;
  background: #fff; color: var(--navy-800); border: 1.5px solid var(--line);
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
body.page-light .pay-card .co-prev:hover { border-color: var(--accent); background: var(--bg-soft); transform: translateY(-1px); }
body.page-light .pay-card .co-prev svg { flex: none; }
body.page-light .pay-card .co-next,
body.page-light .pay-card #pay-btn{
  width:100%; min-height:56px; border-radius:999px; padding:1.05rem 1.6rem;
  font-size:1.02rem; font-weight:700; letter-spacing:-.01em; gap:.55rem;
  background:linear-gradient(180deg,var(--emerald-500),var(--emerald-600));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34), inset 0 -1px 0 rgba(0,0,0,.10), 0 10px 24px rgba(14,159,110,.30);
}
body.page-light .pay-card .co-next:hover,
body.page-light .pay-card #pay-btn:hover{
  transform:translateY(-2px); filter:brightness(1.04) saturate(1.04);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.38), 0 16px 36px rgba(14,159,110,.42);
}
body.page-light .pay-card .co-next:active,
body.page-light .pay-card #pay-btn:active{
  transform:translateY(0) scale(.99);
  transition:transform .08s var(--ease-soft), box-shadow .08s var(--ease-soft);
  box-shadow:inset 0 2px 5px rgba(0,0,0,.22), 0 4px 12px rgba(14,159,110,.30);
}
body.page-light .pay-card .co-next:focus-visible,
body.page-light .pay-card #pay-btn:focus-visible{
  outline:none; box-shadow:0 0 0 3px #fff, 0 0 0 6px rgba(14,159,110,.85), 0 14px 32px rgba(14,159,110,.36);
}
.pay-card .co-next:hover svg{ transform:translateX(4px); }
.pay-card #pay-btn:hover svg{ transform:none; }   /* lock stays still — reassuring */
#pay-amount{ font-weight:800; }
body.page-light .pay-card .co-next:disabled,
body.page-light .pay-card #pay-btn:disabled,
body.page-light .pay-card #pay-btn[aria-disabled="true"]{
  background:var(--bg-soft); color:var(--slate-light); box-shadow:none; filter:none; transform:none; cursor:not-allowed;
}
#pay-btn{ position:relative; }
#pay-btn[aria-busy="true"]{ cursor:default; pointer-events:none; }
#pay-btn[aria-busy="true"] > *{ opacity:0; }
#pay-btn[aria-busy="true"]::after{
  content:""; position:absolute; width:20px; height:20px;
  border:2.5px solid rgba(255,255,255,.45); border-top-color:#fff; border-radius:50%;
  animation:btn-spin .7s linear infinite;
}
@keyframes btn-spin{ to{ transform:rotate(360deg); } }

/* auto-advance hint replaces the addresses "Continue" button */
.co-step-actions--auto{ text-align:center; }
.co-auto-hint{
  display:inline-flex; align-items:center; gap:.5rem; margin:0 auto;
  padding:.6rem 1rem; border-radius:999px;
  background:var(--accent-soft); border:1px solid rgba(14,159,110,.18);
  color:var(--accent-dark); font-size:.86rem; font-weight:600; line-height:1.3;
}
.co-auto-spark{ display:grid; place-items:center; width:22px; height:22px; flex:none; border-radius:50%; background:linear-gradient(180deg,var(--emerald-500),var(--emerald-600)); color:#fff; box-shadow:0 3px 8px rgba(14,159,110,.32); }
.co-auto-spark svg{ animation:autoSparkPulse 2.4s var(--ease-soft) infinite; }
@keyframes autoSparkPulse{ 0%,100%{ transform:scale(1); opacity:.9; } 50%{ transform:scale(1.12); opacity:1; } }

/* ---------- 12. BACK LINK — 44px quiet target ---------- */
.co-back{
  min-height:44px; padding:.5rem .9rem .5rem .65rem; margin:0 0 1.2rem -.65rem;
  border-radius:999px; transition:color .15s var(--ease-out), background .15s var(--ease-out);
}
.co-back:hover{ background:var(--accent-soft); color:var(--accent-dark); }
.co-back:focus-visible{ outline:none; box-shadow:var(--ring); color:var(--accent-dark); }

/* ---------- 13. PAY-FORM "wallet" + secure note ---------- */
body.page-light .pay-form{
  position:relative; background:linear-gradient(180deg,#f8fafc,#f4f7fb);
  border:1px solid var(--line); border-radius:16px;
  box-shadow:inset 0 1px 2px rgba(11,27,48,.04); padding:1.4rem 1.4rem 1.5rem;
}
body.page-light .pay-form .card-brands{ position:absolute; top:1.2rem; right:1.3rem; display:flex; gap:.35rem; filter:drop-shadow(0 1px 2px rgba(11,27,48,.08)); }
body.page-light .pay-form .field input{ background:#fff; }
body.page-light .secure-note{
  display:flex; align-items:center; gap:.45rem; margin:1rem 0 .9rem; padding:.55rem .75rem;
  background:var(--bg-soft); border:1px solid var(--line); border-radius:10px;
  color:var(--slate-muted); font-size:.8rem; font-weight:500;
}
body.page-light .secure-note svg{ color:var(--accent-dark); }
body.page-light .demo-note{ font-size:.76rem; color:var(--warn); text-align:center; margin-top:.6rem; }

/* ---------- 14. ORDER SUMMARY — torn receipt, matched L2 ---------- */
body.page-light .order-summary{
  position:relative; border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:var(--space-6); overflow:hidden; background:#fff;
  box-shadow:0 1px 0 0 rgba(255,255,255,.9) inset, 0 1px 2px rgba(11,27,48,.05), 0 18px 48px -14px rgba(11,27,48,.14);
}
body.page-light .order-summary::before{
  content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg, transparent 8%, rgba(14,159,110,.55) 50%, transparent 92%);
}
body.page-light .summary-route{
  background:linear-gradient(180deg, rgba(14,159,110,.06), #fff);
  border:1px solid rgba(14,159,110,.18); border-radius:14px;
}
body.page-light .summary-total{ position:relative; border-top:0; margin-top:1.3rem; padding-top:1.3rem; }
body.page-light .summary-total::before{
  content:""; position:absolute; top:0; left:-.25rem; right:-.25rem; height:1px;
  background:repeating-linear-gradient(90deg, var(--line) 0 6px, transparent 6px 12px);
}
body.page-light .summary-total strong{
  font-variant-numeric:tabular-nums lining-nums; font-feature-settings:"tnum" 1,"lnum" 1;
  font-size:1.85rem; letter-spacing:-.02em; color:var(--accent-dark);
}
body.page-light .summary-total > span small{ letter-spacing:.04em; text-transform:uppercase; }
.order-summary:not([hidden]){ animation:summaryIn .5s var(--ease-out) both; }
@keyframes summaryIn{ from{ opacity:0; transform:translate3d(24px,0,0); } to{ opacity:1; transform:none; } }
.summary-total strong{ animation:totalFlash .6s var(--ease-out) .2s both; }
@keyframes totalFlash{ 0%{ color:var(--accent); transform:scale(1.04); } 100%{ color:var(--accent-dark); transform:scale(1); } }
.val-bump{ animation:valBump .42s var(--ease-out) both; display:inline-block; }
@keyframes valBump{ 0%{ transform:scale(1.08); color:var(--accent); } 100%{ transform:scale(1); } }

/* ---------- 15. STEPBAR — continuous filling spine ---------- */
.stepbar{ position:relative; max-width:560px; gap:0; justify-content:space-between; margin:0 auto var(--space-7); scroll-margin-top:96px; }
.stepbar::before, .stepbar::after{ content:""; position:absolute; top:15px; left:30px; right:30px; height:2px; border-radius:2px; }
.stepbar::before{ background:var(--line); }
.stepbar::after{ right:auto; width:var(--co-progress,0%); background:linear-gradient(90deg,var(--accent),var(--accent-dark)); transition:width .6s var(--ease-expressive); }
.stepbar-step:not(:last-child)::after{ display:none; }   /* drop old stubs */
.stepbar-step{ position:relative; z-index:1; background:transparent; flex-direction:column; gap:.45rem; }
.stepbar-num{ width:30px; height:30px; transition:transform .4s var(--spring), background .3s, box-shadow .3s; }
.stepbar-step.is-active .stepbar-num{ animation:stepNumPop .5s var(--spring) both; }
@keyframes stepNumPop{ 0%{ transform:scale(.82);} 60%{ transform:scale(1.08);} 100%{ transform:scale(1);} }
.stepbar-label{ font-size:.78rem; }

/* ---------- 16. STEP TRANSITIONS + INVALID SHAKE ---------- */
.co-step--enter-fwd{ animation:coStepInFwd .42s var(--ease-out) both; }
.co-step--enter-back{ animation:coStepInBack .42s var(--ease-out) both; }
@keyframes coStepInFwd{ from{ opacity:0; transform:translate3d(22px,0,0);} to{ opacity:1; transform:none;} }
@keyframes coStepInBack{ from{ opacity:0; transform:translate3d(-22px,0,0);} to{ opacity:1; transform:none;} }
.co-step--enter-fwd .addr-col, .co-step--enter-back .addr-col{ animation:coColRise .5s var(--ease-out) both; }
.co-step--enter-fwd .addr-col:last-child, .co-step--enter-back .addr-col:last-child{ animation-delay:.07s; }
@keyframes coColRise{ from{ opacity:0; transform:translate3d(0,10px,0);} to{ opacity:1; transform:none;} }
.field input.invalid, .field select.invalid, .field textarea.invalid{ animation:fieldShake .32s var(--ease-soft) both; }
@keyframes fieldShake{ 0%,100%{transform:translateX(0)} 10%,90%{transform:translateX(-1.5px)} 30%,70%{transform:translateX(3px)} 50%{transform:translateX(-3px)} }

/* ---------- 17. RESPONSIVE ---------- */
@media (max-width:960px){
  body.page-light .checkout-grid, body.page-light .checkout-grid.with-summary{ grid-template-columns:1fr; max-width:640px; }
  body.page-light .checkout-grid > .order-summary{ order:-1; position:static; }
}
@media (max-width:760px){
  body.page-light .addr-grid{ grid-template-columns:1fr; gap:1.1rem; }
  body.page-light .addr-grid::before, .addr-seam{ display:none; }
  body.page-light .addr-grid .addr-col:first-child{ position:relative; margin-bottom:.4rem; }
  body.page-light .addr-grid .addr-col:first-child::after{
    content:""; position:absolute; left:50%; bottom:-1.1rem; width:2px; height:1.1rem;
    background:linear-gradient(180deg,var(--accent),transparent); transform:translateX(-50%);
  }
  /* thumb-zone sticky CTA */
  body.page-light .pay-card .co-step-actions{
    position:sticky; bottom:0; z-index:5;
    margin:.8rem -1rem -1rem; padding:.8rem 1rem max(.8rem, env(safe-area-inset-bottom));
    background:linear-gradient(to top,#fff 72%,rgba(255,255,255,0)); border-top:1px solid var(--line);
  }
  body.page-light .pay-card .co-step-actions--auto{ border-top:0; background:none; position:static; margin:1rem 0 0; padding:0; }
}

/* ---------- 18. REDUCED-MOTION SAFETY NET ---------- */
@media (prefers-reduced-motion:reduce){
  .addr-seam svg, .stepbar::after, .stepbar-step .stepbar-num, .co-auto-spark svg,
  .co-step--enter-fwd, .co-step--enter-back, .co-step--enter-fwd .addr-col, .co-step--enter-back .addr-col,
  .field.is-ok .field-check, .field input.invalid, .field select.invalid,
  .order-summary:not([hidden]), .summary-total strong, .val-bump, #pay-btn[aria-busy="true"]::after{
    animation:none !important;
  }
  body.page-light .checkout-grid{ transition:none; }
  body.page-light .pay-card .field input:focus, body.page-light .pay-card .field select:focus{ transform:none; }
  body.page-light .addr-grid .addr-col{ transition:none; }
  .field.is-ok .field-check{ opacity:1; transform:scale(1); }
  #pay-btn[aria-busy="true"]::after{ border-top-color:rgba(255,255,255,.45); }
}

/* ---------- 19. LEGEND/FIELDSET CAPTION FIX — keep From|To rows symmetrical ----------
   A <legend> inside a fieldset reserves inconsistent anonymous "rendered-legend"
   space, pushing one column's fields ~24px lower than the other (asymmetry the
   owner flagged). Floating the legend full-width takes it OUT of the fieldset's
   rendered-legend mechanism so it flows as a normal block — both address columns
   then stay perfectly row-aligned (verified: From/To eyebrows + fields align). */
body.page-light .addr-grid .addr-col legend{ float:left; width:100%; }
body.page-light .addr-grid .addr-col legend + *{ clear:both; }

/* ---------- 20. 3-COL CITY/PROVINCE/POSTAL — uniform label height ----------
   These labels wrap unevenly ("Province / Emirate (opt.)" → 2 lines, "City" → 1),
   which dropped the inputs to different heights within the row and between the
   From|To columns. Reserving 2 label lines makes every input in the row — and
   the matching row in the other column — sit at the same height (owner:
   "city province and postal code all the same height and placing"). */
body.page-light .pay-card .field-row-3 .field label{ line-height:1.25; min-height:2.5em; }

/* ---------- 21. PADDING-TOP PARITY — the real From|To symmetry fix ----------
   A leftover rule from the original divider layout — `.addr-col + .addr-col
   { padding-top:0 }` — zeroed the SECOND (To) column's top padding while the
   first (From) kept 1.5rem, shifting the entire From column 24px lower. Restore
   parity so both wells start their content at the same height. */
body.page-light .addr-grid .addr-col + .addr-col{ padding-top:1.5rem; }

/* ---------- 22. AUTO-ADVANCE "Saved ✓" CONFIRMATION — feel controlled, not abrupt ---------- */
.co-auto-hint.is-saved{ background:linear-gradient(180deg,var(--emerald-500),var(--emerald-600)); border-color:transparent; color:#fff; box-shadow:0 10px 24px rgba(14,159,110,.34); }
.co-auto-hint.is-saved .co-auto-spark{ background:#fff; color:var(--accent-dark); }
.co-auto-hint.is-saved .co-auto-spark svg{ animation:autoSparkPop .4s var(--spring) both; }
@keyframes autoSparkPop{ 0%{ transform:scale(.5); } 60%{ transform:scale(1.2); } 100%{ transform:scale(1); } }
@media (prefers-reduced-motion:reduce){ .co-auto-hint.is-saved .co-auto-spark svg{ animation:none; } }

/* ---------- 23. DHL-vs-ALIFLOW SAVINGS COMPARISON — restrained-luxury pricing moment
   (rates page + homepage strip; only renders when the owner has supplied real DHL retail
   quotes in rates-data.js `dhlRetail`). One confident hero number (the saving), a hairline
   ledger that lets the eye verify retail − alf = save, the retail price struck through,
   and the source cited in a recessed credential well. ---------- */
body.page-light .rate-savings{
  position:relative; overflow:hidden;
  margin:0 0 1.4rem;
  padding:2rem 2.2rem 1.6rem;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-2);
}
/* whisper-thin emerald spine on the leading edge — the single restrained accent */
body.page-light .rate-savings::before{
  content:""; position:absolute; inset:0 auto 0 0; width:3px;
  background:linear-gradient(180deg,var(--emerald-500),var(--emerald-600));
}

/* Eyebrow — the lane, quiet, one emerald dot */
body.page-light .rate-savings .rs-eyebrow{ display:flex; align-items:center; gap:.55rem; margin-bottom:1.15rem; min-width:0; }
.rs-dot{ flex:none; width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px var(--accent-soft); }
.rs-eyebrow-t{ font-family:var(--font-body); font-size:.78rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--slate-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Hero — ONE confident number: the saving */
.rs-hero{ display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; }
.rs-hero-main{ min-width:0; }
.rs-lead{ margin:0 0 .3rem; font-family:var(--font-body); font-size:.92rem; font-weight:500; color:var(--slate); }
.rs-figure{ margin:0; font-family:var(--font-head); font-weight:700; line-height:1; letter-spacing:-.035em; color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap; }
.rs-cur{ font-size:1.4rem; font-weight:700; color:var(--slate-light); letter-spacing:0; margin-right:.18rem; vertical-align:.52em; }
.rs-num{ font-size:2.7rem; }

/* Percent — restrained emerald cue, right-aligned */
.rs-pct{ flex:none; text-align:right; }
.rs-pct-n{ display:block; font-family:var(--font-head); font-weight:800; font-size:1.7rem; line-height:1; letter-spacing:-.02em; color:var(--accent-dark); font-variant-numeric:tabular-nums; }
.rs-pct-sign{ font-size:1.05rem; margin-left:.04em; }
.rs-pct-l{ display:block; margin-top:.22rem; font-family:var(--font-body); font-size:.72rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--slate-light); }

/* Ledger — hairline-ruled; retail struck, Aliflow ticked, math verifiable at a glance */
.rs-ledger{ margin:1.55rem 0 0; border-top:1px solid var(--line); }
.rs-line{ display:grid; grid-template-columns:1fr auto; align-items:baseline; gap:1rem; padding:.85rem .1rem; border-bottom:1px solid var(--line); }
.rs-k{ font-family:var(--font-body); font-size:.9rem; font-weight:500; color:var(--slate); }
.rs-k small{ display:block; margin-top:.12rem; font-size:.76rem; font-weight:500; color:var(--slate-light); }
.rs-v{ margin:0; font-family:var(--font-head); font-weight:700; font-size:1.12rem; color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap; }
.rs-line-dhl .rs-v{ color:var(--slate-light); }
.rs-line-dhl .rs-v s{ text-decoration:line-through; text-decoration-color:rgba(124,138,156,.75); text-decoration-thickness:1.5px; }
.rs-line-alf .rs-k{ color:var(--ink); font-weight:600; }
.rs-line-alf .rs-v{ color:var(--accent-dark); }
.rs-tick{ width:1rem; height:1rem; margin-right:.45rem; vertical-align:-.16em; color:var(--accent); }

/* Credibility note — source citation in a recessed credential well (honesty: must stay) */
.rs-note{ display:flex; gap:.6rem; align-items:flex-start; margin:1.05rem 0 0; padding:.7rem .85rem; background:var(--bg-soft); border:1px solid var(--line); border-radius:12px; }
.rs-shield{ flex:none; margin-top:.1rem; color:var(--accent); opacity:.85; }
.rs-note span{ font-family:var(--font-body); font-size:.765rem; line-height:1.5; color:var(--slate-muted); }
.rs-note strong{ font-weight:600; color:var(--slate); }

/* Tasteful entrance only — rises and settles (no looping/playful motion) */
@media (prefers-reduced-motion:no-preference){
  body.page-light .rate-savings{ animation:rsRise .6s var(--ease-out) both; }
  body.page-light .rate-savings .rs-figure{ animation:rsRise .7s .06s var(--ease-soft) both; }
  body.page-light .rate-savings .rs-pct{ animation:rsRise .7s .12s var(--ease-soft) both; }
  body.page-light .rate-savings .rs-line{ animation:rsRise .6s var(--ease-soft) both; }
  body.page-light .rate-savings .rs-line-alf{ animation-delay:.1s; }
}
@keyframes rsRise{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

/* Responsive — down to 360px */
@media (max-width:560px){
  body.page-light .rate-savings{ padding:1.55rem 1.4rem 1.3rem; }
  .rs-num{ font-size:2.7rem; }
  .rs-cur{ font-size:1.18rem; }
  .rs-pct-n{ font-size:1.5rem; }
  .rs-hero{ gap:1rem; }
}
@media (max-width:400px){
  .rs-hero{ flex-direction:column; align-items:flex-start; gap:.55rem; }
  .rs-pct{ text-align:left; }
  .rs-num{ font-size:2.45rem; }
  .rs-v{ font-size:1.05rem; }
  .rs-eyebrow-t{ font-size:.74rem; }
}
@media (prefers-reduced-motion:reduce){
  body.page-light .rate-savings,
  body.page-light .rate-savings .rs-figure,
  body.page-light .rate-savings .rs-pct,
  body.page-light .rate-savings .rs-line{ animation:none; }
}

/* ---------- 24. "WHY ALIFLOW" SAVINGS STRIP — same card, centered above the vs-grid ---------- */
body.page-light .rate-savings.vs-savings{ max-width:980px; margin:0 auto 2.2rem; }
@media (max-width:560px){
  body.page-light .rate-savings.vs-savings{ margin-bottom:1.6rem; }
  body.page-light .rate-savings.vs-savings .rs-num{ font-size:2.7rem; }
}

/* ============================================================
   25. "CAN I SHIP IT?" standalone tool (can-i-ship.html)
   ============================================================ */
body.page-light .cis-hero{
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(14,159,110,.07), transparent 58%),
    linear-gradient(180deg,#fff 0%, #f7faf9 40%, var(--bg-soft) 100%);
  border-bottom:1px solid var(--line);
  padding:clamp(1.6rem,3vw,2.8rem) 0 clamp(2rem,4vw,3rem);
}
body.page-light .cis-hero .container{ max-width:760px; }
body.page-light .cis-hero .crumbs{ margin:0 0 1rem; }
.cis-title{ font-family:var(--font-head); font-weight:800; letter-spacing:-.025em; color:var(--ink); font-size:clamp(1.8rem,1.3rem+2.4vw,2.7rem); line-height:1.08; margin:0 0 .6rem; text-wrap:balance; }
.cis-sub{ color:var(--slate); font-size:clamp(.98rem,.94rem+.3vw,1.1rem); line-height:1.5; margin:0 0 1.5rem; max-width:60ch; }

/* search */
.cis-search{ position:relative; display:flex; align-items:center; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-2); transition:border-color .16s var(--ease-soft), box-shadow .16s var(--ease-soft); }
.cis-search:focus-within{ border-color:var(--accent); box-shadow:var(--ring), var(--shadow-2); }
.cis-search-ico{ display:grid; place-items:center; width:54px; flex:none; color:var(--slate-light); }
.cis-search:focus-within .cis-search-ico{ color:var(--accent-dark); }
.cis-search-input{ flex:1 1 auto; min-width:0; border:0; background:transparent; outline:none; padding:1.1rem .4rem; font-family:var(--font-body); font-size:1.08rem; color:var(--ink); }
.cis-search-input::placeholder{ color:var(--slate-light); }
.cis-clear{ flex:none; display:grid; place-items:center; width:44px; height:44px; margin-right:.4rem; border:0; background:none; color:var(--slate-light); border-radius:10px; cursor:pointer; transition:color .15s, background .15s; }
.cis-clear:hover{ color:var(--ink); background:var(--bg-soft); }

/* chips */
.cis-chips{ display:flex; flex-wrap:wrap; gap:.5rem; margin:1rem 0 0; }
.cis-chip{ font-family:var(--font-body); font-size:.86rem; font-weight:600; color:var(--slate); background:#fff; border:1px solid var(--line); border-radius:999px; padding:.42rem .9rem; cursor:pointer; transition:border-color .15s var(--ease-soft), color .15s, background .15s, transform .15s var(--ease-soft), box-shadow .2s; }
.cis-chip:hover{ border-color:var(--accent); color:var(--accent-dark); transform:translateY(-1px); box-shadow:0 6px 16px -8px rgba(14,159,110,.4); }

/* verdict card */
.cis-result{ margin-top:1.3rem; }
.cis-result:not(.is-shown){ display:none; }
.cis-verdict{ display:flex; gap:1rem; align-items:flex-start; background:#fff; border:1px solid var(--line); border-left-width:4px; border-radius:16px; padding:1.2rem 1.3rem; box-shadow:var(--shadow-2); animation:rsRise .45s var(--ease-out) both; }
.cis-verdict-ico{ flex:none; display:grid; place-items:center; width:46px; height:46px; border-radius:12px; }
.cis-verdict-body{ min-width:0; flex:1 1 auto; }
.cis-verdict-head{ display:flex; align-items:center; flex-wrap:wrap; gap:.5rem .75rem; margin-bottom:.35rem; }
.cis-verdict-name{ font-family:var(--font-head); font-weight:800; font-size:1.18rem; letter-spacing:-.015em; color:var(--ink); }
.cis-verdict-status{ font-size:.74rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:.22rem .6rem; border-radius:999px; }
.cis-verdict-note{ margin:.2rem 0 0; color:var(--slate); font-size:.95rem; line-height:1.5; }
.cis-verdict-cta{ display:inline-flex; align-items:center; gap:.45rem; margin-top:.95rem; font-family:var(--font-head); font-weight:700; font-size:.92rem; padding:.6rem 1.1rem; border-radius:999px; color:#fff; background:linear-gradient(180deg,var(--emerald-500),var(--emerald-600)); box-shadow:0 8px 20px -8px rgba(14,159,110,.5); transition:transform .15s var(--ease-soft), box-shadow .2s, filter .15s; }
.cis-verdict-cta:hover{ transform:translateY(-1px); filter:brightness(1.04); box-shadow:0 12px 26px -8px rgba(14,159,110,.55); }
.cis-verdict-cta--wa{ background:#fff; color:var(--accent-dark); border:1px solid var(--line); box-shadow:var(--shadow-1); }
.cis-verdict-cta--wa:hover{ border-color:var(--accent); }
/* status palettes */
.cis-verdict.allowed{ border-left-color:var(--accent); }
.cis-verdict.allowed .cis-verdict-ico{ background:var(--accent-soft); color:var(--accent-dark); }
.cis-verdict.allowed .cis-verdict-status{ background:var(--accent-soft); color:var(--accent-dark); }
.cis-verdict.restricted{ border-left-color:var(--warn); }
.cis-verdict.restricted .cis-verdict-ico{ background:var(--warn-soft); color:var(--warn); }
.cis-verdict.restricted .cis-verdict-status{ background:var(--warn-soft); color:var(--warn); }
.cis-verdict.prohibited{ border-left-color:var(--danger); }
.cis-verdict.prohibited .cis-verdict-ico{ background:#fdecea; color:var(--danger); }
.cis-verdict.prohibited .cis-verdict-status{ background:#fdecea; color:var(--danger); }
.cis-verdict.unknown{ border-left-color:var(--slate-light); }
.cis-verdict.unknown .cis-verdict-ico{ background:var(--bg-soft); color:var(--slate); }
.cis-verdict.unknown .cis-verdict-status{ background:var(--bg-soft); color:var(--slate); }

/* directory */
.cis-directory{ padding:clamp(2rem,4vw,3.2rem) 0; }
.cis-directory .container{ max-width:1000px; }
.cis-dir-head{ margin-bottom:1.8rem; }
.cis-dir-title{ font-family:var(--font-head); font-weight:800; letter-spacing:-.02em; color:var(--ink); font-size:clamp(1.4rem,1.1rem+1.2vw,1.85rem); margin:0 0 .4rem; }
.cis-dir-sub{ color:var(--slate-muted); font-size:.95rem; margin:0; }
.cis-group{ margin:0 0 2.2rem; }
.cis-group-head{ display:flex; align-items:center; gap:.6rem; font-family:var(--font-head); font-weight:800; font-size:1.08rem; letter-spacing:-.01em; margin:0 0 1rem; padding-bottom:.7rem; border-bottom:1px solid var(--line); }
.cis-group-ico{ display:grid; place-items:center; width:30px; height:30px; border-radius:9px; flex:none; }
.cis-group-count{ margin-left:auto; font-family:var(--font-body); font-size:.82rem; font-weight:700; color:var(--slate-light); background:var(--bg-soft); border:1px solid var(--line); border-radius:999px; padding:.15rem .6rem; }
.cis-group--allowed .cis-group-head{ color:var(--accent-dark); } .cis-group--allowed .cis-group-ico{ background:var(--accent-soft); color:var(--accent-dark); }
.cis-group--restricted .cis-group-head{ color:var(--warn); } .cis-group--restricted .cis-group-ico{ background:var(--warn-soft); color:var(--warn); }
.cis-group--prohibited .cis-group-head{ color:var(--danger); } .cis-group--prohibited .cis-group-ico{ background:#fdecea; color:var(--danger); }
.cis-list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,1fr); gap:.7rem; }
.cis-item{ min-width:0; }
.cis-item-btn{ display:block; width:100%; text-align:left; background:#fff; border:1px solid var(--line); border-radius:13px; padding:.85rem 1rem; cursor:pointer; transition:border-color .16s var(--ease-soft), box-shadow .2s var(--ease-soft), transform .16s var(--ease-soft); }
.cis-item-btn:hover{ border-color:#cdd5df; transform:translateY(-1px); box-shadow:var(--shadow-1); }
.cis-item-name{ display:block; font-family:var(--font-head); font-weight:700; font-size:.96rem; color:var(--ink); letter-spacing:-.01em; }
.cis-item-note{ display:block; margin-top:.22rem; font-size:.82rem; line-height:1.45; color:var(--slate-muted); }
.cis-group--allowed .cis-item-btn{ border-left:3px solid var(--accent-soft); }
.cis-group--restricted .cis-item-btn{ border-left:3px solid var(--warn-line); }
.cis-group--prohibited .cis-item-btn{ border-left:3px solid #f7d4d0; }
.cis-item.is-active .cis-item-btn{ border-color:var(--accent); box-shadow:var(--ring); }
.cis-disclaimer{ display:flex; gap:.55rem; align-items:flex-start; margin:.5rem 0 0; padding:.9rem 1.1rem; background:var(--bg-soft); border:1px solid var(--line); border-radius:12px; color:var(--slate-muted); font-size:.85rem; line-height:1.55; }
.cis-disclaimer svg{ flex:none; margin-top:.15rem; color:var(--accent-dark); }
.cis-disclaimer a{ color:var(--accent-dark); font-weight:600; }

/* bottom CTA */
.cis-cta{ padding:0 0 clamp(2.5rem,5vw,4rem); }
.cis-cta-inner{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1.2rem; max-width:1000px; padding:1.8rem 2rem; border-radius:var(--radius-lg); background:linear-gradient(180deg, rgba(14,159,110,.06), #fff); border:1px solid rgba(14,159,110,.18); box-shadow:var(--shadow-2); }
.cis-cta-title{ font-family:var(--font-head); font-weight:800; letter-spacing:-.02em; color:var(--ink); font-size:1.35rem; margin:0 0 .25rem; }
.cis-cta-sub{ color:var(--slate); font-size:.95rem; margin:0; }
.cis-cta-btn{ flex:none; }

@media (max-width:680px){
  .cis-list{ grid-template-columns:1fr; }
  .cis-cta-inner{ padding:1.4rem 1.3rem; }
  .cis-cta-btn{ width:100%; justify-content:center; }
}
@media (prefers-reduced-motion:reduce){ .cis-verdict{ animation:none; } }

/* ---------- 26. CHECKOUT — "remember my details on this device" bar ---------- */
body.page-light .co-remember{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; flex-wrap:wrap; max-width:560px; margin:.2rem 0 1.4rem; padding:.6rem .85rem; background:var(--bg-soft); border:1px solid var(--line); border-radius:12px; }
body.page-light .co-check--remember{ margin:0; min-height:auto; font-size:.86rem; align-items:flex-start; }
body.page-light .co-check--remember > span{ line-height:1.25; }
body.page-light .co-check--remember small{ display:block; font-size:.74rem; color:var(--slate-light); font-weight:500; margin-top:.05rem; }
body.page-light .co-check--remember input{ width:18px; height:18px; margin-top:.05rem; }
.co-forget{ flex:none; background:none; border:0; cursor:pointer; font-family:var(--font-body); font-size:.8rem; font-weight:600; color:var(--slate-muted); padding:.32rem .5rem; border-radius:8px; transition:color .15s var(--ease-soft), background .15s var(--ease-soft); }
.co-forget:hover{ color:var(--danger); background:#fdecea; }
.co-forget:focus-visible{ outline:none; box-shadow:var(--ring); }

/* ---------- 27. CHECKOUT — recipient import-VAT (landed-cost) estimate ---------- */
body.page-light .vat-estimate{ margin:1rem 0 0; padding:.85rem 1rem; border-radius:12px; border:1px solid var(--line); background:var(--bg-soft); }
body.page-light .vat-estimate.is-est{ background:linear-gradient(180deg, rgba(14,159,110,.05), var(--bg-soft)); border-color:rgba(14,159,110,.20); }
.vat-row{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; }
.vat-k{ font-family:var(--font-body); font-size:.86rem; font-weight:600; color:var(--slate); display:flex; flex-direction:column; line-height:1.25; }
.vat-k small{ font-size:.73rem; font-weight:500; color:var(--slate-light); margin-top:.05rem; }
.vat-v{ font-family:var(--font-head); font-weight:800; font-size:1.12rem; color:var(--accent-dark); font-variant-numeric:tabular-nums; white-space:nowrap; }
.vat-note{ margin:.55rem 0 0; font-size:.78rem; line-height:1.45; color:var(--slate-muted); }
.vat-note--generic{ margin:0; }

/* ---------- 28. PRINTABLE QR DROP-OFF PASS (thank-you page) ---------- */
body.page-light .dropoff{ padding:0 0 clamp(2rem,5vw,3.5rem); }
.dropoff-intro{ max-width:520px; margin:0 auto 1rem; text-align:center; color:var(--slate); font-size:.95rem; line-height:1.5; }
.dropoff-card{ max-width:520px; margin:0 auto; background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-2); padding:1.5rem 1.6rem; }
.dropoff-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; padding-bottom:1.1rem; border-bottom:1px solid var(--line); }
.dropoff-brand{ display:flex; align-items:center; gap:.6rem; }
.dropoff-brand .brand-mark{ color:var(--accent); }
.dropoff-brand-t{ display:flex; flex-direction:column; font-family:var(--font-head); font-weight:800; font-size:1.15rem; color:var(--ink); line-height:1.05; letter-spacing:-.01em; }
.dropoff-brand-t small{ font-size:.72rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--slate-light); margin-top:.18rem; }
.dropoff-qr{ flex:none; width:104px; height:104px; display:block; }
.dropoff-qr svg{ display:block; width:100%; height:100%; }
.dropoff-id{ margin:1.1rem 0 0; }
.dropoff-id small{ display:block; font-size:.72rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--slate-light); margin-bottom:.15rem; }
.dropoff-id strong{ font-family:var(--font-head); font-weight:800; font-size:1.5rem; letter-spacing:.02em; color:var(--ink); font-variant-numeric:tabular-nums; }
.dropoff-rows{ display:grid; grid-template-columns:1fr 1fr; gap:.7rem 1.2rem; margin:1.1rem 0 0; }
.dropoff-rows div{ min-width:0; }
.dropoff-rows dt{ font-size:.72rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--slate-light); }
.dropoff-rows dd{ margin:.1rem 0 0; font-size:.92rem; font-weight:600; color:var(--ink); overflow-wrap:anywhere; }
.dropoff-where{ margin:1.2rem 0 0; padding-top:1rem; border-top:1px dashed var(--line); font-size:.8rem; line-height:1.5; color:var(--slate-muted); }
.dropoff-where strong{ color:var(--accent-dark); }
.dropoff-print{ display:flex; align-items:center; gap:.5rem; margin:1.3rem auto 0; }
@media print {
  body * { visibility:hidden !important; }
  #dropoff-pass, #dropoff-pass * { visibility:visible !important; }
  #dropoff-pass{ position:absolute; left:0; top:0; width:100%; padding:0; margin:0; }
  #dropoff-pass .container{ max-width:none; padding:0; margin:0; }
  .dropoff-intro, .dropoff-print{ display:none !important; }
  .dropoff-card{ box-shadow:none; border:1px solid #333; max-width:520px; margin:0 auto; border-radius:14px; }
}
@media (max-width:480px){ .dropoff-rows{ grid-template-columns:1fr; } .dropoff-qr{ width:88px; height:88px; } }

/* ---------- 29. CHECKOUT — per-country phone length hint ---------- */
body.page-light .phone-hint{ display:block; margin-top:.35rem; font-size:.73rem; font-weight:500; color:var(--slate-light); }

/* ---------- 30. CHECKOUT — postcode format: red error in narrow 3-col cells, no green badge ---------- */
body.page-light .field-row-3 .field-check{ display:none; }

/* ---------- 31. VISUAL PARCEL BUILDER (homepage calc) — preset box chips + live weight meter ---------- */
body.page-light .parcel-presets{ display:flex; flex-wrap:wrap; align-items:center; gap:.45rem; margin:.9rem 0 0; }
.pp-label{ display:inline-flex; align-items:center; gap:.35rem; font-size:.8rem; font-weight:600; color:var(--slate-muted); margin-right:.2rem; }
.pp-label svg{ color:var(--accent-dark); }
.pp-chip{ font-family:var(--font-body); font-size:.83rem; font-weight:600; color:var(--slate); background:#fff; border:1px solid var(--line); border-radius:999px; padding:.4rem .85rem; cursor:pointer; transition:border-color .15s var(--ease-soft), color .15s, transform .15s var(--ease-soft), box-shadow .2s; }
.pp-chip:hover{ border-color:var(--accent); color:var(--accent-dark); transform:translateY(-1px); box-shadow:0 6px 16px -8px rgba(14,159,110,.4); }
.pp-chip[aria-pressed="true"]{ background:var(--accent-soft); border-color:rgba(14,159,110,.4); color:var(--accent-dark); }

body.page-light .parcel-meter{ margin:.85rem 0 0; padding:1rem 1.15rem; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-1); animation:rsRise .4s var(--ease-out) both; text-align:left; }
.pm-head{ display:flex; align-items:baseline; gap:.5rem; margin-bottom:.85rem; }
.pm-title{ font-size:.74rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--slate-light); }
.pm-charge{ font-family:var(--font-head); font-weight:800; font-size:1.35rem; color:var(--ink); font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.pm-basis{ font-size:.8rem; font-weight:600; color:var(--accent-dark); margin-left:auto; }
.pm-bars{ display:flex; flex-direction:column; gap:.5rem; }
.pm-row{ display:grid; grid-template-columns:minmax(96px,128px) 1fr auto; align-items:center; gap:.7rem; }
.pm-label{ font-size:.82rem; font-weight:500; color:var(--slate); }
.pm-label small{ color:var(--slate-light); font-weight:400; }
.pm-track{ height:12px; border-radius:999px; background:var(--bg-soft); overflow:hidden; box-shadow:inset 0 1px 2px rgba(11,27,48,.06); }
.pm-fill{ display:block; height:100%; width:0; border-radius:999px; background:linear-gradient(90deg,#9aa6b2,#7a8794); transition:width .45s var(--ease-expressive), background .3s; }
.pm-row.is-charged .pm-fill{ background:linear-gradient(90deg,var(--emerald-500),var(--emerald-600)); }
.pm-num{ font-family:var(--font-head); font-weight:700; font-size:.92rem; color:var(--slate); font-variant-numeric:tabular-nums; white-space:nowrap; }
.pm-row.is-charged .pm-num{ color:var(--accent-dark); }
.pm-row.is-charged .pm-label{ color:var(--ink); font-weight:600; }
.pm-tip{ margin:.85rem 0 0; font-size:.8rem; line-height:1.45; color:var(--slate-muted); }
.parcel-meter.is-oversized .pm-tip{ color:var(--warn); font-weight:500; }
@media (prefers-reduced-motion:reduce){ body.page-light .parcel-meter{ animation:none; } .pm-fill{ transition:none; } }
@media (max-width:560px){ .pm-row{ grid-template-columns:minmax(78px,88px) 1fr auto; gap:.5rem; } .pm-charge{ font-size:1.2rem; } }

/* ---------- 32. HERO price dual-display — secondary "≈ AED" reference (shown when not AED) ---------- */
body.page-light .calc-live-aed{ margin-left:.5rem; font-size:.78rem; font-weight:600; color:var(--slate-light); white-space:nowrap; align-self:baseline; }
body.page-light .calc-live-aed[hidden]{ display:none; }

/* ---------- 33. SAVINGS BAND — savings proof promoted right after the hero ---------- */
body.page-light .savings-band{ padding:clamp(1.2rem,3vw,2.2rem) 0 0; }
body.page-light .savings-band:has(.vs-savings[hidden]){ padding:0; }

/* ---------- 34. "WHY YOU CAN TRUST US" — honest new-business trust section ---------- */
body.page-light .trust-why-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin-top:clamp(1.6rem,3vw,2.4rem); }
body.page-light .trust-why-card{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:1.5rem; box-shadow:var(--shadow-1); transition:border-color .25s var(--ease-soft), box-shadow .25s var(--ease-soft), transform .25s var(--ease-soft); }
body.page-light .trust-why-card:hover{ border-color:#cdd5df; box-shadow:var(--shadow-2); transform:translateY(-2px); }
.twc-ico{ display:grid; place-items:center; width:46px; height:46px; border-radius:12px; background:var(--accent-soft); color:var(--accent-dark); margin-bottom:1rem; }
.trust-why-card h3{ font-family:var(--font-head); font-weight:800; font-size:1.06rem; line-height:1.2; color:var(--ink); margin:0 0 .5rem; letter-spacing:-.01em; }
.trust-why-card p{ font-size:.92rem; line-height:1.55; color:var(--slate); margin:0; }
.twc-cards{ display:flex; gap:.4rem; margin-top:1rem; filter:drop-shadow(0 1px 2px rgba(11,27,48,.08)); }
.twc-link{ display:inline-flex; align-items:center; gap:.35rem; margin-top:.9rem; font-family:var(--font-head); font-weight:700; font-size:.9rem; color:var(--accent-dark); }
.twc-link svg{ transition:transform .2s var(--spring); }
.twc-link:hover svg{ transform:translateX(3px); }
@media (max-width:900px){ body.page-light .trust-why-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ body.page-light .trust-why-grid{ grid-template-columns:1fr; } }

/* ---------- 35. MOTION POLISH — hero price settle "pop" (signature moment) ---------- */
/* The live count-up lands with a confident beat. Flex child, so transform applies;
   anchored left so the "From" prefix never shifts. Pure visual — no reflow. */
@keyframes priceSettle { 0%{ transform:scale(1); } 42%{ transform:scale(1.05); } 100%{ transform:scale(1); } }
.calc-live-amount.price-settle { animation: priceSettle .38s var(--ease-out); transform-origin: left center; }
@media (prefers-reduced-motion: reduce){ .calc-live-amount.price-settle{ animation: none; } }

/* ---------- 36. WhatsApp pickup request (honest UAE-wide collection option) ---------- */
.faq-wa { font-weight: 700; }
body.page-light .dropoff-pickup { margin: .85rem 0 0; text-align: center; font-size: .9rem; color: var(--slate-muted); }
body.page-light .dropoff-pickup a { font-weight: 700; }
@media print { .dropoff-pickup { display: none !important; } }

/* ---------- 37. VISUAL RHYTHM + route-price weight basis ---------- */
/* The "from" route price now states its weight basis (0.5 kg), so identical entry prices read as real, not templated. */
body.page-light .route-basis{ display:block; margin-top:.18rem; font-size:.72rem; font-weight:700; color:var(--slate-light); font-variant-numeric:tabular-nums; }

/* ---------- 38. DARK NAVY ANCHOR SECTIONS — trust block + closing CTA (owner-approved 2026-06-24) ---------- */
/* A deep-navy anchor gives the eye a rest point, makes the emerald pop, and art-directs the page. */
body.page-light .trust-why,
body.page-light .cta-band{
  background:
    radial-gradient(820px 380px at 50% -12%, rgba(14,159,110,.18), transparent 60%),
    linear-gradient(180deg, #0a1b2e 0%, var(--nv-900) 56%, var(--nv-void) 100%);
  border-top:1px solid rgba(16,185,129,.20);
  border-bottom:1px solid rgba(4,16,30,.6);
  color:#fff;
}
/* headings + copy → light, heavier & tighter */
body.page-light .trust-why .eyebrow{ color:var(--emerald-400); }
body.page-light .trust-why h2,
body.page-light .cta-band h2{ color:#fff; letter-spacing:var(--tracking-tight); }
body.page-light .trust-why .section-head p,
body.page-light .cta-band p{ color:rgba(234,246,240,.74); }
/* trust cards → elevated translucent dark surfaces */
body.page-light .trust-why-card{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 20px 44px -22px rgba(0,0,0,.65);
}
body.page-light .trust-why-card:hover{
  border-color:rgba(16,185,129,.5);
  box-shadow:0 26px 54px -22px rgba(0,0,0,.75);
  transform:translateY(-3px);
}
body.page-light .trust-why-card h3{ color:#fff; }
body.page-light .trust-why-card p{ color:rgba(234,246,240,.68); }
body.page-light .trust-why .twc-ico{ background:rgba(14,159,110,.18); color:var(--emerald-400); }
body.page-light .trust-why .twc-link{ color:var(--emerald-400); }
/* closing CTA: re-enable the emerald glow + light the secondary text */
body.page-light .cta-band::after{ display:block; }
body.page-light .cta-microline{ color:rgba(234,246,240,.72); }
body.page-light .cta-quietlink{ color:rgba(234,246,240,.56); }
body.page-light .cta-quietlink:hover{ color:var(--emerald-400); }

/* ---------- 39. HERO COPY SCRIM — keeps the headline crisp over the richer committed globe ---------- */
body.page-light .hero--meridian .hero-copy{ position:relative; }
body.page-light .hero--meridian .hero-copy::before{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  left:50%; top:40%; transform:translate(-50%,-50%);
  width:102%; height:106%;
  background:radial-gradient(54% 44% at 50% 44%,
    rgba(255,255,255,.93) 0%, rgba(255,255,255,.6) 48%, rgba(255,255,255,0) 74%);
}

/* ---------- 40. POLISH — keyword highlight + elevation ladder ---------- */
/* a single emerald keyword in headlines for personality + hierarchy */
.hero-title .hl, .section-head h2 .hl{ color:var(--accent); }
/* elevation ladder: the live-price panel is a hero surface — lift it well above the supporting cards (route tiles etc. stay on the flatter --sh-2) */
body.page-light .hero--meridian .calc-live.is-open{
  box-shadow:0 26px 56px -20px rgba(11,27,48,.24), 0 6px 16px rgba(11,27,48,.07);
  border-radius:var(--radius-lg);
}

/* ---------- 41. SAVINGS PANEL — wide, clean 2-zone desktop layout (payoff | comparison) ---------- */
@media (min-width:721px){
  body.page-light .rate-savings{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
    grid-template-areas:"eyebrow eyebrow" "hero ledger" "note note";
    column-gap:clamp(1.8rem,4.5vw,3.6rem);
    align-items:center;
    padding:2rem 2.5rem 1.6rem;
  }
  body.page-light .rate-savings .rs-eyebrow{ grid-area:eyebrow; margin-bottom:1.5rem; }
  body.page-light .rate-savings .rs-hero{ grid-area:hero; flex-direction:column; align-items:flex-start; gap:.55rem; }
  body.page-light .rate-savings .rs-pct{ text-align:left; }
  body.page-light .rate-savings .rs-num{ font-size:clamp(2.4rem,3.1vw,3.05rem); }
  /* comparison moves to the right zone with a hairline divider, no top rule */
  body.page-light .rate-savings .rs-ledger{ grid-area:ledger; margin:0; border-top:0; position:relative; padding-left:clamp(1.8rem,4.5vw,3.6rem); }
  body.page-light .rate-savings .rs-ledger::before{ content:""; position:absolute; left:0; top:2%; bottom:2%; width:1px; background:var(--line); }
  body.page-light .rate-savings .rs-note{ grid-area:note; margin-top:1.55rem; }
}

/* ---------- 42. SAVINGS PANEL — premium DARK treatment (owner: "still looks cheap") ---------- */
/* A deep, lit panel so the saving + emerald pop with real depth instead of reading as a plain white box. */
body.page-light .rate-savings{
  background:
    radial-gradient(720px 340px at 16% -22%, rgba(14,159,110,.24), transparent 60%),
    linear-gradient(162deg, #0e2438 0%, var(--nv-900) 58%, var(--nv-void) 100%);
  border:1px solid rgba(16,185,129,.22);
  box-shadow:0 34px 80px -34px rgba(4,16,30,.75), 0 10px 28px rgba(4,16,30,.30);
  color:#fff;
}
body.page-light .rate-savings .rs-dot{ box-shadow:0 0 0 4px rgba(14,159,110,.28); }
body.page-light .rate-savings .rs-eyebrow-t{ color:rgba(234,246,240,.62); }
/* hero — big white saving, emerald % */
body.page-light .rate-savings .rs-lead{ color:rgba(234,246,240,.68); }
body.page-light .rate-savings .rs-figure{ color:#fff; }
body.page-light .rate-savings .rs-cur{ color:rgba(234,246,240,.55); }
body.page-light .rate-savings .rs-pct-n{ color:var(--emerald-400); }
body.page-light .rate-savings .rs-pct-l{ color:rgba(234,246,240,.5); }
/* ledger — DHL muted/struck, Aliflow emerald */
body.page-light .rate-savings .rs-ledger{ border-top-color:rgba(255,255,255,.12); }
body.page-light .rate-savings .rs-line{ border-bottom-color:rgba(255,255,255,.1); }
body.page-light .rate-savings .rs-ledger::before{ background:rgba(255,255,255,.14); }
body.page-light .rate-savings .rs-k{ color:rgba(234,246,240,.7); }
body.page-light .rate-savings .rs-k small{ color:rgba(234,246,240,.42); }
body.page-light .rate-savings .rs-v{ color:#fff; }
body.page-light .rate-savings .rs-line-dhl .rs-v{ color:rgba(234,246,240,.5); }
body.page-light .rate-savings .rs-line-dhl .rs-v s{ text-decoration-color:rgba(234,246,240,.45); }
body.page-light .rate-savings .rs-line-alf .rs-k{ color:#fff; }
body.page-light .rate-savings .rs-line-alf .rs-v{ color:var(--emerald-400); }
body.page-light .rate-savings .rs-tick{ color:var(--emerald-400); }
/* citation — recessed dark well */
body.page-light .rate-savings .rs-note{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.1); }
body.page-light .rate-savings .rs-note span{ color:rgba(234,246,240,.58); }
body.page-light .rate-savings .rs-note strong{ color:rgba(234,246,240,.84); }
body.page-light .rate-savings .rs-shield{ color:var(--emerald-400); opacity:1; }

/* ---------- 43. SAVINGS clarifier sub-line ("N% cheaper than booking DHL yourself") ---------- */
.rs-sub{ margin:.6rem 0 0; font-family:var(--font-body); font-size:.93rem; line-height:1.45; color:var(--slate); max-width:30ch; }
.rs-sub strong{ font-weight:700; color:var(--accent-dark); }
body.page-light .rate-savings .rs-sub{ color:rgba(234,246,240,.74); }
body.page-light .rate-savings .rs-sub strong{ color:var(--emerald-400); }

/* ---------- 44. CUSTOMS-DUTIES GUIDE — bullet list + VAT table ---------- */
.route-main .route-list{ margin:.7rem 0 .2rem; padding-left:1.25rem; display:grid; gap:.6rem; }
.route-main .route-list li{ line-height:1.6; color:var(--slate); }
.route-main .route-list strong{ color:var(--ink); }
.cd-table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.cd-table{ width:100%; }
.cd-table td:last-child, .cd-table th:last-child{ text-align:right; }
.cd-table td:last-child{ color:var(--ink); font-weight:600; }

/* ---------- 45. Footer address (real registered Dubai address — trust signal) ---------- */
.footer-addr{ line-height:1.55; }
.footer-addr small{ display:inline-block; margin-top:.18rem; opacity:.82; font-size:.85em; }

/* ---------- 47. Checkout top chrome — service summary strip + tabbed progress (Jumingo-style) ---------- */
.sr-only-h1 { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

body.page-light .co-head .co-strip { display: flex; align-items: center; gap: 1rem 1.7rem; flex-wrap: wrap; margin-top: .55rem; padding: .1rem .9rem; }
body.page-light .co-strip-svc { display: flex; flex-direction: column; line-height: 1.2; }
body.page-light .co-strip-carrier { font-family: var(--font-head); font-weight: 800; font-size: 1.05rem; color: #d40511; }
body.page-light .co-strip-name { font-size: .85rem; color: var(--slate); font-weight: 600; }
/* Collection → delivery journey, centered between the service block and the price */
body.page-light .co-strip-journey { display: flex; align-items: center; gap: 1.4rem; margin: 0 auto; }
body.page-light .co-strip-leg { display: flex; flex-direction: column; line-height: 1.25; }
body.page-light .co-strip-leg small,
body.page-light .co-strip-price small { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--slate-muted); font-weight: 700; }
body.page-light .co-strip-leg strong { font-family: var(--font-head); font-weight: 700; color: var(--ink); font-size: .95rem; }
body.page-light .co-strip-sub { font-size: .76rem; color: var(--slate-muted); }
/* Airplane pathway (matches the compare-rates journey) */
body.page-light .co-strip-track { display: flex; align-items: center; gap: .45rem; min-width: 210px; color: var(--accent-dark); }
@media (max-width: 560px) { body.page-light .co-strip-track { min-width: 70px; } }
body.page-light .cst-node { width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--accent-dark); background: #fff; flex: 0 0 auto; }
body.page-light .cst-node--end { background: var(--accent-dark); }
body.page-light .cst-line { flex: 1 1 auto; min-width: 24px; height: 0; border-top: 2px dotted var(--accent-dark); opacity: .5; }
body.page-light .cst-plane { display: inline-flex; flex: 0 0 auto; color: var(--accent-dark); }
body.page-light .cst-plane svg { display: block; transform: rotate(90deg); }
body.page-light .co-strip-price { display: flex; flex-direction: column; text-align: right; }
body.page-light .co-strip-price strong { font-family: var(--font-head); font-weight: 800; color: var(--ink); font-size: 1.45rem; }

/* Tabbed progress bar (replaces the numbered 1-2-3 stepbar) */
body.page-light .co-tabs { display: flex; gap: .2rem; list-style: none; margin: 0 0 1.6rem; padding: 0; border-bottom: 1.5px solid var(--line); overflow-x: auto; }
body.page-light .co-tab {
  flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .8rem 1rem; white-space: nowrap;
  font-family: var(--font-head); font-weight: 700; font-size: .92rem; color: var(--slate-muted);
  border-bottom: 2.5px solid transparent; margin-bottom: -1.5px;
  transition: color .18s ease, border-color .18s ease;
}
body.page-light .co-tab-ico { display: inline-flex; }
body.page-light .co-tab.is-done { color: var(--accent-dark); }
body.page-light .co-tab.is-active { color: var(--ink); border-bottom-color: var(--accent); }
body.page-light .co-tab.is-active .co-tab-ico { color: var(--accent-dark); }
@media (max-width: 560px) {
  body.page-light .co-tab { padding: .7rem .35rem; font-size: .8rem; gap: .3rem; }
  body.page-light .co-tab-label { display: none; }
  body.page-light .co-tab.is-active .co-tab-label { display: inline; }
}

/* ---------- 46. Checkout "Your parcel" step — Jumingo "Verpackungsart" style ---------- */
/* Slim section header bars (navy anchor, emerald icon) */
body.page-light .pay-card .pk-bar {
  display: flex; align-items: center; gap: .5rem;
  background: linear-gradient(180deg, var(--navy-800), var(--navy-900));
  color: #fff; font-family: var(--font-head); font-weight: 700; font-size: .82rem; letter-spacing: .03em;
  padding: .6rem .95rem; border-radius: 9px; margin: 1.4rem 0 0;
}
body.page-light .pay-card .pk-bar:first-child { margin-top: 0; }
body.page-light .pay-card .pk-bar svg { color: var(--accent); flex: none; }

/* Shipment-type tiles: premium illustration in a circular holder (DHL/Jumingo-style row) */
body.page-light .pay-card .parcel-type { display: flex; gap: .85rem; justify-content: flex-start; flex-wrap: wrap; margin: 1.1rem 0 .4rem; }
body.page-light .pay-card .ptype { position: relative; display: flex; flex-direction: column; align-items: center; gap: .6rem; cursor: pointer; }
body.page-light .pay-card .ptype input { position: absolute; opacity: 0; width: 1px; height: 1px; }
body.page-light .pay-card .ptype-art {
  position: relative; display: grid; place-items: center; width: 72px; height: 72px; border-radius: 12px;
  background: #f3f6fa; border: 2px solid var(--line); color: var(--slate);
  transition: border-color .15s ease, background .15s ease, box-shadow .2s ease, transform .2s ease, color .15s ease;
}
body.page-light .pay-card .ptype-art svg { width: 34px; height: 34px; display: block; }
body.page-light .pay-card .ptype:hover .ptype-art { transform: translateY(-2px); box-shadow: var(--shadow-2); }
body.page-light .pay-card .ptype-label { font-family: var(--font-head); font-weight: 700; font-size: .82rem; color: var(--slate); transition: color .15s ease; }
body.page-light .pay-card .ptype.is-selected .ptype-art { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 4px rgba(14, 159, 110, .12); color: var(--accent-dark); }
body.page-light .pay-card .ptype.is-selected .ptype-label { color: var(--accent-dark); }
body.page-light .pay-card .ptype:focus-within .ptype-art { box-shadow: var(--ring); border-color: var(--accent); }
body.page-light .pay-card .ptype.is-selected .ptype-art::after {
  content: ""; position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center / 11px no-repeat;
  box-shadow: 0 0 0 2px #fff;
}

/* Weight & dimensions readout cells (from the locked quote) */
/* Multiple parcels: each row = a Packstück */
body.page-light .pay-card .pk-packages { display: flex; flex-direction: column; gap: .9rem; margin: 1rem 0 .7rem; }
body.page-light .pay-card .pk-row + .pk-row { border-top: 1px dashed var(--line); padding-top: .9rem; }
body.page-light .pay-card .pk-row-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem; }
body.page-light .pay-card .pk-row-tag { font-family: var(--font-head); font-weight: 700; font-size: .8rem; color: var(--slate); }
body.page-light .pay-card .pk-row-remove { background: none; border: 0; padding: 0; font-size: .8rem; font-weight: 600; color: var(--slate-muted); cursor: pointer; }
body.page-light .pay-card .pk-row-remove:hover { color: var(--danger); text-decoration: underline; }

body.page-light .pay-card .pk-measures { display: flex; flex-wrap: wrap; gap: .7rem; margin: 0; }
body.page-light .pay-card .pk-cell { flex: 1 1 110px; min-width: 0; border: 1.5px solid var(--line); border-radius: 10px; padding: .5rem .6rem; background: #fff; display: flex; flex-direction: column; align-items: center; gap: .15rem; transition: border-color .15s ease, box-shadow .15s ease; }
body.page-light .pay-card .pk-cell--qty { flex: 0 0 78px; }
body.page-light .pay-card .pk-cell:focus-within { border-color: var(--accent); box-shadow: var(--ring); }
body.page-light .pay-card .pk-cell-label { font-size: .68rem; font-weight: 700; color: var(--slate-muted); text-transform: uppercase; letter-spacing: .05em; text-align: center; }
body.page-light .pay-card .pk-cell-val { font-family: var(--font-head); font-weight: 700; color: var(--ink); font-size: 1.02rem; }
body.page-light .pay-card .pk-input {
  width: 100%; border: 0; background: transparent; padding: 0; margin: 0; text-align: center;
  font-family: var(--font-head); font-weight: 700; color: var(--ink); font-size: 1.02rem; line-height: 1.3; outline: none;
  -moz-appearance: textfield;
}
body.page-light .pay-card .pk-input::-webkit-outer-spin-button,
body.page-light .pay-card .pk-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
body.page-light .pay-card .pk-input::placeholder { color: var(--slate-light); font-weight: 500; }

/* Add another parcel / Copy buttons */
body.page-light .pay-card .pk-pkg-actions { display: flex; gap: .6rem; flex-wrap: wrap; margin: 0 0 .9rem; }
body.page-light .pay-card .pk-pkg-btn {
  display: inline-flex; align-items: center; gap: .4rem; cursor: pointer;
  background: #fff; border: 1.5px solid var(--line); border-radius: 8px; padding: .5rem .9rem;
  font-family: var(--font-head); font-weight: 700; font-size: .82rem; color: var(--accent-dark);
  transition: border-color .15s ease, background .15s ease;
}
body.page-light .pay-card .pk-pkg-btn:hover { border-color: var(--accent); background: var(--accent-soft); }
body.page-light .pay-card .pk-pkg-btn svg { color: var(--accent); flex: none; }
body.page-light .pay-card .pk-measures-note { margin: 0 0 1.3rem; font-size: .82rem; color: var(--slate-muted); }
body.page-light .pay-card .pk-measures-note a { color: var(--accent-dark); font-weight: 600; }
body.page-light .pay-card .pk-measures-note a:hover { text-decoration: underline; }

/* Multi-item customs declaration (Items step) */
body.page-light .pay-card .ci-intro { color: var(--slate-muted); font-size: .86rem; margin: 0 0 1rem; }
body.page-light .pay-card .ci-item + .ci-item { border-top: 1px dashed var(--line); margin-top: 1rem; padding-top: 1rem; }
body.page-light .pay-card .ci-actions-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: .9rem 0 1.1rem; }
body.page-light .pay-card .ci-totals { font-size: .86rem; color: var(--slate-muted); }
body.page-light .pay-card .ci-totals strong { color: var(--ink); font-family: var(--font-head); font-weight: 700; }
body.page-light .pay-card .ci-reason-field { max-width: 320px; }
body.page-light .pay-card .ci-invoice { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-top: 1.1rem; padding-top: .9rem; border-top: 1px solid var(--line); }
body.page-light .pay-card .ci-invoice > span { color: var(--slate); font-weight: 600; }
body.page-light .pay-card .ci-invoice small { display: block; color: var(--slate-muted); font-size: .72rem; font-weight: 500; }
body.page-light .pay-card .ci-invoice strong { font-family: var(--font-head); font-weight: 800; font-size: 1.2rem; color: var(--ink); }

/* Service + price strip */
body.page-light .pay-card .pk-summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: .85rem 1.1rem; margin-bottom: 1.2rem;
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: 12px;
}
body.page-light .pay-card .pk-summary-svc { display: flex; flex-direction: column; }
body.page-light .pay-card .pk-summary-svc span { font-family: var(--font-head); font-weight: 700; color: var(--ink); }
body.page-light .pay-card .pk-summary-svc small { color: var(--slate-muted); font-size: .82rem; }
body.page-light .pay-card .pk-summary-price { text-align: right; }
body.page-light .pay-card .pk-summary-price small { display: block; color: var(--slate-muted); font-size: .74rem; }
body.page-light .pay-card .pk-summary-price strong { font-family: var(--font-head); font-weight: 800; font-size: 1.5rem; color: var(--ink); }

/* ---------- 48. About page ---------- */
body.page-light .about-wrap { max-width: 920px; margin: 0 auto; }
body.page-light .about-lead h2,
body.page-light .about-h2,
body.page-light .about-contact h2 { font-family: var(--font-head); font-weight: 800; color: var(--ink); font-size: 1.5rem; letter-spacing: -.02em; }
body.page-light .about-lead p { color: var(--slate); line-height: 1.7; margin: .8rem 0 0; max-width: 70ch; }
body.page-light .about-lead p strong { color: var(--ink); }
body.page-light .about-h2 { margin-top: 2.6rem; }
body.page-light .about-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); gap: 1rem; margin-top: 1.2rem; }
body.page-light .about-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 1.3rem; box-shadow: var(--shadow-1); }
body.page-light .about-card .about-ico { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 11px; background: var(--accent-soft); color: var(--accent-dark); margin-bottom: .7rem; }
body.page-light .about-card h3 { font-family: var(--font-head); font-weight: 700; color: var(--ink); font-size: 1.05rem; margin: 0 0 .35rem; }
body.page-light .about-card p { color: var(--slate); font-size: .92rem; line-height: 1.6; margin: 0; }
body.page-light .about-founder { display: flex; gap: 1.4rem; align-items: center; flex-wrap: wrap; margin-top: 2.6rem; padding: 1.5rem; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 16px; }
body.page-light .about-founder-photo { flex: none; width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 1px solid var(--line); color: var(--slate-light); overflow: hidden; }
body.page-light .about-founder-photo img { width: 100%; height: 100%; object-fit: cover; }
body.page-light .about-founder-body { flex: 1 1 320px; }
body.page-light .about-founder-quote { font-family: var(--font-head); font-weight: 600; color: var(--ink); font-size: 1.1rem; line-height: 1.5; margin: .4rem 0 .6rem; }
body.page-light .about-founder-sign { color: var(--slate); margin: 0; }
body.page-light .about-contact { margin-top: 2.6rem; }
body.page-light .about-contact .footer-addr { color: var(--slate); margin: .6rem 0 0; }
body.page-light .about-cta { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1.2rem; }