/* ENVOI home page */

/* ---------------- Hero (isometric city) ---------------- */
.hero {
  position: relative;
  overflow: hidden;
  padding: calc(var(--nav-h) + clamp(1.75rem, 4vw, 3rem)) 0 clamp(2rem, 4vw, 3rem);
  color: var(--ink);
  background:
    radial-gradient(55% 45% at 50% 55%, rgba(10, 108, 240, 0.08), transparent 70%),
    linear-gradient(180deg, #f5f7fb 0%, #e9eef6 100%);
}
/* faint blueprint / circuit lines */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(30deg, transparent 49.4%, rgba(10, 23, 48, 0.06) 49.5%, rgba(10, 23, 48, 0.06) 50.5%, transparent 50.6%),
    linear-gradient(150deg, transparent 49.4%, rgba(10, 23, 48, 0.06) 49.5%, rgba(10, 23, 48, 0.06) 50.5%, transparent 50.6%);
  background-size: 120px 70px;
  mask-image: radial-gradient(75% 65% at 50% 60%, #000 25%, transparent 80%);
  -webkit-mask-image: radial-gradient(75% 65% at 50% 60%, #000 25%, transparent 80%);
  pointer-events: none;
}

.hero-head { position: relative; z-index: 2; text-align: center; }
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 1.25rem;
  padding: 0.35rem 0.85rem 0.35rem 0.4rem;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: #fff;
  color: var(--ink-2);
  font-size: 0.85rem;
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}
.hero-badge b {
  padding: 0.16rem 0.55rem;
  border-radius: 999px;
  background: #0a6cf0;
  color: #fff;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}
.hero h1 {
  margin: 0 auto;
  max-width: 16ch;
  font-size: clamp(2rem, 4.4vw, 3.3rem);
  line-height: 1.04;
  letter-spacing: -0.04em;
  font-weight: 800;
  color: #0b0f19;
}
.hero h1 .hl {
  background: linear-gradient(90deg, var(--blue), #3b9bff 55%, var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-lede {
  margin: 1.2rem auto 1.75rem;
  max-width: 40rem;
  color: var(--muted);
  font-size: clamp(0.95rem, 1.2vw, 1.05rem);
  line-height: 1.7;
}
.hero-head .hero-actions { justify-content: center; }

/* City scene */
/* Wide stage: city in the middle, status cards on both sides */
.iso-stage {
  position: relative;
  width: min(1400px, 94%);
  margin: clamp(0.5rem, 2vw, 1.25rem) auto 0;
}
.iso-stage::before,
.iso-stage::after {
  content: '';
  position: absolute;
  top: 10%;
  width: 34%;
  height: 80%;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.55;
  pointer-events: none;
}
.iso-stage::before { left: 0; background: radial-gradient(circle, rgba(10, 108, 240, 0.25), transparent 70%); }
.iso-stage::after { right: 0; background: radial-gradient(circle, rgba(255, 106, 26, 0.18), transparent 70%); }
.iso-wrap {
  position: relative;
  z-index: 1;
  width: min(1040px, 100%);
  margin: 0 auto;
}
.iso-city {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(74vh, 700px); /* wide, not tall */
  margin-inline: auto;
  overflow: visible;
  filter: drop-shadow(0 24px 30px rgba(10, 23, 48, 0.12));
  animation: cityIn 1.2s var(--ease) both;
}
@keyframes cityIn { from { opacity: 0; transform: translateY(30px) scale(0.98); } }

/* Floating tool card */
.tool {
  position: relative;
  z-index: 3;
  max-width: 1120px;
  margin: clamp(1.25rem, 3vw, 2.25rem) auto 0;
  padding: clamp(1rem, 2.2vw, 1.4rem);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 30px 70px rgba(10, 23, 48, 0.14);
}
.tool-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.tool-note {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
}
.tool-note svg { width: 1rem; height: 1rem; color: var(--ok); }
.tool-tabs {
  display: inline-flex;
  gap: 0.25rem;
  padding: 0.3rem;
  border-radius: 14px;
  background: var(--soft);
}
.tool-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.4rem;
  padding: 0 1rem;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--muted);
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.25s, color 0.25s, box-shadow 0.25s;
}
.tool-tabs button svg { width: 1.05rem; height: 1.05rem; }
.tool-tabs button[aria-selected='true'] { background: #fff; color: var(--blue); box-shadow: var(--shadow-sm); }
.tool-pane[hidden] { display: none; }
.tool-pane:not([hidden]) { animation: paneIn 0.35s var(--ease); }
@keyframes paneIn { from { opacity: 0; transform: translateY(6px); } }
.t-navy { --tone: var(--navy-2); --tone-bg: #e8edf7; }
.t-sky { --tone: #0891b2; --tone-bg: #e2f6fb; }
.t-orange { --tone: var(--accent); --tone-bg: #fff1e8; }

.track-form { display: flex; gap: 0.6rem; }
.track-form input {
  flex: 1;
  min-width: 0;
  min-height: 3.2rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: var(--soft);
  font-size: 1rem;
  letter-spacing: 0.02em;
}
.track-form input:focus { outline: none; border-color: var(--blue); background: #fff; box-shadow: 0 0 0 4px rgba(10, 108, 240, 0.12); }
.track-form .btn { min-height: 3.2rem; }

/* Trust row — icon + text, with dividers */
.hero-trust {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 1rem 0 0;
  padding: 0.9rem 0.25rem 0.1rem;
  border-top: 1px solid var(--line);
  list-style: none;
}
.hero-trust li { display: flex; align-items: center; gap: 0.7rem; padding: 0.2rem 1rem; }
.hero-trust li + li { border-left: 1px solid var(--line); }
.ht-ic { flex-shrink: 0; display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 50%; background: var(--soft); color: var(--blue); }
.ht-ic svg { width: 1.1rem; height: 1.1rem; }
.hero-trust strong { display: block; font-size: 0.92rem; font-weight: 800; color: var(--ink); letter-spacing: -0.01em; }
.hero-trust small { display: block; color: var(--muted); font-size: 0.78rem; line-height: 1.35; }

/* ---------------- Partner strip ---------------- */
.partners-strip { padding: clamp(2rem, 4vw, 2.75rem) 0; background: #fff; border-bottom: 1px solid var(--line); }
.ps-title {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 0 1.4rem;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ps-title::before,
.ps-title::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--line-2)); }
.ps-title::after { background: linear-gradient(90deg, var(--line-2), transparent); }
.ps-title span { text-align: center; }
.marquee {
  overflow: hidden;
  padding: 0.4rem 0;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  display: flex;
  gap: 1rem;
  width: max-content;
  animation: marquee 40s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.logo-tile {
  display: grid;
  place-items: center;
  width: 9.5rem;
  height: 4rem;
  padding: 0.75rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  transition: border-color 0.25s, box-shadow 0.3s, transform 0.3s var(--ease);
}
.logo-tile:hover { border-color: var(--line-2); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.logo-tile img { max-height: 100%; max-width: 100%; width: auto; height: auto; object-fit: contain; }
@keyframes marquee { to { transform: translateX(calc(-50% - 0.5rem)); } }

/* ---------------- Services bento ---------------- */
.bento {
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 1.25rem;
}
.bento-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: clamp(1.4rem, 2.6vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  overflow: hidden;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.3s;
}
.bento-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: rgba(10, 108, 240, 0.3); }
.bento-card h3 { margin: 0.35rem 0 0.2rem; font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.25; letter-spacing: -0.02em; }
.bento-card > p:not(.b-tag) { margin: 0; color: var(--muted); line-height: 1.6; font-size: 0.95rem; }
.bento-card .ic { margin-bottom: 0.6rem; }
.b-tag { margin: 0; color: var(--blue); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }

.b-links { display: grid; gap: 0.15rem; margin: 0.9rem 0 0; padding: 0; list-style: none; }
.b-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
  font-weight: 650;
  transition: color 0.2s, padding 0.3s var(--ease);
}
.b-links li:last-child a { border-bottom: 0; }
.b-links a:hover { color: var(--blue); padding-left: 0.35rem; }
.b-links svg { width: 1rem; height: 1rem; color: var(--blue); opacity: 0.5; transition: opacity 0.2s, transform 0.3s var(--ease); }
.b-links a:hover svg { opacity: 1; transform: translateX(3px); }

/* Domestic — large navy tile */
.b-ship {
  grid-row: span 2;
  color: #fff;
  border: 0;
  background:
    radial-gradient(70% 50% at 100% 0%, rgba(10, 108, 240, 0.55), transparent 70%),
    linear-gradient(165deg, var(--navy) 0%, var(--navy-2) 100%);
}
.b-ship::after {
  content: '';
  position: absolute;
  right: -3rem;
  bottom: -3rem;
  width: 14rem;
  height: 14rem;
  border: 2px dashed rgba(126, 215, 255, 0.18);
  border-radius: 50%;
  pointer-events: none;
}
.b-ship .ic { background: rgba(126, 215, 255, 0.14); color: var(--sky); }
.b-ship .b-tag { color: var(--sky); }
.b-ship > p:not(.b-tag) { color: #b9cbe6; }
.b-ship .b-links a { color: #e4edf9; border-color: rgba(255, 255, 255, 0.1); }
.b-ship .b-links a:hover { color: #fff; }
.b-ship .b-links svg { color: var(--sky); }
.b-ship .btn { align-self: flex-start; margin-top: auto; position: relative; z-index: 1; }
.b-ship .b-links { margin-bottom: 1.5rem; }

/* International — wide tile with partner logos */
.b-intl { grid-column: span 2; background: linear-gradient(135deg, #fff 55%, var(--blue-soft)); }
.b-countries { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0 1.25rem; padding: 0; list-style: none; }
.b-countries li { padding: 0.4rem 0.8rem; border: 1px solid var(--line-2); border-radius: 999px; background: #fff; color: var(--ink-2); font-size: 0.85rem; font-weight: 650; }
.b-intl .text-link { margin-top: auto; }

.b-move .ic { background: #fff1e8; color: var(--accent); }
.b-move .b-tag { color: var(--accent); }
.b-supply .ic { background: #e7f8ef; color: var(--ok); }
.b-supply .b-tag { color: var(--ok); }

/* ---------------- How it works ---------------- */
.how { align-items: center; }
.timeline { position: relative; display: grid; gap: 1.35rem; margin: 1.75rem 0 0; padding: 0; list-style: none; counter-reset: step; }
.timeline::before {
  content: '';
  position: absolute;
  left: 1.2rem;
  top: 1.2rem;
  bottom: 1.2rem;
  width: 2px;
  background: linear-gradient(var(--sky), rgba(126, 215, 255, 0.1));
}
.timeline li { position: relative; padding-left: 3.6rem; }
.timeline li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 0;
  top: -0.1rem;
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--sky), var(--blue));
  color: #fff;
  font-weight: 800;
  box-shadow: 0 0 0 5px rgba(126, 215, 255, 0.12), 0 8px 20px rgba(10, 108, 240, 0.35);
}
.timeline h3 { margin: 0 0 0.25rem; font-size: 1.02rem; }
.timeline p { margin: 0; max-width: 32rem; color: #b9cbe6; line-height: 1.6; font-size: 0.9rem; }

/* ---------------- Quote section ---------------- */
/* Only the row link is a card — the icon and text inside stay plain */

/* ---------------- Responsive ---------------- */
@media (max-width: 980px) {
  .bento { grid-template-columns: 1fr 1fr; }
  .b-ship { grid-row: auto; grid-column: 1 / -1; }
  .b-intl { grid-column: 1 / -1; }
  .hero-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 0.75rem; }
  .hero-trust li:nth-child(3) { border-left: 0; }
  .tool-note { display: none; }
}
@media (max-width: 640px) {
  .bento { grid-template-columns: 1fr; }
  .iso-stage { width: 100%; }
  .hero-trust li { padding: 0.2rem 0.5rem; gap: 0.5rem; }
  .hero-trust small { display: none; }
  .logo-tile { width: 7.5rem; height: 3.4rem; }
  .track-form { flex-direction: column; }
}

/* ---------------- Hero animations ---------------- */
.hero-head > * { animation: heroUp 0.9s var(--ease) both; }
.hero-head > :nth-child(2) { animation-delay: 0.08s; }
.hero-head > :nth-child(3) { animation-delay: 0.16s; }
.hero-head > :nth-child(4) { animation-delay: 0.24s; }
@keyframes heroUp { from { opacity: 0; transform: translateY(18px); } }

.hero h1 .hl { background-size: 200% auto; animation: shimmer 6s linear infinite; }
@keyframes shimmer { to { background-position: 200% center; } }

.tool { animation: heroUp 0.9s var(--ease) 0.35s backwards; }

/* Floating shipment status cards around the city */
.float-card {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.85rem 0.55rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 14px 34px rgba(10, 23, 48, 0.14);
  backdrop-filter: blur(6px);
  font-size: 0.8rem;
  line-height: 1.25;
  white-space: nowrap;
  animation: cardIn 0.8s var(--ease) both, bob 5s ease-in-out infinite;
}
.float-card b { display: block; color: var(--ink); font-size: 0.85rem; }
.float-card small { color: var(--muted); }
.fc-ic { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 10px; }
.fc-ic svg { width: 1.05rem; height: 1.05rem; }
.fc-blue { background: var(--blue-soft); color: var(--blue); }
.fc-orange { background: #fff1e8; color: var(--accent); }
.fc-green { background: #e7f8ef; color: var(--ok); }
/* Cards hug the city: positioned from the centre, never past the stage edge */
.fc-1 { left: max(0px, calc(50% - 600px)); top: 16%; animation-delay: 0.6s, 0s; }
.fc-4 { left: max(0px, calc(50% - 560px)); bottom: 20%; animation-delay: 0.75s, -2.4s; }
.fc-2 { right: max(0px, calc(50% - 600px)); top: 10%; animation-delay: 0.9s, -1.6s; }
.fc-3 { right: max(0px, calc(50% - 560px)); bottom: 26%; animation-delay: 1.2s, -3.2s; }
.fc-navy { background: #e8edf7; color: var(--navy-2); }

@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes cardIn { from { opacity: 0; scale: 0.9; } }

/* Section micro-animations */
.timeline::before { transform: scaleY(0); transform-origin: top; transition: transform 1.4s var(--ease) 0.2s; }
.reveal.in .timeline::before, .reveal.in.timeline::before { transform: scaleY(1); }
.bento-card .ic { transition: transform 0.4s var(--ease); }
.bento-card:hover .ic { transform: translateY(-3px) rotate(-6deg); }

@media (max-width: 980px) {
}
@media (max-width: 640px) {
}
@media (prefers-reduced-motion: reduce) {
  .float-card, .hero-head > *, .tool, .hero h1 .hl { animation: none; }
  .timeline::before { transform: none; }
}

/* ---------------- Track shipment (message + modal) ---------------- */
.track-result { margin: 0.75rem 0 0; color: var(--muted); font-size: 0.9rem; font-weight: 600; }
.track-result.bad { color: #d92d20; }
.track-result[hidden] { display: none; }

.tr-modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 1rem; }
.tr-modal[hidden] { display: none; }
.tr-backdrop { position: absolute; inset: 0; background: rgba(4, 18, 43, 0.55); backdrop-filter: blur(4px); animation: fadeIn 0.25s ease; }
.tr-dialog {
  position: relative;
  width: min(520px, 100%);
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  padding: 1.1rem 1.25rem 1.15rem;
  border-radius: 20px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 40px 90px rgba(4, 18, 43, 0.35);
  animation: dialogIn 0.35s var(--ease);
}
@keyframes fadeIn { from { opacity: 0; } }
@keyframes dialogIn { from { opacity: 0; transform: translateY(16px) scale(0.98); } }
.tr-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 1.9rem;
  height: 1.9rem;
  border: 0;
  border-radius: 50%;
  background: var(--soft);
  color: var(--muted);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.tr-close:hover { background: var(--blue-soft); color: var(--blue); }

.trm-head { display: flex; align-items: center; gap: 0.7rem; padding-right: 2.2rem; }
.trm-logo { flex-shrink: 0; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; padding: 0.3rem; border: 1px solid var(--line); border-radius: 11px; background: #fff; }
.trm-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.trm-logo b { color: var(--blue); font-size: 1rem; }
.trm-id { flex: 1; min-width: 0; }
.trm-id small { display: block; color: var(--muted); font-size: 0.74rem; font-weight: 600; }
.trm-id h3 { margin: 0.05rem 0 0; font-size: 1rem; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.tr-status { flex-shrink: 0; padding: 0.25rem 0.7rem; border-radius: 999px; font-size: 0.78rem; font-weight: 800; }

/* Progress stepper */
.trm-steps { display: grid; grid-template-columns: repeat(5, 1fr); margin: 1rem 0 0; padding: 0; list-style: none; }
.trm-steps li { position: relative; display: grid; justify-items: center; gap: 0.4rem; text-align: center; }
.trm-steps li::before { content: ''; position: absolute; top: 0.45rem; left: -50%; right: 50%; height: 3px; background: var(--line); }
.trm-steps li:first-child::before { display: none; }
.trm-steps li.done::before { background: var(--ok); }
.trm-steps i { position: relative; z-index: 1; width: 0.95rem; height: 0.95rem; border: 3px solid var(--line-2); border-radius: 50%; background: #fff; }
.trm-steps li.done i { border-color: var(--ok); background: var(--ok); }
.trm-steps li.cur i { box-shadow: 0 0 0 5px rgba(16, 163, 107, 0.18); }
.trm-steps span { color: var(--muted); font-size: 0.66rem; font-weight: 600; line-height: 1.25; }
.trm-steps li.done span { color: var(--ink); }

/* Route */
.trm-route { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.6rem; margin: 1rem 0 0; padding: 0.65rem 0.85rem; border-radius: 12px; background: var(--soft); }
.trm-route small { display: block; color: var(--muted); font-size: 0.64rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.trm-route b { display: block; margin-top: 0.1rem; font-size: 0.86rem; line-height: 1.3; }
.trm-route div:last-child { text-align: right; }
.trm-arrow { color: var(--blue); font-size: 1.3rem; font-weight: 800; }
.trm-loc { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem; margin: 0.6rem 0 0; color: var(--muted); font-size: 0.8rem; }
.trm-loc b { color: var(--ink); }

/* Timeline */
.trm-sub { margin: 1rem 0 0; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.tr-msg { margin: 0.75rem 0 0; color: var(--muted); font-size: 0.9rem; }
.tr-timeline { position: relative; display: grid; gap: 0.65rem; max-height: 10rem; overflow-y: auto; margin: 0.65rem 0 0; padding: 0 0 0 1.5rem; list-style: none; }
.tr-timeline::before { content: ''; position: absolute; left: 0.4rem; top: 0.45rem; bottom: 0.45rem; width: 2px; background: var(--line-2); }
.tr-timeline li { position: relative; }
.tr-timeline li::before { content: ''; position: absolute; left: -1.3rem; top: 0.3rem; width: 0.65rem; height: 0.65rem; border: 2px solid var(--line-2); border-radius: 50%; background: #fff; }
.tr-timeline li.now::before { border-color: var(--blue); background: var(--blue); box-shadow: 0 0 0 4px rgba(10, 108, 240, 0.15); }
.tr-timeline b { display: block; font-size: 0.84rem; }
.tr-timeline small { color: var(--muted); font-size: 0.74rem; }

.trm-foot { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1rem; padding-top: 0.85rem; border-top: 1px solid var(--line); }
.trm-foot .btn { min-height: 2.3rem; padding: 0.45rem 0.95rem; font-size: 0.85rem; }

@media (max-width: 640px) {
  .tr-modal { padding: 0.75rem; }
  .tr-dialog { max-height: calc(100dvh - 1.5rem); }
  .trm-head { flex-wrap: wrap; }
  .trm-steps span { font-size: 0.62rem; }
  .trm-route { grid-template-columns: 1fr; }
  .trm-route div:last-child { text-align: left; }
  .trm-arrow { display: none; }
  .trm-foot .btn { flex: 1; }
}

/* ---------------- Light theme: How it works + Get a quote ---------------- */
#how .timeline::before { background: linear-gradient(var(--blue), rgba(10, 108, 240, 0.08)); }
#how .timeline li::before { box-shadow: 0 0 0 5px rgba(10, 108, 240, 0.1), 0 8px 18px rgba(10, 108, 240, 0.25); }
#how .timeline h3 { color: var(--ink); }
#how .timeline p { color: var(--muted); }

#quote .h2 { color: var(--ink); }

/* ---------------- Home: tighter spacing ---------------- */
.site-main > .section { padding: clamp(2.5rem, 5vw, 4rem) 0; }

/* FAQ: centred heading + one centred column of questions */
.site-main > .section .faq-layout { grid-template-columns: 1fr; gap: 1.75rem; max-width: 820px; margin-inline: auto; }
.site-main > .section .faq-side { text-align: center; }
.site-main > .section .faq-side .eyebrow::before { display: none; }
.site-main > .section .faq-side > p:not(.eyebrow) { margin: 0.6rem 0 0; }
.site-main > .section .faq-layout .faq { gap: 0.6rem; }
.site-main > .section .faq summary { padding: 0.95rem 1.15rem; font-size: 0.98rem; }
.site-main > .section .faq .ans { padding: 0 1.15rem 1rem; font-size: 0.94rem; }

/* Get a quote: more compact */
#quote .form-card { padding: clamp(1.2rem, 2.5vw, 1.6rem); }
#quote .fields { gap: 0.75rem; }
#quote .fields textarea { min-height: 4.5rem; }

/* ---------------- Status cards on tablets & phones: same corner layout as desktop ---------------- */
@media (max-width: 1180px) {
  .iso-stage::before, .iso-stage::after { display: none; }
  .iso-wrap { width: min(760px, 100%); }
  .fc-1 { left: 0; top: 4%; bottom: auto; right: auto; }    /* upper left  */
  .fc-2 { right: 0; top: 2%; bottom: auto; left: auto; }    /* upper right */
  .fc-4 { left: 0; bottom: 6%; top: auto; right: auto; }    /* lower left  */
  .fc-3 { right: 0; bottom: 4%; top: auto; left: auto; }    /* lower right */
}
@media (max-width: 640px) {
  .iso-wrap { width: 92%; margin-inline: auto; }   /* a little smaller on phones */
  .float-card { gap: 0.35rem; padding: 0.3rem 0.5rem 0.3rem 0.3rem; border-radius: 10px; font-size: 0.58rem; line-height: 1.2; box-shadow: 0 8px 18px rgba(10, 23, 48, 0.12); }
  .float-card b { font-size: 0.68rem; }
  .fc-ic { width: 1.35rem; height: 1.35rem; border-radius: 7px; }
  .fc-ic svg { width: 0.75rem; height: 0.75rem; }
  .fc-1, .fc-4 { left: 1%; }
  .fc-2, .fc-3 { right: 1%; }
}

/* ---------------- Home: phone fit (compact, less scrolling) ---------------- */
@media (max-width: 640px) {
  /* Hero */
  .hero { padding: calc(var(--nav-h) + 1.25rem) 0 1.75rem; }
  .hero-badge { margin-bottom: 0.9rem; font-size: 0.75rem; padding: 0.3rem 0.7rem 0.3rem 0.35rem; }
  .hero h1 { font-size: 1.9rem; }
  .hero-lede { margin: 0.85rem auto 1.2rem; font-size: 0.92rem; line-height: 1.6; }
  .hero-head .hero-actions { flex-direction: row; flex-wrap: nowrap; gap: 0.5rem; }
  .hero-head .hero-actions .btn { flex: 1 1 0; min-width: 0; min-height: 2.75rem; padding: 0.6rem 0.5rem; font-size: 0.84rem; white-space: nowrap; }
  .hero-head .hero-actions .btn svg { width: 15px; height: 15px; }
  .iso-stage { margin-top: 0.5rem; }

  /* Rates / track card */
  .tool { margin-top: 0.75rem; padding: 0.85rem; border-radius: 18px; }
  .tool-head { margin-bottom: 0.75rem; }
  .tool-tabs { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .tool-tabs button { justify-content: center; padding: 0 0.5rem; font-size: 0.85rem; min-height: 2.3rem; }
  .hero-trust { margin-top: 0.75rem; padding-top: 0.75rem; row-gap: 0.6rem; }
  .ht-ic { width: 1.9rem; height: 1.9rem; }
  .ht-ic svg { width: 0.95rem; height: 0.95rem; }
  .hero-trust strong { font-size: 0.82rem; }
  .track-form input, .track-form .btn { min-height: 2.8rem; }

  /* Courier logos */
  .partners-strip { padding: 1.25rem 0; }
  .ps-title { margin-bottom: 0.9rem; font-size: 0.68rem; gap: 0.6rem; }
  .logo-tile { width: 6.5rem; height: 3rem; padding: 0.5rem 0.75rem; border-radius: 11px; }

  /* Section headings */
  .site-main > .section { padding: 2.1rem 0; }
  .sec-head { margin-bottom: 1.2rem; }
  .sec-head h2, .h2 { font-size: 1.45rem; }

  /* Services bento */
  .bento { gap: 0.75rem; }
  .bento-card { padding: 1.1rem; border-radius: 18px; }
  .bento-card .ic { width: 2.5rem; height: 2.5rem; margin-bottom: 0.35rem; }
  .bento-card h3 { font-size: 1.05rem; }
  .bento-card > p:not(.b-tag) { font-size: 0.88rem; }
  .b-links { margin-top: 0.5rem; }
  .b-links a { padding: 0.55rem 0; font-size: 0.9rem; }
  .b-ship .b-links { margin-bottom: 1rem; }
  .b-ship .btn { width: 100%; }
  .b-countries { margin: 0.6rem 0 0.8rem; gap: 0.35rem; }
  .b-countries li { padding: 0.3rem 0.6rem; font-size: 0.78rem; }

  /* How it works: steps only (example comparison hidden on phones) */
  .timeline { gap: 1rem; margin-top: 1.25rem; }
  .timeline li { padding-left: 3rem; }
  .timeline li::before { width: 2rem; height: 2rem; font-size: 0.85rem; }
  .timeline::before { left: 1rem; }
  .timeline h3 { font-size: 0.95rem; }
  .timeline p { font-size: 0.85rem; }

  /* FAQ */
  .site-main > .section .faq summary { padding: 0.85rem 1rem; font-size: 0.9rem; }
  .site-main > .section .faq .ans { padding: 0 1rem 0.9rem; font-size: 0.86rem; }

  /* Get a quote */
  #quote .form-card { padding: 1.1rem; border-radius: 18px; }
  #quote .form-card h3 { font-size: 1.15rem; }
  #quote .fields { gap: 0.65rem; }
  #quote .fields input, #quote .fields select { min-height: 2.6rem; }
}

/* ---------------- Hero headline: rotating phrases (slide up + blur) ---------------- */
.hl-rot { display: inline-grid; vertical-align: bottom; overflow: hidden; padding-bottom: 0.08em; }
.hl-rot > .hl {
  grid-area: 1 / 1;
  justify-self: center;
  white-space: nowrap;
  background: linear-gradient(90deg, #0a6cf0, #3b9bff 60%, #6d5cff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: none;
  opacity: 0;
  transform: translateY(70%);
  filter: blur(6px);
  transition: opacity 0.55s var(--ease), transform 0.65s var(--ease), filter 0.55s var(--ease);
}
.hl-rot > .hl.is-on { opacity: 1; transform: none; filter: none; }
.hl-rot > .hl.is-out { opacity: 0; transform: translateY(-70%); filter: blur(6px); }
@media (prefers-reduced-motion: reduce) {
  .hl-rot > .hl { transition: opacity 0.3s; transform: none; filter: none; }
}

/* ---------------- Announcement strip (scrolling text) ---------------- */
.ann { position: relative; overflow: hidden; margin: 0 0 clamp(1rem, 3vw, 1.75rem); padding: 0.6rem 0; color: #fff; background: linear-gradient(90deg, #c2410c, #f97316 50%, #c2410c); box-shadow: 0 8px 22px rgba(194, 65, 12, 0.18); }
.ann.tone-blue { background: linear-gradient(90deg, #0a3d91, #0a6cf0 50%, #0a3d91); box-shadow: 0 8px 22px rgba(10, 70, 160, 0.18); }
.ann.tone-green { background: linear-gradient(90deg, #065f46, #0f8a5f 50%, #065f46); box-shadow: 0 8px 22px rgba(6, 95, 70, 0.18); }
.ann::before, .ann::after { content: ""; position: absolute; top: 0; bottom: 0; z-index: 1; width: 3rem; pointer-events: none; }
.ann::before { left: 0; background: linear-gradient(90deg, rgba(0, 0, 0, 0.12), transparent); }
.ann::after { right: 0; background: linear-gradient(-90deg, rgba(0, 0, 0, 0.12), transparent); }
.ann-track { display: flex; width: max-content; animation: annScroll 32s linear infinite; }
.ann:hover .ann-track { animation-play-state: paused; }
.ann-run { display: flex; align-items: center; flex-shrink: 0; }
.ann-item { padding: 0 1.4rem; font-size: 0.95rem; font-weight: 700; letter-spacing: 0.01em; white-space: nowrap; }
.ann-sep { color: rgba(255, 255, 255, 0.7); font-size: 0.8rem; }
@keyframes annScroll { to { transform: translateX(-50%); } }
@media (max-width: 560px) { .ann { padding: 0.5rem 0; } .ann-item { padding: 0 1rem; font-size: 0.85rem; } .ann-track { animation-duration: 24s; } }
@media (prefers-reduced-motion: reduce) { .ann-track { animation-duration: 80s; } }
/* sit flush under the fixed menu bar */
.hero > .ann { margin-top: calc(-1 * clamp(1.75rem, 4vw, 3rem)); z-index: 2; }

/* Navy + gold (festive, calm) and a light variant */
.ann.tone-navy { background: linear-gradient(90deg, #071633, #0f2a55 50%, #071633); box-shadow: 0 8px 22px rgba(7, 22, 51, 0.18); }
.ann.tone-navy .ann-item { color: #f8f3e6; }
.ann.tone-navy .ann-sep { color: #f5c451; }
.ann.tone-light { color: #0b1f3f; background: linear-gradient(90deg, #fff8e8, #fff 50%, #fff8e8); border-block: 1px solid #f3e3b8; box-shadow: none; }
.ann.tone-light .ann-sep { color: #d4a017; }
.ann.tone-light::before { background: linear-gradient(90deg, #fff8e8, transparent); }
.ann.tone-light::after { background: linear-gradient(-90deg, #fff8e8, transparent); }

/* ---------------- Festive strip: maroon + marigolds + toran ---------------- */
.ann-wrap { position: relative; z-index: 2; margin: 0 0 clamp(1rem, 3vw, 1.75rem); }
.ann-wrap > .ann { margin: 0; }
.hero > .ann-wrap { margin-top: calc(-1 * clamp(1.75rem, 4vw, 3rem)); }
.ann-toran { display: none; }

.ann.tone-festive {
  padding: 0.55rem 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 40%),
    linear-gradient(90deg, #4a0710 0%, #7a1020 50%, #4a0710 100%);
  box-shadow: none;
  border-bottom: 2px solid #f59e0b;
}
.ann.tone-festive::before { background: linear-gradient(90deg, #4a0710, transparent); }
.ann.tone-festive::after { background: linear-gradient(-90deg, #4a0710, transparent); }
.ann.tone-festive .ann-item { color: #fdf3e1; font-weight: 700; letter-spacing: 0.01em; }
.ann.tone-festive .ann-hl { color: #fbbf24; font-weight: 800; }
.ann.tone-festive .ann-sep { display: inline-flex; line-height: 0; }
.ann.tone-festive .ann-sep svg { animation: marigoldSpin 8s linear infinite; }
@keyframes marigoldSpin { to { transform: rotate(360deg); } }

/* toran: string of marigolds and mango leaves hanging under the strip */
.tone-festive .ann-toran {
  display: block;
  height: 26px;
  margin-top: -1px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='26' viewBox='0 0 48 26'%3E%3Cpath d='M0 2 Q12 6 24 2 T48 2' fill='none' stroke='%23f59e0b' stroke-width='2'/%3E%3Cpath d='M12 4 V7' stroke='%23f59e0b' stroke-width='1.2'/%3E%3Cg fill='%23f97316'%3E%3Ccircle cx='12' cy='8.6' r='2.6'/%3E%3Ccircle cx='12' cy='15.4' r='2.6'/%3E%3Ccircle cx='8.6' cy='12' r='2.6'/%3E%3Ccircle cx='15.4' cy='12' r='2.6'/%3E%3Ccircle cx='9.6' cy='9.6' r='2.3'/%3E%3Ccircle cx='14.4' cy='9.6' r='2.3'/%3E%3Ccircle cx='9.6' cy='14.4' r='2.3'/%3E%3Ccircle cx='14.4' cy='14.4' r='2.3'/%3E%3C/g%3E%3Ccircle cx='12' cy='12' r='2.4' fill='%23fbbf24'/%3E%3Cpath d='M36 3 C31.5 8 31.5 15 36 21 C40.5 15 40.5 8 36 3Z' fill='%2316a34a'/%3E%3Cpath d='M36 4 V20' stroke='%23166534' stroke-width='0.9'/%3E%3C/svg%3E") repeat-x left top / 48px 26px;
  transform-origin: top center;
  animation: toranSway 4s ease-in-out infinite;
}
@keyframes toranSway { 0%, 100% { transform: skewX(0deg); } 50% { transform: skewX(1.2deg); } }

@media (max-width: 560px) {
  .ann.tone-festive .ann-sep svg { width: 18px; height: 18px; }
  .tone-festive .ann-toran { height: 22px; background-size: 40px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .ann.tone-festive .ann-sep svg, .tone-festive .ann-toran { animation: none; }
}

/* Strip is injected into .ann-slot by home.js (admin → Banners); empty slot takes no space */
.ann-slot:empty { display: none; }
.hero > .ann-slot > .ann-wrap { margin-top: calc(-1 * clamp(1.75rem, 4vw, 3rem)); animation: annIn 0.4s ease both; }
.ann.tone-light .ann-hl { color: #b45309; font-weight: 800; }
.ann.tone-navy .ann-hl, .ann.tone-blue .ann-hl, .ann.tone-green .ann-hl { color: #fde68a; font-weight: 800; }
@keyframes annIn { from { opacity: 0; transform: translateY(-6px); } }

/* ---------------- Services bento: consistent, slightly smaller sizing ---------------- */
.bento { gap: 1rem; }
.bento-card { gap: 0.3rem; padding: clamp(1.15rem, 2vw, 1.5rem); border-radius: 20px; }
.bento-card .ic { width: 2.6rem; height: 2.6rem; margin-bottom: 0.45rem; border-radius: 12px; }
.bento-card .ic svg { width: 1.25rem; height: 1.25rem; }
.b-tag { font-size: 0.68rem; letter-spacing: 0.1em; }
.bento-card h3 { margin: 0.25rem 0 0.15rem; font-size: clamp(1rem, 1.3vw, 1.12rem); letter-spacing: -0.015em; }
.bento-card > p:not(.b-tag) { font-size: 0.87rem; line-height: 1.55; }
.b-links { margin-top: 0.6rem; }
.b-links a { padding: 0.55rem 0; font-size: 0.88rem; font-weight: 650; }
.b-links svg { width: 0.9rem; height: 0.9rem; }
.b-ship .b-links { margin-bottom: 1.1rem; }
.b-ship .btn, .b-intl .text-link { font-size: 0.88rem; }
.b-ship .btn { padding: 0.65rem 1.1rem; }
.b-countries { gap: 0.4rem; margin: 0.75rem 0 1rem; }
.b-countries li { padding: 0.3rem 0.7rem; font-size: 0.78rem; }

/* ---------------- Integrations (replaces the old quote section) ---------------- */
.integ { background: linear-gradient(180deg, #fff 0%, var(--soft) 100%); }
.integ-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(1.75rem, 5vw, 4rem); align-items: center; }

/* visual: platforms orbiting ENVOI */
.integ-visual { position: relative; aspect-ratio: 1 / 0.82; max-width: 30rem; width: 100%; margin: 0 auto; }
.integ-ring { position: absolute; inset: 50% auto auto 50%; border: 1.5px dashed rgba(10, 108, 240, 0.28); border-radius: 50%; transform: translate(-50%, -50%); }
.integ-ring.r1 { width: 58%; aspect-ratio: 1; animation: integSpin 40s linear infinite; }
.integ-ring.r2 { width: 92%; aspect-ratio: 1; border-color: rgba(10, 108, 240, 0.14); animation: integSpin 70s linear infinite reverse; }
@keyframes integSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.integ-hub {
  position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%);
  display: grid; justify-items: center; gap: 0.2rem; padding: 0.9rem 1.1rem;
  border-radius: 20px; background: #fff; box-shadow: 0 18px 40px rgba(10, 60, 140, 0.18);
}
.integ-hub img { display: block; width: 44px; height: auto; }
.integ-hub b { color: var(--navy); font-size: 0.8rem; letter-spacing: 0.08em; }
.integ-node {
  position: absolute; padding: 0.4rem 0.75rem; border: 1px solid var(--line); border-radius: 999px;
  background: #fff; color: var(--ink-2); font-size: 0.76rem; font-weight: 700; white-space: nowrap;
  box-shadow: var(--shadow-sm); animation: integBob 5s ease-in-out infinite;
}
.integ-node::before { content: ''; display: inline-block; width: 0.45rem; height: 0.45rem; margin-right: 0.4rem; border-radius: 50%; background: var(--ok); vertical-align: 0.05rem; }
.integ-node.n1 { top: 4%; left: 40%; }
.integ-node.n2 { top: 22%; left: 2%; animation-delay: -0.8s; }
.integ-node.n3 { top: 22%; right: 0; animation-delay: -1.6s; }
.integ-node.n4 { bottom: 22%; left: 4%; animation-delay: -2.4s; }
.integ-node.n5 { bottom: 22%; right: 2%; animation-delay: -3.2s; }
.integ-node.n6 { bottom: 3%; left: 38%; animation-delay: -4s; }
@keyframes integBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.integ-toast {
  position: absolute; top: 40%; left: 63%; display: flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 0.7rem; border-radius: 12px; background: #fff; box-shadow: 0 14px 30px rgba(4, 18, 43, 0.14);
}
.integ-toast-ic { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: #e7f8ef; color: var(--ok); }
.integ-toast-ic svg { width: 0.9rem; height: 0.9rem; }
.integ-toast small { display: block; color: var(--muted); font-size: 0.64rem; }
.integ-toast b { color: var(--ink); font-size: 0.76rem; }

/* copy */
.integ-copy .h2 { margin-top: 0.35rem; }
.integ-lede { margin: 0.75rem 0 1.25rem; color: var(--muted); font-size: 0.95rem; line-height: 1.65; }
.integ-points { display: grid; gap: 0.85rem; margin: 0 0 1.5rem; padding: 0; list-style: none; }
.integ-points li { display: flex; align-items: flex-start; gap: 0.75rem; }
.integ-points .ic { flex-shrink: 0; width: 2.3rem; height: 2.3rem; border-radius: 11px; }
.integ-points .ic svg { width: 1.1rem; height: 1.1rem; }
.integ-points b { display: block; margin-bottom: 0.1rem; color: var(--ink); font-size: 0.92rem; }
.integ-points span:last-child { color: var(--muted); font-size: 0.86rem; line-height: 1.5; }
.integ-copy .btn svg { width: 18px; height: 18px; }

@media (max-width: 900px) {
  .integ-grid { grid-template-columns: minmax(0, 1fr); }
  .integ-copy { order: -1; }
  .integ-visual { max-width: 24rem; }
}
@media (max-width: 480px) {
  .integ-node { font-size: 0.66rem; padding: 0.3rem 0.55rem; }
  .integ-toast { left: 55%; }
  .integ-copy .btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .integ-ring, .integ-node { animation: none; }
}

/* ---------- Integrations: extra motion ---------- */
.integ-flow { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.flow-base { fill: none; stroke: rgba(10, 108, 240, 0.18); stroke-width: 1.5; stroke-dasharray: 2 3; vector-effect: non-scaling-stroke; }
.flow-dot {
  fill: none; stroke: var(--blue); stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke;
  stroke-dasharray: 4 96; stroke-dashoffset: 100; opacity: 0;
  animation: flowIn 3s cubic-bezier(0.45, 0, 0.55, 1) infinite; animation-delay: calc(var(--i) * 0.5s);
}
@keyframes flowIn {
  0% { stroke-dashoffset: 100; opacity: 0; }
  10% { opacity: 1; }
  85% { opacity: 1; }
  100% { stroke-dashoffset: 4; opacity: 0; }
}
/* hub ripples */
.integ-hub { z-index: 2; }
.integ-hub::before,
.integ-hub::after { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: 20px; border: 2px solid rgba(10, 108, 240, 0.35); animation: hubRipple 2.8s ease-out infinite; }
.integ-hub::after { animation-delay: 1.4s; }
@keyframes hubRipple { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(1.6); opacity: 0; } }
/* nodes sit above the lines; dots pulse in turn */
.integ-node { z-index: 1; }
.integ-node::before { animation: nodePing 3s ease-in-out infinite; }
.integ-node.n2::before { animation-delay: 0.5s; }
.integ-node.n3::before { animation-delay: 1s; }
.integ-node.n4::before { animation-delay: 1.5s; }
.integ-node.n5::before { animation-delay: 2s; }
.integ-node.n6::before { animation-delay: 2.5s; }
@keyframes nodePing { 0%, 70%, 100% { box-shadow: 0 0 0 0 rgba(16, 163, 107, 0); } 20% { box-shadow: 0 0 0 5px rgba(16, 163, 107, 0.25); } }
/* status card */
.integ-toast { z-index: 3; }
.integ-toast-txt { transition: opacity 0.28s, transform 0.28s; }
.integ-toast-txt.out { opacity: 0; transform: translateY(4px); }
@media (prefers-reduced-motion: reduce) {
  .flow-dot, .integ-hub::before, .integ-hub::after, .integ-node::before { animation: none; }
  .flow-dot { opacity: 0; }
}

/* section labels: keep the blue line everywhere (consistency) */
.site-main > .section .faq-side .eyebrow::before { display: block; }
.b-move .b-tag, .b-supply .b-tag { color: var(--blue); }

/* ---------------- Why customers choose ENVOI (dark band) ---------------- */
@media (min-width: 901px) { }

@media (max-width: 900px) {
}
@media (max-width: 600px) {
}

/* ---------- Tool card polish: service tiles + trust row (laptop & phone) ---------- */
.t-blue { --tone: var(--blue); --tone-bg: var(--blue-soft); }
.hero-trust li > span:last-child { min-width: 0; }

@media (max-width: 640px) {
  /* service tiles: icon on top, title + short line, small arrow in the corner */

  /* trust row: four soft chips in a 2 × 2 grid, no dividers */
  .hero-trust { gap: 0.45rem; margin-top: 0.7rem; padding: 0.7rem 0 0; }
  .hero-trust li, .hero-trust li + li { padding: 0.5rem 0.55rem; gap: 0.5rem; border: 0; border-radius: 12px; background: var(--soft); }
  .hero-trust small { display: block; overflow: hidden; font-size: 0.68rem; white-space: nowrap; text-overflow: ellipsis; }
  .ht-ic { background: #fff; }
}

/* ---------- Bento service links: hover like the "Cargo & freight" tile ---------- */
.b-links { gap: 0.3rem; }
.b-links a,
.b-links a:hover {
  justify-content: flex-start;
  gap: 0.7rem;
  padding: 0.45rem 0.5rem;
  border: 1px solid transparent;
  border-radius: 12px;
  transition: background 0.25s, border-color 0.25s, box-shadow 0.3s, color 0.2s;
}
.b-links li:last-child a { border-bottom: 1px solid transparent; }
.bl-t { flex: 1; min-width: 0; }
.bl-ic { flex-shrink: 0; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 9px; background: var(--blue-soft); transition: background 0.25s, color 0.25s; }
.b-links .bl-ic svg { width: 1rem; height: 1rem; opacity: 1; transform: none; color: var(--blue); transition: color 0.25s; }
.bl-go { flex-shrink: 0; display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; transition: background 0.25s, transform 0.3s var(--ease); }
.b-links .bl-go svg { width: 0.85rem; height: 0.85rem; color: var(--blue); opacity: 0.55; transform: none; }

/* light cards (movers, supply chain) */
.b-links a:hover { color: var(--ink); background: linear-gradient(90deg, var(--blue-soft), #fff 85%); border-color: rgba(10, 108, 240, 0.35); box-shadow: 0 8px 20px -10px rgba(10, 108, 240, 0.45); }
.b-links a:hover .bl-ic { background: var(--blue); }
.b-links a:hover .bl-ic svg { color: #fff; }
.b-links a:hover .bl-go { background: var(--blue); transform: translateX(2px); }
.b-links a:hover .bl-go svg { color: #fff; opacity: 1; }

/* dark card (domestic shipping) */
.b-ship .bl-ic { background: rgba(126, 215, 255, 0.12); }
.b-ship .b-links .bl-ic svg, .b-ship .b-links .bl-go svg { color: var(--sky); }
.b-ship .b-links a:hover { color: #fff; background: linear-gradient(90deg, rgba(126, 215, 255, 0.16), rgba(255, 255, 255, 0.03) 85%); border-color: rgba(126, 215, 255, 0.45); box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.6); }
.b-ship .b-links a:hover .bl-ic, .b-ship .b-links a:hover .bl-go { background: var(--sky); }
.b-ship .b-links a:hover .bl-ic svg, .b-ship .b-links a:hover .bl-go svg { color: var(--navy); }
@media (hover: none) { .b-links a:active { background: var(--blue-soft); } .b-ship .b-links a:active { background: rgba(126, 215, 255, 0.14); } }
.b-ship .b-links a { border-color: transparent; }
.b-links { gap: 0.15rem; }
.b-links a, .b-links a:hover { padding: 0.32rem 0.45rem; }
.bl-ic { width: 1.8rem; height: 1.8rem; border-radius: 8px; }
.b-links .bl-ic svg { width: 0.92rem; height: 0.92rem; }
.bl-go { width: 1.55rem; height: 1.55rem; }

/* Bento links: each link has its own colour (--lt, set per <li>) and nothing moves on hover */
.b-links li { --lt: var(--blue); }
.b-links a:hover svg, .b-links a:hover .bl-ic svg, .b-links a:hover .bl-go svg { transform: none; }
.b-links a:hover .bl-go { transform: none; }
.bl-ic { background: color-mix(in srgb, var(--lt) 12%, #fff); }
.b-links .bl-ic svg, .b-links .bl-go svg { color: var(--lt); }
.b-links a:hover { background: linear-gradient(90deg, color-mix(in srgb, var(--lt) 10%, #fff), #fff 85%); border-color: color-mix(in srgb, var(--lt) 40%, transparent); box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--lt) 55%, transparent); }
.b-links a:hover .bl-ic, .b-links a:hover .bl-go { background: var(--lt); }
.b-links a:hover .bl-ic svg, .b-links a:hover .bl-go svg { color: #fff; }
/* dark card: brighter tints of the same colours */
.b-ship .bl-ic { background: color-mix(in srgb, var(--lt) 28%, transparent); }
.b-ship .b-links .bl-ic svg, .b-ship .b-links .bl-go svg { color: color-mix(in srgb, var(--lt) 55%, #fff); }
.b-ship .b-links a:hover { background: linear-gradient(90deg, color-mix(in srgb, var(--lt) 26%, transparent), rgba(255, 255, 255, 0.03) 85%); border-color: color-mix(in srgb, var(--lt) 60%, transparent); }
.b-ship .b-links a:hover .bl-ic, .b-ship .b-links a:hover .bl-go { background: var(--lt); }
.b-ship .b-links a:hover .bl-ic svg, .b-ship .b-links a:hover .bl-go svg { color: #fff; }

/* Hero tool: track box only (service tiles removed — the services section below lists them) */
.tool-title { display: inline-flex; align-items: center; gap: 0.55rem; margin: 0; font-size: clamp(1.05rem, 1.6vw, 1.25rem); font-weight: 800; letter-spacing: -0.015em; color: var(--ink); }
.tool-title svg { width: 1.6rem; height: 1.6rem; padding: 0.3rem; border-radius: 9px; background: var(--blue-soft); color: var(--blue); }
@media (max-width: 980px) { .tool-note { display: none; } }

/* ---------- Hero track box (redesign): intro + one search bar + coloured trust items ---------- */
.tool-head { align-items: center; margin-bottom: 1.1rem; }
.tool-intro { display: flex; align-items: center; gap: 0.85rem; min-width: 0; }
.tool-badge { flex-shrink: 0; display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: 14px; background: linear-gradient(135deg, #2f86ff, var(--blue)); color: #fff; box-shadow: 0 10px 22px -8px rgba(10, 108, 240, 0.6); }
.tool-badge svg { width: 1.35rem; height: 1.35rem; }
.tool-title { display: flex; align-items: center; gap: 0.6rem; font-size: clamp(1.05rem, 1.6vw, 1.25rem); }
.tool-title svg { display: none; }
.tool-sub { margin: 0.15rem 0 0; color: var(--muted); font-size: 0.85rem; }
.live-dot { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.15rem 0.55rem 0.15rem 0.45rem; border-radius: 999px; background: #e7f8ef; color: #15803d; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.live-dot::before { content: ''; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6); animation: live-pulse 1.8s ease-out infinite; }
@keyframes live-pulse { 70% { box-shadow: 0 0 0 7px rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } }
.tool-note { padding: 0.35rem 0.75rem; border-radius: 999px; background: var(--soft); font-size: 0.8rem; }

/* one search bar: icon · input · button inside */
.track-bar { position: relative; align-items: center; gap: 0; padding: 0.35rem; border: 1.5px solid var(--line-2); border-radius: 16px; background: #fff; box-shadow: 0 6px 18px -12px rgba(10, 23, 48, 0.35); transition: border-color 0.2s, box-shadow 0.2s; }
.track-bar:focus-within { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(10, 108, 240, 0.12); }
.tb-ic { flex-shrink: 0; display: grid; place-items: center; width: 2.6rem; color: var(--muted); }
.tb-ic svg { width: 1.2rem; height: 1.2rem; }
.track-bar input,
.track-bar input:focus { min-height: 2.9rem; padding: 0 0.5rem 0 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; font-size: 1rem; font-weight: 600; letter-spacing: 0.03em; }
.track-bar input::placeholder { font-weight: 500; letter-spacing: 0.01em; }
.track-bar .btn { min-height: 2.9rem; padding: 0 1.3rem; border-radius: 12px; gap: 0.45rem; }
.track-bar .btn svg { width: 1rem; height: 1rem; transition: transform 0.25s var(--ease); }
.track-bar .btn:hover svg { transform: translateX(3px); }

/* trust items: own colour each, no divider lines */
.hero-trust { gap: 0.6rem; margin-top: 1.1rem; padding: 1.1rem 0 0; }
.hero-trust li, .hero-trust li + li { --ht: var(--blue); padding: 0.55rem 0.7rem; border: 0; border-radius: 14px; background: color-mix(in srgb, var(--ht) 6%, #fff); transition: background 0.25s; }
.hero-trust li:hover { background: color-mix(in srgb, var(--ht) 11%, #fff); }
.ht-ic { background: color-mix(in srgb, var(--ht) 14%, #fff); color: var(--ht); }

@media (max-width: 640px) {
  .tool-badge { width: 2.4rem; height: 2.4rem; border-radius: 12px; }
  .tool-badge svg { width: 1.15rem; height: 1.15rem; }
  .tool-sub { font-size: 0.78rem; }
  .track-bar { flex-direction: row; padding: 0.3rem; border-radius: 14px; }
  .tb-ic { width: 2.1rem; }
  .track-bar input, .track-bar input:focus { min-height: 2.6rem; font-size: 0.92rem; }
  .track-bar .btn { min-height: 2.6rem; padding: 0 0.9rem; font-size: 0.88rem; }
  .hero-trust { gap: 0.45rem; margin-top: 0.8rem; padding-top: 0.8rem; }
  .hero-trust li, .hero-trust li + li { padding: 0.5rem 0.55rem; }
}
@media (prefers-reduced-motion: reduce) { .live-dot::before { animation: none; } }
@media (max-width: 640px) { .hero-trust small { white-space: normal; overflow: visible; line-height: 1.3; } }

/* ---------- Track box: two columns on laptops — tracking (left) · 2 × 2 square trust tiles (right) ---------- */
@media (min-width: 981px) {
  .tool { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 1.75rem; align-items: start; }
  .tool > .tool-head { grid-column: 1; grid-row: 1; flex-direction: column; align-items: flex-start; gap: 0.8rem; margin-bottom: 1rem; }
  .tool > .tool-pane { grid-column: 1; grid-row: 2; align-self: start; }
  .tool > .hero-trust { grid-column: 2; grid-row: 1 / span 2; align-self: stretch; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin: 0; padding: 0 0 0 1.75rem; border-top: 0; border-left: 1px solid var(--line); }
  .tool > .hero-trust li, .tool > .hero-trust li + li { flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 0.7rem; min-height: 7.2rem; padding: 0.9rem; border-radius: 16px; }
  .tool > .hero-trust .ht-ic { width: 2.4rem; height: 2.4rem; border-radius: 12px; }
  .tool > .hero-trust strong { font-size: 0.9rem; }
  .tool > .hero-trust small { font-size: 0.76rem; }
  .tool-note { order: 3; }
}
@media (min-width: 981px) {
  .tool { grid-template-rows: 1fr auto auto 1fr; }
  .tool > .tool-head { grid-row: 2; }
  .tool > .tool-pane { grid-row: 3; }
  .tool > .hero-trust { grid-row: 1 / span 4; }
}

/* ---------- Track card sits on the hero edge: grey hero background stops at the card's middle ---------- */
.hero {
  --hero-cut: 13rem; /* updated by js/home.js to half the card height + bottom padding */
  padding-bottom: clamp(1.5rem, 3vw, 2.25rem);
  background:
    radial-gradient(55% 45% at 50% 55%, rgba(10, 108, 240, 0.08), transparent 70%) top / 100% calc(100% - var(--hero-cut)) no-repeat,
    linear-gradient(180deg, #f5f7fb 0%, #e9eef6 100%) top / 100% calc(100% - var(--hero-cut)) no-repeat,
    #fff;
}
.hero::before { bottom: var(--hero-cut); }
.hero .tool { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 24px 60px -18px rgba(10, 23, 48, 0.22), 0 0 0 1px rgba(10, 23, 48, 0.04); }
.partners-strip { padding-top: clamp(1.25rem, 3vw, 2rem); }

/* Track card: slightly smaller */
.hero .tool { max-width: 1060px; padding: clamp(0.9rem, 1.8vw, 1.15rem); border-radius: 22px; }
.tool-badge { width: 2.5rem; height: 2.5rem; border-radius: 12px; }
.tool-badge svg { width: 1.15rem; height: 1.15rem; }
.tool-title { font-size: clamp(1rem, 1.4vw, 1.12rem); }
.tool-sub { font-size: 0.8rem; }
.tool-note { padding: 0.28rem 0.65rem; font-size: 0.74rem; }
.track-bar { padding: 0.28rem; border-radius: 14px; }
.track-bar input, .track-bar input:focus { min-height: 2.6rem; font-size: 0.94rem; }
.track-bar .btn { min-height: 2.6rem; padding: 0 1.1rem; border-radius: 11px; font-size: 0.9rem; }
@media (min-width: 981px) {
  .tool { column-gap: 1.35rem; }
  .tool > .tool-head { gap: 0.6rem; margin-bottom: 0.8rem; }
  .tool > .hero-trust { gap: 0.5rem; padding-left: 1.35rem; }
  .tool > .hero-trust li, .tool > .hero-trust li + li { min-height: 6rem; gap: 0.5rem; padding: 0.7rem 0.75rem; border-radius: 14px; }
  .tool > .hero-trust .ht-ic { width: 2.05rem; height: 2.05rem; border-radius: 10px; }
  .tool > .hero-trust .ht-ic svg { width: 1rem; height: 1rem; }
  .tool > .hero-trust strong { font-size: 0.84rem; }
  .tool > .hero-trust small { font-size: 0.72rem; }
}

/* ---------- Phones: clear integrations diagram ---------- */
@media (max-width: 560px) {
  /* integrations: the "Order synced" bubble sits under the hub, not on top of it */
  .integ-toast {
    top: auto;
    bottom: 16%;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.4rem 0.6rem;
    white-space: nowrap;
  }
  .integ-node.n6 { bottom: 0; }
  .integ-node.n4 { bottom: 30%; }
  .integ-node.n5 { bottom: 30%; }
}

/* Phones: Packers & Movers and Supply chain side by side (Domestic + International stay full width) */
@media (max-width: 640px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .b-ship,
  .b-intl { grid-column: 1 / -1; }
  .b-move,
  .b-supply { padding: 0.85rem 0.7rem 0.75rem; border-radius: 16px; }
  .b-move .ic,
  .b-supply .ic { width: 2.1rem; height: 2.1rem; margin-bottom: 0.3rem; border-radius: 10px; }
  .b-move .ic svg,
  .b-supply .ic svg { width: 1.05rem; height: 1.05rem; }
  .b-move .b-tag,
  .b-supply .b-tag { font-size: 0.62rem; letter-spacing: 0.06em; }
  .b-move h3,
  .b-supply h3 { font-size: 0.86rem; line-height: 1.3; }
  .b-move .b-links a,
  .b-supply .b-links a { gap: 0.45rem; padding: 0.4rem 0.3rem; font-size: 0.78rem; }
  .b-move .bl-ic,
  .b-supply .bl-ic { width: 1.6rem; height: 1.6rem; border-radius: 8px; }
  .b-move .b-links .bl-ic svg,
  .b-supply .b-links .bl-ic svg { width: 0.85rem; height: 0.85rem; }
  .b-move .bl-go,
  .b-supply .bl-go { display: none; }
}

/* FAQ: centred heading on top, animation on the left, questions on the right */
.site-main > .section .faq-layout {
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  grid-template-areas: 'side side' 'art faq';
  column-gap: clamp(1.5rem, 4vw, 3.5rem);
  max-width: 1120px;
}
@media (max-width: 900px) {
  .site-main > .section .faq-layout { grid-template-columns: 1fr; grid-template-areas: 'side' 'faq'; }
}

/* ---------------- Customer stories (testimonials) ---------------- */
.cs { position: relative; background: linear-gradient(180deg, var(--soft) 0%, #fff 100%); }

/* header: title left · rating + button right */
.cs-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem 3rem; }
.cs-head-text { max-width: 36rem; }
.cs-head h2 { margin: 0.6rem 0 0; font-size: clamp(1.8rem, 3.2vw, 2.5rem); line-height: 1.15; letter-spacing: -0.03em; }
.cs-head h2 .hl { background: linear-gradient(90deg, var(--blue), #22c3ee); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cs-head-text > p:not(.eyebrow) { margin: 0.75rem 0 0; color: var(--muted); line-height: 1.7; }

/* stars */
.cs-stars { display: inline-flex; gap: 0.12rem; font-size: 0.98rem; line-height: 1; }
.cs-stars i { font-style: normal; color: #dbe3ee; }
.cs-stars i.on { color: #f5a524; }

/* grid: 1 centred · 2–3 in a row · 4 as 2 × 2 */
.cs-grid { display: grid; gap: 1.25rem; margin-top: clamp(1.8rem, 3.5vw, 2.5rem); }
.cs-n1 { max-width: 44rem; margin-inline: auto; }
.cs-n2, .cs-n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cs-n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* card */
.cs-story {
  --acc: var(--blue);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem 1.5rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(10, 23, 48, 0.04), 0 12px 32px -22px rgba(10, 40, 100, 0.35);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.3s;
}
.cs-story:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--acc) 30%, var(--line)); box-shadow: 0 24px 48px -28px color-mix(in srgb, var(--acc) 55%, transparent); }
.cs-top { display: flex; align-items: center; justify-content: space-between; }
.cs-q { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 12px; background: color-mix(in srgb, var(--acc) 10%, #fff); color: var(--acc); font: 800 2rem/1 Georgia, serif; padding-top: 0.6rem; }
.cs-quote { flex: 1 1 auto; margin: 0; color: var(--ink-2); font-size: 0.97rem; line-height: 1.75; }
.cs-n1 .cs-quote { font-size: 1.05rem; }
.cs-quote mark { padding: 0 0.12em; border-radius: 4px; color: var(--ink); font-weight: 700; background: linear-gradient(120deg, color-mix(in srgb, var(--acc) 22%, transparent), color-mix(in srgb, var(--acc) 12%, transparent)) no-repeat 0 88% / 100% 42%; }

/* proof row: route line + result */
.cs-proof { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; }
.cs-route { display: inline-flex; align-items: center; gap: 0.55rem; min-width: 0; font-size: 0.8rem; }
.cs-route b { color: var(--ink); font-weight: 700; white-space: nowrap; }
.cs-line { position: relative; flex: 0 0 auto; width: 3.5rem; height: 2px; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--acc) 45%, #fff) 0 4px, transparent 4px 8px); }
.cs-line i { position: absolute; top: 50%; left: 0; width: 0.55rem; height: 0.55rem; margin-top: -0.275rem; border-radius: 50%; background: var(--acc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 20%, transparent); animation: cs-travel 2.8s ease-in-out infinite; }
@keyframes cs-travel { 0% { left: 0; } 70%, 100% { left: calc(100% - 0.55rem); } }
.cs-ok { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.6rem; border-radius: 99px; background: #ecfbf2; color: #15803d; font-style: normal; font-size: 0.74rem; font-weight: 700; }
.cs-ok svg { width: 0.85rem; height: 0.85rem; }

/* author */
.cs-by { display: flex; align-items: center; gap: 0.7rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.cs-photo { flex: 0 0 auto; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; overflow: hidden; background: color-mix(in srgb, var(--acc) 14%, #fff); }
.cs-photo img { width: 100%; height: 100%; object-fit: cover; }
.cs-photo span { color: var(--acc); font-size: 0.85rem; font-weight: 800; }
.cs-who { display: grid; flex: 1 1 auto; min-width: 0; line-height: 1.35; }
.cs-who b { display: flex; align-items: center; gap: 0.4rem; color: var(--ink); font-size: 0.93rem; }
.cs-who small { color: var(--muted); font-size: 0.78rem; }
.cs-sample { padding: 0.05rem 0.4rem; border-radius: 6px; background: #f1f4f8; color: #64748b; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.cs-svc { flex: 0 0 auto; padding: 0.25rem 0.65rem; border-radius: 99px; background: color-mix(in srgb, var(--acc) 9%, #fff); color: var(--acc); font-size: 0.7rem; font-weight: 800; }

/* share link under the grid */
.cs-foot { margin: 1.6rem 0 0; text-align: center; }
.cs-foot a { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--muted); font-size: 0.9rem; text-decoration: none; }
.cs-foot a > svg:first-child { width: 1.2rem; height: 1.2rem; color: #25d366; }
.cs-foot a > svg:last-child { width: 0.95rem; height: 0.95rem; color: var(--blue); transition: transform 0.25s var(--ease); }
.cs-foot b { color: var(--blue); }
.cs-foot a:hover > svg:last-child { transform: translateX(3px); }

/* entrance: cards rise one after another, then stars pop and the quote fades in word by word */
.js .cs-grid.reveal { opacity: 1; transform: none; }
.js .cs-grid .cs-story { opacity: 0; transform: translateY(16px); }
.js .cs-grid.in .cs-story { animation: cs-card 0.65s var(--ease) both; animation-delay: calc(var(--c) * 0.12s); }
@keyframes cs-card { to { opacity: 1; transform: none; } }
.cs-grid.in .cs-stars i.on { animation: cs-star 0.45s var(--ease) both; animation-delay: calc(var(--c) * 0.12s + 0.3s + var(--s) * 0.07s); }
@keyframes cs-star { from { transform: scale(0.3); opacity: 0; } 60% { transform: scale(1.2); } }
.cs-quote .w { display: inline-block; }
.cs-grid.in .cs-quote .w { animation: cs-word 0.4s var(--ease) both; animation-delay: calc(var(--c) * 0.12s + 0.4s + var(--i) * 14ms); }
@keyframes cs-word { from { opacity: 0; transform: translateY(5px); } }
.js .cs-grid .cs-quote mark { background-size: 0% 42%; }
.cs-grid.in .cs-quote mark { animation: cs-mark 0.6s var(--ease) both; animation-delay: calc(var(--c) * 0.12s + 0.8s + var(--i) * 14ms); }
@keyframes cs-mark { to { background-size: 100% 42%; } }

@media (max-width: 980px) {
  .cs-n3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .cs-head { flex-direction: column; align-items: flex-start; }
  .cs-n2, .cs-n3, .cs-n4 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .cs-story { padding: 1.2rem 1.1rem 1.05rem; border-radius: 18px; }
  .cs-quote { font-size: 0.93rem; }
}
@media (prefers-reduced-motion: reduce) {
  .cs-grid .cs-story, .cs-grid .cs-quote .w, .cs-grid .cs-stars i, .cs-grid .cs-quote mark, .cs-line i { animation: none !important; opacity: 1 !important; transform: none !important; }
  .cs-grid .cs-quote mark { background-size: 100% 42%; }
}

/* ---------- Customer stories: colour + motion (tint per card, float, rotating spotlight) ---------- */
@property --cs-ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.cs-story {
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--acc) 9%, transparent), transparent 55%),
    radial-gradient(90% 70% at 0% 100%, color-mix(in srgb, var(--acc) 6%, transparent), transparent 60%),
    #fff;
}
/* left accent edge */
.cs-story::before { content: ''; position: absolute; left: 0; top: 1.4rem; bottom: 1.4rem; width: 3px; border-radius: 0 3px 3px 0; background: linear-gradient(var(--acc), color-mix(in srgb, var(--acc) 30%, #22c3ee)); opacity: 0.85; }
.cs-stars i.on { background: linear-gradient(180deg, #ffc94d, #f59e0b); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cs-photo { box-shadow: 0 0 0 2px #fff, 0 0 0 4px color-mix(in srgb, var(--acc) 35%, transparent); }

/* gentle float after the entrance — each card out of step */
.js .cs-grid.in .cs-story { animation: cs-card 0.65s var(--ease) both, cs-float 7s ease-in-out infinite; animation-delay: calc(var(--c) * 0.12s), calc(1s + var(--c) * -1.7s); }
@keyframes cs-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.cs-story:hover { transform: none; translate: 0 -4px; }
.cs-story { transition: translate 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.3s; }

/* spotlight (js/home.js moves .is-lit from card to card) */
.cs-story::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from var(--cs-ang), transparent 0 55%, var(--acc) 75%, #22c3ee 85%, transparent 95%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.5s;
  animation: cs-spin 3.2s linear infinite;
  pointer-events: none;
}
@keyframes cs-spin { to { --cs-ang: 360deg; } }
.cs-story.is-lit::after { opacity: 1; }
.cs-story.is-lit { border-color: transparent; box-shadow: 0 26px 56px -30px color-mix(in srgb, var(--acc) 70%, transparent), 0 0 0 4px color-mix(in srgb, var(--acc) 7%, transparent); }
/* shine sweep across the lit card */
.cs-story .cs-shine { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: inherit; pointer-events: none; }
.cs-story .cs-shine::before { content: ''; position: absolute; top: -20%; bottom: -20%; left: -40%; width: 30%; background: linear-gradient(100deg, transparent, color-mix(in srgb, var(--acc) 10%, transparent), transparent); transform: skewX(-12deg) translateX(-120%); }
.cs-story.is-lit .cs-shine::before { animation: cs-shine 1.4s var(--ease) both; }
@keyframes cs-shine { to { transform: skewX(-12deg) translateX(560%); } }
/* quote icon fills with colour and pops on the lit card */
.cs-q { transition: background-color 0.4s, color 0.4s, transform 0.4s var(--ease); }
.cs-story.is-lit .cs-q { background: var(--acc); color: #fff; transform: rotate(-8deg) scale(1.08); }
.cs-story.is-lit .cs-line i { animation-duration: 1.6s; }

@media (prefers-reduced-motion: reduce) {
  .js .cs-grid.in .cs-story { animation: none !important; opacity: 1 !important; transform: none !important; }
  .cs-story::after, .cs-story.is-lit .cs-shine::before { animation: none; }
}

/* ---------- Customer stories: slider (each card once; 3 / 2 / 1 visible) ---------- */
.cs-slider { --per: 3; --gap: 1.25rem; margin-top: clamp(1.8rem, 3.5vw, 2.5rem); }
.cs-viewport { overflow: hidden; margin: -0.75rem; padding: 0.75rem 0.75rem 1.25rem; touch-action: pan-y; }
.cs-slides { display: flex; align-items: flex-start; gap: var(--gap); transition: transform 0.7s var(--ease); }
.cs-slides .cs-story { flex: 0 0 calc((100% - (var(--per) - 1) * var(--gap)) / var(--per)); }
.cs-slides .cs-quote { flex: 0 0 auto; font-size: 0.95rem; }
/* the cards coming into view rise in, the rest wait slightly lower and faded */
.cs-slider.is-ready .cs-slides .cs-story { opacity: 0.45; transform: translateY(10px) scale(0.98); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease), translate 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.3s; }
.cs-slider.is-ready .cs-slides .cs-story.is-in { opacity: 1; transform: none; }
.cs-slides .cs-story.is-in .cs-q { animation: cs-qpop 0.6s var(--ease) both; }
@keyframes cs-qpop { 40% { transform: rotate(-10deg) scale(1.15); } }
.cs-slides .cs-quote mark { background-size: 100% 42%; }
.cs-slides .cs-story:hover { translate: 0 -4px; box-shadow: 0 24px 48px -28px color-mix(in srgb, var(--acc) 60%, transparent); }

/* arrows + dots (the dot of the current position stretches and fills) */
.cs-ctrl { display: flex; align-items: center; justify-content: center; gap: 0.9rem; margin-top: 0.4rem; }
.cs-arrow { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--ink); cursor: pointer; transition: background-color 0.25s, color 0.25s, border-color 0.25s, transform 0.25s var(--ease); }
.cs-arrow svg { width: 1.05rem; height: 1.05rem; }
.cs-arrow[data-cs-prev] svg { transform: rotate(180deg); }
.cs-arrow:hover { background: var(--blue); border-color: var(--blue); color: #fff; transform: scale(1.06); }
.cs-arrow:disabled { opacity: 0.35; cursor: default; transform: none; background: #fff; color: var(--ink); border-color: var(--line); }
.cs-dots { display: flex; gap: 0.4rem; }
.cs-dots button { position: relative; width: 0.55rem; height: 0.55rem; padding: 0; overflow: hidden; border: 0; border-radius: 99px; background: #cfd9e8; cursor: pointer; transition: width 0.4s var(--ease); }
.cs-dots button.on { width: 2.2rem; }
/* filling bar = time until the next slide */
.cs-dots button.on::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--blue); transform-origin: left; animation: cs-fill var(--cs-every, 5s) linear both; }
.cs-slider.is-paused .cs-dots button.on::after { animation-play-state: paused; }
@keyframes cs-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (max-width: 1080px) { .cs-slider { --per: 2; } }
@media (max-width: 680px) {
  .cs-slider { --per: 1; --gap: 0.9rem; }
  .cs-slides .cs-quote { font-size: 0.9rem; }
}
@media (prefers-reduced-motion: reduce) {
  .cs-slides, .cs-slides .cs-story { transition: none; }
  .cs-slides .cs-story { opacity: 1; transform: none; }
  .cs-dots button.on::after { animation: none; transform: none; }
}

/* ---------- Customer stories slider: equal cards + richer motion ---------- */
/* every card as tall as the tallest; route + author line up at the bottom */
.cs-slides { align-items: stretch; transition: transform 0.85s cubic-bezier(0.65, 0, 0.35, 1); }
.cs-slides .cs-story { height: auto; }
.cs-slides .cs-quote { flex: 1 1 auto; }

/* cards outside the view wait smaller and faded */
.cs-slider.is-ready .cs-slides .cs-story { opacity: 0.3; transform: scale(0.93); filter: saturate(0.5); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease), filter 0.6s var(--ease), translate 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.3s; }
.cs-slider.is-ready .cs-slides .cs-story.is-in { opacity: 1; transform: none; filter: none; }
/* the middle card of three is lifted a little */
.cs-slides .cs-story.is-mid { transform: translateY(-8px); box-shadow: 0 30px 60px -32px color-mix(in srgb, var(--acc) 65%, transparent); border-color: color-mix(in srgb, var(--acc) 28%, var(--line)); }

/* newly arriving cards swing in from the side the slider moves to, one after another */
.cs-slider { --from: 48px; --turn: -14deg; }
.cs-slider[data-dir='prev'] { --from: -48px; --turn: 14deg; }
.cs-slides .cs-story.is-enter { animation: cs-enter 0.85s var(--ease) both; animation-delay: calc(0.12s + var(--k, 0) * 0.1s); transform-origin: 50% 50%; }
@keyframes cs-enter {
  from { opacity: 0; transform: perspective(1400px) translateX(var(--from)) rotateY(var(--turn)) scale(0.95); }
  to { opacity: 1; }
}
.cs-slides .cs-story.is-enter .cs-stars i.on { animation: cs-star 0.45s var(--ease) both; animation-delay: calc(0.45s + var(--k, 0) * 0.1s + var(--s) * 0.07s); }
.cs-slides .cs-story.is-enter .cs-quote mark { animation: cs-mark2 0.7s var(--ease) both; animation-delay: calc(0.7s + var(--k, 0) * 0.1s); }
@keyframes cs-mark2 { from { background-size: 0% 42%; } to { background-size: 100% 42%; } }
.cs-slides .cs-story.is-enter .cs-q { animation: cs-qpop 0.6s var(--ease) both; animation-delay: calc(0.35s + var(--k, 0) * 0.1s); }
.cs-slides .cs-story.is-enter .cs-photo { animation: cs-photo 0.6s var(--ease) both; animation-delay: calc(0.55s + var(--k, 0) * 0.1s); }
@keyframes cs-photo { from { transform: scale(0.6); opacity: 0; } 70% { transform: scale(1.08); } }
.cs-slides .cs-story.is-in .cs-q { animation: none; }
.cs-slides .cs-story.is-enter.is-in .cs-q { animation: cs-qpop 0.6s var(--ease) both; animation-delay: calc(0.35s + var(--k, 0) * 0.1s); }

/* arrows nudge in their direction on hover */
.cs-arrow:hover svg { transform: translateX(2px); }
.cs-arrow[data-cs-prev]:hover svg { transform: rotate(180deg) translateX(2px); }
.cs-arrow svg { transition: transform 0.25s var(--ease); }

@media (max-width: 680px) {
  .cs-slides .cs-story.is-mid { transform: none; }
  .cs-slider { --from: 36px; --turn: -8deg; }
  .cs-slider[data-dir='prev'] { --from: -36px; --turn: 8deg; }
}
@media (prefers-reduced-motion: reduce) {
  .cs-slides .cs-story, .cs-slides .cs-story.is-in { opacity: 1; filter: none; transform: none; }
  .cs-slides .cs-story.is-enter, .cs-slides .cs-story.is-enter * { animation: none !important; }
}

/* ---------- Customer stories: dark neon look (glowing borders, one neon colour per card) ---------- */

/* card: dark glass + faint grid, neon edge in its own colour */
.cs-story {
  border: 1px solid color-mix(in srgb, var(--acc) 35%, transparent);
  background:
    radial-gradient(90% 60% at 100% 0%, color-mix(in srgb, var(--acc) 16%, transparent), transparent 60%),
    linear-gradient(rgba(148, 197, 255, 0.045) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(90deg, rgba(148, 197, 255, 0.045) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(165deg, rgba(17, 32, 60, 0.96), rgba(9, 19, 38, 0.96));
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.02) inset, 0 0 24px -8px color-mix(in srgb, var(--acc) 55%, transparent), 0 26px 50px -30px rgba(0, 0, 0, 0.8);
}
.cs-story::before { width: 2px; background: linear-gradient(var(--acc), transparent); box-shadow: 0 0 12px var(--acc); }
/* slow neon light running around the border of every card in view */
.cs-slides .cs-story.is-in::after { opacity: 0.85; animation-duration: 6s; animation-delay: calc(var(--c) * -1.5s); background: conic-gradient(from var(--cs-ang), transparent 0 62%, var(--acc) 78%, #fff 82%, var(--acc) 86%, transparent 96%); }
.cs-slides .cs-story.is-mid { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.03) inset, 0 0 40px -6px color-mix(in srgb, var(--acc) 65%, transparent), 0 30px 60px -28px rgba(0, 0, 0, 0.85); border-color: color-mix(in srgb, var(--acc) 60%, transparent); }
.cs-slides .cs-story:hover { box-shadow: 0 0 46px -6px color-mix(in srgb, var(--acc) 70%, transparent), 0 30px 60px -28px rgba(0, 0, 0, 0.85); }

/* glowing quote mark + stars */
.cs-q { width: auto; height: auto; padding: 0; background: none !important; color: var(--acc) !important; font: 800 3.6rem/0.7 Georgia, serif; text-shadow: 0 0 14px color-mix(in srgb, var(--acc) 80%, transparent), 0 0 28px color-mix(in srgb, var(--acc) 40%, transparent); }
.cs-stars i { color: rgba(226, 236, 255, 0.18); }
.cs-stars i.on { background: none; color: #fbbf24; text-shadow: 0 0 8px rgba(251, 191, 36, 0.7); }

/* text */
.cs-quote { color: #dbe7ff; }
.cs-quote mark { color: #fff; background-image: linear-gradient(120deg, color-mix(in srgb, var(--acc) 38%, transparent), color-mix(in srgb, var(--acc) 18%, transparent)); }
.cs-route b { color: #fff; }
.cs-line { background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--acc) 60%, transparent) 0 4px, transparent 4px 8px); }
.cs-line i { box-shadow: 0 0 10px var(--acc); }
.cs-ok { background: rgba(52, 211, 153, 0.12); color: #6ee7b7; border: 1px solid rgba(52, 211, 153, 0.25); }

/* author */
.cs-by { border-top-color: rgba(255, 255, 255, 0.08); }
.cs-photo { background: color-mix(in srgb, var(--acc) 20%, #0b1730); box-shadow: 0 0 0 2px #0b1730, 0 0 0 4px var(--acc), 0 0 18px color-mix(in srgb, var(--acc) 70%, transparent); }
.cs-photo span { color: #fff; }
.cs-who b { color: #fff; }
.cs-who small { color: #8fa6c8; }
.cs-sample { background: rgba(255, 255, 255, 0.08); color: #a9bad6; }
.cs-svc { background: color-mix(in srgb, var(--acc) 14%, transparent); color: var(--acc); border: 1px solid color-mix(in srgb, var(--acc) 35%, transparent); }

/* controls: arrows glow cyan on hover */
.cs-arrow:hover { background: #22d3ee; border-color: #22d3ee; color: #04111f; box-shadow: 0 0 20px rgba(34, 211, 238, 0.55); }
.cs-dots button.on::after { background: linear-gradient(90deg, #22d3ee, #a78bfa); box-shadow: 0 0 10px rgba(34, 211, 238, 0.7); }
@media (prefers-reduced-motion: reduce) {
  .cs-slides .cs-story.is-in::after { animation: none; }
}

/* section background matches the neighbouring sections (plain page) */
.cs { background: none; }
/* let the card glow fade out naturally instead of being cut at the slider edge */
/* no clipping box around the cards (it cut their glow): cards outside the view fade out fully, and the
   section clips only at the screen edge */
.cs-viewport { overflow: visible; margin: 0; padding: 0.75rem 0 1.25rem; }
.cs { overflow-x: clip; }
.cs-slider.is-ready .cs-slides .cs-story:not(.is-in) { opacity: 0; visibility: hidden; transition: opacity 0.45s var(--ease), transform 0.6s var(--ease), visibility 0s 0.45s; }
.cs-slider.is-ready .cs-slides .cs-story.is-in { visibility: visible; }

/* "What we do" cards: same text sizes as the other sections' cards (phones keep their compact sizes) */
@media (min-width: 641px) {
  .b-tag { font-size: 0.7rem; }
  .bento-card h3 { font-size: clamp(1rem, 1.2vw, 1.08rem); }
  .bento-card > p:not(.b-tag) { font-size: 0.9rem; line-height: 1.6; }
  .b-links a { font-size: 0.9rem; }
  .b-links .bl-ic svg { width: 0.95rem; height: 0.95rem; }
  .b-countries li { font-size: 0.82rem; }
  .bento-card .text-link { font-size: 0.9rem; }
}

/* Home page: everything slightly larger on laptops / tablets (site base is 14px); phones keep 14px */
@media (min-width: 641px) {
  html { font-size: 15px; }
}