/* ==========================================================================
   Parcel From India
   Single stylesheet. Order: tokens, reset, type, layout, components, sections,
   stickies, popup, drawer, media queries.
   Brand colours sampled directly from the supplied logo.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Brand, measured from logo.png */
  --navy:          #032451;
  --navy-deep:     #021833;
  --navy-mid:      #0a3a7a;
  --navy-soft:     #10427f;
  --orange:        #fa6f02;
  --orange-bright: #ff8a2b;
  --orange-deep:   #d85d00;
  --green:         #03682b;
  --green-bright:  #0b8a3c;

  /* Neutrals */
  --ink:           #0d1b2a;
  --ink-soft:      #475569;
  --ink-faint:     #64748b;
  --line:          #e2e8f0;
  --line-soft:     #eef2f7;
  --cloud:         #f6f8fb;
  --white:         #ffffff;

  /* On-dark */
  --on-dark:       #ffffff;
  --on-dark-soft:  rgba(255, 255, 255, 0.76);
  --on-dark-faint: rgba(255, 255, 255, 0.52);
  --on-dark-line:  rgba(255, 255, 255, 0.14);

  /* Type */
  --font-display: 'Plus Jakarta Sans', 'Segoe UI', sans-serif;
  --font-body:    'Source Sans 3', 'Segoe UI', sans-serif;

  /* Space */
  --gut: 24px;
  --section-y: 104px;
  --radius:    14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* Shadow */
  --shadow-sm: 0 1px 2px rgba(3, 36, 81, .06), 0 2px 8px rgba(3, 36, 81, .05);
  --shadow:    0 2px 6px rgba(3, 36, 81, .07), 0 12px 28px rgba(3, 36, 81, .09);
  --shadow-lg: 0 8px 20px rgba(3, 36, 81, .10), 0 28px 60px rgba(3, 36, 81, .16);

  /* Layers */
  --z-header: 900;
  --z-sticky: 880;
  --z-drawer: 950;
  --z-popup:  1000;
}

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; }

button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }

ul, ol { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
  border-radius: 4px;
}

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

/* --------------------------------------------------------------------------
   3. TYPOGRAPHY
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: var(--navy);
  margin: 0 0 .5em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.3rem, 5.6vw, 4.1rem); letter-spacing: -0.035em; }
h2 { font-size: clamp(1.85rem, 3.9vw, 2.9rem); }
h3 { font-size: clamp(1.2rem, 2.1vw, 1.5rem); letter-spacing: -0.015em; }
h4 { font-size: 1.08rem; font-weight: 700; letter-spacing: -0.01em; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: .9rem;
}
.eyebrow--on-dark { color: var(--orange-bright); }

.lede {
  font-size: clamp(1.06rem, 1.6vw, 1.2rem);
  color: var(--ink-soft);
  max-width: 62ch;
}
.lede--on-dark { color: var(--on-dark-soft); }

.section-head { max-width: 760px; margin-bottom: 56px; }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }

/* --------------------------------------------------------------------------
   4. LAYOUT
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: var(--gut);
}

.section { padding-block: var(--section-y); }
.section--tight { padding-block: 72px; }
.section--cloud { background: var(--cloud); }
.section--navy { background: var(--navy); color: var(--on-dark); }
.section--navy h2, .section--navy h3, .section--navy h4 { color: var(--on-dark); }

/* --------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.01em;
  padding: 15px 28px;
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  transition: transform .18s ease, background-color .18s ease,
              border-color .18s ease, color .18s ease, box-shadow .18s ease;
  white-space: nowrap;
  min-height: 52px;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn svg { flex: none; }

.btn--accent { background: var(--orange); color: #fff; box-shadow: 0 6px 18px rgba(250, 111, 2, .32); }
.btn--accent:hover { background: var(--orange-bright); box-shadow: 0 10px 26px rgba(250, 111, 2, .4); }

.btn--whatsapp { background: var(--green); color: #fff; box-shadow: 0 6px 18px rgba(3, 104, 43, .28); }
.btn--whatsapp:hover { background: var(--green-bright); box-shadow: 0 10px 26px rgba(3, 104, 43, .36); }

.btn--navy { background: var(--navy); color: #fff; }
.btn--navy:hover { background: var(--navy-mid); }

.btn--ghost-light { border-color: rgba(255,255,255,.4); color: #fff; }
.btn--ghost-light:hover { border-color: #fff; background: rgba(255,255,255,.1); }

.btn--ghost { border-color: var(--line); color: var(--navy); background: #fff; }
.btn--ghost:hover { border-color: var(--navy); }

.btn--sm { padding: 11px 20px; font-size: .94rem; min-height: 44px; }
.btn--block { width: 100%; }

/* Text link with arrow */
.tlink {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--navy-mid);
  border-bottom: 2px solid transparent;
  transition: color .18s ease, border-color .18s ease, gap .18s ease;
}
.tlink:hover { color: var(--orange); border-color: var(--orange); gap: .75em; }
.tlink--on-dark { color: var(--orange-bright); }
.tlink--on-dark:hover { color: #fff; border-color: #fff; }

/* --------------------------------------------------------------------------
   6. TOP BAR
   -------------------------------------------------------------------------- */
.topbar {
  background: var(--navy-deep);
  color: var(--on-dark-soft);
  font-size: .85rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 42px;
  padding-block: 7px;
}
.topbar__list { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.topbar__item { display: inline-flex; align-items: center; gap: .5em; }
.topbar__item svg { color: var(--orange-bright); flex: none; }
.topbar a.topbar__item:hover { color: #fff; }
.topbar__item strong { color: #fff; font-weight: 700; }

/* --------------------------------------------------------------------------
   7. HEADER
   -------------------------------------------------------------------------- */
.header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--navy);
  transition: box-shadow .25s ease, background-color .25s ease;
}
.header.is-scrolled { box-shadow: 0 10px 34px rgba(2, 24, 51, .35); }

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  min-height: 82px;
}

.header__logo img { width: 200px; height: auto; }

.header__nav { display: flex; align-items: center; gap: 34px; }

.nav__links { display: flex; align-items: center; gap: 6px; }
.nav__links > a,
.nav__drop > a {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .97rem;
  color: var(--on-dark-soft);
  padding: 10px 14px;
  border-radius: 10px;
  white-space: nowrap;
  transition: color .18s ease, background-color .18s ease;
}
.nav__links > a:hover,
.nav__drop:hover > a { color: #fff; background: rgba(255,255,255,.08); }
.nav__links > a.active,
.nav__drop > a.active { color: #fff; }
.nav__links > a.active::after {
  content: '';
  position: absolute;
}

.nav__drop { position: relative; }
.nav__drop .chev { transition: transform .2s ease; }
.nav__drop:hover .chev { transform: rotate(180deg); }

.dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 272px;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 10px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.nav__drop:hover .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown::before { content: ''; position: absolute; top: -12px; left: 0; right: 0; height: 12px; }
.dropdown a {
  display: block;
  padding: 10px 14px;
  border-radius: 9px;
  font-size: .95rem;
  font-weight: 600;
  color: var(--navy);
  transition: background-color .15s ease, color .15s ease;
}
.dropdown a:hover { background: var(--cloud); color: var(--orange); }

.header__cta { display: flex; align-items: center; gap: 12px; }
.header__phone {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .97rem;
  color: #fff;
  padding: 10px 6px;
  white-space: nowrap;
}
.header__phone svg { color: var(--orange-bright); }
.header__phone:hover { color: var(--orange-bright); }

.hamburger {
  display: none;
  width: 46px; height: 46px;
  border-radius: 11px;
  background: rgba(255,255,255,.1);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}
.hamburger span {
  display: block; width: 21px; height: 2px;
  background: #fff; border-radius: 2px;
  transition: transform .25s ease, opacity .2s ease;
}
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   8. HERO
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--navy-deep);
  color: var(--on-dark);
  overflow: hidden;
  isolation: isolate;
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img,
.hero__media video {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 42%;
}
.hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(104deg, rgba(2,24,51,.95) 0%, rgba(2,24,51,.88) 38%, rgba(2,24,51,.62) 68%, rgba(2,24,51,.5) 100%),
    linear-gradient(to top, rgba(2,24,51,.85) 0%, rgba(2,24,51,0) 46%);
}

.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: 64px;
  align-items: center;
  padding-block: clamp(72px, 9vw, 124px);
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  font-family: var(--font-display);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(255,255,255,.1);
  border: 1px solid var(--on-dark-line);
  padding: 8px 16px 8px 10px;
  border-radius: var(--radius-pill);
  margin-bottom: 26px;
  backdrop-filter: blur(6px);
}
.hero__badge .dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34,197,94,.22);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(34,197,94,.22); }
  50%      { box-shadow: 0 0 0 9px rgba(34,197,94,0); }
}

.hero h1 { color: #fff; margin-bottom: .45em; }
.hero h1 .accent {
  color: var(--orange-bright);
  display: inline-block;
}
.hero__sub { font-size: clamp(1.06rem, 1.7vw, 1.26rem); color: var(--on-dark-soft); max-width: 54ch; margin-bottom: 34px; }

.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 38px; }

.hero__proof {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 14px 34px;
  padding-top: 28px;
  border-top: 1px solid var(--on-dark-line);
  justify-content: start;
}
.hero__proof div { display: flex; flex-direction: column; }
.hero__proof .n {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.hero__proof .l { font-size: .84rem; color: var(--on-dark-faint); letter-spacing: .02em; }

/* --------------------------------------------------------------------------
   9. RATE CALCULATOR CARD
   -------------------------------------------------------------------------- */
.calc {
  background: rgba(255,255,255,.07);
  border: 1px solid var(--on-dark-line);
  border-radius: var(--radius-lg);
  padding: 30px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 30px 70px rgba(0,0,0,.34);
}
.calc__head { margin-bottom: 22px; }
.calc__head h2 {
  color: #fff;
  font-size: 1.42rem;
  margin-bottom: .3em;
  letter-spacing: -0.02em;
}
.calc__head p { font-size: .93rem; color: var(--on-dark-faint); margin: 0; }

.calc__field { margin-bottom: 16px; }
.calc__field label {
  display: block;
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--on-dark-faint);
  margin-bottom: 8px;
}
.calc select {
  width: 100%;
  min-height: 54px;
  padding: 13px 44px 13px 16px;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  background-color: rgba(2,24,51,.62);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 12px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff8a2b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 18px;
  transition: border-color .18s ease;
}
.calc select:hover { border-color: rgba(255,255,255,.4); }
.calc select option { background: #03244f; color: #fff; }

.calc__note {
  display: flex;
  gap: .55em;
  font-size: .8rem;
  color: var(--on-dark-faint);
  margin-top: 16px;
  line-height: 1.5;
}
.calc__note svg { flex: none; margin-top: 3px; color: var(--on-dark-faint); }

/* Results */
.calc__results { margin-top: 20px; }
.calc__results[hidden] { display: none; }
.calc__resulthead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: .82rem;
  color: var(--on-dark-faint);
  margin-bottom: 12px;
  padding-top: 20px;
  border-top: 1px solid var(--on-dark-line);
}
.calc__resulthead strong { color: #fff; font-family: var(--font-display); font-size: .95rem; }

.rate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  margin-bottom: 10px;
  animation: rise .35s ease backwards;
}
.rate:nth-child(2) { animation-delay: .06s; }
.rate:nth-child(3) { animation-delay: .12s; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }

.rate__courier { display: flex; flex-direction: column; gap: 2px; }
.rate__name { font-family: var(--font-display); font-weight: 800; color: #fff; font-size: 1rem; letter-spacing: -0.01em; }
.rate__eta { font-size: .8rem; color: var(--on-dark-faint); }
.rate__price { font-family: var(--font-display); font-weight: 800; font-size: 1.28rem; color: var(--orange-bright); letter-spacing: -0.02em; }
.rate--best { border-color: rgba(11,138,60,.6); background: rgba(11,138,60,.14); }
.rate__tag {
  display: inline-block;
  font-family: var(--font-display);
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #fff;
  background: var(--green-bright);
  padding: 2px 7px;
  border-radius: 5px;
  margin-left: 7px;
  vertical-align: 2px;
}

.calc__cta { margin-top: 16px; }
.calc__empty { font-size: .9rem; color: var(--on-dark-faint); padding-top: 20px; border-top: 1px solid var(--on-dark-line); }

/* --------------------------------------------------------------------------
   10. AEO ANSWER BLOCK
   -------------------------------------------------------------------------- */
.answer {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  background: var(--cloud);
  border-left: 5px solid var(--orange);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 30px 34px;
}
.answer__icon {
  width: 46px; height: 46px;
  border-radius: 12px;
  background: var(--navy);
  color: #fff;
  display: grid;
  place-items: center;
  flex: none;
}
.answer h2 { font-size: 1.25rem; margin-bottom: .45em; }
.answer p { color: var(--ink-soft); margin: 0; font-size: 1.04rem; }

/* --------------------------------------------------------------------------
   11. STEPS
   -------------------------------------------------------------------------- */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  counter-reset: step;
  /* One second per numeral across four numerals. Retune here only. */
  --step-cycle: 4s;
}
.step {
  position: relative;
  padding: 0 26px;
  border-left: 1px solid var(--line);
}
.step:first-child { padding-left: 0; border-left: 0; }
.step:last-child { padding-right: 0; }
.step__n {
  font-family: var(--font-display);
  font-size: 3.4rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 2px var(--line);
  margin-bottom: 18px;
  will-change: color, filter, transform;
  animation: stepRelay var(--step-cycle) linear infinite;
}

/* Travelling highlight. Each numeral holds the light for a quarter of the
   cycle, then hands it to the next one. Four steps, four seconds, loops.
   Delays are derived from --step-cycle so the rhythm stays in sync if the
   speed is ever retuned. */
.step:nth-child(1) .step__n { animation-delay: calc(var(--step-cycle) * 0);    }
.step:nth-child(2) .step__n { animation-delay: calc(var(--step-cycle) * 0.25); }
.step:nth-child(3) .step__n { animation-delay: calc(var(--step-cycle) * 0.5);  }
.step:nth-child(4) .step__n { animation-delay: calc(var(--step-cycle) * 0.75); }

@keyframes stepRelay {
  0%, 25%, 100% {
    color: transparent;
    -webkit-text-stroke-color: var(--line);
    filter: none;
    transform: translateY(0);
  }
  4%, 21% {
    color: rgba(250, 111, 2, .17);
    -webkit-text-stroke-color: var(--orange);
    filter: drop-shadow(0 6px 20px rgba(250, 111, 2, .42));
    transform: translateY(-3px);
  }
}
.step h3 { margin-bottom: .45em; }
.step p { color: var(--ink-soft); font-size: .98rem; margin: 0; }

/* --------------------------------------------------------------------------
   12. BENEFIT CARDS
   -------------------------------------------------------------------------- */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 20px;
}
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 26px;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: transparent; }
.card__icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  display: grid; place-items: center;
  background: rgba(250,111,2,.1);
  color: var(--orange);
  margin-bottom: 18px;
}
.card--green .card__icon { background: rgba(3,104,43,.1); color: var(--green); }
.card h3 { font-size: 1.1rem; margin-bottom: .4em; }
.card p { color: var(--ink-soft); font-size: .96rem; margin: 0; }

/* On navy */
.section--navy .card {
  background: rgba(255,255,255,.05);
  border-color: var(--on-dark-line);
}
.section--navy .card:hover { background: rgba(255,255,255,.09); box-shadow: none; border-color: rgba(255,255,255,.26); }
.section--navy .card p { color: var(--on-dark-soft); }
.section--navy .card__icon { background: rgba(255,255,255,.1); color: var(--orange-bright); }

/* --------------------------------------------------------------------------
   13. CHIP MARQUEE
   -------------------------------------------------------------------------- */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.marquee__track { display: flex; gap: 14px; width: max-content; animation: slide 46s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }

.chip {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--navy);
  background: #fff;
  border: 1px solid var(--line);
  padding: 13px 24px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.chip svg { color: var(--orange); flex: none; }

/* --------------------------------------------------------------------------
   14. COUNTRY CARDS
   -------------------------------------------------------------------------- */
.countries { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.country {
  display: block;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.country:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: transparent; }
.country__flag { line-height: 0; margin-bottom: 18px; }
.country__flag svg {
  width: 52px; height: auto;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(3,36,81,.22);
}
.country h3 { font-size: 1.12rem; margin-bottom: .55em; }
.country__meta { display: flex; flex-direction: column; gap: 5px; font-size: .9rem; color: var(--ink-soft); margin-bottom: 18px; }
.country__meta b { color: var(--navy); font-family: var(--font-display); }
.country__go { display: inline-flex; align-items: center; gap: .4em; font-family: var(--font-display); font-weight: 700; font-size: .92rem; color: var(--orange); }
.country:hover .country__go { gap: .7em; }

/* --------------------------------------------------------------------------
   15. PRICING SPLIT
   -------------------------------------------------------------------------- */
.pricing { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.panel {
  border-radius: var(--radius-lg);
  padding: 38px;
  border: 1px solid var(--line);
  background: #fff;
}
.panel--included { background: var(--navy); border-color: transparent; color: var(--on-dark); }
.panel--included h3 { color: #fff; }
.panel__tag {
  display: inline-block;
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 6px;
  margin-bottom: 16px;
}
.panel--included .panel__tag { background: var(--green-bright); color: #fff; }
.panel--addon .panel__tag { background: rgba(250,111,2,.12); color: var(--orange-deep); }

.plist { display: flex; flex-direction: column; }
.plist li {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-size: .99rem;
}
.panel--included .plist li { border-color: var(--on-dark-line); }
.plist li:last-child { border-bottom: 0; padding-bottom: 0; }
.plist .pname { display: flex; align-items: flex-start; gap: .65em; }
.plist .pname svg { flex: none; margin-top: 4px; color: var(--green-bright); }
.panel--addon .plist .pname svg { color: var(--orange); }
.plist .pprice { font-family: var(--font-display); font-weight: 800; white-space: nowrap; color: var(--navy); }
.panel--included .plist .pprice { color: #6ee7a0; }
.plist .pfree { color: var(--green-bright); }

/* --------------------------------------------------------------------------
   16. FOUNDER
   -------------------------------------------------------------------------- */
.founder { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 60px; align-items: center; }

.founder__media { position: relative; }
.founder__media::before {
  content: '';
  position: absolute;
  inset: -14px -14px 70px 26px;
  border-radius: var(--radius-lg);
  background: linear-gradient(150deg, var(--orange) 0%, var(--green) 100%);
  opacity: .16;
}
.founder__photo {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 18%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.founder__quote {
  position: relative;
  background: var(--navy);
  color: var(--on-dark);
  border-radius: var(--radius-lg);
  padding: 34px 32px 30px;
  overflow: hidden;
  margin: -78px 0 0 34px;
  box-shadow: 0 18px 44px rgba(2, 24, 51, .3);
}
.founder__quote::before {
  content: '\201C';
  position: absolute;
  top: -42px; right: 12px;
  font-family: var(--font-display);
  font-size: 11rem;
  line-height: 1;
  color: rgba(255,255,255,.08);
}
.founder__quote blockquote {
  margin: 0 0 20px;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.55vw, 1.22rem);
  font-weight: 700;
  line-height: 1.42;
  letter-spacing: -0.02em;
  color: #fff;
  position: relative;
}
.founder__who { position: relative; padding-top: 18px; border-top: 1px solid var(--on-dark-line); }
.founder__who .nm { font-family: var(--font-display); font-weight: 800; color: #fff; display: block; line-height: 1.3; }
.founder__who .rl { font-size: .88rem; color: var(--on-dark-faint); }

/* --------------------------------------------------------------------------
   17. FAQ
   -------------------------------------------------------------------------- */
.faq { max-width: 860px; margin-inline: auto; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  text-align: left;
  padding: 24px 0;
  font-family: var(--font-display);
  font-size: clamp(1.02rem, 1.6vw, 1.14rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--navy);
  transition: color .18s ease;
}
.faq__q:hover { color: var(--orange); }
.faq__ic {
  flex: none;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--cloud);
  display: grid; place-items: center;
  color: var(--navy);
  transition: transform .28s ease, background-color .2s ease, color .2s ease;
  margin-top: 1px;
}
.faq__q[aria-expanded="true"] .faq__ic { transform: rotate(45deg); background: var(--orange); color: #fff; }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.faq__a > div { overflow: hidden; }
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a p { color: var(--ink-soft); padding-bottom: 26px; margin: 0; max-width: 72ch; }

/* --------------------------------------------------------------------------
   18. CTA BAND
   -------------------------------------------------------------------------- */
.ctaband {
  background: linear-gradient(118deg, var(--navy) 0%, var(--navy-mid) 58%, #0f4d96 100%);
  color: var(--on-dark);
  border-radius: var(--radius-lg);
  padding: clamp(44px, 6vw, 72px);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.ctaband::after {
  content: '';
  position: absolute;
  width: 420px; height: 420px;
  right: -120px; top: -160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(250,111,2,.3), transparent 68%);
}
.ctaband > * { position: relative; }
.ctaband h2 { color: #fff; margin-bottom: .4em; }
.ctaband p { color: var(--on-dark-soft); max-width: 56ch; margin: 0 auto 32px; font-size: 1.08rem; }
.ctaband__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* --------------------------------------------------------------------------
   19. FOOTER
   -------------------------------------------------------------------------- */
.footer { background: var(--navy-deep); color: var(--on-dark-soft); padding-top: 76px; font-size: .95rem; }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.4fr; gap: 48px; padding-bottom: 56px; }
.footer h4 {
  color: #fff;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.footer__brand img { width: 210px; margin-bottom: 20px; }
.footer__brand p { max-width: 38ch; margin-bottom: 22px; line-height: 1.6; }
.footer__links { display: flex; flex-direction: column; gap: 11px; }
.footer__links a { transition: color .16s ease, padding-left .16s ease; }
.footer__links a:hover { color: var(--orange-bright); padding-left: 4px; }

.footer__social { display: flex; gap: 10px; }
.footer__social a {
  width: 40px; height: 40px;
  border-radius: 11px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.08);
  color: #fff;
  transition: background-color .18s ease, transform .18s ease;
}
.footer__social a:hover { background: var(--orange); transform: translateY(-2px); }

.footer__ci { display: flex; gap: 12px; margin-bottom: 16px; align-items: flex-start; }
.footer__ci svg { flex: none; margin-top: 3px; color: var(--orange-bright); }
.footer__ci a:hover { color: #fff; }

.footer__bottom {
  border-top: 1px solid rgba(255,255,255,.1);
  padding-block: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: .88rem;
  color: var(--on-dark-faint);
}
.footer__legal { display: flex; gap: 20px; flex-wrap: wrap; }
.footer__legal a:hover { color: #fff; }

/* --------------------------------------------------------------------------
   20. STICKY CTAS
   -------------------------------------------------------------------------- */
.side-cta {
  position: fixed;
  right: 0; top: 50%;
  transform: translateY(-50%);
  z-index: var(--z-sticky);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.side-cta a {
  display: flex;
  align-items: center;
  gap: .55em;
  padding: 14px 16px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .9rem;
  color: #fff;
  border-radius: 12px 0 0 12px;
  box-shadow: -4px 6px 22px rgba(3,36,81,.22);
  transition: padding-right .2s ease, filter .2s ease;
}
.side-cta a:hover { padding-right: 24px; filter: brightness(1.08); }
.side-cta .s-wa { background: var(--green); }
.side-cta .s-calc { background: var(--orange); }

.mobile-bar {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: var(--z-sticky);
  background: #fff;
  border-top: 1px solid var(--line);
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  gap: 10px;
  box-shadow: 0 -6px 26px rgba(3,36,81,.12);
}
.mobile-bar a { flex: 1; min-height: 50px; font-size: .95rem; padding-inline: 10px; }

/* --------------------------------------------------------------------------
   21. MOBILE DRAWER
   -------------------------------------------------------------------------- */
.drawer-overlay {
  position: fixed; inset: 0;
  background: rgba(2,24,51,.6);
  backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden;
  transition: opacity .25s ease, visibility .25s;
  z-index: var(--z-drawer);
}
.drawer-overlay.is-open { opacity: 1; visibility: visible; }

.drawer {
  position: fixed;
  top: 0; right: 0;
  width: min(360px, 88vw);
  height: 100dvh;
  background: var(--navy);
  color: var(--on-dark);
  z-index: calc(var(--z-drawer) + 1);
  transform: translateX(103%);
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.drawer.is-open { transform: translateX(0); }

.drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 20px 22px;
  border-bottom: 1px solid var(--on-dark-line);
  position: sticky; top: 0;
  background: var(--navy);
}
.drawer__head img { width: 160px; }
.drawer__close {
  width: 42px; height: 42px; border-radius: 11px;
  background: rgba(255,255,255,.1);
  display: grid; place-items: center; color: #fff;
}

.drawer__nav { padding: 14px 14px 22px; display: flex; flex-direction: column; }
.drawer__nav > a,
.drawer__toggle {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; text-align: left;
  padding: 15px 12px;
  font-family: var(--font-display);
  font-weight: 700; font-size: 1.04rem;
  color: #fff;
  border-radius: 10px;
}
.drawer__nav > a:hover, .drawer__toggle:hover { background: rgba(255,255,255,.08); }
.drawer__toggle .chev { transition: transform .25s ease; color: var(--orange-bright); }
.drawer__toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }
.drawer__sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s ease; }
.drawer__sub > div { overflow: hidden; }
.drawer__sub.is-open { grid-template-rows: 1fr; }
.drawer__sub a {
  display: block;
  padding: 11px 12px 11px 26px;
  font-size: .97rem;
  color: var(--on-dark-soft);
  border-left: 2px solid var(--on-dark-line);
  margin-left: 12px;
}
.drawer__sub a:hover { color: #fff; border-color: var(--orange); }

.drawer__cta { padding: 6px 22px 22px; display: flex; flex-direction: column; gap: 10px; }
.drawer__info {
  padding: 22px;
  border-top: 1px solid var(--on-dark-line);
  font-size: .89rem;
  color: var(--on-dark-faint);
  line-height: 1.6;
}
.drawer__info strong { color: #fff; display: block; margin-bottom: 4px; font-family: var(--font-display); }

/* --------------------------------------------------------------------------
   22. POPUP FORM
   -------------------------------------------------------------------------- */
.popup-overlay {
  position: fixed; inset: 0;
  z-index: var(--z-popup);
  background: rgba(2,24,51,.72);
  backdrop-filter: blur(4px);
  display: grid; place-items: center;
  padding: 20px;
  opacity: 0; visibility: hidden;
  transition: opacity .25s ease, visibility .25s;
  overflow-y: auto;
}
.popup-overlay.is-open { opacity: 1; visibility: visible; }

.popup {
  position: relative;
  width: min(520px, 100%);
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 38px 36px 32px;
  box-shadow: var(--shadow-lg);
  transform: translateY(18px) scale(.98);
  transition: transform .3s cubic-bezier(.3, 1.1, .4, 1);
  margin-block: auto;
}
.popup-overlay.is-open .popup { transform: none; }

.popup__close {
  position: absolute; top: 14px; right: 14px;
  width: 40px; height: 40px; border-radius: 11px;
  display: grid; place-items: center;
  color: var(--ink-faint);
  transition: background-color .16s ease, color .16s ease;
}
.popup__close:hover { background: var(--cloud); color: var(--navy); }

.popup img.popup__logo { width: 180px; margin-bottom: 18px; }
.popup h3 { font-size: 1.44rem; margin-bottom: .35em; }
.popup__sub { color: var(--ink-soft); font-size: .97rem; margin-bottom: 24px; }

.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.popup input, .popup select, .popup textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 14px 16px;
  min-height: 52px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--cloud);
  color: var(--ink);
  margin-bottom: 12px;
  transition: border-color .18s ease, background-color .18s ease;
}
.popup textarea { min-height: auto; resize: vertical; }
.popup input:focus, .popup select:focus, .popup textarea:focus {
  outline: none; border-color: var(--orange); background: #fff;
}
.popup input::placeholder, .popup textarea::placeholder { color: var(--ink-faint); }
.popup select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 18px;
  padding-right: 44px;
}
.popup__note {
  display: flex; align-items: center; gap: .5em;
  font-size: .82rem; color: var(--ink-faint);
  margin: 14px 0 0; justify-content: center;
}
.popup__note svg { flex: none; }
.popup__note a { color: var(--navy-mid); text-decoration: underline; }

/* --------------------------------------------------------------------------
   23. REVEAL ON SCROLL
   -------------------------------------------------------------------------- */
/* Only hide for reveal when JS is running, otherwise the page is blank without it. */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; } }

/* --------------------------------------------------------------------------
   24. MEDIA QUERIES
   -------------------------------------------------------------------------- */
/* The edge CTA only earns its place when there is gutter beside the container,
   otherwise it sits on top of the rate card. */
@media (max-width: 1420px) {
  .side-cta { display: none; }
}

@media (max-width: 1340px) {
  .header__nav { gap: 20px; }
  .nav__links > a, .nav__drop > a { padding: 10px 11px; font-size: .94rem; }
}

@media (max-width: 1220px) {
  .header__phone { display: none; }
}

@media (max-width: 1180px) {
  .hero__inner { grid-template-columns: 1fr; gap: 48px; }
  .calc { max-width: 560px; }
  .footer__grid { grid-template-columns: 1.4fr 1fr 1.3fr; }
  .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 1023px) {
  :root { --section-y: 76px; }
  .header__nav { display: none; }
  .hamburger { display: flex; }
  .side-cta { display: none; }
  .steps { grid-template-columns: repeat(2, 1fr); gap: 36px 0; }
  .step { padding-left: 26px; border-left: 1px solid var(--line); }
  .step:nth-child(odd) { padding-left: 0; border-left: 0; }
  .countries { grid-template-columns: repeat(2, 1fr); }
  .pricing { grid-template-columns: 1fr; }
  .founder { grid-template-columns: 1fr; gap: 40px; }
  .topbar__list .topbar__item:nth-child(n+3) { display: none; }
}

@media (max-width: 767px) {
  body { font-size: 16.5px; padding-bottom: 76px; }
  :root { --gut: 18px; --section-y: 60px; }

  .topbar { display: none; }
  .header__inner { min-height: 70px; }
  .header__logo img { width: 164px; }
  .header__cta { display: none; }

  .mobile-bar { display: flex; }

  .hero__inner { padding-block: 54px 64px; gap: 36px; }
  .hero__proof { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .hero__actions .btn { flex: 1 1 100%; }

  .calc { padding: 24px 20px; max-width: none; }
  .calc__head h2 { font-size: 1.25rem; }

  .answer { grid-template-columns: 1fr; gap: 16px; padding: 26px 22px; }

  .steps { grid-template-columns: 1fr; gap: 30px; }
  .step, .step:nth-child(odd) { padding-left: 0; border-left: 0; }
  .step__n { font-size: 2.8rem; margin-bottom: 10px; }

  .countries { grid-template-columns: 1fr; }
  .panel { padding: 28px 24px; }
  .founder__quote { margin: -56px 12px 0; padding: 28px 24px 24px; }
  .founder__media::before { inset: -10px -10px 54px 16px; }

  .footer { padding-top: 54px; }
  .footer__grid { grid-template-columns: 1fr; gap: 36px; padding-bottom: 40px; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }

  .popup { padding: 32px 22px 26px; }
  .form__row { grid-template-columns: 1fr; }
  .ctaband__actions .btn { flex: 1 1 100%; }
}

/* ==========================================================================
   25. INNER PAGE COMPONENTS
   Everything below is used by generated pages only. The homepage does not
   reference any of it.
   ========================================================================== */

/* --- Breadcrumbs --- */
.crumbs {
  background: var(--cloud);
  border-bottom: 1px solid var(--line);
  font-size: .88rem;
  color: var(--ink-faint);
}
.crumbs .container { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-block: 13px; }
.crumbs a { color: var(--navy-mid); font-weight: 600; }
.crumbs a:hover { color: var(--orange); text-decoration: underline; }
.crumbs .crumb-sep { color: var(--line); }
.crumbs [aria-current] { color: var(--ink-soft); }

/* --- Page hero --- */
.phero {
  background:
    radial-gradient(1100px 440px at 78% -18%, rgba(250,111,2,.3), transparent 62%),
    linear-gradient(118deg, var(--navy-deep) 0%, var(--navy) 52%, #0b3f82 100%);
  color: var(--on-dark);
}
.phero__inner { padding-block: clamp(52px, 7vw, 92px); max-width: 860px; }
.phero h1 { color: #fff; margin-bottom: .45em; }
.phero .lede { margin-bottom: 32px; }
.phero__actions { display: flex; flex-wrap: wrap; gap: 13px; }

/* --- Prose block --- */
.prose { max-width: 780px; }
.prose p { color: var(--ink-soft); font-size: 1.05rem; }
.prose p strong { color: var(--navy); font-weight: 700; }
.section--navy .prose p { color: var(--on-dark-soft); }
.section--navy .prose p strong { color: #fff; }

/* --- Two column split --- */
.split { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 56px; align-items: start; }
.split .panel { position: sticky; top: 110px; }
.split p { color: var(--ink-soft); }
.split p strong { color: var(--navy); font-weight: 700; }

/* --- Data table --- */
.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.dtable { width: 100%; border-collapse: collapse; font-size: .97rem; min-width: 520px; }
.dtable th {
  text-align: left;
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #fff;
  background: var(--navy);
  padding: 15px 18px;
  white-space: nowrap;
}
.dtable td { padding: 15px 18px; border-top: 1px solid var(--line); color: var(--ink-soft); vertical-align: top; }
.dtable td.k { font-weight: 700; color: var(--navy); font-family: var(--font-display); }
.dtable tbody tr:nth-child(even) { background: #fbfcfe; }
.tnote { margin-top: 16px; font-size: .88rem; color: var(--ink-faint); max-width: 76ch; }

/* --- Related cards --- */
.related { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.relcard {
  display: block;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.relcard:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: transparent; }
.relcard h3 { font-size: 1.08rem; margin-bottom: .4em; }
.relcard p { color: var(--ink-soft); font-size: .94rem; margin-bottom: 16px; }
.relcard .country__go { font-size: .9rem; }
.relcard:hover .country__go { gap: .7em; }

/* --- Carrier trust strip --- */
.carriers {
  display: flex;
  align-items: center;
  gap: 34px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 26px 30px;
  background: var(--cloud);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.carriers__label {
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.carriers__list { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; justify-content: center; }
.carrier {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .95rem;
  color: var(--ink-soft);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.carrier span { font-weight: 800; font-size: 1.22rem; letter-spacing: -0.03em; }
.carrier--dhl   span { color: #d40511; }
.carrier--ups   span { color: #5a3a22; }
.carrier--fedex span { color: #4d148c; }
.carrier--fedex em { font-style: normal; font-weight: 800; font-size: 1.22rem; letter-spacing: -0.03em; color: #ff6600; }

/* --- Contact page --- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; align-items: start; }
.ccard {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 22px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 13px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.ccard:hover { transform: translateX(4px); box-shadow: var(--shadow-sm); border-color: var(--navy-soft); }
.ccard__ic {
  width: 50px; height: 50px; flex: none;
  border-radius: 13px;
  display: grid; place-items: center;
  background: rgba(250,111,2,.1);
  color: var(--orange);
}
.ccard--wa .ccard__ic { background: rgba(3,104,43,.1); color: var(--green); }
.ccard > span:last-child { display: flex; flex-direction: column; gap: 1px; }
.ccard strong { font-family: var(--font-display); font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.ccard em { font-style: normal; font-family: var(--font-display); font-weight: 800; font-size: 1.08rem; color: var(--navy); letter-spacing: -0.015em; }
.ccard small { font-size: .87rem; color: var(--ink-faint); }

/* --- Steps variants for counts other than four --- */
.steps--3 { grid-template-columns: repeat(3, 1fr); }
.steps--3 { --step-cycle: 3s; }
.steps--3 .step:nth-child(1) .step__n { animation-delay: calc(var(--step-cycle) * 0); }
.steps--3 .step:nth-child(2) .step__n { animation-delay: calc(var(--step-cycle) * 0.3333); }
.steps--3 .step:nth-child(3) .step__n { animation-delay: calc(var(--step-cycle) * 0.6667); }
@media (min-width: 1024px) { .steps--3 .step:nth-child(4) { display: none; } }

/* On a lighter section the step rule needs the same outline treatment */
.section--cloud .step { border-color: #dde5ef; }

/* --- Inner page media queries --- */
@media (max-width: 1023px) {
  .split { grid-template-columns: 1fr; gap: 36px; }
  .split .panel { position: static; }
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .related { grid-template-columns: 1fr; }
  .steps--3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
  .crumbs { font-size: .8rem; }
  .crumbs .container { padding-block: 11px; }
  .phero__inner { padding-block: 40px 48px; }
  .phero__actions .btn { flex: 1 1 100%; }
  .carriers { gap: 18px; padding: 22px 18px; }
  .carriers__list { gap: 20px; }
  .steps--3 { grid-template-columns: 1fr; }
  .ccard { padding: 16px 16px; gap: 14px; }
  .ccard__ic { width: 44px; height: 44px; }
}

/* ==========================================================================
   26. DESTINATION PAGE COMPONENTS
   ========================================================================== */

/* --- Rate panel --- */
.ratepanel { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .9fr); gap: 32px; align-items: start; }
.ratepanel__main {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 38px 36px;
}
.ratepanel__main h3 { font-size: 1.22rem; margin-bottom: 1.1em; }

.ratesteps { display: flex; flex-direction: column; gap: 22px; }
.ratesteps li { display: flex; gap: 18px; align-items: flex-start; }
.ratesteps li > span {
  flex: none;
  width: 34px; height: 34px;
  border-radius: 10px;
  display: grid; place-items: center;
  background: var(--navy);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .95rem;
}
.ratesteps li > div { color: var(--ink-soft); font-size: .99rem; line-height: 1.6; }
.ratesteps strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.02rem;
  color: var(--navy);
  margin-bottom: 3px;
  letter-spacing: -0.015em;
}

.ratepanel__side {
  background: var(--navy);
  color: var(--on-dark);
  border-radius: var(--radius-lg);
  padding: 34px 30px;
  position: sticky;
  top: 110px;
}
.ratepanel__side h3 { color: #fff; font-size: 1.18rem; margin-bottom: .55em; }
.ratepanel__side > p { color: var(--on-dark-soft); font-size: .96rem; margin-bottom: 22px; }
.ratepanel__side .panel__tag { background: var(--green-bright); color: #fff; }
.ratepanel__side .btn--ghost { background: transparent; border-color: rgba(255,255,255,.34); color: #fff; }
.ratepanel__side .btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,.1); }
.ratepanel__note { font-size: .84rem; color: var(--on-dark-faint); margin: 16px 0 0; text-align: center; }

/* --- Notice block --- */
.notice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 26px;
  align-items: start;
  background: var(--cloud);
  border: 1px solid var(--line);
  border-left: 5px solid var(--navy-mid);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  padding: 38px 40px;
}
.notice--alert { border-left-color: var(--orange); background: #fff8f2; border-color: #ffe2cb; }
.notice__ic {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: var(--navy);
  color: #fff;
  display: grid; place-items: center;
  flex: none;
}
.notice--alert .notice__ic { background: var(--orange); }
.notice h2 { font-size: clamp(1.3rem, 2.2vw, 1.72rem); margin-bottom: .5em; }
.notice p { color: var(--ink-soft); font-size: 1.02rem; }
.notice p strong { color: var(--navy); font-weight: 700; }
.notice__meta {
  font-size: .86rem !important;
  color: var(--ink-faint) !important;
  border-top: 1px solid var(--line);
  padding-top: 14px;
  margin-top: 20px !important;
}
.notice--alert .notice__meta { border-top-color: #ffe2cb; }

/* --- Bulleted list --- */
.ulist { display: flex; flex-direction: column; gap: 11px; margin: 0 0 1.1em; }
.ulist li {
  position: relative;
  padding-left: 26px;
  color: var(--ink-soft);
  font-size: 1.01rem;
  line-height: 1.6;
}
.ulist li::before {
  content: '';
  position: absolute;
  left: 4px; top: .62em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--orange);
}
.ulist li strong { color: var(--navy); font-weight: 700; }

@media (max-width: 1023px) {
  .ratepanel { grid-template-columns: 1fr; }
  .ratepanel__side { position: static; }
}
@media (max-width: 767px) {
  .ratepanel__main { padding: 28px 22px; }
  .ratepanel__side { padding: 26px 22px; }
  .ratesteps li { gap: 14px; }
  .notice { grid-template-columns: 1fr; gap: 18px; padding: 28px 22px; }
}

/* ==========================================================================
   27. VOLUMETRIC WEIGHT CALCULATOR
   ========================================================================== */
.vwcalc { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 28px; align-items: start; }

.vwcalc__form {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 32px 30px;
}
.vwcalc__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }

.vwfield label {
  display: block;
  font-family: var(--font-display);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 8px;
}
.vwinput { position: relative; }
.vwinput input {
  width: 100%;
  font-family: var(--font-display);
  font-size: 1.22rem;
  font-weight: 700;
  color: var(--navy);
  padding: 14px 52px 14px 16px;
  min-height: 58px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--cloud);
  transition: border-color .18s ease, background-color .18s ease;
  -moz-appearance: textfield;
}
.vwinput input::-webkit-outer-spin-button,
.vwinput input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.vwinput input:focus { outline: none; border-color: var(--orange); background: #fff; }
.vwinput input::placeholder { color: var(--line); font-weight: 600; }
.vwinput span {
  position: absolute;
  right: 16px; top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-size: .88rem;
  font-weight: 700;
  color: var(--ink-faint);
  pointer-events: none;
}

.vwcalc__out {
  background: var(--navy);
  color: var(--on-dark);
  border-radius: var(--radius-lg);
  padding: 30px 28px;
  position: sticky;
  top: 110px;
}
.vwrow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid var(--on-dark-line);
  font-size: .95rem;
  color: var(--on-dark-soft);
}
.vwrow strong { font-family: var(--font-display); font-size: 1.14rem; color: #fff; letter-spacing: -0.02em; white-space: nowrap; }
.vwrow--result {
  border-bottom: 0;
  margin-top: 8px;
  padding-top: 18px;
  border-top: 2px solid var(--on-dark-line);
}
.vwrow--result span { font-family: var(--font-display); font-weight: 700; color: #fff; }
.vwrow--result strong { font-size: 1.75rem; color: var(--orange-bright); }

/* Highlight whichever figure is actually being charged */
.vwcalc__out.is-vol .vwrow:first-child strong { color: var(--orange-bright); }
.vwcalc__out.is-act .vwrow:nth-child(2) strong { color: var(--orange-bright); }

.vwnote {
  font-size: .88rem;
  color: var(--on-dark-faint);
  line-height: 1.55;
  margin: 16px 0 0;
}

@media (max-width: 1023px) {
  .vwcalc { grid-template-columns: 1fr; }
  .vwcalc__out { position: static; }
}
@media (max-width: 767px) {
  .vwcalc__form { padding: 24px 20px; }
  .vwcalc__grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .vwinput input { font-size: 1.1rem; padding-right: 44px; }
  .vwcalc__out { padding: 24px 20px; }
  .vwrow--result strong { font-size: 1.5rem; }
}

/* ==========================================================================
   28. LEGAL PAGES
   ========================================================================== */
.legal { max-width: 820px; }
.legal__updated {
  font-family: var(--font-display);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding-bottom: 20px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.legal__sec { padding-block: 34px; border-bottom: 1px solid var(--line-soft); }
.legal__sec:last-child { border-bottom: 0; }
.legal__sec h2 {
  display: flex;
  gap: .6em;
  align-items: baseline;
  font-size: clamp(1.18rem, 2vw, 1.46rem);
  margin-bottom: .7em;
  scroll-margin-top: 110px;
}
.legal__sec h2 > span { color: var(--orange); font-size: .85em; flex: none; }
.legal__sec p { color: var(--ink-soft); font-size: 1.01rem; }
.legal__sec p strong { color: var(--navy); font-weight: 700; }
.legal__sec a { color: var(--navy-mid); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.legal__sec a:hover { color: var(--orange); }
.legal__sec .ulist { margin-top: 0; }

@media (max-width: 767px) {
  .legal__sec { padding-block: 26px; }
  .legal__sec h2 { gap: .45em; }
}

/* ==========================================================================
   29. PHOTOGRAPHIC PAGE HERO
   The gradient hero stays the default. Pages that carry a photograph get the
   image behind a scrim matching the homepage treatment, so white headline
   text keeps its contrast whatever the photo is doing underneath.
   ========================================================================== */
.phero--image { position: relative; isolation: isolate; background: var(--navy-deep); }

.phero--image .phero__media { position: absolute; inset: 0; z-index: -2; }
.phero--image .phero__media picture,
.phero--image .phero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 42%;
  display: block;
}

/* Heavier on the left, where the headline sits, and lighter on the right so
   the photograph still reads. Second layer lifts the bottom edge so the
   breadcrumb bar above and the section below both meet it cleanly. */
.phero--image .phero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(104deg, rgba(2,24,51,.96) 0%, rgba(2,24,51,.9) 40%, rgba(2,24,51,.68) 72%, rgba(2,24,51,.56) 100%),
    linear-gradient(to top, rgba(2,24,51,.7) 0%, rgba(2,24,51,0) 42%);
}

/* The gradient-only hero keeps its orange glow. With a photograph behind,
   that glow fights the image, so it is dropped. */
.phero--image { background-image: none; }

@media (max-width: 767px) {
  /* Nearly no horizontal space on a phone, so the scrim goes flat and darker
     to keep the headline legible over any photograph. */
  .phero--image .phero__scrim {
    background:
      linear-gradient(180deg, rgba(2,24,51,.9) 0%, rgba(2,24,51,.82) 50%, rgba(2,24,51,.92) 100%);
  }
  .phero--image .phero__media img { object-position: center 45%; }
}

/* ==========================================================================
   30. REGION DESTINATION GRID
   Rendered server side from a baked list, then replaced at runtime by the
   live list from Supabase so a country added in the admin appears here
   without a rebuild. If Supabase is unreachable the baked list simply stays.
   ========================================================================== */
.dgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.dchip {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 15px 18px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.dchip:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); border-color: var(--navy-soft); }
.dchip__name {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--navy);
  letter-spacing: -0.015em;
}
.dchip__meta { display: block; font-size: .82rem; color: var(--ink-faint); margin-top: 2px; }

@media (max-width: 767px) {
  .dgrid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
  .dchip { padding: 12px 14px; }
  .dchip__name { font-size: .94rem; }
  .dchip__meta { font-size: .78rem; }
}

/* ==========================================================================
   RATE CALCULATOR
   The calculator sits on a dark glass panel over the hero, so everything here
   uses the on-dark tokens. An absent price is styled as content, not as an
   error: it is the most common outcome until every lane is priced.
   ========================================================================== */

/* Text and number inputs match the select exactly, so the form reads as one
   control set rather than a styled dropdown next to a browser default box. */
.calc input[type="number"],
.calc input[type="text"] {
  width: 100%;
  min-height: 54px;
  padding: 13px 16px;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  background-color: rgba(2,24,51,.62);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 12px;
  appearance: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.calc input[type="number"]::placeholder { color: rgba(255,255,255,.36); font-weight: 500; }
.calc input[type="number"]:hover { border-color: rgba(255,255,255,.4); }
.calc input[type="number"]:focus-visible,
.calc select:focus-visible {
  outline: none;
  border-color: var(--orange-bright);
  box-shadow: 0 0 0 3px rgba(250,111,2,.22);
}
/* Spinners crowd a 54px field and invite misclicks on mobile. */
.calc input[type="number"]::-webkit-outer-spin-button,
.calc input[type="number"]::-webkit-inner-spin-button { appearance: none; margin: 0; }
.calc input[type="number"] { -moz-appearance: textfield; }

/* The weight field carries a kg suffix so the unit is not only in the label. */
.calc__weight { position: relative; }
.calc__weight input { padding-right: 52px; }
.calc__weight::after {
  content: 'kg';
  position: absolute;
  right: 16px;
  bottom: 17px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .9rem;
  color: var(--on-dark-faint);
  pointer-events: none;
}

/* Box size is optional and most people skip it, so it is a quiet disclosure
   rather than a third field competing with destination and weight. */
.calc__dims {
  margin: -2px 0 18px;
  border-top: 1px solid var(--on-dark-line);
  padding-top: 14px;
}
.calc__dims > summary {
  display: flex;
  align-items: center;
  gap: .5em;
  cursor: pointer;
  list-style: none;
  font-size: .85rem;
  font-weight: 600;
  color: var(--on-dark-soft);
  padding: 2px 0;
  transition: color .16s ease;
}
.calc__dims > summary::-webkit-details-marker { display: none; }
.calc__dims > summary:hover { color: #fff; }
.calc__dims > summary::before {
  content: '';
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--orange);
  background:
    linear-gradient(var(--orange), var(--orange)) center/8px 1.5px no-repeat,
    linear-gradient(var(--orange), var(--orange)) center/1.5px 8px no-repeat;
  transition: background-size .18s ease;
}
/* Open: the vertical stroke collapses, leaving a minus. */
.calc__dims[open] > summary::before {
  background:
    linear-gradient(var(--orange), var(--orange)) center/8px 1.5px no-repeat,
    linear-gradient(var(--orange), var(--orange)) center/1.5px 0 no-repeat;
}
.calc__dimsnote {
  font-size: .8rem;
  line-height: 1.55;
  color: var(--on-dark-faint);
  margin: 10px 0 14px;
}
.calc__dimrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.calc__dimrow .calc__field { margin: 0; }
.calc__dimrow label { font-size: .68rem; letter-spacing: .08em; }
.calc__dimrow input[type="number"] { min-height: 46px; padding: 10px 12px; font-size: .95rem; }

/* Chargeable weight note, shown only when dimensions were given. */
.calc__chargeable {
  font-size: .82rem;
  line-height: 1.55;
  color: var(--on-dark-soft);
  background: rgba(255,255,255,.06);
  border: 1px solid var(--on-dark-line);
  border-radius: 10px;
  padding: 11px 14px;
  margin-bottom: 14px;
}
.calc__chargeable strong { color: #fff; }
.calc__chargeable--vol {
  background: rgba(250,111,2,.12);
  border-color: rgba(250,111,2,.34);
}

/* The no-price states. */
.calc__state {
  padding-top: 20px;
  border-top: 1px solid var(--on-dark-line);
}
.calc__state h3 {
  font-family: var(--font-display);
  font-size: 1.08rem;
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: #fff;
  margin: 0 0 8px;
}
.calc__state p {
  font-size: .89rem;
  line-height: 1.6;
  color: var(--on-dark-soft);
  margin: 0 0 8px;
}
.calc__state p:last-child { margin-bottom: 0; }
.calc__state__meta { color: var(--on-dark-faint); font-size: .83rem; }

.calc__ways { margin: 14px 0 0; padding: 0; list-style: none; }
.calc__ways li {
  position: relative;
  padding: 12px 0 12px 24px;
  font-size: .88rem;
  line-height: 1.6;
  color: var(--on-dark-soft);
  border-top: 1px solid var(--on-dark-line);
}
.calc__ways li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 20px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--orange-bright);
}
.calc__ways strong { color: #fff; font-weight: 700; }

.calc__hint,
.calc__warn {
  font-size: .82rem;
  line-height: 1.55;
  margin: 14px 0 0;
}
.calc__hint {
  color: var(--on-dark-faint);
  padding-top: 13px;
  border-top: 1px solid var(--on-dark-line);
}
.calc__warn {
  color: var(--on-dark-soft);
  background: rgba(250,111,2,.12);
  border: 1px solid rgba(250,111,2,.34);
  border-radius: 10px;
  padding: 11px 14px;
}

/* Every quote is an estimate until we see the parcel, so say so once, right
   where the number is, rather than letting the figure look like a contract. */
.calc__accuracy {
  display: flex;
  gap: .6em;
  align-items: flex-start;
  font-size: .8rem;
  line-height: 1.55;
  color: var(--on-dark-faint);
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid var(--on-dark-line);
}
.calc__accuracy svg { flex: none; margin-top: 2px; color: var(--orange); }
.calc__accuracy a { color: var(--on-dark-soft); text-decoration: underline; text-underline-offset: 2px; }
.calc__accuracy a:hover { color: #fff; }

.calc__cta { margin-top: 18px; }

@media (max-width: 420px) {
  .calc__dimrow { grid-template-columns: 1fr 1fr; }
  .calc__dimrow .calc__field:last-child { grid-column: 1 / -1; }
}

/* "(optional)" sits inside the disclosure label, quieter than the label. */
.calc__opt { font-weight: 500; color: var(--on-dark-faint); }

/* Second contact route under a no-price state. Quiet, so it reads as a
   fallback rather than competing with the WhatsApp button. */
.calc__alt {
  font-size: .82rem;
  line-height: 1.55;
  color: var(--on-dark-faint);
  text-align: center;
  margin: 10px 0 0;
}
.calc__alt a { color: var(--on-dark-soft); text-decoration: underline; text-underline-offset: 2px; }
.calc__alt a:hover { color: #fff; }

/* Searchable destination picker. The native select stays as the form value
   and the no-JS fallback, so it is only hidden once the script has layered
   the input over it. */
.calc__country { position: relative; }
.calc__countryinput { width: 100%; }
.js .calc__countryselect { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.calc__countrylist {
  position: absolute; z-index: 30; left: 0; right: 0; top: 100%;
  margin: 6px 0 0; padding: 6px; list-style: none;
  max-height: 260px; overflow-y: auto;
  background: #06305f; border: 1px solid rgba(255,255,255,.22);
  border-radius: 12px; box-shadow: 0 18px 40px rgba(0,0,0,.45);
}
.calc__countrylist[hidden] { display: none; }
.calc__countrylist li {
  padding: 9px 12px; border-radius: 8px; cursor: pointer;
  font-size: .95rem; color: var(--on-dark-soft);
}
.calc__countrylist li.is-active,
.calc__countrylist li:hover { background: rgba(250,111,2,.22); color: #fff; }
.calc__countryempty { color: var(--on-dark-faint); cursor: default; font-size: .85rem; }
.calc__countryempty:hover { background: none; }

/* ---------- Footer credit signature (RBR Growth Consulting) ----------
   The skill's colours assume a cream footer. This one is navy, so the ink
   tokens are swapped for the on-dark set. Everything else is as specified,
   and the wings deliberately keep their natural peach and gold: the skill
   forbids brightness(0) and grayscale(1) because both reduce them to a grey
   ghost. On this navy they read better than they would on cream. */
.foot__credit {
  margin-top: 1.5rem;
  padding-top: 1rem;
  padding-bottom: 28px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--on-dark-faint);
  text-align: center;
}

.foot__credit a {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  color: inherit;
  text-decoration: none;
  transition: color 180ms ease;
}

.foot__credit a:hover { color: #fff; }

.foot__credit img {
  height: 26px;
  width: auto;
  display: block;
  filter: opacity(0.95) contrast(1.08) saturate(1.05);
  transition: filter 420ms ease, transform 420ms ease;
}

.foot__credit a:hover img {
  filter: opacity(1) contrast(1.1) saturate(1.15)
          drop-shadow(0 2px 8px rgba(220, 170, 90, 0.45));
  transform: translateY(-1px);
}

.foot__credit strong {
  font-weight: 600;
  color: var(--on-dark-soft);
}