/* Shipping Platform — mature public design system */
:root {
    --primary: #0b2239;
    --primary-2: #102f4c;
    --secondary: #15566d;
    --accent: #e86f2d;
    --accent-dark: #c6531c;
    --ink: #13293c;
    --muted: #647785;
    --soft: #f3f6f8;
    --soft-blue: #eaf1f4;
    --surface: #ffffff;
    --line: #dbe4e9;
    --line-strong: #c9d5dc;
    --success: #16734b;
    --warning: #ad6408;
    --danger: #b53636;
    --shadow-sm: 0 8px 24px rgba(11, 34, 57, .08);
    --shadow: 0 22px 60px rgba(11, 34, 57, .12);
    --radius-sm: 12px;
    --radius: 20px;
    --radius-lg: 30px;
    --shell: min(1180px, calc(100% - 48px));
    --font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    min-width: 320px;
    color: var(--ink);
    background: var(--surface);
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}
body.nav-open { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
svg { flex: 0 0 auto; }
.shell { width: var(--shell); margin-inline: auto; }
.section { padding: 104px 0; }
main { min-height: 55vh; }

h1, h2, h3, h4, p { margin-top: 0; }
h1, h2, h3, h4 { color: var(--primary); line-height: 1.14; letter-spacing: -.025em; }
h1 { font-size: clamp(2.75rem, 5vw, 4.8rem); }
h2 { font-size: clamp(2rem, 3.5vw, 3.15rem); }
h3 { font-size: 1.25rem; }
p { color: var(--muted); }

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--secondary);
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .16em;
    line-height: 1.2;
}
.eyebrow::before { content: ""; width: 30px; height: 2px; background: var(--accent); border-radius: 2px; }
.eyebrow.light { color: #c9d9e2; }

.button {
    min-height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 20px;
    border: 1px solid transparent;
    border-radius: 12px;
    font-size: .94rem;
    font-weight: 750;
    transition: transform .22s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease;
}
.button:hover { transform: translateY(-2px); }
.button.primary { color: #fff; background: var(--accent); box-shadow: 0 12px 26px rgba(232,111,45,.24); }
.button.primary:hover { background: var(--accent-dark); box-shadow: 0 16px 34px rgba(232,111,45,.3); }
.button.secondary { color: #fff; background: var(--primary); box-shadow: var(--shadow-sm); }
.button.ghost { color: var(--primary); background: #fff; border-color: var(--line-strong); }
.button.light { color: var(--primary); background: #fff; }
.button.outline-light { color: #fff; border-color: rgba(255,255,255,.34); background: rgba(255,255,255,.04); }

/* Loading */
.preloader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    background: #071a2b;
    color: #fff;
    transition: opacity .45s ease, visibility .45s ease;
    animation: preloaderFailsafe .01s 2.4s forwards;
}
.preloader.hide { opacity: 0; visibility: hidden; pointer-events: none; }
.preloader-core { display: grid; justify-items: center; text-align: center; padding: 30px; }
.preloader-mark { width: 76px; height: 76px; display: grid; place-items: center; border-radius: 22px; background: #fff; box-shadow: 0 20px 50px rgba(0,0,0,.28); }
.preloader-mark img { width: 56px; height: 56px; object-fit: contain; }
.preloader-core strong { margin-top: 18px; font-size: 1.05rem; }
.preloader-core small { margin-top: 4px; color: #9db4c4; }
.preloader-route { display: flex; align-items: center; margin-top: 20px; }
.preloader-route span { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 6px rgba(232,111,45,.13); }
.preloader-route i { width: 48px; height: 2px; background: linear-gradient(90deg, var(--accent), #4e879c); position: relative; overflow: hidden; }
.preloader-route i::after { content: ""; position: absolute; inset: 0; width: 40%; background: #fff; animation: routeLoader 1.3s infinite ease-in-out; }
@keyframes routeLoader { from { transform: translateX(-120%); } to { transform: translateX(320%); } }
@keyframes preloaderFailsafe { to { opacity: 0; visibility: hidden; pointer-events: none; } }

/* Header */
.utility-bar { color: #d5e2e9; background: #071a2b; font-size: .79rem; }
.utility-inner { min-height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.utility-trust, .utility-contact { display: flex; align-items: center; gap: 24px; }
.utility-bar span, .utility-bar a { display: inline-flex; align-items: center; gap: 7px; }
.utility-bar a:hover { color: #fff; }
.site-header { position: sticky; top: 0; z-index: 800; background: rgba(255,255,255,.96); border-bottom: 1px solid rgba(219,228,233,.9); backdrop-filter: blur(18px); transition: box-shadow .25s ease; }
.site-header.scrolled { box-shadow: 0 12px 34px rgba(11,34,57,.09); }
.nav-shell { min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.brand { min-width: 0; display: inline-flex; align-items: center; gap: 13px; }
.brand-mark { width: 52px; height: 52px; display: grid; place-items: center; padding: 5px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: var(--shadow-sm); }
.brand-mark img { width: 100%; height: 100%; object-fit: contain; }
.brand-copy { min-width: 0; display: flex; flex-direction: column; }
.brand-copy b { color: var(--primary); font-size: .98rem; white-space: nowrap; }
.brand-copy small { color: var(--muted); font-size: .77rem; white-space: nowrap; }
.main-nav { display: flex; align-items: center; gap: 4px; }
.main-nav > a { position: relative; padding: 11px 13px; color: #435966; font-size: .91rem; font-weight: 700; border-radius: 10px; }
.main-nav > a:not(.nav-track):hover, .main-nav > a.active { color: var(--primary); background: var(--soft); }
.main-nav > a.active::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 5px; height: 2px; border-radius: 2px; background: var(--accent); }
.main-nav .nav-track { margin-left: 8px; padding: 12px 17px; color: #fff; background: var(--primary); box-shadow: var(--shadow-sm); }
.nav-toggle { display: none; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 11px; color: var(--primary); background: #fff; }

.flash { width: min(920px, calc(100% - 32px)); margin: 20px auto 0; padding: 14px 18px; border-radius: 12px; border: 1px solid; font-weight: 650; }
.flash.success { color: #12603f; background: #eefaf4; border-color: #bfe5d2; }
.flash.error { color: #8e2d2d; background: #fff2f2; border-color: #efc5c5; }

/* Home hero */
.home-hero { position: relative; overflow: hidden; padding: 88px 0 76px; background: linear-gradient(135deg, #f8fafb 0%, #eef4f6 58%, #f8fafb 100%); }
.home-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .45; background-image: linear-gradient(rgba(15,57,79,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(15,57,79,.05) 1px, transparent 1px); background-size: 54px 54px; mask-image: linear-gradient(90deg, #000, transparent 72%); }
.home-hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(440px, .98fr); align-items: center; gap: 66px; }
.hero-copy h1 { max-width: 760px; margin: 20px 0 24px; }
.hero-copy > p { max-width: 660px; margin-bottom: 30px; font-size: 1.08rem; line-height: 1.75; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-proof { margin-top: 34px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.hero-proof span { min-height: 74px; display: flex; align-items: center; gap: 10px; padding: 13px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.72); color: var(--secondary); }
.hero-proof b { color: var(--ink); font-size: .82rem; line-height: 1.35; }
.hero-control-board { position: relative; min-height: 590px; overflow: hidden; border-radius: 28px; background: var(--primary); box-shadow: 0 34px 80px rgba(11,34,57,.24); }
.hero-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-image-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,20,33,.12) 0%, rgba(5,20,33,.2) 33%, rgba(5,20,33,.92) 100%); }
.live-badge { position: absolute; top: 20px; left: 20px; display: flex; align-items: center; gap: 8px; padding: 9px 12px; color: #fff; background: rgba(6,24,39,.72); border: 1px solid rgba(255,255,255,.22); border-radius: 999px; backdrop-filter: blur(12px); font-size: .72rem; font-weight: 800; letter-spacing: .1em; }
.live-badge i { width: 8px; height: 8px; border-radius: 50%; background: #48d597; animation: pulseDot 2s infinite; }
.tracking-console { position: absolute; left: 22px; right: 22px; bottom: 102px; padding: 24px; border-radius: 20px; background: rgba(255,255,255,.96); box-shadow: 0 24px 55px rgba(0,0,0,.18); backdrop-filter: blur(14px); }
.tracking-console > span { color: var(--secondary); font-size: .72rem; font-weight: 850; letter-spacing: .14em; }
.tracking-console h2 { margin: 5px 0 16px; font-size: 1.48rem; }
.tracking-console form > div { display: flex; align-items: center; padding-left: 14px; border: 1px solid var(--line-strong); border-radius: 12px; background: #fff; }
.tracking-console input { min-width: 0; flex: 1; height: 50px; border: 0; outline: 0; padding: 0 12px; color: var(--ink); background: transparent; }
.tracking-console button { align-self: stretch; border: 0; padding: 0 20px; border-radius: 10px; color: #fff; background: var(--accent); font-weight: 800; }
.tracking-console small { display: block; margin-top: 10px; color: var(--muted); }
.hero-route-mini { position: absolute; left: 24px; right: 24px; bottom: 22px; display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 10px; color: #fff; }
.hero-route-mini div { min-width: 0; }
.hero-route-mini span { display: block; color: #95b1c1; font-size: .66rem; font-weight: 850; letter-spacing: .13em; }
.hero-route-mini b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .82rem; }
.hero-route-mini i { color: var(--accent); }

/* Metrics */
.performance-strip { position: relative; z-index: 2; background: #fff; border-bottom: 1px solid var(--line); }
.performance-grid { display: grid; grid-template-columns: repeat(5, 1fr); }
.counter-card { min-height: 122px; display: flex; align-items: center; gap: 14px; padding: 24px 20px; border-right: 1px solid var(--line); }
.counter-card:last-child { border-right: 0; }
.counter-card > svg { color: var(--secondary); }
.counter-card div { display: flex; flex-direction: column; }
.counter-card b { color: var(--primary); font-size: 1.42rem; line-height: 1.15; }
.counter-card span { color: var(--muted); font-size: .78rem; }

/* Shared sections */
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 50px; margin-bottom: 42px; }
.section-heading > div { max-width: 720px; }
.section-heading h2 { margin: 12px 0 0; }
.section-heading > p { max-width: 450px; margin: 0; }
.section-heading.centered { display: block; max-width: 800px; margin: 0 auto 48px; text-align: center; }
.section-heading.centered .eyebrow { justify-content: center; }
.section-heading.centered p { max-width: 690px; margin: 14px auto 0; }

.service-showcase { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.service-panel { position: relative; overflow: hidden; padding-bottom: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-sm); transition: transform .25s ease, box-shadow .25s ease; }
.service-panel:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.service-panel > img { width: 100%; height: 230px; object-fit: cover; }
.service-panel .service-icon { width: 54px; height: 54px; display: grid; place-items: center; margin: -28px 24px 18px; position: relative; border: 5px solid #fff; border-radius: 15px; color: #fff; background: var(--primary); }
.service-panel > span, .service-matrix-body > span { display: block; margin: 0 24px 8px; color: var(--secondary); font-size: .72rem; font-weight: 850; letter-spacing: .12em; }
.service-panel h3, .service-panel p, .service-panel ul, .service-panel > a { margin-left: 24px; margin-right: 24px; }
.service-panel h3 { margin-bottom: 10px; font-size: 1.38rem; }
.service-panel p { margin-bottom: 15px; }
.service-panel ul { padding-left: 18px; color: #4c626f; }
.service-panel li { margin: 5px 0; }
.service-panel > a { display: inline-flex; align-items: center; gap: 7px; margin-top: 7px; color: var(--accent-dark); font-weight: 800; }

.operations-section { color: #fff; background: #0a2237; }
.operations-grid { display: grid; grid-template-columns: .92fr 1.08fr; align-items: center; gap: 66px; }
.operations-copy h2 { color: #fff; margin: 14px 0 18px; }
.operations-copy > p { color: #afc3cf; font-size: 1.02rem; }
.operation-feature-list { display: grid; gap: 12px; margin: 30px 0; }
.operation-feature-list article { display: grid; grid-template-columns: 42px 1fr; gap: 13px; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.operation-feature-list article > svg { color: var(--accent); }
.operation-feature-list b { display: block; color: #fff; }
.operation-feature-list span { display: block; color: #9db3c0; font-size: .88rem; }
.movement-board { overflow: hidden; border: 1px solid rgba(255,255,255,.13); border-radius: 24px; background: #102f49; box-shadow: 0 30px 70px rgba(0,0,0,.25); }
.board-top { min-height: 60px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; border-bottom: 1px solid rgba(255,255,255,.11); color: #c8d8e1; font-size: .78rem; font-weight: 800; letter-spacing: .08em; }
.board-top span { display: flex; align-items: center; gap: 8px; }
.board-top i { width: 8px; height: 8px; border-radius: 50%; background: #4bd69c; }
.movement-map { position: relative; height: 390px; overflow: hidden; background: radial-gradient(circle at 50% 40%, rgba(55,121,145,.34), transparent 42%), linear-gradient(150deg, #0f2b43, #081e31); }
.movement-map::before { content: ""; position: absolute; inset: 0; opacity: .26; background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px); background-size: 42px 42px; }
.movement-map svg { position: absolute; inset: 30px; width: calc(100% - 60px); height: calc(100% - 60px); overflow: visible; }
.route-path, .route-flow { fill: none; stroke-width: 4; stroke-linecap: round; }
.route-path { stroke: rgba(255,255,255,.18); }
.route-flow { stroke: var(--accent); stroke-dasharray: 12 10; animation: routeFlow 8s linear infinite; }
.movement-point { position: absolute; z-index: 3; display: flex; flex-direction: column; min-width: 120px; padding: 12px 13px; border: 1px solid rgba(255,255,255,.14); border-radius: 13px; background: rgba(4,18,30,.75); backdrop-filter: blur(8px); }
.movement-point i { position: absolute; top: -8px; left: 13px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 6px rgba(232,111,45,.16); }
.movement-point span { color: #8ca8b8; font-size: .65rem; font-weight: 850; letter-spacing: .13em; }
.movement-point b { color: #fff; font-size: .82rem; }
.movement-point.from { left: 7%; bottom: 13%; }
.movement-point.current { left: 39%; top: 36%; }
.movement-point.to { right: 6%; top: 14%; }
.movement-vehicle { position: absolute; z-index: 4; left: 15%; bottom: 22%; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--accent); box-shadow: 0 0 0 8px rgba(232,111,45,.12); animation: vehicleFloat 6.5s ease-in-out infinite; }
.board-stats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(255,255,255,.1); }
.board-stats article { padding: 18px; border-right: 1px solid rgba(255,255,255,.1); }
.board-stats article:last-child { border-right: 0; }
.board-stats small { display: block; color: #92aab8; }
.board-stats b { color: #fff; font-size: 1.42rem; }

.process-section { background: var(--soft); }
.process-flow { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.process-flow::before { content: ""; position: absolute; top: 29px; left: 9%; right: 9%; height: 2px; background: var(--line-strong); }
.process-flow article { position: relative; text-align: center; }
.process-flow article > span { position: absolute; top: 0; right: calc(50% - 34px); color: var(--secondary); font-size: .7rem; font-weight: 850; }
.process-flow article > div { position: relative; z-index: 1; width: 60px; height: 60px; display: grid; place-items: center; margin: 0 auto 18px; border: 8px solid var(--soft); border-radius: 50%; color: #fff; background: var(--primary); box-shadow: 0 0 0 1px var(--line); }
.process-flow h3 { margin-bottom: 8px; }
.process-flow p { font-size: .9rem; }

.customer-trust { background: #fff; }
.testimonial-layout { display: grid; grid-template-columns: 320px 1fr; gap: 22px; }
.rating-panel { padding: 30px; border-radius: var(--radius); color: #fff; background: var(--primary); box-shadow: var(--shadow); }
.rating-score { display: flex; align-items: end; gap: 6px; }
.rating-score b { color: #fff; font-size: 3.8rem; line-height: 1; }
.rating-score span { color: #acc0cc; }
.stars { margin: 12px 0 18px; color: #ffc35b; letter-spacing: .12em; }
.rating-panel h3 { color: #fff; }
.rating-panel p { color: #acc0cc; }
.rating-bars span { display: block; height: 7px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.13); }
.rating-bars i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.rating-bars small { color: #c7d6de; }
.testimonials { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.testimonials article { position: relative; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-sm); }
.testimonials article:last-child:nth-child(odd) { grid-column: 1 / -1; }
.quote-mark { position: absolute; top: 14px; right: 22px; color: #dce7ec; font: 700 4.2rem Georgia, serif; line-height: 1; }
.testimonials article > p { position: relative; min-height: 92px; padding-right: 26px; color: #405662; }
.testimonials footer { display: flex; align-items: end; justify-content: space-between; gap: 14px; padding-top: 16px; border-top: 1px solid var(--line); }
.testimonials footer span { display: flex; flex-direction: column; }
.testimonials footer b { color: var(--primary); }
.testimonials footer small { color: var(--muted); }
.testimonials footer em { color: var(--success); font-size: .66rem; font-style: normal; font-weight: 850; letter-spacing: .1em; }

.final-cta { padding-top: 0; }
.final-cta-card { display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: 44px; overflow: hidden; position: relative; border-radius: 24px; color: #fff; background: linear-gradient(135deg, var(--secondary), var(--primary)); box-shadow: var(--shadow); }
.final-cta-card::after { content: ""; position: absolute; width: 260px; height: 260px; right: -80px; top: -100px; border: 34px solid rgba(255,255,255,.06); border-radius: 50%; }
.final-cta-card h2 { max-width: 790px; margin: 10px 0 0; color: #fff; font-size: clamp(1.7rem, 3vw, 2.5rem); }
.final-cta-card .button { position: relative; z-index: 1; flex: 0 0 auto; }

/* Inner pages */
.inner-hero { position: relative; overflow: hidden; padding: 84px 0; background: linear-gradient(135deg, #f6f9fa, #eaf1f4); }
.inner-hero.compact { padding: 68px 0; }
.inner-hero::after { content: ""; position: absolute; width: 520px; height: 520px; right: -250px; top: -260px; border: 70px solid rgba(21,86,109,.06); border-radius: 50%; }
.inner-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr .86fr; align-items: center; gap: 58px; }
.inner-hero h1 { margin: 16px 0 20px; font-size: clamp(2.6rem, 5vw, 4.25rem); }
.inner-hero p { max-width: 670px; font-size: 1.05rem; }
.inner-hero-visual { position: relative; min-height: 430px; overflow: hidden; border-radius: 24px; box-shadow: var(--shadow); }
.inner-hero-visual img { width: 100%; height: 100%; min-height: 430px; object-fit: cover; }
.inner-hero-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(5,22,35,.76)); }
.visual-label { position: absolute; z-index: 2; left: 20px; right: 20px; bottom: 20px; padding: 17px 19px; border: 1px solid rgba(255,255,255,.18); border-radius: 14px; color: #fff; background: rgba(5,25,40,.66); backdrop-filter: blur(10px); }
.visual-label span { display: block; color: #b8ced9; font-size: .68rem; font-weight: 850; letter-spacing: .13em; }
.visual-label b { display: block; font-size: 1.02rem; }

.service-matrix { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.service-matrix-card { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-sm); transition: transform .25s ease, box-shadow .25s ease; }
.service-matrix-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.service-matrix-card > img { width: 100%; height: 190px; object-fit: cover; }
.service-matrix-body { padding: 0 24px 25px; }
.service-matrix-icon { width: 52px; height: 52px; display: grid; place-items: center; margin: -26px 0 17px; position: relative; border: 5px solid #fff; border-radius: 14px; color: #fff; background: var(--primary); }
.service-matrix-body > span { margin: 0 0 7px; }
.service-matrix-body h3 { margin-bottom: 9px; font-size: 1.35rem; }
.service-matrix-body p { min-height: 78px; }
.service-matrix-body a { display: inline-flex; align-items: center; gap: 7px; color: var(--accent-dark); font-weight: 800; }

.decision-section { color: #fff; background: #0a2237; }
.decision-grid { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 68px; }
.decision-grid h2 { margin: 14px 0 18px; color: #fff; }
.decision-grid p { color: #acc0cc; }
.decision-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 26px; }
.decision-list span { display: flex; align-items: center; gap: 10px; padding: 13px; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; color: #d8e5eb; background: rgba(255,255,255,.04); }
.decision-list b { color: var(--accent); }
.decision-console { overflow: hidden; border: 1px solid rgba(255,255,255,.14); border-radius: 22px; background: #102f49; box-shadow: 0 28px 70px rgba(0,0,0,.28); }
.console-head { min-height: 56px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; border-bottom: 1px solid rgba(255,255,255,.1); color: #c7d7df; font-size: .74rem; font-weight: 850; letter-spacing: .12em; }
.console-head i { width: 9px; height: 9px; border-radius: 50%; background: #4bd69c; box-shadow: 0 0 0 6px rgba(75,214,156,.12); }
.console-route { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 13px; padding: 30px 22px; }
.console-route article { min-height: 100px; display: flex; flex-direction: column; justify-content: center; padding: 14px; border: 1px solid rgba(255,255,255,.11); border-radius: 13px; background: rgba(255,255,255,.04); }
.console-route small { color: #88a6b6; font-size: .66rem; font-weight: 850; letter-spacing: .12em; }
.console-route b { color: #fff; font-size: .86rem; }
.console-route > svg { color: var(--accent); }
.console-options { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(255,255,255,.1); }
.console-options span { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 17px; border-right: 1px solid rgba(255,255,255,.1); color: #d4e1e7; }
.console-options span:last-child { border-right: 0; }
.console-options svg { color: var(--accent); }

.split-story { display: grid; grid-template-columns: .95fr 1.05fr; align-items: stretch; gap: 34px; }
.story-card { padding: 42px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-sm); }
.story-card h2 { margin: 14px 0 18px; }
.story-points { display: grid; gap: 5px; margin-top: 24px; }
.story-points article { display: grid; grid-template-columns: 42px 1fr; gap: 12px; padding: 15px 0; border-top: 1px solid var(--line); }
.story-points article > svg { color: var(--secondary); }
.story-points span { display: flex; flex-direction: column; }
.story-points b { color: var(--primary); }
.story-points small { color: var(--muted); }
.story-image { position: relative; min-height: 590px; overflow: hidden; border-radius: var(--radius); box-shadow: var(--shadow); }
.story-image > img { width: 100%; height: 100%; object-fit: cover; }
.story-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(5,22,35,.88)); }
.story-meter { position: absolute; z-index: 2; left: 24px; right: 24px; bottom: 24px; padding: 20px; border: 1px solid rgba(255,255,255,.18); border-radius: 14px; color: #fff; background: rgba(6,27,44,.68); backdrop-filter: blur(10px); }
.story-meter span, .story-meter small { display: block; color: #b6cbd6; }
.story-meter span { font-size: .68rem; font-weight: 850; letter-spacing: .13em; }
.story-meter b { display: block; margin: 5px 0; font-size: 1.06rem; }
.values-section { background: var(--soft); }
.values-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.values-grid article { padding: 26px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-sm); }
.values-grid svg { color: var(--accent); }
.values-grid h3 { margin: 18px 0 8px; }
.values-grid p { margin-bottom: 0; font-size: .92rem; }

/* Contact */
.contact-quick { display: grid; gap: 12px; }
.contact-quick article { display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: 13px; padding: 17px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.84); box-shadow: var(--shadow-sm); }
.contact-quick article > svg { color: var(--accent); }
.contact-quick span { display: flex; flex-direction: column; min-width: 0; }
.contact-quick small { color: var(--secondary); font-size: .66rem; font-weight: 850; letter-spacing: .12em; }
.contact-quick a { overflow-wrap: anywhere; color: var(--primary); font-weight: 750; }
.contact-section { background: #fff; }
.contact-layout { display: grid; grid-template-columns: .78fr 1.22fr; align-items: start; gap: 28px; }
.contact-guidance { overflow: hidden; position: sticky; top: 110px; border-radius: var(--radius); background: var(--primary); box-shadow: var(--shadow); }
.contact-guidance > .eyebrow, .contact-guidance > h2, .contact-guidance > .guidance-steps { margin-left: 28px; margin-right: 28px; }
.contact-guidance > .eyebrow { margin-top: 30px; color: #b8ced9; }
.contact-guidance > h2 { margin-top: 13px; color: #fff; font-size: 2rem; }
.guidance-steps { display: grid; gap: 5px; margin-bottom: 28px; }
.guidance-steps article { display: flex; gap: 13px; padding: 14px 0; border-top: 1px solid rgba(255,255,255,.1); }
.guidance-steps article > b { color: var(--accent); }
.guidance-steps span { display: flex; flex-direction: column; }
.guidance-steps strong { color: #fff; }
.guidance-steps small { color: #9eb5c2; }
.contact-guidance > img { width: 100%; height: 280px; object-fit: cover; }
.quote-form { padding: 34px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-sm); }
.form-heading { padding-bottom: 22px; margin-bottom: 24px; border-bottom: 1px solid var(--line); }
.form-heading > span { color: var(--secondary); font-size: .72rem; font-weight: 850; letter-spacing: .13em; }
.form-heading h2 { margin: 7px 0 7px; font-size: 2rem; }
.form-heading p { margin: 0; }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.form-grid .full { grid-column: 1 / -1; }
.form-grid label { display: grid; gap: 7px; color: #324b5b; font-size: .86rem; font-weight: 750; }
.form-grid input, .form-grid select, .form-grid textarea { width: 100%; border: 1px solid var(--line-strong); border-radius: 11px; outline: 0; color: var(--ink); background: #fff; transition: border-color .2s ease, box-shadow .2s ease; }
.form-grid input, .form-grid select { height: 49px; padding: 0 13px; }
.form-grid textarea { min-height: 150px; padding: 12px 13px; resize: vertical; }
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus { border-color: var(--secondary); box-shadow: 0 0 0 4px rgba(21,86,109,.1); }

/* Tracking lookup */
.tracking-search-page { min-height: 680px; display: grid; align-items: center; padding: 90px 0; background: radial-gradient(circle at 15% 20%, rgba(21,86,109,.12), transparent 32%), linear-gradient(135deg, #f7fafb, #edf3f6); }
.tracking-search-layout { display: grid; grid-template-columns: 1fr .84fr; align-items: center; gap: 70px; }
.tracking-search-copy h1 { margin: 17px 0 22px; }
.tracking-search-copy > p { max-width: 650px; font-size: 1.06rem; }
.tracking-benefits { display: grid; gap: 10px; margin-top: 30px; }
.tracking-benefits article { display: grid; grid-template-columns: 44px 1fr; gap: 13px; padding: 13px 0; border-top: 1px solid var(--line-strong); }
.tracking-benefits svg { color: var(--secondary); }
.tracking-benefits span { display: flex; flex-direction: column; }
.tracking-benefits b { color: var(--primary); }
.tracking-benefits small { color: var(--muted); }
.tracking-search-panel { padding: 34px; border: 1px solid var(--line); border-radius: 24px; background: #fff; box-shadow: var(--shadow); }
.panel-label { display: flex; align-items: center; gap: 8px; color: var(--secondary); font-size: .72rem; font-weight: 850; letter-spacing: .12em; }
.panel-label i { width: 8px; height: 8px; border-radius: 50%; background: #42c78d; animation: pulseDot 2s infinite; }
.tracking-search-panel h2 { margin: 10px 0 25px; font-size: 1.8rem; }
.tracking-search-panel label { color: #385160; font-size: .85rem; font-weight: 750; }
.tracking-search-panel label > div { display: flex; align-items: center; margin-top: 8px; padding-left: 14px; border: 1px solid var(--line-strong); border-radius: 12px; }
.tracking-search-panel label svg { color: var(--secondary); }
.tracking-search-panel input { flex: 1; min-width: 0; height: 54px; border: 0; outline: 0; padding: 0 13px; font-weight: 700; text-transform: uppercase; }
.tracking-search-panel .button { width: 100%; margin-top: 16px; }
.tracking-search-panel > small { display: block; margin-top: 12px; color: var(--muted); text-align: center; }
.not-found-page { min-height: 650px; display: grid; place-items: center; padding: 70px 20px; background: var(--soft); }
.not-found-card { width: min(620px, 100%); padding: 48px; border: 1px solid var(--line); border-radius: 24px; text-align: center; background: #fff; box-shadow: var(--shadow); }
.not-found-icon { width: 80px; height: 80px; display: grid; place-items: center; margin: 0 auto 22px; border-radius: 22px; color: var(--secondary); background: var(--soft-blue); }
.not-found-card > span { color: var(--danger); font-size: .72rem; font-weight: 850; letter-spacing: .13em; }
.not-found-card h1 { margin: 9px 0 14px; font-size: 2.3rem; }

/* Tracking result */
.tracking-result { padding: 34px 0 100px; background: #f3f6f8; }
.tracking-shell { display: grid; gap: 22px; }
.tracking-breadcrumb { display: flex; align-items: center; justify-content: space-between; gap: 20px; color: var(--muted); font-size: .84rem; }
.tracking-breadcrumb a { display: inline-flex; align-items: center; gap: 7px; color: var(--primary); font-weight: 750; }
.shipment-command { overflow: hidden; border: 1px solid #203f59; border-radius: 22px; color: #fff; background: linear-gradient(135deg, #0a2238, #103a58); box-shadow: var(--shadow); }
.command-status { display: grid; grid-template-columns: 64px 1fr; gap: 18px; padding: 30px 32px 26px; }
.command-status-icon { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 18px; color: #fff; background: var(--accent); box-shadow: 0 0 0 9px rgba(232,111,45,.13); }
.command-status > div:last-child > span { color: #a9bfcc; font-size: .7rem; font-weight: 850; letter-spacing: .14em; }
.command-status h1 { margin: 6px 0 8px; color: #fff; font-size: clamp(2rem, 4vw, 3.15rem); }
.command-status p { max-width: 760px; margin-bottom: 17px; color: #b9ccd6; }
.verified-current { width: fit-content; max-width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 1px solid rgba(255,255,255,.14); border-radius: 13px; background: rgba(255,255,255,.06); }
.verified-current > i { width: 12px; height: 12px; flex: 0 0 auto; border: 3px solid #fff; border-radius: 50%; background: #4bd69c; box-shadow: 0 0 0 7px rgba(75,214,156,.13); animation: pulseDot 2s infinite; }
.verified-current span { display: flex; flex-direction: column; min-width: 0; }
.verified-current small { color: #9ab4c2; font-size: .66rem; font-weight: 850; letter-spacing: .11em; }
.verified-current b { overflow-wrap: anywhere; color: #fff; font-size: 1.08rem; }
.command-reference { display: grid; grid-template-columns: 1fr 1fr 1.25fr; border-top: 1px solid rgba(255,255,255,.11); border-bottom: 1px solid rgba(255,255,255,.11); }
.command-reference > div { min-height: 96px; position: relative; display: flex; flex-direction: column; justify-content: center; padding: 18px 26px; border-right: 1px solid rgba(255,255,255,.11); }
.command-reference > div:last-child { border-right: 0; }
.command-reference small, .command-facts small { color: #8ea9b8; font-size: .66rem; font-weight: 850; letter-spacing: .1em; }
.command-reference b { color: #fff; overflow-wrap: anywhere; }
.command-reference button { position: absolute; top: 12px; right: 12px; border: 1px solid rgba(255,255,255,.18); border-radius: 8px; padding: 5px 8px; color: #cfe0e8; background: transparent; font-size: .7rem; }
.command-facts { display: grid; grid-template-columns: repeat(5, 1fr); }
.command-facts article { min-height: 88px; display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 10px; padding: 15px 18px; border-right: 1px solid rgba(255,255,255,.1); }
.command-facts article:last-child { border-right: 0; }
.command-facts svg { color: var(--accent); }
.command-facts span { min-width: 0; display: flex; flex-direction: column; }
.command-facts b { overflow: hidden; color: #fff; font-size: .84rem; text-overflow: ellipsis; white-space: nowrap; }
.shipment-command.tone-success .command-status-icon { background: var(--success); box-shadow: 0 0 0 9px rgba(22,115,75,.14); }
.shipment-command.tone-warning .command-status-icon, .shipment-command.tone-danger .command-status-icon { background: #c1791b; }

.exception-command { display: grid; grid-template-columns: 58px 1fr auto; align-items: center; gap: 18px; padding: 22px; border: 1px solid #e4c290; border-left: 5px solid #c27b1d; border-radius: 16px; background: #fff8ed; box-shadow: var(--shadow-sm); }
.exception-symbol { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 14px; color: #9f5e0a; background: #f9e7c9; }
.exception-command span { color: #a05d0a; font-size: .69rem; font-weight: 850; letter-spacing: .11em; }
.exception-command h2 { margin: 4px 0 4px; font-size: 1.4rem; }
.exception-command p { margin: 0; }
.exception-facts { min-width: 220px; display: grid; gap: 3px; padding-left: 20px; border-left: 1px solid #e6cfae; }
.exception-facts small { color: #927451; font-size: .66rem; font-weight: 800; }
.exception-facts b { color: #654518; }

.journey-dashboard, .route-command, .shipment-information, .history-dashboard, .proof-evidence { border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: var(--shadow-sm); }
.journey-dashboard, .shipment-information, .history-dashboard { padding: 26px; }
.journey-dashboard > header, .shipment-information > header, .history-dashboard > header, .route-command > header { display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.journey-dashboard h2, .shipment-information h2, .history-dashboard h2, .route-command h2 { margin: 7px 0 0; font-size: 1.7rem; }
.journey-summary { text-align: right; }
.journey-summary b { color: var(--primary); font-size: 2.1rem; }
.journey-summary span { color: var(--muted); font-size: .78rem; }
.journey-track { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); margin-top: 42px; padding-top: 3px; }
.journey-line, .journey-fill { position: absolute; top: 24px; left: 8%; height: 4px; border-radius: 999px; }
.journey-line { right: 8%; background: #dce5ea; }
.journey-fill { width: calc(var(--journey-progress) * .84); max-width: 84%; background: var(--secondary); animation: growJourney 1.3s ease both; }
.journey-vehicle { position: absolute; z-index: 3; top: 7px; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--accent); box-shadow: 0 0 0 7px rgba(232,111,45,.12); transition: left .5s ease; }
.journey-vehicle.moving { animation: vehiclePulse 2s infinite; }
.journey-node { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; }
.journey-node > div { width: 48px; height: 48px; display: grid; place-items: center; border: 5px solid #fff; border-radius: 50%; color: #7e929e; background: #e3e9ed; box-shadow: 0 0 0 1px #d6e0e5; }
.journey-node.complete > div { color: #fff; background: var(--secondary); }
.journey-node.active > div { color: #fff; background: var(--accent); box-shadow: 0 0 0 7px rgba(232,111,45,.12); }
.journey-node b { margin-top: 12px; color: var(--primary); font-size: .85rem; }
.journey-node small { max-width: 140px; color: var(--muted); font-size: .72rem; line-height: 1.35; }
.mobile-stage { display: none; }

.route-command { overflow: hidden; }
.route-command > header { padding: 25px 26px; border-bottom: 1px solid var(--line); }
.map-buttons { display: none !important; }
.route-command-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, .5fr); }
.map-stage { position: relative; min-height: 500px; background: #dce7eb; }
#shipment-map { width: 100%; height: 500px; min-height: 500px; }
.map-loading { position: absolute; inset: 0; z-index: 500; display: grid; place-items: center; align-content: center; gap: 12px; color: var(--primary); background: #eef3f5; }
.map-loading span { width: 38px; height: 38px; border: 4px solid #cad8df; border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }
.map-fallback { position: absolute; inset: 0; z-index: 450; padding: 35px; display: grid; place-items: center; align-content: center; background: linear-gradient(135deg, #eaf1f4, #f8fafb); }
.map-fallback[hidden] { display: none; }
.fallback-route { width: min(650px, 100%); display: grid; grid-template-columns: 1fr 80px 1fr 80px 1fr; align-items: center; gap: 8px; }
.fallback-route article { padding: 15px; border: 1px solid var(--line-strong); border-radius: 12px; background: #fff; box-shadow: var(--shadow-sm); }
.fallback-route article.current { border-color: var(--secondary); box-shadow: 0 0 0 4px rgba(21,86,109,.09); }
.fallback-route span { color: var(--secondary); font-size: .65rem; font-weight: 850; letter-spacing: .12em; }
.fallback-route b { display: block; color: var(--primary); font-size: .82rem; }
.fallback-route i { height: 2px; position: relative; background: var(--line-strong); }
.fallback-route i::after { content: ""; position: absolute; right: -1px; top: -4px; border-left: 7px solid var(--line-strong); border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.map-fallback p { margin: 18px 0 0; text-align: center; }
.map-legend { position: absolute; z-index: 401; left: 16px; bottom: 16px; display: flex; flex-wrap: wrap; gap: 8px; padding: 9px 11px; border: 1px solid rgba(255,255,255,.62); border-radius: 11px; background: rgba(255,255,255,.9); box-shadow: var(--shadow-sm); backdrop-filter: blur(8px); }
.map-legend span { display: inline-flex; align-items: center; gap: 6px; color: #4c626f; font-size: .72rem; font-weight: 700; }
.map-legend i { width: 18px; height: 4px; border-radius: 999px; background: var(--accent); }
.map-legend i.complete { background: #7d929e; }
.map-legend i.now { width: 9px; height: 9px; border-radius: 50%; background: var(--secondary); }
.route-intelligence { padding: 24px; border-left: 1px solid var(--line); background: #fbfcfd; }
.route-intelligence h3 { margin-bottom: 18px; font-size: 1.15rem; }
.route-location { position: relative; padding: 14px 14px 14px 34px; border-left: 2px solid #cbd7dd; }
.route-location::before { content: ""; position: absolute; left: -7px; top: 20px; width: 10px; height: 10px; border: 2px solid #fff; border-radius: 50%; background: #8da0aa; box-shadow: 0 0 0 2px #cbd7dd; }
.route-location.current { margin: 2px 0; border-left-color: var(--secondary); background: #eef5f7; border-radius: 0 10px 10px 0; }
.route-location.current::before { background: var(--accent); box-shadow: 0 0 0 6px rgba(232,111,45,.12); animation: pulseDot 2s infinite; }
.route-location span { display: block; color: var(--secondary); font-size: .65rem; font-weight: 850; letter-spacing: .11em; }
.route-location b { display: block; overflow-wrap: anywhere; color: var(--primary); font-size: .86rem; }
.route-metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; margin-top: 20px; }
.route-metrics article { padding: 12px; border: 1px solid var(--line); border-radius: 11px; background: #fff; }
.route-metrics small { display: block; color: var(--muted); font-size: .61rem; font-weight: 800; letter-spacing: .08em; }
.route-metrics b { color: var(--primary); font-size: .88rem; }
.route-health { display: grid; gap: 8px; margin-top: 18px; }
.route-health span { display: flex; align-items: center; gap: 8px; padding: 10px; border-radius: 9px; color: var(--success); background: #eef9f3; font-size: .78rem; font-weight: 750; }
.route-health span.warn { color: var(--warning); background: #fff7e9; }
.route-marker { min-width: 56px; padding: 7px 9px; border: 2px solid #fff; border-radius: 10px; color: #fff; text-align: center; font-size: .68rem; font-weight: 900; box-shadow: 0 8px 22px rgba(11,34,57,.25); }
.route-marker.from { background: #6b7f8a; }
.route-marker.now { background: var(--secondary); animation: markerPulse 2s infinite; }
.route-marker.to { background: var(--accent); }
.moving-map-marker { width: 36px; height: 36px; display: grid; place-items: center; border: 3px solid #fff; border-radius: 50%; color: #fff; background: var(--marker-accent, var(--accent)); box-shadow: 0 0 0 8px rgba(232,111,45,.14); font-weight: 900; }

.movement-counters { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.movement-counters > article { min-height: 112px; display: flex; align-items: center; gap: 14px; padding: 18px; border: 1px solid var(--line); border-radius: 15px; background: #fff; box-shadow: var(--shadow-sm); }
.movement-counters > article > svg { color: var(--secondary); }
.movement-counters article > div:not(.counter-ring) { min-width: 0; display: flex; flex-direction: column; }
.movement-counters small { color: var(--muted); font-size: .64rem; font-weight: 850; letter-spacing: .09em; }
.movement-counters b { color: var(--primary); font-size: .88rem; line-height: 1.35; }
.counter-ring { width: 64px; height: 64px; flex: 0 0 auto; display: grid; place-items: center; position: relative; border-radius: 50%; background: conic-gradient(var(--secondary) calc(var(--counter-value) * 1%), #e1e8ec 0); }
.counter-ring::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: #fff; }
.counter-ring b, .counter-ring span { position: relative; z-index: 1; }
.counter-ring b { font-size: 1rem; }
.counter-ring span { margin-left: 25px; margin-top: -22px; color: var(--muted); font-size: .63rem; }

.shipment-information > header > span, .history-dashboard > header > span { color: var(--muted); font-size: .78rem; }
.information-grid { display: grid; grid-template-columns: .9fr .9fr 1.2fr; gap: 14px; margin-top: 20px; }
.information-card { padding: 22px; border: 1px solid var(--line); border-radius: 15px; background: #fbfcfd; }
.information-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; color: var(--secondary); background: var(--soft-blue); }
.information-card > span, .package-copy > span { display: block; margin-top: 14px; color: var(--secondary); font-size: .68rem; font-weight: 850; letter-spacing: .11em; }
.information-card h3 { margin: 5px 0 7px; font-size: 1.18rem; }
.information-card p { margin-bottom: 8px; }
.information-card > small { display: block; color: #72848e; }
.package-information { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 14px; }
.package-copy dl { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.package-copy dl div { padding: 10px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.package-copy dt { color: var(--muted); font-size: .68rem; }
.package-copy dd { margin: 2px 0 0; color: var(--primary); font-size: .8rem; font-weight: 800; }
.package-photo { min-height: 190px; overflow: hidden; position: relative; border: 0; border-radius: 12px; padding: 0; background: #e8eef1; }
.package-photo img { width: 100%; height: 100%; object-fit: cover; }
.package-photo span { position: absolute; left: 8px; right: 8px; bottom: 8px; padding: 8px; border-radius: 8px; color: #fff; background: rgba(7,28,45,.8); font-size: .72rem; font-weight: 750; }
.proof-evidence { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 25px; }
.proof-evidence h2 { margin: 7px 0 5px; font-size: 1.55rem; }
.proof-evidence p { margin: 0; }
.proof-evidence button { border: 0; padding: 0; background: transparent; }
.proof-evidence img { width: 180px; height: 115px; object-fit: cover; border-radius: 12px; }

.history-timeline { margin-top: 24px; }
.history-record { min-height: 120px; display: grid; grid-template-columns: 118px 28px 1fr; gap: 14px; }
.history-date { display: flex; flex-direction: column; align-items: end; text-align: right; }
.history-date b { color: var(--primary); font-size: .82rem; }
.history-date span { color: var(--muted); font-size: .78rem; }
.history-track { position: relative; }
.history-track::after { content: ""; position: absolute; left: 13px; top: 18px; bottom: -12px; width: 2px; background: #dde5e9; }
.history-record:last-child .history-track::after { display: none; }
.history-track i { position: absolute; z-index: 2; left: 5px; top: 6px; width: 17px; height: 17px; border: 4px solid #fff; border-radius: 50%; background: #8ea0aa; box-shadow: 0 0 0 2px #d5dfe4; }
.history-record.latest .history-track i { background: var(--accent); box-shadow: 0 0 0 7px rgba(232,111,45,.12); }
.history-record-content { padding: 0 0 25px; }
.history-record-content > div { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.history-record-content h3 { margin: 0; font-size: 1.15rem; }
.history-record-content > div > span { padding: 4px 8px; border-radius: 999px; color: #a65016; background: #fff0e5; font-size: .62rem; font-weight: 850; letter-spacing: .06em; }
.history-record-content p { margin: 6px 0; color: #536976; }
.history-location { display: flex; align-items: center; gap: 7px; color: var(--secondary) !important; font-weight: 750; }
.history-record-content small { color: #7b8d97; }
.history-empty { padding: 30px; border-radius: 12px; color: var(--muted); text-align: center; background: var(--soft); }
.lightbox { position: fixed; inset: 0; z-index: 2100; display: grid; place-items: center; padding: 40px; background: rgba(3,16,26,.92); }
.lightbox[hidden] { display: none; }
.lightbox img { max-width: min(1100px, 90vw); max-height: 84vh; border-radius: 16px; box-shadow: 0 30px 80px rgba(0,0,0,.45); }
.lightbox button { position: absolute; top: 20px; right: 24px; width: 44px; height: 44px; border: 0; border-radius: 50%; color: var(--primary); background: #fff; font-size: 1.7rem; line-height: 1; }

/* Footer */
.site-footer { padding-top: 72px; color: #fff; background: #061a2b; }
.footer-command { display: flex; align-items: center; justify-content: space-between; gap: 40px; padding-bottom: 48px; border-bottom: 1px solid rgba(255,255,255,.1); }
.footer-command h2 { max-width: 780px; margin: 10px 0 0; color: #fff; font-size: clamp(1.8rem, 3vw, 2.6rem); }
.footer-command-actions { flex: 0 0 auto; display: flex; gap: 10px; }
.footer-grid { display: grid; grid-template-columns: 1.45fr repeat(3, 1fr); gap: 46px; padding: 50px 0; }
.footer-brand { display: flex; align-items: center; gap: 12px; }
.footer-logo { width: 54px; height: 54px; display: grid; place-items: center; padding: 5px; border-radius: 14px; background: #fff; }
.footer-logo img { width: 100%; height: 100%; object-fit: contain; }
.footer-brand > span:last-child { display: flex; flex-direction: column; }
.footer-brand b { color: #fff; }
.footer-brand small, .footer-company p, .footer-grid a, .footer-grid > div > p, .footer-grid > div > small { color: #9db3c0; }
.footer-company p { max-width: 430px; margin: 20px 0; }
.trust-row { display: flex; flex-wrap: wrap; gap: 8px; }
.trust-row span { display: inline-flex; align-items: center; gap: 7px; padding: 8px 10px; border-radius: 9px; color: #c7d6de; background: rgba(255,255,255,.06); font-size: .76rem; }
.footer-grid h4 { margin: 0 0 16px; color: #fff; font-size: .96rem; }
.footer-grid > div:not(:first-child) { display: flex; flex-direction: column; gap: 9px; }
.footer-grid a:hover { color: #fff; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 0; border-top: 1px solid rgba(255,255,255,.09); color: #78919f; font-size: .78rem; }
.footer-bottom a { color: #abc0cb; }

/* Motion */
.reveal { opacity: 1; transform: none; }
.reveal.visible { animation: revealIn .65s ease both; }
@keyframes revealIn { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes pulseDot { 0%,100% { box-shadow: 0 0 0 0 rgba(75,214,156,.28); } 50% { box-shadow: 0 0 0 9px rgba(75,214,156,0); } }
@keyframes routeFlow { to { stroke-dashoffset: -220; } }
@keyframes vehicleFloat { 0%,100% { transform: translate(0,0); } 50% { transform: translate(210px,-112px); } }
@keyframes growJourney { from { width: 0; } }
@keyframes vehiclePulse { 0%,100% { box-shadow: 0 0 0 7px rgba(232,111,45,.12); } 50% { box-shadow: 0 0 0 14px rgba(232,111,45,0); } }
@keyframes markerPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(21,86,109,.35); } 50% { box-shadow: 0 0 0 11px rgba(21,86,109,0); } }
@keyframes spin { to { transform: rotate(360deg); } }

/* Responsive */
@media (max-width: 1080px) {
    .home-hero-grid, .operations-grid, .inner-hero-grid, .decision-grid, .split-story, .contact-layout { grid-template-columns: 1fr; }
    .home-hero-grid { gap: 46px; }
    .hero-control-board { min-height: 560px; }
    .performance-grid { grid-template-columns: repeat(3, 1fr); }
    .counter-card:nth-child(3) { border-right: 0; }
    .service-showcase, .service-matrix { grid-template-columns: repeat(2, 1fr); }
    .values-grid { grid-template-columns: repeat(2, 1fr); }
    .testimonial-layout { grid-template-columns: 1fr; }
    .route-command-grid { grid-template-columns: 1fr; }
    .route-intelligence { border-left: 0; border-top: 1px solid var(--line); }
    .route-location { display: inline-block; width: 32%; vertical-align: top; }
    .movement-counters { grid-template-columns: repeat(2, 1fr); }
    .information-grid { grid-template-columns: repeat(2, 1fr); }
    .package-information { grid-column: 1 / -1; }
    .footer-grid { grid-template-columns: repeat(2, 1fr); }
    .contact-guidance { position: static; }
}

@media (max-width: 820px) {
    :root { --shell: min(100% - 30px, 1180px); }
    .utility-trust span:nth-child(2), .utility-contact a:first-child { display: none; }
    .nav-toggle { display: grid; place-items: center; }
    .main-nav { position: fixed; top: 122px; left: 15px; right: 15px; max-height: calc(100vh - 140px); overflow: auto; display: grid; align-items: stretch; gap: 4px; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translateY(-12px); transition: .22s ease; }
    .main-nav.open { opacity: 1; visibility: visible; transform: none; }
    .main-nav > a { padding: 13px 14px; }
    .main-nav .nav-track { margin: 5px 0 0; justify-content: center; }
    .home-hero { padding-top: 64px; }
    .hero-proof { grid-template-columns: 1fr; }
    .performance-grid { grid-template-columns: repeat(2, 1fr); }
    .counter-card:nth-child(3) { border-right: 1px solid var(--line); }
    .counter-card:nth-child(even) { border-right: 0; }
    .counter-card:last-child { grid-column: 1 / -1; }
    .section { padding: 78px 0; }
    .section-heading { display: block; }
    .section-heading > p { margin-top: 16px; }
    .process-flow { grid-template-columns: 1fr; gap: 12px; }
    .process-flow::before { display: none; }
    .process-flow article { display: grid; grid-template-columns: 60px 1fr; column-gap: 14px; text-align: left; }
    .process-flow article > span { right: auto; left: 43px; top: -2px; }
    .process-flow article > div { grid-row: 1 / 3; margin: 0; }
    .process-flow h3 { margin: 5px 0 3px; }
    .process-flow p { margin: 0; }
    .testimonials { grid-template-columns: 1fr; }
    .testimonials article:last-child:nth-child(odd) { grid-column: auto; }
    .final-cta-card, .footer-command { display: block; }
    .final-cta-card .button, .footer-command-actions { margin-top: 22px; }
    .footer-command-actions { display: grid; }
    .inner-hero { padding: 66px 0; }
    .inner-hero-visual, .inner-hero-visual img { min-height: 350px; }
    .story-image { min-height: 480px; }
    .tracking-search-layout { grid-template-columns: 1fr; gap: 42px; }
    .command-reference { grid-template-columns: 1fr 1fr; }
    .command-reference > div:nth-child(2) { border-right: 0; }
    .command-reference > div:last-child { grid-column: 1 / -1; border-top: 1px solid rgba(255,255,255,.11); }
    .command-facts { grid-template-columns: repeat(2, 1fr); }
    .command-facts article { border-bottom: 1px solid rgba(255,255,255,.1); }
    .command-facts article:nth-child(even) { border-right: 0; }
    .command-facts article:last-child { grid-column: 1 / -1; }
    .exception-command { grid-template-columns: 52px 1fr; }
    .exception-facts { grid-column: 1 / -1; border-left: 0; border-top: 1px solid #e6cfae; padding: 14px 0 0; }
    .journey-track { display: none; }
    .mobile-stage { display: flex; flex-direction: column; margin-top: 18px; padding: 17px; border-radius: 13px; background: var(--soft); }
    .mobile-stage span { color: var(--secondary); font-size: .68rem; font-weight: 850; letter-spacing: .1em; }
    .mobile-stage b { color: var(--primary); font-size: 1.1rem; }
    .mobile-stage small { color: var(--muted); }
    .route-command > header, .shipment-information > header, .history-dashboard > header { align-items: flex-start; flex-direction: column; }
    .information-grid { grid-template-columns: 1fr; }
    .package-information { display: block; }
    .package-photo { width: 100%; height: 230px; margin-top: 14px; }
    .footer-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
    :root { --shell: calc(100% - 24px); }
    body { font-size: 15px; }
    .utility-inner { justify-content: center; }
    .utility-trust { display: none; }
    .utility-contact a:last-child { font-size: .72rem; }
    .nav-shell { min-height: 72px; }
    .brand-mark { width: 45px; height: 45px; }
    .brand-copy b { max-width: 190px; overflow: hidden; text-overflow: ellipsis; font-size: .9rem; }
    .brand-copy small { display: none; }
    .main-nav { top: 111px; }
    .home-hero { padding: 52px 0 52px; }
    .hero-copy h1 { font-size: 2.65rem; }
    .hero-control-board { min-height: 520px; border-radius: 20px; }
    .tracking-console { left: 14px; right: 14px; bottom: 104px; padding: 18px; }
    .tracking-console form > div { display: grid; grid-template-columns: 26px 1fr; }
    .tracking-console button { grid-column: 1 / -1; height: 46px; border-radius: 9px; }
    .hero-route-mini { left: 15px; right: 15px; gap: 6px; }
    .hero-route-mini b { font-size: .68rem; }
    .performance-grid { grid-template-columns: 1fr; }
    .counter-card, .counter-card:nth-child(3), .counter-card:nth-child(even) { border-right: 0; border-bottom: 1px solid var(--line); }
    .counter-card:last-child { grid-column: auto; }
    .service-showcase, .service-matrix, .values-grid { grid-template-columns: 1fr; }
    .movement-map { height: 330px; }
    .movement-point.current { left: 31%; }
    .movement-vehicle { animation: none; }
    .board-stats { grid-template-columns: 1fr; }
    .board-stats article { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.1); }
    .rating-panel, .testimonials article, .story-card, .quote-form, .tracking-search-panel, .not-found-card { padding: 24px; }
    .decision-list, .form-grid { grid-template-columns: 1fr; }
    .form-grid .full { grid-column: auto; }
    .console-route { grid-template-columns: 1fr; }
    .console-route > svg { transform: rotate(90deg); justify-self: center; }
    .console-options { grid-template-columns: 1fr; }
    .console-options span { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.1); }
    .contact-quick { margin-top: 24px; }
    .tracking-search-page { padding: 62px 0; }
    .tracking-breadcrumb { align-items: flex-start; flex-direction: column; gap: 6px; }
    .command-status { grid-template-columns: 1fr; padding: 24px; }
    .command-status-icon { width: 58px; height: 58px; }
    .verified-current { width: 100%; }
    .command-reference { grid-template-columns: 1fr; }
    .command-reference > div, .command-reference > div:nth-child(2), .command-reference > div:last-child { grid-column: auto; border-right: 0; border-top: 1px solid rgba(255,255,255,.11); }
    .command-facts { grid-template-columns: 1fr; }
    .command-facts article, .command-facts article:last-child { grid-column: auto; border-right: 0; }
    .journey-dashboard, .shipment-information, .history-dashboard { padding: 21px; }
    .route-command > header { padding: 21px; }
    #shipment-map, .map-stage { height: 420px; min-height: 420px; }
    .fallback-route { grid-template-columns: 1fr; }
    .fallback-route i { width: 2px; height: 30px; justify-self: center; }
    .fallback-route i::after { right: -4px; top: auto; bottom: -1px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 7px solid var(--line-strong); border-bottom: 0; }
    .map-legend { right: 12px; left: 12px; }
    .route-location { display: block; width: 100%; }
    .route-metrics { grid-template-columns: 1fr; }
    .movement-counters { grid-template-columns: 1fr; }
    .proof-evidence { align-items: flex-start; flex-direction: column; }
    .proof-evidence img { width: 100%; height: 210px; }
    .history-record { grid-template-columns: 78px 22px 1fr; gap: 9px; }
    .history-date b { font-size: .72rem; }
    .footer-bottom { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    .reveal { opacity: 1; transform: none; }
}
.route-live-state { display: flex; align-items: center; gap: 10px; padding: 10px 13px; border: 1px solid var(--line); border-radius: 11px; background: #f8fafb; }
.route-live-state > i { width: 9px; height: 9px; border-radius: 50%; background: #48c98e; box-shadow: 0 0 0 6px rgba(72,201,142,.12); animation: pulseDot 2s infinite; }
.route-live-state span { display: flex; flex-direction: column; }
.route-live-state small { color: var(--secondary); font-size: .61rem; font-weight: 850; letter-spacing: .1em; }
.route-live-state b { color: var(--primary); font-size: .76rem; }
@media (max-width: 560px) { .route-live-state { width: 100%; } }

/* ============================================================
   RELEASE 2.6.1 — structural reset and high-contrast refinements
   These rules intentionally sit last so old browser/cPanel caches
   cannot combine an earlier HTML structure with a partial layout.
   ============================================================ */
:root {
    --shell: min(1280px, calc(100% - 64px));
}
html, body { width: 100%; overflow-x: clip; }
body { color: #172f43; background: #fff; }
.shell { width: var(--shell) !important; max-width: 1280px; margin-left: auto !important; margin-right: auto !important; }
.utility-bar { width: 100%; color: #dce8ee; background: #071a2b !important; }
.utility-inner { min-height: 42px; }
.site-header { width: 100%; background: rgba(255,255,255,.98) !important; }
.nav-shell { min-height: 86px; }
.main-nav { margin-left: auto; }

.home-hero { padding: 78px 0 74px; background: linear-gradient(135deg,#f8fafb 0%,#eef4f6 58%,#f8fafb 100%) !important; }
.home-hero-grid { display: grid !important; grid-template-columns: minmax(0,1.06fr) minmax(430px,.94fr) !important; align-items: center; gap: 52px; }
.hero-copy { min-width: 0; }
.hero-copy h1 { max-width: 760px; margin: 20px 0 22px; font-size: clamp(3rem,4.25vw,4.35rem); }
.hero-copy > p { max-width: 680px; color: #536b7a !important; font-size: 1.08rem; line-height: 1.75; }
.hero-actions { display: flex !important; align-items: center; flex-wrap: wrap; gap: 12px; }
.hero-proof { display: grid !important; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.hero-proof span { min-width: 0; }
.hero-control-board { min-width: 0; min-height: 570px; }

.performance-strip, .section, .site-footer { width: 100%; }
.section-heading p, .service-panel p, .operations-copy > p, .process-flow p, .testimonials p { color: #607684; }
.button { text-decoration: none !important; }

@media (max-width: 1180px) {
    :root { --shell: min(100% - 40px, 1100px); }
    .home-hero-grid { grid-template-columns: minmax(0,1fr) minmax(390px,.9fr) !important; gap: 34px; }
    .hero-copy h1 { font-size: clamp(2.75rem,4.4vw,3.7rem); }
}

@media (max-width: 940px) {
    :root { --shell: calc(100% - 32px); }
    .utility-trust { display: none; }
    .home-hero-grid { grid-template-columns: 1fr !important; }
    .hero-copy { max-width: 760px; }
    .hero-control-board { min-height: 540px; }
    .main-nav { margin-left: 0; }
}

@media (max-width: 620px) {
    :root { --shell: calc(100% - 24px); }
    .utility-inner { min-height: 38px; }
    .utility-contact { width: 100%; justify-content: center; }
    .utility-contact a:first-child { display: none; }
    .hero-copy h1 { font-size: clamp(2.35rem,11vw,3rem); }
    .hero-copy > p { font-size: 1rem; }
    .hero-proof { grid-template-columns: 1fr; }
}

/* ============================================================
   RELEASE 2.7.0 — complete three-point shipment route
   Origin, current verified location and destination are always
   visible together. These rules are intentionally versioned.
   ============================================================ */
.route-heading-copy { max-width: 720px; margin: 9px 0 0; color: var(--muted); font-size: .92rem; }
.three-point-route-strip {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr) 56px minmax(0, 1fr);
    align-items: stretch;
    gap: 0;
    padding: 16px 26px;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(180deg, #fbfcfd, #f4f8fa);
}
.three-point-route-strip article {
    min-width: 0;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 7px 20px rgba(11, 34, 57, .05);
}
.three-point-route-strip article.current { border-color: rgba(21, 86, 109, .36); background: #edf6f8; }
.three-point-route-strip article.destination { border-color: rgba(232, 111, 45, .34); background: #fff7f2; }
.three-point-route-strip article span { display: block; color: var(--secondary); font-size: .63rem; font-weight: 850; letter-spacing: .11em; }
.three-point-route-strip article b { display: block; margin-top: 5px; color: var(--primary); font-size: .88rem; line-height: 1.38; overflow-wrap: anywhere; }
.three-point-route-strip > i { position: relative; align-self: center; height: 2px; background: var(--line-strong); }
.three-point-route-strip > i::after { content: ""; position: absolute; right: -1px; top: -4px; border-left: 8px solid var(--line-strong); border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.route-recenter-button {
    width: 100%;
    min-height: 43px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
    border: 1px solid var(--secondary);
    border-radius: 10px;
    color: #fff;
    background: var(--secondary);
    font-weight: 800;
}
.route-recenter-button:hover { background: var(--primary); border-color: var(--primary); }
.route-marker { min-width: 82px; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 9px; }
.route-marker span { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.18); font-size: .58rem; }
.route-marker b { color: #fff; font-size: .61rem; letter-spacing: .04em; }
.route-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.route-metrics article:first-child { grid-column: 1 / -1; border-color: rgba(21, 86, 109, .28); background: #edf6f8; }
.route-metrics article:first-child b { font-size: 1.02rem; }

@media (max-width: 900px) {
    .three-point-route-strip { grid-template-columns: 1fr; gap: 9px; padding: 15px 20px; }
    .three-point-route-strip > i { width: 2px; height: 22px; justify-self: center; }
    .three-point-route-strip > i::after { right: -4px; top: auto; bottom: -1px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 7px solid var(--line-strong); border-bottom: 0; }
}
@media (max-width: 560px) {
    .three-point-route-strip { padding: 13px; }
    .three-point-route-strip article { padding: 12px 13px; }
    .route-metrics { grid-template-columns: 1fr; }
    .route-metrics article:first-child { grid-column: auto; }
}

/* ============================================================
   RELEASE 2.7.2 — accurate three-location tracking + customer docs
   ============================================================ */
.customer-document-panel {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    padding: 22px 24px;
    border: 1px solid rgba(21, 86, 109, .22);
    border-radius: 17px;
    background: linear-gradient(135deg, #f7fbfc 0%, #eef7f8 100%);
    box-shadow: var(--shadow-sm);
}
.customer-document-icon {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    color: #fff;
    background: var(--secondary);
    box-shadow: 0 12px 28px rgba(21, 86, 109, .2);
}
.customer-document-copy h2 { margin: 4px 0 4px; font-size: 1.28rem; }
.customer-document-copy p { margin: 0; color: var(--muted); }
.customer-document-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 9px; }
.customer-document-actions .button { min-height: 44px; white-space: nowrap; }

.map-stage {
    min-height: 520px;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(circle at 20% 22%, rgba(21,86,109,.11), transparent 33%),
        linear-gradient(145deg, #dce8ec, #edf3f5);
}
#shipment-map {
    height: 520px;
    min-height: 520px;
    opacity: .25;
    transition: opacity .32s ease;
    background: #dfe9ed;
}
#shipment-map.is-ready { opacity: 1; }
#shipment-map .leaflet-tile-pane { filter: saturate(.82) contrast(.98) brightness(1.03); }
#shipment-map .leaflet-control-zoom a { color: var(--primary); }
#shipment-map .leaflet-control-attribution { font-size: 9px; }
#shipment-map .leaflet-control-scale-line { border-color: rgba(11,41,66,.55); color: var(--primary); background: rgba(255,255,255,.84); }

.shipment-map-marker-shell { background: transparent; border: 0; }
.shipment-map-marker {
    position: relative;
    width: max-content;
    max-width: 190px;
    min-height: 47px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 11px 7px 7px;
    border: 3px solid #fff;
    border-radius: 14px;
    color: #fff;
    box-shadow: 0 12px 27px rgba(5, 27, 43, .27);
    transform-origin: 50% 100%;
}
.shipment-map-marker::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -10px;
    width: 17px;
    height: 17px;
    border-right: 3px solid #fff;
    border-bottom: 3px solid #fff;
    background: inherit;
    transform: translateX(-50%) rotate(45deg);
    border-radius: 0 0 4px 0;
}
.shipment-map-marker.origin { background: #38566a; }
.shipment-map-marker.current { z-index: 2; background: var(--secondary); box-shadow: 0 12px 28px rgba(21,86,109,.35), 0 0 0 8px rgba(21,86,109,.12); }
.shipment-map-marker.destination { background: var(--accent); }
.shipment-map-marker.overlap-left { transform: translate(-45px, -9px); }
.shipment-map-marker.overlap-right { transform: translate(45px, 12px); }
.shipment-map-marker-number {
    position: relative;
    z-index: 1;
    flex: 0 0 29px;
    width: 29px;
    height: 29px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255,255,255,.18);
    font-size: .65rem;
    font-weight: 900;
}
.shipment-map-marker-copy { position: relative; z-index: 1; min-width: 0; display: flex; flex-direction: column; }
.shipment-map-marker-copy small { color: rgba(255,255,255,.8); font-size: .54rem; line-height: 1.15; font-weight: 900; letter-spacing: .09em; }
.shipment-map-marker-copy b { max-width: 125px; overflow: hidden; color: #fff; font-size: .72rem; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.current-location-pulse { animation: verifiedPositionPulse 2.1s ease-out infinite; }
.route-active-line { stroke-dasharray: 14 10; animation: shipmentRouteFlow 8s linear infinite; }
.route-active-line.paused { stroke-dasharray: 4 9; animation: none; }
.route-completed-line { stroke-dasharray: 3 7; }
.shipment-map-control {
    min-width: 190px;
    padding: 10px 12px;
    border: 1px solid rgba(255,255,255,.78);
    border-radius: 11px;
    background: rgba(255,255,255,.93);
    box-shadow: 0 10px 28px rgba(11,34,57,.14);
    backdrop-filter: blur(8px);
}
.shipment-map-control b { display: block; color: var(--primary); font-size: .78rem; }
.shipment-map-control span { display: block; margin-top: 2px; color: var(--muted); font-size: .65rem; }
.map-loading { background: linear-gradient(145deg, rgba(232,240,243,.98), rgba(247,250,251,.98)); }
.map-loading b { font-size: .8rem; }
.map-legend i.complete { background: var(--secondary); }

@keyframes shipmentRouteFlow { to { stroke-dashoffset: -240; } }
@keyframes verifiedPositionPulse {
    0% { stroke-opacity: 1; stroke-width: 3; fill-opacity: .95; }
    70% { stroke-opacity: .15; stroke-width: 15; fill-opacity: .9; }
    100% { stroke-opacity: 1; stroke-width: 3; fill-opacity: .95; }
}

@media (max-width: 900px) {
    .customer-document-panel { grid-template-columns: auto minmax(0, 1fr); }
    .customer-document-actions { grid-column: 1 / -1; justify-content: flex-start; }
    .map-stage, #shipment-map { height: 470px; min-height: 470px; }
}
@media (max-width: 560px) {
    .customer-document-panel { grid-template-columns: 1fr; padding: 19px; }
    .customer-document-actions { grid-column: auto; display: grid; width: 100%; }
    .customer-document-actions .button { width: 100%; justify-content: center; }
    .shipment-map-marker { max-width: 145px; padding-right: 8px; }
    .shipment-map-marker-copy b { max-width: 88px; }
    .shipment-map-marker.overlap-left { transform: translate(-26px, -9px) scale(.92); }
    .shipment-map-marker.overlap-right { transform: translate(26px, 11px) scale(.92); }
    .map-stage, #shipment-map { height: 430px; min-height: 430px; }
    .shipment-map-control { display: none; }
}

/* ============================================================
   RELEASE 2.7.3 — self-contained three-point vector route map
   No external Leaflet stylesheet, script, or map tile dependency.
   ============================================================ */
#shipment-map[data-world-map] {
    position: relative;
    height: 520px;
    min-height: 520px;
    overflow: hidden;
    opacity: .3;
    background: #dcebf0;
    transition: opacity .28s ease;
}
#shipment-map[data-world-map].is-ready { opacity: 1; }
.vector-route-map {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    cursor: grab;
    touch-action: none;
    user-select: none;
    background: #dcebf0;
}
.vector-route-map.is-dragging { cursor: grabbing; }
.vector-route-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}
.vector-route-svg image { pointer-events: none; }
.vector-route-corridor polyline {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}
.vector-route-base {
    stroke: rgba(255,255,255,.96);
    stroke-width: 12;
}
.vector-route-completed {
    stroke: var(--secondary);
    stroke-width: 6;
    stroke-dasharray: 3 7;
}
.vector-route-active {
    stroke: var(--accent);
    stroke-width: 6;
    stroke-dasharray: 15 10;
    animation: vectorRouteFlow 7s linear infinite;
}
.vector-route-active.paused {
    stroke: #9d6a4b;
    stroke-dasharray: 4 9;
    animation: none;
}
.vector-event-dot {
    fill: var(--secondary);
    stroke: #fff;
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}
.vector-route-marker-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.vector-route-marker {
    position: absolute;
    z-index: 5;
    width: max-content;
    max-width: 205px;
    min-height: 48px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px 7px 7px;
    border: 3px solid #fff;
    border-radius: 14px;
    color: #fff;
    background: #38566a;
    box-shadow: 0 14px 30px rgba(5,27,43,.28);
    transform: translate(-50%, calc(-100% - 13px));
    transform-origin: 50% 100%;
    pointer-events: auto;
    cursor: pointer;
}
.vector-route-marker::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -11px;
    width: 18px;
    height: 18px;
    border-right: 3px solid #fff;
    border-bottom: 3px solid #fff;
    border-radius: 0 0 4px 0;
    background: inherit;
    transform: translateX(-50%) rotate(45deg);
}
.vector-route-marker::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -22px;
    width: 11px;
    height: 11px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: inherit;
    transform: translateX(-50%);
    box-shadow: 0 4px 10px rgba(5,27,43,.26);
}
.vector-route-marker.current {
    z-index: 8;
    background: var(--secondary);
    box-shadow: 0 14px 30px rgba(21,86,109,.34), 0 0 0 8px rgba(21,86,109,.12);
}
.vector-route-marker.current::after { animation: vectorCurrentPulse 2s ease-out infinite; }
.vector-route-marker.destination { background: var(--accent); }
.vector-route-marker.overlap-left { transform: translate(calc(-50% - 42px), calc(-100% - 17px)); }
.vector-route-marker.overlap-right { transform: translate(calc(-50% + 42px), calc(-100% + 16px)); }
.vector-route-marker > span {
    position: relative;
    z-index: 2;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255,255,255,.18);
    font-size: .65rem;
    font-weight: 900;
}
.vector-route-marker > div {
    position: relative;
    z-index: 2;
    min-width: 0;
    display: flex;
    flex-direction: column;
    text-align: left;
}
.vector-route-marker small {
    color: rgba(255,255,255,.82);
    font-size: .54rem;
    line-height: 1.1;
    font-weight: 900;
    letter-spacing: .09em;
}
.vector-route-marker b {
    max-width: 132px;
    overflow: hidden;
    color: #fff;
    font-size: .73rem;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.vector-route-marker.is-open b {
    max-width: 210px;
    white-space: normal;
}
.vector-route-toolbar {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 12;
    display: flex;
    overflow: hidden;
    border: 1px solid rgba(11,41,66,.16);
    border-radius: 12px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 12px 28px rgba(11,34,57,.15);
    backdrop-filter: blur(10px);
}
.vector-route-toolbar button {
    min-width: 43px;
    height: 43px;
    display: grid;
    place-items: center;
    border: 0;
    border-right: 1px solid rgba(11,41,66,.12);
    color: var(--primary);
    background: transparent;
    font-size: 1.25rem;
    font-weight: 850;
}
.vector-route-toolbar button:last-child {
    min-width: 84px;
    border-right: 0;
    padding: 0 13px;
    font-size: .7rem;
}
.vector-route-toolbar button:hover { background: #edf6f8; }
.vector-route-badge {
    position: absolute;
    top: 18px;
    left: 18px;
    z-index: 11;
    min-width: 210px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 13px;
    border: 1px solid rgba(255,255,255,.78);
    border-radius: 12px;
    background: rgba(255,255,255,.93);
    box-shadow: 0 12px 28px rgba(11,34,57,.14);
    backdrop-filter: blur(10px);
}
.vector-route-badge > span {
    width: 31px;
    height: 31px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    color: #fff;
    background: var(--secondary);
    font-size: .9rem;
}
.vector-route-badge small,
.vector-route-badge b { display: block; }
.vector-route-badge small { color: var(--secondary); font-size: .55rem; font-weight: 900; letter-spacing: .1em; }
.vector-route-badge b { margin-top: 2px; color: var(--primary); font-size: .72rem; }
.vector-route-attribution {
    position: absolute;
    right: 13px;
    bottom: 11px;
    z-index: 10;
    padding: 5px 8px;
    border-radius: 7px;
    color: #466376;
    background: rgba(255,255,255,.82);
    font-size: .55rem;
    font-weight: 700;
}
@keyframes vectorRouteFlow { to { stroke-dashoffset: -250; } }
@keyframes vectorCurrentPulse {
    0% { box-shadow: 0 0 0 0 rgba(21,86,109,.52); }
    75% { box-shadow: 0 0 0 15px rgba(21,86,109,0); }
    100% { box-shadow: 0 0 0 0 rgba(21,86,109,0); }
}
@media (max-width: 900px) {
    #shipment-map[data-world-map] { height: 470px; min-height: 470px; }
    .vector-route-badge { min-width: 0; }
}
@media (max-width: 560px) {
    #shipment-map[data-world-map] { height: 430px; min-height: 430px; }
    .vector-route-toolbar { top: 12px; right: 12px; }
    .vector-route-badge { top: 12px; left: 12px; padding: 8px 10px; }
    .vector-route-badge b { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .vector-route-marker { max-width: 150px; padding-right: 8px; transform: translate(-50%, calc(-100% - 12px)) scale(.9); }
    .vector-route-marker b { max-width: 88px; }
    .vector-route-marker.overlap-left { transform: translate(calc(-50% - 26px), calc(-100% - 17px)) scale(.86); }
    .vector-route-marker.overlap-right { transform: translate(calc(-50% + 26px), calc(-100% + 13px)) scale(.86); }
    .vector-route-attribution { left: 12px; right: auto; }
}

/* ========================================================================
   Shipping Platform V2.8 — reference-matched tracking page and real map
   ======================================================================== */
.tracking-v28 { background: #f5f8fb; padding: 26px 0 72px; }
.tracking-v28 .tracking-shell { max-width: 1190px; }
.track28-breadcrumb { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 0 0 18px; font-size: .78rem; }
.track28-breadcrumb > a { display: inline-flex; align-items: center; gap: 7px; color: var(--primary); font-weight: 800; text-decoration: none; }
.track28-breadcrumb > a .icon { transform: rotate(180deg); }
.track28-breadcrumb > div { display: inline-flex; align-items: center; gap: 10px; color: #738596; }
.track28-breadcrumb > div b { color: var(--primary); letter-spacing: .03em; }
.track28-breadcrumb button { border: 1px solid #d7e2ea; border-radius: 7px; background: #fff; color: var(--primary); padding: 6px 9px; font-weight: 800; cursor: pointer; }

.track28-status-card,
.track28-progress-card,
.track28-route-section,
.track28-details,
.track28-history { border: 1px solid #dbe5ed; border-radius: 17px; background: #fff; box-shadow: 0 12px 35px rgba(12, 43, 67, .055); overflow: hidden; }
.track28-status-card { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(290px, .72fr); position: relative; border-top: 4px solid var(--primary); }
.track28-status-main { padding: 29px 32px 25px; }
.track28-status-kicker { display: inline-flex; align-items: center; gap: 8px; color: #607486; font-size: .69rem; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.track28-status-kicker i { width: 9px; height: 9px; border-radius: 50%; background: #2681bd; box-shadow: 0 0 0 4px rgba(38, 129, 189, .11); }
.track28-status-main h1 { margin: 11px 0 13px; color: var(--primary); font-size: clamp(2rem, 4vw, 3rem); line-height: 1; }
.track28-status-main h2 { margin: 0 0 5px; color: #1a3850; font-size: 1rem; }
.track28-status-main p { margin: 0; color: #758899; font-size: .78rem; }
.track28-delivery-card { padding: 29px 31px 24px; border-left: 1px solid #e2eaf0; background: linear-gradient(145deg, #fff, #fbfdff); }
.track28-delivery-card > span,
.track28-delivery-card > small { display: block; color: #6c8091; font-size: .67rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.track28-delivery-card > b { display: block; margin: 7px 0 19px; color: var(--primary); font-size: 1.55rem; }
.track28-delivery-card > strong { display: block; margin-top: 6px; color: var(--accent); font-size: 1rem; }
.track28-document-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 19px; }
.track28-document-actions a { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; border: 1px solid #d7e2e9; border-radius: 8px; padding: 8px 11px; color: var(--primary); background: #fff; font-size: .72rem; font-weight: 850; text-decoration: none; }
.track28-document-actions a.download { border-color: var(--primary); color: #fff; background: var(--primary); }
.track28-facts { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid #e2eaf0; }
.track28-facts article { min-width: 0; padding: 16px 22px; border-right: 1px solid #e2eaf0; }
.track28-facts article:last-child { border-right: 0; }
.track28-facts span { display: block; color: #6b7f90; font-size: .64rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.track28-facts b { display: block; margin-top: 6px; overflow: hidden; color: #17344b; font-size: .82rem; text-overflow: ellipsis; white-space: nowrap; }

.track28-progress-card { margin-top: 17px; padding: 23px 27px 28px; }
.track28-progress-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.track28-progress-card > header span { color: #6d8192; font-size: .66rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.track28-progress-card > header h2 { margin: 5px 0 0; color: var(--primary); font-size: 1.15rem; }
.track28-progress-card > header > div:last-child { text-align: right; }
.track28-progress-card > header > div:last-child b,
.track28-progress-card > header > div:last-child small { display: block; }
.track28-progress-card > header > div:last-child b { color: #29475c; font-size: .73rem; }
.track28-progress-card > header > div:last-child small { margin-top: 4px; color: #778a9a; font-size: .67rem; }
.track28-progress-line { --journey-progress: 0%; position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 28px; }
.track28-progress-line > i { position: absolute; left: 9%; right: 9%; top: 22px; height: 3px; border-radius: 99px; }
.track28-progress-line > i.base { background: #dce5eb; }
.track28-progress-line > i.fill { right: auto; width: calc(var(--journey-progress) * .82); background: linear-gradient(90deg, var(--primary), var(--accent)); }
.track28-progress-line article { position: relative; z-index: 1; text-align: center; }
.track28-progress-line article > div { display: grid; place-items: center; width: 45px; height: 45px; margin: 0 auto 10px; border: 4px solid #fff; border-radius: 12px; color: #8fa2b0; background: #dfe8ee; box-shadow: 0 0 0 1px #cad7df; }
.track28-progress-line article.complete > div { color: #fff; background: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.track28-progress-line article.current > div { color: #fff; background: var(--accent); box-shadow: 0 0 0 4px rgba(232, 111, 45, .14); }
.track28-progress-line article b,
.track28-progress-line article small { display: block; }
.track28-progress-line article b { color: #213d53; font-size: .72rem; }
.track28-progress-line article small { max-width: 145px; margin: 5px auto 0; color: #7b8e9e; font-size: .59rem; line-height: 1.45; }

.track28-route-section { margin-top: 17px; }
.track28-section-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 21px 24px 18px; border-bottom: 1px solid #e1e9ef; }
.track28-section-head span,
.track28-details > header span,
.track28-history > header span { display: block; color: #667c8e; font-size: .65rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.track28-section-head h2,
.track28-details > header h2,
.track28-history > header h2 { margin: 5px 0 0; color: var(--primary); font-size: 1.14rem; }
.track28-map-actions { display: flex; gap: 8px; }
.track28-map-actions button { border: 1px solid #d7e2e9; border-radius: 8px; padding: 8px 11px; color: var(--primary); background: #fff; font-size: .69rem; font-weight: 850; cursor: pointer; }
.track28-map-actions button:hover { border-color: var(--secondary); background: #f3f8fa; }
.track28-route-overview { display: grid; grid-template-columns: minmax(0, 1fr) 190px minmax(0, 1fr); align-items: center; padding: 17px 24px; border-bottom: 1px solid #e2eaf0; }
.track28-route-overview article span,
.track28-route-metrics article span { display: block; color: #728696; font-size: .6rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.track28-route-overview article b { display: block; margin-top: 5px; color: #18364c; font-size: .82rem; }
.track28-route-overview article small { display: block; margin-top: 3px; color: #8495a3; font-size: .59rem; }
.track28-route-overview .destination { text-align: right; }
.track28-route-arrow { display: flex; align-items: center; }
.track28-route-arrow i { flex: 1; height: 2px; background: #d8e2e8; }
.track28-route-arrow i:last-child { background: var(--accent); }
.track28-route-arrow span { display: grid; place-items: center; width: 35px; height: 35px; margin: 0 4px; border: 1px solid #dbe5ec; border-radius: 50%; color: var(--accent); background: #fff; box-shadow: 0 6px 17px rgba(15, 43, 63, .09); }
.track28-route-metrics { display: grid; grid-template-columns: repeat(5, 1fr); border-bottom: 1px solid #e2eaf0; }
.track28-route-metrics article { padding: 13px 19px; border-right: 1px solid #e2eaf0; }
.track28-route-metrics article:last-child { border-right: 0; }
.track28-route-metrics b { display: block; margin-top: 5px; color: #17354c; font-size: .72rem; }
.track28-map-layout { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(285px, .55fr); align-items: stretch; }
.track28-map-card { position: relative; min-height: 490px; background: #e9eef1; }
.track28-map-card #shipment-map { position: absolute; inset: 0; min-height: 490px; height: 100%; z-index: 1; background: #dfe7eb; }
.track28-map-card .map-loading { position: absolute; inset: 0; z-index: 8; display: grid; place-content: center; gap: 12px; color: var(--primary); background: #edf2f5; text-align: center; }
.track28-map-card .map-loading span { width: 38px; height: 38px; margin: auto; border: 3px solid #d3dfe6; border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }
.track28-map-card .map-fallback { position: absolute; inset: 30px; z-index: 9; place-content: center; border: 1px dashed #b9c8d2; border-radius: 14px; color: var(--primary); background: rgba(255,255,255,.94); text-align: center; }
.track28-map-card .map-fallback:not([hidden]) { display: grid; }
.track28-map-card .map-fallback p { max-width: 460px; color: #687d8d; }
.track28-map-card.is-expanded { position: fixed; inset: 18px; z-index: 9999; min-height: 0; border: 7px solid #fff; border-radius: 18px; box-shadow: 0 28px 90px rgba(0, 18, 34, .35); }
.track28-map-card.is-expanded #shipment-map { min-height: 0; }
body.map-expanded { overflow: hidden; }
.track28-map-legend { position: absolute; left: 16px; bottom: 16px; z-index: 600; display: flex; flex-wrap: wrap; gap: 12px; max-width: calc(100% - 32px); border: 1px solid rgba(205, 218, 227, .95); border-radius: 9px; padding: 8px 10px; color: #496174; background: rgba(255,255,255,.94); box-shadow: 0 8px 22px rgba(9, 36, 56, .1); font-size: .59rem; font-weight: 750; }
.track28-map-legend span { display: inline-flex; align-items: center; gap: 6px; }
.track28-map-legend i { width: 9px; height: 9px; border-radius: 50%; }
.track28-map-legend i.completed { background: var(--primary); }
.track28-map-legend i.remaining { background: var(--accent); }
.track28-map-legend i.current { background: #1d88bd; box-shadow: 0 0 0 4px rgba(29,136,189,.15); }
.track28-route-sidebar { display: grid; align-content: start; gap: 12px; padding: 14px; border-left: 1px solid #e2eaf0; background: #f8fafc; }
.track28-latest-movement,
.track28-route-summary { border: 1px solid #dce6ed; border-radius: 12px; background: #fff; box-shadow: 0 7px 22px rgba(15, 43, 63, .04); }
.track28-latest-movement { position: relative; padding: 18px 18px 18px 38px; }
.track28-latest-movement > header,
.track28-route-summary > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.track28-latest-movement > header span,
.track28-route-summary > header span { color: #6c8192; font-size: .61rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.track28-latest-movement > header time { color: #657b8c; font-size: .58rem; }
.track28-latest-movement .movement-dot { position: absolute; left: 16px; top: 58px; width: 12px; height: 12px; border: 3px solid #fff; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px rgba(232,111,45,.25); }
.track28-latest-movement h3 { margin: 20px 0 7px; color: var(--primary); font-size: 1rem; }
.track28-latest-movement > b { display: block; color: #2e4d63; font-size: .72rem; }
.track28-latest-movement p { margin: 11px 0; color: #617687; font-size: .68rem; line-height: 1.55; }
.track28-latest-movement > small { color: #8495a2; font-size: .58rem; }
.track28-route-summary { padding: 16px; }
.track28-route-summary > header b { color: #39566b; font-size: .63rem; }
.track28-route-summary ol { margin: 14px 0 0; padding: 0; list-style: none; }
.track28-route-summary li { position: relative; display: flex; align-items: center; gap: 11px; padding: 8px 0; }
.track28-route-summary li:not(:last-child)::after { content: ""; position: absolute; left: 14px; top: 36px; width: 1px; height: 18px; background: #d5e0e7; }
.track28-route-summary li > i { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 8px; color: #fff; background: var(--primary); font-size: .55rem; font-style: normal; font-weight: 900; }
.track28-route-summary li.current > i { background: var(--accent); }
.track28-route-summary li.destination > i { color: #5a7081; background: #e5edf2; }
.track28-route-summary li span,
.track28-route-summary li b { display: block; }
.track28-route-summary li span { color: #8192a0; font-size: .55rem; font-weight: 850; text-transform: uppercase; }
.track28-route-summary li b { margin-top: 2px; color: #203e54; font-size: .68rem; }

/* Leaflet marker system */
.leaflet-container { font-family: inherit; }
.leaflet-control-zoom { border: 0 !important; box-shadow: 0 7px 22px rgba(11, 39, 58, .15) !important; }
.leaflet-control-zoom a { color: var(--primary) !important; }
.real-route-marker-wrap { background: transparent !important; border: 0 !important; }
.real-route-marker { position: relative; display: flex; align-items: center; gap: 8px; width: max-content; max-width: 188px; min-height: 46px; border: 1px solid #d7e2e9; border-radius: 9px; padding: 7px 10px 7px 7px; color: var(--primary); background: rgba(255,255,255,.97); box-shadow: 0 8px 24px rgba(10, 39, 59, .17); }
.real-route-marker::after { content: ""; position: absolute; left: 18px; bottom: -8px; width: 14px; height: 14px; border-right: 1px solid #d7e2e9; border-bottom: 1px solid #d7e2e9; background: #fff; transform: rotate(45deg); }
.real-route-marker > span { position: relative; z-index: 1; display: grid; place-items: center; flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; color: #fff; background: var(--primary); font-size: .62rem; font-weight: 900; }
.real-route-marker.current > span { background: #1686b9; animation: realMapPulse 1.9s ease-out infinite; }
.real-route-marker.destination > span { background: var(--accent); }
.real-route-marker small,
.real-route-marker b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.real-route-marker small { color: #6c8191; font-size: .51rem; font-weight: 900; letter-spacing: .08em; }
.real-route-marker b { max-width: 124px; margin-top: 2px; color: #1d3b51; font-size: .64rem; }
.real-route-marker-wrap.overlap-origin .real-route-marker { transform: translate(-16px, -26px); }
.real-route-marker-wrap.overlap-current-origin .real-route-marker { transform: translate(38px, 24px); }
.real-route-marker-wrap.overlap-current-destination .real-route-marker { transform: translate(-20px, -28px); }
.real-route-marker-wrap.overlap-destination .real-route-marker { transform: translate(42px, 24px); }
.route-map-popup small,
.route-map-popup b { display: block; }
.route-map-popup small { color: #718696; font-size: .65rem; font-weight: 850; text-transform: uppercase; }
.route-map-popup b { margin-top: 4px; color: var(--primary); }
@keyframes realMapPulse { 0%{box-shadow:0 0 0 0 rgba(22,134,185,.38)}70%{box-shadow:0 0 0 10px rgba(22,134,185,0)}100%{box-shadow:0 0 0 0 rgba(22,134,185,0)} }

.track28-details { margin-top: 17px; padding: 21px 22px 22px; }
.track28-details > header,
.track28-history > header { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.track28-details > header > small { color: #7d8f9d; font-size: .62rem; }
.track28-detail-grid { display: grid; grid-template-columns: .92fr .92fr 1.25fr; gap: 13px; margin-top: 17px; }
.track28-party-card,
.track28-package-card { min-width: 0; border: 1px solid #dce6ed; border-radius: 11px; background: #fff; overflow: hidden; }
.track28-party-card { position: relative; padding: 18px; border-left: 4px solid var(--primary); }
.track28-party-card.receiver { border-left-color: var(--accent); }
.detail-card-title { display: flex; align-items: center; gap: 8px; color: #6d8292; font-size: .61rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.track28-party-card h3,
.track28-package-copy h3 { margin: 8px 0 12px; color: #17354c; font-size: .88rem; }
.track28-party-card dl,
.track28-package-copy dl { margin: 0; }
.track28-party-card dl > div,
.track28-package-copy dl > div { display: grid; grid-template-columns: 92px 1fr; gap: 9px; padding: 7px 0; border-top: 1px solid #edf2f5; }
.track28-party-card dt,
.track28-package-copy dt { color: #7b8e9d; font-size: .57rem; font-weight: 850; text-transform: uppercase; }
.track28-party-card dd,
.track28-package-copy dd { min-width: 0; margin: 0; overflow-wrap: anywhere; color: #2f4d63; font-size: .65rem; font-weight: 650; }
.track28-package-card { display: grid; grid-template-rows: 155px auto; }
.track28-package-image { position: relative; display: block; width: 100%; height: 155px; border: 0; padding: 0; background: #e8eef2; cursor: zoom-in; overflow: hidden; }
.track28-package-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.track28-package-image:hover img { transform: scale(1.035); }
.track28-package-image span { position: absolute; right: 10px; bottom: 10px; border-radius: 7px; padding: 7px 9px; color: #fff; background: rgba(8, 34, 52, .82); font-size: .59rem; font-weight: 800; }
.track28-package-placeholder { display: grid; place-content: center; gap: 8px; height: 155px; color: #7890a1; background: linear-gradient(135deg,#edf3f6,#e0e9ee); text-align: center; font-size: .65rem; }
.track28-package-placeholder .icon { margin: auto; }
.track28-package-copy { padding: 14px 16px 16px; }
.track28-package-copy dl > div { grid-template-columns: 80px 1fr; }

.track28-history { margin-top: 17px; padding: 21px 22px 24px; }
.track28-history > header > b { color: #5b7284; font-size: .68rem; }
.track28-history-list { margin-top: 17px; }
.track28-history-day + .track28-history-day { margin-top: 20px; }
.track28-history-day > h3 { margin: 0 0 7px; color: #314f64; font-size: .66rem; letter-spacing: .03em; text-transform: uppercase; }
.track28-history-day article { display: grid; grid-template-columns: 64px 22px 1fr; gap: 8px; min-height: 82px; }
.track28-history-day article time { padding-top: 8px; color: #557084; font-size: .64rem; font-weight: 750; }
.track28-history-day article > i { position: relative; }
.track28-history-day article > i::before { content: ""; position: absolute; left: 8px; top: 11px; z-index: 1; width: 8px; height: 8px; border: 2px solid #fff; border-radius: 50%; background: #3185b2; box-shadow: 0 0 0 2px #c4d6e1; }
.track28-history-day article.latest > i::before { background: var(--accent); box-shadow: 0 0 0 2px rgba(232,111,45,.28); }
.track28-history-day article > i::after { content: ""; position: absolute; left: 11px; top: 22px; bottom: 0; width: 1px; background: #d7e2e9; }
.track28-history-day article:last-child > i::after { display: none; }
.track28-history-day article > div { padding: 7px 0 16px; border-bottom: 1px solid #edf2f5; }
.track28-history-day article > div > span { color: var(--accent); font-size: .56rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.track28-history-day article h4 { margin: 3px 0 5px; color: #17364d; font-size: .76rem; }
.track28-history-day article b { display: block; color: #36556a; font-size: .65rem; }
.track28-history-day article p { margin: 6px 0; color: #64798a; font-size: .64rem; line-height: 1.5; }
.track28-history-day article small { color: #8a99a5; font-size: .56rem; }

@media (max-width: 980px) {
    .track28-status-card { grid-template-columns: 1fr; }
    .track28-delivery-card { border-top: 1px solid #e2eaf0; border-left: 0; }
    .track28-facts { grid-template-columns: repeat(2, 1fr); }
    .track28-facts article:nth-child(2) { border-right: 0; }
    .track28-facts article:nth-child(-n+2) { border-bottom: 1px solid #e2eaf0; }
    .track28-map-layout { grid-template-columns: 1fr; }
    .track28-route-sidebar { grid-template-columns: 1fr 1fr; border-top: 1px solid #e2eaf0; border-left: 0; }
    .track28-detail-grid { grid-template-columns: repeat(2, 1fr); }
    .track28-package-card { grid-column: 1 / -1; grid-template-columns: 280px 1fr; grid-template-rows: auto; }
    .track28-package-image,
    .track28-package-placeholder { height: 100%; min-height: 230px; }
}
@media (max-width: 720px) {
    .tracking-v28 { padding-top: 15px; }
    .track28-breadcrumb { align-items: flex-start; flex-direction: column; }
    .track28-breadcrumb > div { width: 100%; flex-wrap: wrap; }
    .track28-status-main,
    .track28-delivery-card { padding: 23px 20px; }
    .track28-status-main h1 { font-size: 2.2rem; }
    .track28-facts { grid-template-columns: 1fr; }
    .track28-facts article { border-right: 0; border-bottom: 1px solid #e2eaf0; }
    .track28-facts article:last-child { border-bottom: 0; }
    .track28-progress-card { padding: 20px 16px; overflow-x: auto; }
    .track28-progress-card > header { min-width: 640px; }
    .track28-progress-line { min-width: 640px; }
    .track28-section-head { align-items: flex-start; flex-direction: column; padding: 18px; }
    .track28-map-actions { width: 100%; }
    .track28-map-actions button { flex: 1; }
    .track28-route-overview { grid-template-columns: 1fr; gap: 14px; padding: 16px 18px; }
    .track28-route-overview .destination { text-align: left; }
    .track28-route-arrow { width: 100%; }
    .track28-route-metrics { grid-template-columns: repeat(2, 1fr); }
    .track28-route-metrics article { border-bottom: 1px solid #e2eaf0; }
    .track28-route-metrics article:nth-child(2n) { border-right: 0; }
    .track28-route-metrics article:last-child { grid-column: 1 / -1; }
    .track28-map-card,
    .track28-map-card #shipment-map { min-height: 430px; }
    .track28-map-card.is-expanded { inset: 8px; border-width: 4px; }
    .track28-route-sidebar { grid-template-columns: 1fr; }
    .track28-detail-grid { grid-template-columns: 1fr; }
    .track28-package-card { grid-column: auto; grid-template-columns: 1fr; grid-template-rows: 210px auto; }
    .track28-package-image,
    .track28-package-placeholder { min-height: 210px; height: 210px; }
    .track28-details,
    .track28-history { padding: 18px 15px; }
    .track28-details > header,
    .track28-history > header { align-items: flex-start; flex-direction: column; }
    .real-route-marker { max-width: 155px; transform: scale(.88); transform-origin: bottom left; }
    .real-route-marker b { max-width: 95px; }
    .track28-history-day article { grid-template-columns: 48px 18px 1fr; }
}

/* ================================================================
   SHIPPING PLATFORM V2.9 — LIVE SHIPMENT RESULT / OPTION 6 IMPLEMENTATION
   ================================================================ */
.tracking-v29{background:#f5f8fb;padding-bottom:54px}.tracking-v29 .tracking-shell{max-width:1420px}.track29-edge-summary,.track29-progress-card,.track29-alert,.track29-documents{background:#fff;border:1px solid #dbe5ec;border-radius:18px;box-shadow:0 12px 32px rgba(11,34,57,.07)}
.track29-edge-summary{display:grid;grid-template-columns:1.12fr 1.2fr 1.05fr .9fr;overflow:hidden;margin-bottom:18px}.track29-edge-item{position:relative;display:flex;align-items:flex-start;gap:14px;min-height:142px;padding:27px 24px;border-right:1px solid #e4ebf0}.track29-edge-item:last-of-type{border-right:0}.track29-edge-icon{width:43px;height:43px;border-radius:14px;display:grid;place-items:center;flex:0 0 auto;background:#eaf3ff;color:#1167d8}.track29-edge-item.destination .track29-edge-icon{background:#fff0e8;color:#f05b18}.track29-edge-item small,.track29-edge-facts small{display:block;margin-bottom:8px;color:#6b7d8e;font-size:11px;font-weight:800;letter-spacing:.11em;text-transform:uppercase}.track29-edge-item h1,.track29-edge-item h2{margin:0;color:#092b4b;line-height:1.16}.track29-edge-item h1{font-size:25px}.track29-edge-item h2{font-size:17px}.track29-edge-item p{margin:8px 0 0;color:#6b7d8e;font-size:13px;line-height:1.5}.track29-state-badge{position:absolute;left:80px;bottom:18px;padding:5px 10px;border-radius:999px;background:#fff1df;color:#d65616;border:1px solid #ffcda9;font-size:11px;text-transform:uppercase}.tone-success .track29-state-badge{background:#e9f8ef;color:#158044;border-color:#bce8cc}.track29-edge-facts{grid-column:1/-1;display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid #e4ebf0;background:#fbfcfd}.track29-edge-facts>span{padding:17px 24px;border-right:1px solid #e4ebf0}.track29-edge-facts>span:last-child{border-right:0}.track29-edge-facts b{color:#17354f;font-size:13px}.track29-invoice-shortcuts b{display:flex;gap:12px;flex-wrap:wrap}.track29-invoice-shortcuts a{color:#0968c9;text-decoration:none;font-weight:800}.track29-invoice-shortcuts a:last-child{color:#ed5c16}
.track29-progress-card{padding:27px 28px;margin-bottom:16px;overflow:hidden}.track29-progress-card>header{display:flex;justify-content:space-between;gap:30px;align-items:flex-start;margin-bottom:26px}.track29-progress-card>header span,.track29-documents header span{color:#65798b;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.track29-progress-card>header h2,.track29-documents header h2{margin:5px 0 0;color:#092b4b}.track29-progress-card>header>div:last-child{text-align:right}.track29-progress-card>header b{display:block;color:#092b4b}.track29-progress-card>header small{color:#718396}.track29-progress-track{position:relative;display:grid;grid-template-columns:repeat(5,1fr);min-height:185px;padding-top:12px}.track29-progress-base,.track29-progress-fill{position:absolute;top:38px;left:8%;right:8%;height:4px;border-radius:99px}.track29-progress-base{background:#dce4ea}.track29-progress-fill{right:auto;width:calc(var(--journey-progress) * .84);background:linear-gradient(90deg,#148d46,#148d46 45%,#1375dd);transition:width 1.2s cubic-bezier(.22,.75,.2,1)}.track29-progress-runner{position:absolute;z-index:4;top:18px;left:calc(8% + (var(--journey-progress) * .84));transform:translateX(-50%);width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:#fff;background:#1375dd;box-shadow:0 0 0 8px rgba(19,117,221,.11),0 8px 20px rgba(19,117,221,.25);animation:track29RunnerPulse 2.4s ease-in-out infinite}.track29-progress-card[data-operational-state="on_hold"] .track29-progress-runner,.track29-progress-card[data-operational-state="delayed"] .track29-progress-runner,.track29-progress-card[data-operational-state="exception"] .track29-progress-runner{background:#ef641d;animation:track29PausePulse 1.55s ease-in-out infinite}.track29-progress-track article{position:relative;z-index:5;text-align:center;padding:0 12px}.track29-node{width:54px;height:54px;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center;background:#eef2f5;border:2px solid #d4dee5;color:#7e8d9b;transition:.45s ease}.track29-progress-track article.complete .track29-node{background:#198e48;border-color:#198e48;color:#fff;box-shadow:0 0 0 6px rgba(25,142,72,.1)}.track29-progress-track article.current .track29-node{background:#1375dd;border-color:#fff;color:#fff;box-shadow:0 0 0 5px #dcecff,0 7px 22px rgba(19,117,221,.28);transform:scale(1.08)}.track29-progress-card[data-operational-state="on_hold"] article.current .track29-node,.track29-progress-card[data-operational-state="delayed"] article.current .track29-node,.track29-progress-card[data-operational-state="exception"] article.current .track29-node{background:#ef641d;box-shadow:0 0 0 5px #fff0e7,0 7px 22px rgba(239,100,29,.28)}.track29-progress-track article b{display:block;color:#16344e;font-size:14px}.track29-progress-track article time{display:block;margin:8px 0 5px;color:#6e8192;font-size:12px}.track29-progress-track article small{display:block;max-width:170px;margin:auto;color:#7a8b9a;font-size:12px;line-height:1.45}.track29-progress-track article em{display:inline-block;margin-top:8px;padding:4px 9px;border-radius:999px;background:#fff0e7;color:#df5412;font-size:10px;font-style:normal;font-weight:900;text-transform:uppercase}.track29-operational-row{display:flex;justify-content:center;align-items:center;gap:9px;flex-wrap:wrap;padding-top:19px;border-top:1px solid #e8edf1}.track29-operational-row>span{margin-right:8px;color:#718395;font-size:11px;font-weight:900;letter-spacing:.1em;text-transform:uppercase}.track29-operational-row i{padding:7px 13px;border:1px solid #d8e1e7;border-radius:999px;background:#f7f9fa;color:#687a89;font-size:11px;font-style:normal;font-weight:800}.track29-operational-row i.active{border-color:#f3a377;background:#fff0e7;color:#df5412;box-shadow:0 5px 14px rgba(223,84,18,.12)}.track29-operational-row .state-delivered.active{border-color:#91d1aa;background:#e9f8ef;color:#187e44}
.track29-alert{display:flex;align-items:center;gap:15px;margin-bottom:18px;padding:18px 22px;border-color:#ffc999;background:linear-gradient(90deg,#fff7ef,#fff)}.track29-alert>span{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#ef641d;color:#fff}.track29-alert b{color:#a83e0f}.track29-alert p{margin:4px 0 0;color:#6b7d8b}.track29-alert button{margin-left:auto;border:1px solid #d8e1e8;border-radius:9px;background:#fff;padding:10px 16px;color:#173a58;font-weight:800;cursor:pointer}
.track29-documents{margin:22px 0;padding:25px}.track29-documents>header{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;margin-bottom:17px}.track29-documents header small{color:#718396}.track29-document-grid article{display:flex;align-items:center;gap:15px;padding:18px;border:1px solid #e0e7ec;border-radius:13px;background:#fbfcfd}.track29-doc-icon{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:#eaf3ff;color:#146cc9}.track29-document-grid article>div:nth-child(2){flex:1}.track29-document-grid b{display:block;color:#12344f}.track29-document-grid small{color:#718395}.track29-doc-actions{display:flex;gap:8px;flex-wrap:wrap}.track29-doc-actions a{padding:9px 12px;border:1px solid #d7e2e9;border-radius:9px;color:#105fae;text-decoration:none;font-size:12px;font-weight:800;background:#fff}.track29-doc-actions a.download{background:#0e63b9;color:#fff;border-color:#0e63b9}
@keyframes track29RunnerPulse{0%,100%{box-shadow:0 0 0 7px rgba(19,117,221,.1),0 8px 20px rgba(19,117,221,.25)}50%{box-shadow:0 0 0 13px rgba(19,117,221,0),0 10px 26px rgba(19,117,221,.34)}}@keyframes track29PausePulse{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.12)}}
@media(max-width:1050px){.track29-edge-summary{grid-template-columns:1fr 1fr}.track29-edge-item:nth-child(2){border-right:0}.track29-edge-facts{grid-template-columns:repeat(2,1fr)}.track29-edge-facts>span:nth-child(even){border-right:0}.track29-progress-track{overflow-x:auto;grid-template-columns:repeat(5,minmax(165px,1fr));padding-bottom:8px}.track29-progress-base,.track29-progress-fill,.track29-progress-runner{display:none}}
@media(max-width:650px){.tracking-v29{padding-top:10px}.track29-edge-summary{display:block}.track29-edge-item{min-height:0;border-right:0;border-bottom:1px solid #e4ebf0;padding:20px}.track29-edge-facts{display:block}.track29-edge-facts>span{display:block;border-right:0;border-bottom:1px solid #e4ebf0}.track29-progress-card{padding:20px 15px}.track29-progress-card>header,.track29-documents>header{display:block}.track29-progress-card>header>div:last-child{text-align:left;margin-top:10px}.track29-progress-track{display:flex;flex-direction:column;overflow:visible;min-height:0;gap:10px}.track29-progress-track article{display:grid;grid-template-columns:52px 1fr;column-gap:12px;text-align:left;padding:12px;border:1px solid #e3e9ee;border-radius:12px}.track29-node{grid-row:1/5;margin:0}.track29-progress-track article small{max-width:none;margin:0}.track29-documents{padding:18px}.track29-document-grid article{align-items:flex-start;flex-wrap:wrap}.track29-doc-actions{width:100%}.track29-alert{align-items:flex-start;flex-wrap:wrap}.track29-alert button{margin-left:57px}}
.track29-stage-enter{animation:track29StageEnter .62s both cubic-bezier(.2,.75,.25,1)}@keyframes track29StageEnter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ==================================================================
   SHIPPING PLATFORM V2.9.1 — REFINED LIVE TRACKING RESULT
   Current status only, stronger typography, visible journey motion.
   ================================================================== */
.tracking-v29{font-size:16px;color:#15344e}
.tracking-v29 .tracking-shell{max-width:1440px}
.track29-edge-summary{grid-template-columns:1.18fr 1.14fr 1.08fr .9fr;margin-bottom:22px;border-radius:20px}
.track29-edge-item{min-height:158px;padding:30px 27px;gap:16px}
.track29-edge-icon{width:50px;height:50px;border-radius:16px;box-shadow:0 8px 22px rgba(17,103,216,.12)}
.track29-edge-item.status .track29-edge-icon{animation:track291StatusFloat 2.8s ease-in-out infinite}
.track29-edge-item small,.track29-edge-facts small{font-size:12px;margin-bottom:9px}
.track29-edge-item h1{font-size:31px;letter-spacing:-.025em}
.track29-edge-item h2{font-size:20px;letter-spacing:-.015em}
.track29-edge-item p{font-size:14px;line-height:1.55;margin-top:9px}
.track29-status-position{display:inline-flex;margin-top:8px;padding:5px 9px;border-radius:999px;background:#fff2e9;color:#c74d13;border:1px solid #ffd0b7;font-size:11px;font-weight:850;letter-spacing:.02em}
.tone-success .track29-status-position{background:#eaf8ef;color:#167a43;border-color:#bce7cc}
.track29-edge-facts{grid-template-columns:repeat(4,1fr)}
.track29-edge-facts>span{padding:19px 27px}
.track29-edge-facts b{font-size:14px;line-height:1.4}

.track29-progress-card{padding:31px 32px 27px;margin-bottom:22px;border-radius:20px}
.track29-progress-card>header{margin-bottom:31px;align-items:center}
.track29-progress-card>header h2{font-size:27px;letter-spacing:-.02em}
.track29-progress-card>header p{max-width:650px;margin:8px 0 0;color:#647a8d;font-size:14px;line-height:1.55}
.track29-progress-card>header>div:last-child{padding:12px 15px;border-radius:12px;background:#f5f8fb;border:1px solid #e0e8ee}
.track29-progress-card>header b{font-size:15px}
.track29-progress-card>header small{display:block;margin-top:5px;font-size:13px}
.track29-progress-track{min-height:222px;padding-top:17px}
.track29-progress-base,.track29-progress-fill{top:47px;height:5px}
.track29-progress-fill{overflow:hidden;background:linear-gradient(90deg,#168d49 0%,#168d49 35%,#1674d9 68%,#2d9ff1 100%);background-size:210% 100%;animation:track291Flow 2.2s linear infinite}
.track29-progress-fill::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.75) 48%,transparent 76%);transform:translateX(-110%);animation:track291Shimmer 2.1s ease-in-out infinite}
.track29-progress-runner{top:24px;width:50px;height:50px;box-shadow:0 0 0 9px rgba(19,117,221,.12),0 12px 27px rgba(19,117,221,.28)}
.track29-progress-card.is-live:not([data-operational-state="on_hold"]):not([data-operational-state="delayed"]):not([data-operational-state="exception"]):not([data-operational-state="returned"]):not([data-operational-state="cancelled"]) .track29-progress-runner{animation:track291RunnerMove 2.4s ease-in-out infinite}
.track29-progress-card[data-operational-state="on_hold"] .track29-progress-runner,.track29-progress-card[data-operational-state="delayed"] .track29-progress-runner,.track29-progress-card[data-operational-state="exception"] .track29-progress-runner,.track29-progress-card[data-operational-state="returned"] .track29-progress-runner,.track29-progress-card[data-operational-state="cancelled"] .track29-progress-runner{background:#ef641d;animation:track291Paused 1.5s ease-in-out infinite}
.track29-progress-track article{padding:0 15px}
.track29-progress-track article.current{margin:-10px 5px 0;padding:10px 14px 18px;border:1px solid #cfe0ed;border-radius:17px;background:linear-gradient(180deg,#f8fbfe,#fff);box-shadow:0 12px 30px rgba(9,43,75,.09)}
.track29-progress-card[data-operational-state="on_hold"] article.current,.track29-progress-card[data-operational-state="delayed"] article.current,.track29-progress-card[data-operational-state="exception"] article.current,.track29-progress-card[data-operational-state="returned"] article.current,.track29-progress-card[data-operational-state="cancelled"] article.current{border-color:#ffd1b6;background:linear-gradient(180deg,#fff8f3,#fff)}
.track29-node{position:relative;width:64px;height:64px;margin-bottom:16px}
.track29-progress-track article.current .track29-node::after{content:"";position:absolute;inset:-9px;border:2px solid rgba(19,117,221,.27);border-radius:50%;animation:track291NodeRing 1.8s ease-out infinite}
.track29-progress-card[data-operational-state="on_hold"] article.current .track29-node::after,.track29-progress-card[data-operational-state="delayed"] article.current .track29-node::after,.track29-progress-card[data-operational-state="exception"] article.current .track29-node::after,.track29-progress-card[data-operational-state="returned"] article.current .track29-node::after,.track29-progress-card[data-operational-state="cancelled"] article.current .track29-node::after{border-color:rgba(239,100,29,.34)}
.track29-progress-track article b{font-size:16px;line-height:1.3}
.track29-progress-track article time{font-size:13px;margin:9px 0 6px}
.track29-progress-track article small{max-width:190px;font-size:14px;line-height:1.5}

.track28-route-section{margin-top:0;padding:27px;border-radius:20px}
.track28-section-head>div>span,.track28-details>header span,.track28-history>header span{font-size:12px!important}
.track28-section-head h2,.track28-details>header h2,.track28-history>header h2{font-size:25px!important}
.track28-section-head p{max-width:690px;margin:7px 0 0;color:#6a7f90;font-size:14px;line-height:1.5}
.track28-map-actions button{font-size:13px;padding:10px 14px}
.track28-route-metrics article span{font-size:11px!important}
.track28-route-metrics article b{font-size:14px!important}
.track28-map-layout{grid-template-columns:minmax(0,1fr) 320px}
.track28-latest-movement{padding:23px 23px 23px 45px}
.track28-latest-movement>header span{font-size:11px}
.track28-latest-movement>header time{font-size:11px}
.track28-latest-movement h3{font-size:19px;margin-top:24px}
.track28-latest-movement>b{font-size:14px}
.track28-latest-movement p{font-size:14px;line-height:1.6}
.track28-latest-movement>small{font-size:12px}
.track28-latest-movement .movement-dot{width:14px;height:14px;animation:track291MovementDot 1.7s ease-out infinite}
.track28-map-legend{font-size:12px}

.track28-details,.track28-history{padding:27px;border-radius:20px}
.track28-details>header>small{font-size:12px}
.detail-card-title{font-size:12px}
.track28-party-card h3,.track28-package-copy h3{font-size:17px}
.track28-party-card dt,.track28-package-copy dt{font-size:11px}
.track28-party-card dd,.track28-package-copy dd{font-size:14px;line-height:1.45}
.track28-party-card dl>div,.track28-package-copy dl>div{padding:10px 0}
.track28-package-card{grid-template-rows:210px auto}
.track28-package-image,.track28-package-placeholder{height:210px}
.track28-package-image span{font-size:12px;padding:8px 11px}

.track29-documents{padding:28px;border-radius:20px}
.track29-documents header h2{font-size:25px}
.track29-documents header small{font-size:13px}
.track29-document-grid b{font-size:16px}
.track29-document-grid small{font-size:13px}
.track29-doc-actions a{font-size:13px;padding:10px 14px}

.track28-history>header>b{font-size:13px}
.track28-history-day>h3{font-size:12px}
.track28-history-day article{grid-template-columns:76px 25px 1fr;min-height:102px}
.track28-history-day article time{font-size:13px}
.track28-history-day article>div>span{font-size:11px}
.track28-history-day article h4{font-size:16px}
.track28-history-day article b{font-size:14px}
.track28-history-day article p{font-size:14px;line-height:1.55}
.track28-history-day article small{font-size:12px}

.leaflet-overlay-pane path.track-route-completed{stroke-dasharray:10 8;animation:track291MapDash 1.4s linear infinite}
.leaflet-overlay-pane path.track-route-remaining{stroke-dasharray:10 9;animation:track291MapDash 1.05s linear infinite reverse}
.real-route-marker.current{animation:track291MarkerFloat 2.5s ease-in-out infinite}

@keyframes track291StatusFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes track291Flow{0%{background-position:0 0}100%{background-position:210% 0}}
@keyframes track291Shimmer{0%,20%{transform:translateX(-115%)}75%,100%{transform:translateX(115%)}}
@keyframes track291RunnerMove{0%,100%{transform:translateX(-50%) translateY(0) scale(1);box-shadow:0 0 0 8px rgba(19,117,221,.12),0 10px 25px rgba(19,117,221,.25)}50%{transform:translateX(calc(-50% + 14px)) translateY(-3px) scale(1.07);box-shadow:0 0 0 14px rgba(19,117,221,0),0 15px 32px rgba(19,117,221,.35)}}
@keyframes track291Paused{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.13)}}
@keyframes track291NodeRing{0%{transform:scale(.78);opacity:.8}80%,100%{transform:scale(1.28);opacity:0}}
@keyframes track291MovementDot{0%{box-shadow:0 0 0 0 rgba(232,111,45,.38)}80%,100%{box-shadow:0 0 0 12px rgba(232,111,45,0)}}
@keyframes track291MapDash{to{stroke-dashoffset:-36}}
@keyframes track291MarkerFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

@media(max-width:1050px){
 .track29-edge-facts{grid-template-columns:repeat(2,1fr)}
 .track28-map-layout{grid-template-columns:1fr}
 .track28-route-sidebar{display:grid;grid-template-columns:1fr}
 .track29-progress-track article.current{margin:-6px 3px 0}
}
@media(max-width:650px){
 .track29-edge-item{padding:22px 20px}
 .track29-edge-item h1{font-size:27px}.track29-edge-item h2{font-size:19px}.track29-edge-item p{font-size:14px}
 .track29-progress-card{padding:23px 16px}
 .track29-progress-card>header>div:last-child{margin-top:14px;text-align:left}
 .track29-progress-track article,.track29-progress-track article.current{margin:0;padding:15px;border:1px solid #dfe8ee;border-radius:14px}
 .track29-progress-track article.current{background:#f7fbff}
 .track29-progress-track article b{font-size:16px}.track29-progress-track article time{font-size:13px}.track29-progress-track article small{font-size:14px}
 .track28-route-section,.track28-details,.track28-history,.track29-documents{padding:20px 15px}
 .track28-section-head h2,.track28-details>header h2,.track28-history>header h2,.track29-documents header h2{font-size:22px!important}
 .track28-route-metrics{grid-template-columns:1fr 1fr}
 .track28-route-metrics article:last-child{grid-column:1/-1}
 .track28-detail-grid{display:block}.track28-detail-grid>article+article{margin-top:13px}
 .track28-history-day article{grid-template-columns:58px 20px 1fr}
 .track29-document-grid article{padding:15px}
}
@media(prefers-reduced-motion:reduce){
 .tracking-v29 *{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
}
.tracking-result.shipment-refreshing::before{content:"Updating shipment status…";position:fixed;z-index:99999;left:50%;top:22px;transform:translateX(-50%);padding:12px 18px;border-radius:999px;background:#092b4b;color:#fff;font-size:14px;font-weight:850;box-shadow:0 14px 35px rgba(9,43,75,.28);animation:track291RefreshIn .35s both}
@keyframes track291RefreshIn{from{opacity:0;transform:translate(-50%,-10px)}to{opacity:1;transform:translate(-50%,0)}}
.tracking-v29 .tracking-breadcrumb{font-size:14px}
.tracking-v29 .tracking-breadcrumb a,.tracking-v29 .tracking-breadcrumb b,.tracking-v29 .tracking-breadcrumb button{font-size:13px}
.tracking-v29 .tracking-breadcrumb span{font-size:11px}
.tracking-v29 .real-route-marker{min-height:52px;max-width:220px;padding:9px 12px 9px 8px}
.tracking-v29 .real-route-marker>span{width:34px;height:34px;flex-basis:34px;font-size:11px}
.tracking-v29 .real-route-marker small{font-size:10px}
.tracking-v29 .real-route-marker b{max-width:150px;font-size:13px}
.tracking-v29 .route-map-popup small{font-size:11px}
.tracking-v29 .route-map-popup b{font-size:14px}

/* ==================================================================
   SHIPPING PLATFORM V2.9.2 — SYNCHRONIZED STATUS + JOURNEY ENGINE
   The top status and active journey milestone are one visual unit.
   ================================================================== */
.track292-status-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
.track292-status-line h1 { margin: 0; }
.track292-condition-badge {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 5px 11px;
    border: 1px solid #ffc9a9;
    border-radius: 999px;
    color: #c94e13;
    background: #fff2e9;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .035em;
    line-height: 1;
    text-transform: uppercase;
    box-shadow: 0 7px 18px rgba(232, 111, 45, .12);
    animation: track292ConditionPulse 2.2s ease-in-out infinite;
}
.track292-condition-badge.tone-danger {
    color: #a72e2e;
    border-color: #f1bbbb;
    background: #fff0f0;
    box-shadow: 0 7px 18px rgba(181, 54, 54, .11);
}
.track292-condition-badge.tone-success {
    color: #157444;
    border-color: #b8e4ca;
    background: #eaf8ef;
    box-shadow: 0 7px 18px rgba(22, 115, 75, .11);
}
.track292-stage-title {
    min-height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 7px;
}
.track292-stage-title em {
    display: inline-flex !important;
    align-items: center;
    margin: 0 !important;
    padding: 4px 8px !important;
    border: 1px solid #ffc8a5;
    border-radius: 999px;
    color: #c84d13 !important;
    background: #fff0e7 !important;
    font-size: 10px !important;
    font-style: normal;
    font-weight: 900;
    letter-spacing: .04em;
    line-height: 1;
    text-transform: uppercase;
    animation: track292ConditionPulse 2.2s ease-in-out infinite;
}
.track29-progress-card[data-operational-state="exception"] .track292-stage-title em,
.track29-progress-card[data-operational-state="returned"] .track292-stage-title em,
.track29-progress-card[data-operational-state="cancelled"] .track292-stage-title em {
    color: #a72e2e !important;
    border-color: #f0b8b8;
    background: #fff0f0 !important;
}
.track29-progress-card[data-moving="0"] .track29-progress-runner {
    animation: track292StationaryPulse 2.2s ease-in-out infinite;
}
.track29-progress-card[data-moving="1"] .track29-progress-runner {
    animation: track291RunnerMove 2.4s ease-in-out infinite;
}
.track29-progress-card[data-operational-state="on_hold"] .track29-progress-runner,
.track29-progress-card[data-operational-state="delayed"] .track29-progress-runner,
.track29-progress-card[data-operational-state="exception"] .track29-progress-runner,
.track29-progress-card[data-operational-state="returned"] .track29-progress-runner,
.track29-progress-card[data-operational-state="cancelled"] .track29-progress-runner {
    animation: track291Paused 1.5s ease-in-out infinite;
}
.track29-progress-card[data-operational-state="on_hold"] article.current small,
.track29-progress-card[data-operational-state="delayed"] article.current small,
.track29-progress-card[data-operational-state="exception"] article.current small,
.track29-progress-card[data-operational-state="returned"] article.current small,
.track29-progress-card[data-operational-state="cancelled"] article.current small {
    color: #6c4938;
    font-weight: 650;
}
.track29-progress-track article.current {
    isolation: isolate;
}
.track29-progress-track article.current::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -1px;
    border-radius: inherit;
    opacity: .7;
    background: linear-gradient(120deg, transparent 15%, rgba(19,117,221,.08) 45%, transparent 72%);
    background-size: 220% 100%;
    animation: track292ActiveSweep 3.2s linear infinite;
}
.track29-progress-card[data-operational-state="on_hold"] article.current::before,
.track29-progress-card[data-operational-state="delayed"] article.current::before,
.track29-progress-card[data-operational-state="exception"] article.current::before,
.track29-progress-card[data-operational-state="returned"] article.current::before,
.track29-progress-card[data-operational-state="cancelled"] article.current::before {
    background: linear-gradient(120deg, transparent 15%, rgba(239,100,29,.1) 45%, transparent 72%);
    background-size: 220% 100%;
}
@keyframes track292ConditionPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.035); opacity: .86; }
}
@keyframes track292StationaryPulse {
    0%, 100% { transform: translateX(-50%) scale(1); }
    50% { transform: translateX(-50%) scale(1.08); }
}
@keyframes track292ActiveSweep {
    from { background-position: 180% 0; }
    to { background-position: -40% 0; }
}
@media (max-width: 650px) {
    .track292-status-line { align-items: flex-start; }
    .track292-condition-badge { min-height: 28px; font-size: 11px; }
    .track292-stage-title { justify-content: flex-start; min-height: 0; }
}

/* ========================================================================
   Shipping Platform V2.9.3 — exact status synchronisation
   Current Status and the active progress node now use the same enum value.
   On hold, Delayed and Exception are their own visible journey nodes.
   ======================================================================== */
.track293-status-line {
    display: flex;
    align-items: center;
    min-height: 42px;
}
.track293-status-line h1 {
    margin: 0;
    font-size: clamp(1.75rem, 2.2vw, 2.25rem);
    line-height: 1.08;
}
.track29-edge-summary.tone-warning .track29-edge-item.status .track29-edge-icon,
.track29-edge-summary.tone-warning .track29-edge-item.status h1 {
    color: #d95816;
}
.track29-edge-summary.tone-danger .track29-edge-item.status .track29-edge-icon,
.track29-edge-summary.tone-danger .track29-edge-item.status h1 {
    color: #c52f31;
}
.track29-edge-summary.tone-returned .track29-edge-item.status .track29-edge-icon,
.track29-edge-summary.tone-returned .track29-edge-item.status h1 {
    color: #6843c5;
}
.track29-edge-summary.tone-success .track29-edge-item.status .track29-edge-icon,
.track29-edge-summary.tone-success .track29-edge-item.status h1 {
    color: #168047;
}

.track293-progress-track {
    grid-template-columns: repeat(var(--status-count, 6), minmax(138px, 1fr));
    min-width: calc(var(--status-count, 6) * 138px);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    scrollbar-color: #b9cad5 transparent;
    padding-bottom: 15px;
}
.track293-progress-track::-webkit-scrollbar { height: 8px; }
.track293-progress-track::-webkit-scrollbar-thumb { background: #c2d1db; border-radius: 99px; }
.track293-progress-track article {
    scroll-snap-align: center;
    min-width: 0;
}
.track293-progress-track article.current {
    isolation: isolate;
}
.track293-stage-title {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
}
.track293-stage-title b {
    font-size: 16px !important;
    line-height: 1.25;
}
.track293-progress-track article small {
    max-width: 210px;
    min-height: 44px;
    font-size: 14px;
}
.track293-progress-track article time {
    font-size: 13px;
    font-weight: 700;
}

/* Exact active-state colours. */
.track29-progress-card[data-operational-state="on_hold"] article.current .track29-node,
.track29-progress-card[data-operational-state="delayed"] article.current .track29-node {
    background: #e76619;
    border-color: #fff;
    box-shadow: 0 0 0 7px #fff0e7, 0 12px 28px rgba(231,102,25,.3);
}
.track29-progress-card[data-operational-state="exception"] article.current .track29-node,
.track29-progress-card[data-operational-state="cancelled"] article.current .track29-node {
    background: #c93438;
    border-color: #fff;
    box-shadow: 0 0 0 7px #ffeded, 0 12px 28px rgba(201,52,56,.28);
}
.track29-progress-card[data-operational-state="returned"] article.current .track29-node {
    background: #6843c5;
    border-color: #fff;
    box-shadow: 0 0 0 7px #f0ebff, 0 12px 28px rgba(104,67,197,.28);
}
.track29-progress-card[data-operational-state="delivered"] article.current .track29-node {
    background: #168047;
    border-color: #fff;
    box-shadow: 0 0 0 7px #e8f7ef, 0 12px 28px rgba(22,128,71,.26);
}
.track29-progress-card[data-operational-state="out_for_delivery"] article.current .track29-node {
    background: #e76619;
    border-color: #fff;
    box-shadow: 0 0 0 7px #fff0e7, 0 12px 28px rgba(231,102,25,.28);
}
.track29-progress-card[data-operational-state="exception"] article.current,
.track29-progress-card[data-operational-state="cancelled"] article.current {
    border-color: #f0b9bb;
    background: linear-gradient(180deg, #fff5f5, #fff);
}
.track29-progress-card[data-operational-state="returned"] article.current {
    border-color: #d4c8f4;
    background: linear-gradient(180deg, #f8f5ff, #fff);
}
.track29-progress-card[data-operational-state="delivered"] article.current {
    border-color: #b9dfc9;
    background: linear-gradient(180deg, #f2fbf6, #fff);
}

/* Runner uses the exact current state and remains clearly animated. */
.track29-progress-card[data-operational-state="on_hold"] .track29-progress-runner,
.track29-progress-card[data-operational-state="delayed"] .track29-progress-runner {
    background: #e76619;
}
.track29-progress-card[data-operational-state="exception"] .track29-progress-runner,
.track29-progress-card[data-operational-state="cancelled"] .track29-progress-runner {
    background: #c93438;
}
.track29-progress-card[data-operational-state="returned"] .track29-progress-runner {
    background: #6843c5;
}
.track29-progress-card[data-operational-state="delivered"] .track29-progress-runner {
    background: #168047;
}
.track29-progress-card[data-operational-state="in_transit"] .track29-progress-runner,
.track29-progress-card[data-operational-state="clearance"] .track29-progress-runner,
.track29-progress-card[data-operational-state="out_for_delivery"] .track29-progress-runner {
    animation: track293RunnerTravel 1.85s ease-in-out infinite;
}
.track29-progress-card[data-operational-state="on_hold"] .track29-progress-runner {
    animation: track293HoldPulse 1.35s ease-in-out infinite;
}
.track29-progress-card[data-operational-state="delayed"] .track29-progress-runner {
    animation: track293DelayPulse 1.6s ease-in-out infinite;
}
.track29-progress-card[data-operational-state="exception"] .track29-progress-runner,
.track29-progress-card[data-operational-state="cancelled"] .track29-progress-runner {
    animation: track293AlertPulse 1.25s ease-in-out infinite;
}
.track29-progress-card[data-operational-state="returned"] .track29-progress-runner {
    animation: track293ReturnPulse 1.8s ease-in-out infinite;
}
.track293-progress-track article.current .track29-node {
    position: relative;
}
.track293-progress-track article.current .track29-node::before {
    content: "";
    position: absolute;
    inset: -13px;
    border: 2px solid currentColor;
    border-radius: 50%;
    opacity: .2;
    animation: track293StatusWave 1.9s ease-out infinite;
}
.track293-progress-track article.current .track293-stage-title b {
    color: #0b2b49;
}
.track29-progress-card[data-operational-state="on_hold"] article.current .track293-stage-title b,
.track29-progress-card[data-operational-state="delayed"] article.current .track293-stage-title b,
.track29-progress-card[data-operational-state="out_for_delivery"] article.current .track293-stage-title b {
    color: #d95816;
}
.track29-progress-card[data-operational-state="exception"] article.current .track293-stage-title b,
.track29-progress-card[data-operational-state="cancelled"] article.current .track293-stage-title b {
    color: #bd2d31;
}
.track29-progress-card[data-operational-state="returned"] article.current .track293-stage-title b {
    color: #6843c5;
}
.track29-progress-card[data-operational-state="delivered"] article.current .track293-stage-title b {
    color: #168047;
}

@keyframes track293RunnerTravel {
    0%, 100% { transform: translateX(-50%) translateY(0) scale(1); }
    50% { transform: translateX(-50%) translateY(-5px) scale(1.08); }
}
@keyframes track293HoldPulse {
    0%, 100% { transform: translateX(-50%) scale(1); box-shadow: 0 0 0 8px rgba(231,102,25,.12), 0 10px 24px rgba(231,102,25,.24); }
    50% { transform: translateX(-50%) scale(.92); box-shadow: 0 0 0 14px rgba(231,102,25,.05), 0 6px 16px rgba(231,102,25,.18); }
}
@keyframes track293DelayPulse {
    0%, 100% { transform: translateX(-50%) rotate(0); }
    30% { transform: translateX(-50%) rotate(-5deg); }
    70% { transform: translateX(-50%) rotate(5deg); }
}
@keyframes track293AlertPulse {
    0%, 100% { transform: translateX(-50%) scale(1); }
    50% { transform: translateX(-50%) scale(1.12); }
}
@keyframes track293ReturnPulse {
    0%, 100% { transform: translateX(-50%) translateX(0); }
    50% { transform: translateX(-50%) translateX(-7px); }
}
@keyframes track293StatusWave {
    from { transform: scale(.72); opacity: .34; }
    to { transform: scale(1.35); opacity: 0; }
}

@media (max-width: 1050px) {
    .track293-progress-track {
        grid-template-columns: repeat(var(--status-count, 6), minmax(180px, 1fr));
        min-width: calc(var(--status-count, 6) * 180px);
    }
    .track293-progress-track .track29-progress-base,
    .track293-progress-track .track29-progress-fill,
    .track293-progress-track .track29-progress-runner {
        display: block;
    }
}

@media (max-width: 650px) {
    .track293-status-line h1 { font-size: 1.8rem; }
    .track293-progress-track {
        display: flex;
        flex-direction: row;
        gap: 12px;
        min-width: 0;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding: 4px 2px 16px;
    }
    .track293-progress-track .track29-progress-base,
    .track293-progress-track .track29-progress-fill,
    .track293-progress-track .track29-progress-runner {
        display: none;
    }
    .track293-progress-track article,
    .track293-progress-track article.current {
        flex: 0 0 min(82vw, 330px);
        display: grid;
        grid-template-columns: 58px 1fr;
        padding: 17px;
        min-height: 170px;
        scroll-snap-align: center;
    }
    .track293-progress-track .track29-node {
        grid-row: 1 / 5;
    }
    .track293-stage-title {
        justify-content: flex-start;
        min-height: 0;
    }
    .track293-progress-track article small {
        min-height: 0;
        font-size: 14px;
        line-height: 1.5;
    }
}

@media (prefers-reduced-motion: reduce) {
    .track29-progress-runner,
    .track293-progress-track article.current .track29-node::before {
        animation: none !important;
    }
}

/* ========================================================================
   Shipping Platform V2.9.4 — responsive shipment journey
   Desktop: complete connected route.
   Tablet: touch-friendly horizontal journey with the current status centred.
   Mobile: vertical timeline with no horizontal overflow.
   ======================================================================== */
.track29-progress-card {
    container-type: inline-size;
}
.track293-progress-track {
    max-width: 100%;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    scroll-padding-inline: 24px;
}
.track293-progress-track:focus-visible {
    outline: 3px solid rgba(19,117,221,.28);
    outline-offset: 5px;
    border-radius: 14px;
}
.track293-progress-track article {
    box-sizing: border-box;
}
.track293-progress-track article b,
.track293-progress-track article small,
.track293-progress-track article time {
    overflow-wrap: anywhere;
}

/* Keep the full connected route on larger screens without squeezing labels. */
@media (min-width: 1181px) {
    .track293-progress-track {
        min-width: 0;
        grid-template-columns: repeat(var(--status-count, 6), minmax(0, 1fr));
        overflow: visible;
        padding-inline: 0;
    }
    .track293-progress-track article {
        min-width: 0;
    }
}

/* Tablet and small laptop: preserve the journey layout, enable deliberate swipe. */
@media (min-width: 721px) and (max-width: 1180px) {
    .track29-progress-card {
        padding: 24px 20px;
    }
    .track29-progress-card > header {
        gap: 18px;
        margin-bottom: 22px;
    }
    .track293-progress-track {
        grid-template-columns: repeat(var(--status-count, 6), minmax(174px, 1fr));
        min-width: calc(var(--status-count, 6) * 174px);
        overflow-x: auto;
        overflow-y: hidden;
        padding: 12px 18px 19px;
        margin-inline: -8px;
        scroll-snap-type: x mandatory;
    }
    .track293-progress-track article {
        scroll-snap-align: center;
        scroll-snap-stop: always;
    }
    .track293-progress-track .track29-progress-base,
    .track293-progress-track .track29-progress-fill,
    .track293-progress-track .track29-progress-runner {
        display: block;
    }
}

/* Mobile: replace the cramped horizontal scroller with a true vertical journey. */
@media (max-width: 720px) {
    .track29-progress-card {
        padding: 20px 14px 18px;
        overflow: visible;
        border-radius: 16px;
    }
    .track29-progress-card > header {
        display: block;
        margin-bottom: 18px;
    }
    .track29-progress-card > header h2 {
        font-size: clamp(1.35rem, 6vw, 1.65rem);
        line-height: 1.18;
    }
    .track29-progress-card > header p {
        margin-top: 7px;
        font-size: 14px;
        line-height: 1.55;
    }
    .track29-progress-card > header > div:last-child {
        display: grid;
        gap: 3px;
        margin-top: 13px;
        padding: 12px 14px;
        border: 1px solid #dce7ee;
        border-radius: 12px;
        background: #f7fafc;
        text-align: left;
    }
    .track29-progress-card > header > div:last-child b {
        font-size: 15px;
        line-height: 1.35;
    }
    .track29-progress-card > header > div:last-child small {
        font-size: 12px;
        line-height: 1.4;
    }

    .track293-progress-track {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
        min-width: 0;
        min-height: 0;
        overflow: visible;
        padding: 2px 0 0;
        margin: 0;
        scroll-snap-type: none;
    }
    .track293-progress-track .track29-progress-base,
    .track293-progress-track .track29-progress-fill,
    .track293-progress-track .track29-progress-runner {
        display: none !important;
    }
    .track293-progress-track article,
    .track293-progress-track article.current {
        position: relative;
        display: grid;
        grid-template-columns: 58px minmax(0, 1fr);
        grid-template-areas:
            "node title"
            "node time"
            "node detail";
        column-gap: 13px;
        row-gap: 4px;
        width: 100%;
        min-width: 0;
        min-height: 124px;
        margin: 0;
        padding: 15px 14px;
        border: 1px solid #dfe8ee;
        border-radius: 14px;
        background: #fff;
        text-align: left;
        box-shadow: none;
        scroll-snap-align: none;
    }
    .track293-progress-track article:not(:last-of-type)::after {
        content: "";
        position: absolute;
        z-index: 0;
        left: 42px;
        top: 72px;
        bottom: -12px;
        width: 3px;
        border-radius: 99px;
        background: #dce5eb;
    }
    .track293-progress-track article.complete:not(:last-of-type)::after {
        background: #198e48;
    }
    .track293-progress-track article.current:not(:last-of-type)::after {
        background: linear-gradient(180deg, currentColor 0 24%, #dce5eb 24% 100%);
        opacity: .8;
    }
    .track293-progress-track article.current {
        border-color: #bfd9ec;
        background: linear-gradient(135deg, #f7fbff, #fff);
        box-shadow: 0 12px 28px rgba(9,43,75,.09);
    }
    .track293-progress-track .track29-node {
        grid-area: node;
        position: relative;
        z-index: 2;
        width: 54px;
        height: 54px;
        margin: 0;
        align-self: start;
    }
    .track293-stage-title {
        grid-area: title;
        justify-content: flex-start;
        align-items: flex-start;
        min-width: 0;
        min-height: 0;
        padding-top: 1px;
    }
    .track293-stage-title b {
        font-size: 17px !important;
        line-height: 1.28;
    }
    .track293-progress-track article time {
        grid-area: time;
        margin: 0;
        font-size: 13px;
        line-height: 1.4;
    }
    .track293-progress-track article small {
        grid-area: detail;
        max-width: none;
        min-width: 0;
        min-height: 0;
        margin: 2px 0 0;
        font-size: 14px;
        line-height: 1.5;
    }
    .track293-progress-track article.current .track29-node::before {
        inset: -9px;
    }
}

@media (max-width: 420px) {
    .track29-progress-card {
        padding-inline: 11px;
    }
    .track293-progress-track article,
    .track293-progress-track article.current {
        grid-template-columns: 50px minmax(0, 1fr);
        column-gap: 11px;
        min-height: 116px;
        padding: 13px 11px;
    }
    .track293-progress-track .track29-node {
        width: 47px;
        height: 47px;
    }
    .track293-progress-track article:not(:last-of-type)::after {
        left: 34px;
        top: 65px;
    }
    .track293-stage-title b {
        font-size: 16px !important;
    }
    .track293-progress-track article small {
        font-size: 13px;
    }
}

/* ========================================================================
   Shipping Platform V2.9.5 — complete responsive shipment tracking result
   Covers summary, journey, map, route metrics, parties, package image,
   invoice actions, proof, history and full-screen map on every screen size.
   ======================================================================== */
.tracking-v29,
.tracking-v29 * { min-width: 0; }
.tracking-v29 { overflow-x: clip; }
.tracking-v29 .tracking-shell {
    width: min(1420px, calc(100% - 48px));
    max-width: 1420px;
}
.tracking-v29 .track29-edge-summary,
.tracking-v29 .track29-progress-card,
.tracking-v29 .track28-route-section,
.tracking-v29 .track28-details,
.tracking-v29 .track29-documents,
.tracking-v29 .track28-history,
.tracking-v29 .proof-evidence { max-width: 100%; }

/* Top edge summary */
.tracking-v29 .track29-edge-item > div { min-width: 0; }
.tracking-v29 .track29-edge-item h1,
.tracking-v29 .track29-edge-item h2,
.tracking-v29 .track29-edge-item p,
.tracking-v29 .track29-edge-facts b { overflow-wrap: anywhere; }
.tracking-v29 .track29-edge-facts > span { min-width: 0; }

/* Route section and responsive map */
.tracking-v29 .track28-route-section { overflow: hidden; }
.tracking-v29 .track28-section-head > div:first-child { min-width: 0; }
.tracking-v29 .track28-map-layout { min-width: 0; }
.tracking-v29 .track28-map-card {
    width: 100%;
    height: clamp(470px, 45vw, 640px);
    min-height: 470px;
    overflow: hidden;
    isolation: isolate;
}
.tracking-v29 .track28-map-card #shipment-map {
    width: 100%;
    height: 100%;
    min-height: 0;
    touch-action: pan-x pan-y;
}
.tracking-v29 .track28-map-card .leaflet-container { font-family: var(--font); }
.tracking-v29 .track28-map-card .leaflet-control-container { font-size: 13px; }
.tracking-v29 .track28-map-card .leaflet-control-zoom a {
    width: 40px;
    height: 40px;
    line-height: 38px;
    font-size: 21px;
}
.tracking-v29 .track28-map-card .leaflet-control-attribution {
    max-width: min(78vw, 520px);
    white-space: normal;
    line-height: 1.25;
}
.tracking-v29 .track28-map-legend {
    right: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    max-width: calc(100% - 32px);
}
.tracking-v29 .track28-route-sidebar { min-width: 0; }
.tracking-v29 .track28-latest-movement { height: 100%; }
.tracking-v29 .real-route-marker-wrap { pointer-events: auto; }
.tracking-v29 .real-route-marker {
    max-width: min(220px, 40vw);
    min-width: 0;
}
.tracking-v29 .real-route-marker div { min-width: 0; }
.tracking-v29 .real-route-marker b {
    display: block;
    max-width: min(150px, 29vw);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tracking-v29 .track28-map-card.is-expanded {
    width: auto;
    height: auto;
    max-width: none;
}

/* Details, package, documents and history */
.tracking-v29 .track28-party-card,
.tracking-v29 .track28-package-card,
.tracking-v29 .track29-document-grid article { min-width: 0; }
.tracking-v29 .track28-party-card dd,
.tracking-v29 .track28-package-copy dd,
.tracking-v29 .track29-document-grid small { overflow-wrap: anywhere; }
.tracking-v29 .track29-doc-actions a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.tracking-v29 .proof-evidence { overflow: hidden; }
.tracking-v29 .proof-evidence > div,
.tracking-v29 .proof-evidence > button { min-width: 0; }
.tracking-v29 .lightbox img { max-width: min(94vw, 1280px); max-height: 88vh; object-fit: contain; }

/* Medium desktop / landscape tablet */
@media (max-width: 1180px) {
    .tracking-v29 .tracking-shell { width: min(100% - 36px, 1120px); }
    .tracking-v29 .track29-edge-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tracking-v29 .track29-edge-item:nth-child(2n) { border-right: 0; }
    .tracking-v29 .track29-edge-item:nth-child(-n+2) { border-bottom: 1px solid #e4ebf0; }
    .tracking-v29 .track29-edge-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tracking-v29 .track29-edge-facts > span:nth-child(2n) { border-right: 0; }
    .tracking-v29 .track29-edge-facts > span:nth-child(-n+2) { border-bottom: 1px solid #e4ebf0; }
    .tracking-v29 .track28-map-layout { grid-template-columns: minmax(0, 1fr); }
    .tracking-v29 .track28-route-sidebar {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        border-top: 1px solid #e2eaf0;
        border-left: 0;
    }
    .tracking-v29 .track28-map-card {
        height: clamp(470px, 62vw, 620px);
        min-height: 470px;
    }
    .tracking-v29 .track28-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tracking-v29 .track28-package-card {
        grid-column: 1 / -1;
        grid-template-columns: minmax(260px, .8fr) minmax(0, 1.2fr);
        grid-template-rows: minmax(260px, auto);
    }
    .tracking-v29 .track28-package-image,
    .tracking-v29 .track28-package-placeholder { height: 100%; min-height: 260px; }
}

/* Portrait tablet */
@media (max-width: 860px) {
    .tracking-v29 { padding-top: 18px; }
    .tracking-v29 .tracking-shell { width: min(100% - 28px, 820px); }
    .tracking-v29 .track28-breadcrumb {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }
    .tracking-v29 .track28-breadcrumb > div {
        width: 100%;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
    }
    .tracking-v29 .track28-breadcrumb > div b { overflow-wrap: anywhere; }
    .tracking-v29 .track29-edge-item { min-height: 128px; padding: 22px 20px; }
    .tracking-v29 .track29-edge-item h1 { font-size: 28px; }
    .tracking-v29 .track29-edge-item h2 { font-size: 19px; }
    .tracking-v29 .track29-edge-item p { font-size: 14px; }
    .tracking-v29 .track28-section-head,
    .tracking-v29 .track28-details > header,
    .tracking-v29 .track28-history > header,
    .tracking-v29 .track29-documents > header {
        align-items: flex-start;
        flex-direction: column;
    }
    .tracking-v29 .track28-map-actions {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .tracking-v29 .track28-map-actions button { min-height: 44px; }
    .tracking-v29 .track28-route-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .tracking-v29 .track28-route-metrics article:nth-child(3n) { border-right: 0; }
    .tracking-v29 .track28-route-metrics article:nth-child(-n+3) { border-bottom: 1px solid #e2eaf0; }
    .tracking-v29 .track28-route-metrics article:nth-child(4) { border-right: 1px solid #e2eaf0; }
    .tracking-v29 .track28-route-metrics article:last-child { grid-column: auto; }
    .tracking-v29 .track28-map-card {
        height: clamp(440px, 70vw, 560px);
        min-height: 440px;
    }
    .tracking-v29 .track29-document-grid article {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: start;
    }
    .tracking-v29 .track29-doc-actions {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
    }
    .tracking-v29 .track28-history-day article { grid-template-columns: 68px 23px minmax(0, 1fr); }
}

/* Phones: every tracking block becomes a clean single-column experience. */
@media (max-width: 640px) {
    .tracking-v29 { padding: 10px 0 42px; }
    .tracking-v29 .tracking-shell { width: calc(100% - 20px); }
    .tracking-v29 .track28-breadcrumb { margin-bottom: 12px; font-size: 13px; }
    .tracking-v29 .track28-breadcrumb > div {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
        padding: 10px 12px;
        border: 1px solid #dce6ed;
        border-radius: 12px;
        background: #fff;
    }
    .tracking-v29 .track28-breadcrumb > div span { grid-column: 1 / -1; }
    .tracking-v29 .track28-breadcrumb > div b { font-size: 13px; }
    .tracking-v29 .track28-breadcrumb button { min-height: 40px; }

    .tracking-v29 .track29-edge-summary { display: block; border-radius: 15px; }
    .tracking-v29 .track29-edge-item {
        min-height: 0;
        padding: 19px 16px;
        border-right: 0;
        border-bottom: 1px solid #e4ebf0;
    }
    .tracking-v29 .track29-edge-item:last-of-type { border-bottom: 0; }
    .tracking-v29 .track29-edge-icon { width: 46px; height: 46px; border-radius: 13px; }
    .tracking-v29 .track29-edge-item h1 { font-size: 27px; }
    .tracking-v29 .track29-edge-item h2 { font-size: 18px; }
    .tracking-v29 .track29-edge-item p { font-size: 14px; line-height: 1.5; }
    .tracking-v29 .track29-edge-facts { display: grid; grid-template-columns: minmax(0, 1fr); }
    .tracking-v29 .track29-edge-facts > span {
        padding: 15px 17px;
        border-right: 0;
        border-bottom: 1px solid #e4ebf0;
    }
    .tracking-v29 .track29-edge-facts > span:last-child { border-bottom: 0; }
    .tracking-v29 .track29-edge-facts b { font-size: 14px; line-height: 1.4; }

    .tracking-v29 .track29-progress-card,
    .tracking-v29 .track28-route-section,
    .tracking-v29 .track28-details,
    .tracking-v29 .track29-documents,
    .tracking-v29 .track28-history { border-radius: 15px; }
    .tracking-v29 .track28-route-section,
    .tracking-v29 .track28-details,
    .tracking-v29 .track29-documents,
    .tracking-v29 .track28-history { padding: 17px 12px; }
    .tracking-v29 .track28-section-head { padding: 0 0 15px; }
    .tracking-v29 .track28-section-head h2,
    .tracking-v29 .track28-details > header h2,
    .tracking-v29 .track29-documents header h2,
    .tracking-v29 .track28-history > header h2 { font-size: 21px !important; }
    .tracking-v29 .track28-section-head p { font-size: 14px; }
    .tracking-v29 .track28-map-actions { grid-template-columns: minmax(0, 1fr); }

    .tracking-v29 .track28-route-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin: 0 -12px;
    }
    .tracking-v29 .track28-route-metrics article {
        min-height: 76px;
        padding: 13px 14px;
        border-right: 1px solid #e2eaf0;
        border-bottom: 1px solid #e2eaf0;
    }
    .tracking-v29 .track28-route-metrics article:nth-child(2n) { border-right: 0; }
    .tracking-v29 .track28-route-metrics article:nth-child(3n) { border-right: 1px solid #e2eaf0; }
    .tracking-v29 .track28-route-metrics article:last-child {
        grid-column: 1 / -1;
        border-right: 0;
        border-bottom: 0;
    }
    .tracking-v29 .track28-route-metrics article span { font-size: 10px !important; }
    .tracking-v29 .track28-route-metrics article b { font-size: 14px !important; }

    .tracking-v29 .track28-map-layout { margin: 0 -12px -17px; }
    .tracking-v29 .track28-map-card {
        width: 100%;
        height: clamp(350px, 92vw, 470px);
        min-height: 350px;
        border-radius: 0;
    }
    .tracking-v29 .track28-map-card .leaflet-control-zoom { margin-right: 10px; margin-bottom: 52px; }
    .tracking-v29 .track28-map-card .leaflet-control-zoom a {
        width: 38px;
        height: 38px;
        line-height: 36px;
    }
    .tracking-v29 .track28-map-legend {
        left: 9px;
        right: 9px;
        bottom: 9px;
        max-width: none;
        padding: 8px 10px;
        gap: 7px 11px;
        border-radius: 10px;
        font-size: 10px;
        line-height: 1.25;
    }
    .tracking-v29 .track28-map-legend span { white-space: nowrap; }
    .tracking-v29 .real-route-marker {
        max-width: 132px;
        min-height: 44px;
        padding: 7px 8px 7px 6px;
        border-radius: 10px;
    }
    .tracking-v29 .real-route-marker > span {
        width: 29px;
        height: 29px;
        flex-basis: 29px;
        font-size: 10px;
    }
    .tracking-v29 .real-route-marker small { font-size: 8px; }
    .tracking-v29 .real-route-marker b { max-width: 86px; font-size: 10px; }
    .tracking-v29 .track28-route-sidebar { border-top: 1px solid #e2eaf0; }
    .tracking-v29 .track28-latest-movement { padding: 20px 18px 20px 39px; }
    .tracking-v29 .track28-latest-movement h3 { font-size: 18px; }
    .tracking-v29 .track28-latest-movement p { font-size: 14px; }
    .tracking-v29 .track28-map-card.is-expanded {
        inset: 0;
        z-index: 10050;
        border: 0;
        border-radius: 0;
        height: 100dvh;
        min-height: 100dvh;
    }
    .tracking-v29 .track28-map-card.is-expanded #shipment-map { height: 100%; }

    .tracking-v29 .track28-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .tracking-v29 .track28-package-card {
        grid-column: auto;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: clamp(220px, 68vw, 310px) auto;
    }
    .tracking-v29 .track28-package-image,
    .tracking-v29 .track28-package-placeholder { height: 100%; min-height: 0; }
    .tracking-v29 .track28-party-card { padding: 17px 15px; }
    .tracking-v29 .track28-party-card h3,
    .tracking-v29 .track28-package-copy h3 { font-size: 17px; }
    .tracking-v29 .track28-party-card dl > div,
    .tracking-v29 .track28-package-copy dl > div {
        grid-template-columns: minmax(82px, 34%) minmax(0, 1fr);
        gap: 9px;
    }
    .tracking-v29 .track28-party-card dd,
    .tracking-v29 .track28-package-copy dd { font-size: 14px; }

    .tracking-v29 .track29-document-grid article {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 12px;
        padding: 15px 13px;
    }
    .tracking-v29 .track29-doc-actions {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }
    .tracking-v29 .track29-doc-actions a { width: 100%; font-size: 14px; }

    .tracking-v29 .proof-evidence {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 15px;
        padding: 18px 15px;
    }
    .tracking-v29 .proof-evidence button { width: 100%; }
    .tracking-v29 .proof-evidence img { width: 100%; max-height: 340px; object-fit: cover; }

    .tracking-v29 .track28-history-day article {
        grid-template-columns: 50px 18px minmax(0, 1fr);
        gap: 7px;
    }
    .tracking-v29 .track28-history-day article time { font-size: 12px; }
    .tracking-v29 .track28-history-day article h4 { font-size: 15px; }
    .tracking-v29 .track28-history-day article b,
    .tracking-v29 .track28-history-day article p { font-size: 13px; }
}

@media (max-width: 390px) {
    .tracking-v29 .tracking-shell { width: calc(100% - 14px); }
    .tracking-v29 .track29-edge-item { gap: 11px; padding-inline: 13px; }
    .tracking-v29 .track29-edge-icon { width: 42px; height: 42px; }
    .tracking-v29 .track29-edge-item h1 { font-size: 24px; }
    .tracking-v29 .track28-route-section,
    .tracking-v29 .track28-details,
    .tracking-v29 .track29-documents,
    .tracking-v29 .track28-history { padding-inline: 10px; }
    .tracking-v29 .track28-route-metrics,
    .tracking-v29 .track28-map-layout { margin-inline: -10px; }
    .tracking-v29 .track28-map-card { height: 345px; min-height: 345px; }
    .tracking-v29 .track28-map-legend span:nth-child(2) { display: none; }
    .tracking-v29 .track28-party-card dl > div,
    .tracking-v29 .track28-package-copy dl > div { grid-template-columns: minmax(72px, 31%) minmax(0, 1fr); }
}

@media (orientation: landscape) and (max-height: 520px) and (max-width: 980px) {
    .tracking-v29 .track28-map-card { height: 78vh; min-height: 320px; }
    .tracking-v29 .track28-map-card.is-expanded { height: 100dvh; min-height: 100dvh; }
}
.tracking-v29 .map-expanded-close {
    position: absolute;
    z-index: 1200;
    top: 14px;
    right: 14px;
    min-height: 44px;
    padding: 10px 15px;
    border: 1px solid rgba(255,255,255,.55);
    border-radius: 10px;
    color: #fff;
    background: rgba(9,43,75,.92);
    box-shadow: 0 10px 28px rgba(9,43,75,.26);
    font-weight: 850;
    backdrop-filter: blur(10px);
}
.tracking-v29 .map-expanded-close[hidden] { display: none; }
@media (max-width: 640px) {
    .tracking-v29 .map-expanded-close { top: 10px; right: 10px; }
}

/* Built-in geographic fallback for public tracking */
#shipment-map.vector-public-map{background:#dcebf0;overflow:hidden}.vector-public-map .coral-vector-map-svg{display:block;width:100%;height:100%;touch-action:none}.vector-public-map .vector-map-base{pointer-events:none}.vector-public-map .vector-route{fill:none;stroke-linecap:round;vector-effect:non-scaling-stroke}.vector-public-map .vector-route.completed{stroke:var(--primary);stroke-width:3;stroke-dasharray:7 6;animation:publicVectorRoute 1.6s linear infinite}.vector-public-map .vector-route.remaining{stroke:var(--accent);stroke-width:3.8;stroke-dasharray:9 6;animation:publicVectorRoute 1.2s linear infinite reverse}.vector-public-map .vector-marker{color:var(--primary)}.vector-public-map .vector-marker.current{color:#1686b9}.vector-public-map .vector-marker.destination{color:var(--accent)}.vector-public-map .marker-pulse{fill:rgba(255,255,255,.65);stroke:currentColor;stroke-width:.45;animation:publicVectorPulse 2s ease-in-out infinite}.vector-public-map .marker-core{fill:currentColor;stroke:#fff;stroke-width:.55}.vector-public-map .marker-number{fill:#fff;font-size:2.6px;font-weight:900}.vector-public-map .marker-label{fill:#0b2942;font-size:3px;font-weight:900;paint-order:stroke;stroke:#fff;stroke-width:1.7px;stroke-linejoin:round}.site-template-meridian .vector-public-map .marker-label{fill:#fff;stroke:#071722}@keyframes publicVectorRoute{to{stroke-dashoffset:-26}}@keyframes publicVectorPulse{50%{r:5.6;opacity:.4}}

/* V3.5.0 performance and lightweight live-experience layer */
.preloader{animation:preloaderFailsafe .01s .85s forwards}.preloader.is-ready .preloader-core{transform:translateY(0);opacity:1}.preloader-core{transform:translateY(5px);opacity:.94;transition:transform .28s ease,opacity .28s ease}
img[loading="lazy"]{content-visibility:auto}.hero-image,.inner-hero-visual img,.service-panel>img,.service-matrix-card>img,.coverage-panel>img,.story-image>img,.contact-guidance>img{aspect-ratio:16/9}
@supports(content-visibility:auto){main>section:nth-of-type(n+3){content-visibility:auto;contain-intrinsic-size:auto 760px}}
main>section:not(.is-visible) *{animation-play-state:paused!important}

.service-carousel-controls{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:20px}
.service-carousel-controls button{width:42px;height:42px;display:grid;place-items:center;border:1px solid var(--theme-line,var(--line));border-radius:50%;background:var(--theme-surface,#fff);color:var(--theme-heading,var(--primary));font-size:20px;font-weight:900;box-shadow:var(--theme-soft-shadow,var(--shadow-sm));transition:transform .2s ease,border-color .2s ease}
.service-carousel-controls button:hover{transform:translateY(-2px);border-color:var(--accent)}
.service-carousel-controls>span{width:110px;height:5px;overflow:hidden;border-radius:999px;background:var(--theme-surface-3,#dbe4e9)}
.service-carousel-controls i{display:block;width:33.333%;height:100%;border-radius:inherit;background:var(--accent);transition:width .35s ease}
.service-panel[data-service-slide]{transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease,opacity .3s ease}
.service-panel[data-service-slide].is-live{transform:translateY(-7px);border-color:color-mix(in srgb,var(--accent) 58%,var(--theme-line));box-shadow:0 24px 58px color-mix(in srgb,var(--accent) 15%,transparent)}
.service-panel[data-service-slide].is-live::after{content:"ACTIVE SERVICE";position:absolute;top:16px;right:16px;padding:7px 10px;border-radius:999px;background:var(--accent);color:var(--accent-contrast,#fff);font-size:.62rem;font-weight:900;letter-spacing:.09em;box-shadow:0 8px 22px rgba(0,0,0,.15)}

.operation-ticker{display:grid;grid-template-columns:minmax(160px,.65fr) minmax(220px,1.35fr) auto;gap:14px;align-items:center;padding:14px 18px;border-top:1px solid rgba(255,255,255,.10);border-bottom:1px solid rgba(255,255,255,.10);background:rgba(3,16,27,.36)}
.operation-ticker>span{display:flex;align-items:center;gap:9px;color:#fff}.operation-ticker>span i{width:9px;height:9px;border-radius:50%;background:#49d39a;box-shadow:0 0 0 6px rgba(73,211,154,.12);animation:pulseDot 2s infinite}.operation-ticker b{font-size:.82rem}.operation-ticker small{color:#a9bfcb}.operation-ticker em{min-width:48px;text-align:right;color:var(--accent);font-size:.72rem;font-style:normal;font-weight:900;letter-spacing:.08em}
.operation-ticker[data-phase="2"]>span i{background:#67b8ec}.operation-ticker[data-phase="3"]>span i{background:var(--accent)}.operation-ticker[data-phase="4"]>span i{background:#d6ad5b}
.movement-point.current b{transition:opacity .22s ease,transform .22s ease}

.form-progress{display:flex;align-items:center;gap:11px;margin-top:15px}.form-progress>span{flex:1;height:7px;overflow:hidden;border-radius:999px;background:var(--theme-surface-3,#dce6ed)}.form-progress i{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--secondary),var(--accent));transition:width .28s ease}.form-progress small{min-width:92px;text-align:right;color:var(--theme-muted,var(--muted));font-weight:750}
[data-card-rotator]>article{transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease}[data-card-rotator]>article.is-live{border-color:color-mix(in srgb,var(--accent) 48%,var(--theme-line))!important;transform:translateY(-4px);box-shadow:0 20px 46px color-mix(in srgb,var(--accent) 11%,transparent)!important}
.faq-list details[open]{border-color:color-mix(in srgb,var(--accent) 52%,var(--theme-line))!important}.faq-list details[open] summary{color:var(--accent)!important}

@media(max-width:760px){
  .service-showcase[data-service-carousel]{display:grid!important;grid-auto-flow:column;grid-auto-columns:minmax(84%,1fr);grid-template-columns:none!important;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 3px 18px;scrollbar-width:none}.service-showcase[data-service-carousel]::-webkit-scrollbar{display:none}.service-panel[data-service-slide]{scroll-snap-align:start}.service-panel[data-service-slide].is-live{transform:none}
  .service-carousel-controls{justify-content:center}.operation-ticker{grid-template-columns:1fr auto}.operation-ticker>small{grid-column:1/-1;grid-row:2}.operation-ticker em{grid-column:2;grid-row:1}
}
@media(prefers-reduced-motion:reduce){.service-panel[data-service-slide],.service-carousel-controls i,.form-progress i,[data-card-rotator]>article{transition:none!important}.service-panel[data-service-slide].is-live,[data-card-rotator]>article.is-live{transform:none}}