@layer base { html, body { margin: 0; padding: 0; } body { overscroll-behavior: none; } main > :first-child { margin-top: 0 !important; } main > :last-child { margin-bottom: 0 !important; } } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: #e7eeff; } ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #34b8fe, #006590); border-radius: 9999px; border: 2px solid #e7eeff; } ::-webkit-scrollbar-thumb:hover { background: #006590; } html { scrollbar-width: thin; scrollbar-color: #006590 #e7eeff; } html { scroll-behavior: smooth; } section[id] { scroll-margin-top: 4.5rem; } @keyframes gradient-pan { to { background-position: 200% center; } } @keyframes blob-drift { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(-26px, 18px) scale(1.07); } 66% { transform: translate(18px, -14px) scale(0.96); } } @keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } } @keyframes hero-in { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } } @keyframes scan { 0% { top: -45%; } 55%, 100% { top: 115%; } } @keyframes route-dot-move { 0% { left: 0%; } 100% { left: 78%; } } @keyframes marquee { to { transform: translateX(-50%); } } @keyframes depot-in { from { opacity: 0; transform: translateY(16px) scale(0.97); } to { opacity: 1; transform: none; } } @keyframes dot-pulse { 0% { box-shadow: 0 0 0 0 rgba(52,184,254,0.55); } 70% { box-shadow: 0 0 0 8px rgba(52,184,254,0); } 100% { box-shadow: 0 0 0 0 rgba(52,184,254,0); } } .gradient-text { background: linear-gradient(90deg, #34b8fe, #88ceff 30%, #b6ebff 55%, #34b8fe); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: gradient-pan 7s linear infinite; } .animate-blob { animation: blob-drift 16s ease-in-out infinite; will-change: transform; } .float-anim { animation: floaty 6.5s ease-in-out infinite; } .js .hero-anim { opacity: 0; animation: hero-in 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards; animation-delay: var(--d, 0ms); } .js .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); } .js .reveal.in-view { opacity: 1; transform: none; } .js .reveal-group > * { opacity: 0; transform: translateY(28px); transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); transition-delay: calc(var(--i, 0) * 70ms); } .js .reveal-group.in-view > * { opacity: 1; transform: none; } .card-fx { position: relative; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1); } .card-fx:hover { transform: translateY(-6px); } .card-fx::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; background: radial-gradient(480px circle at var(--mx, 50%) var(--my, 50%), rgba(52, 184, 254, 0.10), transparent 45%); transition: opacity 0.5s ease; } .card-fx:hover::after { opacity: 1; } a[class*="bg-secondary-container"], a[class*="bg-primary-container"] { position: relative; overflow: hidden; } a[class*="bg-secondary-container"]::after, a[class*="bg-primary-container"]::after { content: ''; position: absolute; top: 0; bottom: 0; left: -80%; width: 50%; background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.35), transparent); transform: skewX(-20deg); transition: left 0.6s ease; pointer-events: none; } a[class*="bg-secondary-container"]:hover::after, a[class*="bg-primary-container"]:hover::after { left: 130%; } .telemetry-scan::before { content: ''; position: absolute; left: 0; right: 0; top: -45%; height: 36%; pointer-events: none; background: linear-gradient(180deg, transparent, rgba(136, 206, 255, 0.09), transparent); animation: scan 5.5s ease-in-out infinite; } .route-progress { background-size: 200% auto; animation: gradient-pan 3s linear infinite; } .route-dot { position: absolute; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 9999px; background: #88ceff; box-shadow: 0 0 10px 2px rgba(136, 206, 255, 0.8); transform: translateX(-50%); animation: route-dot-move 7s ease-in-out infinite alternate; } .marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent); mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent); } .marquee-track { display: flex; width: max-content; animation: marquee 60s linear infinite; } .marquee:hover .marquee-track { animation-play-state: paused; } .depot-pop { animation: depot-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: calc(var(--i, 0) * 45ms); } .stat-count { display: inline-block; font-variant-numeric: tabular-nums; } header.is-scrolled { box-shadow: 0 12px 32px -12px rgba(11, 27, 61, 0.28); } header .header-shell { transition: height 0.3s cubic-bezier(0.16, 1, 0.3, 1); } header.is-scrolled .header-shell { height: 2.75rem !important; } .state-tab-btn { display: inline-flex; align-items: center; padding: 0.5rem 1.1rem; border-radius: 9999px; font-size: 14px; line-height: 20px; font-weight: 600; background: rgba(255,255,255,0.05); color: #cbd5e1; border: 1px solid rgba(255,255,255,0.10); cursor: pointer; transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1); }
.state-tab-btn:hover { background: rgba(255,255,255,0.10); color: #ffffff; transform: translateY(-1px); }
.state-tab-btn.tab-active { background: #34b8fe; color: #062a3e; border-color: transparent; box-shadow: 0 6px 20px rgba(52,184,254,0.35); }
.state-tab-btn .tab-count { margin-left: 0.4rem; font-size: 11px; opacity: 0.65; font-weight: 700; }
.state-tab-btn.tab-active .tab-count { opacity: 0.8; }
.live-dot { animation: dot-pulse 2.2s ease-out infinite; } .state-tab-btn:active { transform: scale(0.95); } #depots-container span.rounded-full { animation: dot-pulse 2.2s ease-out infinite; }
/* DIFOT badge + tooltip */
.difot-chip { position: relative; cursor: pointer; border-radius: 9999px; padding: 0.3rem 0.75rem 0.3rem 0.35rem; margin: -0.3rem -0.75rem -0.3rem -0.35rem; outline: none; transition: background 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.difot-chip:hover, .difot-chip:focus-visible, .difot-chip.tip-open { background: rgba(52, 184, 254, 0.10); box-shadow: 0 0 0 1px rgba(52, 184, 254, 0.35), 0 0 26px rgba(52, 184, 254, 0.18); transform: translateY(-1px); }
.difot-shine { font-variant-numeric: tabular-nums; background: linear-gradient(90deg, #88ceff, #e6f8ff 50%, #88ceff); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: gradient-pan 4s linear infinite; }
.difot-tip { position: absolute; bottom: calc(100% + 12px); left: 50%; width: max-content; max-width: 250px; z-index: 40; padding: 0.55rem 0.8rem; border-radius: 0.75rem; background: rgba(6, 23, 46, 0.92); border: 1px solid rgba(136, 206, 255, 0.45); box-shadow: 0 12px 32px rgba(2, 12, 30, 0.55), 0 0 0 1px rgba(52, 184, 254, 0.12); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #e6f8ff; text-align: left; opacity: 0; pointer-events: none; transform: translate(-50%, 8px) scale(0.94); transform-origin: bottom center; transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1); }
.difot-tip::after { content: ''; position: absolute; top: 100%; left: 50%; margin-left: -6px; border: 6px solid transparent; border-top-color: rgba(136, 206, 255, 0.45); }
.difot-tip strong { display: block; font-size: 12.5px; line-height: 17px; letter-spacing: 0.02em; color: #ffffff; white-space: nowrap; }
.difot-tip em { display: block; font-style: normal; font-size: 10.5px; line-height: 14px; color: #9fd8ff; margin-top: 2px; }
.difot-chip:hover .difot-tip, .difot-chip:focus-visible .difot-tip, .difot-chip.tip-open .difot-tip { opacity: 1; transform: translate(-50%, 0) scale(1); }
/* Card-style chip: no pill padding hack, hover highlights the whole card */
.difot-chip.difot-chip--card { padding: 1rem; margin: 0; border-radius: 0.75rem; cursor: pointer; }
.difot-chip--card:hover, .difot-chip--card:focus-visible, .difot-chip--card.tip-open { background: rgba(52, 184, 254, 0.14); box-shadow: 0 0 0 1px rgba(52, 184, 254, 0.35), 0 0 26px rgba(52, 184, 254, 0.18); transform: translateY(-1px); }
/* Right-anchored tooltip variant (for chips near a container's right edge) */
.difot-tip--end { left: auto; right: 0; transform: translate(0, 8px) scale(0.94); transform-origin: bottom right; }
.difot-tip--end::after { left: auto; right: 20px; margin-left: 0; }
.difot-chip:hover .difot-tip--end, .difot-chip:focus-visible .difot-tip--end, .difot-chip.tip-open .difot-tip--end { opacity: 1; transform: translate(0, 0) scale(1); }
@media (max-width: 640px) {
  .difot-tip { left: 0; right: auto; transform: translate(0, 8px) scale(0.94); transform-origin: bottom left; max-width: calc(100vw - 3rem); }
  .difot-tip::after { left: 26px; margin-left: 0; }
  .difot-tip--end { left: auto; right: 0; transform: translate(0, 8px) scale(0.94); transform-origin: bottom right; }
  .difot-tip--end::after { left: auto; right: 26px; }
  .difot-chip:hover .difot-tip, .difot-chip:focus-visible .difot-tip, .difot-chip.tip-open .difot-tip, .difot-chip:hover .difot-tip--end, .difot-chip:focus-visible .difot-tip--end, .difot-chip.tip-open .difot-tip--end { opacity: 1; transform: translate(0, 0) scale(1); }
}
/* DIFOT performance gauge */
.difot-ring-svg { filter: drop-shadow(0 0 20px rgba(52, 184, 254, 0.25)); }
.difot-ring::before { content: ''; position: absolute; inset: -6%; border-radius: 9999px; background: radial-gradient(circle, rgba(52, 184, 254, 0.16), transparent 65%); pointer-events: none; }
.difot-ring-ticks { transform-origin: 150px 150px; animation: difot-spin 60s linear infinite; }
@keyframes difot-spin { to { transform: rotate(360deg); } }
.difot-ring-progress { transition: stroke-dashoffset 1.8s cubic-bezier(0.16, 1, 0.3, 1) 0.25s; }
/* DIFOT delivery route: refrigerated van driving to a pulsing depot pin */
.difot-route { position: relative; height: 60px; max-width: 520px; margin: 2.25rem auto 0; }
.difot-route-line { position: absolute; left: 0; right: 0; top: 44px; height: 3px; overflow: hidden; border-radius: 9999px; }
.difot-route-line::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: calc(100% + 27px); background-image: repeating-linear-gradient(90deg, rgba(124, 190, 250, 0.55) 0 14px, transparent 14px 27px); animation: road-move 1.6s linear infinite; will-change: transform; }
@keyframes road-move { from { transform: translateX(0); } to { transform: translateX(-27px); } }
.difot-route-carrier { position: absolute; inset: 0; animation: difot-drive 16s ease-in-out infinite; will-change: transform; }
@keyframes difot-drive { 0% { transform: translateX(0); } 40% { transform: translateX(calc(74% + 26px)); } 70% { transform: translateX(calc(74% + 26px)); } 100% { transform: translateX(calc(104% + 74px)); } }
.difot-route-truck { position: absolute; top: 0; left: -88px; width: 84px; }
.difot-route-truck svg { display: block; width: 100%; height: auto; animation: difot-bob 0.75s ease-in-out infinite; filter: drop-shadow(0 6px 14px rgba(52, 184, 254, 0.45)); }
@keyframes difot-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.5px); } }
.difot-wheel { animation: wheel-spin 1.3s linear infinite; transform-box: fill-box; transform-origin: center; }
@keyframes wheel-spin { to { transform: rotate(360deg); } }
.difot-route-pin { position: absolute; top: 22px; left: 84%; width: 18px; height: 18px; }
.difot-route-pin::before { content: ''; position: absolute; inset: 3px; border-radius: 9999px; background: #b6ebff; box-shadow: 0 0 14px 2px rgba(52, 184, 254, 0.6); }
.difot-route-pin::after { content: ''; position: absolute; inset: 0; border-radius: 9999px; border: 1.5px solid rgba(52, 184, 254, 0.55); animation: pin-ping 3.2s cubic-bezier(0, 0, 0.2, 1) infinite; will-change: transform, opacity; }
@keyframes pin-ping { 0% { transform: scale(0.55); opacity: 0.9; } 100% { transform: scale(2.4); opacity: 0; } }
/* Hero frost particles */
.frost-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
/* 3D tilt + glare (telemetry cockpit card) */
.telemetry-tilt { transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 0.2s ease-out; will-change: transform; }
.telemetry-tilt::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 50%), rgba(136, 206, 255, 0.16), transparent 45%); transition: opacity 0.4s ease; }
.telemetry-tilt:hover::after { opacity: 1; }
/* 3D flip proof cards */
.difot-flip { perspective: 900px; cursor: pointer; outline: none; height: 158px; }
.difot-flip-inner { position: relative; height: 100%; transform-style: preserve-3d; transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
.difot-flip:hover .difot-flip-inner, .difot-flip:focus-visible .difot-flip-inner, .difot-flip.flipped .difot-flip-inner { transform: rotateY(180deg); }
.difot-flip-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; padding: 1rem; display: flex; flex-direction: column; gap: 0.25rem; }
.difot-flip-back { transform: rotateY(180deg); }
/* Slow-rotating 3D glass cube */
.difot-cube-wrap { position: absolute; top: 12%; right: 5%; perspective: 700px; opacity: 0.85; pointer-events: none; z-index: 0; animation: floaty 7s ease-in-out infinite; }
.difot-cube { width: 92px; height: 92px; position: relative; transform-style: preserve-3d; animation: cube-spin 18s linear infinite; }
.cube-face { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(136, 206, 255, 0.35); background: rgba(52, 184, 254, 0.06); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); color: #b6ebff; font-weight: 800; font-size: 12px; letter-spacing: 0.06em; box-shadow: inset 0 0 22px rgba(52, 184, 254, 0.12); }
.cf1 { transform: translateZ(46px); }
.cf2 { transform: rotateY(180deg) translateZ(46px); }
.cf3 { transform: rotateY(90deg) translateZ(46px); }
.cf4 { transform: rotateY(-90deg) translateZ(46px); }
.cf5 { transform: rotateX(90deg) translateZ(46px); }
.cf6 { transform: rotateX(-90deg) translateZ(46px); }
@keyframes cube-spin { 0% { transform: rotateX(-18deg) rotateY(0deg); } 100% { transform: rotateX(-18deg) rotateY(360deg); } }
@media (max-width: 1023px) { .difot-cube-wrap { display: none; } }
@media (prefers-reduced-motion: reduce) { .difot-shine { background: none; -webkit-text-fill-color: #b6ebff; } }
/* National coverage map (section #coverage) */
.bc-pin { cursor: pointer; outline: none; transition: opacity .3s ease; }
.bc-pin .pin-glow { opacity: .3; }
.bc-pin .pin-label { opacity: 0; }
.bc-pin .pin-glow, .bc-pin .pin-ring, .bc-pin .pin-core, .bc-pin .pin-label { transition: opacity .25s cubic-bezier(0.16,1,0.3,1), transform .25s cubic-bezier(0.16,1,0.3,1); }
.bc-pin:hover .pin-glow, .bc-pin:focus-visible .pin-glow, .bc-pin.is-active .pin-glow { opacity: .85; }
.bc-pin:hover .pin-label, .bc-pin:focus-visible .pin-label, .bc-pin.is-active .pin-label { opacity: 1; }
.bc-pin .pin-core { transform-box: fill-box; transform-origin: center; }
.bc-pin.is-active .pin-core { transform: scale(1.5); }
.bc-pin.dim { opacity: .22; }
.pin-pulse { transform-box: fill-box; transform-origin: center; animation: map-pulse 2.4s cubic-bezier(0.16, 1, 0.3, 1) infinite; }
@keyframes map-pulse { 0% { transform: scale(0.5); opacity: .8; } 75%, 100% { transform: scale(3); opacity: 0; } }
.bc-route { animation: route-dash 1.6s linear infinite; }
@keyframes route-dash { to { stroke-dashoffset: -20; } }
#bc-map-wrap .map-drop { opacity: 0; transform: translateY(14px); transition: opacity .6s cubic-bezier(0.16,1,0.3,1), transform .6s cubic-bezier(0.16,1,0.3,1); transition-delay: calc(var(--i, 0) * 55ms); }
#bc-map-wrap.in-view .map-drop { opacity: 1; transform: none; }
#bc-tip { transition: opacity .25s ease; }
#bc-tip.show { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .pin-pulse, .bc-route { animation: none !important; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .js .reveal, .js .reveal-group > *, .js .hero-anim { opacity: 1 !important; transform: none !important; animation: none !important; } }

/* ---- Multi-page additions ---- */
/* Frost wipe page transitions (progressive enhancement) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out 200ms ease-in both; }
::view-transition-new(root) { animation: vt-in 260ms cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-10px); filter: blur(6px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(12px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }

/* Thermal descent scroll gauge (desktop only) */
.temp-rail-body { position: relative; width: 10px; height: 190px; border-radius: 9999px; background: rgba(255, 255, 255, 0.75); box-shadow: inset 0 0 0 1px rgba(11, 27, 61, 0.12), 0 4px 14px -4px rgba(11, 27, 61, 0.25); background-image: repeating-linear-gradient(180deg, transparent 0 23px, rgba(11, 27, 61, 0.12) 23px 24px); overflow: visible; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.temp-rail-fill { position: absolute; top: 0; left: 0; right: 0; height: 0%; border-radius: 9999px; background: linear-gradient(180deg, #88ceff, #34b8fe 45%, #006590 80%, #0b1b3d); box-shadow: 0 0 12px rgba(52, 184, 254, 0.45); transition: height 0.15s linear; }
.temp-rail-thumb { position: absolute; left: 50%; top: 0%; transform: translate(-50%, -50%); transition: top 0.15s linear; }
.temp-rail-thumb span { display: block; font-size: 10px; line-height: 14px; font-weight: 800; letter-spacing: 0.02em; color: #0b1b3d; background: rgba(255, 255, 255, 0.96); border: 1px solid rgba(52, 184, 254, 0.45); border-radius: 9999px; padding: 1px 7px; box-shadow: 0 2px 10px rgba(11, 27, 61, 0.3), 0 0 0 3px rgba(52, 184, 254, 0.18); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (min-width: 1536px) { .temp-rail-body { height: 230px; } }
#temp-rail { display: none; }
@media (min-width: 1280px) and (prefers-reduced-motion: no-preference) { #temp-rail { display: flex; } }

/* ---- Header rework ---- */
html { scrollbar-gutter: stable; }
header.is-scrolled .header-shell { height: 3rem !important; }
section[id], #cor { scroll-margin-top: 5rem; }
@keyframes menu-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
#mobile-menu:not(.hidden) { animation: menu-in 0.28s cubic-bezier(0.16, 1, 0.3, 1) both; }

/* ---- Frost-bordered feature cards (home "Why Choose Us") ---- */
.frost-card { position: relative; }
.frost-card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: linear-gradient(140deg, rgba(52, 184, 254, 0.65), rgba(0, 101, 144, 0.22) 32%, rgba(182, 235, 255, 0.95) 55%, rgba(52, 184, 254, 0.4)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; pointer-events: none; opacity: 0.5; transition: opacity 0.35s ease; z-index: 1; }
.frost-card:hover::before, .frost-card:focus-within::before { opacity: 1; }
.frost-card:hover, .frost-card:focus-within { box-shadow: 0 22px 44px -18px rgba(0, 101, 144, 0.32); }
.frost-icon { transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), background 0.35s ease, color 0.35s ease, box-shadow 0.35s ease; }
.frost-card:hover .frost-icon, .frost-card:focus-within .frost-icon { background: linear-gradient(135deg, #34b8fe, #0061ac 70%, #006590); color: #fff; transform: translateY(-3px) rotate(-4deg); box-shadow: 0 12px 24px -8px rgba(52, 184, 254, 0.55); }
.frost-line { height: 2px; width: 34px; border-radius: 2px; background: linear-gradient(90deg, #34b8fe, #b6ebff); transition: width 0.45s cubic-bezier(0.16, 1, 0.3, 1); }
.frost-card:hover .frost-line, .frost-card:focus-within .frost-line { width: 76px; }
.frost-flake { position: absolute; top: 14px; right: 16px; opacity: 0; transform: rotate(-30deg) scale(0.5); transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); pointer-events: none; z-index: 1; }
.frost-flake img { display: block; width: 15px; height: 15px; }
.frost-card:hover .frost-flake, .frost-card:focus-within .frost-flake { opacity: 1; transform: rotate(0deg) scale(1); }

/* Dark "reefer panel" variant (home "Why Choose Us") */
.frost-card--dark { background: radial-gradient(130% 100% at 85% -10%, rgba(52, 184, 254, 0.16), transparent 55%), linear-gradient(155deg, #11285a 0%, #0b1b3d 48%, #081431 100%); box-shadow: 0 16px 36px -18px rgba(7, 16, 38, 0.55); }
.frost-card--dark::before { opacity: 0.7; background: linear-gradient(140deg, rgba(52, 184, 254, 0.75), rgba(0, 101, 144, 0.3) 30%, rgba(182, 235, 255, 0.8) 55%, rgba(52, 184, 254, 0.45)); }
.frost-card--dark:hover::before, .frost-card--dark:focus-within::before { opacity: 1; }
.frost-card--dark:hover, .frost-card--dark:focus-within { box-shadow: 0 24px 52px -18px rgba(2, 12, 30, 0.65), 0 0 34px -6px rgba(52, 184, 254, 0.35); }

/* Icon font hygiene: Material Symbols glyphs advance exactly 1em; constraining the
   box (with font-display: block in the Google Fonts URL) stops raw ligature text
   like "arrow_forward" from flashing and shifting layout while the icon font loads. */
.material-symbols-outlined { display: inline-block; width: 1em; overflow: hidden; vertical-align: middle; }


/* ---- Cold-environment treatments: reefer body, fridge & freezer zones, frost hover ---- */
/* Corrugated reefer-truck/container panel walls with corner rivets (dark navy panels) */
.reefer-body { isolation: isolate; }
.reefer-body::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  border-radius: inherit; pointer-events: none;
  background-image:
    radial-gradient(circle at 16px 16px, rgba(255,255,255,0.22) 2px, transparent 3px),
    radial-gradient(circle at calc(100% - 16px) 16px, rgba(255,255,255,0.22) 2px, transparent 3px),
    radial-gradient(circle at 16px calc(100% - 16px), rgba(255,255,255,0.22) 2px, transparent 3px),
    radial-gradient(circle at calc(100% - 16px) calc(100% - 16px), rgba(255,255,255,0.22) 2px, transparent 3px);
}
/* Chilled compartment: fridge interior — cool top LED strip, glass shelf, light frost */
.fridge-zone {
  position: relative; isolation: isolate;
  background:
    radial-gradient(rgba(255,255,255,0.28) 1px, transparent 1.5px),
    radial-gradient(rgba(255,255,255,0.16) 1px, transparent 1.5px),
    linear-gradient(180deg, rgba(136,206,255,0.20), rgba(11,27,61,0.35) 62%, rgba(2,12,30,0.55));
  background-size: 44px 44px, 27px 27px, 100% 100%;
  background-position: 9px 13px, 21px 4px, 0 0;
  box-shadow:
    inset 0 0 0 1px rgba(136,206,255,0.38),
    inset 0 12px 26px -14px rgba(136,206,255,0.55),
    inset 0 -16px 26px -20px rgba(0,0,0,0.65);
}
.fridge-zone::before { /* interior LED light strip */
  content: ''; position: absolute; top: 7px; left: 22%; right: 22%; height: 2px; z-index: -1;
  border-radius: 9999px; background: linear-gradient(90deg, transparent, rgba(182,235,255,0.9), transparent);
  box-shadow: 0 0 12px 2px rgba(136,206,255,0.55);
}
.fridge-zone::after { /* glass shelf */
  content: ''; position: absolute; left: 10%; right: 10%; bottom: 24%; height: 3px; z-index: -1;
  border-radius: 9999px; background: linear-gradient(90deg, transparent, rgba(136,206,255,0.55), transparent);
  box-shadow: 0 5px 9px -3px rgba(136,206,255,0.45);
}
.fridge-zone .text-secondary-container { text-shadow: 0 0 18px rgba(52,184,254,0.5); }
/* Deep freezer zone: darker interior, heavier frost rim and snow speckle */
.freezer-zone {
  position: relative; isolation: isolate;
  background:
    radial-gradient(rgba(255,255,255,0.4) 1px, transparent 1.6px),
    radial-gradient(rgba(255,255,255,0.22) 1px, transparent 1.6px),
    linear-gradient(180deg, rgba(182,235,255,0.14), rgba(4,16,34,0.5) 58%, rgba(1,8,20,0.8));
  background-size: 38px 38px, 23px 23px, 100% 100%;
  background-position: 5px 9px, 15px 26px, 0 0;
  box-shadow:
    inset 0 0 0 1px rgba(182,235,255,0.5),
    inset 0 14px 30px -14px rgba(182,235,255,0.5),
    inset 0 -18px 30px -20px rgba(0,0,0,0.75);
}
.freezer-zone::before { /* freezer LED strip, colder hue */
  content: ''; position: absolute; top: 7px; left: 22%; right: 22%; height: 2px; z-index: -1;
  border-radius: 9999px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.95), transparent);
  box-shadow: 0 0 14px 3px rgba(182,235,255,0.6);
}
.freezer-zone::after { /* ice shelf: thicker, whiter */
  content: ''; position: absolute; left: 10%; right: 10%; bottom: 24%; height: 4px; z-index: -1;
  border-radius: 9999px; background: linear-gradient(90deg, transparent, rgba(224,245,255,0.8), transparent);
  box-shadow: 0 6px 12px -3px rgba(182,235,255,0.5);
}
.freezer-zone .text-secondary-fixed { text-shadow: 0 0 20px rgba(182,235,255,0.6); }
/* Depot cards: frost creeps over the door on hover */
#depots-container .depot-card { isolation: isolate; }
#depots-container .depot-card::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  border-radius: inherit; pointer-events: none;
  opacity: 0; transition: opacity 0.5s ease;
  background:
    radial-gradient(130% 110% at 50% -30%, rgba(255,255,255,0.16), transparent 55%),
    radial-gradient(rgba(255,255,255,0.2) 1px, transparent 1.5px);
  background-size: 100% 100%, 34px 34px;
  box-shadow:
    inset 0 0 0 1px rgba(182,235,255,0.55),
    inset 0 0 26px rgba(182,235,255,0.16);
}
#depots-container .depot-card:hover::before,
#depots-container .depot-card:focus-within::before { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  #depots-container .depot-card::before { transition: none; }
}


/* ---- Warehouse treatments: pallet racking, pallet edge, loading dock ---- */
/* Pallet-racking interior: uprights + beams fading out below the fold of the card */
.warehouse-rack { position: relative; isolation: isolate; }
.warehouse-rack::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  border-radius: inherit; pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg, rgba(0,101,144,0.07) 0 3px, transparent 3px 42px),
    linear-gradient(180deg, rgba(52,184,254,0.06), transparent 60%);
  -webkit-mask-image: linear-gradient(180deg, black 0%, transparent 64%);
  mask-image: linear-gradient(180deg, black 0%, transparent 64%);
}
/* Pallet edge: soft sheen band along the bottom of the 3PL card */
.pallet-edge { position: relative; isolation: isolate; }
.pallet-edge::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0; height: 10px;
  border-radius: 0 0 1rem 1rem; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(0,101,144,0.16) 30%, rgba(52,184,254,0.22) 60%, transparent);
  box-shadow: inset 0 1px 0 rgba(0,101,144,0.14);
}
/* Loading dock: brand-colour awning stripes across the top of each depot card */
.dock-door::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 7px;
  border-radius: 1rem 1rem 0 0; pointer-events: none;
  background: repeating-linear-gradient(-45deg, rgba(0,101,144,0.50) 0 12px, rgba(52,184,254,0.45) 12px 24px);
}

/* ---- Mobile menu v2: floating frosted sheet ---- */
#mobile-menu { background-image: radial-gradient(130% 70% at 100% 0%, rgba(52, 184, 254, 0.10), transparent 55%), radial-gradient(100% 60% at 0% 100%, rgba(0, 101, 144, 0.06), transparent 55%); }
#mobile-menu::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #34b8fe, #b6ebff 45%, #34b8fe); box-shadow: 0 0 12px rgba(52, 184, 254, 0.5); }
#mobile-menu a { transition: background 0.2s ease; }
#mobile-menu a .material-symbols-outlined { transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1); }
#mobile-menu a .w-9 { transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s ease, box-shadow 0.2s ease; }
#mobile-menu a:hover { background: rgba(231, 238, 255, 0.85); }
#mobile-menu a:hover .material-symbols-outlined:last-child { transform: translateX(3px); }
#mobile-menu a:hover .w-9 { transform: scale(1.07); background: #dee9ff; box-shadow: 0 0 0 1px rgba(52, 184, 254, 0.35); }
#mobile-menu a[aria-current="page"] { background: linear-gradient(90deg, rgba(52, 184, 254, 0.16), rgba(52, 184, 254, 0.02) 75%); box-shadow: inset 3px 0 0 0 #34b8fe; }
#mobile-menu a[aria-current="page"] .w-9 { background: #0b1b3d; box-shadow: 0 2px 10px rgba(11, 27, 61, 0.35); }
#mobile-menu a[aria-current="page"] .w-9 .material-symbols-outlined { color: #34b8fe; }
#mobile-menu:not(.hidden) nav > * { animation: menu-item-in 0.42s cubic-bezier(0.16, 1, 0.3, 1) both; }
#mobile-menu:not(.hidden) nav > *:nth-child(1) { animation-delay: 0s; }
#mobile-menu:not(.hidden) nav > *:nth-child(2) { animation-delay: 0.04s; }
#mobile-menu:not(.hidden) nav > *:nth-child(3) { animation-delay: 0.08s; }
#mobile-menu:not(.hidden) nav > *:nth-child(4) { animation-delay: 0.12s; }
#mobile-menu:not(.hidden) nav > *:nth-child(5) { animation-delay: 0.16s; }
#mobile-menu:not(.hidden) nav > *:nth-child(6) { animation-delay: 0.2s; }
#mobile-menu:not(.hidden) nav > *:nth-child(7) { animation-delay: 0.24s; }
#mobile-menu:not(.hidden) nav > *:nth-child(8) { animation-delay: 0.28s; }
#mobile-menu:not(.hidden) #menu-temp-bar-row { animation: menu-item-in 0.42s cubic-bezier(0.16, 1, 0.3, 1) 0.32s both; }
#mobile-menu:not(.hidden) #menu-cta-row { animation: menu-item-in 0.42s cubic-bezier(0.16, 1, 0.3, 1) 0.36s both; }
#mobile-menu:not(.hidden) #menu-footnote { animation: menu-item-in 0.42s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both; }
@keyframes menu-item-in { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }

/* ---- Thermometer as a scroll control ---- */
.temp-rail { user-select: none; -webkit-user-select: none; }
.temp-rail-body { cursor: grab; touch-action: none; }
.temp-rail-body::after { content: ''; position: absolute; inset: -8px -12px; }
.temp-rail.dragging .temp-rail-body { cursor: grabbing; }
.temp-rail-thumb span { transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease; }
.temp-rail:hover .temp-rail-thumb span { box-shadow: 0 2px 10px rgba(11, 27, 61, 0.3), 0 0 0 4px rgba(52, 184, 254, 0.35); }
.temp-rail.dragging .temp-rail-thumb span { transform: scale(1.12); box-shadow: 0 4px 16px rgba(11, 27, 61, 0.4), 0 0 0 5px rgba(52, 184, 254, 0.3); }
.temp-rail:focus-visible { outline: none; }
.temp-rail:focus-visible .temp-rail-body { box-shadow: inset 0 0 0 1px rgba(11, 27, 61, 0.12), 0 4px 14px -4px rgba(11, 27, 61, 0.25), 0 0 0 4px rgba(52, 184, 254, 0.3); }
.temp-rail:focus-visible .temp-rail-thumb span { box-shadow: 0 2px 10px rgba(11, 27, 61, 0.3), 0 0 0 4px rgba(52, 184, 254, 0.45); }


/* ---- Reefer truck v2: bigger, detailed, vapor trail ---- */
.difot-route { height: 92px; max-width: 640px; margin: 2.5rem auto 0; }
.difot-route-line { top: 76px; height: 4px; }
@keyframes difot-drive {
  0% { transform: translateX(0); }
  40% { transform: translateX(calc(84% - 2px)); }
  70% { transform: translateX(calc(84% - 2px)); }
  100% { transform: translateX(calc(100% + 124px)); }
}
.difot-route-truck { top: 25px; left: -136px; width: 128px; }
.difot-route-truck svg { filter: drop-shadow(0 10px 18px rgba(2, 12, 30, 0.4)) drop-shadow(0 0 12px rgba(52, 184, 254, 0.35)); }
.difot-route-pin { top: 67px; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; }
.difot-route-pin::before { inset: 0; background: linear-gradient(135deg, #5cc4ff, #0072d4); }
.difot-route-pin .material-symbols-outlined { position: relative; z-index: 1; font-size: 13px; color: #f2f9ff; }
.difot-vapor { position: absolute; border-radius: 9999px; pointer-events: none; background: radial-gradient(circle, rgba(214, 240, 255, 0.7), rgba(214, 240, 255, 0) 70%); animation: difot-vapor 1.7s ease-out infinite; }
@keyframes difot-vapor {
  0% { opacity: 0; transform: translate(0, 0) scale(0.5); }
  25% { opacity: 0.75; }
  100% { opacity: 0; transform: translate(-30px, -12px) scale(1.9); }
}
@media (max-width: 640px) {
  .difot-route-truck { width: 96px; left: -104px; top: 38px; }
}


/* ---- Reefer truck v3: bigger, punchier ---- */
.difot-route { height: 96px; max-width: 560px; margin: 2.5rem auto 0; }
.difot-route-line { top: 78px; height: 4px; }
.difot-route-truck { top: 13px; left: -168px; width: 160px; }
.difot-route-pin { top: 69px; }
.difot-vapor { opacity: 0; background: radial-gradient(circle, rgba(224, 245, 255, 0.85), rgba(224, 245, 255, 0) 70%); }
@keyframes difot-vapor {
  0% { opacity: 0; transform: translate(0, 0) scale(0.5); }
  25% { opacity: 0.9; }
  100% { opacity: 0; transform: translate(-34px, -14px) scale(2); }
}
@media (max-width: 640px) {
  .difot-route-truck { width: 112px; left: -120px; top: 32px; }
}


/* ---- Warehouse pin v2: bigger building, roller door opens on arrival (16s cycle, synced with difot-drive) ---- */
.difot-route-pin { top: 41px; width: 38px; height: 39px; display: block; }
.difot-route-pin::before { border-radius: 4px 4px 2px 2px; background: linear-gradient(180deg, #16406b, #0a2340); box-shadow: 0 0 16px 2px rgba(52, 184, 254, 0.45), inset 0 1px 0 rgba(136, 206, 255, 0.35); }
.pin-roof { position: absolute; top: -3px; left: -3px; right: -3px; height: 5px; border-radius: 3px; background: linear-gradient(90deg, #5cc4ff, #34b8fe); box-shadow: 0 0 10px rgba(52, 184, 254, 0.55); }
.pin-interior { position: absolute; left: 5px; right: 5px; top: 6px; bottom: 2px; border-radius: 2px; background: radial-gradient(circle at 50% 78%, rgba(214, 242, 255, 0.95), rgba(52, 184, 254, 0.4) 55%, rgba(52, 184, 254, 0.08) 80%); opacity: 0; animation: warehouse-glow 16s linear infinite; }
.pin-door { position: absolute; left: 5px; right: 5px; bottom: 2px; height: 23px; border-radius: 2px; background: repeating-linear-gradient(180deg, #7fd0ff 0 3px, #2b8fd6 3px 4.5px); box-shadow: inset 0 0 0 1px rgba(6, 34, 56, 0.45); transform-origin: 50% 100%; animation: warehouse-door 16s linear infinite; }
.pin-spill { position: absolute; top: 38px; left: 50%; width: 78px; height: 20px; margin-left: -39px; border-radius: 9999px; background: radial-gradient(ellipse at top, rgba(136, 206, 255, 0.45), transparent 70%); opacity: 0; animation: warehouse-spill 16s linear infinite; pointer-events: none; }
@keyframes warehouse-door {
  0%, 40% { transform: translateY(0) scaleY(1); }
  44%, 66% { transform: translateY(-15px) scaleY(0.12); }
  70%, 100% { transform: translateY(0) scaleY(1); }
}
@keyframes warehouse-glow {
  0%, 40% { opacity: 0; }
  44%, 52% { opacity: 1; }
  56% { opacity: 0.5; }
  60%, 66% { opacity: 1; }
  70%, 100% { opacity: 0; }
}
@keyframes warehouse-spill {
  0%, 40% { opacity: 0; }
  44%, 66% { opacity: 0.85; }
  70%, 100% { opacity: 0; }
}


/* ---- Hub & spoke network topology ---- */
.hub-line { position: absolute; left: 18px; top: -14px; bottom: 10px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, currentColor, transparent 90%); opacity: 0.45; }
.hub-line::after { content: ''; position: absolute; left: -1.5px; top: 0; width: 5px; height: 12px; border-radius: 3px; background: currentColor; filter: blur(1px); opacity: 0; animation: hub-flow 2.6s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
@keyframes hub-flow { 0% { top: -6%; opacity: 0; } 15% { opacity: 0.9; } 85% { opacity: 0.9; } 100% { top: 94%; opacity: 0; } }
.hub-child { opacity: 0; }
.reveal-group.in-view .hub-child { animation: depot-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: calc(var(--ci, 0) * 55ms + 150ms); }