/* =====================================================
   WSUK — Warehouse Storage UK | Home Page Stylesheet
   Modern logistics design, conversion-focused
   ===================================================== */

:root {
  --brand-red: #C8102E;
  --brand-red-dark: #9C0A22;
  --brand-red-soft: #FCE9EC;
  --navy: #0A1F44;
  --navy-soft: #122A56;
  --ink: #0F172A;
  --slate: #475569;
  --slate-soft: #64748B;
  --line: #E5E7EB;
  --line-soft: #F1F5F9;
  --bg: #FFFFFF;
  --bg-alt: #F7F8FA;
  --bg-dark: #0A1F44;
  --amber: #F59E0B;
  --green: #16A34A;
  --shadow-sm: 0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.04);
  --shadow-md: 0 4px 6px -1px rgba(15,23,42,.08), 0 2px 4px -2px rgba(15,23,42,.04);
  --shadow-lg: 0 10px 15px -3px rgba(15,23,42,.10), 0 4px 6px -4px rgba(15,23,42,.05);
  --shadow-xl: 0 20px 25px -5px rgba(15,23,42,.10), 0 8px 10px -6px rgba(15,23,42,.05);
  --radius: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --container: 1240px;
  --transition: 200ms cubic-bezier(.4,0,.2,1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; }
body {
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  max-width: 100vw;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--brand-red); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--brand-red-dark); }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; }
h1, h2, h3, h4, h5, h6 {
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--ink);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.02em;
}
h1 { font-weight: 800; letter-spacing: -0.03em; }

/* ---------- Layout ---------- */
.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.section { padding: 80px 0; }
.section-sm { padding: 56px 0; }
.section-alt { background: var(--bg-alt); }
.section-dark { background: var(--bg-dark); color: #fff; }
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4, .section-dark h5, .section-dark h6 { color: #fff; }
.eyebrow {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--brand-red);
  margin-bottom: 16px;
  padding: 6px 12px;
  background: var(--brand-red-soft);
  border-radius: 999px;
}
.section-title { font-size: clamp(1.75rem, 3vw, 2.5rem); margin-bottom: 16px; }
.section-lead { font-size: 1.125rem; color: var(--slate); max-width: 720px; margin-bottom: 40px; }
.text-center { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 26px;
  font-weight: 600;
  font-size: 0.95rem;
  border-radius: var(--radius);
  transition: all var(--transition);
  white-space: nowrap;
  border: 2px solid transparent;
  cursor: pointer;
}
.btn-primary { background: var(--brand-red); color: #fff; box-shadow: var(--shadow-md); }
.btn-primary:hover { background: var(--brand-red-dark); color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.btn-secondary { background: #fff; color: var(--navy); border-color: var(--line); }
.btn-secondary:hover { background: var(--bg-alt); color: var(--navy); border-color: var(--navy); }
.btn-ghost-light { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.3); backdrop-filter: blur(6px); }
.btn-ghost-light:hover { background: rgba(255,255,255,.18); color: #fff; border-color: rgba(255,255,255,.6); }
.btn-outline { background: transparent; color: var(--brand-red); border-color: var(--brand-red); }
.btn-outline:hover { background: var(--brand-red); color: #fff; }
.btn-lg { padding: 16px 32px; font-size: 1rem; }
.btn-icon::after { content: ‘’; }
.btn:hover.btn-icon::after { transform: none; }

/* ---------- Top Bar ---------- */
.top-bar {
  background: var(--navy);
  color: #fff;
  font-size: 0.875rem;
  padding: 8px 0;
}
.top-bar-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.top-bar a { color: #fff; opacity: .9; }
.top-bar a:hover { opacity: 1; color: #fff; }
.top-bar-left, .top-bar-right { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.top-bar-item { display: inline-flex; align-items: center; gap: 6px; }
.top-bar-item svg { width: 14px; height: 14px; }

/* ---------- Header ---------- */
.site-header {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, var(--shadow-sm);
  transition: background-color 240ms ease, box-shadow 240ms ease, border-color 240ms ease;
}
/* When scrolled, slightly more opaque + crisper shadow for definition */
.site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.85);
  border-bottom-color: rgba(15, 23, 42, 0.1);
  box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 8px 24px -8px rgba(15,23,42,.18);
}
.header-inner {
  position: relative;        /* anchor for full-width mega menu */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 0;
}
.logo { padding-left: 22px; }   /* aligns visible "W" with the 📍 pin in top bar */
.logo a { display: flex; align-items: center; gap: 10px; color: var(--ink); }
.logo img {
  height: 44px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
  filter: url(#remove-white);   /* SVG feColorMatrix: white pixels → transparent */
}
/* Mobile drawer logo — slightly smaller */
.mobile-nav-head .logo img,
.mobile-nav-head img {
  height: 38px;
  width: auto;
  max-width: 150px;
  object-fit: contain;
}
/* Footer logo — sized for dark background. Uses light variant of the logo. */
.footer-logo-link img {
  height: 40px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
}
.logo-text { font-size: 1.25rem; font-weight: 800; color: var(--navy); letter-spacing: -0.02em; }
.logo-text span { color: var(--brand-red); }

/* Primary nav */
.primary-nav { display: flex; align-items: center; }
.nav-list { display: flex; gap: 4px; align-items: center; }
.nav-item { position: relative; }
.nav-link {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 12px 14px;
  color: var(--ink);
  font-weight: 600;
  font-size: 0.95rem;
  border-radius: var(--radius);
  transition: all var(--transition);
}
.nav-link:hover, .nav-item:hover > .nav-link { color: var(--brand-red); background: var(--brand-red-soft); }
.nav-link .chev { width: 12px; height: 12px; transition: transform var(--transition); }
.nav-item:hover .chev { transform: rotate(180deg); }

/* ==========  MEGA MENU  ========== */

/* Base — used by Blogs menu (narrow, centered under nav-link). */
.mega-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  padding: 22px;
  margin-top: 14px;
  min-width: 460px;
  max-width: 95vw;
  opacity: 0;
  visibility: hidden;
  /* HOVER BRIDGE FIX: visibility holds at "visible" for the entire fade-out
     so the bridge underneath the link stays alive while opacity transitions. */
  transition:
    opacity 200ms ease,
    transform 220ms cubic-bezier(.2,.8,.2,1),
    visibility 0s linear 220ms;
  z-index: 200;
}
/* Invisible bridge between nav-link and menu — wider than the visual gap. */
.mega-menu::before {
  content: '';
  position: absolute;
  top: -28px;          /* covers margin + a few extra px */
  left: 0;
  right: 0;
  height: 28px;
  background: transparent;
}

/* Open state — triggered by hover OR focus on the parent, OR hover on the
   menu itself (the latter is what makes the bridge work during fade-out). */
.nav-item:hover > .mega-menu,
.nav-item:focus-within > .mega-menu,
.nav-item > .mega-menu:hover {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  transition:
    opacity 200ms ease,
    transform 220ms cubic-bezier(.2,.8,.2,1),
    visibility 0s linear 0s;
}
.nav-item:hover > .nav-link,
.nav-item:focus-within > .nav-link {
  color: var(--brand-red);
  background: var(--brand-red-soft);
}

/* ----- WIDE MEGA MENU (Services — full header width) ----- */
.nav-item-wide { position: static; }

.nav-item-wide > .mega-menu {
  left: 0;
  right: 0;
  width: auto;
  min-width: 0;
  max-width: none;
  transform: translateY(8px);
  padding: 28px;
  background: linear-gradient(180deg, #fff 0%, #FAFBFC 100%);
}
.nav-item-wide:hover > .mega-menu,
.nav-item-wide:focus-within > .mega-menu,
.nav-item-wide > .mega-menu:hover {
  transform: translateY(0);
}

/* Services grid — 12 cards in a 4×3 layout */
.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

/* ----- SERVICE CARD ----- */
.svc-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ink);
  text-decoration: none;
  transition: all 240ms cubic-bezier(.2,.8,.2,1);
  position: relative;
  overflow: hidden;
}
.svc-card::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(200,16,46,.06), transparent);
  transition: left 600ms ease;
}
.svc-card:hover {
  border-color: var(--brand-red);
  box-shadow: 0 10px 24px -8px rgba(200,16,46,.25);
  transform: translateY(-3px);
  color: var(--ink);
}
.svc-card:hover::after { left: 100%; }

.svc-icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, var(--brand-red-soft) 0%, #FFF5F6 100%);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-red);
  transition: all 280ms cubic-bezier(.2,.8,.2,1);
  position: relative;
  overflow: hidden;
}
/* Subtle glow halo behind the icon on hover */
.svc-icon::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.4), transparent 60%);
  opacity: 0;
  transition: opacity 280ms;
  pointer-events: none;
}
.svc-card:hover .svc-icon::before { opacity: 1; }
.svc-icon svg { width: 38px; height: 38px; overflow: visible; position: relative; z-index: 1; }
.svc-card:hover .svc-icon {
  background: linear-gradient(135deg, var(--brand-red), var(--brand-red-dark));
  color: #fff;
  box-shadow: 0 8px 22px -4px rgba(200,16,46,.55);
  transform: scale(1.05);
}
/* Amber accents stay visible on both light and red backgrounds */
.svc-icon .accent { fill: var(--amber); transition: fill 280ms; }
.svc-icon .accent-stroke { stroke: var(--amber); transition: stroke 280ms; }
.svc-card:hover .svc-icon .accent,
.svc-card:hover .svc-icon .accent-stroke { filter: brightness(1.15); }
/* "Spark" particles — invisible by default, fade in on hover */
.svc-icon .spark {
  opacity: 0;
  transform-origin: center;
  transform-box: fill-box;
}
.svc-card .svc-icon .spark { animation: sparkPop 1.4s ease-out infinite; }
.svc-card .svc-icon .spark-2 { animation-delay: .25s; }
.svc-card .svc-icon .spark-3 { animation-delay: .5s; }
.svc-card .svc-icon .spark-4 { animation-delay: .75s; }
@keyframes sparkPop {
  0%   { opacity: 0; transform: scale(.4); }
  35%  { opacity: 1; transform: scale(1.1); }
  70%  { opacity: .6; transform: scale(.9); }
  100% { opacity: 0; transform: scale(.4); }
}
.svc-content { flex: 1; min-width: 0; }
.svc-title {
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--navy);
  line-height: 1.25;
  margin-bottom: 2px;
}
.svc-desc {
  font-size: 0.75rem;
  color: var(--slate);
  line-height: 1.35;
}
.svc-card:hover .svc-title { color: var(--brand-red); }

/* ===== UNIQUE ICON ANIMATIONS (rich, multi-element, per-service) ===== */

/* Generic helpers */
@keyframes wheelSpin { to { transform: rotate(360deg); } }
@keyframes pulseUp {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

/* ---------- 1. PALLET STORAGE — crate floats off top, slats highlight ---------- */
.svc-card:hover .icon-pallet .crate {
  animation: crateFloat 1.4s cubic-bezier(.4,1.6,.5,1) infinite;
  transform-origin: center bottom;
}
.svc-card:hover .icon-pallet .crate-shadow {
  animation: shadowGrow 1.4s cubic-bezier(.4,1.6,.5,1) infinite;
}
.svc-card:hover .icon-pallet .pallet-slat {
  animation: slatGlow 1.4s ease-in-out infinite;
}
@keyframes crateFloat {
  0%, 100% { transform: translateY(0) rotate(0); }
  40% { transform: translateY(-4px) rotate(-2deg); }
  60% { transform: translateY(-4px) rotate(2deg); }
}
@keyframes shadowGrow {
  0%, 100% { transform: scaleX(1); opacity: .6; }
  50% { transform: scaleX(1.4); opacity: .25; }
}
@keyframes slatGlow {
  0%, 100% { opacity: .25; }
  50% { opacity: .6; }
}

/* ---------- 2. WAREHOUSE — door opens, windows pulse, roof flag waves ---------- */
.svc-card:hover .icon-warehouse .door {
  animation: doorSlide 1.6s ease-in-out infinite;
  transform-origin: right center;
}
.svc-card:hover .icon-warehouse .window-light {
  animation: windowPulse 1.2s ease-in-out infinite alternate;
}
.svc-card:hover .icon-warehouse .roof-flag {
  animation: flagWave 1.4s ease-in-out infinite;
  transform-origin: 20px 4px;
  transform-box: view-box;
}
.svc-card:hover .icon-warehouse .roof {
  animation: pulseUp 1.4s ease-in-out infinite;
}
@keyframes doorSlide {
  0%, 30% { transform: scaleX(1); }
  60%, 100% { transform: scaleX(.15); }
}
@keyframes windowPulse {
  from { opacity: .4; }
  to { opacity: 1; }
}
@keyframes flagWave {
  0%, 100% { transform: skewX(0); }
  50% { transform: skewX(-12deg); }
}

/* ---------- 3. FULFILMENT — flaps open, check pops in, sparkles ---------- */
.svc-card:hover .icon-fulfilment .flap-l {
  animation: flapL 1.6s ease-in-out infinite;
  transform-origin: right center;
  transform-box: fill-box;
}
.svc-card:hover .icon-fulfilment .flap-r {
  animation: flapR 1.6s ease-in-out infinite;
  transform-origin: left center;
  transform-box: fill-box;
}
.svc-card:hover .icon-fulfilment .check {
  animation: drawCheck 1.6s ease-in-out infinite;
}
.icon-fulfilment .check {
  stroke-dasharray: 22;
  stroke-dashoffset: 22;
}
@keyframes flapL {
  0%, 30% { transform: rotate(0); }
  60%, 100% { transform: rotate(-50deg); }
}
@keyframes flapR {
  0%, 30% { transform: rotate(0); }
  60%, 100% { transform: rotate(50deg); }
}
@keyframes drawCheck {
  0%, 30% { stroke-dashoffset: 22; opacity: 0; }
  60% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 1; }
}

/* ---------- 4. TRANSPORT — wheels spin, motion lines, exhaust puff, headlight glow ---------- */
.svc-card:hover .icon-transport .wheel {
  animation: wheelSpin .7s linear infinite;
  transform-origin: center;
  transform-box: fill-box;
}
.svc-card:hover .icon-transport .truck-body {
  animation: truckBounce .35s ease-in-out infinite;
}
.svc-card:hover .icon-transport .motion-line {
  animation: motionDash 600ms linear infinite;
}
.svc-card .icon-transport .motion-line-2 { animation-delay: 200ms; }
.svc-card .icon-transport .motion-line-3 { animation-delay: 400ms; }
.svc-card:hover .icon-transport .headlight {
  animation: headlightFlash 1.4s ease-in-out infinite;
}
.svc-card:hover .icon-transport .exhaust {
  animation: exhaustPuff 1.4s ease-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes truckBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-.6px); }
}
@keyframes motionDash {
  0% { opacity: 0; transform: translateX(4px); }
  40% { opacity: 1; }
  100% { opacity: 0; transform: translateX(-6px); }
}
@keyframes headlightFlash {
  0%, 100% { opacity: .55; }
  50% { opacity: 1; }
}
@keyframes exhaustPuff {
  0% { opacity: 0; transform: translate(0,0) scale(.6); }
  40% { opacity: .8; transform: translate(-2px,-2px) scale(1); }
  100% { opacity: 0; transform: translate(-5px,-5px) scale(1.4); }
}

/* ---------- 5. SAME DAY COURIER — bolt pulses, ring rotates, sparks ---------- */
.svc-card:hover .icon-courier .bolt {
  animation: boltStrike .9s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
.svc-card:hover .icon-courier .ring {
  animation: ringSpin 3.2s linear infinite;
  transform-origin: center;
  transform-box: fill-box;
}
.svc-card:hover .icon-courier .ring-2 {
  animation: ringSpin 4.5s linear infinite reverse;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes boltStrike {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  35% { transform: scale(.85); filter: brightness(.7); }
  55% { transform: scale(1.15); filter: brightness(1.3) drop-shadow(0 0 4px currentColor); }
}
@keyframes ringSpin { to { transform: rotate(360deg); } }

/* ---------- 6. PALLET DELIVERY — package drops in, truck shakes ---------- */
.svc-card:hover .icon-delivery .pkg-group {
  animation: pkgDeliver 1.4s cubic-bezier(.4,1.6,.5,1) infinite;
}
.svc-card:hover .icon-delivery .truck-body {
  animation: truckBounce .35s ease-in-out infinite;
}
.svc-card:hover .icon-delivery .wheel {
  animation: wheelSpin .7s linear infinite;
  transform-origin: center;
  transform-box: fill-box;
}
.svc-card:hover .icon-delivery .arrow-down {
  animation: arrowDown 1.4s ease-in-out infinite;
}
@keyframes pkgDeliver {
  0%, 100% { transform: translateY(0); opacity: 1; }
  35% { transform: translateY(-4px); opacity: 1; }
  60% { transform: translateY(2px); opacity: 1; }
}
@keyframes arrowDown {
  0%, 100% { opacity: .35; transform: translateY(-2px); }
  50% { opacity: 1; transform: translateY(2px); }
}

/* ---------- 7. CONTRACT LOGISTICS — pen draws, stamp lands, page corner ---------- */
.svc-card:hover .icon-contract .signature {
  animation: drawSig 2s ease-in-out infinite;
}
.icon-contract .signature {
  stroke-dasharray: 18;
  stroke-dashoffset: 18;
}
.svc-card:hover .icon-contract .pen {
  animation: penMove 2s ease-in-out infinite;
}
.svc-card:hover .icon-contract .stamp {
  animation: stampLand 2s ease-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
.svc-card:hover .icon-contract .corner {
  animation: cornerFlip 2s ease-in-out infinite;
  transform-origin: top right;
  transform-box: fill-box;
}
@keyframes drawSig {
  0%, 20% { stroke-dashoffset: 18; }
  60%, 100% { stroke-dashoffset: 0; }
}
@keyframes penMove {
  0% { transform: translate(-4px, 0); }
  60% { transform: translate(4px, 0); }
  100% { transform: translate(-4px, 0); }
}
@keyframes stampLand {
  0%, 60% { transform: scale(0); opacity: 0; }
  75% { transform: scale(1.4); opacity: 1; }
  90%, 100% { transform: scale(1); opacity: .85; }
}
@keyframes cornerFlip {
  0%, 100% { transform: rotate(0); }
  50% { transform: rotate(-15deg); }
}

/* ---------- 8. CONTAINER — crane hook lowers, container lifts, cable swings ---------- */
.svc-card:hover .icon-container .hook {
  animation: hookLower 2s ease-in-out infinite;
}
.svc-card:hover .icon-container .cable {
  animation: cableSwing 1.4s ease-in-out infinite;
  transform-origin: top center;
  transform-box: view-box;
}
.svc-card:hover .icon-container .container-body {
  animation: containerLift 2s ease-in-out infinite;
}
.svc-card:hover .icon-container .ridge {
  animation: ridgeShine 1.4s ease-in-out infinite;
}
@keyframes hookLower {
  0%, 100% { transform: translateY(-1px); }
  50% { transform: translateY(2px); }
}
@keyframes cableSwing {
  0%, 100% { transform: skewX(0); }
  50% { transform: skewX(3deg); }
}
@keyframes containerLift {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
@keyframes ridgeShine {
  0%, 100% { opacity: .35; }
  50% { opacity: .7; }
}

/* ---------- 9. BULK — stacks pulse in cascade ---------- */
.svc-card .icon-bulk .stack-a { animation: pulseUp 1s ease-in-out infinite; }
.svc-card .icon-bulk .stack-b { animation: pulseUp 1s ease-in-out .15s infinite; }
.svc-card .icon-bulk .stack-c { animation: pulseUp 1s ease-in-out .3s infinite; }
.svc-card .icon-bulk .stack-d { animation: pulseUp 1s ease-in-out .45s infinite; }

/* ---------- 10. OVERFLOW — items spill out, arrows rotate ---------- */
.svc-card .icon-overflow .item-1 { animation: spillItem 1.4s ease-out infinite; }
.svc-card .icon-overflow .item-2 { animation: spillItem 1.4s ease-out .2s infinite; }
.svc-card .icon-overflow .item-3 { animation: spillItem 1.4s ease-out .4s infinite; }
.svc-card:hover .icon-overflow .arrow-curve {
  animation: arrowCurve 1.4s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes spillItem {
  0% { transform: translate(0,0) rotate(0); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translate(6px,-7px) rotate(35deg); opacity: 0; }
}
@keyframes arrowCurve {
  0%, 100% { opacity: .35; transform: rotate(0); }
  50% { opacity: 1; transform: rotate(15deg); }
}

/* ---------- 11. SHORT-TERM — clock hands spin (center 12,20), calendar page flips ---------- */
.svc-card:hover .icon-shortterm .hand-sec {
  animation: wheelSpin 1s linear infinite;
  transform-origin: 12px 20px;
  transform-box: view-box;
}
.svc-card:hover .icon-shortterm .hand-min {
  animation: wheelSpin 3s linear infinite;
  transform-origin: 12px 20px;
  transform-box: view-box;
}
.svc-card:hover .icon-shortterm .hand-hr {
  animation: wheelSpin 8s linear infinite;
  transform-origin: 12px 20px;
  transform-box: view-box;
}
.svc-card:hover .icon-shortterm .cal-page {
  animation: pageFlip 1.6s ease-in-out infinite;
  transform-origin: top left;
  transform-box: fill-box;
}
@keyframes pageFlip {
  0%, 30% { transform: rotateY(0); }
  60% { transform: rotateY(-65deg); }
  100% { transform: rotateY(0); }
}

/* ---------- 12. PALLET T&D — pallets shuttle into truck, wheels spin ---------- */
.svc-card:hover .icon-ptd .pallet-shuttle {
  animation: palletShuttle 1.6s ease-in-out infinite;
}
.svc-card:hover .icon-ptd .pallet-shuttle-2 {
  animation: palletShuttle 1.6s ease-in-out .4s infinite;
}
.svc-card:hover .icon-ptd .wheel {
  animation: wheelSpin .7s linear infinite;
  transform-origin: center;
  transform-box: fill-box;
}
.svc-card:hover .icon-ptd .truck-body {
  animation: truckBounce .35s ease-in-out infinite;
}
@keyframes palletShuttle {
  0%   { transform: translateX(0); opacity: 1; }
  60%  { transform: translateX(8px); opacity: 1; }
  61%  { transform: translateX(8px); opacity: 0; }
  62%  { transform: translateX(0); opacity: 0; }
  85%  { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(0); opacity: 1; }
}

/* ----- BLOG MEGA MENU (narrow, list style) ----- */
.mega-menu-blog {
  min-width: 480px;
  padding: 20px;
}
.mega-menu-blog .mega-col h4 { display: none; }
.mega-menu-blog .mega-col ul { display: flex; flex-direction: column; gap: 2px; }
.mega-menu-blog .mega-col li a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  color: var(--slate);
  font-size: 0.9rem;
  font-weight: 500;
  border-radius: 7px;
  transition: all 220ms cubic-bezier(.2,.8,.2,1);
  position: relative;
}
.mega-menu-blog .mega-col li a::before {
  content: '';
  flex-shrink: 0;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--line);
  transition: all 220ms cubic-bezier(.2,.8,.2,1);
}
.mega-menu-blog .mega-col li a:hover {
  color: var(--brand-red);
  background: var(--brand-red-soft);
  padding-left: 16px;
}
.mega-menu-blog .mega-col li a:hover::before {
  background: var(--brand-red);
  width: 10px;
  height: 2px;
  border-radius: 2px;
}

/* Header CTA */
.header-cta { display: flex; align-items: center; gap: 14px; }
.header-phone {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 9px 18px 9px 9px;
  border: 1px solid rgba(15,23,42,.09);
  border-radius: 16px;
  background: linear-gradient(160deg, #ffffff 0%, #f8fafc 100%);
  box-shadow: 0 2px 16px rgba(15,23,42,.07), inset 0 1px 0 rgba(255,255,255,.9);
  transition: border-color .25s ease, box-shadow .25s ease, transform .2s ease;
}
.header-phone:hover {
  border-color: rgba(200,16,46,.22);
  box-shadow: 0 4px 24px rgba(200,16,46,.10), inset 0 1px 0 rgba(255,255,255,.9);
  transform: translateY(-1px);
}
.header-phone-icon {
  width: 42px; height: 42px;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--brand-red), #F54766);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(200,16,46,.35);
  transition: box-shadow .25s ease;
}
.header-phone:hover .header-phone-icon {
  box-shadow: 0 6px 20px rgba(200,16,46,.50);
}

/* Phone icon hover animations */
.header-phone:hover .icon-phone .phone-body {
  animation: hdrPhoneShake .7s ease-in-out infinite;
  transform-origin: center; transform-box: fill-box;
}
.header-phone .icon-phone .ring-arc-3 { animation: hdrArcPulse 1.4s ease-in-out infinite; }
.header-phone .icon-phone .ring-arc-2 { animation: hdrArcPulse 1.4s ease-in-out .22s infinite; }
.header-phone .icon-phone .ring-arc-1 { animation: hdrArcPulse 1.4s ease-in-out .44s infinite; }
@keyframes hdrPhoneShake {
  0%, 100% { transform: rotate(0deg); }
  15%  { transform: rotate(-14deg); }
  30%  { transform: rotate(12deg); }
  45%  { transform: rotate(-8deg); }
  60%  { transform: rotate(5deg); }
  75%  { transform: rotate(-2deg); }
}
@keyframes hdrArcPulse {
  0%, 100% { opacity: .12; }
  50%       { opacity: .85; }
}
.header-phone-text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.header-phone-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: .13em;
  color: var(--slate);
  font-weight: 700;
}
.hdr-avail {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #22C55E;
  flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(34,197,94,.5);
  animation: availPulse 2s ease-in-out infinite;
}
@keyframes availPulse {
  0%   { box-shadow: 0 0 0 0 rgba(34,197,94,.5); }
  60%  { box-shadow: 0 0 0 5px rgba(34,197,94,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}
.header-phone-num {
  font-size: 1.08rem;
  font-weight: 800;
  letter-spacing: -0.6px;
  text-decoration: none;
  line-height: 1;
  background: linear-gradient(120deg, var(--navy) 40%, var(--brand-red) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  transition: filter .2s ease;
}
.header-phone-num:hover { filter: brightness(1.15); }

/* Shimmer CTA button */
.header-quote-btn {
  position: relative;
  overflow: hidden;
}
.header-quote-btn::before {
  content: '';
  position: absolute;
  top: 0; left: -80%;
  width: 50%; height: 100%;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.28) 50%, transparent 100%);
  animation: hdrBtnShimmer 3.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes hdrBtnShimmer {
  0%        { left: -80%; }
  35%, 100% { left: 140%; }
}

/* Mobile toggle */
.mobile-toggle { display: none; padding: 10px; border-radius: 8px; background: none; border: none; cursor: pointer; }
.mobile-toggle:hover { background: var(--bg-alt); }
.mobile-toggle svg { width: 26px; height: 26px; color: var(--navy); display: block; }

/* ── Mobile nav drawer ── */
.mobile-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 998;
  background: rgba(10,31,68,.55);
  backdrop-filter: blur(2px);
  opacity: 0; transition: opacity 280ms ease;
}
.mobile-overlay.open { display: block; opacity: 1; }

.mobile-nav {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 999;
  width: min(360px, 90vw);
  background: #fff;
  box-shadow: -8px 0 40px rgba(10,31,68,.18);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform 300ms cubic-bezier(.4,0,.2,1);
  overflow-y: auto;
}
.mobile-nav.open { transform: translateX(0); }

.mobile-nav-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1.5px solid rgba(10,31,68,.07);
  flex-shrink: 0;
}

.mobile-close {
  background: none; border: none; cursor: pointer;
  padding: 8px; border-radius: 8px;
  color: var(--navy); display: flex;
}
.mobile-close:hover { background: var(--bg-alt); }
.mobile-close svg { width: 22px; height: 22px; display: block; }

.mobile-nav-list { list-style: none; padding: 12px 0; margin: 0; flex: 1; }

.mobile-nav-item { border-bottom: 1px solid rgba(10,31,68,.06); }
.mobile-nav-item:last-child { border-bottom: none; }

.mobile-nav-item > a {
  display: block; padding: 14px 20px;
  font-size: .97rem; font-weight: 600; color: var(--navy);
  text-decoration: none;
  transition: background 160ms, color 160ms;
}
.mobile-nav-item > a:hover { background: var(--brand-red-soft); color: var(--brand-red); }

.mobile-nav-toggle {
  width: 100%; text-align: left;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px;
  background: none; border: none; cursor: pointer;
  font-size: .97rem; font-weight: 600; color: var(--navy);
  font-family: inherit;
  transition: background 160ms, color 160ms;
}
.mobile-nav-toggle:hover { background: var(--brand-red-soft); color: var(--brand-red); }
.mobile-nav-toggle.active { color: var(--brand-red); }
.mobile-nav-toggle .chev { width: 14px; height: 14px; transition: transform 240ms; flex-shrink: 0; }
.mobile-nav-toggle.active .chev { transform: rotate(180deg); }

.mobile-sub {
  display: none;
  background: #f8faff;
  border-top: 1px solid rgba(10,31,68,.06);
  padding: 8px 0;
}
.mobile-sub a {
  display: block; padding: 9px 28px;
  font-size: .875rem; color: var(--slate);
  text-decoration: none;
  transition: background 160ms, color 160ms;
}
.mobile-sub a:hover { background: var(--brand-red-soft); color: var(--brand-red); }
.mobile-sub a strong { color: var(--navy); font-weight: 700; }

.mobile-sub-group {
  padding: 10px 20px 4px;
  font-size: .72rem; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: var(--brand-red);
}

.mobile-cta {
  padding: 20px; display: flex; flex-direction: column; gap: 10px;
  border-top: 1.5px solid rgba(10,31,68,.07);
  flex-shrink: 0;
}
.mobile-cta .btn { width: 100%; justify-content: center; text-align: center; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background: #0A1F44;
  color: #fff;
  overflow: hidden;
  padding: 52px 0 44px;
  min-height: calc(100vh - 132px);
  min-height: calc(100svh - 132px);
  display: flex;
  align-items: center;
}
/* Video background */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  pointer-events: none;
}
/* Background image layer (fallback when video can't load) */
.hero-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('hero-bg.png') center / cover no-repeat;
  z-index: 0;
}
/* Dark gradient overlay for text legibility */
.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(95deg,
      rgba(10,31,68,.92) 0%,
      rgba(10,31,68,.82) 35%,
      rgba(10,31,68,.55) 65%,
      rgba(10,31,68,.35) 100%),
    linear-gradient(180deg, rgba(10,31,68,.2) 0%, rgba(10,31,68,.55) 100%);
  z-index: 1;
}
.hero-inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
  width: 100%;
}
.hero-text {
  max-width: 720px;
  flex: 1 1 720px;
  min-width: 0;
}

/* ----- Right-side floating spec cards ----- */
.hero-stats-side {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 320px;
  flex-shrink: 0;
}
.hero-stat-float {
  background: rgba(10,20,50,.55);
  border: 1px solid rgba(255,255,255,.12);
  color: #fff !important;
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  box-shadow:
    0 16px 40px rgba(0,0,0,.4),
    inset 0 1px 0 rgba(255,255,255,.1),
    inset 0 -1px 0 rgba(0,0,0,.2);
  padding: 20px 24px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
  overflow: hidden;
  transition: transform 320ms cubic-bezier(.2,.8,.2,1), box-shadow 320ms, border-color 320ms;
  opacity: 0;
  transform: translateX(40px);
  animation: heroStatSlideIn .8s cubic-bezier(.2,.8,.2,1) forwards;
}
.hero-stat-float:nth-child(1) { animation-delay: .2s; }
.hero-stat-float:nth-child(2) { animation-delay: .38s; margin-left: 28px; }
.hero-stat-float:nth-child(3) { animation-delay: .56s; }
@keyframes heroStatSlideIn {
  to { opacity: 1; transform: translateX(0); }
}
/* Amber top hairline */
.hero-stat-float::before {
  content: '';
  position: absolute;
  top: 0; left: 15%; right: 15%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(245,158,11,.6), transparent);
}
/* Shimmer sweep on load */
.hero-stat-float::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);
  animation: statShimmer 3.5s ease-in-out infinite;
}
.hero-stat-float:nth-child(2)::after { animation-delay: .8s; }
.hero-stat-float:nth-child(3)::after { animation-delay: 1.6s; }
@keyframes statShimmer {
  0%,60%,100% { left: -100%; }
  30%          { left: 120%; }
}
.hero-stat-float:hover {
  transform: translateY(-4px) translateX(0);
  border-color: rgba(255,255,255,.22);
  box-shadow:
    0 24px 50px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.15),
    0 0 0 1px rgba(245,158,11,.15);
}
/* Icon tile — mirrors the mega-menu .svc-icon pattern */
.hero-stat-float .hero-stat-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--brand-red), var(--brand-red-dark));
  color: #fff;
  border-radius: 11px;
  flex-shrink: 0;
  box-shadow: 0 8px 18px rgba(200,16,46,.45), inset 0 1px 0 rgba(255,255,255,.15);
  position: relative;
  overflow: hidden;
  transition: transform 280ms cubic-bezier(.2,.8,.2,1);
}
/* Inner glossy highlight */
.hero-stat-float .hero-stat-icon::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.35), transparent 55%);
  pointer-events: none;
}
.hero-stat-float:hover .hero-stat-icon { transform: scale(1.08) rotate(-4deg); }
.hero-stat-float .hero-stat-icon svg { width: 26px; height: 26px; position: relative; z-index: 1; overflow: visible; }

.hero-stat-float .hero-stat-value {
  font-size: 1.15rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.hero-stat-float .hero-stat-label {
  font-size: 0.78rem;
  color: rgba(255,255,255,.78);
  font-weight: 500;
  margin-top: 2px;
}

/* ---- HERO STAT ICON ANIMATIONS (always-on subtle motion) ---- */

/* 1. Lightning bolt — flickers continuously */
.hero-stat-float .icon-bolt {
  animation: heroBolt 1.8s ease-in-out infinite;
  transform-origin: center; transform-box: fill-box;
}
@keyframes heroBolt {
  0%, 100% { filter: drop-shadow(0 0 0 transparent); transform: scale(1); }
  45% { filter: drop-shadow(0 0 6px rgba(245,158,11,.7)); transform: scale(1.05); }
  55% { filter: drop-shadow(0 0 0 transparent); transform: scale(.95); }
}

/* 2. Pallet stack — top crate floats */
.hero-stat-float .icon-stack .top {
  animation: heroFloat 2.4s ease-in-out infinite;
  transform-origin: center; transform-box: fill-box;
}
@keyframes heroFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

/* 3. Map / network — pin pulses, dots ripple */
.hero-stat-float .icon-map .pin {
  animation: heroPin 2s ease-in-out infinite;
  transform-origin: center bottom; transform-box: fill-box;
}
.hero-stat-float .icon-map .ripple {
  animation: heroRipple 2s ease-out infinite;
  transform-origin: center; transform-box: fill-box;
}
.hero-stat-float .icon-map .ripple-2 { animation-delay: .7s; }
@keyframes heroPin {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-1.5px) scale(1.06); }
}
@keyframes heroRipple {
  0%   { transform: scale(.5); opacity: .8; }
  100% { transform: scale(1.6); opacity: 0; }
}
/* Hero eyebrow pill — premium */
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  position: relative;
  overflow: hidden;
  background: var(--brand-red);
  border: none;
  color: #fff;
  padding: 11px 24px 11px 16px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 20px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.2) inset,
    0 6px 24px rgba(200,16,46,.5);
  user-select: none;
}
/* Top-edge gloss */
.hero-eyebrow::before {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  pointer-events: none;
}
/* Shimmer sweep */
.hero-eyebrow::after {
  content: '';
  position: absolute;
  top: 0; left: -80%;
  width: 45%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.13), transparent);
  animation: pill-shimmer 4.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes pill-shimmer {
  0%, 60%, 100% { left: -80%; opacity: 0; }
  15%            { opacity: 1; }
  50%            { left: 130%; opacity: 0; }
}

/* Live dot */
.hero-eyebrow-dot {
  position: relative;
  width: 8px; height: 8px;
  flex-shrink: 0;
}
.hero-eyebrow-dot .dot-core {
  display: block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px rgba(255,255,255,.9), 0 0 2px rgba(255,255,255,.6);
  position: relative;
  z-index: 1;
  animation: dot-breathe 2.2s ease-in-out infinite;
}
.hero-eyebrow-dot::before,
.hero-eyebrow-dot::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,.45);
  animation: dot-ripple 2.5s ease-out infinite;
}
.hero-eyebrow-dot::after { animation-delay: 1s; }

@keyframes dot-breathe {
  0%,100% { box-shadow: 0 0 6px rgba(255,255,255,.7); transform: scale(1); }
  50%      { box-shadow: 0 0 14px rgba(255,255,255,1), 0 0 4px rgba(255,255,255,.7); transform: scale(1.15); }
}
@keyframes dot-ripple {
  0%   { transform: translate(-50%,-50%) scale(1); opacity: .6; }
  100% { transform: translate(-50%,-50%) scale(4.5); opacity: 0; }
}
.hero h1 {
  font-size: clamp(1.75rem, 3.6vw, 2.9rem);
  line-height: 1.1;
  color: #fff;
  margin-bottom: 14px;
  letter-spacing: -0.025em;
}
.hero h1 .highlight {
  color: transparent;
  background: linear-gradient(135deg, #FCA5A5, #C8102E);
  -webkit-background-clip: text;
  background-clip: text;
}
.hero-sub {
  font-size: 1.05rem;
  color: rgba(255,255,255,.85);
  margin-bottom: 18px;
  max-width: 560px;
}
.hero-bullets { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; }
.hero-bullets li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: rgba(255,255,255,.92);
  font-size: 0.98rem;
}
.check-icon {
  flex-shrink: 0;
  width: 22px; height: 22px;
  background: var(--brand-red);
  color: #fff;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 800;
  margin-top: 2px;
}
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.hero-tagline { font-size: 0.95rem; color: rgba(255,255,255,.7); }


/* ---------- Trust Strip — premium red bar ---------- */
.trust-strip {
  background: linear-gradient(110deg, #B00C26 0%, #C8102E 45%, #A10C24 100%);
  position: relative;
  overflow: hidden;
}
/* Subtle diagonal light sweep */
.trust-strip::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    rgba(255,255,255,.06) 0%,
    transparent 40%,
    rgba(255,255,255,.04) 70%,
    transparent 100%);
  pointer-events: none;
}
/* Amber top-centre accent line */
.trust-strip::after {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 320px; height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(245,158,11,.75) 30%, rgba(245,158,11,.75) 70%, transparent);
  pointer-events: none;
}

.trust-grid {
  display: flex;
  align-items: stretch;
  position: relative;
  z-index: 1;
  max-width: var(--container);
  margin: 0 auto;
}

/* Each pillar */
.trust-item {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 30px 36px;
  position: relative;
  transition: background 260ms ease;
  cursor: default;
}
.trust-item:hover {
  background: rgba(255,255,255,.055);
}

/* Vertical dividers */
.trust-sep {
  width: 1px;
  align-self: stretch;
  flex-shrink: 0;
  background: linear-gradient(180deg,
    transparent 5%,
    rgba(255,255,255,.18) 30%,
    rgba(255,255,255,.18) 70%,
    transparent 95%);
  margin: 14px 0;
}

/* Icon container — glass tile matching mega-menu language */
.trust-icon-wrap {
  flex-shrink: 0;
  width: 58px;
  height: 58px;
  background: rgba(255,255,255,.13);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  position: relative;
  overflow: hidden;
  transition: all 260ms cubic-bezier(.2,.8,.2,1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
/* Inner gloss highlight */
.trust-icon-wrap::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,.14), transparent);
  border-radius: 14px 14px 0 0;
  pointer-events: none;
}
.trust-item:hover .trust-icon-wrap {
  background: rgba(255,255,255,.22);
  border-color: rgba(255,255,255,.42);
  transform: scale(1.07) translateY(-2px);
  box-shadow: 0 10px 28px -6px rgba(0,0,0,.35),
              0 0 0 1px rgba(255,255,255,.1) inset;
}
.trust-icon-wrap svg {
  width: 36px;
  height: 36px;
  overflow: visible;
  position: relative;
  z-index: 1;
}

/* Text */
.trust-content { flex: 1; min-width: 0; }
.trust-value {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.015em;
  margin-bottom: 4px;
  line-height: 1.2;
  white-space: nowrap;
}
.trust-label {
  font-size: 0.78rem;
  color: rgba(255,255,255,.6);
  font-weight: 400;
  line-height: 1.3;
  white-space: nowrap;
}

/* ---- Trust icon animations ---- */

/* Delivery — wheels spin, motion lines pulse, bolt flashes */
@keyframes t-wheel-spin  { to { transform: rotate(360deg); } }
@keyframes t-motion-pulse {
  0%,100% { opacity: .35; transform: translateX(0); }
  50%      { opacity: .75; transform: translateX(-4px); }
}
@keyframes t-bolt-flash  {
  0%,100% { opacity: .7; }
  50%      { opacity: 1; filter: brightness(1.4); }
}
.icon-trust-delivery .t-wheel { transform-box: fill-box; transform-origin: center; }
.trust-item .icon-trust-delivery .t-w1 { animation: t-wheel-spin .9s linear infinite; }
.trust-item .icon-trust-delivery .t-w2 { animation: t-wheel-spin .9s linear infinite; }
.trust-item .icon-trust-delivery .t-m1 { animation: t-motion-pulse .8s ease-in-out infinite; }
.trust-item .icon-trust-delivery .t-m2 { animation: t-motion-pulse .8s ease-in-out infinite 120ms; }
.trust-item .icon-trust-delivery .t-m3 { animation: t-motion-pulse .8s ease-in-out infinite 240ms; }
.trust-item .icon-trust-delivery .t-bolt { animation: t-bolt-flash 1.1s ease-in-out infinite; }

/* Location — ripples expand, junction dots pulse */
@keyframes tl-ripple { 0% { r:8; opacity:.35; } 100% { r:16; opacity:0; } }
@keyframes tl-ripple2 { 0% { r:11; opacity:.2; } 100% { r:20; opacity:0; } }
@keyframes tl-dot { 0%,100% { r:1.4; } 50% { r:2.2; } }
.trust-item .icon-trust-location .tl-ripple  { animation: tl-ripple  1.8s ease-out infinite; }
.trust-item .icon-trust-location .tl-ripple2 { animation: tl-ripple2 1.8s ease-out infinite 0.6s; }
.trust-item .icon-trust-location .tl-d1 { animation: tl-dot 1.2s ease-in-out infinite; }
.trust-item .icon-trust-location .tl-d2 { animation: tl-dot 1.2s ease-in-out infinite 0.4s; }
.trust-item .icon-trust-location .tl-d3 { animation: tl-dot 1.2s ease-in-out infinite 0.8s; }

/* Secure — shackle bounces, sparks flash */
@keyframes ts-shackle { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-2.5px); } }
@keyframes ts-spark   { 0%,100% { opacity:0; transform: scale(0); } 50% { opacity:1; transform: scale(1.8); } }
.icon-trust-secure .ts-shackle { transform-box: fill-box; transform-origin: bottom center; }
.icon-trust-secure .ts-spark   { transform-box: fill-box; transform-origin: center; }
.trust-item .icon-trust-secure .ts-shackle { animation: ts-shackle 1s ease-in-out infinite; }
.trust-item .icon-trust-secure .ts-s1 { animation: ts-spark 1.3s ease-in-out infinite; }
.trust-item .icon-trust-secure .ts-s2 { animation: ts-spark 1.3s ease-in-out infinite 0.45s; }
.trust-item .icon-trust-secure .ts-s3 { animation: ts-spark 1.3s ease-in-out infinite 0.85s; }

/* Handshake — shake, star spins, sparks pop */
@keyframes th-shake { 0%,100% { transform: translateX(0); } 33% { transform: translateX(2px); } 66% { transform: translateX(-2px); } }
@keyframes th-star  { to { transform: rotate(360deg); } }
@keyframes th-spark { 0%,100% { opacity:0; transform: scale(0); } 50% { opacity:1; transform: scale(2.2); } }
.icon-trust-handshake .th-shake { transform-box: fill-box; transform-origin: center; }
.icon-trust-handshake .th-star  { transform-box: fill-box; transform-origin: center; }
.icon-trust-handshake .th-spark { transform-box: fill-box; transform-origin: center; }
.trust-item .icon-trust-handshake .th-shake { animation: th-shake .7s ease-in-out infinite; }
.trust-item .icon-trust-handshake .th-star  { animation: th-star  3s linear infinite; }
.trust-item .icon-trust-handshake .th-s1 { animation: th-spark 1.5s ease-in-out infinite; }
.trust-item .icon-trust-handshake .th-s2 { animation: th-spark 1.5s ease-in-out infinite 0.5s; }
.trust-item .icon-trust-handshake .th-s3 { animation: th-spark 1.5s ease-in-out infinite 1s; }

/* ---------- Solutions Section ---------- */
.solutions-section {
  background: var(--bg-alt);
  position: relative;
  overflow: hidden;
}
.solutions-section::before {
  content: '';
  position: absolute;
  top: -140px; right: -140px;
  width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(200,16,46,.07) 0%, transparent 68%);
  pointer-events: none;
}
.solutions-section::after {
  content: '';
  position: absolute;
  bottom: -80px; left: -80px;
  width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(10,31,68,.05) 0%, transparent 70%);
  pointer-events: none;
}

.sol-highlight {
  background: linear-gradient(120deg, var(--brand-red) 30%, #F54766 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.solutions-two-col { gap: 64px; align-items: center; }

.solutions-text-side { display: flex; flex-direction: column; align-items: flex-start; }
.solutions-text-side .eyebrow { margin-bottom: 12px; }
.solutions-text-side .section-title { margin-bottom: 18px; }

.sol-lead {
  font-size: 1.05rem;
  color: var(--slate);
  line-height: 1.7;
  margin-bottom: 32px;
}

.sol-approach-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--slate);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 16px;
}

.sol-feat-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 28px;
}
.sol-feat-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 1rem;
  color: var(--ink);
  font-weight: 500;
  line-height: 1.5;
}
.sol-check {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  background: linear-gradient(135deg, var(--brand-red), var(--brand-red-dark));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  margin-top: 2px;
  box-shadow: 0 4px 10px -2px rgba(200,16,46,.38);
}
.sol-check svg { width: 12px; height: 12px; display: block; }

.sol-body-text {
  font-size: 1rem;
  color: var(--slate);
  line-height: 1.75;
  margin-bottom: 32px;
}

.solutions-img-wrap {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: visible;
}
.solutions-img-wrap img {
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4/3;
  display: block;
}

.sol-img-badge {
  position: absolute;
  bottom: 28px;
  left: -28px;
  background: #fff;
  border-radius: 16px;
  padding: 18px 22px;
  box-shadow: 0 16px 40px -8px rgba(15,23,42,.2), 0 0 0 1px rgba(15,23,42,.06);
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 168px;
  z-index: 2;
}
.sol-badge-num {
  font-size: 1.85rem;
  font-weight: 800;
  color: var(--brand-red);
  line-height: 1;
  letter-spacing: -0.03em;
}
.sol-badge-label {
  font-size: 0.78rem;
  color: var(--slate);
  font-weight: 500;
  line-height: 1.35;
}

/* ---------- Service Icon Cards (mega-menu style) ---------- */
.icon-cards {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-top: 56px;
}
.icon-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 30px 16px 26px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  transition: all 280ms cubic-bezier(.2,.8,.2,1);
  color: var(--ink);
  position: relative;
  overflow: hidden;
}
.icon-card::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(200,16,46,.05), transparent);
  transition: left 600ms ease;
}
.icon-card:hover {
  border-color: var(--brand-red);
  box-shadow: 0 10px 28px -8px rgba(200,16,46,.22);
  transform: translateY(-5px);
  color: var(--ink);
}
.icon-card:hover::after { left: 100%; }

.icon-card-icon {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, var(--brand-red-soft) 0%, #FFF5F6 100%);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-red);
  margin-bottom: 16px;
  transition: all 280ms cubic-bezier(.2,.8,.2,1);
  position: relative;
  overflow: hidden;
}
.icon-card-icon::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.4), transparent 60%);
  opacity: 0;
  transition: opacity 280ms;
  pointer-events: none;
}
.icon-card:hover .icon-card-icon::before { opacity: 1; }
.icon-card-icon svg { width: 38px; height: 38px; overflow: visible; position: relative; z-index: 1; }
.icon-card:hover .icon-card-icon {
  background: linear-gradient(135deg, var(--brand-red), var(--brand-red-dark));
  color: #fff;
  box-shadow: 0 8px 22px -4px rgba(200,16,46,.5);
  transform: scale(1.08);
}
.icon-card-title {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--navy);
  line-height: 1.25;
  margin-bottom: 4px;
  transition: color 280ms;
}
.icon-card:hover .icon-card-title { color: var(--brand-red); }
.icon-card-sub { font-size: 0.78rem; color: var(--slate); line-height: 1.35; }

/* ---- ic-logistics: wheels spin + motion lines dash ---- */
.icon-card:hover .ic-logistics .ic-wh1,
.icon-card:hover .ic-logistics .ic-wh2 {
  animation: icWheelSpin .7s linear infinite;
  transform-origin: center;
  transform-box: fill-box;
}
.icon-card .ic-logistics .ic-wh2 { animation-delay: .08s; }
.icon-card .ic-logistics .ic-m { animation: icMotion 650ms linear infinite; }
.icon-card .ic-logistics .ic-m1 { animation-delay: 0ms; }
.icon-card .ic-logistics .ic-m2 { animation-delay: 160ms; }
.icon-card .ic-logistics .ic-m3 { animation-delay: 320ms; }
@keyframes icWheelSpin { to { transform: rotate(360deg); } }
@keyframes icMotion {
  0%   { opacity: .5; transform: translateX(0); }
  55%  { opacity: 0; transform: translateX(-7px); }
  56%  { opacity: 0; transform: translateX(5px); }
  100% { opacity: .5; transform: translateX(0); }
}

/* ---- ic-consulting: rays pulse outward + filament brightens ---- */
.icon-card:hover .ic-consulting .ic-ray {
  animation: icRayPulse 1.5s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
.icon-card .ic-consulting .ic-r1 { animation-delay: 0ms; }
.icon-card .ic-consulting .ic-r2 { animation-delay: 150ms; }
.icon-card .ic-consulting .ic-r3 { animation-delay: 300ms; }
.icon-card .ic-consulting .ic-r4 { animation-delay: 450ms; }
.icon-card .ic-consulting .ic-r5 { animation-delay: 600ms; }
.icon-card .ic-consulting .ic-filament { animation: icFilament 1.5s ease-in-out infinite; }
@keyframes icRayPulse {
  0%, 100% { opacity: .45; transform: scale(1) translate(0,0); }
  50%       { opacity: 1;   transform: scale(1.35) translate(0,0); }
}
@keyframes icFilament {
  0%, 100% { opacity: .55; }
  50%       { opacity: 1; stroke-width: 2.2; }
}

/* ---- ic-tracking: pin bounces + arcs ripple + scan dot pulses ---- */
.icon-card:hover .ic-tracking .ic-pin {
  animation: icPinBounce 1.1s cubic-bezier(.4,1.6,.5,1) infinite;
  transform-origin: center bottom;
  transform-box: fill-box;
}
.icon-card .ic-tracking .ic-arc { animation: icArcFade 1.4s ease-in-out infinite; }
.icon-card .ic-tracking .ic-a1 { animation-delay: 0ms; }
.icon-card .ic-tracking .ic-a2 { animation-delay: 320ms; }
.icon-card .ic-tracking .ic-scan { animation: icScanPulse 1.4s ease-in-out infinite; }
@keyframes icPinBounce {
  0%, 100% { transform: translateY(0); }
  40%       { transform: translateY(-5px); }
}
@keyframes icArcFade {
  0%, 100% { opacity: .3; }
  50%       { opacity: .95; }
}
@keyframes icScanPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .5; transform: scale(1.4); }
  transform-origin: center; transform-box: fill-box;
}

/* ---- ic-distribution: endpoints pulse outward in cascade ---- */
.icon-card:hover .ic-distribution .ic-ep {
  animation: icEpPulse 1.8s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
.icon-card .ic-distribution .ic-ep1 { animation-delay: 0ms; }
.icon-card .ic-distribution .ic-ep2 { animation-delay: 225ms; }
.icon-card .ic-distribution .ic-ep3 { animation-delay: 450ms; }
.icon-card .ic-distribution .ic-ep4 { animation-delay: 675ms; }
.icon-card .ic-distribution .ic-ep5 { animation-delay: 900ms; }
.icon-card .ic-distribution .ic-ep6 { animation-delay: 1125ms; }
.icon-card .ic-distribution .ic-ep7 { animation-delay: 1350ms; }
.icon-card .ic-distribution .ic-ep8 { animation-delay: 1575ms; }
.icon-card .ic-distribution .ic-sp { animation: icSpokePulse 1.8s ease-in-out infinite; }
@keyframes icEpPulse {
  0%, 100% { transform: scale(1);   opacity: .5; }
  40%       { transform: scale(1.7); opacity: 1; }
  70%       { transform: scale(1.2); opacity: .8; }
}
@keyframes icSpokePulse {
  0%, 100% { opacity: .35; }
  50%       { opacity: 1; }
}

/* ---- ic-warehousing: pallets float up + shelves glow ---- */
.icon-card:hover .ic-warehousing .ic-pallet {
  animation: icPalletFloat 1.5s cubic-bezier(.4,1.6,.5,1) infinite;
  transform-origin: center;
  transform-box: fill-box;
}
.icon-card .ic-warehousing .ic-p1 { animation-delay: 0ms; }
.icon-card .ic-warehousing .ic-p2 { animation-delay: 220ms; }
.icon-card .ic-warehousing .ic-shelf { animation: icShelfGlow 1.5s ease-in-out infinite; }
.icon-card .ic-warehousing .ic-s1 { animation-delay: 0ms; }
.icon-card .ic-warehousing .ic-s2 { animation-delay: 220ms; }
@keyframes icPalletFloat {
  0%, 100% { transform: translateY(0);   opacity: .3; }
  40%       { transform: translateY(-4px); opacity: .9; }
}
@keyframes icShelfGlow {
  0%, 100% { opacity: .45; }
  50%       { opacity: 1; }
}

/* ---------- Coverage Section ---------- */
.coverage-section {
  background: #fff;
  position: relative;
  overflow: hidden;
}
.coverage-section::before {
  content: '';
  position: absolute;
  top: -100px; left: -100px;
  width: 460px; height: 460px;
  background: radial-gradient(circle, rgba(200,16,46,.06) 0%, transparent 68%);
  pointer-events: none;
}

.coverage-two-col { gap: 64px; align-items: center; }

.coverage-img-wrap {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: visible;
  flex-shrink: 0;
}
.coverage-img-wrap img {
  display: block;
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
}

.cov-img-badge {
  position: absolute;
  bottom: 28px;
  right: -24px;
  background: #fff;
  border-radius: 16px;
  padding: 16px 20px;
  box-shadow: 0 16px 40px -8px rgba(15,23,42,.2), 0 0 0 1px rgba(15,23,42,.06);
  display: flex;
  align-items: center;
  gap: 14px;
  z-index: 2;
  min-width: 172px;
}
.cov-badge-icon {
  width: 40px; height: 40px;
  background: linear-gradient(135deg, var(--brand-red-soft), #FFF5F6);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-red);
  flex-shrink: 0;
}
.cov-img-badge > div { display: flex; flex-direction: column; gap: 2px; }
.cov-badge-num {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--brand-red);
  line-height: 1;
  letter-spacing: -0.03em;
}
.cov-badge-label {
  font-size: 0.75rem;
  color: var(--slate);
  font-weight: 500;
  line-height: 1.3;
}

.coverage-text-side {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.coverage-text-side .eyebrow { margin-bottom: 12px; }
.coverage-text-side .section-title { margin-bottom: 18px; }

.cov-highlight {
  background: linear-gradient(120deg, var(--brand-red) 30%, #F54766 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.cov-lead {
  font-size: 1.05rem;
  color: var(--slate);
  line-height: 1.7;
  margin-bottom: 28px;
}

.cov-locations-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--slate);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 14px;
}

.cov-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
}
.cov-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--navy);
  transition: all 220ms cubic-bezier(.2,.8,.2,1);
  box-shadow: 0 1px 3px rgba(15,23,42,.06);
}
.cov-pill svg { color: var(--brand-red); flex-shrink: 0; transition: color 220ms; }
.cov-pill:hover {
  background: var(--brand-red);
  border-color: var(--brand-red);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px -4px rgba(200,16,46,.35);
}
.cov-pill:hover svg { color: #fff; }

.cov-ctas {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.cov-ctas .btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* ---------- Warehouse / Core Services Section ---------- */
.ws-section {
  background: var(--bg-alt);
  position: relative;
  overflow: hidden;
}
.ws-section::before {
  content: '';
  position: absolute;
  bottom: -120px; right: -120px;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(200,16,46,.06) 0%, transparent 70%);
  pointer-events: none;
}

.ws-two-col { gap: 72px; align-items: center; }

.ws-text-side {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.ws-text-side .eyebrow { margin-bottom: 14px; }
.ws-text-side .section-title { margin-bottom: 18px; }

.ws-highlight {
  background: linear-gradient(120deg, var(--brand-red) 30%, #F54766 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.ws-lead {
  font-size: 1.05rem;
  color: var(--slate);
  line-height: 1.75;
  margin-bottom: 32px;
}

/* 2-column grid of premium service cards */
.ws-services {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  width: 100%;
  margin-bottom: 36px;
}

.ws-svc {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--navy);
  font-weight: 600;
  font-size: 0.88rem;
  line-height: 1.35;
  box-shadow: var(--shadow-sm);
  transition: all 260ms cubic-bezier(.2,.8,.2,1);
  position: relative;
  overflow: hidden;
}
.ws-svc::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(200,16,46,.04), transparent);
  transition: left 500ms ease;
}
.ws-svc:hover {
  border-color: var(--brand-red);
  box-shadow: 0 8px 24px -6px rgba(200,16,46,.18);
  transform: translateY(-3px);
  color: var(--navy);
}
.ws-svc:hover::after { left: 100%; }

.ws-svc-icon {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, var(--brand-red-soft) 0%, #FFF5F6 100%);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-red);
  flex-shrink: 0;
  transition: all 260ms cubic-bezier(.2,.8,.2,1);
}
.ws-svc:hover .ws-svc-icon {
  background: linear-gradient(135deg, var(--brand-red), var(--brand-red-dark));
  color: #fff;
  box-shadow: 0 6px 16px -4px rgba(200,16,46,.45);
}

.ws-svc-name { flex: 1; }

.ws-svc-arrow {
  flex-shrink: 0;
  color: var(--brand-red);
  opacity: 0;
  transition: all 260ms;
}
.ws-svc:hover .ws-svc-arrow { opacity: 1; transform: translateX(3px); }

.ws-ctas {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.ws-img-wrap {
  position: relative;
  flex-shrink: 0;
}
.ws-img-wrap img {
  display: block;
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
}

.ws-img-badge {
  position: absolute;
  top: 28px;
  right: -24px;
  background: #fff;
  border-radius: 16px;
  padding: 16px 22px;
  box-shadow: 0 16px 40px -8px rgba(15,23,42,.18), 0 0 0 1px rgba(15,23,42,.06);
  display: flex;
  flex-direction: column;
  gap: 3px;
  z-index: 2;
  min-width: 158px;
}
.ws-badge-num {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--brand-red);
  line-height: 1;
  letter-spacing: -0.03em;
}
.ws-badge-label {
  font-size: 0.76rem;
  color: var(--slate);
  font-weight: 500;
  line-height: 1.35;
}

/* ---------- Transport & Distribution Section ---------- */
.td-section {
  background: #fff;
  position: relative;
  overflow: hidden;
}
.td-section::before {
  content: '';
  position: absolute;
  top: -120px; left: -120px;
  width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(200,16,46,.05) 0%, transparent 68%);
  pointer-events: none;
}

.td-two-col { gap: 72px; align-items: center; }

.td-img-wrap {
  position: relative;
  flex-shrink: 0;
}
.td-img-wrap img {
  display: block;
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
}

.td-img-badge {
  position: absolute;
  bottom: 28px;
  left: -24px;
  background: #fff;
  border-radius: 16px;
  padding: 16px 20px;
  box-shadow: 0 16px 40px -8px rgba(15,23,42,.18), 0 0 0 1px rgba(15,23,42,.06);
  display: flex;
  align-items: center;
  gap: 14px;
  z-index: 2;
  min-width: 190px;
}
.td-badge-icon {
  width: 40px; height: 40px;
  background: linear-gradient(135deg, var(--brand-red-soft), #FFF5F6);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-red);
  flex-shrink: 0;
}
.td-img-badge > div { display: flex; flex-direction: column; gap: 2px; }
.td-badge-num {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--brand-red);
  line-height: 1;
  letter-spacing: -0.02em;
}
.td-badge-label {
  font-size: 0.75rem;
  color: var(--slate);
  font-weight: 500;
  line-height: 1.3;
}

.td-text-side {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.td-text-side .eyebrow { margin-bottom: 12px; }
.td-text-side .section-title { margin-bottom: 18px; }

.td-highlight {
  background: linear-gradient(120deg, var(--brand-red) 30%, #F54766 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.td-lead {
  font-size: 1.05rem;
  color: var(--slate);
  line-height: 1.75;
  margin-bottom: 32px;
}

.td-services {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  width: 100%;
  margin-bottom: 36px;
}

/* ---- td icon animations ---- */

/* 1. Truck — wheels spin, motion lines dash */
.td-icon-truck .td-wh1,
.td-icon-truck .td-wh2 {
  transform-box: fill-box;
  transform-origin: center;
}
.ws-svc .td-icon-truck .td-wh1 { animation: icWheelSpin .7s linear infinite; }
.ws-svc .td-icon-truck .td-wh2 { animation: icWheelSpin .7s linear infinite .08s; }
.ws-svc .td-icon-truck .td-m   { animation: icMotion 650ms linear infinite; }
.ws-svc .td-icon-truck .td-m1  { animation-delay: 0ms; }
.ws-svc .td-icon-truck .td-m2  { animation-delay: 180ms; }

/* 2. Route — traveller bounces along arc, start/end pulse */
.td-icon-route .td-r-traveller {
  transform-box: fill-box;
  transform-origin: center;
}
.ws-svc .td-icon-route .td-r-traveller { animation: tdTraveller 1.4s ease-in-out infinite; }
.ws-svc .td-icon-route .td-r-start { animation: tdEndPulse 1.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.ws-svc .td-icon-route .td-r-end   { animation: tdEndPulse 1.4s ease-in-out infinite .7s; transform-box: fill-box; transform-origin: center; }
@keyframes tdTraveller {
  0%   { transform: translate(-7px,  3px) scale(1); opacity: .5; }
  50%  { transform: translate( 0px, -4px) scale(1.3); opacity: 1; }
  100% { transform: translate( 7px,  3px) scale(1); opacity: .5; }
}
@keyframes tdEndPulse {
  0%, 100% { transform: scale(1);   opacity: .5; }
  50%       { transform: scale(1.7); opacity: 1; }
}

/* 3. Triangle — nodes pulse outward in cascade */
.td-icon-triangle .td-tn {
  transform-box: fill-box;
  transform-origin: center;
}
.ws-svc .td-icon-triangle .td-tn1 { animation: tdNodePulse 1.5s ease-in-out infinite; }
.ws-svc .td-icon-triangle .td-tn2 { animation: tdNodePulse 1.5s ease-in-out infinite 500ms; }
.ws-svc .td-icon-triangle .td-tn3 { animation: tdNodePulse 1.5s ease-in-out infinite 1000ms; }
@keyframes tdNodePulse {
  0%, 100% { transform: scale(1);   opacity: .5; }
  40%       { transform: scale(1.9); opacity: 1; }
  70%       { transform: scale(1.3); opacity: .8; }
}

/* 4. Scalable chart — line draws, dots pop in cascade */
.td-chart {
  stroke-dasharray: 50;
  stroke-dashoffset: 50;
}
.td-icon-scale .td-cp {
  transform-box: fill-box;
  transform-origin: center;
}
.ws-svc .td-icon-scale .td-chart { animation: tdChartDraw 1.5s ease-out infinite; }
.ws-svc .td-icon-scale .td-cp1 { animation: tdCpPop 1.5s ease-out infinite 200ms; }
.ws-svc .td-icon-scale .td-cp2 { animation: tdCpPop 1.5s ease-out infinite 400ms; }
.ws-svc .td-icon-scale .td-cp3 { animation: tdCpPop 1.5s ease-out infinite 600ms; }
.ws-svc .td-icon-scale .td-cp4 { animation: tdCpPop 1.5s ease-out infinite 800ms; }
@keyframes tdChartDraw {
  0%   { stroke-dashoffset: 50; opacity: .3; }
  70%  { stroke-dashoffset: 0;  opacity: 1; }
  100% { stroke-dashoffset: 0;  opacity: 1; }
}
@keyframes tdCpPop {
  0%, 30%  { transform: scale(0);   opacity: 0; }
  60%       { transform: scale(1.5); opacity: 1; }
  100%      { transform: scale(1);   opacity: .7; }
}

/* ---- ws-svc icon animations ---- */

/* 1. Pallet Storage — layers cascade upward */
.ws-icon-pallets .ws-l1,
.ws-icon-pallets .ws-l2,
.ws-icon-pallets .ws-l3 { transform-box: fill-box; transform-origin: center bottom; }
.ws-svc .ws-icon-pallets .ws-l1 { animation: wsPalletFloat 1.2s cubic-bezier(.4,1.6,.5,1) infinite; }
.ws-svc .ws-icon-pallets .ws-l2 { animation: wsPalletFloat 1.2s cubic-bezier(.4,1.6,.5,1) infinite 150ms; }
.ws-svc .ws-icon-pallets .ws-l3 { animation: wsPalletFloat 1.2s cubic-bezier(.4,1.6,.5,1) infinite 300ms; }
@keyframes wsPalletFloat {
  0%, 100% { transform: translateY(0);    opacity: 1; }
  45%       { transform: translateY(-4px); opacity: .85; }
}

/* 2. Full Warehouse — windows glow alternating, door slides up */
.ws-svc .ws-icon-warehouse .ws-win1 { animation: wsWinPulse 1.4s ease-in-out infinite; }
.ws-svc .ws-icon-warehouse .ws-win2 { animation: wsWinPulse 1.4s ease-in-out infinite 700ms; }
.ws-svc .ws-icon-warehouse .ws-roof { animation: wsRoofLift 1.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center bottom; }
@keyframes wsWinPulse {
  0%, 100% { fill-opacity: .15; }
  50%       { fill-opacity: .7; }
}
@keyframes wsRoofLift {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-1.5px); }
}

/* 3. eCommerce Fulfilment — package bounces, check draws */
.ws-pkg-check {
  stroke-dasharray: 14;
  stroke-dashoffset: 14;
}
.ws-svc .ws-icon-fulfilment .ws-pkg { animation: wsPkgBounce 1.2s cubic-bezier(.4,1.6,.5,1) infinite; transform-box: fill-box; transform-origin: center bottom; }
.ws-svc .ws-icon-fulfilment .ws-pkg-check { animation: wsCheckDraw 1.2s ease-out infinite; }
@keyframes wsPkgBounce {
  0%, 100% { transform: translateY(0); }
  40%       { transform: translateY(-3px); }
}
@keyframes wsCheckDraw {
  0%   { stroke-dashoffset: 14; opacity: 0; }
  30%  { opacity: 1; }
  70%  { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 1; }
}

/* 4. Contract Logistics — lines slide in, tick draws */
.ws-doc-l1, .ws-doc-l2 { stroke-dasharray: 8; }
.ws-doc-tick {
  stroke-dasharray: 12;
  stroke-dashoffset: 12;
}
.ws-svc .ws-icon-contract .ws-doc-l1 { animation: wsLineSweep 1.4s ease-out infinite; }
.ws-svc .ws-icon-contract .ws-doc-l2 { animation: wsLineSweep 1.4s ease-out infinite 200ms; }
.ws-svc .ws-icon-contract .ws-doc-tick { animation: wsTickDraw 1.4s ease-out infinite 300ms; }
.ws-svc .ws-icon-contract .ws-doc-dot { animation: wsDotPop 1.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes wsLineSweep {
  0%   { stroke-dashoffset: 8; opacity: .3; }
  50%  { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 1; }
}
@keyframes wsTickDraw {
  0%   { stroke-dashoffset: 12; opacity: 0; }
  25%  { opacity: 1; }
  80%  { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 1; }
}
@keyframes wsDotPop {
  0%, 100% { transform: scale(1);   opacity: .5; }
  50%       { transform: scale(1.6); opacity: 1; }
}

/* 5. Overflow & Seasonal — calendar dots bounce in cascade */
.ws-icon-overflow .ws-cal-d1,
.ws-icon-overflow .ws-cal-d2,
.ws-icon-overflow .ws-cal-d3 { transform-box: fill-box; transform-origin: center; }
.ws-svc .ws-icon-overflow .ws-cal-d1 { animation: wsCalDot 1.2s cubic-bezier(.4,1.6,.5,1) infinite; }
.ws-svc .ws-icon-overflow .ws-cal-d2 { animation: wsCalDot 1.2s cubic-bezier(.4,1.6,.5,1) infinite 200ms; }
.ws-svc .ws-icon-overflow .ws-cal-d3 { animation: wsCalDot 1.2s cubic-bezier(.4,1.6,.5,1) infinite 400ms; }
@keyframes wsCalDot {
  0%, 100% { transform: scale(1);   opacity: 1; }
  45%       { transform: scale(1.7); opacity: .8; }
}

/* 6. Container Unloading — arrow drops in a loop */
.ws-icon-container .ws-ctr-arr,
.ws-icon-container .ws-ctr-head { transform-box: fill-box; transform-origin: center top; }
.ws-svc .ws-icon-container .ws-ctr-arr  { animation: wsCtrDrop 1.1s ease-in-out infinite; }
.ws-svc .ws-icon-container .ws-ctr-head { animation: wsCtrDrop 1.1s ease-in-out infinite; }
.ws-svc .ws-icon-container .ws-ctr-box  { animation: wsCtrPulse 1.1s ease-in-out infinite; }
@keyframes wsCtrDrop {
  0%   { transform: translateY(-3px); opacity: 0; }
  40%  { transform: translateY(0);    opacity: 1; }
  80%  { transform: translateY(2px);  opacity: 1; }
  100% { transform: translateY(3px);  opacity: 0; }
}
@keyframes wsCtrPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .6; }
}

/* ---------- Two-Col Section ---------- */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.two-col.reverse > :first-child { order: 2; }
.two-col-img {
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  aspect-ratio: 4/3;
}
.two-col-img img { width: 100%; height: 100%; object-fit: cover; }
.feat-list { display: flex; flex-direction: column; gap: 12px; margin: 24px 0 32px; }
.feat-list li { display: flex; gap: 10px; align-items: flex-start; color: var(--slate); }
.feat-list li::before {
  content: '✓';
  flex-shrink: 0;
  width: 22px; height: 22px;
  background: var(--brand-red-soft);
  color: var(--brand-red);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 800;
  margin-top: 2px;
}

/* ---------- Locations Pills ---------- */
.location-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px 0 32px;
}
.location-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--navy);
  transition: all var(--transition);
}
.location-pill::before { content: '📍'; font-size: 0.9rem; }
.location-pill:hover {
  background: var(--brand-red);
  color: #fff;
  border-color: var(--brand-red);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* ---------- Service Linked List ---------- */
.linked-services {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 24px 0 28px;
}
.linked-service {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-weight: 600;
  color: var(--navy);
  transition: all var(--transition);
}
.linked-service::before {
  content: '';
  width: 36px;
  height: 36px;
  background: var(--brand-red-soft);
  color: var(--brand-red);
  border-radius: 8px;
  flex-shrink: 0;
  background-image: var(--icon-bg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 60%;
}
.linked-service:hover {
  border-color: var(--brand-red);
  background: var(--brand-red-soft);
  transform: translateX(4px);
}
.linked-service::after {
  content: '→';
  margin-left: auto;
  color: var(--brand-red);
  font-size: 1.2rem;
  opacity: 0;
  transition: opacity var(--transition);
}
.linked-service:hover::after { opacity: 1; }

/* ---------- Case Studies ---------- */
.cs-section {
  background: #fff;
  position: relative;
  overflow: hidden;
}
.cs-section::before {
  content: '';
  position: absolute;
  top: -120px; right: -120px;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(200,16,46,.05) 0%, transparent 68%);
  pointer-events: none;
}

.cs-header { margin-bottom: 52px; }
.cs-header .section-lead { margin-bottom: 0; }

.cs-highlight {
  background: linear-gradient(120deg, var(--brand-red) 30%, #F54766 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.cs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}

/* Card shell */
.cs-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 20px;
  border: 1px solid var(--line);
  box-shadow: 0 2px 12px rgba(15,23,42,.06);
  transition: all 300ms cubic-bezier(.2,.8,.2,1);
  overflow: hidden;
  position: relative;
}
/* Thin red accent bar at top */
.cs-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand-red), #F54766);
  opacity: 0;
  transition: opacity 300ms;
}
.cs-card:hover { transform: translateY(-6px); box-shadow: 0 24px 56px -12px rgba(15,23,42,.15); border-color: rgba(200,16,46,.18); }
.cs-card:hover::before { opacity: 1; }

/* Card top: white, all text */
.cs-card-top {
  padding: 28px 28px 20px;
}

.cs-top-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}

.cs-icon-tile {
  width: 36px; height: 36px;
  background: linear-gradient(135deg, var(--brand-red-soft), #FFF5F6);
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-red);
  flex-shrink: 0;
  transition: all 280ms cubic-bezier(.2,.8,.2,1);
}
.cs-card:hover .cs-icon-tile {
  background: linear-gradient(135deg, var(--brand-red), var(--brand-red-dark));
  color: #fff;
  box-shadow: 0 6px 16px -4px rgba(200,16,46,.45);
}

.cs-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: var(--brand-red-soft);
  color: var(--brand-red);
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.cs-num {
  margin-left: auto;
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--line);
  line-height: 1;
  letter-spacing: -0.04em;
}

.cs-title {
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.45;
  margin-bottom: 18px;
}

.cs-meta-strip {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  background: var(--bg-alt);
  border-radius: 10px;
}
.cs-meta-pill { display: flex; align-items: baseline; gap: 8px; }
.cs-meta-k {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--slate-soft);
  flex-shrink: 0;
  min-width: 48px;
}
.cs-meta-v {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--navy);
}

/* Challenge / Solution tinted panels */
.cs-panels {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0 28px;
  margin-top: 4px;
}

.cs-panel {
  padding: 14px 16px;
  border-radius: 10px;
  margin-bottom: 8px;
}
.cs-panel p {
  font-size: 0.86rem;
  line-height: 1.65;
  color: var(--slate);
  margin: 0;
}

.cs-panel--challenge {
  background: #FFF5F5;
  border-left: 3px solid var(--brand-red);
}
.cs-panel--solution {
  background: #F0F4FF;
  border-left: 3px solid var(--navy);
}

.cs-panel-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 7px;
}
.cs-panel--challenge .cs-panel-label { color: var(--brand-red); }
.cs-panel--solution .cs-panel-label { color: var(--navy); }

/* Key Outcomes */
.cs-outcomes {
  padding: 18px 28px 28px;
  margin-top: auto;
  border-top: 1px solid var(--line-soft);
}
.cs-outcomes-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--slate-soft);
  margin-bottom: 12px;
}
.cs-results-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.cs-results-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.86rem;
  color: var(--ink);
  font-weight: 500;
  line-height: 1.45;
}
.cs-results-list .sol-check {
  width: 20px; height: 20px;
  flex-shrink: 0;
  margin-top: 1px;
}
.cs-results-list .sol-check svg { width: 10px; height: 10px; }

.cs-cta-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 56px;
  flex-wrap: wrap;
}
.cs-cta-row .btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* ---------- Duo Section (Fast Access + Pricing) ---------- */
.duo-section {
  background: var(--bg-alt);
  position: relative;
  overflow: hidden;
}
.duo-section::before {
  content: '';
  position: absolute;
  bottom: -100px; left: -100px;
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(200,16,46,.06) 0%, transparent 70%);
  pointer-events: none;
}

.duo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: stretch;
}

.duo-card {
  border-radius: 24px;
  padding: 44px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.duo-card-red {
  background: linear-gradient(145deg, var(--brand-red) 0%, #A80D27 55%, #7A0818 100%);
  color: #fff;
}
.duo-deco {
  position: absolute;
  top: -70px; right: -70px;
  width: 240px; height: 240px;
  border-radius: 50%;
  background: rgba(255,255,255,.07);
  pointer-events: none;
}
.duo-deco::after {
  content: '';
  position: absolute;
  top: 70px; left: 70px;
  width: 150px; height: 150px;
  border-radius: 50%;
  background: rgba(255,255,255,.05);
}

.duo-card-light {
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 4px 28px rgba(15,23,42,.07);
}

.duo-icon-tile {
  width: 52px; height: 52px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 24px;
  flex-shrink: 0;
}
.duo-card-red .duo-icon-tile {
  background: rgba(255,255,255,.15);
  color: #fff;
  border: 1px solid rgba(255,255,255,.22);
}
.duo-card-light .duo-icon-tile {
  background: linear-gradient(135deg, var(--brand-red-soft), #FFF5F6);
  color: var(--brand-red);
  border: 1px solid rgba(200,16,46,.1);
}

.duo-eyebrow {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: rgba(255,255,255,.65);
  margin-bottom: 10px;
}
.duo-eyebrow-light {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--brand-red);
  margin-bottom: 10px;
}

.duo-title {
  font-size: 1.8rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
  margin-bottom: 14px;
  letter-spacing: -0.02em;
}
.duo-title-dark {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--navy);
  line-height: 1.2;
  margin-bottom: 14px;
  letter-spacing: -0.02em;
}

.duo-lead {
  font-size: 0.93rem;
  color: rgba(255,255,255,.78);
  line-height: 1.65;
  margin-bottom: 20px;
}
.duo-lead-dark {
  font-size: 0.93rem;
  color: var(--slate);
  line-height: 1.65;
  margin-bottom: 20px;
}

.duo-stat-chip {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 16px;
  padding: 18px 22px;
  margin-bottom: 22px;
  backdrop-filter: blur(8px);
}
.duo-stat-chip svg { color: rgba(255,255,255,.65); flex-shrink: 0; }
.duo-stat-num {
  font-size: 2.1rem;
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.04em;
  line-height: 1;
  flex-shrink: 0;
}
.duo-stat-label {
  font-size: 0.8rem;
  color: rgba(255,255,255,.72);
  line-height: 1.4;
}

.duo-body {
  font-size: 0.9rem;
  color: rgba(255,255,255,.75);
  line-height: 1.7;
  margin-bottom: 32px;
  flex: 1;
}

.duo-pricing-rows {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 28px;
  flex: 1;
}
.duo-price-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line-soft);
  transition: background 200ms;
}
.duo-price-row:last-child { border-bottom: none; }
.duo-price-row:hover { background: var(--bg-alt); }
.duo-price-icon {
  width: 36px; height: 36px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--brand-red-soft), #FFF5F6);
  color: var(--brand-red);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.duo-price-row > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.duo-price-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--slate-soft);
}
.duo-price-val {
  font-size: 0.96rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.3;
}
.duo-price-val small {
  font-weight: 500;
  font-size: 0.78rem;
  color: var(--slate);
  margin-left: 4px;
}

/* ---------- Who We Work With ---------- */
.ww-section {
  background: var(--bg-alt);
  position: relative;
  overflow: hidden;
}
.ww-section::before {
  content: '';
  position: absolute;
  top: -80px; right: -80px;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(200,16,46,.05) 0%, transparent 70%);
  pointer-events: none;
}

.ww-header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 52px;
}
.ww-highlight {
  background: linear-gradient(120deg, var(--brand-red) 30%, #F54766 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.ww-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.ww-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 28px 24px 24px;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--ink);
  transition: all 300ms cubic-bezier(.2,.8,.2,1);
  position: relative;
  overflow: hidden;
}
.ww-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand-red), #F54766);
  opacity: 0;
  transition: opacity 280ms;
}
.ww-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 20px 48px -12px rgba(15,23,42,.14);
  border-color: rgba(200,16,46,.18);
  color: var(--ink);
}
.ww-card:hover::after { opacity: 1; }

.ww-card-inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 20px;
}

.ww-icon-tile {
  width: 56px; height: 56px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--brand-red-soft), #FFF5F6);
  color: var(--brand-red);
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(200,16,46,.08);
  transition: all 280ms cubic-bezier(.2,.8,.2,1);
  flex-shrink: 0;
  overflow: visible;
  position: relative;
}
.ww-icon-tile svg { width: 32px; height: 32px; overflow: visible; position: relative; z-index: 1; }
.ww-card:hover .ww-icon-tile {
  background: linear-gradient(135deg, var(--brand-red), var(--brand-red-dark));
  color: #fff;
  box-shadow: 0 6px 16px -4px rgba(200,16,46,.45);
}
.ww-icon-tile .accent { fill: var(--amber); transition: fill 280ms; }
.ww-icon-tile .accent-stroke { stroke: var(--amber); transition: stroke 280ms; }

.ww-num {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--line);
  letter-spacing: -0.04em;
  line-height: 1;
}

.ww-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.35;
  margin-bottom: 10px;
}

.ww-desc {
  font-size: 0.855rem;
  color: var(--slate);
  line-height: 1.65;
  margin-bottom: 22px;
  flex: 1;
}

.ww-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--brand-red);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition: gap 220ms cubic-bezier(.2,.8,.2,1);
  margin-top: auto;
}
.ww-card:hover .ww-link { gap: 10px; }

.ww-bottom-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 52px;
  padding: 28px 36px;
  background: #fff;
  border-radius: 18px;
  border: 1px solid var(--line);
  box-shadow: 0 2px 12px rgba(15,23,42,.05);
  flex-wrap: wrap;
}
.ww-tagline {
  font-size: 1rem;
  font-weight: 500;
  color: var(--slate);
  max-width: 520px;
  line-height: 1.6;
  margin: 0;
}

/* ---- ww-card icon animations — reuse mega-menu keyframes ---- */
/* 1. eCommerce: icon-fulfilment — flaps open, check draws, sparks */
.ww-card:hover .icon-fulfilment .flap-l {
  animation: flapL 1.6s ease-in-out infinite;
  transform-origin: right center; transform-box: fill-box;
}
.ww-card:hover .icon-fulfilment .flap-r {
  animation: flapR 1.6s ease-in-out infinite;
  transform-origin: left center; transform-box: fill-box;
}
.ww-card .icon-fulfilment .check { animation: drawCheck 1.6s ease-in-out infinite; }
.ww-card .icon-fulfilment .spark { animation: sparkPop 1.4s ease-out infinite; }
.ww-card .icon-fulfilment .spark-2 { animation-delay: .25s; }
.ww-card .icon-fulfilment .spark-3 { animation-delay: .5s; }

/* 2. Retail/Wholesale: icon-warehouse — door slides, windows pulse, flag waves, sparks */
.ww-card:hover .icon-warehouse .door {
  animation: doorSlide 1.6s ease-in-out infinite;
  transform-origin: right center;
}
.ww-card .icon-warehouse .window-light { animation: windowPulse 1.2s ease-in-out infinite alternate; }
.ww-card:hover .icon-warehouse .roof-flag {
  animation: flagWave 1.4s ease-in-out infinite;
  transform-origin: 20px 4px; transform-box: view-box;
}
.ww-card .icon-warehouse .roof { animation: pulseUp 1.4s ease-in-out infinite; }
.ww-card .icon-warehouse .spark { animation: sparkPop 1.4s ease-out infinite; }
.ww-card .icon-warehouse .spark-2 { animation-delay: .25s; }

/* 3. Manufacturing: icon-pallet — crate floats, slats glow */
.ww-card:hover .icon-pallet .crate {
  animation: crateFloat 1.4s cubic-bezier(.4,1.6,.5,1) infinite;
  transform-origin: center bottom; transform-box: fill-box;
}
.ww-card .icon-pallet .crate-shadow { animation: shadowGrow 1.4s cubic-bezier(.4,1.6,.5,1) infinite; }
.ww-card .icon-pallet .pallet-slat { animation: slatGlow 1.4s ease-in-out infinite; }

/* 4. Import/Export: icon-delivery — package drops, truck bounces, wheels spin */
.ww-card .icon-delivery .pkg-group { animation: pkgDeliver 1.4s cubic-bezier(.4,1.6,.5,1) infinite; }
.ww-card .icon-delivery .truck-body { animation: truckBounce .35s ease-in-out infinite; }
.ww-card:hover .icon-delivery .wheel {
  animation: wheelSpin .7s linear infinite;
  transform-origin: center; transform-box: fill-box;
}
.ww-card .icon-delivery .arrow-down { animation: arrowDown 1.4s ease-in-out infinite; }

/* ---------- Process Section ---------- */
.proc-section {
  background: var(--bg-alt);
  position: relative;
  overflow: hidden;
}
.proc-section::before {
  content: '';
  position: absolute;
  top: -80px; right: -80px;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(200,16,46,.05) 0%, transparent 70%);
  pointer-events: none;
}

.proc-header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 52px;
}
.proc-highlight {
  background: linear-gradient(120deg, var(--brand-red) 30%, #F54766 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.proc-grid {
  display: flex;
  align-items: stretch;
}

.proc-sep {
  flex-shrink: 0;
  width: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-red);
  opacity: .3;
  padding-bottom: 60px;
}

.proc-card {
  flex: 1;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 36px 28px 32px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: all 300ms cubic-bezier(.2,.8,.2,1);
  box-shadow: 0 2px 16px rgba(15,23,42,.05);
}
.proc-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand-red), #F54766);
  opacity: 0;
  transition: opacity 280ms;
}
.proc-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 56px -12px rgba(15,23,42,.15);
  border-color: rgba(200,16,46,.2);
}
.proc-card:hover::before { opacity: 1; }

.proc-ghost {
  position: absolute;
  bottom: -18px; right: 12px;
  font-size: 5.5rem;
  font-weight: 900;
  color: var(--line-soft);
  line-height: 1;
  letter-spacing: -0.04em;
  pointer-events: none;
  user-select: none;
  transition: color 300ms;
}
.proc-card:hover .proc-ghost { color: rgba(200,16,46,.07); }

.proc-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}
.proc-icon-tile {
  width: 56px; height: 56px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--brand-red-soft), #FFF5F6);
  color: var(--brand-red);
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(200,16,46,.08);
  transition: all 280ms cubic-bezier(.2,.8,.2,1);
  flex-shrink: 0;
  position: relative;
  overflow: visible;
}
.proc-icon-tile svg { width: 32px; height: 32px; overflow: visible; position: relative; z-index: 1; }
.proc-card:hover .proc-icon-tile {
  background: linear-gradient(135deg, var(--brand-red), var(--brand-red-dark));
  color: #fff;
  box-shadow: 0 6px 16px -4px rgba(200,16,46,.45);
}
.proc-icon-tile .accent { fill: var(--amber); transition: fill 280ms; }
.proc-icon-tile .accent-stroke { stroke: var(--amber); transition: stroke 280ms; }

.proc-pill {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  background: var(--brand-red-soft);
  color: var(--brand-red);
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  transition: all 280ms;
}
.proc-card:hover .proc-pill {
  background: linear-gradient(135deg, var(--brand-red), var(--brand-red-dark));
  color: #fff;
}

.proc-title {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 12px;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.proc-desc {
  font-size: 0.9rem;
  color: var(--slate);
  line-height: 1.7;
  flex: 1;
}

/* Benefits strip */
.proc-benefits {
  margin-top: 48px;
  padding: 22px 32px;
  background: #fff;
  border-radius: 18px;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  box-shadow: 0 2px 12px rgba(15,23,42,.04);
}
.proc-benefit {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.875rem;
  color: var(--ink);
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
}
.proc-benefit .sol-check { width: 20px; height: 20px; flex-shrink: 0; }
.proc-benefit .sol-check svg { width: 10px; height: 10px; }

/* ---- proc-card icon animations — reuse mega-menu keyframes ---- */
/* Step 1: icon-pallet */
.proc-card:hover .icon-pallet .crate {
  animation: crateFloat 1.4s cubic-bezier(.4,1.6,.5,1) infinite;
  transform-origin: center bottom;
  transform-box: fill-box;
}
.proc-card .icon-pallet .crate-shadow { animation: shadowGrow 1.4s cubic-bezier(.4,1.6,.5,1) infinite; }
.proc-card .icon-pallet .pallet-slat { animation: slatGlow 1.4s ease-in-out infinite; }

/* Step 2: icon-transport */
.proc-card:hover .icon-transport .wheel {
  animation: wheelSpin .7s linear infinite;
  transform-origin: center; transform-box: fill-box;
}
.proc-card .icon-transport .truck-body { animation: truckBounce .35s ease-in-out infinite; }
.proc-card .icon-transport .motion-line { animation: motionDash 600ms linear infinite; }
.proc-card .icon-transport .motion-line-2 { animation-delay: 200ms; }
.proc-card .icon-transport .motion-line-3 { animation-delay: 400ms; }
.proc-card .icon-transport .headlight { animation: headlightFlash 1.4s ease-in-out infinite; }
.proc-card:hover .icon-transport .exhaust {
  animation: exhaustPuff 1.4s ease-out infinite;
  transform-origin: center; transform-box: fill-box;
}

/* Step 3: icon-delivery */
.proc-card .icon-delivery .pkg-group { animation: pkgDeliver 1.4s cubic-bezier(.4,1.6,.5,1) infinite; }
.proc-card .icon-delivery .truck-body { animation: truckBounce .35s ease-in-out infinite; }
.proc-card:hover .icon-delivery .wheel {
  animation: wheelSpin .7s linear infinite;
  transform-origin: center; transform-box: fill-box;
}
.proc-card .icon-delivery .arrow-down { animation: arrowDown 1.4s ease-in-out infinite; }

/* ---------- Efficiency Section ---------- */
.eff-section {
  background: var(--bg-alt);
  position: relative;
  overflow: hidden;
}
.eff-section::before {
  content: '';
  position: absolute;
  top: -80px; right: -80px;
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(200,16,46,.05) 0%, transparent 70%);
  pointer-events: none;
}

.eff-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.eff-text-side {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.eff-highlight {
  background: linear-gradient(120deg, var(--brand-red) 30%, #F54766 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.eff-img-wrap {
  position: relative;
  border-radius: 24px;
  overflow: visible;
}
.eff-img-wrap img {
  width: 100%;
  border-radius: 24px;
  display: block;
  aspect-ratio: 4/3;
  object-fit: cover;
  box-shadow: 0 24px 64px -12px rgba(15,23,42,.18);
}

.eff-img-badge {
  position: absolute;
  bottom: -22px; left: -28px;
  background: #fff;
  border-radius: 18px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 8px 32px rgba(15,23,42,.14);
  border: 1px solid var(--line);
  white-space: nowrap;
}
.eff-badge-icon {
  width: 42px; height: 42px;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--brand-red-soft), #FFF5F6);
  color: var(--brand-red);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.eff-badge-val {
  display: block;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.2;
}
.eff-badge-sub {
  display: block;
  font-size: 0.72rem;
  color: var(--slate);
  margin-top: 3px;
}

.eff-ctas {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* ---------- Locations & Coverage Section ---------- */
.lcov-section {
  background: #fff;
  position: relative;
  overflow: hidden;
}
.lcov-section::before {
  content: '';
  position: absolute;
  bottom: -120px; left: -120px;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(200,16,46,.04) 0%, transparent 65%);
  pointer-events: none;
}

.lcov-header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 48px;
}

.lcov-highlight {
  background: linear-gradient(120deg, var(--brand-red) 30%, #F54766 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.lcov-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.lcov-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 32px 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  overflow: hidden;
  transition: box-shadow .28s ease, border-color .28s ease, transform .28s ease;
}
.lcov-card::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand-red), #F54766);
  border-radius: 0 0 20px 20px;
  opacity: 0;
  transition: opacity .28s ease;
}
.lcov-card:hover {
  box-shadow: 0 20px 56px -8px rgba(200,16,46,.12), 0 4px 16px rgba(15,23,42,.06);
  border-color: transparent;
  transform: translateY(-4px);
}
.lcov-card:hover::before { opacity: 1; }

.lcov-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 4px;
}

.lcov-icon-tile {
  width: 56px; height: 56px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--brand-red-soft), #FFF5F6);
  color: var(--brand-red);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .28s ease, box-shadow .28s ease;
}
.lcov-icon-tile svg { display: block; }
.lcov-icon-tile .accent { fill: var(--amber); }

.lcov-card:hover .lcov-icon-tile {
  background: linear-gradient(135deg, var(--brand-red), var(--brand-red-dark));
  color: #fff;
  box-shadow: 0 6px 20px rgba(200,16,46,.30);
}
.lcov-card:hover .lcov-icon-tile .accent { fill: #FFD97A; }

.lcov-num {
  font-size: 3rem;
  font-weight: 800;
  color: var(--line-soft);
  line-height: 1;
  letter-spacing: -1px;
  transition: color .28s ease;
  user-select: none;
}
.lcov-card:hover .lcov-num { color: rgba(200,16,46,.10); }

.lcov-title {
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--navy);
  margin: 0;
  line-height: 1.3;
}

.lcov-desc {
  font-size: 0.875rem;
  color: var(--slate);
  line-height: 1.65;
  margin: 0;
  flex: 1;
}

.lcov-locs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.lcov-loc {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  background: var(--brand-red-soft);
  color: var(--brand-red);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid rgba(200,16,46,.12);
  transition: background .22s ease, color .22s ease, border-color .22s ease;
}
.lcov-loc:hover {
  background: var(--brand-red);
  color: #fff;
  border-color: var(--brand-red);
}
.lcov-loc svg { flex-shrink: 0; }

/* Icon animations — triggered on card hover */
/* Card 1: icon-pallet */
.lcov-card:hover .icon-pallet .crate {
  animation: crateFloat 1.4s ease-in-out infinite;
}
.lcov-card:hover .icon-pallet .crate-shadow {
  animation: shadowGrow 1.4s ease-in-out infinite;
}
.lcov-card:hover .icon-pallet .pallet-slat {
  animation: slatGlow .9s ease-in-out infinite alternate;
}

/* Card 2: icon-transport */
.lcov-card .icon-transport .truck-body { animation: truckBounce .35s ease-in-out infinite; }
.lcov-card .icon-transport .motion-line { animation: motionDash 1s linear infinite; }
.lcov-card:hover .icon-transport .wheel {
  animation: wheelSpin .7s linear infinite;
  transform-origin: center; transform-box: fill-box;
}
.lcov-card .icon-transport .headlight { animation: headlightFlash 1.4s ease-in-out infinite; }
.lcov-card:hover .icon-transport .exhaust {
  animation: exhaustPuff 1.4s ease-out infinite;
  transform-origin: center; transform-box: fill-box;
}

/* Card 3: icon-delivery */
.lcov-card .icon-delivery .pkg-group { animation: pkgDeliver 1.4s cubic-bezier(.4,1.6,.5,1) infinite; }
.lcov-card .icon-delivery .truck-body { animation: truckBounce .35s ease-in-out infinite; }
.lcov-card:hover .icon-delivery .wheel {
  animation: wheelSpin .7s linear infinite;
  transform-origin: center; transform-box: fill-box;
}
.lcov-card .icon-delivery .arrow-down { animation: arrowDown 1.4s ease-in-out infinite; }

/* Card 4: icon-courier */
.lcov-card:hover .icon-courier .bolt {
  animation: boltStrike .9s ease-in-out infinite;
  transform-origin: center; transform-box: fill-box;
}
.lcov-card:hover .icon-courier .ring {
  animation: ringSpin 3.2s linear infinite;
  transform-origin: center; transform-box: fill-box;
}
.lcov-card:hover .icon-courier .ring-2 {
  animation: ringSpin 4.5s linear infinite reverse;
  transform-origin: center; transform-box: fill-box;
}
.lcov-card .icon-courier .spark { animation: sparkPop 1.4s ease-out infinite; }
.lcov-card .icon-courier .spark-2 { animation-delay: .25s; }
.lcov-card .icon-courier .spark-3 { animation-delay: .5s; }
.lcov-card .icon-courier .spark-4 { animation-delay: .75s; }

/* ---------- Coverage Grid (4 mini sections) ---------- */
.coverage-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 40px;
}
.coverage-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px;
  transition: all var(--transition);
}
.coverage-card:hover { box-shadow: var(--shadow-lg); border-color: transparent; }
.coverage-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.coverage-icon {
  width: 48px; height: 48px;
  background: var(--brand-red-soft);
  color: var(--brand-red);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}
.coverage-head h2 { font-size: 1.2rem; color: var(--navy); margin: 0; }
.coverage-card p { color: var(--slate); line-height: 1.6; }
.coverage-card a { color: var(--brand-red); font-weight: 600; }

/* ---------- Why Choose Us (dark) ---------- */
.why-section {
  background: var(--bg-dark);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.why-section h1,.why-section h2,.why-section h3,.why-section h4 { color: #fff; }

.why-deco-tl {
  position: absolute;
  top: -140px; left: -140px;
  width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(200,16,46,.18) 0%, transparent 65%);
  pointer-events: none;
}
.why-deco-br {
  position: absolute;
  bottom: -120px; right: -120px;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(200,16,46,.10) 0%, transparent 65%);
  pointer-events: none;
}

.why-header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 52px;
}
.why-eyebrow {
  background: rgba(200,16,46,.22) !important;
  color: #FCA5A5 !important;
}
.why-highlight {
  background: linear-gradient(120deg, #FF6B85 20%, #FCA5A5 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.why-lead {
  color: rgba(255,255,255,.72);
  font-size: 1.05rem;
  line-height: 1.7;
  margin-top: 16px;
}

/* Stats strip */
.why-stats-row {
  display: flex;
  align-items: stretch;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 20px;
  backdrop-filter: blur(12px);
  overflow: hidden;
  margin-bottom: 24px;
}
.why-stat-tile {
  flex: 1;
  padding: 36px 20px;
  text-align: center;
  position: relative;
  transition: background .25s ease;
}
.why-stat-tile:hover { background: rgba(255,255,255,.06); }
.why-stat-val {
  font-size: 2.1rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
  margin-bottom: 8px;
  letter-spacing: -0.5px;
}
.why-stat-lbl {
  font-size: 0.8rem;
  color: rgba(255,255,255,.55);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.why-stat-sep {
  width: 1px;
  background: rgba(255,255,255,.10);
  align-self: stretch;
  flex-shrink: 0;
}

/* Feature cards grid */
.why-feats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.why-feat-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-left: 3px solid var(--brand-red);
  border-radius: 16px;
  padding: 24px 24px 22px;
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.why-feat-card:hover {
  background: rgba(255,255,255,.07);
  border-left-color: #F54766;
  transform: translateY(-2px);
}
.why-feat-check {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-red), #F54766);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(200,16,46,.40);
  margin-top: 1px;
}
.why-feat-body { display: flex; flex-direction: column; gap: 5px; }
.why-feat-title {
  font-size: 0.94rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
  line-height: 1.4;
}
.why-feat-desc {
  font-size: 0.83rem;
  color: rgba(255,255,255,.60);
  margin: 0;
  line-height: 1.5;
}

/* legacy selectors kept for other pages */
.why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.why-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 28px; }
.why-stat {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  padding: 22px;
  border-radius: var(--radius);
  backdrop-filter: blur(10px);
}
.why-stat-value { font-size: 2rem; font-weight: 800; color: #fff; line-height: 1; margin-bottom: 6px; }
.why-stat-label { font-size: 0.85rem; color: rgba(255,255,255,.75); }
.why-feats { display: flex; flex-direction: column; gap: 14px; margin-top: 24px; }
.why-feats li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px;
  background: rgba(255,255,255,.05);
  border-left: 3px solid var(--brand-red);
  border-radius: 6px;
}
.why-feats .check-icon { background: var(--brand-red); }

/* ---------- Insights (Blog) ---------- */
.insights-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 40px;
}
.insight-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: all var(--transition);
  color: var(--ink);
  position: relative;
}
.insight-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--brand-red); color: var(--ink); }
.insight-tag {
  display: inline-flex;
  align-self: flex-start;
  padding: 4px 10px;
  background: var(--brand-red-soft);
  color: var(--brand-red);
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.insight-card h3 {
  font-size: 1.05rem;
  line-height: 1.35;
  color: var(--navy);
  font-weight: 700;
}
.insight-card-link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--brand-red);
  font-weight: 600;
  font-size: 0.9rem;
}
.insights-cta { text-align: center; margin-top: 36px; }

/* ===== OUR SERVICES SECTION ===== */
.osvc-section {
  background: #fff;
  padding-top: 100px;
  padding-bottom: 100px;
}
.osvc-header {
  text-align: center;
  max-width: 660px;
  margin: 0 auto 64px;
}
.osvc-eyebrow {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand-red);
  margin-bottom: 14px;
}
.osvc-title {
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 800;
  color: var(--navy);
  line-height: 1.15;
  margin-bottom: 18px;
}
.osvc-lead {
  font-size: 1.05rem;
  color: var(--slate);
  line-height: 1.7;
}
.osvc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* Card */
.osvc-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 28px 24px 22px;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 18px;
  text-decoration: none;
  color: var(--ink);
  position: relative;
  overflow: hidden;
  cursor: default;
  transition: transform 240ms cubic-bezier(.2,.8,.3,1), box-shadow 240ms, border-color 240ms;
}
/* Red top accent bar */
.osvc-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand-red), var(--brand-red-dark));
  border-radius: 18px 18px 0 0;
  opacity: 0;
  transition: opacity 240ms;
}
.osvc-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 48px rgba(10,31,68,.12), 0 4px 12px rgba(200,16,46,.08);
  border-color: rgba(200,16,46,.25);
}
.osvc-card:hover::before { opacity: 1; }

/* Icon tile */
.osvc-icon-tile {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, var(--brand-red-soft) 0%, #FFF5F6 100%);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-red);
  transition: all 280ms cubic-bezier(.2,.8,.2,1);
  position: relative;
  overflow: hidden;
}
.osvc-icon-tile::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.4), transparent 60%);
  opacity: 0;
  transition: opacity 280ms;
  pointer-events: none;
}
.osvc-card:hover .osvc-icon-tile::before { opacity: 1; }
.osvc-icon-tile svg { width: 36px; height: 36px; overflow: visible; position: relative; z-index: 1; }
.osvc-card:hover .osvc-icon-tile {
  background: linear-gradient(135deg, var(--brand-red), var(--brand-red-dark));
  color: #fff;
  box-shadow: 0 8px 22px -4px rgba(200,16,46,.55);
  transform: scale(1.06);
}
/* Amber accents inside osvc tiles */
.osvc-icon-tile .accent { fill: var(--amber); transition: fill 280ms; }
.osvc-icon-tile .accent-stroke { stroke: var(--amber); transition: stroke 280ms; }
.osvc-card:hover .osvc-icon-tile .accent,
.osvc-card:hover .osvc-icon-tile .accent-stroke { filter: brightness(1.15); }
/* Spark particles */
.osvc-icon-tile .spark {
  opacity: 0;
  transform-origin: center;
  transform-box: fill-box;
}
.osvc-card .osvc-icon-tile .spark { animation: sparkPop 1.4s ease-out infinite; }
.osvc-card .osvc-icon-tile .spark-2 { animation-delay: .25s; }
.osvc-card .osvc-icon-tile .spark-3 { animation-delay: .5s; }
.osvc-card .osvc-icon-tile .spark-4 { animation-delay: .75s; }

/* Card text */
.osvc-card-body { flex: 1; }
.osvc-card-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 8px;
  line-height: 1.3;
  transition: color 280ms;
}
.osvc-card:hover .osvc-card-title { color: var(--brand-red); }
.osvc-card-desc {
  font-size: .875rem;
  color: var(--slate);
  line-height: 1.65;
  margin: 0;
}
/* Arrow */
.osvc-card-arrow {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--brand-red);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 260ms, transform 260ms;
  letter-spacing: .01em;
}
.osvc-card:hover .osvc-card-arrow {
  opacity: 1;
  transform: translateX(0);
}

/* ===== OSVC icon animations (mirror svc-card rules — keyframes already defined above) ===== */
/* 1. Pallet Storage */
.osvc-card .icon-pallet .crate { animation: crateFloat 1.4s cubic-bezier(.4,1.6,.5,1) infinite; transform-origin: center bottom; }
.osvc-card .icon-pallet .crate-shadow { animation: shadowGrow 1.4s cubic-bezier(.4,1.6,.5,1) infinite; }
.osvc-card .icon-pallet .pallet-slat { animation: slatGlow 1.4s ease-in-out infinite; }
/* 2. Warehouse Space */
.osvc-card .icon-warehouse .door { animation: doorSlide 1.6s ease-in-out infinite; transform-origin: right center; }
.osvc-card .icon-warehouse .window-light { animation: windowPulse 1.2s ease-in-out infinite alternate; }
.osvc-card .icon-warehouse .roof-flag { animation: flagWave 1.4s ease-in-out infinite; transform-origin: 20px 4px; transform-box: view-box; }
.osvc-card .icon-warehouse .roof { animation: pulseUp 1.4s ease-in-out infinite; }
/* 3. Fulfilment */
.osvc-card .icon-fulfilment .flap-l { animation: flapL 1.6s ease-in-out infinite; transform-origin: right center; transform-box: fill-box; }
.osvc-card .icon-fulfilment .flap-r { animation: flapR 1.6s ease-in-out infinite; transform-origin: left center; transform-box: fill-box; }
.osvc-card .icon-fulfilment .check { animation: drawCheck 1.6s ease-in-out infinite; }
/* 4. Transport & Distribution */
.osvc-card .icon-transport .wheel { animation: wheelSpin .7s linear infinite; transform-origin: center; transform-box: fill-box; }
.osvc-card .icon-transport .truck-body { animation: truckBounce .35s ease-in-out infinite; }
.osvc-card .icon-transport .motion-line { animation: motionDash 600ms linear infinite; }
.osvc-card .icon-transport .motion-line-2 { animation-delay: 200ms; }
.osvc-card .icon-transport .motion-line-3 { animation-delay: 400ms; }
.osvc-card .icon-transport .headlight { animation: headlightFlash 1.4s ease-in-out infinite; }
.osvc-card .icon-transport .exhaust { animation: exhaustPuff 1.4s ease-out infinite; transform-origin: center; transform-box: fill-box; }
/* 5. Same Day Courier */
.osvc-card .icon-courier .bolt { animation: boltStrike .9s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.osvc-card .icon-courier .ring { animation: ringSpin 3.2s linear infinite; transform-origin: center; transform-box: fill-box; }
.osvc-card .icon-courier .ring-2 { animation: ringSpin 4.5s linear infinite reverse; transform-origin: center; transform-box: fill-box; }
/* 6. Pallet Delivery */
.osvc-card .icon-delivery .pkg-group { animation: pkgDeliver 1.4s cubic-bezier(.4,1.6,.5,1) infinite; }
.osvc-card .icon-delivery .truck-body { animation: truckBounce .35s ease-in-out infinite; }
.osvc-card .icon-delivery .wheel { animation: wheelSpin .7s linear infinite; transform-origin: center; transform-box: fill-box; }
.osvc-card .icon-delivery .arrow-down { animation: arrowDown 1.4s ease-in-out infinite; }
/* 7. Contract Logistics */
.osvc-card .icon-contract .signature { animation: drawSig 2s ease-in-out infinite; }
.osvc-card .icon-contract .pen { animation: penMove 2s ease-in-out infinite; }
.osvc-card .icon-contract .stamp { animation: stampLand 2s ease-out infinite; transform-origin: center; transform-box: fill-box; }
.osvc-card .icon-contract .corner { animation: cornerFlip 2s ease-in-out infinite; transform-origin: top right; transform-box: fill-box; }
/* 8. Container Handling */
.osvc-card .icon-container .hook { animation: hookLower 2s ease-in-out infinite; }
.osvc-card .icon-container .cable { animation: cableSwing 1.4s ease-in-out infinite; transform-origin: top center; transform-box: view-box; }
.osvc-card .icon-container .container-body { animation: containerLift 2s ease-in-out infinite; }
.osvc-card .icon-container .ridge { animation: ridgeShine 1.4s ease-in-out infinite; }
/* 9. Bulk Pallet Storage */
.osvc-card .icon-bulk .stack-a { animation: pulseUp 1s ease-in-out infinite; }
.osvc-card .icon-bulk .stack-b { animation: pulseUp 1s ease-in-out .15s infinite; }
.osvc-card .icon-bulk .stack-c { animation: pulseUp 1s ease-in-out .3s infinite; }
.osvc-card .icon-bulk .stack-d { animation: pulseUp 1s ease-in-out .45s infinite; }
/* 10. Overflow Storage */
.osvc-card .icon-overflow .item-1 { animation: spillItem 1.4s ease-out infinite; }
.osvc-card .icon-overflow .item-2 { animation: spillItem 1.4s ease-out .2s infinite; }
.osvc-card .icon-overflow .item-3 { animation: spillItem 1.4s ease-out .4s infinite; }
.osvc-card .icon-overflow .arrow-curve { animation: arrowCurve 1.4s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
/* 11. Short-Term Storage */
.osvc-card .icon-shortterm .hand-sec { animation: wheelSpin 1s linear infinite; transform-origin: 12px 20px; transform-box: view-box; }
.osvc-card .icon-shortterm .hand-min { animation: wheelSpin 3s linear infinite; transform-origin: 12px 20px; transform-box: view-box; }
.osvc-card .icon-shortterm .hand-hr { animation: wheelSpin 8s linear infinite; transform-origin: 12px 20px; transform-box: view-box; }
.osvc-card .icon-shortterm .cal-page { animation: pageFlip 1.6s ease-in-out infinite; transform-origin: top left; transform-box: fill-box; }
/* 12. Pallet T&D */
.osvc-card .icon-ptd .pallet-shuttle { animation: palletShuttle 1.6s ease-in-out infinite; }
.osvc-card .icon-ptd .pallet-shuttle-2 { animation: palletShuttle 1.6s ease-in-out .4s infinite; }
.osvc-card .icon-ptd .wheel { animation: wheelSpin .7s linear infinite; transform-origin: center; transform-box: fill-box; }
.osvc-card .icon-ptd .truck-body { animation: truckBounce .35s ease-in-out infinite; }

/* Responsive */
@media (max-width: 960px) { .osvc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .osvc-grid { grid-template-columns: 1fr; } }

/* ============================================================
   PREMIUM SERVICE CARD COMPONENTS
   ============================================================ */

.osvc-card-checks {
  list-style: none;
  margin: 14px 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.osvc-card-checks li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--slate);
  line-height: 1.35;
}
.osvc-card-checks li::before {
  content: '';
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: #DCFCE7;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 8.5l3 3 7-7' stroke='%2316A34A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 11px;
  background-repeat: no-repeat;
  background-position: center;
}

.osvc-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  margin-top: auto;
}

.osvc-card-learn {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--slate-soft);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  transition: color 180ms;
}
.osvc-card-learn:hover { color: var(--brand-red); }
.osvc-card-learn span { transition: transform 180ms; }
.osvc-card-learn:hover span { transform: translateX(3px); }

.osvc-card-quote {
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--brand-red), var(--brand-red-dark));
  border: none;
  border-radius: 10px;
  padding: 9px 16px;
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: 0.01em;
  transition: transform 180ms, box-shadow 180ms, filter 180ms;
  box-shadow: 0 3px 10px rgba(200,16,46,.3);
}
.osvc-card-quote:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(200,16,46,.4);
  filter: brightness(1.08);
}
.osvc-card-quote:active { transform: translateY(0); }

/* ============================================================
   QUOTE MODAL
   ============================================================ */

.lq-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(6,15,34,.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 300ms, visibility 300ms;
}
.lq-overlay.lq-open {
  opacity: 1;
  visibility: visible;
}

.lq-modal {
  display: flex;
  width: 100%;
  max-width: 860px;
  max-height: 92vh;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 40px 100px rgba(0,0,0,.45);
  transform: translateY(24px) scale(.97);
  transition: transform 340ms cubic-bezier(.2,.8,.3,1);
}
.lq-overlay.lq-open .lq-modal {
  transform: translateY(0) scale(1);
}

.lq-left {
  width: 280px;
  flex-shrink: 0;
  background: linear-gradient(160deg, #0D2550 0%, #0A1F44 60%, #060F22 100%);
  display: flex;
  flex-direction: column;
  padding: 36px 28px;
  gap: 36px;
  position: relative;
  overflow: hidden;
}
.lq-left::before {
  content: '';
  position: absolute;
  width: 300px; height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200,16,46,.2) 0%, transparent 70%);
  top: -80px; right: -80px;
  pointer-events: none;
}

.lq-logo-text {
  font-family: 'Outfit', sans-serif;
  font-size: 2rem;
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.04em;
  line-height: 1;
}
.lq-logo-text span { color: var(--brand-red); }

.lq-left-top { display: flex; flex-direction: column; gap: 14px; }
.lq-left-tagline {
  font-size: 0.88rem;
  line-height: 1.55;
  color: rgba(255,255,255,.6);
  font-weight: 400;
}

.lq-progress { display: flex; flex-direction: column; gap: 0; }
.lq-prog-step { display: flex; align-items: center; gap: 12px; }
.lq-prog-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 280ms, border-color 280ms;
}
.lq-prog-dot span {
  font-size: 0.82rem;
  font-weight: 700;
  color: rgba(255,255,255,.4);
  transition: color 280ms;
}
.lq-prog-label {
  font-size: 0.82rem;
  font-weight: 500;
  color: rgba(255,255,255,.35);
  transition: color 280ms;
}
.lq-prog-step--active .lq-prog-dot {
  background: var(--brand-red);
  border-color: var(--brand-red);
  box-shadow: 0 0 0 4px rgba(200,16,46,.25);
}
.lq-prog-step--active .lq-prog-dot span { color: #fff; }
.lq-prog-step--active .lq-prog-label { color: #fff; font-weight: 600; }
.lq-prog-step--done .lq-prog-dot { background: #16A34A; border-color: #16A34A; }
.lq-prog-step--done .lq-prog-dot span { color: #fff; }
.lq-prog-step--done .lq-prog-label { color: rgba(255,255,255,.6); }

.lq-prog-line {
  width: 2px;
  height: 28px;
  background: rgba(255,255,255,.12);
  margin-left: 15px;
  border-radius: 2px;
  transition: background 280ms;
}
.lq-prog-line--done { background: #16A34A; }

.lq-trust-list { display: flex; flex-direction: column; gap: 10px; margin-top: auto; }
.lq-trust-item {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.8rem;
  color: rgba(255,255,255,.6);
  font-weight: 500;
}
.lq-trust-item::before {
  content: '';
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: rgba(22,163,74,.2);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 8.5l3 3 7-7' stroke='%2316A34A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 11px;
  background-repeat: no-repeat;
  background-position: center;
}

.lq-right {
  flex: 1;
  background: #fff;
  overflow-y: auto;
  position: relative;
  display: flex;
  flex-direction: column;
}

.lq-close {
  position: absolute;
  top: 18px; right: 18px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--line-soft);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--slate);
  transition: background 180ms, color 180ms;
  z-index: 1;
}
.lq-close:hover { background: var(--line); color: var(--ink); }

.lq-step-panel {
  display: none;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
  padding: 40px 36px 32px;
  animation: lqFadeIn 280ms ease;
}
.lq-step-panel--active { display: flex; }
#lqSuccess { align-items: center; justify-content: center; text-align: center; }

@keyframes lqFadeIn {
  from { opacity: 0; transform: translateX(12px); }
  to   { opacity: 1; transform: translateX(0); }
}

.lq-step-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--brand-red);
  background: var(--brand-red-soft);
  border-radius: 999px;
  padding: 4px 12px;
  margin-bottom: 12px;
}
.lq-step-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin-bottom: 6px;
}
.lq-step-sub {
  font-size: 0.9rem;
  color: var(--slate);
  margin-bottom: 28px;
  line-height: 1.5;
}

.lq-fields { display: flex; flex-direction: column; gap: 16px; flex: 1; align-self: stretch; }
.lq-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.lq-field { display: flex; flex-direction: column; gap: 6px; }
.lq-field--full { grid-column: 1 / -1; }

.lq-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.01em;
}
.lq-req { color: var(--brand-red); }

.lq-input {
  font-family: inherit;
  font-size: 0.92rem;
  color: var(--ink);
  background: var(--bg-alt);
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 11px 14px;
  outline: none;
  transition: border-color 180ms, box-shadow 180ms, background 180ms;
  width: 100%;
}
.lq-input:focus {
  border-color: var(--brand-red);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(200,16,46,.1);
}
.lq-input::placeholder { color: #AEBAC8; }

.lq-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' fill='%23475569' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
  padding-right: 34px;
  cursor: pointer;
}

.lq-textarea { resize: vertical; min-height: 100px; }

.lq-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-self: stretch;
  margin-top: 28px;
  gap: 12px;
}

.lq-btn-next, .lq-btn-submit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--brand-red), var(--brand-red-dark));
  border: none;
  border-radius: 12px;
  padding: 13px 24px;
  cursor: pointer;
  letter-spacing: 0.01em;
  box-shadow: 0 4px 16px rgba(200,16,46,.35);
  transition: transform 180ms, box-shadow 180ms, filter 180ms;
}
.lq-btn-next:hover, .lq-btn-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(200,16,46,.45);
  filter: brightness(1.06);
}

.lq-btn-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--slate);
  background: transparent;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 12px 20px;
  cursor: pointer;
  transition: border-color 180ms, color 180ms, background 180ms;
}
.lq-btn-back:hover { border-color: var(--slate); color: var(--ink); background: var(--bg-alt); }

.lq-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex: 1;
  gap: 16px;
  padding: 20px 0;
}
.lq-success-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, #16A34A, #15803D);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 32px rgba(22,163,74,.4);
  animation: successPop 500ms cubic-bezier(.2,1.4,.4,1) forwards;
}
@keyframes successPop {
  0%   { transform: scale(0); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.lq-success-title {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.025em;
}
.lq-success-msg {
  font-size: 0.92rem;
  color: var(--slate);
  line-height: 1.6;
  max-width: 340px;
}
.lq-btn-close-success {
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--slate);
  background: var(--bg-alt);
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 11px 28px;
  cursor: pointer;
  margin-top: 8px;
  transition: background 180ms, border-color 180ms;
}
.lq-btn-close-success:hover { background: var(--line); }

@media (max-width: 700px) {
  .lq-modal { flex-direction: column; max-height: 96vh; border-radius: 20px 20px 0 0; align-self: flex-end; }
  .lq-left { width: 100%; flex-direction: row; flex-wrap: wrap; padding: 20px 20px 16px; gap: 16px; }
  .lq-left-top { flex-direction: row; align-items: center; gap: 12px; width: 100%; }
  .lq-left-tagline { display: none; }
  .lq-progress { flex-direction: row; align-items: center; }
  .lq-prog-line { width: 28px; height: 2px; margin-left: 0; }
  .lq-prog-label { display: none; }
  .lq-trust-list { display: none; }
  .lq-step-panel { padding: 24px 20px 20px; }
  .lq-row { grid-template-columns: 1fr; }
}

/* ---------- Testimonials Slider ---------- */
.tst-section { background: var(--bg-alt); }

.tst-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 48px;
}
.tst-highlight {
  background: linear-gradient(120deg, var(--brand-red) 30%, #F54766 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.tst-slider-wrap {
  display: flex;
  align-items: center;
  gap: 20px;
}
.tst-viewport {
  overflow: hidden;
  flex: 1;
  min-width: 0;
}
.tst-track {
  display: flex;
  gap: 24px;
  transition: transform .52s cubic-bezier(.25,.46,.45,.94);
  will-change: transform;
}
.tst-track .test-card { flex: 0 0 auto; }

.tst-arrow {
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: #fff;
  color: var(--navy);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color .22s ease, color .22s ease, box-shadow .22s ease, transform .22s ease;
  box-shadow: 0 2px 12px rgba(15,23,42,.07);
}
.tst-arrow:hover {
  border-color: var(--brand-red);
  color: var(--brand-red);
  box-shadow: 0 4px 20px rgba(200,16,46,.15);
  transform: scale(1.06);
}
.tst-arrow:disabled { opacity: .3; cursor: not-allowed; transform: none; box-shadow: none; }

.tst-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 32px;
}
.tst-dot {
  width: 8px; height: 8px;
  border-radius: 999px;
  background: rgba(15,23,42,.18);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: width .28s ease, background .28s ease;
}
.tst-dot.active {
  width: 28px;
  background: var(--brand-red);
}

/* ---------- Testimonials (shared card styles) ---------- */
.test-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 40px; }
.test-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 32px;
  position: relative;
  display: flex;
  flex-direction: column;
}
.test-card::before {
  content: '"';
  position: absolute;
  top: 16px;
  right: 28px;
  font-size: 5rem;
  line-height: 1;
  color: var(--brand-red-soft);
  font-family: Georgia, serif;
}
.test-stars {
  display: flex;
  gap: 2px;
  margin-bottom: 14px;
  color: var(--amber);
  font-size: 1rem;
}
.test-quote {
  font-size: 1.05rem;
  color: var(--ink);
  line-height: 1.6;
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
}
.test-author { display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid var(--line); }
.test-avatar {
  width: 44px; height: 44px;
  background: linear-gradient(135deg, var(--brand-red), var(--brand-red-dark));
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1rem;
}
.test-role { font-weight: 700; color: var(--navy); font-size: 0.95rem; line-height: 1.3; }
.test-role-sub { font-size: 0.85rem; color: var(--slate); }

/* ---------- Final CTA ---------- */
.final-cta {
  background: linear-gradient(145deg, #6B0619 0%, var(--brand-red) 45%, #8B0A24 100%);
  color: #fff;
  text-align: center;
  padding: 110px 0;
  position: relative;
  overflow: hidden;
}

/* Decorative blobs */
.fcta-deco-1 {
  position: absolute; top: -120px; left: -120px;
  width: 480px; height: 480px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.13) 0%, transparent 65%);
  pointer-events: none;
}
.fcta-deco-2 {
  position: absolute; bottom: -100px; right: -100px;
  width: 380px; height: 380px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.08) 0%, transparent 65%);
  pointer-events: none;
}
.fcta-deco-ring {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 680px; height: 680px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.07);
  pointer-events: none;
}
.fcta-deco-ring-2 {
  width: 460px; height: 460px;
  border-color: rgba(255,255,255,.05);
}

.final-cta-inner {
  position: relative; z-index: 1;
  max-width: 760px; margin: 0 auto;
}

.fcta-eyebrow {
  background: rgba(255,255,255,.15) !important;
  color: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  backdrop-filter: blur(8px);
}

.fcta-title {
  font-size: clamp(2.1rem, 4.5vw, 3.2rem);
  color: #fff;
  font-weight: 800;
  letter-spacing: -0.5px;
  line-height: 1.12;
  margin: 22px 0 20px;
}

.fcta-lead {
  color: rgba(255,255,255,.75);
  font-size: 1.08rem;
  line-height: 1.72;
  max-width: 580px;
  margin: 0 auto 40px;
}

/* Trust strip */
.fcta-trust {
  display: inline-flex;
  align-items: center;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px;
  padding: 18px 8px;
  margin-bottom: 44px;
  backdrop-filter: blur(12px);
}
.fcta-trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 28px;
  gap: 4px;
}
.fcta-trust-val {
  font-size: 1.05rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
  letter-spacing: -0.3px;
}
.fcta-trust-lbl {
  font-size: 0.68rem;
  color: rgba(255,255,255,.58);
  text-transform: uppercase;
  letter-spacing: .09em;
  font-weight: 600;
  white-space: nowrap;
}
.fcta-trust-sep {
  width: 1px; height: 36px;
  background: rgba(255,255,255,.18);
  flex-shrink: 0;
}

/* Buttons */
.fcta-btns {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}
.fcta-btn-primary {
  background: #fff;
  color: var(--brand-red);
  font-weight: 700;
  box-shadow: 0 8px 32px rgba(0,0,0,.22), 0 2px 8px rgba(0,0,0,.12);
  position: relative;
  overflow: hidden;
  border: none;
}
.fcta-btn-primary::before {
  content: '';
  position: absolute; top: 0; left: -80%;
  width: 50%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(200,16,46,.07), transparent);
  animation: hdrBtnShimmer 3.5s ease-in-out infinite;
  pointer-events: none;
}
.fcta-btn-primary:hover { background: var(--ink); color: #fff; box-shadow: 0 12px 40px rgba(0,0,0,.30); }

.fcta-btn-phone {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,.10);
  color: #fff;
  border: 1.5px solid rgba(255,255,255,.26);
  backdrop-filter: blur(12px);
  font-weight: 700;
  transition: background .22s ease, border-color .22s ease;
}
.fcta-btn-phone:hover {
  background: rgba(255,255,255,.20);
  border-color: rgba(255,255,255,.48);
  color: #fff;
}

/* ---------- Footer ---------- */
.site-footer {
  background: linear-gradient(180deg, #070F26 0%, #040C1E 100%);
  color: rgba(255,255,255,.6);
  padding: 0 0 0;
  position: relative;
}

.footer-accent-bar {
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--brand-red) 40%, rgba(200,16,46,.3) 70%, transparent 100%);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1.1fr;
  gap: 56px;
  padding: 72px 0 56px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

/* Brand column */
.footer-logo-link { display: inline-block; margin-bottom: 20px; }
.footer-brand-desc {
  font-size: 0.875rem;
  line-height: 1.72;
  color: rgba(255,255,255,.45);
  max-width: 300px;
}
.footer-brand-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}
.footer-tag {
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.09);
  font-size: 0.7rem;
  color: rgba(255,255,255,.5);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* Column headings */
.footer-col h5 {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 700;
  color: rgba(255,255,255,.35);
  margin-bottom: 20px;
  padding-bottom: 0;
  position: static;
}
.footer-col h5::after { display: none; }

/* Links */
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col li a {
  color: rgba(255,255,255,.55);
  font-size: 0.875rem;
  transition: color .2s ease, padding-left .2s ease;
  display: inline-flex;
  align-items: center;
  gap: 0;
}
.footer-col li a::before { display: none; }
.footer-col li a:hover { color: #fff; padding-left: 6px; }

/* Contact */
.footer-contact { display: flex; flex-direction: column; gap: 14px; }
.footer-contact-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 0.875rem;
  line-height: 1.6;
  color: rgba(255,255,255,.55);
  text-decoration: none;
}
.footer-contact-link { transition: color .2s ease; }
.footer-contact-link:hover { color: rgba(255,255,255,.9); }
.footer-contact-link:hover .footer-contact-icon {
  background: rgba(200,16,46,.28);
  border-color: rgba(200,16,46,.4);
}
.footer-contact-icon {
  width: 30px; height: 30px;
  background: rgba(200,16,46,.14);
  border: 1px solid rgba(200,16,46,.22);
  color: rgba(200,16,46,.8);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background .2s ease, border-color .2s ease;
}
.footer-contact-item span { color: rgba(255,255,255,.55); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 22px 0;
  font-size: 0.8rem;
  color: rgba(255,255,255,.3);
}
.footer-copy { color: rgba(255,255,255,.3); }
.footer-bottom a { color: rgba(255,255,255,.35); transition: color .2s ease; }
.footer-bottom a:hover { color: rgba(255,255,255,.75); }
.footer-legal { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-credit {
  text-align: center;
  padding: 10px 0 18px;
  font-size: 0.75rem;
  color: rgba(255,255,255,.22);
  border-top: 1px solid rgba(255,255,255,.07);
}
.footer-credit a { color: rgba(255,255,255,.38); transition: color .2s ease; }
.footer-credit a:hover { color: rgba(255,255,255,.75); }

/* ---------- Mobile Menu ---------- */
.mobile-nav {
  display: none;
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 90%;
  max-width: 380px;
  background: #fff;
  z-index: 1000;
  overflow-y: auto;
  padding: 24px;
  box-shadow: -8px 0 30px rgba(0,0,0,.15);
  transform: translateX(100%);
  transition: transform 300ms ease;
}
.mobile-nav.open { transform: translateX(0); }
.mobile-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.6);
  z-index: 999;
  opacity: 0;
  transition: opacity 300ms ease;
}
.mobile-overlay.open { display: block; opacity: 1; }
.mobile-nav-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.mobile-close { padding: 8px; border-radius: 8px; }
.mobile-close svg { width: 24px; height: 24px; color: var(--ink); }
.mobile-nav-list { display: flex; flex-direction: column; gap: 4px; }
.mobile-nav-item { border-bottom: 1px solid var(--line-soft); }
.mobile-nav-item > a, .mobile-nav-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 8px;
  color: var(--ink);
  font-weight: 600;
  font-size: 1rem;
  width: 100%;
  text-align: left;
}
.mobile-nav-toggle .chev { transition: transform var(--transition); }
.mobile-nav-toggle.open .chev { transform: rotate(180deg); }
.mobile-sub {
  display: none;
  padding: 0 8px 12px 16px;
  flex-direction: column;
  gap: 2px;
}
.mobile-sub.open { display: flex; }
.mobile-sub a {
  padding: 8px 12px;
  color: var(--slate);
  font-size: 0.92rem;
  font-weight: 500;
  border-radius: 6px;
}
.mobile-sub a:hover { background: var(--bg-alt); color: var(--brand-red); }
.mobile-sub-group { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--brand-red); font-weight: 700; padding: 12px 8px 4px; }
.mobile-cta { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .icon-cards { grid-template-columns: repeat(3, 1fr); }
  .cs-grid { grid-template-columns: repeat(2, 1fr); }
  .ww-grid { grid-template-columns: repeat(2, 1fr); }
  .insights-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .services-grid { grid-template-columns: repeat(3, 1fr); }
  .mega-menu-blog { min-width: 380px; }
}
/* =====================================================
   FLOATING CALL FAB — two-zone premium card
   ===================================================== */
.float-cta {
  display: none !important;
  position: fixed;
  bottom: 32px;
  right: 32px;
  z-index: 9990;
  opacity: 0;
  transform: translateX(120%);
  pointer-events: none;
  transition: opacity 450ms ease,
              transform 550ms cubic-bezier(.2,.8,.2,1);
}
.float-cta.visible {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}
/* Outer pulsing ring to draw attention */
.float-cta::before {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 24px;
  border: 2px solid rgba(200,16,46,.5);
  animation: cardOuterPulse 2.5s ease-out infinite;
  pointer-events: none;
}
@keyframes cardOuterPulse {
  0%   { transform: scale(1); opacity: .6; }
  100% { transform: scale(1.06); opacity: 0; }
}

/* Card link — single unified row */
.float-cta-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 16px 16px 18px;
  width: 310px;
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  position: relative;
  background:
    url("data:image/svg+xml,%3Csvg width='24' height='24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='1' cy='1' r='.8' fill='rgba(255,255,255,0.04)'/%3E%3C/svg%3E"),
    linear-gradient(135deg, #D4122F 0%, #9C0A22 50%, #7A0819 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.2),
    inset 0 -1px 0 rgba(0,0,0,.2),
    0 4px 0 rgba(80,0,10,.5),
    0 20px 50px rgba(200,16,46,.5),
    0 8px 24px rgba(0,0,0,.35);
  transition: transform 260ms cubic-bezier(.2,.8,.2,1), box-shadow 260ms ease;
}
.float-cta-link:hover {
  transform: translateY(-4px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.2),
    inset 0 -1px 0 rgba(0,0,0,.2),
    0 4px 0 rgba(80,0,10,.5),
    0 28px 60px rgba(200,16,46,.6),
    0 12px 32px rgba(0,0,0,.4);
}
/* Top glass gloss */
.float-cta-link::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 45%;
  background: linear-gradient(180deg, rgba(255,255,255,.13), transparent);
  border-radius: 20px 20px 0 0;
  pointer-events: none;
}
/* Shimmer sweep */
.float-cta-link::after {
  content: '';
  position: absolute;
  top: 0; left: -80%;
  width: 45%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.1), transparent);
  transition: left 550ms ease;
  pointer-events: none;
}
.float-cta-link:hover::after { left: 130%; }

/* Icon circle */
.float-icon-wrap {
  width: 52px; height: 52px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  border: 1.5px solid rgba(255,255,255,.3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 4px 16px rgba(0,0,0,.25);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.float-phone-svg {
  width: 22px; height: 22px;
  color: #fff;
  position: relative; z-index: 2;
  animation: phoneRing 3s ease-in-out infinite;
  transform-origin: bottom center;
}
@keyframes phoneRing {
  0%,50%,100% { transform: rotate(0deg); }
  54%  { transform: rotate(-18deg); }
  58%  { transform: rotate(18deg); }
  62%  { transform: rotate(-12deg); }
  66%  { transform: rotate(10deg); }
  70%  { transform: rotate(-4deg); }
  74%  { transform: rotate(0deg); }
}
.float-ring {
  position: absolute;
  top: 50%; left: 50%;
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.35);
  animation: fabRipple 2.8s ease-out infinite;
  pointer-events: none;
}
.float-ring-2 { animation-delay: 1.1s; }
@keyframes fabRipple {
  0%   { transform: translate(-50%,-50%) scale(1); opacity: .5; }
  100% { transform: translate(-50%,-50%) scale(2.5); opacity: 0; }
}

/* Text block */
.float-text-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  position: relative;
  z-index: 1;
}
.float-label {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
  line-height: 1.2;
  white-space: nowrap;
}
.float-number {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(255,255,255,.7);
  letter-spacing: 0.03em;
}
.float-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #4ADE80;
  box-shadow: 0 0 7px rgba(74,222,128,.9);
  animation: floatDotPulse 2s ease-in-out infinite;
}
@keyframes floatDotPulse {
  0%,100% { transform: scale(1); box-shadow: 0 0 5px rgba(74,222,128,.7); }
  50%      { transform: scale(1.5); box-shadow: 0 0 12px rgba(74,222,128,1); }
}
.float-glow-line {
  display: block;
  height: 1.5px;
  border-radius: 2px;
  background: linear-gradient(90deg,
    transparent,
    rgba(255,255,255,.8) 40%,
    rgba(255,255,255,.8) 60%,
    transparent);
  background-size: 220% 100%;
  animation: glowSweep 2s linear infinite;
  margin-top: 2px;
}
@keyframes glowSweep {
  0%   { background-position: 120% 0; }
  100% { background-position: -120% 0; }
}

/* Arrow badge */
.float-arrow-badge {
  flex-shrink: 0;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(0,0,0,.2);
  border: 1px solid rgba(255,255,255,.18);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  transition: transform 260ms ease, background 260ms;
}
.float-arrow-badge svg { width: 12px; height: 12px; }
.float-cta-link:hover .float-arrow-badge {
  transform: translateX(3px);
  background: rgba(0,0,0,.35);
}

@media (max-width: 980px) {
  .primary-nav, .header-cta .header-phone, .header-cta .btn-primary { display: none; }
  .mobile-toggle { display: inline-flex; }
  .hero { min-height: 0; padding: 80px 0 90px; }
  .hero-inner { flex-direction: column; align-items: stretch; gap: 36px; }
  .hero-stats-side { width: 100%; flex-direction: row; flex-wrap: wrap; }
  .hero-stat-float { flex: 1 1 220px; }
  .hero-stat-float:nth-child(2) { margin-left: 0; }
  .two-col, .why-grid { grid-template-columns: 1fr; gap: 40px; }
  .why-feats-grid { grid-template-columns: 1fr; }
  .why-stats-row { flex-wrap: wrap; }
  .why-stat-tile { flex: 1 1 40%; }
  .why-stat-sep { display: none; }
  .two-col.reverse > :first-child { order: 0; }
  .eff-two-col { grid-template-columns: 1fr; gap: 48px; }
  .eff-img-badge { left: 12px; bottom: -14px; }
  /* Image-first order on mobile for content-before-image sections */
  .solutions-img-wrap,
  .ws-img-wrap,
  .eff-img-wrap { order: -1; }
  .sol-img-badge { left: 20px; }
  .cov-img-badge { right: 12px; }
  .ws-img-badge { right: 12px; }
  .td-img-badge { left: 12px; }
  .case-grid { grid-template-columns: 1fr; }
  .duo-grid { grid-template-columns: 1fr; }
  .proc-grid { flex-direction: column; }
  .proc-sep { display: none; }
  .proc-benefits { justify-content: flex-start; }
  .proc-benefit { white-space: normal; }
  .coverage-grid { grid-template-columns: 1fr; }
  .lcov-grid { grid-template-columns: 1fr; }
  .test-grid { grid-template-columns: 1fr; }
  .process-benefits { grid-template-columns: repeat(2, 1fr); }
  .why-stats { grid-template-columns: 1fr 1fr; }
  /* Trust strip: 2×2 grid on tablet */
  .trust-grid { flex-wrap: wrap; }
  .trust-item { flex: 1 1 45%; padding: 22px 24px; }
  .trust-sep { display: none; }
}
@media (max-width: 640px) {
  .section { padding: 56px 0; }
  .hero { padding: 64px 0 72px; }
  .icon-cards { grid-template-columns: repeat(2, 1fr); }
  .cs-grid { grid-template-columns: 1fr; }
  .sol-img-badge { left: 12px; bottom: 12px; padding: 12px 16px; }
  .sol-badge-num { font-size: 1.4rem; }
  .ws-services { grid-template-columns: 1fr; }
  .ws-img-badge { right: 12px; top: 12px; }
  .td-services { grid-template-columns: 1fr; }
  .td-img-badge { left: 12px; bottom: 12px; }
  .ww-grid { grid-template-columns: 1fr 1fr; }
  .insights-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .linked-services { grid-template-columns: 1fr; }
  .top-bar { font-size: 0.78rem; }
  .top-bar-inner { justify-content: center; }
  .top-bar-right { display: none; }
  .hero-stats-row .hero-stat-card { min-width: 0; flex: 1; }
  .footer-bottom { justify-content: center; text-align: center; }
  .why-stats { grid-template-columns: 1fr; }
  .process-benefits { grid-template-columns: 1fr; }
  .container { padding: 0 18px; }

  /* -- Trust strip: 2x2 grid on mobile -- */
  .trust-grid { display: grid; grid-template-columns: 1fr 1fr; width: 100%; box-sizing: border-box; }
  .trust-sep { display: none; }
  .trust-item { padding: 16px 12px; gap: 10px; justify-content: flex-start; border: none; box-sizing: border-box; min-width: 0; }
  .trust-icon-wrap { width: 44px; height: 44px; flex-shrink: 0; }
  .trust-icon-wrap svg { width: 26px; height: 26px; }
  .trust-value { white-space: normal; font-size: 0.88rem; }
  .trust-label { white-space: normal; font-size: 0.7rem; }
  .trust-content { min-width: 0; overflow: hidden; }
  /* borders: nth-child counts include hidden separators (1,3,5,7 = trust items) */
  .trust-item:nth-child(1) { border-right: 1px solid rgba(255,255,255,.18); border-bottom: 1px solid rgba(255,255,255,.18); }
  .trust-item:nth-child(3) { border-bottom: 1px solid rgba(255,255,255,.18); }
  .trust-item:nth-child(5) { border-right: 1px solid rgba(255,255,255,.18); }

  /* ── Hero mobile fixes ── */
  .hero-text { flex: 1 1 auto; max-width: 100%; }
  .hero-cta { flex-direction: column; align-items: center; gap: 12px; }
  .hero-cta .btn { width: auto; justify-content: center; text-align: center; }
  .hero-stats-side { flex-direction: column; align-items: center; }
  .hero-stat-float { flex: 1 1 auto; width: 80%; max-width: 320px; }
  .hero-sub { font-size: 0.97rem; max-width: 100%; }
  .hero-bullets li { font-size: 0.92rem; }
  .hero-tagline { font-size: 0.88rem; }
}